/* =====================================================================
   LA VESTE DI STAZIONE (08/10/2026, anteprima: veste_unica() in seo.php)
   ---------------------------------------------------------------------
   L'utente: «rendi la homepage ancora piu' unica e poi allinea il resto
   delle pagine». Il sito parlava la lingua di un qualsiasi prodotto scuro
   moderno; qui prende quella delle stazioni italiane, con tre oggetti che
   chiunque prenda il treno riconosce:

     1. IL TABELLONE A PALETTE (Solari). Nero, tessere con la cerniera a
        meta', le cifre che cadono una alla volta. Sta dove il sito dice
        cosa parte e cosa ritarda: il tabellone della home.
     2. IL DISPLAY A PUNTINI del binario e del frontale del treno, ambra
        su nero. Sta sui NUMERI: i quattro della home, i dati di testata
        di tutte le pagine, il codice del treno.
     3. IL CARTELLO BLU delle stazioni, bianco su blu col filetto bianco.
        Sta sulle ETICHETTE (gli occhielli di ogni pagina) e diventa il
        titolo intero sulle pagine delle stazioni.

   Restano scuri anche nel tema chiaro: sono oggetti, non superfici, come
   le isole blu notte di tema-chiaro.css.

   Tutto e' sotto html.unica: senza il cookie questo foglio non si carica
   nemmeno.
   ===================================================================== */

html.unica {
    --rfi-blu: #1D4497;
    --rfi-blu-scuro: #163677;
    --led: #FFB020;
    --led-rgb: 255, 176, 32;
    --led-rosso: #FF5B4A;
    --led-verde: #5BE37D;
    --led-fondo: #06080B;
    --solari: #0D1015;
    --solari-alto: #05070A;
    --tessera-a: #222831;
    --tessera-b: #1B2028;
}

/* ---------- 2. Il display a puntini ----------
   I puntini sono il FONDO delle lettere (background-clip: text): accesi
   pieni al centro, spenti ma visibili attorno, cosi' la cifra si legge
   anche dove il punto non cade. Il bagliore e' un filtro, che si applica
   dopo il ritaglio e quindi esce dalle lettere. */
html.unica .bl-kn,
html.unica .ph-n,
html.unica .rm-th-code-t {
    color: transparent !important;
    background-image: radial-gradient(circle at 50% 50%, var(--led-c, var(--led)) 0 1.05px, rgba(var(--led-rgb), .2) 1.25px);
    background-size: 3px 3px;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(var(--led-rgb), .38));
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: .02em;
}
html.unica .bl-kn small, html.unica .ph-n small { color: transparent; }
html.unica .bl-kn.bad { --led-c: var(--led-rosso); filter: drop-shadow(0 0 6px rgba(255, 91, 74, .4)); }

/* I pannelli che li contengono: il vetro nero del display, con la
   griglia dei punti spenti appena visibile. */
html.unica .bl-kpis,
html.unica .ph-chips {
    background-color: var(--led-fondo);
    background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 0 .9px, transparent 1.1px);
    background-size: 3px 3px;
    border: 1px solid #000;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 14px 32px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .25);
}
html.unica .bl-kpis { padding: 16px 8px; gap: 0; }
html.unica .bl-kpi {
    background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .07);
    border-radius: 0; box-shadow: none; transform: none; padding: 4px 18px;
}
html.unica .bl-kpi:first-child { border-left: 0; }
html.unica .bl-kpi:hover { transform: none; }
html.unica .bl-ki { color: rgba(var(--led-rgb), .55); background: none; }
html.unica .bl-kn { font-size: 1.85rem; }
html.unica .bl-kl, html.unica .ph-l { color: rgba(255, 255, 255, .58) !important; }
html.unica .bl-kd.up { color: var(--led-verde); }
html.unica .bl-kd.down { color: var(--led-rosso); }

html.unica .ph-chips { padding: 12px 6px; }
html.unica .ph-chip, html.unica .ph-chips > .ph-chip:first-child {
    padding: 2px 16px; border-left: 1px solid rgba(255, 255, 255, .07);
}
html.unica .ph-chips > .ph-chip:first-child { border-left: 0; }
html.unica .ph-chip:hover { transform: none; }
html.unica .ph-n { font-size: 1.45rem; }

/* ---------- 3. Il cartello blu ----------
   Gli occhielli diventano targhe: bianco su blu, filetto bianco interno,
   lettere senza grazie come sui cartelli veri (non il monospaziato). */
