/* Modal de acceso/registro de las páginas públicas. Es la misma pantalla de
   /auth/login/ metida en una modal, así que usa el mismo patrón que
   css/auth-shell.css: campos de 8px, botón principal en píldora y foco violeta.
   Va todo bajo #authModal para no tocar el resto de la página pública. */

#authModal .modal-content {
  border: none;
  border-radius: 16px;
}

/* El título va oculto (las pestañas cumplen esa función), así que el header queda
   solo con la X: sin borde y apretado, para no dejar una franja vacía arriba. */
#authModal .modal-header {
  border-bottom: 0;
  padding: 14px 16px 0;
  min-height: 0;
}

#authModal .modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

#authModal .modal-body { padding: 20px 24px 24px; }

/* Pestañas Iniciar sesión / Crear cuenta */
#authModal .btn-group .btn {
  height: 42px;
  border-color: #E5E7EB;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
}

#authModal .btn-group .btn:first-child { border-radius: 50rem 0 0 50rem; }
#authModal .btn-group .btn:last-child { border-radius: 0 50rem 50rem 0; }

/* La pestaña activa va SÓLIDA. Con !important a propósito: theme-default.css de
   Sneat pinta `.btn-outline-primary.active` con `background:#f4f3fe !important` y
   `color:#7367f0 !important`, así que esta regla, aunque tiene más especificidad,
   perdía y las dos pestañas se veían casi iguales (un lila casi blanco contra
   transparente, con el mismo color de texto: no se distinguía cuál estaba activa).
   Ver docs/ux/theming.md, Gotcha 1. */
#authModal .btn-group .btn.active {
  background: #6D28D9 !important;
  border-color: #6D28D9 !important;
  color: #ffffff !important;
}

#authModal .form-label {
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

#authModal .form-control {
  height: 48px;
  padding: 0 14px;
  /* 16px: menos que eso, iOS hace zoom al enfocar el campo. */
  font-size: 1rem;
  color: #111827;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

#authModal .form-control:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

/* Las casillas del código traen su propio tamaño en auth-verificacion.css. */
#authModal .otp-digit { height: auto; }

#authModal .form-check-input:checked {
  background-color: #6D28D9;
  border-color: #6D28D9;
}

#authModal .btn-primary {
  height: 50px;
  border: none;
  border-radius: 50rem;
  background: #6D28D9;
  font-size: 0.9375rem;
  font-weight: 600;
}

#authModal .btn-primary:hover { background: #5B21B6; }

/* Apagado en gris: así se nota que todavía no se puede. Va con !important porque
   compiten dos reglas que también lo traen — el tema de Sneat
   (.btn-primary:disabled) y la paleta de la academia, que pintaba el botón con el
   color del local aunque estuviera apagado. */
#authModal .btn-primary:disabled {
  background: #EFEFF3 !important;
  color: #9CA3AF !important;
  opacity: 1;
  cursor: not-allowed;
}

#authModal .alert {
  border: none;
  border-radius: 8px;
}

#authModal .alert-danger {
  background: #FEE2E2;
  color: #B91C1C;
}

/* Google y Apple: los partials traen sus estilos en línea, acá solo se empareja
   la altura y el grosor del borde con los campos de arriba. */
#authModal .gauth-wrap,
#authModal .appleauth-wrap { margin: 1rem 0 0 !important; }

#authModal .gauth-wrap .btn,
#authModal .appleauth-wrap .btn {
  height: 48px;
  border-width: 1px !important;
  font-size: 0.875rem;
}