/* ==========================================================================
   AUTH — registro, entrar, recuperar, verificar y cambio de clave.

   Se carga DESPUES de base.css, que ya trae los tokens, el reset, .btn y el
   componente .campo. Aca solo va lo propio de estas pantallas.

   Por que existe este archivo: las vistas de views/auth/ y su layout usan un
   vocabulario `auth-*` que no estaba escrito en ninguna hoja, y el layout
   cargaba panel.css, que es de otra cosa. Resultado: el registro y el login se
   servian sin estilo. Se escribio el CSS en vez de reescribir seis vistas
   porque el marcado ya estaba bien resuelto y esas vistas tienen logica de
   errores que no vale la pena arriesgar.

   Paleta: blanca en su mayoria, azul de marca y plateado en bordes y brillos
   (DISENO §2). El plateado NUNCA rellena un area grande: ahi se ve gris sucio.
   ========================================================================== */

.s-panel { background: var(--sup-1); }

.cuerpo-auth {
  min-height: 100dvh;
  background: var(--sup-1);
  color: var(--txt);

  /* OJO, ESTO NO ES DECORATIVO. base.css pinta .btn-primario con var(--p), y
     su --p de :root apunta a --showroom-primary, que solo existe dentro de un
     showroom con colores propios. En marketing la marca la presta la clase
     .mk; aca no hay ninguna, asi que sin estas dos lineas el boton de
     "Crear cuenta" se queda sin color de fondo. */
  /* Es el mismo #0E4FD1 de la portada. Que el botón de "Crear cuenta" salga de
     otro azul que el de la página desde la que se llegó es la clase de detalle
     que hace dudar a alguien justo antes de dejar su correo. */
  --p:     #0E4FD1;
  --p-txt: #ffffff;
}

/* Sin variante oscura: el layout de auth manda `data-tema="claro"` por la
   misma razón que el sitio público. Ver views/layout/auth.php. */

/* --------------------------------------------------------------------------
   1. Rejilla — marca a la izquierda, formulario a la derecha
   -------------------------------------------------------------------------- */

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

/* La columna de marca solo aparece cuando hay ancho de sobra. El layout ya la
   marca aria-hidden, asi que esconderla no le quita nada a nadie. */
@media (min-width: 1024px) {
  .auth { grid-template-columns: minmax(380px, 42%) 1fr; }
}

/* --------------------------------------------------------------------------
   2. Columna de marca
   -------------------------------------------------------------------------- */

.auth-marca {
  display: none;
  position: relative;
  overflow: hidden;
  padding: var(--e-8) var(--e-7);
  color: #fff;
  /* Marino de la portada con un halo azul arriba: da profundidad sin foto y es
     el mismo par de colores del bloque final de la landing (#0A2A5C/#0B2141),
     así que quien viene de ahí a registrarse no cambia de mundo. */
  background:
    radial-gradient(ellipse at 18% 0%, color-mix(in oklab, #0E4FD1 62%, transparent) 0%, transparent 58%),
    linear-gradient(150deg, #0A2A5C 0%, #0B2141 100%);
}
@media (min-width: 1024px) {
  .auth-marca { display: grid; align-content: center; }
}

/* Velo plateado diagonal: es lo que evita que el degradado se vea plano. */
.auth-marca::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .12) 0%, transparent 42%, transparent 70%, rgb(255 255 255 / .06) 100%);
}

.auth-marca-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  max-width: 42ch;
}

.auth-logo {
  font-size: var(--t-h1);
  font-weight: var(--peso-titulo);
  letter-spacing: -.02em;
}

.auth-lema {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem);
  line-height: 1.35;
  color: rgb(255 255 255 / .90);
}

.auth-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: rgb(255 255 255 / .82);
}
.auth-lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}
/* Marca de verificacion decorativa: el hecho lo comunica el texto. */
.auth-lista li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgb(255 255 255 / .16);
  border: var(--b-grueso) solid rgb(255 255 255 / .55);
}

/* --------------------------------------------------------------------------
   3. Columna del formulario
   -------------------------------------------------------------------------- */

.auth-panel {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: var(--e-4);
  padding-top: calc(var(--e-4) + env(safe-area-inset-top));
  padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
}

