/* =====================================================================
   VESTE NUOVA — 02/10/2026, in anteprima (vedi veste_nuova() in seo.php)

   L'utente: «molte card che mi sanno di card e meno di sito professionale,
   in tutte le pagine», «o elenchi infiniti», «moderno e dinamico,
   soprattutto user friendly». Il censimento della stessa notte: fino a 34
   scatole con fondo proprio, bordo e angoli tondi in UNA pagina, pannelli
   dentro pannelli (il pronostico: una card con dentro un'altra card),
   tabelle da 50-60 righe.

   LE REGOLE, in ordine di importanza:
   1. UNA SUPERFICIE SOLA, il fondo della pagina. Le sezioni si separano
      con lo spazio e con una riga sottile in testa, non con una scatola.
   2. LA SCATOLA RESTA SOLO DOVE E' UN OGGETTO: il tabellone (e' un
      tabellone vero), i campi, i pulsanti, la tendina della ricerca.
   3. I NUMERI IN RIGA: le tessere diventano colonne divise da una riga
      verticale, e il numero parla da solo.
   4. GLI ELENCHI SONO RIGHE: una riga sottile fra le voci, lo stato nel
      colore della cifra o in un pallino, mai in un riquadro colorato.
   5. ANGOLI QUASI DRITTI (6 px sui controlli, 0 sulle sezioni), NIENTE
      OMBRE, niente bagliori decorativi.
   6. ELENCHI A PEZZI: quindici voci, poi «Mostra altri» (setupPezzi() in
      app.js, [data-pezzi] nel markup). Senza JavaScript si vede tutto.
   7. MOVIMENTO DISCRETO: la riga si accende sotto il puntatore; con
      prefers-reduced-motion niente transizioni.

   Ogni regola comincia con `html.veste`: la classe c'e' solo con la veste
   accesa, e porta la specificita' sopra le regole di style.css che
   stringono il selettore (`.rm-home .rm-mt-row` e simili).
   ===================================================================== */

html.veste {
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 6px;
    --rm-shadow: none;
    --v-riga: var(--rm-line);
    --v-acceso: rgba(var(--rm-rail-rgb), .06);
    --v-sez: 28px;
}

/* ---------------------------------------------------------------------
   1. PANNELLI -> SEZIONI APERTE
   --------------------------------------------------------------------- */
html.veste :is(.rm-panel, .data-panel, .detail-panel, .side-panel, .scoreboard-panel,
               .bl-chartbox, .bl-aff, .bl-game, .bl-tdg, .train-card, .setup-panel,
               .rm-sres-trains, .today-status) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
/* La riga in testa: un pannello e' ancora una sezione, e si vede dove comincia. */
html.veste :is(.rm-panel, .data-panel, .detail-panel, .bl-aff, .bl-game, .bl-tdg) {
    border-top: 1px solid var(--v-riga);
    padding-top: 20px;
}
/* Pannelli affiancati (due colonne): niente scatola, ma uno spazio vero in mezzo. */
html.veste .bl-two { column-gap: 40px; }
/* Il pronostico sta di lato: una riga a sinistra lo separa dal resto della scheda. */
html.veste .side-panel {
    border-left: 1px solid var(--v-riga);
    padding-left: 24px;
}
@media (max-width: 991.98px) {
    html.veste .side-panel {
        border-left: 0;
        border-top: 1px solid var(--v-riga);
        padding-left: 0;
        padding-top: 20px;
    }
}
/* I bagliori decorativi dietro la home: rumore, in una veste senza ombre. */
html.veste .bl-glow { display: none; }

/* ---------------------------------------------------------------------
   2. AVVISI E NOTE: UNA RIGA A SINISTRA, NON UN RIQUADRO
   --------------------------------------------------------------------- */
html.veste .bl-notte {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--rm-notte);
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 4px 14px;
    font-size: .88rem;
}
html.veste .bl-notte--sciopero { border-left-color: var(--rm-sciopero); }
/* Sul telefono la fascia notturna occupava cinque righe prima del titolo
   della pagina: basta la prima frase, la seconda la ripete con altre parole. */
