/* ============================================================
   CÁPSULAS GAMIFICADAS — PANTALLA DE AUTENTICACIÓN
   ------------------------------------------------------------
   index.html: una sola página con tres vistas (login / registro /
   recuperar) que se intercambian sin recargar, más el paso de
   completar perfil tras el primer ingreso.

   Layout: un marco redondeado partido en dos. A la izquierda la
   presentación del producto; a la derecha una TARJETA que flota
   sobre esa superficie y contiene el lockup de marca, el formulario
   de turno y el pie. Todo el contenido de la tarjeta va centrado.

   La tarjeta es cáscara de marca (§2 de coherencia-edu-games.md):
   la misma estructura con cualquier tema. Lo que cambia por tema son
   los VALORES — en pixel los radios valen 0 y el bisel vuelve, así
   que el mismo marcado degrada solo a un rectángulo duro sin una
   sola regla scopeada por tema, salvo la tipográfica del final.
   ============================================================ */

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0px, 2.2vw, 28px);
  background: var(--bg-2);
}

/* Marco: las dos columnas viven acá adentro, recortadas por el
   radio. `overflow: hidden` es lo que hace que el degradé del hero
   respete la esquina redondeada. */
.auth__frame {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: calc(100dvh - 2 * clamp(0px, 2.2vw, 28px));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--outline-ring), var(--drop-lg);
}

/* ─── Columna izquierda: la parte "producto" ──────────────── */
.auth__hero {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-8) var(--sp-7);
  overflow: hidden;
  background: var(--hero-bg);
}

/* Paisaje de bloques al pie del hero, dibujado solo con gradientes.
   Un tema sin identidad Minecraft lo apaga con --hero-landscape: none. */
.auth__hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background-image: var(--hero-landscape);
  background-size: 100% 32px, 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom 44px left, bottom left;
  opacity: 0.8;
  pointer-events: none;
}

.auth__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 460px;
}

.auth__hero-title {
  font-size: clamp(18px, 2.6vw, 30px);
  line-height: 1.6;
  color: var(--ink);
}

.auth__hero-title em {
  font-style: normal;
  color: var(--grass-ink);
}

.auth__hero-text {
  color: var(--ink-2);
  font-size: 16px;
}

.auth__hero-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth__hero-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-pixel);
  font-size: 20px;
  color: var(--ink-2);
}

.auth__hero-item span[aria-hidden='true'] {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--panel-2);
  box-shadow: var(--chip-ring), var(--bevel-out);
  font-size: 18px;
}

/* ─── Columna derecha: el lienzo donde flota la tarjeta ───── */
.auth__side {
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-2);
  overflow-y: auto;
}

/* ─── La tarjeta ──────────────────────────────────────────── */
.auth__card {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(var(--sp-5), 3.4vw, var(--sp-7)) clamp(var(--sp-4), 3vw, var(--sp-6));
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--outline-ring), var(--drop-lg);
  text-align: center;
}

/* El interruptor de modo se descuelga a la esquina: en el diseño
   nuevo el tope de la tarjeta es del lockup de marca, y meter el
   botón en la misma fila lo descentraba. */
.auth__toggle {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 34px;
  height: 34px;
  font-size: 15px;
}

/* ─── Lockup de marca ─────────────────────────────────────── */
.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

/* Mismo tratamiento que en la topbar: el wordmark es tinta oscura
   sobre transparente, así que en modo oscuro se pasa a blanco con el
   recurso que usa terralabs.ar en su pie. Cuelga del MODO y no del
   tema porque lo que decide si se ve es cuán oscuro está el fondo. */
.auth__brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

:root[data-mode='dark'] .auth__brand-logo {
  filter: brightness(0) invert(1);
}

/* Sub-etiqueta de línea. En terralabs.ar va en mono, en el color de
   acento y con letter-spacing — ver .brand .brand-sub en su
   theme.css. Acá se expresa con el rol "mono/dato" del contrato, así
   que cada tema la resuelve con SU monoespaciada. */