html.unica .rm-eyebrow,
html.unica .bl-eyebrow {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--rfi-blu);
    border: 0;
    border-radius: 4px;
    padding: 6px 12px 5px;
    box-shadow: inset 0 0 0 2px var(--rfi-blu), inset 0 0 0 3px rgba(255, 255, 255, .92), 0 2px 0 var(--rfi-blu-scuro);
}

/* Sulle pagine delle stazioni il cartello E' il titolo: il nome della
   stazione come lo si legge arrivando sul binario. L'occhiello «Stazione»
   a quel punto ripeterebbe la stessa cosa. */
html.unica .ph[data-tipo="stazione"] .rm-eyebrow { display: none; }
html.unica .ph[data-tipo="stazione"] .ph-title {
    display: inline-block;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    letter-spacing: .02em;
    line-height: 1.1;
    color: #fff;
    background: var(--rfi-blu);
    padding: .34em .7em .3em;
    border-radius: 6px;
    box-shadow: inset 0 0 0 4px var(--rfi-blu), inset 0 0 0 6px #fff, 0 3px 0 var(--rfi-blu-scuro), 0 14px 30px rgba(0, 0, 0, .3);
    text-wrap: balance;
}
html.unica .ph[data-tipo="stazione"] .ph-sub { margin-top: 14px; }

/* ---------- Il codice del treno: il display del frontale ---------- */
html.unica .rm-th-code {
    display: inline-flex; align-items: center;
    padding: .1em .42em .12em;
    border-radius: 8px;
    background-color: var(--led-fondo);
    background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 0 .9px, transparent 1.1px);
    background-size: 3px 3px;
    border: 2px solid #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .35);
    text-shadow: none;
}
html.unica .rm-th h1 { text-shadow: none; }
html.unica .rm-th-code-t { line-height: 1.05; }

/* ---------- 1. Il tabellone a palette (home) ---------- */
html.unica .bl-board {
    background: var(--solari);
    border: 1px solid #000;
    border-radius: 14px;
    padding: 0 0 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}
