:root {
    color-scheme: light;

    --grigio-0: #ffffff;
    --grigio-25: #fafafa;
    --grigio-50: #f5f5f5;
    --grigio-100: #eeeeee;
    --grigio-200: #dedede;
    --grigio-300: #c5c5c5;
    --grigio-400: #9a9a9a;
    --grigio-500: #737373;
    --grigio-600: #555555;
    --grigio-700: #3b3b3b;
    --grigio-800: #252525;
    --grigio-900: #151515;
    --accento: #315bd6;
    --accento-scuro: #2547aa;
    --accento-tenue: #edf2ff;

    --font-sistema: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --testo-base: 13px;
    --testo-tabella: 12px;
    --testo-piccolo: 11px;
    --testo-titolo: 20px;
    --testo-sottotitolo: 14px;
    --peso-normale: 400;
    --peso-medio: 600;

    --spazio-0: 0;
    --spazio-1: 4px;
    --spazio-2: 8px;
    --spazio-3: 12px;
    --spazio-4: 16px;
    --spazio-5: 20px;
    --spazio-6: 24px;
    --spazio-8: 32px;

    --raggio-piccolo: 4px;
    --raggio: 6px;
    --raggio-tondo: 999px;
    --bordo-sottile: 1px;
    --bordo-enfasi: 3px;
    --altezza-testata: 44px;
    --altezza-riga-tabella: 32px;
    --altezza-controllo: 32px;
    --altezza-controllo-compatto: 24px;
    --larghezza-contenuto: 1880px;
    --larghezza-form: 620px;
    --larghezza-minima: 1024px;
    --larghezza-fase: 112px;
    --larghezza-data-riga: 116px;
    --larghezza-ore: 44px;
    --larghezza-nota: 92px;
    --larghezza-accesso: 380px;
    --larghezza-data-form: 180px;
    --larghezza-nome-utente: 160px;
    --diametro-indicatore: 6px;
    --linea-base: 1.35;
    --linea-titolo: 1.3;
    --linea-compatta: 1;
    --tracking-marchio: .01em;
    --tracking-tabella: .03em;
    --tracking-etichetta: .04em;
    --livello-gruppo: 3;
    --livello-testa: 4;
    --ombra-focus: 0 0 0 2px var(--accento-tenue);
}

[data-tema="chiaro"] {
    color-scheme: light;
    --grigio-0: #ffffff;
    --grigio-25: #fafafa;
    --grigio-50: #f5f5f5;
    --grigio-100: #eeeeee;
    --grigio-200: #dedede;
    --grigio-300: #c5c5c5;
    --grigio-400: #767676;
    --grigio-500: #626262;
    --grigio-600: #505050;
    --grigio-700: #383838;
    --grigio-800: #252525;
    --grigio-900: #151515;
    --accento: #315bd6;
    --accento-scuro: #2547aa;
    --accento-tenue: #edf2ff;
}

[data-tema="scuro"] {
    color-scheme: dark;
    --grigio-0: #17191f;
    --grigio-25: #121419;
    --grigio-50: #0e0f13;
    --grigio-100: #20232b;
    --grigio-200: #30343f;
    --grigio-300: #484e5c;
    --grigio-400: #8991a1;
    --grigio-500: #a3a9b5;
    --grigio-600: #bdc2cc;
    --grigio-700: #d5d8df;
    --grigio-800: #e3e5e9;
    --grigio-900: #f0f1f3;
    --accento: #7aa2ff;
    --accento-scuro: #a9c2ff;
    --accento-tenue: #18233e;
}

