/*
 * BIG AUTO — Autenticacion: contrato visual de /Pages/Autenticacion
 *
 * Fuente de verdad de los valores: design-system/MASTER.md + wwwroot/css/tokens.css.
 * Se carga UNA vez en App.razor, despues de tokens.css. No se duplica por pagina:
 * MASTER §7.7 — "un solo componente, no una clase por pagina".
 *
 * Pantallas que lo consumen: Login, Register, ForgotPassword,
 * ResendEmailConfirmation, RegisterConfirmation, ExternalLogin.
 *
 * Documentacion: Pages/Autenticacion/CONVENCIONESAutenticacion.md
 */

/* ══ 1. Estructura ═══════════════════════════════════════════════════════
   .auth-page    Centra la tarjeta en el viewport. El min-height va AQUI y
                 no en la tarjeta: en la tarjeta estiraba el panel azul y
                 dejaba un vacio enorme arriba y abajo del formulario.
   .auth-shell   Tarjeta de dos columnas (marca + formulario). En movil
                 colapsa a una columna y el panel de marca se retira.
   ════════════════════════════════════════════════════════════════════════ */

.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 110px);
  padding: var(--ba-space-12) var(--ba-space-4);
  background: var(--ba-surface);
}

.auth-shell {
  display: flex;
  width: 100%;
  max-width: 1040px;
  border-radius: var(--ba-radius-xl);
  overflow: hidden;
  box-shadow: var(--ba-shadow-xl);
  background: var(--ba-surface);
}

/* ══ 2. Panel de marca ══════════════════════════════════════════════════
   Degradado de los dos azules canonicos de MASTER §3.1. Los valores viejos
   (#0f1e4d / #1a2f6e / #24408f) se retiraron con el cambio de paleta: el
   sistema declara #122A5C y #1B408E como los unicos azules de marca.
   ════════════════════════════════════════════════════════════════════════ */

.auth-brand {
  flex: 0 0 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ba-space-12) var(--ba-space-8);
  background: linear-gradient(160deg, var(--ba-primary-dark) 0%, var(--ba-primary) 100%);
  color: var(--ba-surface);
}

.auth-brand img {
  height: 40px;
  align-self: flex-start;
  margin-bottom: var(--ba-space-6);
}

.auth-brand h1 {
  font-size: var(--ba-text-h2);
  font-weight: 700;
  margin-bottom: var(--ba-space-6);
}

.auth-brand hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin-bottom: var(--ba-space-4);
}

.auth-brand p.auth-brand-desc {
  font-size: var(--ba-text-sm);
  opacity: .75;
  line-height: 1.55;
}

.auth-brand .auth-hashtag {
  font-size: var(--ba-text-sm);
  font-weight: 700;
  opacity: .85;
  margin-top: var(--ba-space-4);
}

/* Icono del panel de marca (el sobre de ResendEmailConfirmation).
   Hereda el color del panel: el SVG lleva fill="currentColor". */
.auth-brand .auth-brand-icon {
  height: 84px;
  align-self: flex-start;
  margin-bottom: var(--ba-space-6);
  color: var(--ba-surface);
}

/* ══ 3. Panel de formulario ══════════════════════════════════════════════ */

.auth-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ba-space-8) var(--ba-space-12);
  background: var(--ba-surface);
}


/* ── Nota sobre modificadores ─────────────────────────────────────────────
   Este archivo se carga DOS veces: por el <link> de App.razor y dentro de
   `output/site.min.css`, que lo engloba (bundleconfig.json mete
   wwwroot/css/*.css, en orden alfabetico, y se regenera solo). Ademas
   `bootstrap.min.css` se carga DESPUES del contrato. Por eso ningun
   modificador puede depender de "ir despues": todos se escriben con DOBLE
   clase (.base.base--mod) para ganar por especificidad (0,2,0) y no por
   orden (0,1,0). Detalle completo en CONVENCIONESAutenticacion.md §1.1. */

/* Modificador para pantallas de ESTADO, no de formulario (revisa tu correo,
   enlace invalido...): sin formulario la columna se leeria descuadrada a la
   izquierda. Solo centra; no cambia tipografia ni espaciado. */
