/* ============================================================
   login.css — LA TARJETA DE LOGIN COMPARTIDA (§14 · 23/08/2026)
   Referencia visual del titular: tarjeta centrada elegante sobre
   fondo suave desenfocado; círculo con el icono del rol medio
   asomado sobre la tarjeta; campos con icono; «Recuérdame»;
   «¿Olvidaste tu contraseña?»; botón grande de Entrar a lo ancho.

   La pinta UI.tarjetaLogin(config) (core/ui.js). Cada rol es
   LIGERAMENTE distinto vía data-rol="cliente|admin|operador|afiliado":
   solo cambian el acento, el icono y un matiz sutil del fondo; el
   esqueleto, la tipografía y las medidas son idénticos.

   SOLO tokens de A.1–A.3 (nada de hex nuevos: los matices se derivan
   con color-mix de los tokens ya verificados). El acento del cliente
   es el teal de A.1 y el de los paneles el Azul Rey (data-marca="panel"
   ya cambia --brand/--brand-dark en tokens.css). Claro/oscuro: solos.
   RTL: solo propiedades lógicas.
   ============================================================ */

/* ---------- Acento por rol (derivado de tokens, nunca hex sueltos) ---------- */
.login-fondo {
  --login-acento: var(--brand);            /* cliente: teal · paneles: azul rey */
  --login-acento-2: var(--brand-dark);
  /* B12 · el acento como RELLENO (botón, halos) y el acento como TEXTO no
     pueden ser el mismo color en oscuro: --brand sobre superficie oscura da
     2.25:1 (azul) / 3.06:1 (teal). --brand-texto ya es la variante clara
     verificada de tokens.css y en claro vale exactamente lo mismo. */
  --login-acento-texto: var(--brand-texto);
  --login-halo-1: color-mix(in srgb, var(--login-acento) 16%, transparent);
  --login-halo-2: color-mix(in srgb, var(--login-acento-2) 12%, transparent);
}
/* admin: Azul Rey PROFUNDO (escudo) — el acento es el tono presionado */
.login-fondo[data-rol="admin"] {
  --login-acento: var(--brand-dark);
  --login-acento-2: var(--brand);
}
/* operador: azul con auriculares — matiz del fondo hacia --info */
.login-fondo[data-rol="operador"] {
  --login-acento-2: var(--info);
}
/* afiliado: azul con eslabón — matiz del fondo hacia --success */
.login-fondo[data-rol="afiliado"] {
  --login-acento-2: var(--success);
}

/* ---------- Fondo suave desenfocado ---------- */
.login-fondo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--sp-8) var(--sp-4);
  background:
    radial-gradient(48rem 30rem at 18% 12%, var(--login-halo-1), transparent 70%),
    radial-gradient(40rem 28rem at 85% 88%, var(--login-halo-2), transparent 70%),
    var(--bg);
  overflow: hidden;
}
/* Dos manchas desenfocadas del acento: la «foto borrosa» de la referencia,
   sin imagen alguna (marca blanca) y respetando el tema activo. */
.login-fondo::before,
.login-fondo::after {
  content: "";
  position: absolute;
  border-radius: var(--r-redondo);
  filter: blur(46px);
  pointer-events: none;
}
.login-fondo::before {
  width: 300px; height: 300px;
  inset-block-start: -80px; inset-inline-start: -60px;
  background: var(--login-halo-1);
}
.login-fondo::after {
  width: 340px; height: 340px;
  inset-block-end: -110px; inset-inline-end: -70px;
  background: var(--login-halo-2);
}

/* ---------- La tarjeta ---------- */
.login-tarjeta {
  position: relative;
  z-index: var(--z-suelo);
  width: 100%;
  max-width: 380px;
  margin-block-start: 36px;               /* sitio para el avatar asomado */
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: var(--borde-grosor) solid var(--border);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-flotante);
  text-align: center;
  animation: login-entra var(--dur) var(--ease);
}
@keyframes login-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-tarjeta { animation: none; }
}

/* ---------- Círculo con el icono del rol, medio asomado ---------- */
.login-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: calc(-36px - var(--sp-8)) auto var(--sp-4);
  background: var(--login-acento);
  color: var(--brand-contrast);
  border: 4px solid var(--surface);
  border-radius: var(--r-redondo);
  box-shadow: var(--sombra-tarjeta);
}
.login-avatar .icono { width: 32px; height: 32px; }

/* ---------- Título y subtítulo del rol ---------- */
.login-titulo {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2);
  color: var(--text);
}
.login-subtitulo {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--text-2);
}

/* ---------- Campos con icono (se apoyan en .campo de base.css) ---------- */
.login-form { text-align: start; }
.login-campo .campo-control .icono { color: var(--text-2); flex-shrink: 0; }
.login-campo .campo-control:focus-within .icono { color: var(--login-acento-texto); }
.login-campo .campo-control:focus-within { outline-color: var(--focus); }
.login-error { justify-content: center; }

/* ---------- «Recuérdame» y «¿Olvidaste tu contraseña?» ---------- */
.login-opciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block: var(--sp-2) var(--sp-4);
}
.login-recuerdame {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--text-2);
  cursor: pointer;
}
.login-recuerdame input {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--login-acento);
}
.login-recuerdame input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.login-olvide {
  border: none; background: none; padding: 0;
  font: inherit;
  font-size: var(--fs-small); line-height: var(--lh-small);
  color: var(--login-acento-texto);
  cursor: pointer;
  margin-inline-start: auto;              /* a la derecha (al final) también en RTL */
}
.login-olvide:hover { text-decoration: underline; }
.login-olvide:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* .tactil de base.css ya garantiza los 44px; aquí solo el ancho natural */
.login-recuerdame.tactil, .login-olvide.tactil { min-height: var(--tactil); }

/* ---------- Botón grande de Entrar, a todo lo ancho ---------- */
.login-boton {
  width: 100%;
  background: var(--login-acento);
}
.login-boton:hover, .login-boton:active { background: var(--login-acento-2); }

/* ---------- Nota de datos de prueba integrada ---------- */
.login-demo { margin-block-start: var(--sp-4); }

/* ---------- Extras (passkey, código, respaldo…) heredan el ritmo ---------- */
.login-tarjeta > .btn-secundario, .login-tarjeta > .btn-texto { width: 100%; }

/* ---------- Pantallas estrechas: la tarjeta respira igual ---------- */
@media (max-width: 420px) {
  .login-tarjeta { padding-inline: var(--sp-4); }
}