@media (max-width: 576px) {
    html.veste .bl-notte:not(.bl-notte--sciopero):not(.bl-notte--fermo) .bl-notte-t p:not(:first-of-type) { display: none; }
}
html.veste .bl-sciopero {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--rm-amber);
    border-radius: 0;
    padding: 4px 0 4px 14px;
}
html.veste .pag-note,
html.veste .rec-note {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--rm-rail);
    border-radius: 0;
    padding: 2px 0 2px 18px;
}
html.veste .rm-ai {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--rm-accent);
    border-radius: 0;
    padding: 2px 0 2px 14px;
}
html.veste .alert { border-radius: var(--r-md); }
/* Le chiamate all'azione dentro le schede (il calendario ufficiale nei
   collegamenti, «segui questa tratta»): una riga a sinistra, come le note. */
html.veste :is(.bl-uff, .bl-azione) {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--rm-rail);
    border-radius: 0;
    padding: 4px 0 4px 18px;
}
/* Il treno migliore e il peggiore di una tratta: il colore resta nella riga
   a sinistra, la scatola no. */
html.veste .bl-route-hlcard {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 0 6px 16px;
}
html.veste .bl-route-hlcard.good { border-left: 3px solid var(--rm-green); }
html.veste .bl-route-hlcard.bad { border-left: 3px solid var(--rm-red); }
html.veste .bl-route-hlcard:hover { transform: none; background: var(--v-acceso); }
/* Il calendario degli scioperi: righe, e lo sciopero di oggi con la riga
   rossa a sinistra invece di un riquadro rosso. */
html.veste .sci-voce {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--v-riga);
    border-radius: 0;
    padding: 12px 2px;
}
html.veste .sci-voce.is-oggi {
    border-bottom-color: var(--v-riga);
    border-left: 3px solid var(--rm-red);
    padding-left: 14px;
}
html.veste .sci-oggi {
    background: transparent;
    border: 0;
    border-left: 3px solid var(--rm-red);
    border-radius: 0;
    padding: 4px 0 4px 14px;
}
/* I distintivi del gioco: niente tessera, il simbolo e il nome bastano; quelli
   da conquistare restano spenti. */
html.veste .bd-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html.veste .bd-off { background: transparent; }
/* La testata con la fotografia resta: e' un'immagine, non una scatola. Senza ombra. */
html.veste .rm-stats-hero { box-shadow: none; }
/* Partenze e arrivi restano un interruttore — gialle e bianche come sui
   tabelloni veri — con gli angoli della veste. */
html.veste :is(.rm-bs-tabs, .rm-bs-tab) { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------
   3. ETICHETTE: TESTO, NON PASTIGLIE
   --------------------------------------------------------------------- */
html.veste .rm-eyebrow {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    letter-spacing: .08em;
}
html.veste .rm-cat-pill {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    color: var(--rm-muted);
    font-size: .82rem;
    font-weight: 600;
}
html.veste .bl-tdg-tag { background: transparent; border: 0; padding: 0; }
/* Lo stato di una corsa («IN RITARDO», «SOPPRESSO»): il colore e il
   pallino che style.css gli da' gia' bastano a dirlo; il riquadro intorno
   no. Le regole di style.css hanno !important, quindi anche queste. */
html.veste main .badge {
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------
   4. NUMERI IN RIGA: le tessere diventano colonne
   --------------------------------------------------------------------- */
html.veste :is(.bl-kpi, .rm-stats-hero .rm-stat, .rm-home-hero .rm-stat, .metric-grid span) {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--v-riga);
    border-radius: 0;
    padding: 2px 0 2px 18px;
}
html.veste :is(.bl-kpis, .rm-stats, .metric-grid) { gap: 18px 0; }
html.veste :is(.bl-kpi, .rm-stat):first-child { border-left: 0; padding-left: 0; }
html.veste .bl-kpi:hover { border-color: var(--v-riga); }
/* L'icona nel quadratino colorato accanto a ogni numero e' lo stile da
   modello che la veste toglie: il colore della cifra dice gia' se va bene
   (verde), cosi' cosi' (ambra) o male (rosso). */
html.veste .bl-ki { display: none; }
/* I numeri sotto un titolo (.ph-chip: «31% arriva puntuale», «+23′ ritardo
   tipico»): senza tessera, e sul telefono due per riga invece di uno, che
   ne faceva una colonna lunga quattro righe prima del grafico. */
html.veste .ph-chip {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--v-riga);
    border-radius: 0;
    padding: 2px 0 2px 14px;
    transform: none;
}
html.veste .ph-chip:hover { transform: none; border-color: var(--v-riga); }
@media (max-width: 576px) {
    html.veste .ph-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
    }
}
/* Gli ultimi viaggi: il colore dell'esito resta nella riga in alto, la scatola no. */
html.veste .bl-run {
    background: transparent;
    border: 0;
    border-top: 3px solid var(--rm-line);
    border-radius: 0;
}
html.veste .bl-run.ok { border-top-color: var(--rm-accent); }
html.veste .bl-run.w,
html.veste .bl-run.w1 { border-top-color: var(--rm-amber); }
html.veste .bl-run.w2 { border-top-color: var(--rm-orange); }
html.veste .bl-run.ko { border-top-color: var(--rm-red); }

