/* [Módulo: identity-access] Ajustes de pulido exclusivos de admin/login.php — el
   sistema compartido (admin.css) ya cubre lo esencial (sombra con offset+blur real,
   focus rings, scrollbar/selection temáticos); este archivo solo añade lo que falta
   específicamente aquí, sin duplicar ni sobrescribir nada global. */

/* Un solo momento de entrada autorizado — la tarjeta aparece con una curva
   exponencial ya visible desde su posición final, nunca deslizando desde fuera. */
@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card { animation: loginCardIn .42s cubic-bezier(0.16, 1, 0.3, 1); }

/* Jerarquía más clara entre marca → título → subtítulo — el sistema base los deja
   muy pegados entre sí, compitiendo por la misma atención. */
.login-card .brand-mark { margin-bottom: 18px; }
.login-card h1 { margin-bottom: 5px; letter-spacing: -0.01em; }
.login-card .sub { margin-bottom: 26px; }

/* El botón mostrar/ocultar contraseña solo cambiaba el glifo — ahora gira
   suavemente al alternar, y gana un estado de foco visible (antes invisible al
   navegar con teclado, un hueco real de accesibilidad). */
.password-toggle {
    transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), background .12s ease, color .12s ease;
}
.password-toggle:active { transform: scale(0.88); }
.password-toggle:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* El botón primario ganaba nada al pasar el mouse — ahora se eleva ligeramente,
   coherente con el mismo tratamiento que ya usamos hoy en Konexa-Demo. */
.login-card .btn-primary {
    transition: transform .12s ease, box-shadow .15s ease, opacity .12s ease;
}
.login-card .btn-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--accent) 45%, transparent);
}
.login-card .btn-primary:not(:disabled):active { transform: translateY(0); }

/* El aviso de error (bloqueo, sesión vencida, demo expirada) entraba sin ningún
   tránsito — un salto seco justo donde el usuario menos lo espera. */
@keyframes loginErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.form-error { animation: loginErrorIn .3s ease; }

/* El campo del código 2FA es el único paso donde la persona solo necesita mirar
   6 dígitos — separarlos visualmente ayuda a leerlos/corregirlos de un vistazo. */
input[name="totp_code"] {
    letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums;
    padding-left: 18px; /* compensa el letter-spacing empujando el placeholder hacia el centro real */
}