/* ==========================================================================================
 * s360-acceso.css — Portada de acceso S360 (B4.3). CAPA VISUAL COMPARTIDA, nada más.
 * ==========================================================================================
 * La cargan las SEIS pantallas del flujo de acceso: login, recuperar-password, cambiar-password,
 * completar-correo, verificar-correo y bienvenida. Antes cada una copiaba la misma portada oscura
 * (con el radial morado y uno negro). Ahora el lenguaje visual vive aquí y cada página conserva solo
 * lo propio de su contenido o de su estado. Ningún JS, endpoint ni formulario depende de este archivo:
 * solo clases que ya existían y la envoltura de dos zonas.
 *
 * Norma: REDISENO_B4_FIRMA_VISUAL_v1.0 (N-6 marca de agua, N-9 degradado) + auditoría B4.3 v0.1.
 *   · Zona de IDENTIDAD: --gradient-identity a sangre (la excepción de «fondo grande» de la portada),
 *     logo blanco y la S como marca de agua ≤ 6 %. Sin texto sobre el degradado (N-9), sin morado,
 *     sin radiales ni brillos.
 *   · Zona FUNCIONAL: fondo claro y tarjeta blanca; botón primario azul SÓLIDO.
 *   · Escritorio ≥ 1024 px: dos zonas lado a lado. Móvil/tableta: banda de identidad arriba.
 *
 * 🔴 MOMENTOS S360: el botón, el foco y los enlaces se pintan con var(--m-boton|--m-foco|--m-enlace, …):
 *    un Momento activo los tematiza y sin Momento rige el token. El `fondo` estacional va en una capa
 *    fija con z-index -1, por eso la zona funcional NO lleva fondo propio (el color va en <body>): así
 *    el fondo del Momento se sigue viendo alrededor de la tarjeta, como antes.
 * ========================================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.acceso {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
}

/* ── Estructura: dos zonas ─────────────────────────────────────────────────────────────── */
.acceso__marco {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Zona de identidad. Móvil: banda superior compacta con el logo centrado. */
.acceso__identidad {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 28px 16px 44px;            /* abajo, aire para que la tarjeta monte encima */
  background: var(--gradient-identity);
}
.acceso__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 104px;
  height: auto;
}
/* La S: grande, abstracta, recortada por el borde y casi imperceptible (N-6, ≤ 6 %). Solo en la zona de
   identidad de escritorio; en la banda móvil competiría con el logo, así que no se muestra. */
.acceso__identidad::after {
  content: '';
  display: none;
  position: absolute;
  pointer-events: none;
  background: url('assets/marca/s360-isotipo-blanco.svg') no-repeat center / contain;
  opacity: 0.04;
}

/* Zona funcional: SIN fondo propio (ver la nota de Momentos). */
.acceso__trabajo {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 16px 32px;
}

/* ── Tarjeta ───────────────────────────────────────────────────────────────────────────── */
.acceso .card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-top: -24px;                  /* en la banda móvil, la tarjeta monta sobre el degradado */
  padding: 28px 22px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* ── Texto ─────────────────────────────────────────────────────────────────────────────── */
.acceso__eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.acceso h1 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-bottom: 6px;
}
.acceso .head { margin-bottom: 22px; }
.acceso .head p,
.acceso p.ayuda {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.acceso p.ayuda { margin-bottom: 20px; }

/* ── Campos ────────────────────────────────────────────────────────────────────────────── */
.acceso .form-group { margin-bottom: 18px; }
.acceso label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.acceso input[type="email"],
.acceso input[type="password"],
.acceso input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;                    /* 16 px: por debajo, iOS hace zoom al enfocar */
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-control);   /* contorno de control 3:1 (WCAG 1.4.11) */
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.acceso input[type="email"]:hover,
.acceso input[type="password"]:hover,
.acceso input[type="text"]:hover { border-color: var(--color-text-muted); }
/* Foco: anillo SÓLIDO de 2 px en el color de foco (o el del Momento). Sobre blanco el primario da 10:1;
   antes, sobre la tarjeta navy, el primario al 70 % daba 1,2:1. */
