/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN · Streaming Go
   Requiere vimedia-kit.css cargado antes.

   El login es la ÚNICA pantalla que flota sobre el fondo del cliente, y por
   eso es la excepción al blanco del estándar. Vidrio OSCURO (nunca claro: el
   fondo puede ser cualquier imagen y un vidrio claro se vuelve ilegible sobre
   una foto clara), siempre con respaldo dentro de @supports.

   Medidas del estándar, no del gusto:
   tarjeta 360 · radio 20 · logo 40 · nombre 17/600 · campos 40 r10 ·
   botón 40 r10 · ningún peso sobre 600 · UN solo sólido (entrar).
   ═══════════════════════════════════════════════════════════════════════════ */

body.login-body {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    /* El mismo canvas de cine de todo el portal: tinta profunda con el
       resplandor del acento. Si el cliente pone su imagen, entra por
       --login-fondo desde el PHP y flota encima. */
    background:
        radial-gradient(1000px 480px at 12% -12%, rgba(124, 92, 255, .26), transparent 62%),
        radial-gradient(760px 420px at 108% 6%, rgba(34, 190, 220, .10), transparent 58%),
        #191827;
}

/* ═══ EL FONDO — EL MISMO DE LA PORTADA ═════════════════════════════════
   Orden del dueño (20/08/26): «que sea lo mismo que la portada, así no se ve
   la diferencia de pasar de portada a login».

   Estas reglas están COPIADAS de promo.css (.portada-fondo / .portada-slide /
   .slide-arte / .portada-velo). Si allá se tocan, acá también: son la misma
   pieza en dos sitios.

   Lo que había antes era un mosaico de 6 piezas derivando cada una con su
   propio temporizador. Se veía trabado y, peor, se veía DISTINTO.          */
.login-fondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.portada-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1100ms var(--k-curva); }
.portada-slide.activa { opacity: 1; }

.slide-arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
}

/* la vida: el arte respira MUY despacio mientras su obra está al frente */
.portada-slide.activa .slide-arte { transform: scale(1.06); transition: transform 8s linear; }

/* el velo doble de la portada, tal cual */
.portada-velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(9, 8, 16, .96) 0%, rgba(9, 8, 16, .55) 34%, rgba(9, 8, 16, .12) 62%, transparent 80%),
        linear-gradient(100deg, rgba(9, 8, 16, .84) 0%, rgba(9, 8, 16, .42) 46%, transparent 72%);
}

/* ── La tarjeta de vidrio ─────────────────────────────────────────────── */
.login-shell {
    position: relative;
    z-index: 1;
    width: min(360px, 100%);
    padding: 26px 24px 22px;
    display: grid;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    /* ⚠ Al destapar el fondo, la tarjeta TIENE que cerrarse. Calculado contra
       el peor caso —una carátula blanca justo detrás—: con .34 el texto blanco
       caía a 4.1 de contraste; con .72 aguanta 7,5 incluso sobre blanco puro.
       El estándar es explícito: «el vidrio es un lujo, la legibilidad no». */
    background: rgba(18, 16, 38, .72);          /* respaldo sin desenfoque */
    box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .65);
    color: #fff;
}

/* ── Marca: el logo acompaña, no preside ──────────────────────────────── */
.login-brand-panel {
    display: flex;
    align-items: center;
    gap: 11px;
}

.login-brand-lockup {
    display: flex;
    align-items: center;
    gap: 11px;
}

.login-brand-copy {
    margin-top: 14px;
}

.login-brand-copy p {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

/* ── Encabezado del formulario ────────────────────────────────────────── */
.login-form-panel {
    display: contents;   /* las piezas cuelgan de la tarjeta: el escalonado las alcanza */
}

.login-form-heading {
    margin: 18px 0 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.login-form-heading h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #fff;
}

.login-form-heading p {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
}

/* ── Error: con :empty para que no quede una franja visible vacía ─────── */
.login-error {
    margin-bottom: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 140, 140, .42);
    border-radius: var(--k-radio);
    background: rgba(255, 90, 90, .16);
    color: #ffd7d7;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}

.login-error:empty { display: none; }
.login-error i { color: #ff9b9b; font-size: 13px; }

/* ── Campos: 40 de alto, radio 10 ─────────────────────────────────────── */
.login-field { margin-bottom: 12px; }

.login-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .78);
}

.login-input-wrap { position: relative; }

.login-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    pointer-events: none;
    transition: color var(--k-t);
}

.login-input {
    width: 100%;
    height: 40px;
    padding: 0 42px 0 36px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--k-radio);
    outline: none;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    transition: border-color var(--k-t), background var(--k-t), box-shadow var(--k-t);
}

.login-input::placeholder { color: rgba(255, 255, 255, .5); }

.login-input:focus {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .13);
    box-shadow: none;
}

.login-input:focus-visible { outline: 2px solid var(--k-acento); outline-offset: 2px; }
.login-input-wrap:focus-within .login-input-icon { color: rgba(255, 255, 255, .9); }

/* el ojo: circular, sin caja, y su ícono crece al pasar el cursor */
.password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .66);
    cursor: pointer;
    transition: color var(--k-t);
}

