/* ==========================================================================
   login.css
   Pantallas sin sesión (layouts.auth: login, invitación, recuperar y
   restablecer contraseña, 2FA, "No fui yo", registro).
   Colores desde tokens.css (navy + cobalto); el modo oscuro llega solo con
   [data-theme="dark"]. Las variables --login-* quedan como alias porque
   signup.css las usa.
   ========================================================================== */

:root{
    --login-navy: var(--zeus-navy);
    --login-ink: var(--zeus-ink);
    --login-ink-soft: var(--zeus-ink-soft);
    --login-line: var(--zeus-line);
    --login-gold: var(--zeus-accent); /* alias viejo: foco de los combos del registro */
    --login-error: #C0392B;
    --login-radius: 12px;

    --login-field-bg: var(--zeus-surface);
    --login-field-line: #D5DBE6;
    --login-placeholder: #6B7690;
    --login-ring: rgba(49, 87, 213, .16);
    --login-error-ring: rgba(192, 57, 43, .14);
    --login-on-photo: #D3DEF7;
    --login-photo-shade: linear-gradient(180deg, rgba(19,33,63,.6) 0%, rgba(19,33,63,.78) 45%, rgba(14,26,51,.96) 100%);
}

:root[data-theme="dark"]{
    --login-error: #F07A63;
    --login-field-bg: var(--zeus-surface-2);
    --login-field-line: #2A3A5C;
    --login-placeholder: #7F8BA6;
    --login-ring: rgba(85, 119, 232, .24);
    --login-error-ring: rgba(240, 122, 99, .2);
    --login-photo-shade: linear-gradient(180deg, rgba(12,24,52,.72) 0%, rgba(12,24,52,.86) 45%, rgba(9,15,27,.97) 100%);
}

/* Reset defensivo: estas pantallas no cargan Tailwind */
*, *::before, *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body{
    width: 100%;
    min-height: 100%;
    background: var(--zeus-surface);
    overflow-x: hidden;
    /* Lo que cuelga directo del body (ej. los swal) hereda esta fuente. */
    font-family: 'Inter', system-ui, sans-serif;
}
button, input{
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    color: inherit;
}
button{
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
}
input:not([type="checkbox"]):not([type="radio"]){
    -webkit-appearance: none;
    appearance: none;
}
h1, h2, p{ margin: 0; }

.login-page{
    min-height: 100vh;
    color: var(--zeus-ink);
    background: var(--zeus-surface);
}

