/* =========================================================
 * modal.css
 * Styles para el modal de advertencia de Términos y Edad
 * ========================================================= */

/* 1. Overlay: capa semitransparente que cubre toda la pantalla */
.modal-overlay {
  position: fixed;
  inset: 0;                                 /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.75);    /* Negro con 75% de opacidad */
  display: flex;                            /* Centrado con Flexbox */
  align-items: center;
  justify-content: center;
  z-index: 9999;                            /* Por encima de todo */
}

/* 2. Contenedor del Modal */
.modal {
  background-color: var(--clr-surface);    /* Fondo blanco */
  color: var(--clr-text);                   /* Texto principal */
  width: 90%;                               /* Ocupa 90% del ancho de viewport */
  max-width: 600px;                         /* No más ancho de 600px */
  padding: var(--sp-6);                     /* Espaciado interno */
  border-radius: var(--radius-m);           /* Bordes redondeados */
  box-shadow: var(--shadow-lg);             /* Sombra profunda */
  text-align: center;                       /* Centrado de texto */
  overflow: hidden;                         /* Evita desbordes internos */
}

/* 3. Tipografía del Modal */
.modal h2 {
  font-size: var(--fs-700);                 /* 2rem */
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);               /* Separación inferior */
}

.modal p {
  font-size: var(--fs-300);                 /* 1rem */
  line-height: 1.5;
  margin-bottom: var(--sp-6);               /* Separación inferior */
}

/* 4. Botones dentro del Modal */
.modal-buttons {
  display: flex;
  gap: var(--sp-4);                         /* Espacio entre botones */
  justify-content: center;
  flex-wrap: wrap;                          /* En pantallas muy estrechas, permiten envoltura */
}

.modal-buttons .btn {
  white-space: nowrap;                      /* Mantener texto en una sola línea */
  padding: var(--sp-2) var(--sp-4);         /* Espaciado interno */
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

/* Botón primario: aceptar */
.btn--primary {
  background-color: var(--clr-accent);
  color: var(--clr-surface);
  border: none;
}

.btn--primary:hover {
  background-color: var(--clr-burgundy);
}

/* Botón secundario: rechazar */
.btn--secondary {
  background-color: transparent;
  color: var(--clr-text-secondary);
  border: 2px solid var(--clr-text-secondary);
}

.btn--secondary:hover {
  background-color: var(--clr-surface-alt);
}

/* 5. Ajustes Responsivos */
@media (max-width: 480px) {
  .modal {
    padding: var(--sp-4);                   /* Reducir padding en móviles */
  }

  .modal h2 {
    font-size: var(--fs-600);               /* 1.5rem */
  }

  .modal p {
    font-size: var(--fs-200);               /* 0.875rem */
    margin-bottom: var(--sp-4);
  }

  .modal-buttons {
    gap: var(--sp-3);                       /* Menor espacio entre botones */
  }

  .modal-buttons .btn {
    flex: 1;                                /* Botones a ancho completo */
    text-align: center;
  }
}