.password-toggle i { font-size: 13px; transition: transform 220ms var(--k-curva); }
.password-toggle:hover { color: #fff; }
.password-toggle:hover i { transform: scale(1.18); }
.password-toggle:active i { transform: scale(.92); }

/* ── El ÚNICO sólido de la pantalla ───────────────────────────────────── */
.login-submit {
    width: 100%;
    height: 40px;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--k-radio);
    background: var(--k-acento);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: filter var(--k-t), transform var(--k-t);
}

.login-submit:hover { filter: brightness(1.1); }
.login-submit:active { transform: translateY(1px); }
.login-submit i { font-size: 12px; transition: transform var(--k-t); }
.login-submit:hover i { transform: translateX(3px); }

/* ═══ ENTRADA — el login se arma, no aparece ════════════════════════════ */
.login-shell {
    animation: lgCae .6s var(--k-curva) both,
               lgFlota 7s ease-in-out 1.2s infinite;
}

@keyframes lgCae {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }   /* el `to` va COMPLETO */
}

@keyframes lgFlota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.login-shell > *,
.login-shell .login-form-heading,
.login-shell .login-error,
.login-shell form {
    animation: lgPieza .5s var(--k-curva) both;
}

@keyframes lgPieza {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* cada pieza 70ms después de la anterior — el conjunto termina antes del segundo */
.login-shell > *:nth-child(1) { animation-delay: .16s; }
.login-shell > *:nth-child(2) { animation-delay: .23s; }
.login-shell > *:nth-child(3) { animation-delay: .30s; }
.login-shell > *:nth-child(4) { animation-delay: .37s; }
.login-shell > *:nth-child(5) { animation-delay: .44s; }
.login-shell > *:nth-child(6) { animation-delay: .51s; }
.login-shell > *:nth-child(7) { animation-delay: .58s; }
.login-shell > *:nth-child(n+8) { animation-delay: .65s; }

/* el logo da un latido, una sola vez: es lo primero que se mira */
@keyframes lgLatido {
    0%, 100% { transform: scale(1); }
    38%      { transform: scale(1.07); }
}

/* ═══ RESPONSIVE — 375 · 1440 · 1920+ ══════════════════════════════════ */
@media (max-width: 480px) {
    body.login-body { padding: 16px; }
    .login-shell { padding: 22px 18px 18px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    /* ⚠ un reemplazo por regex había dejado aquí un `width/height` en vez del
       apagado de animaciones: con movimiento reducido la tarjeta se rompía. */
    .login-shell,
    .login-shell > *,
    .k-isotipo-lg {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* el arte se queda quieto, pero conserva su escala: sin ella se verían
       los bordes que el desenfoque deja transparentes */
    .portada-slide.activa .slide-arte { transform: none; }
}

/* ═══ VIDRIO — al FINAL de la hoja: a igual peso, gana la última regla ══ */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .login-shell {
        background: rgba(18, 16, 38, .66);
        backdrop-filter: blur(26px) saturate(150%);
        -webkit-backdrop-filter: blur(26px) saturate(150%);
    }
}

/* el pie: la puerta al registro, discreta y legible sobre el vidrio */
.login-pie {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .74);
    text-align: center;
}

.login-pie a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* sobre el vidrio oscuro del acceso, el isotipo va en blanco */
.login-brand-lockup { color: #fff; }

/* ═══ AJUSTE AL ESTÁNDAR logi-vimedia (20/08/26) ═════════════════════════
   Lo que se veía «de plantilla» era el tamaño: tarjeta ancha, controles de
   50, radios de 14+. La herramienta aparece al bajar alturas a 40, cerrar
   radios a 10 y dejar UN solo sólido: el botón de acción.               */
.login-shell { width: min(370px, 100%); padding: 26px 24px 22px; border-radius: 20px; }

.login-input { height: 40px; border-radius: 10px; font-size: 13.5px; }
.login-field label { font-size: 12px; font-weight: 500; }

/* el logo preside: es lo primero que se mira y da un latido, una sola vez */
.login-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 12px; }
.login-brand-lockup .k-isotipo-lg { width: 46px; height: 46px; }
.login-brand-lockup .k-marca-lg { font-size: 24px; letter-spacing: -.8px; }

/* el enviar deja de ser franja: mide lo suyo y despliega su nombre */
.login-enviar { height: 44px; justify-self: center; margin: 2px auto 0; }
@media (hover: none) { .login-enviar { width: auto; } }

/* el aviso vacío no deja franja (trampa conocida del estándar) */
.login-error:empty { display: none; }

/* «Olvidé mi clave» — bajo el botón de entrar, discreto y a la medida de su
   texto. En el pie no cabía: ese es texto corrido y con un tercer enlace se
   partía en dos líneas. */
.login-olvide {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    transition: color .18s cubic-bezier(.2, .8, .2, 1);
}
.login-olvide:hover { color: #fff; text-decoration: underline; }
.login-olvide:focus-visible { outline: 2px solid var(--k-acento); outline-offset: 2px; border-radius: 6px; }

/* La razón por la que un campo es obligatorio, dicha ahí mismo. Secundaria:
   acompaña al campo, no compite con su etiqueta. */
.login-ayuda {
    display: block;
    margin-top: 6px;
    max-width: 52ch;
    color: rgba(255, 255, 255, .66);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}