@font-face {
    font-family: "Inter";
    src: url("vendor/Inter-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("vendor/Inter-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
html { background: var(--grigio-50); }
body {
    min-width: var(--larghezza-minima);
    margin: var(--spazio-0);
    background: var(--grigio-50);
    color: var(--grigio-800);
    font-family: var(--font-sistema);
    font-size: var(--testo-base);
    font-weight: var(--peso-normale);
    line-height: var(--linea-base);
}
.pagina-interna { --peso-medio: 500; font-family: "Inter", var(--font-sistema); font-feature-settings: "tnum" 1; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--bordo-sottile) solid var(--accento); box-shadow: var(--ombra-focus); }
.skip-link { position: fixed; top: var(--spazio-2); left: var(--spazio-2); z-index: calc(var(--livello-testa) + 1); padding: var(--spazio-2) var(--spazio-3); background: var(--accento); color: var(--grigio-0); transform: translateY(calc((var(--altezza-testata) + var(--spazio-4)) * -1)); }
.skip-link:focus { transform: translateY(var(--spazio-0)); }

.testata {
    display: flex;
    align-items: center;
    min-height: var(--altezza-testata);
    padding: var(--spazio-0) var(--spazio-4);
    border-bottom: var(--bordo-sottile) solid var(--grigio-200);
    background: var(--grigio-0);
}
.marchio { margin-right: var(--spazio-6); color: var(--grigio-900); font-weight: var(--peso-medio); letter-spacing: var(--tracking-marchio); }
.marchio:hover { text-decoration: none; }
.navigazione { display: flex; align-items: center; gap: var(--spazio-5); }
.navigazione a, .azione-navigazione { color: var(--grigio-600); font-size: var(--testo-tabella); font-weight: var(--peso-medio); }
.navigazione a:hover, .azione-navigazione:hover { color: var(--grigio-900); text-decoration: none; }
.form-navigazione { display: inline-flex; margin: var(--spazio-0); }
.azione-navigazione, .azione-testo {
    height: auto;
    padding: var(--spazio-0);
    border: var(--spazio-0);
    background: transparent;
    color: var(--accento);
    cursor: pointer;
}
.nome-utente { margin-left: auto; color: var(--grigio-500); font-size: var(--testo-tabella); }
.interruttore-tema { width: var(--altezza-controllo); min-height: var(--altezza-controllo) !important; margin-left: var(--spazio-2); padding: var(--spazio-1) !important; border-color: var(--grigio-300) !important; background: var(--grigio-0) !important; color: var(--grigio-700) !important; }
.interruttore-tema svg { width: var(--spazio-4); height: var(--spazio-4); fill: none; stroke: currentColor; }

.contenuto { width: min(100%, var(--larghezza-contenuto)); margin: var(--spazio-0) auto; padding: var(--spazio-4); }
.intestazione-pagina { display: flex; align-items: center; min-height: var(--altezza-testata); }
h1, h2, h3, p { margin-top: var(--spazio-0); }
h1 { margin-bottom: var(--spazio-3); color: var(--grigio-900); font-size: var(--testo-titolo); line-height: var(--linea-titolo); }
h2, h3 { line-height: var(--linea-titolo); }
h2 { margin-bottom: var(--spazio-2); color: var(--grigio-900); font-size: var(--testo-sottotitolo); }
p { margin-bottom: var(--spazio-3); }
.testo-forte { color: var(--grigio-900); font-weight: var(--peso-medio); }
.testo-secondario, .aiuto-campo, .aiuto-blocco { color: var(--grigio-500); }
.aiuto-campo { margin-left: var(--spazio-1); font-size: var(--testo-tabella); font-weight: var(--peso-normale); }
.aiuto-blocco { margin: calc(var(--spazio-2) * -1) var(--spazio-0) var(--spazio-3); font-size: var(--testo-tabella); }

.barra-azioni { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-4); min-height: var(--altezza-testata); margin-bottom: var(--spazio-3); }
.barra-azioni__comandi { display: flex; gap: var(--spazio-2); }
.pulsante, button:not(.azione-navigazione):not(.azione-testo) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--altezza-controllo);
    padding: var(--spazio-1) var(--spazio-3);
    border: var(--bordo-sottile) solid var(--accento);
    border-radius: var(--raggio-piccolo);
    background: var(--accento);
    color: var(--grigio-0);
    font-weight: var(--peso-medio);
    line-height: var(--linea-compatta);
    text-decoration: none;
    cursor: pointer;
}
.pulsante:hover, button:not(.azione-navigazione):not(.azione-testo):hover { background: var(--accento-scuro); color: var(--grigio-0); text-decoration: none; }
.pulsante:hover, button:hover { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
.pulsante--secondario { border-color: var(--grigio-300); background: var(--grigio-0); color: var(--grigio-700); }
.pulsante--secondario:hover { border-color: var(--grigio-400); background: var(--grigio-100); color: var(--grigio-900); }
.pulsante-compatto { min-height: var(--altezza-controllo-compatto) !important; padding: var(--spazio-1) var(--spazio-2) !important; font-size: var(--testo-tabella); }

.messaggio { display: flex; align-items: center; gap: var(--spazio-2); min-height: var(--altezza-controllo); margin-bottom: var(--spazio-3); padding: var(--spazio-2) var(--spazio-3); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio); background: var(--grigio-0); }
.messaggio--errore { border-left: var(--bordo-enfasi) solid var(--accento); }
.messaggio--successo { color: var(--grigio-700); }

.tabella-wrap { overflow: auto; border: var(--bordo-sottile) solid var(--grigio-200); border-radius: var(--raggio); background: var(--grigio-0); }
.tabella-wrap--coda { max-height: calc(100vh - var(--altezza-testata) - var(--altezza-testata) - var(--spazio-8)); }
table { width: 100%; border-spacing: var(--spazio-0); border-collapse: separate; background: var(--grigio-0); font-size: var(--testo-tabella); }
th, td { height: var(--altezza-riga-tabella); padding: var(--spazio-0) var(--spazio-3); border-bottom: var(--bordo-sottile) solid var(--grigio-100); text-align: left; vertical-align: middle; white-space: nowrap; }
thead th { position: sticky; top: var(--spazio-0); z-index: var(--livello-testa); background: var(--grigio-100); color: var(--grigio-600); font-size: var(--testo-piccolo); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: var(--tracking-tabella); }
tbody:last-child tr:last-child td { border-bottom: var(--spazio-0); }
.numero, .data, .data-ora, .campo-numero { font-variant-numeric: tabular-nums; }
th.numero, td.numero { text-align: right; }
.data, .data-ora { font-family: var(--font-mono); font-size: var(--testo-piccolo); }
.azioni-tabella { white-space: nowrap; }
.azioni-tabella > * { display: inline-flex; margin-right: var(--spazio-3); }
.azioni-tabella > *:last-child { margin-right: var(--spazio-0); }
.form-inline { display: inline-flex; margin: var(--spazio-0); }
.azione-testo { font-size: var(--testo-tabella); }