.auth-form-panel.auth-form-panel--center {
  text-align: center;
  align-items: center;
}

.auth-title {
  font-size: var(--ba-text-h2);
  font-weight: 700;
  color: var(--ba-primary-dark);
  margin-bottom: var(--ba-space-1);
}


.auth-subtitle {
  font-size: var(--ba-text-sm);
  color: var(--ba-text-muted);
  margin-bottom: var(--ba-space-6);
}

/* Estados de error (cuenta bloqueada, enlace invalido, usuario no encontrado).
   La pantalla entera comunica el fallo, no un campo: por eso el rojo va en el
   titular y en el subtitulo, y no solo dentro de un auth-alert. */
.auth-title.auth-title--error {
  color: var(--ba-danger);
}

.auth-subtitle.auth-subtitle--error {
  color: var(--ba-danger);
}


/* Imagen ilustrativa dentro del panel blanco (ForgotPassword,
   RegisterConfirmation, ForgotPasswordConfirmation). Decorativa: el titulo ya
   dice lo mismo, asi que se marca aria-hidden en el markup y no repite el
   texto para el lector de pantalla.

   OJO con el margen: la imagen se alinea con la COLUMNA de texto, no se
   centra por su cuenta. Antes llevaba `margin: 0 auto` fijo, que centraba la
   imagen aunque el panel estuviera alineado a la izquierda: en esas pantallas
   la imagen quedaba al centro y el texto a la izquierda, y se leia como
   maqueta rota. Ahora el centrado lo decide el panel (--center), no la
   imagen. */
.auth-hero-img {
  display: block;
  height: 96px;
  width: auto;
  margin: 0 0 var(--ba-space-4);
}

/* En un panel centrado, la imagen se centra con el resto. (0,3,0): gana
   aunque .auth-hero-img se moviera de sitio. */
.auth-form-panel.auth-form-panel--center .auth-hero-img {
  margin-inline: auto;
}

/* Texto centrado con icono de Material (RegisterConfirmation). */
.auth-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-space-2);
  font-size: var(--ba-text-base);
  color: var(--ba-text);
  text-align: center;
  margin-bottom: var(--ba-space-6);
}

.auth-message .auth-message-icon {
  color: var(--ba-primary);
  flex-shrink: 0;
}

/* ══ 4. Campos ══════════════════════════════════════════════════════════
   MASTER §8.3: alto minimo 48px y texto de 16px — por debajo, Safari en iOS
   hace zoom automatico al enfocar.
   MASTER §3.3: el borde de un control es --ba-border-input (4.54:1), no
   --ba-border (1.30:1). El valor anterior (#d1d5db) no delimitaba el area
   de escritura.
   MASTER §7.4: en campos el foco es BORRE REFORZADO, sin anillo — rodear el
   campo con un marco se lee como error de maquetacion, no como foco.
   ════════════════════════════════════════════════════════════════════════ */

.auth-field {
  margin-bottom: var(--ba-space-4);
}

.auth-field label {
  display: block;
  font-size: var(--ba-text-sm);
  font-weight: 600;
  color: var(--ba-text);
  margin-bottom: var(--ba-space-2);
}

/* Campo — dos formas de entrar, UNA sola definicion.

   1. .auth-input es la via explicita: TODA la pagina debe llevarlo.
   2. La red de seguridad (`.auth-field input:not(...)`) cubre cualquier input
      dentro de un .auth-field aunque se olvide la clase.

   Por que no se selecciona por [type="text"]: BlazorInputText OMITE el
   atributo `type` cuando es el valor por defecto, asi que
   `.auth-field input[type="text"]` nunca casaba con esos campos y salian sin
   borde ni alto. Ver CONVENCIONESAutenticacion.md 4. */
.auth-input,
.auth-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-height: 48px;
  padding: var(--ba-space-3) var(--ba-space-3);
  border: 1px solid var(--ba-border-input);
  border-radius: var(--ba-radius-sm);
  font-size: var(--ba-text-base);
  font-family: inherit;
  line-height: 1.4;
  color: var(--ba-text);
  background: var(--ba-surface);
  outline: none;
  appearance: none;
  transition: border-color var(--ba-duration-fast) var(--ba-easing),
              box-shadow var(--ba-duration-fast) var(--ba-easing);
}

