/* Diseño v2 — login y recuperación de contraseña (ver static/css/diseno.css).
   Solo presentación, bajo :where(.ui-v2) igual que el resto de la capa. */

@keyframes dzAuthAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes dzAuthFloat  { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-24px, 18px) scale(1.06); } }
@keyframes dzAuthRise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dzAuthBob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

:where(.ui-v2) .login-brand {
    background: linear-gradient(125deg, #0f766e, #0d9488 35%, #14b8a6 60%, #0e7490 100%);
    background-size: 220% 220%;
    animation: dzAuthAurora 18s ease-in-out infinite;
}
:where(.ui-v2) .login-brand::before { background: rgba(255,255,255,.07); animation: dzAuthFloat 14s ease-in-out infinite; }
:where(.ui-v2) .login-brand::after  { background: rgba(255,255,255,.06); animation: dzAuthFloat 17s ease-in-out infinite reverse; }
:where(.ui-v2) .brand-icon {
    animation: dzAuthBob 5s ease-in-out infinite;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
}

:where(.ui-v2) .login-panel { background: #fff radial-gradient(900px 500px at 110% -10%, rgba(20,184,166,.06), transparent 70%); }
:where(.ui-v2) .login-form-wrap > * { animation: dzAuthRise .6s cubic-bezier(.16,1,.3,1) both; }
:where(.ui-v2) .login-form-wrap > :nth-child(2) { animation-delay: .05s; }
:where(.ui-v2) .login-form-wrap > :nth-child(3) { animation-delay: .10s; }
:where(.ui-v2) .login-form-wrap > :nth-child(4) { animation-delay: .15s; }
:where(.ui-v2) .login-form-wrap > :nth-child(n+5) { animation-delay: .20s; }

:where(.ui-v2) .field-input { border-radius: 10px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
:where(.ui-v2) .field-input:hover:not(:focus) { border-color: #cbd2da; }
:where(.ui-v2) .btn-login {
    border-radius: 10px;
    background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -8px rgba(13,148,136,.65);
}

@media (prefers-reduced-motion: reduce) {
    :where(.ui-v2) :is(.login-brand, .brand-icon, .login-form-wrap > *),
    :where(.ui-v2) .login-brand::before,
    :where(.ui-v2) .login-brand::after { animation: none !important; }
}

/* No existe en Bootstrap Icons: = bi-shield-fill-check (ver diseno.css) */
.bi-shield-check-fill::before { content: "\f531"; }