/* Palette di brand: rosso BRT su fondo profondo, niente arcobaleno */
:root {
    --brt-rosso: #e2001a;
    --brt-gradient-stops:
        #7f0010, #b0141f, #e2001a, #c81127,
        #8e1220, #3f1418, #1d2430, #0f172a;
}

.login_page {
    width: 100vw;
    height: 100vh;
    display: flex;
    /* il brand occupa lo spazio libero, il form resta ancorato a destra */
    justify-content: space-between;
    align-items: center;
    font-family: 'Exo 2', sans-serif;
    overflow: hidden;
    position: relative;
    background-color: #8e1220;
    isolation: isolate;
}

/* Livello colorato separato: sfocato e in movimento avanti/indietro,
   così il ciclo non "riparte" mai di scatto. */
.login_page::before {
    content: '';
    position: absolute;
    /* deborda oltre il viewport: il blur non scopre i bordi */
    inset: -12%;
    z-index: -1;
    background: linear-gradient(115deg,
        var(--brt-gradient-stops),
        #7f0010);
    background-size: 220% 220%;
    background-position: 0% 50%;
    filter: blur(48px) saturate(1.15);
    transform: scale(1.06);
    animation: brt_gradient_drift 30s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    pointer-events: none;
}

/* alternate + easing simmetrico: nessun reset brusco a fine ciclo */
@keyframes brt_gradient_drift {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .login_page::before,
    .login_button.login,
    .rotta_attiva, .tappa,
    .collo_art, .sped_stati .stato {
        animation: none;
    }
    /* senza animazione la rotta va mostrata gia' completa e gli stati tutti
       leggibili, altrimenti resterebbero mezzi trasparenti */
    .rotta_attiva { stroke-dashoffset: 0; }
    .sped_stati .stato { opacity: 1; }
    /* il collo si muove con SMIL: fermo resterebbe al punto di partenza */
    .collo { display: none; }
}

.image_container {
    /* prende lo spazio residuo senza comprimere il margine del form */
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Nessuno sfondo proprio: lascia trasparire il gradiente animato della pagina */
    background: transparent;
    position: relative;
    /* le scene sfondano di proposito i margini: qui si tagliano */
    overflow: hidden;
}

.image_container h4 {
    font-size: 3.2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    letter-spacing: 6px;
    margin: 0;
    padding: 0;
}

.login_container {
    /* si adatta al contenuto invece di riempire tutta la colonna */
    width: auto;
    max-width: 490px;
    /* altezza piena: così i 24px di margine valgono su tutti e quattro i lati */
    height: calc(100% - 48px);
    background-color: white;
    padding: 34px 32px;
    margin: 24px;
    display: flex;
    /* non si comprime: il margine resta uguale a destra */
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border: none;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow-y: auto;
}

.login_form {
    background-color: white;
    /* larghezza fissa del contenuto: il pannello resta largo, i campi no */
    width: 380px;
    max-width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login_inputs {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

.login_input_container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.login_input_container h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-darker);
    margin: 0;
}

.login_input_container h5 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0;
}

.login_input_container label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-left: 5px;
}

.login_input_container input {
    border: none;
    /* grigio freddo appena virato, non azzurro */
    background-color: #eef0f4;
    padding: 13px 20px;
    border-radius: var(--radius-md);
    width: 100%;
    outline: none;
    font-size: 1rem;
    color: var(--color-text-darker, #0f172a);
    transition: background-color 0.25s;
}

.login_input_container input::placeholder {
    color: #9aa1ad;
}

.login_input_container input:focus {
    /* nessun bordo/anello: il focus si legge dal solo cambio di tono */
    background-color: #e4e8ee;
    box-shadow: none;
}

.login_buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.login_button_row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
}

.login_button_row .login_button {
    flex: 1;
}