/* Foco: anillo de dos capas (MASTER 9). El inset sustituye al anillo
   exterior para no dibujar la caja completa del input. */
.auth-input:focus-visible,
.auth-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: var(--ba-primary);
  box-shadow: inset 0 0 0 1px var(--ba-primary);
}

.auth-input::placeholder,
.auth-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])::placeholder {
  color: var(--ba-text-muted);
  opacity: 1;
}

/* Estado de error del servidor: el borde se marca en rojo funcional, no solo
   con texto (MASTER 8.3). */
.auth-input[aria-invalid="true"],
.auth-field input[aria-invalid="true"] {
  border-color: var(--ba-danger);
}

/* Error de validacion junto al campo (MASTER §8.3: bajo el campo, en rojo
   funcional, asociado al campo para lectores de pantalla). */
.auth-error {
  display: block;
  font-size: var(--ba-text-sm);
  font-weight: 600;
  color: var(--ba-danger);
  margin-top: var(--ba-space-1);
}

.auth-error:empty {
  display: none;
}

/* ══ 5. Mostrar / ocultar contrasena ═════════════════════════════════════
   Area tactil de 44x44 (MASTER §7.3). Se posiciona con transform, no con
   top:50px + margin-top negativo: el desplazamiento dependia de la altura
   del label y se desalineaba al cambiar la tipografia.
   ════════════════════════════════════════════════════════════════════════ */

.auth-field.password-wrapper input {
  padding-right: 48px;
}

.password-wrapper {
  position: relative;
}

.toggle-button {
  position: absolute;
  top: 65%;
  right: var(--ba-space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: var(--ba-z-raised);
  background: none;
  border: none;
  padding: 0;
  border-radius: var(--ba-radius-sm);
}

.eye-icon {
  width: 20px;
  height: 20px;
  color: var(--ba-text-muted);
  pointer-events: none;
}

/* ══ 6. Botones ═════════════════════════════════════════════════════════
   MASTER §7.2: relleno azul de marca = accion principal, una sola por vista.
   MASTER §7.3: el area tactil no baja de 44px aunque el texto se compacte.
   ════════════════════════════════════════════════════════════════════════ */

.auth-submit {
  width: 100%;
  min-height: 48px;
  padding: var(--ba-space-3);
  border: none;
  border-radius: var(--ba-radius-sm);
  background: var(--ba-primary);
  color: var(--ba-surface);
  font-size: var(--ba-text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--ba-duration-fast) var(--ba-easing);
}

.auth-submit:hover {
  background: var(--ba-primary-hover);
}

.auth-submit:active {
  background: var(--ba-primary-dark);
  transition: none;
}

/* Accion secundaria: contorno azul sobre blanco (MASTER §7.2, nivel 2).
   Sustituye al <button class="btn"> sin estilo de Bootstrap que usaban
   "Reenviar email de confirmacion" y "Volver". */
.auth-submit-outline {
  width: 100%;
  min-height: 48px;
  padding: var(--ba-space-3);
  border: 1px solid var(--ba-primary);
  border-radius: var(--ba-radius-sm);
  background: var(--ba-surface);
  color: var(--ba-primary);
  font-size: var(--ba-text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--ba-duration-fast) var(--ba-easing),
              color var(--ba-duration-fast) var(--ba-easing);
}

.auth-submit-outline:hover {
  background: var(--ba-primary);
  color: var(--ba-surface);
}

.auth-submit-outline:active {
  background: var(--ba-primary-dark);
  border-color: var(--ba-primary-dark);
  color: var(--ba-surface);
  transition: none;
}

/* ══ 7. Enlaces ══════════════════════════════════════════════════════════
   Nivel 3 de MASTER §7.2. Nunca rojo de marca para texto de error.
   ════════════════════════════════════════════════════════════════════════ */

.auth-link {
  color: var(--ba-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ba-duration-fast) var(--ba-easing);
}

.auth-link:hover {
  color: var(--ba-primary-hover);
  text-decoration: underline;
}

.auth-footer {
  text-align: center;
  margin-top: var(--ba-space-6);
  font-size: var(--ba-text-base);
  color: var(--ba-text);
}

.auth-footer-small {
  text-align: center;
  margin-top: var(--ba-space-2);
  font-size: var(--ba-text-sm);
  color: var(--ba-text-muted);
}

/* ══ 8. Avisos ══════════════════════════════════════════════════════════
   Cada estado lleva texto + fondo, nunca color solo (MASTER §3.4).
   Los pares fondo/texto son los de tokens.css §2.2, todos AA con holgura.
   ════════════════════════════════════════════════════════════════════════ */

.auth-alert {
  border-radius: var(--ba-radius-md);
  padding: var(--ba-space-3) var(--ba-space-4);
  font-size: var(--ba-text-base);
  line-height: 1.5;
  margin-bottom: var(--ba-space-4);
}

.auth-alert.auth-alert--info {
  background: var(--ba-info-bg);
  color: var(--ba-info-text);
  border: 1px solid var(--ba-info);
}

.auth-alert.auth-alert--success {
  background: var(--ba-success-bg);
  color: var(--ba-success-text);
  border: 1px solid var(--ba-success);
}

.auth-alert.auth-alert--error {
  background: var(--ba-red-50);
  color: var(--ba-danger);
  border: 1px solid var(--ba-danger);
}

.auth-alert:empty {
  display: none;
}

/* ══ 9. Fila de formulario y divisor ═════════════════════════════════════ */

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ba-space-3);
  margin-bottom: var(--ba-space-4);
  font-size: var(--ba-text-sm);
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: var(--ba-space-2);
  color: var(--ba-text);
}