.auth__brand-sub {
  font-family: var(--font-pixel);
  font-size: var(--fs-display-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ─── Vistas ──────────────────────────────────────────────── */
/* Cada bloque es una vista; solo una está visible a la vez. */
.auth-view[hidden] {
  display: none;
}

.auth-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* El titular grande de la tarjeta. La escala es de COMPONENTE (no un
   token nuevo): el contrato fija el ritmo tipográfico de la app, y
   esta es una portada, no una vista más del dashboard. */
.auth-view__title {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.auth-view__subtitle {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  margin-top: calc(-1 * var(--sp-2));
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Los campos pierden el label VISIBLE (sigue en el DOM como
   .sr-only) y se apoyan en el placeholder, como en el diseño de
   referencia. Por eso el input crece: es el único elemento que
   nombra al campo, así que tiene que pesar en la composición. */
.auth-form .input {
  padding: 14px var(--sp-4);
  border-radius: var(--radius-pill);
  text-align: left;
}

.auth-form .input-group .input {
  padding-right: 46px;
}

/* El botón principal es la acción de la pantalla: el tamaño de
   etiqueta por defecto (--fs-display-xs, pensado para botones de
   barra) se le perdía adentro. */
.auth-form .btn--block {
  padding: 14px var(--sp-5);
  border-radius: var(--radius-pill);
  margin-top: var(--sp-1);
  font-size: var(--fs-display-sm);
}

/* Press Start 2P a 12px ya es ancho: "Entrar al dashboard" no entra
   en la tarjeta, así que en pixel la etiqueta vuelve a su tamaño. */
:root[data-theme='pixel'] .auth-form .btn--block {
  font-size: var(--fs-display-xs);
}

/* El error queda alineado con el texto del campo, no centrado: se
   lee como una nota del input, no como un cartel de la tarjeta.
   Y mientras está vacío no ocupa alto: el diseño de referencia tiene
   los campos juntos, y reservar 1.2em por campo los separaba de más. */
.auth-view .field__error {
  min-height: 0;
}

.auth-view .field__error:not(:empty) {
  text-align: left;
  padding-inline: var(--sp-4);
  margin-top: var(--sp-1);
}

/* Botón de texto para cambiar de vista (¿olvidaste tu contraseña?). */
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-decoration: none;
}
.link-btn:hover,
.link-btn:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Separador y acceso con proveedor ────────────────────── */
/* Sin líneas a los costados: en el diseño de referencia es apenas
   una leyenda entre el botón principal y los proveedores. */
.auth-divider {
  font-size: var(--fs-body-sm);
  color: var(--muted);
  margin: calc(-1 * var(--sp-2)) 0;
}

.auth-social {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
}

/* Proveedor como botón circular de icono. Hoy solo hay Google; la
   fila está pensada para que sumar otro sea agregar un <button>. */
.btn--social {
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: var(--radius-pill);
}

.btn--google {
  --btn-bg: var(--google-btn-bg);
  --btn-ink: var(--google-btn-ink);
}

.btn--google svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ─── Medidor de fuerza de contraseña ─────────────────────── */
.pw-strength {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-4);
}

.pw-strength__track {
  flex: 1;
  display: flex;
  gap: 3px;
}

.pw-strength__seg {
  flex: 1;
  height: 8px;
  background: var(--panel-3);
  box-shadow: var(--chip-ring);
  transition: background var(--dur-fast) var(--ease);
}

.pw-strength[data-score='1'] .pw-strength__seg:nth-child(-n + 1) { background: var(--redstone); }
.pw-strength[data-score='2'] .pw-strength__seg:nth-child(-n + 2) { background: var(--copper); }
.pw-strength[data-score='3'] .pw-strength__seg:nth-child(-n + 3) { background: var(--gold); }
.pw-strength[data-score='4'] .pw-strength__seg                   { background: var(--grass); }

.pw-strength__label {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--muted);
  min-width: 72px;
  text-align: right;
}

/* ─── Aviso de modo demo (sin credenciales de Firebase) ───── */
.mode-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(var(--gold-rgb), 0.12);
  border-left: var(--px) solid var(--gold);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
  text-align: left;
}

.mode-banner strong {
  color: var(--gold-ink);
}

.mode-banner[hidden] {
  display: none;
}

/* ─── Perfil: grilla de dos columnas ──────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.profile-grid > .field--full {
  grid-column: 1 / -1;
}

/* ─── Ajuste tipográfico de pixel ─────────────────────────────
   Press Start 2P mide cerca del doble por carácter que una sans, así
   que el titular de 40px que el diseño pide se le va de la tarjeta y
   parte "Iniciar sesión" en tres renglones. Es el único lugar del
   archivo que necesita saber qué tema está activo.
   ------------------------------------------------------------ */
:root[data-theme='pixel'] .auth-view__title {
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.5;
  letter-spacing: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .auth {
    padding: 0;
  }
  .auth__frame {
    grid-template-columns: 1fr;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  /* El hero se reduce a una banda: la tarjeta es lo que se vino a
     usar, y en un teléfono tiene que entrar sin scroll de más. */
  .auth__hero {
    padding: var(--sp-6) var(--sp-5);
    min-height: 200px;
  }
  .auth__hero-list,
  .auth__hero-text {
    display: none;
  }
  .auth__hero::after {
    height: 90px;
  }
  .auth__side {
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
  }
}

@media (max-width: 560px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .auth__card {
    padding: var(--sp-5) var(--sp-4);
  }
  .auth__side {
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
  }
}