.tabella-coda { width: 100%; min-width: var(--spazio-0); table-layout: fixed; }
.tabella-coda th, .tabella-coda td { padding-right: var(--spazio-2); padding-left: var(--spazio-2); }
.tabella-coda .col-cliente { width: 14%; }
.tabella-coda .col-task { width: 25%; }
.tabella-coda .col-fase { width: 11%; }
.tabella-coda .col-data { width: 10%; }
.tabella-coda .col-giorni { width: 9%; }
.tabella-coda .col-avviso { width: 11%; }
.tabella-coda .col-azioni { width: 10%; }
.riga-gruppo th {
    position: sticky;
    top: var(--altezza-riga-tabella);
    z-index: var(--livello-gruppo);
    height: var(--altezza-riga-tabella);
    border-bottom-color: var(--grigio-200);
    background: var(--grigio-50);
    color: var(--grigio-700);
    font-weight: var(--peso-medio);
    box-shadow: inset var(--spazio-0) calc(var(--bordo-sottile) * -1) var(--grigio-200);
}
.riga-gruppo .conteggio { margin-left: var(--spazio-2); color: var(--grigio-500); font-variant-numeric: tabular-nums; font-weight: var(--peso-normale); }
.riga-task:hover td { background: var(--grigio-25); }
.riga-task:hover td, .riga-task--selezionata td { transition: background-color 120ms ease; }
.riga-task--selezionata td { background: var(--accento-tenue); }
.cliente-task { overflow: hidden; text-overflow: ellipsis; }
.titolo-task { overflow: hidden; color: var(--grigio-900); font-weight: var(--peso-medio); text-overflow: ellipsis; }
.titolo-task > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.titolo-task small { display: block; overflow: hidden; color: var(--grigio-500); font-size: var(--testo-piccolo); font-weight: var(--peso-normale); text-overflow: ellipsis; }
.azioni-coda__gruppo { display: flex; align-items: center; gap: var(--spazio-1); }
.azioni-coda .pulsante-compatto { min-width: var(--spazio-0); }
.riga-azione-espansa td { height: auto; padding-top: var(--spazio-2); padding-bottom: var(--spazio-2); background: var(--grigio-25); }
.riga-azione-espansa[hidden] { display: none; }
.form-riga--espansa { flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3); }
.form-riga--espansa label { display: inline-flex; align-items: center; gap: var(--spazio-1); color: var(--grigio-600); font-size: var(--testo-piccolo); font-weight: var(--peso-medio); }
.form-riga--espansa label .testo-secondario { font-weight: var(--peso-normale); }
.form-riga--espansa input, .form-riga--espansa select { margin-left: var(--spazio-1); }
.filtri-coda { display: grid; grid-template-columns: minmax(var(--larghezza-accesso), 2fr) repeat(2, minmax(var(--larghezza-fase), 1fr)) auto auto; align-items: end; gap: var(--spazio-3); margin-bottom: var(--spazio-3); }
.filtri-coda label { display: grid; gap: var(--spazio-1); color: var(--grigio-600); font-size: var(--testo-piccolo); font-weight: var(--peso-medio); }
.filtri-coda input, .filtri-coda select { min-height: var(--altezza-controllo); padding: var(--spazio-1) var(--spazio-2); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); background: var(--grigio-0); }
.filtri-coda .filtro-check { display: flex; align-items: center; min-height: var(--altezza-controllo); white-space: nowrap; }
.filtri-coda .filtro-check input { min-height: auto; }
.aiuto-scorciatoie { min-width: var(--altezza-controllo); min-height: var(--altezza-controllo); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); font-weight: var(--peso-medio); }
.pannello-scorciatoie { margin-bottom: var(--spazio-3); padding: var(--spazio-3); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio); background: var(--grigio-0); color: var(--grigio-700); }
.pannello-scorciatoie p { margin-bottom: var(--spazio-0); }
kbd { padding: var(--spazio-1); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); background: var(--grigio-100); color: var(--grigio-800); font-family: var(--font-mono); }
.toast { position: fixed; right: var(--spazio-5); bottom: var(--spazio-5); z-index: calc(var(--livello-testa) + 1); display: flex; align-items: center; gap: var(--spazio-4); max-width: var(--larghezza-accesso); padding: var(--spazio-3) var(--spazio-4); border: var(--bordo-sottile) solid var(--grigio-300); border-left: var(--bordo-enfasi) solid var(--accento); border-radius: var(--raggio); background: var(--grigio-0); color: var(--grigio-800); }
.toast .azione-testo { color: var(--accento-scuro); font-weight: var(--peso-medio); }
.filtri-consegnati { display: flex; align-items: end; gap: var(--spazio-3); margin-bottom: var(--spazio-3); }
.filtri-consegnati label { display: grid; gap: var(--spazio-1); color: var(--grigio-600); font-size: var(--testo-piccolo); font-weight: var(--peso-medio); }
.filtri-consegnati input, .filtri-consegnati select { min-height: var(--altezza-controllo); padding: var(--spazio-1) var(--spazio-2); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); background: var(--grigio-0); }
.cella-azione { padding-top: var(--spazio-1) !important; padding-bottom: var(--spazio-1) !important; }
.form-riga { display: inline-flex; align-items: center; gap: var(--spazio-1); margin: var(--spazio-0); }
.form-riga input, .form-riga select { height: var(--altezza-controllo-compatto); margin: var(--spazio-0); padding: var(--spazio-0) var(--spazio-1); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); background: var(--grigio-0); font-size: var(--testo-piccolo); }
.form-riga--fase select { width: var(--larghezza-fase); }
.form-riga input[type="date"] { width: var(--larghezza-data-riga); font-variant-numeric: tabular-nums; }
.campo-ore { width: var(--larghezza-ore); text-align: right; }
.campo-nota { width: var(--larghezza-nota); }
.form-riga--contratto { margin-left: var(--spazio-2); }

.etichetta-stato { display: inline-flex; align-items: center; gap: var(--spazio-1); color: var(--grigio-700); }
.indicatore { display: inline-block; flex: 0 0 auto; width: var(--diametro-indicatore); height: var(--diametro-indicatore); border: var(--bordo-sottile) solid var(--grigio-500); border-radius: var(--raggio-tondo); background: var(--grigio-300); }
.indicatore--attivo, .indicatore--nei-tempi { border-color: var(--accento); background: var(--accento); }
.indicatore--inattivo, .indicatore--a-calendario, .indicatore--senza-promessa { border-color: var(--grigio-400); background: var(--grigio-100); }
.indicatore--aspettiamo-voi { border-color: var(--grigio-700); background: var(--grigio-700); }
.indicatore--ingresso-ignoto { border-color: var(--accento); background: var(--grigio-0); }
.indicatore--in-ritardo, .indicatore--oltre { border-color: var(--accento); background: var(--accento); }
.etichetta-stato--oltre { color: var(--accento-scuro); font-weight: var(--peso-medio); }