.login-shell{
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

/* Foto del salón (servida desde la app) bajo un degradado navy: deja ver el
   restaurante arriba y queda casi sólido abajo para que el texto se lea.
   WebP donde el navegador lo soporta, JPG si no. */
.login-visual,
.login-hero{
    background-color: var(--zeus-navy);
    background-image: var(--login-photo-shade), url("../images/login/restaurant.jpg");
    background-image: var(--login-photo-shade), image-set(url("../images/login/restaurant.webp") type("image/webp"), url("../images/login/restaurant.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.brand-logo{
    display: block;
    width: auto;
    height: 34px;
}

/* ---------------------------------------------------------------------- */
/* PANEL DE MARCA (escritorio)                                             */
/* ---------------------------------------------------------------------- */

.login-visual{
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 56px;
}

.login-visual-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.brand-tagline{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zeus-sky);
    border: 1px solid rgba(165, 187, 233, .32);
    border-radius: 999px;
    padding: 7px 12px;
}

.login-visual-copy{
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
}
.login-visual-copy h2{
    font-family: var(--zeus-font-display);
    font-weight: 800;
    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
}
.login-visual-copy > p{
    font-size: 17px;
    line-height: 1.55;
    color: var(--login-on-photo);
    max-width: 460px;
}

.login-visual-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--zeus-sky);
}
.login-perks{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
}
.login-perks li{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.login-perks svg{ width: 16px; height: 16px; color: #86A0F4; }

/* ---------- Vista de muestra de Sala en vivo (auth/partials/floor-preview) ---------- */
.floor-preview{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.floor-card{
    background: var(--zeus-surface);
    color: var(--zeus-ink);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(4, 10, 25, .8), 0 0 0 1px rgba(165, 187, 233, .25);
}
.floor-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--zeus-line);
}
.floor-title{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}
.floor-title svg{ width: 18px; height: 18px; color: var(--zeus-ink-soft); }
.floor-counters{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 11px;
    color: var(--zeus-ink-soft);
}
.floor-counter{ display: inline-flex; align-items: center; gap: 5px; }
.floor-counter strong{ color: var(--zeus-ink); }
.floor-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.floor-link{ font-weight: 700; color: var(--zeus-accent); }

.floor-plan{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    justify-items: center;
    row-gap: 22px;
    padding: 22px 14px;
    background-color: var(--zeus-floor-bg);
    background-image: radial-gradient(var(--zeus-floor-dot) 1px, transparent 1.3px);
    background-size: 16px 16px;
}
.floor-table{
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.floor-preview .is-free{ --c: var(--zeus-table-free); --c-tint: var(--zeus-table-free-tint); }
.floor-preview .is-occupied{ --c: var(--zeus-table-occupied); --c-tint: var(--zeus-table-occupied-tint); }
.floor-preview .is-reserved{ --c: var(--zeus-table-reserved); --c-tint: var(--zeus-table-reserved-tint); }
.floor-preview .is-cleaning{ --c: var(--zeus-table-cleaning); --c-tint: var(--zeus-table-cleaning-tint); }
.floor-preview .is-blocked{ --c: var(--zeus-table-blocked); --c-tint: var(--zeus-table-blocked-tint); }

.floor-chair{
    position: absolute;
    border-radius: 4px;
    background: var(--zeus-chair);
}
.floor-chair.is-top,
.floor-chair.is-bottom{ left: 50%; width: 22px; height: 6px; margin-left: -11px; }
.floor-chair.is-top{ top: 0; }
.floor-chair.is-bottom{ bottom: 0; }
.floor-chair.is-left,
.floor-chair.is-right{ top: 50%; width: 6px; height: 22px; margin-top: -11px; }
.floor-chair.is-left{ left: 0; }
.floor-chair.is-right{ right: 0; }
.seats-2 .floor-chair.is-left,
.seats-2 .floor-chair.is-right{ display: none; }

.floor-ring{
    width: 66px;
    height: 66px;
    padding: 3px;
    border-radius: 17px;
}
/* Ocupada: el aro avanza según el tiempo sobre los 90 min estimados. */
.floor-ring[style]{
    background: conic-gradient(var(--c) 0 var(--pct), var(--c-tint) var(--pct) 100%);
}
.floor-box{
    width: 60px;
    height: 60px;
    border-radius: 14px;
    border: 2px solid var(--c);
    background: var(--zeus-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.floor-ring[style] .floor-box{ border-color: var(--zeus-surface); }
.floor-num{ font-size: 16px; font-weight: 800; line-height: 1; }
.floor-state{ font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--c); }
.floor-sub{ font-size: 9.5px; color: var(--zeus-ink-soft); }

.floor-hint{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--zeus-line);
    font-size: 11px;
    color: var(--zeus-ink-soft);
}
.floor-hint svg{ width: 14px; height: 14px; flex-shrink: 0; }

.floor-caption{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--login-on-photo);
}
.live-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2FB67C;
    box-shadow: 0 0 0 4px rgba(47, 182, 124, .25);
}

/* ---------------------------------------------------------------------- */
/* PANEL DEL FORMULARIO                                                    */
/* ---------------------------------------------------------------------- */

.login-hero{ display: none; }

.login-form-pane{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 32px 40px;
    background: var(--zeus-surface);
}

.login-pane-top{
    text-align: right;
    font-size: 14px;
    color: var(--zeus-ink-soft);
}
.login-pane-top a{
    color: var(--zeus-accent);
    font-weight: 600;
    text-decoration: none;
}
.login-pane-top a:hover{ text-decoration: underline; }

.login-wrapper{
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 32px 0;
}

.login-header{ margin-bottom: 28px; }
.login-eyebrow{
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zeus-accent);
}
.login-header h1{
    font-family: var(--zeus-font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 10px;
    color: var(--zeus-ink);
}
.login-header p{
    font-size: 15px;
    line-height: 1.5;
    color: var(--zeus-ink-soft);
}

.form-group{ margin-bottom: 20px; }

.form-label{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--zeus-ink);
    margin-bottom: 8px;
}
.form-label-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.form-label-row .form-label{ margin-bottom: 0; }