/* ---------------------------------------------------------------------
   5. ELENCHI: RIGHE, NON TESSERE
   --------------------------------------------------------------------- */
html.veste :is(.rm-mt-row, .rm-sres-station, .rm-miss) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--v-riga);
    border-radius: 0;
    box-shadow: none;
    padding-left: 4px;
    padding-right: 4px;
}
html.veste .rm-miss.is-done { background: transparent; }
html.veste .rm-sres-stations { gap: 0 32px; }
html.veste .rm-sres-station:hover { transform: none; }
html.veste .rm-sres-stations.is-una .rm-sres-station {
    border-bottom: 0;
    border-left: 3px solid var(--rm-accent);
    padding: 6px 0 6px 18px;
}
/* Le righe si accendono sotto il puntatore: e' cosi' che si capisce che
   l'intera riga porta da qualche parte. */
html.veste :is(.bl-route-card, .rm-mt-row, .rm-sres-station, .rm-sres-train, .bl-hub, .rm-faq summary):hover {
    background: var(--v-acceso);
    border-color: var(--v-riga);
}
/* La puntualita' della riga: un pallino davanti, non una striscia lungo il bordo. */
html.veste .bl-route-card.is-ok,
html.veste .bl-route-card.is-warn,
html.veste .bl-route-card.is-bad { box-shadow: none; }
html.veste .bl-route-card::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 19px;
    bottom: auto;
    left: 0;
}
html.veste .bl-route-card { padding-left: 16px; }

/* Le classifiche: righe con una barra sottile in fondo, lunga quanto il dato. */
html.veste .bl-rank { gap: 0; }
html.veste .bl-rank li {
    border-radius: 0;
    border-bottom: 1px solid var(--v-riga);
    padding: 10px 0 12px;
}
html.veste .bl-rank-bar {
    inset: auto auto 0 0;
    height: 2px;
    border-radius: 0;
    opacity: .85;
}
html.veste .bl-rank-bar.is-ok { background: var(--rm-green); }
html.veste .bl-rank-bar.is-bad { background: var(--rm-red); }

/* Le domande frequenti: righe che si aprono, non riquadri impilati. */
html.veste .rm-faq details {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--v-riga);
    border-radius: 0;
    padding: 2px 4px;
}
html.veste details > summary { list-style-position: inside; }

/* Le orarie della stazione e simili: una sezione, non un riquadro. */
html.veste .bl-ore {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--v-riga);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------
   6. LINK A GRAPPOLO: testo, non pastiglie
   --------------------------------------------------------------------- */
html.veste :is(.bl-chips, .rm-chips) { gap: 6px 18px; }
html.veste :is(.bl-chip, .rm-chip) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0;
    color: var(--rm-rail);
    border-bottom: 1px solid transparent;
}
html.veste :is(.bl-chip, .rm-chip):hover {
    border-bottom-color: currentColor;
    background: transparent;
}
html.veste .rm-chips.rm-subnav .rm-chip[aria-current="page"] {
    color: var(--rm-ink);
    border-bottom: 2px solid var(--rm-accent);
}

