/* Login: credencial colgante sobre fondo animado. Prefijo: login- */

.login-body
{
    --login-card: rgba(12, 20, 30, .82);
    --login-card-line: rgba(0, 212, 255, .18);
    --login-field: rgba(5, 10, 16, .75);
    --login-field-line: rgba(139, 154, 171, .28);
    --login-swing: 1.6deg;
    min-height: 100vh;
    overflow: hidden;
    background: #04080d;
}

.login-video
{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.login-bg
{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.login-overlay
{
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 50% 38%, rgba(4, 8, 13, .42) 0%, rgba(4, 8, 13, .84) 100%),
        linear-gradient(180deg, rgba(4, 8, 13, .6) 0%, rgba(4, 8, 13, .35) 45%, rgba(4, 8, 13, .75) 100%);
}

.login-stage
{
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 16px 16px;
}

.login-hanging
{
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 0;
    will-change: transform;
    animation:
        login-enter 520ms cubic-bezier(.2, .9, .3, 1) both,
        login-sway 7s ease-in-out 520ms infinite;
}

@keyframes login-enter
{
    from { opacity: 0; transform: translateY(-40px); }
}

@keyframes login-sway
{
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(var(--login-swing)); }
    75%  { transform: rotate(calc(-1 * var(--login-swing))); }
    100% { transform: rotate(0deg); }
}

.login-lanyard
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-strap
{
    width: 30px;
    height: clamp(40px, 11vh, 120px);
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(90deg, #07121c, #10283a 50%, #07121c);
    border-left: 1px solid rgba(29, 209, 161, .25);
    border-right: 1px solid rgba(0, 0, 0, .5);
}

.login-strap-text
{
    padding-top: 6px;
    writing-mode: vertical-rl;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .34em;
    white-space: nowrap;
    color: rgba(29, 209, 161, .45);
}

.login-clip
{
    width: 54px;
    height: 18px;
    border-radius: 5px 5px 8px 8px;
    background: linear-gradient(180deg, #d3dce9, #7f8b9e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.login-badge
{
    width: min(92vw, 420px);
    margin-top: -1px;
    padding: 22px 32px 6px;
    background: var(--login-card);
    border: 1px solid var(--login-card-line);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02) inset;
    position: relative;
    transition: border-color .6s ease, box-shadow .6s ease;
}

.login-slot
{
    width: 54px;
    height: 8px;
    margin: 0 auto 14px;
    border-radius: 99px;
    background: #010305;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .95);
}

.login-head
{
    text-align: center;
}

.login-logo
{
    display: block;
    margin: 0 auto;
    width: 72px;
    height: 72px;
}

.login-title
{
    margin: 10px 0 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: .09em;
    background: linear-gradient(170deg, #ffffff 35%, #8fe9d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-sub
{
    margin: 4px 0 0;
    font-size: .9rem;
    color: var(--app-muted);
}

.login-band
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px -32px 0;
    padding: 7px 32px;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: rgba(29, 209, 161, .07);
    border-top: 1px solid rgba(29, 209, 161, .16);
    border-bottom: 1px solid rgba(29, 209, 161, .16);
}

.login-dot
{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-accent);
    box-shadow: 0 0 8px var(--app-accent);
    animation: login-pulse 2.4s ease-in-out infinite;
}

@keyframes login-pulse
{
    50% { opacity: .35; }
}

.login-band-label { color: #9fe7d2; }
.login-band-code  { margin-left: auto; color: var(--app-muted); }

#login-alerts .alert
{
    margin: 14px 0 0;
    padding: 8px 12px;
    font-size: .82rem;
    color: #ffb4b4;
    background: rgba(255, 123, 123, .1);
    border: 1px solid rgba(255, 123, 123, .35);
}

.login-paso
{
    display: grid;
    gap: 14px;
    padding: 18px 0 20px;
}

.login-paso[hidden]
{
    display: none;
}

.login-aviso
{
    margin: 0;
    font-size: .85rem;
    color: var(--app-muted);
}

.login-label
{
    display: block;
    margin-bottom: 6px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--app-muted);
}

.login-field
{
    position: relative;
    display: flex;
    align-items: center;
}

.login-icon
{
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--app-muted);
}

.login-input
{
    width: 100%;
    height: 52px;
    padding: 0 44px 0 40px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--app-fg);
    background: var(--login-field);
    border: 1px solid var(--login-field-line);
    border-radius: 10px;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}

.login-input:focus
{
    border-color: var(--app-accent2);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, .16);
}

.login-eye
{
    position: absolute;
    right: 9px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: color .12s;
}

.login-eye:hover:not(:disabled)
{
    color: var(--app-fg);
}

.login-eye:disabled
{
    opacity: .25;
    cursor: not-allowed;
}

.login-eye svg
{
    width: 16px;
    height: 16px;
}

.login-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 4px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #04231a;
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent2));
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 212, 255, .22);
    transition: filter .12s, transform .1s;
}

.login-btn:hover:not(:disabled)
{
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.login-btn:disabled
{
    cursor: progress;
    opacity: .65;
}

.login-arrow
{
    width: 17px;
    height: 17px;
}

.login-spinner
{
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(4, 35, 26, .3);
    border-top-color: #04231a;
    border-radius: 50%;
    animation: login-spin .6s linear infinite;
}

.login-btn:disabled .login-spinner { display: inline-block; }
.login-btn:disabled .login-arrow   { display: none; }

@keyframes login-spin
{
    to { transform: rotate(360deg); }
}

@media (max-width: 480px)
{
    .login-badge { padding: 20px 22px 4px; }
    .login-band  { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
}

@media (max-height: 640px)
{
    .login-strap { height: 24px; }
    .login-logo  { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce)
{
    .login-hanging { animation: none; }
    .login-dot     { animation: none; }
}

/* El distintivo de reCAPTCHA (abajo a la derecha) tiene que quedar por ENCIMA del velo oscuro del fondo */
.grecaptcha-badge
{
    z-index: 10 !important;
    opacity: .9;
}

/* Pestañas Admin / Auditor */
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 8px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.login-tab { padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--app-muted, #9aa7b4); font-weight: 700; font-size: .92rem; }
.login-tab.activa { background: rgba(29, 209, 161, .16); color: #9fe7d2; box-shadow: inset 0 0 0 1px rgba(29, 209, 161, .45); }
.login-ayuda-tab { margin: 0 0 10px; font-size: .8rem; color: var(--app-muted, #9aa7b4); text-align: center; }


/* Modo Auditor: el bloque de login cambia de tono, apenas, con una animación suave (para saber de un vistazo dónde se está entrando) */
.login-badge::after
{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(0, 212, 255, .16) 0%, rgba(0, 212, 255, 0) 60%),
        linear-gradient(180deg, rgba(29, 120, 255, .10) 0%, rgba(120, 80, 255, .08) 100%);
    opacity: 0;
    transition: opacity .7s ease;
}

.login-badge.modo-auditor { border-color: rgba(0, 212, 255, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 28px rgba(0, 212, 255, .14); }
.login-badge.modo-auditor::after { opacity: 1; }
.login-badge.cambio-modo { animation: login-cambio .7s ease; }

@keyframes login-cambio
{
    0%   { transform: scale(1);     }
    35%  { transform: scale(1.012); }
    100% { transform: scale(1);     }
}

@media (prefers-reduced-motion: reduce)
{
    .login-badge, .login-badge::after { transition: none; }
    .login-badge.cambio-modo { animation: none; }
}