.larghezza-form { width: min(100%, var(--larghezza-form)); }
.pannello-form { padding: var(--spazio-5); border: var(--bordo-sottile) solid var(--grigio-200); border-radius: var(--raggio); background: var(--grigio-0); }
.pannello-form--promessa { border-left: var(--bordo-enfasi) solid var(--accento); }
.pannello-form--diretto { border-style: dashed; border-left-width: var(--bordo-enfasi); }
.pannello-form--accesso { width: min(100%, var(--larghezza-accesso)); margin: var(--spazio-8) auto; }
.tipo-operazione { margin-bottom: var(--spazio-2); color: var(--accento); font-size: var(--testo-piccolo); font-weight: var(--peso-medio); letter-spacing: var(--tracking-etichetta); text-transform: uppercase; }
.form label { display: block; margin-bottom: var(--spazio-1); color: var(--grigio-700); font-size: var(--testo-tabella); font-weight: var(--peso-medio); }
.form input, .form select, .form textarea { width: 100%; min-height: var(--altezza-controllo); margin-bottom: var(--spazio-3); padding: var(--spazio-1) var(--spazio-2); border: var(--bordo-sottile) solid var(--grigio-300); border-radius: var(--raggio-piccolo); background: var(--grigio-0); }
.form textarea { resize: vertical; }
.form .checkbox { display: flex; align-items: center; gap: var(--spazio-2); margin-bottom: var(--spazio-3); font-weight: var(--peso-normale); }
.form .checkbox input { width: auto; min-height: auto; margin: var(--spazio-0); }
.griglia-form { display: grid; grid-template-columns: repeat(2, minmax(var(--spazio-0), 1fr)); gap: var(--spazio-3); }
.azioni-form { display: flex; align-items: center; gap: var(--spazio-3); margin-top: var(--spazio-2); }
.campo-data { max-width: var(--larghezza-data-form); }
.campo-numero { text-align: right; }
.password-temporanea { overflow-wrap: anywhere; padding: var(--spazio-3); border: var(--bordo-sottile) solid var(--grigio-200); border-radius: var(--raggio-piccolo); background: var(--grigio-50); font-family: var(--font-mono); font-size: var(--testo-sottotitolo); letter-spacing: var(--tracking-etichetta); }

.stato-vuoto { max-width: var(--larghezza-form); padding: var(--spazio-6); border: var(--bordo-sottile) solid var(--grigio-200); border-radius: var(--raggio); background: var(--grigio-0); }
.stato-vuoto p { color: var(--grigio-500); }
.solo-screen { position: absolute; width: var(--bordo-sottile); height: var(--bordo-sottile); overflow: hidden; clip: rect(var(--spazio-0), var(--spazio-0), var(--spazio-0), var(--spazio-0)); white-space: nowrap; }

@media (max-width: 1180px) {
    .contenuto { padding-right: var(--spazio-3); padding-left: var(--spazio-3); }
    .navigazione { gap: var(--spazio-3); }
    .nome-utente { max-width: var(--larghezza-nome-utente); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabella-wrap--coda { max-height: calc(100vh - var(--altezza-testata) - var(--altezza-testata) - var(--spazio-6)); }
}

@media (max-width: 1280px) {
    .filtri-coda { grid-template-columns: minmax(var(--larghezza-data-form), 2fr) repeat(2, minmax(var(--larghezza-fase), 1fr)) auto auto; gap: var(--spazio-2); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Portale cliente: cruscotto a widget, scuro per impostazione predefinita, mobile-first.
   Separato dalla densita interna. Tutto a mano: nessun framework, nessun CDN. */
.pagina-portale {
    --p-fondo: #060a13;
    --p-aura-1: rgba(62, 224, 255, .13);
    --p-aura-2: rgba(183, 148, 255, .11);
    --p-superficie: rgba(16, 24, 40, .78);
    --p-superficie-alta: rgba(24, 35, 58, .9);
    --p-lato: rgba(10, 15, 26, .92);
    --p-testo: #e8eefc;
    --p-secondario: #9aa8c4;
    --p-bordo: rgba(130, 165, 255, .16);
    --p-bordo-forte: rgba(130, 165, 255, .32);
    --p-traccia: rgba(130, 165, 255, .14);
    --p-accento: #3ee0ff;
    --p-accento-tenue: rgba(62, 224, 255, .12);
    --p-bagliore: 0 0 0 1px rgba(62, 224, 255, .35), 0 0 24px rgba(62, 224, 255, .12);
    --p-nei-tempi: #34e3a6;
    --p-in-ritardo: #ff8a5c;
    --p-aspettiamo-voi: #b794ff;
    --p-a-calendario: #8aa0bf;
    --p-concordata: #5aa2ff;
    --p-lavorazione: #3ee0ff;
    --p-coda: #8aa0bf;
    --p-pausa: #ffc857;
    --p-non-disponibile: #7d8ba5;
    --p-serie1: #3ee0ff;
    --p-serie2: #b794ff;
    --p-serie3: #34e3a6;
    --p-serie4: #ffc857;
    --p-serie5: #ff8a5c;
    --p-serie6: #5aa2ff;
    --p-serie7: #f472b6;
    --p-spazio: 16px;
    --p-spazio-grande: 24px;
    --p-raggio: 14px;
    --p-target: 44px;
    --p-transizione: 140ms;
    min-width: 0;
    background: var(--p-fondo);
    color: var(--p-testo);
    font-family: "Inter", var(--font-sistema);
    font-feature-settings: "tnum" 1;
    font-size: 14px;
    line-height: 1.5;
}
:root[data-tema="chiaro"] .pagina-portale {
    --p-fondo: #edf1f8;
    --p-aura-1: rgba(11, 111, 176, .08);
    --p-aura-2: rgba(109, 75, 194, .06);
    --p-superficie: rgba(255, 255, 255, .92);
    --p-superficie-alta: #ffffff;
    --p-lato: rgba(255, 255, 255, .95);
    --p-testo: #0f1a2e;
    --p-secondario: #55627a;
    --p-bordo: #d5dde9;
    --p-bordo-forte: #aebbd0;
    --p-traccia: #e3e9f2;
    --p-accento: #0b6fb0;
    --p-accento-tenue: #e4f0f9;
    --p-bagliore: 0 0 0 1px rgba(11, 111, 176, .35), 0 4px 16px rgba(11, 111, 176, .1);
    --p-nei-tempi: #0a8a5e;
    --p-in-ritardo: #c2501b;
    --p-aspettiamo-voi: #6d4bc2;
    --p-a-calendario: #5a6b85;
    --p-concordata: #2b6fd6;
    --p-lavorazione: #0b6fb0;
    --p-coda: #5a6b85;
    --p-pausa: #a87400;
    --p-non-disponibile: #6f7c92;
    --p-serie1: #0b6fb0;
    --p-serie2: #6d4bc2;
    --p-serie3: #0a8a5e;
    --p-serie4: #a87400;
    --p-serie5: #c2501b;
    --p-serie6: #2b6fd6;
    --p-serie7: #b83280;
}
.pagina-portale::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 85% -10%, var(--p-aura-1), transparent 70%), radial-gradient(760px 480px at -5% 105%, var(--p-aura-2), transparent 70%), var(--p-fondo); }
.pagina-portale a { color: var(--p-accento); }
.pagina-portale :focus-visible { outline: 2px solid var(--p-accento); outline-offset: 2px; box-shadow: none; }
.pagina-portale .skip-link { min-height: var(--p-target); background: var(--p-accento); color: var(--p-fondo); }
.pagina-portale .icona { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Struttura: barra laterale su schermi larghi, testata compatta su telefono */
.portale-guscio { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.portale-lato { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--p-spazio); padding: 12px var(--p-spazio); border-bottom: 1px solid var(--p-bordo); background: var(--p-lato); backdrop-filter: blur(14px); }
.portale-identita { display: flex; flex: 1 1 220px; flex-direction: column; gap: 8px; min-width: 0; }
.portale-marchio { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--p-testo) !important; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.portale-marchio__segno { width: 14px; height: 14px; border: 2px solid var(--p-accento); border-radius: 4px; box-shadow: 0 0 12px var(--p-accento-tenue); transform: rotate(45deg); }
.portale-cliente { color: var(--p-testo); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.portale-banda { display: flex; align-items: center; gap: 10px; color: var(--p-secondario); }
.portale-banda__codice { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; border: 1px solid var(--p-accento); border-radius: 10px; background: var(--p-accento-tenue); color: var(--p-accento); font-weight: 600; box-shadow: var(--p-bagliore); }
.portale-banda small { display: block; color: var(--p-secondario); font-size: 12px; }
.portale-nav { display: flex; flex: 1 1 100%; gap: 6px; overflow-x: auto; order: 3; }
.portale-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--p-target); padding: 0 14px; border: 1px solid transparent; border-radius: 10px; color: var(--p-secondario); font-weight: 500; white-space: nowrap; transition: color var(--p-transizione) ease, background-color var(--p-transizione) ease, border-color var(--p-transizione) ease; }
.portale-nav a:hover { background: var(--p-accento-tenue); color: var(--p-testo); text-decoration: none; }
.portale-nav a.attivo { border-color: var(--p-bordo-forte); background: var(--p-accento-tenue); color: var(--p-accento); box-shadow: var(--p-bagliore); }
.portale-lato__azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.portale-lato__azioni .form-navigazione { margin: 0; }
.pagina-portale button.portale-tema, .pagina-portale button.portale-esci { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--p-target); min-height: var(--p-target); padding: 0 12px; border: 1px solid var(--p-bordo); border-radius: 10px; background: transparent; color: var(--p-secondario); font-size: 14px; font-weight: 500; }
.pagina-portale button.portale-tema:hover, .pagina-portale button.portale-esci:hover { border-color: var(--p-bordo-forte); background: var(--p-accento-tenue); color: var(--p-testo); }
.portale-contenuto { min-width: 0; width: 100%; max-width: 1480px; margin: 0 auto; padding: var(--p-spazio) var(--p-spazio) 40px; }
.portale-titolo { margin: 8px 0 var(--p-spazio-grande); }
.portale-titolo h1 { margin: 0; color: var(--p-testo); font-size: 28px; letter-spacing: -.03em; line-height: 1.2; }
.portale-titolo p { margin: 4px 0 0; color: var(--p-secondario); }
.portale-avviso { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--p-spazio); padding: 14px var(--p-spazio); border: 1px solid var(--p-in-ritardo); border-left-width: 4px; border-radius: var(--p-raggio); background: var(--p-superficie); color: var(--p-testo); }
.portale-avviso .icona { margin-top: 2px; color: var(--p-in-ritardo); }