html.unica .bl-board-top {
    gap: 12px;
    background: var(--solari-alto);
    border-bottom: 2px solid #000;
    padding: 12px 16px;
}
html.unica .bl-board-t {
    color: #fff !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700; font-size: .8rem; letter-spacing: .16em;
}
html.unica .blu-orologio { width: 36px; height: 36px; margin-left: auto; flex: none; }
.blu-or-fondo { fill: #F4F3EE; stroke: #0A0A0A; stroke-width: 1.4; }
.blu-or-h { stroke: #111; stroke-width: 2.1; }
.blu-or-m { stroke: #111; stroke-width: .7; }
.blu-or-ore { stroke: #111; stroke-width: 2.8; }
.blu-or-min { stroke: #111; stroke-width: 2.1; }
.blu-or-sec { stroke: #D7261E; stroke-width: .9; }
.blu-or-pal { fill: #D7261E; }
.blu-or-perno { fill: #111; }
/* L'ORA IN CIFRE (08/10/2026, idea dell'utente): passando sopra l'orologio,
   o toccandolo, compare l'ora esatta come su un indicatore di stazione.
   Il contenitore prende il posto dell'orologio nella riga (margin-left:auto). */
html.unica .blu-or-box { position: relative; margin-left: auto; flex: none; display: inline-flex; border-radius: 50%; outline-offset: 3px; }
html.unica .blu-or-box .blu-orologio { margin-left: 0; }
.blu-or-ora {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 5;
    padding: 6px 10px 5px; border-radius: 6px; white-space: nowrap; pointer-events: none;
    background: #07090d; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    color: rgb(var(--led-rgb, 255, 196, 0));
    font: 700 1.05rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(var(--led-rgb, 255, 196, 0), .45);
    opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top right;
    transition: opacity 140ms ease-out, transform 140ms cubic-bezier(.23, 1, .32, 1);
}
.blu-or-ora small { display: block; margin-top: 4px; font: 600 .58rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); text-shadow: none; }
.blu-or-box:hover .blu-or-ora, .blu-or-box:focus-visible .blu-or-ora, .blu-or-box.blu-or-su .blu-or-ora { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .blu-or-ora { transition: none; transform: none; } }

/* Colonne fisse: le intestazioni stanno sopra le righe, e con colonne
   larghe quanto il contenuto ogni riga avrebbe le sue. */
html.unica .blu-cols,
html.unica .bl-brow { grid-template-columns: 102px 84px minmax(0, 1fr) 96px; column-gap: 12px; }
html.unica .blu-cols {
    display: grid;
    padding: 8px 16px 6px;
    font: 600 .62rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    border-bottom: 1px solid #000;
}
html.unica .blu-cols span:last-child { text-align: right; }
html.unica .bl-brow {
    padding: 9px 16px;
    border-top: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
html.unica .bl-brow:hover { background: rgba(255, 255, 255, .04); }
html.unica .bl-bdest {
    color: #fff; text-transform: uppercase; letter-spacing: .03em;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600; font-size: .86rem;
}
html.unica .bl-bcode { color: rgba(255, 255, 255, .78); }
html.unica .bl-btime, html.unica .bl-bdelay { display: inline-flex; gap: 2px; line-height: 1; }
html.unica .bl-btime { color: #FFD449; }
html.unica .bl-bdelay { justify-content: flex-end; }

/* La tessera: due meta' di grigio diverse, la cerniera nera a meta'
   altezza, e la caduta dall'alto quando arriva un dato nuovo. */
html.unica .bl-brow .flap {
    position: relative;
    display: inline-grid; place-items: center;
    width: 17px; height: 25px;
    border-radius: 3px;
    font: 700 15px/1 "JetBrains Mono", ui-monospace, monospace;
    color: inherit;
    background: linear-gradient(var(--tessera-a) 0 50%, var(--tessera-b) 50% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 0 #000;
    transform-origin: 50% 50%;
    animation: blu-cade 420ms cubic-bezier(.3, .7, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 38ms);
}
html.unica .bl-brow .flap::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(0, 0, 0, .7);
}
html.unica .bl-brow .flap.sp { width: 6px; background: none; box-shadow: none; }
html.unica .bl-brow .flap.sp::after { display: none; }
@keyframes blu-cade {
    0%   { transform: perspective(160px) rotateX(-92deg); filter: brightness(1.7); }
    70%  { transform: perspective(160px) rotateX(8deg); }
    100% { transform: perspective(160px) rotateX(0); filter: none; }
}

@media (max-width: 520px) {
    html.unica .blu-cols { display: none; }
    html.unica .bl-brow { grid-template-columns: auto auto minmax(0, 1fr); padding: 10px 12px; }
    html.unica .bl-brow .flap { width: 15px; height: 22px; font-size: 13px; }
    html.unica .blu-orologio { width: 30px; height: 30px; }
    html.unica .bl-kpi { border-left: 0; padding: 6px 12px; }
    html.unica .ph-chip { padding: 2px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html.unica .bl-brow .flap { animation: none; }
}

/* =====================================================================
   SECONDO GIRO (08/10/2026): il resto delle pagine.
   L'utente: «rifare tutto lo stile grafico di tutte le pagine, basta che
   sia tutto allineato: la scheda treno, i record, le statistiche, il
   footer». Gli stessi tre oggetti, applicati dove c'erano dei numeri,
   delle etichette o degli avvisi rimasti con la veste di prima.
   ===================================================================== */

/* I colori del display seguono la scala del sito (rt-*): verde, ambra,
   arancio, rosso, come le luci della scheda. */
html.unica .rt-ok { --led-c: var(--led-verde); }
html.unica .rt-w1 { --led-c: var(--led); }
html.unica .rt-w2 { --led-c: #FF8A3D; }
html.unica .rt-ko { --led-c: var(--led-rosso); }

/* IL DISPLAY CON LA SUA TARGA. Dove il numero sta su una pagina chiara
   (tema chiaro, schede bianche) serve il vetro nero dietro. Qui niente
   puntini dentro le lettere: provato il doppio ritaglio (puntini nel
   testo, nero sulla scatola) e Chrome lo disegna come una griglia grigia.
   Cifre piene e luminose sul vetro puntinato: si leggono sempre. */
html.unica .rec-v,
html.unica .tmon-big [data-field="delay_main"] {
    display: inline-block;
    color: var(--led-c, var(--led)) !important;
    background-color: var(--led-fondo);
    background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 0 .9px, transparent 1.1px);
    background-size: 3px 3px;
    padding: .08em .34em .1em;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px #000;
    text-shadow: 0 0 10px color-mix(in srgb, var(--led-c, var(--led)) 55%, transparent);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.05;
}
html.unica .rec-card.rec-bad .rec-v { --led-c: var(--led-rosso); }
html.unica .rec-card.rec-good .rec-v { --led-c: var(--led-verde); }

/* Le etichette dei record: cartellini blu, come gli occhielli. */
html.unica .rec-k {
    display: inline-block;
    font: 700 .62rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--rfi-blu);
    border-radius: 3px; padding: 5px 8px 4px; margin-bottom: 10px;
    box-shadow: inset 0 0 0 1.5px var(--rfi-blu), inset 0 0 0 2.5px rgba(255, 255, 255, .9);
}

/* Statistiche: i cinque numeri della testata nel vetro del display. */
html.unica .rm-stats {
    background-color: rgba(6, 8, 11, .82);
    background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 0 .9px, transparent 1.1px);
    background-size: 3px 3px;
    border: 1px solid #000; border-radius: 12px;
    padding: 12px 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
html.unica .rm-stats .rm-n {
    color: transparent !important;
    background-image: radial-gradient(circle at 50% 50%, var(--led-c, var(--led)) 0 1.05px, rgba(var(--led-rgb), .2) 1.25px);
    background-size: 3px 3px;
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 6px rgba(var(--led-rgb), .38));
    font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800;
}
html.unica .rm-stats .rm-l { color: rgba(255, 255, 255, .62) !important; }
html.unica .rm-stats .rm-l b { color: #fff; }

/* Scheda treno: orari programmati come sul tabellone. */
html.unica .rm-train-times strong {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: #FFD449; background: var(--solari); border: 1px solid #000;
    border-radius: 4px; padding: 1px 6px; letter-spacing: .04em;
}

/* La banda degli avvisi: il display del marciapiede, ambra su nero. */
html.unica .bl-notte {
    background-color: var(--led-fondo) !important;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 0 .9px, transparent 1.1px) !important;
    background-size: 3px 3px !important;
    border: 1px solid #000 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
    padding: 14px 18px !important;
}
html.unica .bl-notte-t strong {
    color: var(--led) !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
}
html.unica .bl-notte-t p { color: rgba(var(--led-rgb), .82) !important; font-size: .88rem; }
html.unica .bl-notte::before, html.unica .bl-notte::after { display: none !important; }

/* ---------- Il piede: la linea gialla ----------
   Dove finisce la pagina c'e' il bordo del marciapiede: la fascia gialla
   tattile che tutti conoscono da «allontanarsi dalla linea gialla». */
html.unica .rm-footer {
    position: relative;
    background: var(--solari) !important;
    padding-top: 40px;
    border-top: 0;
}
html.unica .rm-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 16px;
    background:
        radial-gradient(circle at 5px 5px, rgba(0, 0, 0, .28) 0 1.8px, transparent 2.3px) 0 4px / 10px 10px,
        #F2C400;
    box-shadow: 0 -6px 0 #3A3F47, 0 -7px 0 #000;
}
html.unica .rm-foot-brand {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--rfi-blu); color: #fff !important;
    border-radius: 5px; padding: 8px 14px 7px;
    box-shadow: inset 0 0 0 3px var(--rfi-blu), inset 0 0 0 4.5px #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
html.unica .rm-foot-brand .rm-brand-1, html.unica .rm-foot-brand .rm-brand-2 { color: #fff !important; }
html.unica .rm-foot-cols .rm-foot-h {
    display: inline-block;
    width: fit-content;
    font: 700 .64rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff !important; background: var(--rfi-blu);
    border-radius: 3px; padding: 5px 8px 4px;
    box-shadow: inset 0 0 0 1.5px var(--rfi-blu), inset 0 0 0 2.5px rgba(255, 255, 255, .9);
}
html.unica .rm-foot-cols a { color: rgba(255, 255, 255, .72) !important; }
html.unica .rm-foot-cols a:hover { color: #FFD449 !important; }
html.unica .rm-foot-note { color: rgba(var(--led-rgb), .75) !important; font-family: "JetBrains Mono", ui-monospace, monospace; }
/* Targhe e display larghi quanto il loro contenuto, non quanto la colonna. */
html.unica .rec-k, html.unica .rec-v, html.unica .rm-foot-brand { width: fit-content; }
/* I QUATTRO NUMERI DELLA HOME sul telefono (08/10/2026, controllo prima di
   accendere la veste per tutti). La regola della veste base
   `html.veste :is(.bl-kpi, .rm-stats-hero .rm-stat, ...)` pesa piu' di
   `html.unica .bl-kpi`: :is() prende il peso del suo argomento piu' pesante.
   Cosi' il «93,2%», primo della seconda riga, si teneva filo e rientro della
   versione larga. Qui html.unica.veste, e una griglia che non lascia mai un
   numero da solo: quattro in fila, oppure due per due. */
html.unica.veste .bl-kpi { border-left: 1px solid rgba(255, 255, 255, .07); padding: 4px 18px; }
html.unica.veste .bl-kpi:first-child { border-left: 0; }
@media (max-width: 900px) {
    html.unica.veste .bl-kpis { grid-template-columns: 1fr 1fr; gap: 14px 0; }
    html.unica.veste .bl-kpi:nth-child(odd) { border-left: 0; }
}
@media (max-width: 520px) {
    html.unica.veste .bl-kpi { padding: 6px 12px; }
}