/* Tabellone servizi: stile "partenze" leggibile a distanza, pensato anche per un monitor fisso. */
:root {
    --sfondo: #0b0f17;
    --riga: #121926;
    --riga-alt: #0f1520;
    --bordo: #1f2a3c;
    --testo: #e8edf5;
    --tenue: #8a97ab;
    --ambra: #ffc23d;
    --verde: #3ddc84;
    --rosso: #ff5a5a;
    --grigio: #6b778a;
    --carattere: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cifre: "Consolas", "DejaVu Sans Mono", "Menlo", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo); font-family: var(--carattere); }
body { min-height: 100vh; display: flex; flex-direction: column; font-size: clamp(14px, 1.15vw, 22px); }
a { color: var(--ambra); }

.testata { display: flex; align-items: center; gap: 1.5em; padding: .8em 1.5em; border-bottom: 2px solid var(--ambra); }
.testata h1 { margin: 0; flex: 1; font-size: 1.6em; letter-spacing: .04em; text-transform: uppercase; color: var(--ambra); }
.orologio { text-align: right; font-family: var(--cifre); }
.orologio span { display: block; font-size: 2em; line-height: 1; color: var(--ambra); }
.orologio small { color: var(--tenue); }
.utente { color: var(--tenue); font-size: .85em; }
body.schermo .utente { display: none; }

.avviso { margin: .6em 1.5em 0; padding: .5em 1em; background: rgba(255, 90, 90, .15); border: 1px solid var(--rosso); color: #ffd6d6; border-radius: 4px; }

main { flex: 1; padding: .5em 1.5em 1em; }
.giorno { margin: 1em 0 .3em; font-size: 1.05em; color: var(--tenue); text-transform: uppercase; letter-spacing: .12em; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { text-align: left; font-weight: 600; font-size: .75em; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; padding: .4em .6em; border-bottom: 1px solid var(--bordo); }
td { padding: .55em .6em; border-bottom: 1px solid var(--bordo); vertical-align: top; overflow-wrap: anywhere; }
tbody tr:nth-child(odd) { background: var(--riga); }
tbody tr:nth-child(even) { background: var(--riga-alt); }
.ora { font-family: var(--cifre); font-size: 1.25em; color: var(--ambra); white-space: nowrap; }
.mezzo { font-family: var(--cifre); font-weight: 700; }
.sotto { display: block; font-size: .78em; color: var(--tenue); }
.luogo b { font-weight: 600; }
.autista { font-weight: 700; }
.ruolo { margin-left: .35em; padding: 0 .35em; font-size: .7em; color: var(--sfondo); background: var(--tenue); border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; vertical-align: .15em; }
tr.eseguito .ruolo, tr.annullato .ruolo { background: var(--grigio); }
.luogo .ora-luogo { font-family: var(--cifre); color: var(--ambra); margin-right: .4em; }
.col-ora { width: 6.5em; } .col-mezzo { width: 9em; } .col-luogo { width: 22%; } .col-stato { width: 10.5em; }

.stato { display: inline-flex; align-items: center; gap: .45em; font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.stato::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: currentColor; }
.stato.da_eseguire { color: var(--ambra); }
.stato.in_esecuzione { color: var(--verde); }
.stato.in_esecuzione::before { animation: lampeggio 1.2s ease-in-out infinite; }
.stato.eseguito { color: var(--grigio); }
.stato.annullato { color: var(--rosso); }
tr.eseguito td { color: var(--grigio); }
tr.eseguito .ora, tr.eseguito .ora-luogo, tr.annullato .ora-luogo { color: var(--grigio); }
tr.annullato td:not(:last-child) { text-decoration: line-through; color: var(--grigio); }
tr.in_esecuzione { box-shadow: inset 4px 0 0 var(--verde); }
@keyframes lampeggio { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .stato.in_esecuzione::before { animation: none; } }

.vuoto { color: var(--tenue); padding: 1em .6em; }
.piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em; padding: .6em 1.5em; border-top: 1px solid var(--bordo); color: var(--tenue); font-size: .8em; }
.legenda { display: flex; gap: 1.2em; flex-wrap: wrap; }

/* Telefono: ogni servizio diventa una scheda */
@media (max-width: 760px) {
    .testata { flex-wrap: wrap; padding: .8em 1em; }
    main { padding: .5em 1em; }
    thead { display: none; }
    table, tbody, tr, td { display: block; width: 100%; }
    tr { margin-bottom: .6em; border: 1px solid var(--bordo); border-radius: 6px; }
    td { border: 0; padding: .3em .8em; }
    td[data-etichetta]::before { content: attr(data-etichetta); display: block; font-size: .7em; color: var(--tenue); text-transform: uppercase; }
}

/* Accesso */
.pagina-login { align-items: center; justify-content: center; }
.login { width: min(360px, 92vw); padding: 2em; background: var(--riga); border: 1px solid var(--bordo); border-radius: 8px; display: grid; gap: 1em; }
.login h1 { margin: 0 0 .3em; font-size: 1.3em; color: var(--ambra); text-transform: uppercase; }
.login label { display: grid; gap: .3em; color: var(--tenue); font-size: .9em; }
.login input { padding: .6em; background: var(--sfondo); color: var(--testo); border: 1px solid var(--bordo); border-radius: 4px; font-size: 1em; }
.login button { padding: .7em; background: var(--ambra); color: #1a1300; border: 0; border-radius: 4px; font-weight: 700; font-size: 1em; cursor: pointer; }
.login .errore { margin: 0; color: var(--rosso); }