/* Sezioni: situazione attuale e storico stanno separate */
.portale-sezione { margin-bottom: var(--p-spazio-grande); }
.portale-sezione__testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--p-bordo); }
.portale-sezione__testata h2 { margin: 0; color: var(--p-testo); font-size: 18px; letter-spacing: -.02em; }
.portale-sezione .portale-kpi { margin-bottom: 12px; }
.portale-sezione .portale-griglia { margin-bottom: 0; }

/* Corsie: un cerchio per corsia, pieno se occupata. Il testo dice lo stesso. */
.corsie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.corsia { width: 14px; height: 14px; border: 2px solid var(--p-accento); border-radius: 999px; }
.corsia--occupata { background: var(--p-accento); box-shadow: 0 0 10px var(--p-accento-tenue); }
.corsia--oltre { border-color: var(--p-in-ritardo); background: var(--p-in-ritardo); }
.corsie__testo { margin-left: 4px; color: var(--p-secondario); font-size: 12px; }
.etichetta-priorita { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--p-bordo-forte); border-radius: 999px; color: var(--p-secondario); font-size: 11px; font-weight: 500; vertical-align: middle; }
.etichetta-priorita--urgente { border-color: var(--p-in-ritardo); color: var(--p-in-ritardo); }
.etichetta-priorita--alta { border-color: var(--p-pausa); color: var(--p-pausa); }
.legenda--elenco { margin-bottom: 4px; }

/* Barra strumenti e periodo */
.portale-barra-strumenti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--p-spazio); }
.portale-segmenti { display: inline-flex; padding: 3px; border: 1px solid var(--p-bordo); border-radius: 12px; background: var(--p-superficie); }
.portale-segmenti a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 9px; color: var(--p-secondario); font-weight: 500; white-space: nowrap; }
.portale-segmenti a:hover { color: var(--p-testo); text-decoration: none; }
.portale-segmenti a.attivo { background: var(--p-accento-tenue); color: var(--p-accento); box-shadow: inset 0 0 0 1px var(--p-bordo-forte); }
.portale-aggiornamento { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--p-secondario); font-size: 13px; }
.portale-periodo { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--p-secondario); }
.portale-periodo label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.pagina-portale select, .pagina-portale input[type="search"] { min-height: 40px; padding: 0 12px; border: 1px solid var(--p-bordo); border-radius: 10px; background: var(--p-superficie-alta); color: var(--p-testo); font: inherit; }
.pagina-portale select:hover, .pagina-portale input[type="search"]:hover { border-color: var(--p-bordo-forte); }
.pagina-portale input::placeholder { color: var(--p-secondario); }