.login_button {
    border: none;
    width: 100%;
    height: 48px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.login_button.login {
    color: white;
    background: linear-gradient(100deg,
        #14181f, #2b323d, #414a58, #2b323d, #14181f);
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: brt_button_flow 11s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    box-shadow: 0 6px 18px rgba(15, 18, 24, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@keyframes brt_button_flow {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.login_button.login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(11, 18, 32, 0.45);
}

.login_button.secondary {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
}

.login_button.secondary:hover {
    background-color: var(--color-bg-gray);
}

#forgotPasswordLink {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

#forgotPasswordLink a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

/* ========================================= */
/* === Mobile Responsiveness === */
/* ========================================= */

@media (max-width: 992px) {
    .image_container h4 {
        font-size: 2.4rem;
        letter-spacing: 4px;
    }
}

@media (max-width: 768px) {
    .login_page {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        /* verticale libero (la pagina si allunga col form), orizzontale
           tagliato: il ::before ha inset -12% e sborda di proposito, con
           overflow visible diventava scroll laterale. */
        overflow-y: visible;
        overflow-x: clip;
        background-attachment: fixed;
    }

    .image_container {
        flex: none;
        height: 120px;
        margin: 0;
    }

    .image_container h4 {
        font-size: 1.9rem;
        letter-spacing: 3px;
    }

    .login_container {
        flex: 1;
        padding: 26px 18px;
        margin: 16px;
        height: auto;
        align-items: flex-start;
        border-radius: 20px;
        /* i 16px di margine per lato vanno sottratti, non aggiunti: senza
           questo il pannello misura 412+32 e la pagina scorre in orizzontale */
        width: auto;
        max-width: calc(100% - 32px);
    }

    .login_form {
        max-width: 100%;
    }

    .login_input_container h1 {
        font-size: 1.6rem;
    }
}
/* ===== TOTP / 2FA steps ===== */
.totp_steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.totp_step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #475569;
}

.totp_step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1e293b;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.totp_qr_box {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    margin-bottom: 4px;
}

.totp_qr_box img {
    width: 220px;
    height: 220px;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.totp_code_input {
    letter-spacing: 0.35em;
    font-size: 1.5rem !important;
    text-align: center;
    font-weight: 700;
}

.totp_setup_instructions {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.totp_fallback_link {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    display: block;
    margin-top: -8px;
}

.totp_fallback_link a {
    color: #64748b;
    text-decoration: underline;
    cursor: pointer;
}

.totp_fallback_link a:hover {
    color: #1e293b;
}

/* ===== Toggle visibilità password ===== */
.login_pw_wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login_pw_wrapper input {
    width: 100%;
    padding-right: 44px;
}

.login_pw_toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.login_pw_toggle:hover { color: #1e293b; }

.login_pw_toggle svg {
    width: 18px;
    height: 18px;
}

/* ===== Button loading state ===== */
.login_button.btn_loading {
    opacity: 0.82;
    cursor: not-allowed;
    pointer-events: none;
}

.btn_spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn_spin 0.65s linear infinite;
    flex-shrink: 0;
}

.login_button.secondary .btn_spinner {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-primary, #1d4ed8);
}

@keyframes btn_spin {
    to { transform: rotate(360deg); }
}

/* Reset password message */
.reset_message{margin-top:10px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.4;text-align:center;}
.reset_message.is-ok{background:#ecfdf5;color:#047857;border:1px solid #6ee7b7;}
.reset_message.is-err{background:#fef2f2;color:#b91c1c;border:1px solid #fca5a5;}

/* Password policy hint box */
.password_policy_box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;}
.ppb_title{font-size:11px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.ppb_list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;}
.ppb_list li{font-size:12px;color:#64748b;line-height:1.35;display:flex;gap:8px;align-items:flex-start;}
.ppb_list li i{flex-shrink:0;margin-top:2px;font-size:10px;color:#cbd5e1;}
.ppb_list li.is-ok,
.ppb_list li.is-ok strong{color:#059669;}
.ppb_list li.is-ok i{color:#059669;font-size:12px;}
.ppb_list code{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:0 4px;font-size:11px;}

/* ===== Descrizione commerciale sotto il titolo ===== */
.login_tagline {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-muted, #64748b);
    margin: 2px 0 0;
}

.login_tagline strong {
    color: var(--color-text-darker, #0f172a);
    font-weight: 700;
}

.login_highlights {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login_highlights li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--color-text-muted, #64748b);
}

.login_highlights li i {
    font-size: 0.72rem;
    color: #14a06a;
}

/* ===== Claim sul pannello colorato ===== */
.brand_block {
    display: flex;
    flex-direction: column;
    /* testo allineato a sinistra, animazione centrata sotto */
    align-items: flex-start;
    gap: 14px;
    padding: 0 24px;
    text-align: left;
    max-width: 560px;
    width: 100%;
}

.brand_claim {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    font-weight: 500;
    max-width: 420px;
    line-height: 1.55;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin: 0;
}

@media (max-width: 768px) {
    .brand_claim { display: none; }
    .brand_block { gap: 0; padding: 0 16px; }
    .login_highlights { display: none; }
}


/* Su mobile il pannello colorato è una fascia bassa: niente spazio */
@media (max-width: 768px) {
    .sped_viz { display: none; }
}

/* Placeholder a pallini della password: leggermente ingrandito
   e distanziato, altrimenti risulta minuto rispetto al testo. */
#password::placeholder {
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    line-height: 1;
    vertical-align: middle;
}

/* =========================================
   === CINQUE PROPOSTE DI SCENA
   === Ne resta visibile una sola: la sceglie
   === data-tema sulla .login_page.
   ========================================= */
.scene { position: relative; width: 100%; margin-top: 20px; }
/* Unica scena rimasta: la mappa di tracking. */
.scena { display: none; }
.login_page[data-tema="mappa"] .s_mappa { display: block; }

/* =========== 2. LIVE (pannello di tracking) =========== */
/* La MAPPA E' LO SFONDO: il fondo della pagina e' scuro come la scena, cosi'
   la mappa non e' una card appoggiata su un fondo chiaro ma la superficie su
   cui vive tutto. Il testo del brand passa quindi al chiaro. */
.login_page[data-tema="mappa"]::before {
    background: linear-gradient(160deg, #1b2433 0%, #131a26 55%, #0d131d 100%);
    filter: none; transform: none; animation: none;
}
.login_page[data-tema="mappa"] { background-color: #131a26; }
.login_page[data-tema="mappa"] .image_container h4 {
    color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.login_page[data-tema="mappa"] .brand_claim {
    color: rgba(255, 255, 255, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* --- La scena occupa la colonna: la mappa sfonda oltre il pannello e fa
       da superficie, mentre i dati (LDV, timeline, ETA) le stanno sopra. --- */
/* La scena riempie TUTTA l'area scura fino al pannello di login: niente
   centratura e niente tetti di larghezza, la colonna e' la mappa. */
.login_page[data-tema="mappa"] .image_container {
    /* la mappa e' gia' lo sfondo della pagina: qui non serve altro colore */
    background: transparent;
    /* contenitore del livello mappa: serve per l'ancoraggio assoluto */
    position: relative;
    display: block;
}

/* --- La MAPPA e' il fondo della colonna: livello assoluto a tutta altezza.
       Cosi' occupa davvero tutto lo spazio, invece di prendersi solo quello
       che resta sotto al titolo e sopra la timeline. --- */
/* La scena e' ancorata alla COLONNA (.image_container), non al blocco di
   testo: dentro brand_block finiva sopra al titolo, che e' statico e quindi
   non vince sullo z-index di un elemento posizionato. */
.login_page[data-tema="mappa"] .scene {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}
/* il testo del brand sta SOPRA la mappa: serve position+z-index, perche'
   un elemento statico perde comunque contro uno posizionato */
.login_page[data-tema="mappa"] .brand_block > h4,
.login_page[data-tema="mappa"] .brand_block > .brand_claim {
    position: relative;
    z-index: 3;
}
.login_page[data-tema="mappa"] .s_mappa,
.login_page[data-tema="mappa"] .live_wrap {
    height: 100%;
}
.login_page[data-tema="mappa"] .live_wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    /* NON visible: la mappa usa preserveAspectRatio=slice e sfonda di
       proposito; senza taglio si prende lo scroll orizzontale. */
    overflow: hidden;
    /* i pezzi "dato" (intestazione e timeline) vengono posizionati sopra la
       mappa, non impilati con lei */
    position: relative;
}
/* la mappa riempie il livello: niente altezza fissa, nessun arrotondamento
   (e' il fondo, non una card) */
.login_page[data-tema="mappa"] .live_mappa {
    position: absolute;
    inset: 0;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
/* velo scuro sulla mappa: senza, il testo bianco sopra le strade chiare
   non si legge */
/* Il velo NON copre piu' tutta la colonna: resta solo dietro al testo, in
   alto (titolo + claim) e in basso (LDV + timeline). In mezzo la mappa si
   vede pulita. */
.login_page[data-tema="mappa"] .live_mappa::after {
    content: '';
    position: absolute; inset: 0;
    background:
        /* fascia alta: dietro SPEDIZIONI e il claim */
        linear-gradient(180deg,
            rgba(11, 16, 25, .93) 0%,
            rgba(11, 16, 25, .8) 16%,
            rgba(11, 16, 25, .3) 27%,
            rgba(11, 16, 25, 0) 34%),
        /* fascia bassa: dietro LDV e timeline */
        linear-gradient(0deg,
            rgba(11, 16, 25, .93) 0%,
            rgba(11, 16, 25, .78) 18%,
            rgba(11, 16, 25, .28) 30%,
            rgba(11, 16, 25, 0) 38%);
    pointer-events: none;
}
/* Le fasce scure vanno ristrette dove il testo e' piu' corto: su schermi
   bassi il titolo e la timeline si avvicinano e il velo le copre entrambe. */
@media (max-height: 700px) {
    .login_page[data-tema="mappa"] .live_mappa::after {
        background:
            linear-gradient(180deg,
                rgba(11, 16, 25, .93) 0%,
                rgba(11, 16, 25, .7) 20%,
                rgba(11, 16, 25, 0) 40%),
            linear-gradient(0deg,
                rgba(11, 16, 25, .93) 0%,
                rgba(11, 16, 25, .7) 22%,
                rgba(11, 16, 25, 0) 44%);
    }
}

/* --- il contenuto in sovraimpressione --- */
.login_page[data-tema="mappa"] .brand_block {
    position: relative;
    z-index: 2;
    max-width: none;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 44px 40px 26px;
    /* titolo e claim in alto: con space-between il claim finiva in fondo
       alla colonna, sotto la mappa */
    justify-content: flex-start;
    gap: 14px;
    /* il blocco non deve intercettare i click: sotto non c'e' nulla di
       interattivo, ma il selettore di tema in fondo si', quindi si riattiva */
    pointer-events: none;
}

/* intestazione LDV e timeline: sopra la mappa, ancorate in basso */
/* LDV e stato: in basso a sinistra, sopra la timeline. In alto si
   accavallavano al titolo SPEDIZIONI, che occupa quella zona. */
.login_page[data-tema="mappa"] .live_top {
    position: absolute;
    left: 40px; right: 40px; bottom: 210px; top: auto;
    z-index: 2;
    border-bottom: none;
    padding: 0;
    pointer-events: none;
    /* lo stato "in consegna" resta a destra della colonna */
    justify-content: flex-start; gap: 14px;
}
.login_page[data-tema="mappa"] .live_eventi {
    position: absolute;
    left: 40px; bottom: 48px;
    z-index: 2;
    padding: 0;
    pointer-events: none;
}
/* la card ETA resta dov'e', in basso a destra della mappa */
.login_page[data-tema="mappa"] .eta_card { z-index: 2; }

/* intestazione: testo chiaro, separatore appena accennato */
.login_page[data-tema="mappa"] .live_top {
    border-bottom-color: rgba(255, 255, 255, .12);
    padding-inline: 2px;
}
.login_page[data-tema="mappa"] .live_ldv strong { color: #fff; }
.login_page[data-tema="mappa"] .live_et { color: rgba(255, 255, 255, .55); }
.login_page[data-tema="mappa"] .live_stato {
    background: rgba(226, 0, 26, .18); color: #ff8b96;
}
/* la mappa: bordi arrotondati e un filo di luce, ma e' parte del fondo */
/* la mappa e' la parte elastica: si allunga per tutta l'altezza libera */
.login_page[data-tema="mappa"] .live_mappa {
    height: auto;
    flex: 1 1 auto;
    min-height: 220px;
    background: transparent;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    margin-top: 12px;
}
/* la timeline degli eventi sta sul fondo scuro, senza pannello proprio */
.login_page[data-tema="mappa"] .live_eventi { padding: 12px 2px 0; }
.login_page[data-tema="mappa"] .ev_txt { color: rgba(255, 255, 255, .88); }
.login_page[data-tema="mappa"] .ev_ora { color: rgba(255, 255, 255, .5); }
.login_page[data-tema="mappa"] .ev::before { background: rgba(255, 255, 255, .14); }
/* la card ETA resta chiara: e' l'unico elemento che deve staccare */
.login_page[data-tema="mappa"] .eta_card {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    /* allineata al bordo inferiore del pannello di login, che ha margin:24px:
       a bottom:16px la card restava piu' in basso del form */
    bottom: 24px;
    right: 28px;
}

/* --- il pannello --- */
.live_wrap {
    width: 100%; max-width: 620px;
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
    border: 1px solid rgba(15, 23, 42, .07);
}

/* intestazione con LDV e stato */
.live_top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 16px 20px; border-bottom: 1px solid #eef2f6;
}
.live_et {
    display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 2px;
}
.live_ldv strong {
    font-size: 1.02rem; font-weight: 800; color: #0f172a; letter-spacing: .04em;
}
.live_stato {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 6px 13px; border-radius: 999px;
    background: #fff1f2; color: #b0141f;
    font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.live_dot {
    width: 8px; height: 8px; border-radius: 50%; background: #e2001a;
    animation: live_batte 1.6s ease-in-out infinite;
}
@keyframes live_batte {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

/* --- mappa scura --- */
.live_mappa { position: relative; height: 260px; background: #131a26; overflow: hidden; }
.live_mappa svg { width: 100%; height: 100%; display: block; }

.isolati rect { fill: #1b2433; }
.vie path { stroke: #232e40; stroke-width: 7; stroke-linecap: round; fill: none; }

/* percorso: quello gia' fatto e' acceso, il resto e' tenue */
.via_base {
    stroke: rgba(255, 255, 255, .26); stroke-width: 3.5;
    stroke-linecap: round; fill: none; stroke-dasharray: 2 9;
}
/* La linea rossa segue il furgone: la lunghezza va misurata con
   getTotalLength (ora 1247, il percorso segue la griglia stradale) e
   l'offset finale deve arrivare a ZERO. Con 760 -> 190 la linea copriva solo il 75% del tracciato mentre il
   furgone lo percorreva tutto, e sembrava "piu' veloce" della scia. */
.via_fatta {
    stroke: #e2001a; stroke-width: 4; stroke-linecap: round; fill: none;
    /* alone contenuto: a 7px/.75 il rosso si saturava e la scia sembrava
       fluorescente invece di illuminata */
    filter: drop-shadow(0 0 5px rgba(226, 0, 26, .45));
    stroke-dasharray: 1247; stroke-dashoffset: 1247;
    animation: via_avanza 11s linear infinite;
}
@keyframes via_avanza {
    /* stessi tempi dell'animateMotion del furgone: 0 -> 90%, poi pausa */
    0%        { stroke-dashoffset: 1247; }
    90%, 100% { stroke-dashoffset: 0; }
}

/* fermate */
.ferm_p { fill: #fff; }
.ferm.meta .ferm_p { fill: #e2001a; }
.ferm_alone {
    fill: rgba(226, 0, 26, .22);
    transform-box: fill-box; transform-origin: center;
    animation: ferm_pulsa 2.4s ease-in-out infinite;
}
@keyframes ferm_pulsa {
    0%, 100% { transform: scale(.6); opacity: .9; }
    60%      { transform: scale(1.25); opacity: 0; }
}

/* il mezzo dentro il disco, come sui tracking veri */
.mezzo_eco {
    fill: rgba(226, 0, 26, .25);
    transform-box: fill-box; transform-origin: center;
    animation: mezzo_eco 2s ease-out infinite;
}
@keyframes mezzo_eco {
    0%   { transform: scale(.55); opacity: .85; }
    100% { transform: scale(1.25); opacity: 0; }
}
.mezzo_disco { fill: #e2001a; stroke: #fff; stroke-width: 2.5; }

/* --- card ETA sovrapposta --- */
.eta_card {
    position: absolute; right: 16px; bottom: 16px; width: 232px;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.eta_ora { font-size: 1.12rem; font-weight: 800; color: #0f172a; line-height: 1; }
.eta_et { margin-top: 4px; font-size: .68rem; color: #64748b; font-weight: 600; }
.eta_barra {
    margin: 11px 0 9px; height: 5px; border-radius: 3px;
    background: #e8edf3; overflow: hidden;
}
.eta_barra i {
    display: block; height: 100%; border-radius: 3px; background: #e2001a;
    animation: eta_cresce 11s linear infinite;
}
@keyframes eta_cresce {
    0%        { width: 10%; }
    90%, 99%  { width: 96%; }
    100%      { width: 10%; }
}
/* le quattro varianti si sovrappongono: ne resta visibile una per volta */
.eta_fermate {
    position: relative; height: 1.1em;
    font-size: .7rem; color: #475569; white-space: nowrap;
}
.eta_fermate .fr {
    position: absolute; left: 0; top: 0; opacity: 0;
}
.eta_fermate strong { color: #0f172a; font-weight: 800; }

/* --- timeline eventi --- */
.live_eventi { padding: 6px 20px 16px; }
.ev {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 9px 0 9px 4px; font-size: .8rem; color: #94a3b8;
}
/* filo verticale che unisce i pallini */
.ev::before {
    content: ''; position: absolute; left: 8px; top: 50%; width: 2px; height: 100%;
    background: #e8edf3;
}
.ev:last-child::before { display: none; }
.ev_pallino {
    flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
    background: #fff; border: 2px solid #cbd5e1; position: relative; z-index: 1;
}
.ev_txt { flex: 1 1 auto; min-width: 0; }
.ev_ora { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* --- eventi sincronizzati col viaggio ---
   Il mezzo impiega 11s a percorrere la rotta e tocca le tappe al 2%, 35%,
   68% e 90% del ciclo: gli stessi valori guidano righe, pallini e orari. */
.ev, .ev_pallino, .ev_ora {
    animation-duration: 11s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* backwards: durante l'attesa vale gia' il primo fotogramma, altrimenti
       l'evento resterebbe acceso finche' non tocca il suo turno */
    animation-fill-mode: backwards;
}

.ev.e1 { animation-name: ev_riga; animation-delay: 0.2s; }
.ev.e2 { animation-name: ev_riga; animation-delay: 3.85s; }
.ev.e3 { animation-name: ev_riga; animation-delay: 7.5s; }
.ev.e4 { animation-name: ev_riga; animation-delay: 9.9s; }

.ev.e1 .ev_pallino { animation-name: ev_punto; animation-delay: 0.2s; }
.ev.e2 .ev_pallino { animation-name: ev_punto; animation-delay: 3.85s; }
.ev.e3 .ev_pallino { animation-name: ev_punto; animation-delay: 7.5s; }
.ev.e4 .ev_pallino { animation-name: ev_punto; animation-delay: 9.9s; }

/* l'orario compare solo quando l'evento accade */
.ev.e1 .ev_ora { animation-name: ev_ora_in; animation-delay: 0.2s; }
.ev.e2 .ev_ora { animation-name: ev_ora_in; animation-delay: 3.85s; }
.ev.e3 .ev_ora { animation-name: ev_ora_in; animation-delay: 7.5s; }
.ev.e4 .ev_ora { animation-name: ev_ora_in; animation-delay: 9.9s; }

/* Il ciclo parte dal momento in cui la tappa viene raggiunta: prima e'
   spenta, dopo resta accesa fino alla fine del giro. */
@keyframes ev_riga {
    0%        { color: #cbd5e1; font-weight: 400; }
    1%        { color: #0f172a; font-weight: 700; }
    12%, 99%  { color: #475569; font-weight: 400; }
    100%      { color: #cbd5e1; font-weight: 400; }
}
@keyframes ev_punto {
    0%   { background: #fff; border-color: #e2e8f0; box-shadow: none; transform: scale(1); }
    1%   { background: #e2001a; border-color: #fff;
           box-shadow: 0 0 0 4px rgba(226, 0, 26, .3); transform: scale(1.4); }
    12%, 99% { background: #e2001a; border-color: #e2001a;
           box-shadow: 0 0 0 0 rgba(226, 0, 26, 0); transform: scale(1); }
    100% { background: #fff; border-color: #e2e8f0; transform: scale(1); }
}
@keyframes ev_ora_in {
    0%       { opacity: 0; transform: translateX(8px); color: #cbd5e1; }
    1%       { opacity: 1; transform: translateX(0); color: #0f172a; }
    12%, 99% { opacity: 1; transform: translateX(0); color: #475569; }
    100%     { opacity: 0; transform: translateX(8px); }
}

/* --- contatore fermate: 3 -> 0 mentre il mezzo avanza --- */
/* Quattro messaggi in sequenza su un solo ciclo da 11s: le finestre sono
   ritagliate dentro lo stesso keyframe, senza animation-delay. Con i delay
   l'ultimo messaggio (9.9s) e il primo (0.2s) restavano accesi insieme e le
   due scritte si sovrapponevano. */
.eta_fermate .fr { animation: none; opacity: 0; }
.eta_fermate .f3 { animation: fr_q1 11s linear infinite; }
.eta_fermate .f2 { animation: fr_q2 11s linear infinite; }
.eta_fermate .f1 { animation: fr_q3 11s linear infinite; }
.eta_fermate .f0 { animation: fr_q4 11s linear infinite; }
/* ogni quarto di ciclo accende un solo messaggio */
@keyframes fr_q1 { 0%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes fr_q2 { 0%, 23% { opacity: 0; } 25%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fr_q3 { 0%, 48% { opacity: 0; } 50%, 73% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes fr_q4 { 0%, 73% { opacity: 0; } 75%, 98% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1200px) {
    .brand_block { padding: 0 40px; }
}
/* Sotto i 900px la colonna della mappa non c'e' piu' (la pagina si impila e
   resta il solo form), quindi la scena si nasconde. Prima questa regola
   citava anche il selettore dei temi, ora rimosso. */
@media (max-width: 900px) {
    .scene { display: none; }
}

/* --- fermate lungo il percorso --- */
/* la partenza e' un fatto compiuto: resta tenue */
.login_page[data-tema="mappa"] .ferm.partenza .ferm_p { fill: rgba(255, 255, 255, .55); }
/* le tappe intermedie hanno un anello scuro, cosi' si staccano dalla scia */
.login_page[data-tema="mappa"] .ferm .ferm_p {
    stroke: #0d131d; stroke-width: 2;
}
/* la destinazione pulsa: e' l'unica fermata ancora da raggiungere */
.login_page[data-tema="mappa"] .ferm.meta .ferm_p { fill: #e2001a; }