/* Un solo objetivo tactil: la etiqueta y la casilla forman un area clicable
   continua, sin zona muerta entre el cuadrito y su texto (MASTER §8.3). */
.auth-remember input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--ba-space-3);
  margin: var(--ba-space-6) 0;
}

.auth-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--ba-border);
}

.auth-divider span {
  font-size: var(--ba-text-sm);
  color: var(--ba-text-muted);
  white-space: nowrap;
}

.auth-social {
  display: flex;
  gap: var(--ba-space-2);
}

.btn-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ba-space-2);
  min-height: 44px;
  padding: var(--ba-space-2) var(--ba-space-3);
  border: 1px solid var(--ba-border-input);
  border-radius: var(--ba-radius-sm);
  background: var(--ba-surface);
  color: var(--ba-text);
  font-size: var(--ba-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ba-duration-fast) var(--ba-easing),
              border-color var(--ba-duration-fast) var(--ba-easing);
}

.btn-social:hover {
  background: var(--ba-surface-alt);
  border-color: var(--ba-text-muted);
}

.btn-social svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ══ 10. Ayuda de escritorio ═════════════════════════════════════════════
   Solo movil: en escritorio la columna ya es corta y esta tarjeta solo la
   alargaria. El hueco que rellena existe bajo el breakpoint.
   ════════════════════════════════════════════════════════════════════════ */

.auth-ayuda {
  display: none;
  margin-top: var(--ba-space-4);
  padding: var(--ba-space-3);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-sm);
  background: var(--ba-surface-alt);
  font-size: var(--ba-text-sm);
  line-height: 1.55;
  color: var(--ba-text-muted);
}

/* ══ 11. Movil ══════════════════════════════════════════════════════════
   Breakpoint --ba-bp-md (768px). El DOM es el mismo: una sola maqueta
   responsive, sin deteccion de ancho por JS.
   ════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
  .auth-page {
    align-items: stretch;
    padding: 0;
  }

  .auth-shell {
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
  }

  /* El AppBar ya lleva el logo: el panel repetia la marca compitiendo con
     el rojo de la banda y gastaba scroll antes del formulario. */
  .auth-brand {
    display: none;
  }

  .auth-form-panel {
    padding: var(--ba-space-8) var(--ba-space-4) var(--ba-space-12);
  }

  .auth-ayuda {
    display: block;
  }

  .auth-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-social {
    flex-direction: column;
  }
}