/* Fascia KPI */
.portale-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--p-spazio); }
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; min-height: 124px; padding: 16px; border: 1px solid var(--p-bordo); border-radius: var(--p-raggio); background: var(--p-superficie); backdrop-filter: blur(10px); transition: border-color var(--p-transizione) ease, box-shadow var(--p-transizione) ease; }
.kpi:hover { border-color: var(--p-bordo-forte); }
.kpi > header { display: flex; align-items: center; gap: 8px; color: var(--p-secondario); font-size: 13px; font-weight: 500; }
.kpi > strong { color: var(--p-testo); font-size: 36px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi > strong small { color: var(--p-secondario); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.kpi > strong.kpi__vuoto { color: var(--p-secondario); }
.kpi > p { margin: 0; color: var(--p-secondario); font-size: 12px; }
.kpi--principale { border-color: var(--p-bordo-forte); background: linear-gradient(140deg, var(--p-accento-tenue), var(--p-superficie) 70%); box-shadow: var(--p-bagliore); }
.kpi--principale > strong { color: var(--p-accento); }
.pagina-portale button.kpi--chip { display: flex; align-items: flex-start; justify-content: space-between; min-height: 88px; padding: 14px 16px; border: 1px solid var(--p-bordo); border-radius: var(--p-raggio); background: var(--p-superficie); color: var(--p-testo); font: inherit; line-height: 1.5; text-align: left; cursor: pointer; }
.pagina-portale button.kpi--chip:hover { border-color: var(--p-bordo-forte); background: var(--p-superficie-alta); color: var(--p-testo); }
.pagina-portale button.kpi--chip[aria-pressed="true"] { border-color: var(--p-accento); background: var(--p-accento-tenue); box-shadow: var(--p-bagliore); }
.pagina-portale button.kpi--chip > strong { font-size: 28px; }

/* Griglia dei widget */
.portale-griglia { display: grid; grid-auto-flow: dense; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: var(--p-spazio); }
.widget { min-width: 0; padding: 18px; border: 1px solid var(--p-bordo); border-radius: var(--p-raggio); background: var(--p-superficie); backdrop-filter: blur(10px); }
.widget--vuoto { padding: 32px 24px; }
.widget--vuoto h2 { margin: 0 0 6px; color: var(--p-testo); font-size: 18px; }
.widget--vuoto p { margin: 0; color: var(--p-secondario); }
.widget--tabella { padding: 0; overflow: hidden; }
.widget--tabella > .widget__testata { padding: 18px 18px 0; }
.widget__testata { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.widget__testata h2 { margin: 0; color: var(--p-testo); font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.widget__numero { color: var(--p-accento); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sopratitolo { display: block; margin-bottom: 2px; color: var(--p-secondario); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.widget__vuoto { margin: 0; color: var(--p-secondario); }
.widget__vuoto--interno { padding: 0 18px 18px; }
.widget__nota { margin: 14px 0 0; color: var(--p-secondario); font-size: 12px; }
.widget__nota--testata { margin: 0; }
.widget__anello { display: flex; align-items: center; gap: 18px; }
.widget__spark { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--p-bordo); color: var(--p-secondario); font-size: 12px; }
.grafico-sparkline { flex: 1; height: 32px; stroke: var(--p-accento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Anello */
.grafico-anello { flex: 0 0 132px; width: 132px; height: 132px; }
.anello-traccia { stroke: var(--p-traccia); }
.anello-segmento { stroke-linecap: butt; }
.anello--nei-tempi { stroke: var(--p-nei-tempi); }
.anello--in-ritardo { stroke: var(--p-in-ritardo); }
.anello--aspettiamo-voi { stroke: var(--p-aspettiamo-voi); }
.anello--a-calendario { stroke: var(--p-a-calendario); }
.anello--concordata, .anello--senza-promessa { stroke: var(--p-concordata); }
.anello--lavorazione { stroke: var(--p-lavorazione); }
.anello--coda { stroke: var(--p-coda); }
.anello--pausa { stroke: var(--p-pausa); }
.anello--non-disponibile { stroke: var(--p-non-disponibile); }
.anello-centro { fill: var(--p-testo); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.anello-sotto { fill: var(--p-secondario); font-size: 9px; }
.legenda { display: grid; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.legenda li { display: flex; align-items: center; gap: 8px; color: var(--p-secondario); font-size: 13px; }
.legenda li strong { margin-left: auto; color: var(--p-testo); font-variant-numeric: tabular-nums; }
.legenda--riga { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legenda--riga li strong { margin-left: 0; }

/* Indicatori di stato: puntino piu etichetta testuale accanto */
.pagina-portale .etichetta-stato { display: inline-flex; align-items: center; gap: 8px; color: var(--p-testo); font-weight: 500; line-height: 1.35; }
.pagina-portale .indicatore { width: 8px; height: 8px; border: 0; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pagina-portale .indicatore--nei-tempi { color: var(--p-nei-tempi); }
.pagina-portale .indicatore--in-ritardo { color: var(--p-in-ritardo); }
.pagina-portale .indicatore--aspettiamo-voi { color: var(--p-aspettiamo-voi); }
.pagina-portale .indicatore--a-calendario { color: var(--p-a-calendario); }
.pagina-portale .indicatore--concordata, .pagina-portale .indicatore--senza-promessa { color: var(--p-concordata); }
.pagina-portale .indicatore--lavorazione { color: var(--p-lavorazione); }
.pagina-portale .indicatore--coda { color: var(--p-coda); }
.pagina-portale .indicatore--pausa { color: var(--p-pausa); }
.pagina-portale .indicatore--non-disponibile { background: transparent; box-shadow: inset 0 0 0 2px var(--p-non-disponibile); color: var(--p-non-disponibile); }
.pagina-portale .indicatore--serie1 { color: var(--p-serie1); }
.pagina-portale .indicatore--serie2 { color: var(--p-serie2); }
.pagina-portale .indicatore--serie3 { color: var(--p-serie3); }
.pagina-portale .indicatore--serie4 { color: var(--p-serie4); }
.pagina-portale .indicatore--serie5 { color: var(--p-serie5); }
.pagina-portale .indicatore--serie6 { color: var(--p-serie6); }
.pagina-portale .indicatore--serie7 { color: var(--p-serie7); }

/* Coppie etichetta/valore */
.coppie { display: grid; gap: 0; margin: 0; }
.coppie > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-bordo); }
.coppie > div:first-child { border-top: 0; padding-top: 0; }
.coppie dt { color: var(--p-secondario); }
.coppie dd { margin: 0; color: var(--p-testo); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.affidabilita { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--p-bordo-forte); border-radius: 999px; color: var(--p-secondario); font-size: 11px; font-weight: 500; }

/* Barre orizzontali */
.barre { display: grid; gap: 12px; }
.barre__riga { display: grid; grid-template-columns: minmax(118px, 1.2fr) minmax(70px, 2fr) 30px; align-items: center; gap: 10px; font-size: 13px; }
.barre__riga > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barre__riga > strong { font-variant-numeric: tabular-nums; text-align: right; }
.barra { height: 8px; overflow: hidden; border-radius: 999px; background: var(--p-traccia); }
.barra > span { display: block; width: var(--quota); height: 100%; border-radius: inherit; background: var(--p-accento); box-shadow: 0 0 12px var(--p-accento-tenue); }
.barra--sottile { height: 5px; margin-top: 8px; }
.barra--nei-tempi > span { background: var(--p-nei-tempi); }
.barra--in-ritardo > span { background: var(--p-in-ritardo); }
.barra--aspettiamo-voi > span { background: var(--p-aspettiamo-voi); }
.barra--a-calendario > span { background: var(--p-a-calendario); }
.barra--concordata > span, .barra--senza-promessa > span { background: var(--p-concordata); }
.barra--lavorazione > span { background: var(--p-lavorazione); }
.barra--coda > span { background: var(--p-coda); }
.barra--pausa > span { background: var(--p-pausa); }
.barra--non-disponibile > span { background: var(--p-non-disponibile); }
.barra--serie1 > span { background: var(--p-serie1); }
.barra--serie2 > span { background: var(--p-serie2); }
.barra--serie3 > span { background: var(--p-serie3); }
.barra--serie4 > span { background: var(--p-serie4); }
.barra--serie5 > span { background: var(--p-serie5); }
.barra--serie6 > span { background: var(--p-serie6); }
.barra--serie7 > span { background: var(--p-serie7); }

/* Colonne impilate: consegne per mese */
.colonne { display: grid; grid-template-columns: repeat(var(--mesi), minmax(0, 1fr)); gap: 6px; align-items: end; }
.colonne__mese { display: grid; grid-template-rows: 22px 156px 22px; align-items: end; min-width: 0; color: var(--p-secondario); text-align: center; }
.colonne__mese > strong { color: var(--p-testo); font-size: 13px; font-variant-numeric: tabular-nums; }
.colonne__mese > time { overflow: hidden; font-size: 11px; white-space: nowrap; }
.colonne__traccia { display: flex; flex-direction: column-reverse; align-items: center; height: 156px; border-bottom: 1px solid var(--p-bordo-forte); }
.colonne__parte { width: min(30px, 72%); height: calc(var(--h) * 1%); min-height: 4px; }
.colonne__parte:last-child { border-radius: 4px 4px 0 0; }
.colonne--nei-tempi { background: var(--p-nei-tempi); }
.colonne--in-ritardo { background: var(--p-in-ritardo); }
.colonne--concordata, .colonne--senza-promessa { background: var(--p-concordata); }
.colonne--non-disponibile { background: var(--p-non-disponibile); }

/* Linea */
.grafico-linea { display: block; width: 100%; height: auto; margin-top: 12px; }
.linea-guida { stroke: var(--p-traccia); stroke-width: 1; }
.linea-tracciato { stroke: var(--p-accento); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--p-accento-tenue)); }
.linea-punto { fill: var(--p-fondo); stroke: var(--p-accento); stroke-width: 2; }
.linea-valore { fill: var(--p-testo); font-size: 10px; font-weight: 600; }
.linea-valore--mancante { fill: var(--p-secondario); font-weight: 400; }
.linea-etichetta { fill: var(--p-secondario); font-size: 9.5px; }

/* Mappa di calore */
.mappa { display: grid; gap: 6px; }
.mappa__mesi, .mappa__griglia { display: grid; grid-template-columns: repeat(var(--settimane), minmax(0, 1fr)); gap: 3px; }
.mappa__mesi span { overflow: visible; color: var(--p-secondario); font-size: 10px; white-space: nowrap; }
.mappa__griglia { grid-auto-flow: column; grid-template-rows: repeat(7, auto); }
.mappa__cella { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--p-traccia); }
.mappa__cella--fuori { background: transparent; }
.mappa--l0 { background: var(--p-traccia); }
.mappa--l1 { background: color-mix(in srgb, var(--p-accento) 28%, transparent); }
.mappa--l2 { background: color-mix(in srgb, var(--p-accento) 52%, transparent); }
.mappa--l3 { background: color-mix(in srgb, var(--p-accento) 76%, transparent); }
.mappa--l4 { background: var(--p-accento); box-shadow: 0 0 8px var(--p-accento-tenue); }
.mappa__scala { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; color: var(--p-secondario); font-size: 11px; }
.mappa__scala .mappa__cella { width: 12px; }

/* Giorni della settimana */
.giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.giorni__colonna { display: grid; grid-template-rows: 20px 96px 20px; align-items: end; justify-items: center; color: var(--p-secondario); font-size: 12px; text-align: center; }
.giorni__colonna > strong { color: var(--p-testo); font-variant-numeric: tabular-nums; }
.giorni__traccia { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 96px; border-bottom: 1px solid var(--p-bordo-forte); }
.giorni__traccia > span { display: block; width: min(24px, 70%); height: calc(var(--h) * 1%); min-height: 3px; border-radius: 4px 4px 0 0; background: var(--p-serie2); }

/* Elenchi di lavori */
.elenco-lavori { display: grid; margin: 0; padding: 0; list-style: none; }
.elenco-lavori li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--p-bordo); }
.elenco-lavori li:first-child { border-top: 0; padding-top: 0; }
.elenco-lavori__testo { flex: 1 1 auto; min-width: 0; }
.elenco-lavori__testo > strong { display: block; color: var(--p-testo); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.elenco-lavori small { display: block; margin-top: 2px; color: var(--p-secondario); font-size: 12px; }
.elenco-lavori__stato { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; max-width: 46%; text-align: right; }
.elenco-lavori__stato .grande { color: var(--p-testo); font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.elenco-lavori--esteso { padding: 8px 18px 18px; }
.elenco-lavori--esteso li { padding: 14px 0; }
.elenco-lavori--esteso li:first-child { padding-top: 14px; border-top: 1px solid var(--p-bordo); }
.elenco-lavori .id { margin-left: 6px; color: var(--p-secondario); font-size: 12px; font-weight: 400; }
.elenco-lavori .avanzamento { margin-top: 6px; }

/* Filtri */
.widget__testata--filtri { align-items: flex-end; margin-bottom: 10px; }
.filtri { display: flex; flex-wrap: wrap; gap: 10px; }
.filtro { display: grid; gap: 4px; color: var(--p-secondario); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.filtro select, .filtro input { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }

/* Tabelle */
.tabella-contenitore { width: 100%; overflow-x: auto; }
.tabella-portale, .tabella-compatta { width: 100%; border-collapse: collapse; color: var(--p-testo); font-size: 13px; }
.tabella-portale th, .tabella-compatta th { padding: 10px 14px; border-top: 1px solid var(--p-bordo); border-bottom: 1px solid var(--p-bordo); color: var(--p-secondario); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tabella-compatta th { padding: 8px 10px; border-top: 0; }
.tabella-portale td, .tabella-compatta td { height: auto; padding: 12px 14px; border-bottom: 1px solid var(--p-bordo); vertical-align: middle; white-space: normal; }
.pagina-portale thead th { position: static; background: var(--p-superficie-alta); }
.tabella-compatta td { padding: 9px 10px; }
.tabella-portale tbody tr:last-child td, .tabella-compatta tbody tr:last-child td { border-bottom: 0; }
.tabella-portale tbody tr:hover { background: var(--p-accento-tenue); }
.tabella-portale td > strong, .tabella-portale td > small { display: block; }
.tabella-portale td > strong { max-width: 380px; font-weight: 500; line-height: 1.35; }
.tabella-portale td > small { margin-top: 2px; color: var(--p-secondario); }
.tabella-portale .num, .tabella-compatta .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 700px) {
    .portale-contenuto { padding: var(--p-spazio-grande) var(--p-spazio-grande) 48px; }
    .portale-lato { padding: 14px var(--p-spazio-grande); }
    .portale-nav { flex: 0 1 auto; order: 0; }
    .portale-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portale-kpi--quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portale-kpi--cinque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .portale-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .widget--due-terzi { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
    .portale-guscio { grid-template-columns: 252px minmax(0, 1fr); }
    .portale-lato { position: sticky; top: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 28px; height: 100vh; padding: 24px 16px; border-right: 1px solid var(--p-bordo); border-bottom: 0; overflow-y: auto; }
    .portale-identita { flex: 0 0 auto; }
    .portale-nav { flex: 0 0 auto; flex-direction: column; overflow: visible; }
    .portale-nav a { width: 100%; }
    .portale-lato__azioni { margin-top: auto; margin-left: 0; }
    .pagina-portale .portale-esci { flex: 1; }
    .portale-contenuto { padding: 32px 36px 56px; }
    .portale-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .portale-kpi--quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .portale-kpi--cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .portale-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .widget--terzo { grid-column: span 4; }
    .widget--due-terzi { grid-column: span 8; }
    .widget--meta { grid-column: span 6; }
}

@media (max-width: 699px) {
    .portale-titolo h1 { font-size: 24px; }
    .widget__anello { flex-direction: column; align-items: stretch; }
    .grafico-anello { align-self: center; }
    .elenco-lavori li { flex-direction: column; gap: 6px; }
    .elenco-lavori__stato { align-items: flex-start; max-width: none; text-align: left; }
    .portale-nav a { padding: 0 10px; }
    .colonne__mese > time { font-size: 9px; }
    .portale-segmenti { width: 100%; }
    .portale-segmenti a { flex: 1; justify-content: center; padding: 0 8px; }
    .filtri, .filtro, .filtro select, .filtro input { width: 100%; }
    .tabella-contenitore { overflow: visible; }
    .tabella-portale, .tabella-portale tbody, .tabella-portale tr, .tabella-portale td { display: block; width: 100%; }
    .tabella-portale thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .tabella-portale tr { padding: 14px 18px; border-top: 1px solid var(--p-bordo); }
    .tabella-portale td { display: grid; grid-template-columns: minmax(100px, 36%) 1fr; gap: 8px; padding: 6px 0; border: 0; }
    .tabella-portale td::before { content: attr(data-label); color: var(--p-secondario); font-size: 12px; font-weight: 600; }
    .tabella-portale .num { text-align: left; }
    .tabella-portale tbody tr:hover { background: transparent; }
}

@media (max-width: 430px) {
    .portale-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi { min-height: 108px; padding: 14px; }
    .kpi > strong { font-size: 30px; }
    .widget { padding: 16px; }
    .widget--tabella { padding: 0; }
    .barre__riga { grid-template-columns: minmax(92px, 1.2fr) minmax(50px, 1fr) 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-portale *, .pagina-portale *::before, .pagina-portale *::after { transition: none !important; }
}