/* ---------------------------------------------------------------------
   7. PULSANTI E FILTRI
   --------------------------------------------------------------------- */
html.veste :is(.btn, .rm-btn) { border-radius: var(--r-md); box-shadow: none; }
html.veste .rm-btn:hover { box-shadow: none; }
/* Categorie e ordini: schede, non file di bottoni. Quella scelta si legge
   dalla riga sotto, come le linguette di un'applicazione. */
html.veste :is(.category-filter, .v-linguette, .history-switch) > .btn {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 6px 2px;
    margin-right: 14px;
    color: var(--rm-muted);
    font-weight: 600;
}
html.veste :is(.category-filter, .v-linguette, .history-switch) > .btn:hover {
    color: var(--rm-ink);
    border-bottom-color: var(--v-riga);
}
html.veste :is(.category-filter, .v-linguette, .history-switch) > .btn.btn-dark {
    color: var(--rm-ink);
    border-bottom-color: var(--rm-accent);
}
html.veste .category-filter { gap: 0; border-bottom: 1px solid var(--v-riga); }
/* SUL TELEFONO LE LINGUETTE STANNO SU UNA RIGA SOLA, che scorre di lato:
   le tredici categorie del catalogo andavano a capo su sei righe prima
   ancora di arrivare al primo treno. */
@media (max-width: 767.98px) {
    html.veste :is(.category-filter, .v-linguette) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    html.veste :is(.category-filter, .v-linguette)::-webkit-scrollbar { display: none; }
    html.veste :is(.category-filter, .v-linguette) > * { flex: 0 0 auto; }
}
/* Le tabelle stanno sul fondo della pagina, come tutto il resto. */
html.veste main :is(.table, .tbl-board) {
    --bs-table-bg: transparent;
    background: transparent;
}
/* LE OMBRE DI SCORRIMENTO col colore giusto. Il contenitore delle tabelle
   copre i bordi con una sfumatura del colore del PANNELLO, che nella veste
   non c'e' piu': sul fondo della pagina diventava una fascia piu' chiara
   lungo i lati. Stesse sfumature, col colore del fondo. */
html.veste .table-responsive {
    background:
        linear-gradient(to right, var(--rm-bg) 30%, rgba(10,15,26,0)) left / 28px 100% no-repeat,
        linear-gradient(to left,  var(--rm-bg) 30%, rgba(10,15,26,0)) right / 28px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent) left / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}
/* Una tabella impilata non scorre di lato: niente ombre. */
html.veste .table-responsive:has(> .tbl-stack) { background: none; }
/* Il pronostico: le scelte restano pulsanti, ma piatti. */
html.veste .rm-chip-guess { border-radius: var(--r-md); }
html.veste .rm-stake {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--v-riga);
    border-radius: 0;
    padding: 16px 0 0;
}