.input-wrapper{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1.5px solid var(--login-field-line);
    border-radius: var(--login-radius);
    background: var(--login-field-bg);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-wrapper:focus-within{
    border-color: var(--zeus-accent);
    box-shadow: 0 0 0 4px var(--login-ring);
}

.input-icon{
    width: 20px;
    height: 20px;
    margin-left: 16px;
    flex-shrink: 0;
    color: var(--login-placeholder);
    stroke: currentColor;
    transition: color .15s ease;
}
.input-wrapper:focus-within .input-icon{ color: var(--zeus-accent); }

.form-input{
    width: 100%;
    min-height: 49px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 14px 0 12px;
    font-size: 15px;
    color: var(--zeus-ink);
}
.form-input::placeholder{ color: var(--login-placeholder); }

.password-toggle{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--zeus-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle:hover{ background: var(--zeus-surface-2); color: var(--zeus-ink); }
.password-toggle:focus-visible{ outline: 3px solid var(--login-ring); outline-offset: 0; }
.password-toggle svg{ width: 20px; height: 20px; }
.password-toggle .icon-hide,
.password-toggle.is-showing .icon-show{ display: none; }
.password-toggle.is-showing .icon-hide{ display: block; }

/* Contraseña incorrecta: el aviso es el toast de swal; el campo queda
   marcado y se sacude una vez para señalar dónde corregir. */
.input-wrapper.is-invalid,
.input-wrapper.is-invalid:focus-within{
    border-color: var(--login-error);
    box-shadow: 0 0 0 4px var(--login-error-ring);
    animation: login-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}
.input-wrapper.is-invalid .input-icon{ color: var(--login-error); }

@keyframes login-shake{
    15%, 85%{ transform: translateX(-2px); }
    30%, 70%{ transform: translateX(4px); }
    45%, 55%{ transform: translateX(-5px); }
}

.login-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 24px;
}
.login-remember{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    color: var(--zeus-ink-soft);
    cursor: pointer;
}
.login-remember input{
    width: 20px;
    height: 20px;
    accent-color: var(--zeus-accent);
    cursor: pointer;
}

/* Toggle estándar de la app (mismo dibujo que .crear-toggle-switch de
   users.css). Se prende con :checked del checkbox que va justo antes, así
   que no necesita Alpine; .is-on queda para las vistas que lo usan con
   x-model (registro). */
.crear-toggle-row{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1.5px solid var(--login-field-line);
    border-radius: var(--login-radius);
    background: var(--login-field-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.crear-toggle-row:hover{ border-color: var(--zeus-ink-soft); }
.crear-toggle-copy{ display: flex; flex-direction: column; min-width: 0; }
.crear-toggle-copy strong{ font-size: 14px; font-weight: 600; color: var(--zeus-ink); line-height: 1.3; }
.crear-toggle-copy span{ font-size: 12.5px; color: var(--zeus-ink-soft); line-height: 1.4; margin-top: 2px; }
.crear-toggle-row input[type="checkbox"]{ position: absolute; opacity: 0; width: 0; height: 0; }
.crear-toggle-switch{
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--login-field-line);
    transition: background-color .15s ease;
}
.crear-toggle-switch::before{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .15s ease;
}
.crear-toggle-switch.is-on,
.crear-toggle-row input:checked + .crear-toggle-switch{ background: var(--zeus-accent); }
.crear-toggle-switch.is-on::before,
.crear-toggle-row input:checked + .crear-toggle-switch::before{ transform: translateX(18px); }
.crear-toggle-row:has(input:focus-visible){ border-color: var(--zeus-accent); box-shadow: 0 0 0 4px var(--login-ring); }

.forgot-password,
.forgot-password a{
    font-size: 13px;
    font-weight: 600;
    color: var(--zeus-accent);
    text-decoration: none;
}
.forgot-password:hover,
.forgot-password a:hover{ text-decoration: underline; }

.login-button{
    position: relative;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border: none;
    border-radius: var(--login-radius);
    background: var(--zeus-accent);
    color: var(--zeus-on-accent);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 24px -10px var(--zeus-accent);
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.login-button:hover{ background: var(--zeus-accent-hover); }
.login-button:active{ transform: translateY(1px); }
.login-button:focus-visible{ outline: 3px solid var(--login-ring); outline-offset: 2px; }
.login-button .arrow{ width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease; }
.login-button:hover .arrow{ transform: translateX(2px); }
.login-button:disabled{ cursor: progress; }

/* Enviando: spinner + "Ingresando…" (data-loading-label, ver layouts.auth). */
.btn-spinner{
    display: none;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .8s linear infinite;
    order: -1; /* siempre antes del texto, aunque la vista lo ponga después */
}
.login-button.is-loading{ background: var(--zeus-accent-hover); box-shadow: none; }
.login-button.is-loading .btn-spinner{ display: block; }
.login-button.is-loading .arrow{ display: none; }

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

.login-button--alert{ background: var(--login-error); box-shadow: 0 10px 24px -10px var(--login-error); }
.login-button--alert:hover,
.login-button--alert.is-loading{ background: #A53125; }

/* Barra de progreso fina mientras se envía: arriba del panel en escritorio,
   arriba de la hoja en mobile. */
.login-form-pane::before{
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0 35%, var(--zeus-accent) 35% 65%, transparent 65%);
    background-size: 300% 100%;
    animation: login-bar 1.4s ease-in-out infinite;
}
.is-busy .login-form-pane::before{ display: block; }
@keyframes login-bar{
    from{ background-position: 100% 0; }
    to{ background-position: 0 0; }
}

.is-busy .input-wrapper{ background: var(--zeus-bg); }
.is-busy .form-input{ color: var(--zeus-ink-soft); }
.is-busy .login-row,
.is-busy .crear-toggle-row,
.is-busy .forgot-password,
.is-busy .password-toggle,
.is-busy .qr-section,
.is-busy .login-back{
    opacity: .55;
    pointer-events: none;
}

.divider{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--login-placeholder);
    font-size: 13px;
}
.divider::before, .divider::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--zeus-line);
}