.acceso input[type="email"]:focus,
.acceso input[type="password"]:focus,
.acceso input[type="text"]:focus {
  border-color: var(--m-foco, var(--color-focus));
  outline: 2px solid var(--m-foco, var(--color-focus));
  outline-offset: 0;
}
.acceso input::placeholder { color: var(--color-text-muted); opacity: 1; }
.acceso .hint,
.acceso .req {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.acceso .hint { margin-top: 6px; }
.acceso .req  { margin: -6px 0 18px; }

/* ── Botón primario: azul SÓLIDO (N-9: nunca degradado en botones) ─────────────────────── */
.acceso .btn,
.acceso .btn-login {
  display: block;
  width: 100%;
  min-height: var(--touch-comfortable);
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--m-boton, var(--color-primary));
  color: var(--m-boton-texto, var(--color-on-primary));
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.acceso .btn:hover:not(:disabled),
.acceso .btn-login:hover:not(:disabled) { background: var(--m-boton, var(--color-primary-hover)); }
.acceso .btn:active:not(:disabled),
.acceso .btn-login:active:not(:disabled) { background: var(--m-boton, var(--color-primary-active)); transform: translateY(1px); }
.acceso .btn:focus-visible,
.acceso .btn-login:focus-visible { outline: 2px solid var(--m-foco, var(--color-focus)); outline-offset: 2px; }
.acceso .btn:disabled,
.acceso .btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

.acceso .spinner {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 8px;
  vertical-align: middle;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-on-primary);
  border-radius: 50%;
  animation: acceso-giro 0.7s linear infinite;
}
@keyframes acceso-giro { to { transform: rotate(360deg); } }

/* ── Enlaces secundarios (volver, cerrar sesión) ───────────────────────────────────────── */
.acceso .volver,
.acceso .logout {
  display: block;
  min-height: var(--touch-min);
  margin-top: 10px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}
.acceso .volver:hover,
.acceso .logout:hover { color: var(--m-enlace, var(--color-primary)); }
.acceso .volver:focus-visible,
.acceso .logout:focus-visible { outline: 2px solid var(--m-foco, var(--color-focus)); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Mensajes: semánticos del sistema ──────────────────────────────────────────────────────
   Cada pantalla ya tenía su variante de clase y su manera de mostrarlas (el JS no se toca):
     login           .error-msg / .info-msg      (el JS cambia style.display)
     recuperar/verif .msg + .error | .ok         (la clase muestra)
     cambiar/correo  .msg + .msg--err | .msg--ok (el JS cambia style.display)                       */
.acceso .msg,
.acceso .error-msg,
.acceso .info-msg {
  display: none;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.5;
}
.acceso .msg.error,
.acceso .msg.ok { display: block; }
.acceso .error-msg,
.acceso .msg.error,
.acceso .msg--err {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
}
.acceso .msg.ok,
.acceso .msg--ok {
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}
.acceso .info-msg {
  margin: 12px 0 0;
  background: var(--color-info-soft);
  border: 1px solid var(--color-info-border);
  color: var(--color-info);
}

/* ── Estados de las pantallas de enlace (recuperar, verificar) ─────────────────────────── */
.acceso .oculto { display: none; }
.acceso .cargando {
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ── Pie ───────────────────────────────────────────────────────────────────────────────── */
.acceso .footer-note {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-muted);
}
.acceso .footer-note a {
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
}
.acceso .footer-note a:hover { color: var(--m-enlace, var(--color-primary)); border-bottom-color: currentColor; }
.acceso .footer-note a:focus-visible { outline: 2px solid var(--m-foco, var(--color-focus)); outline-offset: 2px; }

/* ── Tableta (≥ 768 px): más aire, tarjeta centrada ───────────────────────────────────── */
@media (min-width: 768px) {
  .acceso__identidad { min-height: 140px; padding: 32px 24px 52px; }
  .acceso__logo { width: 116px; }
  .acceso__trabajo { padding: 0 24px 48px; }
  .acceso .card { margin-top: -28px; padding: 40px 40px 28px; }
}

/* ── Escritorio (≥ 1024 px): dos zonas lado a lado ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .acceso__marco { flex-direction: row; }
  .acceso__identidad {
    width: 42%;
    max-width: 620px;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 56px 64px;
  }
  .acceso__logo { width: 132px; }
  .acceso__identidad::after {
    display: block;
    width: 82%;
    aspect-ratio: 177.46 / 266.37;
    right: -18%;
    bottom: -12%;
  }
  .acceso__trabajo { align-items: center; padding: 48px 40px; }
  .acceso .card { margin-top: 0; }
}

/* ── Teléfono en horizontal / viewport bajo: banda mínima, la tarjeta arriba ──────────── */
@media (max-height: 560px) and (max-width: 1023px) {
  .acceso__identidad { min-height: 72px; padding: 16px 16px 36px; }
  .acceso__logo { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso .btn, .acceso .btn-login, .acceso input { transition: none; }
}