/* =====================================================================
   Autenticación y sesión · Cascarón compartido

   Lo que es igual en todas las pantallas del módulo (login, recuperar
   acceso, definir contraseña…): documento, barra superior, zona central
   y pie. Lo propio de cada pantalla vive en su propia hoja.

   Color, tipografía, espacio, radios y sombras vienen de los tokens del
   design system (public/assets/css/design-system/). Sin hex sueltos.
   ===================================================================== */

/* El design system fija `display` en .card y .field-msg. El `[hidden]` de la
   hoja del navegador no le gana a un selector de clase, así que se restablece
   para los elementos que estas pantallas muestran y ocultan. */
.card[hidden],
.field-msg[hidden] {
  display: none;
}

/* ---------- Documento ---------- */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

/* Momento de marca: pantallas sin barra ni pie que viven sobre el degradado.
   El degradado solo se usa aquí, nunca detrás de un formulario suelto. */
.auth-body--marca {
  background: var(--tia-grad-brand);
}

/* ---------- Barra superior ---------- */
.auth-topbar {
  flex: none;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.auth-brand:hover { text-decoration: none; }

/* Logo horizontal de la barra (turing_logo_h_claro / _oscuro.png). */
.auth-brand__mark {
  flex: none;
  display: block;
}

.auth-brand__mark img {
  width: auto;
  height: 40px;
}

/* ---------- Logo según el tema ----------
   Las pantallas de auth pintan el logo en dos versiones: .auth-logo--claro
   (texto "Turing-IA" azul marino) y .auth-logo--oscuro (texto blanco).
   Se muestra una u otra con el mismo criterio que tokens.css: el
   data-theme fijado o, si no hay, el tema del sistema. */
.auth-logo--oscuro { display: none; }

:root[data-theme="dark"] .auth-logo--claro { display: none; }
:root[data-theme="dark"] .auth-logo--oscuro { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth-logo--claro { display: none; }
  :root:not([data-theme="light"]) .auth-logo--oscuro { display: block; }
}

.auth-brand__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}

/* ---------- Zona central ---------- */
.auth-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--sp-10) var(--gutter);
}

/* Para pantallas de una sola card, que va centrada también en vertical. */
.auth-main--centrado { align-items: center; }

/* ---------- Enlace de apoyo ---------- */
.auth-link {
  font-size: var(--text-sm);
  color: var(--link);
}

/* ---------- Mostrar / ocultar contraseña ----------
   El cascarón con sesión tiene el mismo botón como .campo-revelar
   (modulos/app/patterns.css). Si cambia uno, cambia el otro. */
.auth-reveal {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  cursor: pointer;
}

.auth-reveal:hover { color: var(--text-2); }

.auth-reveal svg {
  width: 18px;
  height: 18px;
}

/* ---------- Pie ---------- */
.auth-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}

.auth-footer__legal,
.auth-footer__links {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* ---------- Puntos de quiebre del design system ---------- */
@media (max-width: 600px) {
  .auth-main { padding: var(--sp-6) var(--sp-4); }

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