/* QR: oculto en escritorio, visible solo en mobile */
.qr-section{ display: none; }

.qr-button{
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1.5px solid var(--login-field-line);
    border-radius: var(--login-radius);
    background: var(--zeus-surface);
    font-size: 15px;
    font-weight: 600;
    color: var(--zeus-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: border-color .15s ease, background-color .15s ease;
}
.qr-button:hover{ border-color: var(--zeus-ink-soft); background: var(--zeus-surface-2); }
.qr-icon{ width: 20px; height: 20px; stroke: currentColor; }

.login-footer{ margin-top: 24px; }
.security{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--login-radius);
    background: var(--zeus-bg);
    font-size: 13px;
    line-height: 1.5;
    color: var(--zeus-ink-soft);
}
.security-icon{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--zeus-accent);
}

.login-pane-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--zeus-mute);
}
.login-pane-foot a{ color: var(--zeus-ink-soft); text-decoration: none; }
.login-pane-foot a:hover{ color: var(--zeus-ink); text-decoration: underline; }

/* ---------------------------------------------------------------------- */
/* Pantallas de cuenta (recuperar/restablecer contraseña, "No fui yo")    */
/* ---------------------------------------------------------------------- */
.login-back{
    margin-top: 22px;
    text-align: center;
    font-size: 14px;
}
.login-back a{
    color: var(--zeus-accent);
    text-decoration: none;
    font-weight: 600;
}
.login-back a:hover{ text-decoration: underline; }

.login-notice{
    background: var(--zeus-surface-2);
    border: 1.5px solid var(--zeus-line);
    border-radius: var(--login-radius);
    padding: 14px 16px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--zeus-ink);
}
.login-notice ul{ margin: 8px 0 0 18px; }
.login-notice--alert{ border-color: var(--login-error); }

/* ---------------------------------------------------------------------- */
/* Escritorio con poca altura o poco ancho                                 */
/* ---------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1180px){
    .login-visual{ padding: 40px; }
    .login-visual-copy h2{ font-size: 38px; }
    .login-form-pane{ padding: 28px 32px; }
}
/* Notebooks (1366×768 deja ~650px visibles): el salón se compacta en vez
   de desaparecer; si igual no entra, el panel crece y la página scrollea. */