/* ---------------------------------------------------------------------
   7b. LE TABELLE SUL TELEFONO: RIGHE COMPATTE, NON SCHEDE
   Sotto i 560 px app.js trasforma le tabelle che sbordano (.tbl-stack) e
   style.css ne faceva una scheda per riga: bordo, angoli, fondo, cinque
   righe «etichetta -> valore». L'utente il 02/10/2026, con lo schermo del
   catalogo in mano: «tipo questi secondo me sono brutti». Un treno
   occupava mezzo schermo.
   Qui ogni riga torna una riga: in alto il titolo (il treno) con la
   categoria accanto, sotto la tratta, in fondo i numeri in fila con la loro
   etichetta piccola davanti. Le colonne numeriche si riconoscono da
   `.text-end`, che le tabelle del sito portano gia' per allinearle a destra.
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
    html.veste main .tbl-stack tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 3px 14px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--v-riga);
        border-radius: 0;
        padding: 12px 2px;
        margin: 0;
    }
    html.veste main .tbl-stack tbody td {
        display: inline-flex !important;
        width: auto !important;
        flex: 0 1 auto;
        justify-content: flex-start;
        align-items: baseline;
        gap: 5px;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        font-size: .92rem;
    }
    html.veste main .tbl-stack tbody td > .tbl-v { flex: 0 1 auto; text-align: left; }
    html.veste main .tbl-stack tbody td::before {
        font-size: .74rem;
        color: var(--rm-muted);
        /* L'etichetta nel carattere del testo: la cifra accanto puo' essere
           monospazio, «Corse» no. */
        font-family: "Inter", system-ui, sans-serif;
        font-weight: 500;
        letter-spacing: 0;
    }
    /* Il titolo della riga: il treno (o la data, nello storico). */
    html.veste main .tbl-stack tbody td:first-child {
        flex: 1 1 auto;
        font-size: 1rem;
        border-bottom: 0 !important;
        margin-bottom: 0;
    }
    /* Le colonne di testo — la tratta — prendono una riga intera, senza etichetta. */
    html.veste main .tbl-stack tbody td:not(:first-child):not(.text-end) {
        flex: 1 1 100%;
        color: var(--rm-muted);
    }
    html.veste main .tbl-stack tbody td:not(:first-child):not(.text-end)::before { content: none; }
    /* Una pastiglia da sola (la categoria, lo stato) sta in riga col titolo,
       e si spiega da se': niente etichetta. */
    html.veste main .tbl-stack tbody td:has(> .tbl-v > :is(.rm-cat-pill, .badge):only-child) {
        flex: 0 0 auto;
        color: inherit;
    }
    /* Nelle classifiche la prima colonna e' il posto: piccolo, davanti al
       treno, che resta il titolo. */
    html.veste main .tbl-stack tbody td[data-l="#"] {
        flex: 0 0 auto;
        color: var(--rm-muted);
        font-size: .86rem;
        font-weight: 600;
    }
    /* `:not(.text-end)` non e' un filtro: alza la specificita' sopra la
       regola delle colonne di testo qui sopra, che altrimenti vincerebbe. */
    html.veste main .tbl-stack tbody td[data-l="#"] + td:not(.text-end) {
        flex: 1 1 auto;
        color: inherit;
        font-weight: 700;
    }
}

/* ---------------------------------------------------------------------
   8. GLI OGGETTI VERI: restano oggetti, piu' asciutti
   --------------------------------------------------------------------- */
html.veste :is(.bl-board, .rm-board-station, .bl-search, .search-card .form-control) {
    border-radius: var(--r-md);
    box-shadow: none;
}
html.veste .bl-search:focus-within { box-shadow: 0 0 0 3px rgba(var(--rm-accent-rgb), .16); }
html.veste .ac-box { border-radius: var(--r-md); }

/* ---------------------------------------------------------------------
   9. ELENCHI A PEZZI: il pulsante «Mostra altri»
   --------------------------------------------------------------------- */
html.veste [data-pezzi] > [hidden],
html.veste [data-pezzi] tr[hidden] { display: none !important; }
html.veste .v-altri {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--v-riga);
    color: var(--rm-rail);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
html.veste .v-altri:hover { color: var(--rm-ink); background: var(--v-acceso); }
html.veste .v-altri:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* Le introduzioni chiuse (setupIntro() in app.js): il primo paragrafo si
   ferma a tre righe, il pulsante dice che c'e' dell'altro. */
html.veste .is-chiusa:is(.pag-intro, .bl-train-intro) > p:first-of-type {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
html.veste .v-leggi {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    color: var(--rm-rail);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
html.veste .v-leggi:hover { color: var(--rm-ink); }
html.veste .v-leggi:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   10. IL SEGNO DELL'ANTEPRIMA: chi la guarda sa che e' un'anteprima, e
   da dove si torna indietro.
   --------------------------------------------------------------------- */
.v-anteprima {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1050;
    padding: 6px 10px;
    background: var(--rm-deep);
    border: 1px solid var(--rm-accent);
    border-radius: 6px;
    color: var(--rm-ink);
    font-size: .78rem;
    text-decoration: none;
}
.v-anteprima:hover { color: var(--rm-ink); text-decoration: underline; }

/* ---------------------------------------------------------------------
   11. MOVIMENTO
   --------------------------------------------------------------------- */
html.veste :is(.bl-route-card, .rm-mt-row, .rm-sres-station, .rm-sres-train, .bl-hub, .v-altri, .rm-faq summary) {
    transition: background-color 140ms ease, color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
    html.veste * { transition: none !important; }
}