.auth-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--tactil);
}

.auth-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--tactil);
  padding-inline: var(--e-2);
  border-radius: var(--r-md);
  color: var(--txt-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-enfasis);
  text-decoration: none;
}
.auth-volver:hover { color: var(--txt); background: var(--sup-2); }

.auth-idioma { margin-left: auto; }

/* La tarjeta: blanca, con un canto plateado que la despega del fondo. */
.auth-tarjeta {
  width: min(440px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  border-radius: var(--r-lg);
  border: var(--b-fino) solid var(--borde);
  background: var(--sup-0);
  box-shadow:
    0 1px 2px oklch(24% .028 255 / .05),
    0 12px 32px oklch(24% .028 255 / .10);
}
/* Sin outline al enfocar por programa: la tarjeta recibe foco al cargar
   (tabindex="-1") y un anillo azul alrededor de todo el formulario asusta. */
.auth-tarjeta:focus { outline: none; }

.auth-pie {
  text-align: center;
  padding-block: var(--e-4);
}

/* --------------------------------------------------------------------------
   4. Contenido de cada pantalla
   -------------------------------------------------------------------------- */

.auth-titulo {
  font-size: var(--t-h1);
  font-weight: var(--peso-titulo);
  letter-spacing: -.015em;
}

.auth-intro {
  font-size: var(--t-sm);
  color: var(--txt-2);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.auth-form .btn { width: 100%; }

/* Enlace de abajo: "¿ya tienes cuenta?" */
.auth-alterna {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--txt-2);
}
.auth-alterna a {
  color: var(--p, oklch(56% .16 258));
  font-weight: var(--peso-enfasis);
}

/* Separador "o" entre el boton de Google y el formulario de correo. */
.auth-separador {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.auth-separador::before,
.auth-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);
}

/* Icono grande de las pantallas de resultado (verificar, clave cambiada). */
.auth-icono {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ok) 14%, transparent);
  color: var(--ok);
  font-size: 1.6rem;
  line-height: 1;
}
.auth-icono-error {
  background: color-mix(in oklab, var(--error) 14%, transparent);
  color: var(--error);
}

/* --------------------------------------------------------------------------
   5. Avisos
   -------------------------------------------------------------------------- */

.auth-aviso {
  padding: var(--e-3);
  border-radius: var(--r-md);
  border: var(--b-fino) solid var(--borde);
  background: var(--sup-2);
  font-size: var(--t-sm);
}
.auth-aviso-ok    { border-color: var(--ok);    background: var(--ok-suave); }
.auth-aviso-error { border-color: var(--error); background: var(--error-suave); }

/* --------------------------------------------------------------------------
   6. Piezas de campo propias de auth
   base.css ya trae .campo, .campo__etiqueta, .campo__input y .campo__error.
   -------------------------------------------------------------------------- */

/* Etiqueta con enlace al lado: "Contraseña        ¿La olvidaste?" */
.campo-fila-etiqueta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.campo-enlace {
  font-size: var(--t-sm);
  color: var(--p, oklch(56% .16 258));
  font-weight: var(--peso-enfasis);
}

/* Campo con boton dentro (el ojo de la contraseña). El padding derecho del
   input deja el hueco; sin el, el texto pasa por debajo del boton. */
.campo-conboton { position: relative; }
.campo-conboton .campo__input { padding-right: 52px; }

.campo-ojo {
  position: absolute;
  right: var(--e-1);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tactil);
  height: var(--tactil);
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--txt-3);
}
.campo-ojo:hover { color: var(--txt); background: var(--sup-2); }
.campo-ojo[hidden] { display: none; }

/* Trampa para robots: fuera de pantalla y fuera del lector. No usar
   .oculto-visual, que deja el campo audible y un lector lo anunciaria como uno
   mas que rellenar. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. Tramos chicos — se quita, no se encoge
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {
  .auth-tarjeta {
    padding: var(--e-5) var(--e-4);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .cuerpo-auth { background: var(--sup-0); }
}

@media (max-width: 379.98px) {
  .auth-panel { padding-inline: var(--e-3); }
  .auth-volver span { display: none; }   /* la flecha sola basta */
}