@media (min-width: 861px) and (max-height: 820px){
    .login-visual{ padding-top: 32px; padding-bottom: 28px; gap: 24px; }
    .login-visual-copy{ gap: 10px; }
    .login-visual-copy h2{ font-size: 36px; }
    .login-visual-copy > p{ font-size: 15.5px; }
    .floor-preview{ margin-top: 10px; gap: 10px; }
    .floor-hint{ display: none; }
}
@media (min-width: 861px) and (max-height: 700px){
    .login-visual-copy h2{ font-size: 32px; }
    .floor-head{ padding: 9px 14px; }
    .floor-plan{ padding: 12px 10px; row-gap: 6px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .floor-table{ transform: scale(.88); }
}

/* ---------------------------------------------------------------------- */
/* MOBILE: cabecera con foto + formulario en una hoja blanca              */
/* ---------------------------------------------------------------------- */
@media (max-width: 860px){

    html, body, .login-page{ background: var(--zeus-navy); }

    .login-shell{ display: block; }
    .login-visual{ display: none; }

    .login-form-pane{
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
        background: var(--zeus-navy);
    }
    .login-form-pane::before{ display: none !important; }

    .login-hero{
        display: flex;
        flex-direction: column;
        gap: 26px;
        padding: calc(env(safe-area-inset-top, 0px) + 40px) 24px 56px;
    }
    .login-hero-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .login-hero .brand-logo{ height: 28px; }
    .login-hero-dots{ display: flex; gap: 6px; }
    .login-hero-dots i{ width: 10px; height: 10px; border-radius: 3px; }
    .login-hero-dots .is-free{ background: #2FB67C; }
    .login-hero-dots .is-occupied{ background: #F06A5A; }
    .login-hero-dots .is-reserved{ background: #F2B23A; }
    .login-hero-dots .is-cleaning{ background: #4C9BF0; }
    .login-hero-title{
        font-family: var(--zeus-font-display);
        font-size: 30px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.02em;
        color: #fff;
        margin-bottom: 8px;
    }
    .login-hero-text{
        font-size: 15px;
        line-height: 1.5;
        color: var(--login-on-photo);
    }

    .login-pane-top{ display: none; }

    .login-form-pane .login-wrapper{
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: none;
        margin: -28px 0 0;
        padding: 28px 24px 8px;
        background: var(--zeus-surface);
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -12px 30px -18px rgba(4, 10, 25, .6);
    }
    /* En tablet la hoja ocupa todo el ancho pero el formulario no se estira. */
    .login-form-pane .login-wrapper > *{
        width: 100%;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .login-form-pane .login-wrapper--wide > *{ max-width: 560px; }
    /* La barra de progreso va arriba de la hoja, entre las esquinas redondeadas. */
    .is-busy .login-form-pane .login-wrapper::before{
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 3px;
        background: linear-gradient(90deg, transparent 0 35%, var(--zeus-accent) 35% 65%, transparent 65%);
        background-size: 300% 100%;
        animation: login-bar 1.4s ease-in-out infinite;
    }

    /* En el login el título ya está en la cabecera con foto. */
    .login-card.has-hero-title .login-header--welcome{ display: none; }

    .login-header{ margin-bottom: 22px; }
    .login-header h1{ font-size: 26px; }

    .form-group{ margin-bottom: 18px; }
    .form-input{ font-size: 16px; } /* 16px: iOS no hace zoom al enfocar */
    .login-row{ margin-bottom: 20px; }

    .qr-section{ display: block; }
    .qr-section .divider{ margin: 20px 0; }

    .login-footer{ margin-top: auto; padding-top: 24px; }
    .security{
        justify-content: center;
        padding: 0;
        background: none;
        text-align: center;
        font-size: 12.5px;
    }
    .security-icon{ width: 15px; height: 15px; }

    .login-pane-foot{
        justify-content: center;
        gap: 16px;
        padding: 12px 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
        background: var(--zeus-surface);
    }
}

@media (prefers-reduced-motion: reduce){
    .input-wrapper.is-invalid{ animation: none; }
    .btn-spinner,
    .login-form-pane::before,
    .login-wrapper::before{ animation-duration: 3s; }
}