/* =============================================================================
   comune.css — sistema grafico di portale e pannello

   Un solo foglio per le due app: stessi gettoni, stessi componenti, stessi
   nomi. La guida con ogni componente e' guida-stile.html, accanto.

   Regole in breve:
   - Il colore del marchio arriva da /marchio/tema.css (--marchio e varianti
     calcolate dal core). Riempimenti grandi: --accento. Tratti sottili, testo
     e icone nel colore del marchio: --accento-inchiostro (sempre leggibile).
   - Gli stati (ok, attenzione, pericolo, info) non usano mai il marchio e non
     si affidano al solo colore: hanno sempre la spia e una parola.
   - Il giallo (attenzione) solo per avvisi veri.
   - Densita' (ondata 6): strumento di lavoro, non vetrina. Misure del testo
     13 (note, etichette, intestazioni di tabella, pillole), 14 (testo,
     celle, controlli, pulsanti), 16 (titoli di riquadro e di finestra),
     18 (titoli di sezione), 20 (titoli di pagina, cifre delle misure),
     24 (massimo, solo cifre o frasi rare). Mai sotto 13.
   - Griglia di 4 px: spazi 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
   - Altezze: controlli e pulsanti 32 px col mouse, 44 e 40 px al tocco
     (telefono o puntatore grossolano); righe di tabella 37 px su una riga.
   - Niente stili in linea: le pagine del pannello hanno style-src 'self'.
     Le posizioni calcolate (linea del giorno) si impostano da JS con
     element.style.setProperty("--pos", ...).
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Caratteri (licenza OFL, vedi caratteri/README.md)
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Saira";
  src: url("/caratteri/saira-latino.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  src: url("/caratteri/saira-latino-esteso.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/caratteri/atkinson-next-latino.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/caratteri/atkinson-next-latino-esteso.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/caratteri/atkinson-mono-latino.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/caratteri/atkinson-mono-latino-esteso.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------------
   Gettoni: misure, caratteri, tempi (uguali nei due temi)
   ------------------------------------------------------------------------ */

:root {
  /* Marchio predefinito: /marchio/tema.css lo sostituisce con il colore
     scelto nel pannello e le varianti calcolate dal core (_colori_marchio). */
  --marchio: #0D6B59;
  --marchio-testo: #FFFFFF;
  --marchio-pieno: #0D6B59;
  --marchio-verso: #000000;
  --marchio-inchiostro: #0D6B59;
  --marchio-inchiostro-scuro: #7AAEA4;
  /* Pieno e testo sulle superfici scure: per un marchio quasi neutro (quasi
     nero, grigio) il core da' un riempimento chiaro con il testo scuro, che
     si stacca dal fondo; per gli altri colori sono pieno e testo di sempre. */
  --marchio-pieno-scuro: #0D6B59;
  --marchio-testo-scuro: #FFFFFF;

  --f-titoli: "Saira", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --f-testo: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cifre: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scala del testo. --t-nota e --t-piccolo hanno la stessa misura: la
     nota e' anche secondaria di colore, il piccolo no. --t-campo e' il testo
     dei controlli: 16 px al tocco, perche' Safari su iPhone ingrandisce la
     pagina sui campi sotto i 16 px. */
  --t-nota: 0.8125rem;
  --t-piccolo: 0.8125rem;
  --t-testo: 0.875rem;
  --t-campo: 0.875rem;
  --t-sottotitolo: 1rem;
  --t-titolo: 1.125rem;
  --t-pagina: 1.25rem;
  --t-mostra: 1.5rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  --raggio-piccolo: 4px;
  --raggio: 6px;
  --raggio-riquadro: 8px;
  --raggio-finestra: 12px;
  --raggio-pillola: 999px;

  --durata-breve: 100ms;
  --durata: 160ms;
  --durata-lunga: 240ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Altezze dei comandi: col mouse; al tocco le ridefinisce il blocco
     «Tocco» qui sotto. */
  --altezza-controllo: 32px;
  --altezza-pulsante: 32px;
  --altezza-piccolo: 28px;

  --altezza-barra: 48px;
  --altezza-schede: 56px;
  --larghezza-lato: 216px;
  --larghezza-contenuto: 1440px;
  --larghezza-modulo: 760px;
  --larghezza-lato-finestra: 720px;
}

/* Tocco: telefono, o tablet e schermi con il dito. Campi alti 44 px e
   pulsanti 40 px (bersagli da dito), testo dei campi a 16 px. */
@media (max-width: 679px), (pointer: coarse) {
  :root {
    --altezza-controllo: 44px;
    --altezza-pulsante: 40px;
    --altezza-piccolo: 36px;
    --t-campo: 1rem;
  }
}


/* ---------------------------------------------------------------------------
   Gettoni: colori del tema chiaro
   I valori --base-* sono neutri; i colori usati (--carta, --linea, ...) li
   mescolano con un filo di marchio piu' sotto, cosi' ogni installazione ha
   neutri intonati al suo colore.
   ------------------------------------------------------------------------ */

:root,
[data-theme="light"] {
  color-scheme: light;
  --base-carta: #F6F6F4;
  --base-superficie: #FFFFFF;
  --base-superficie-2: #F8F8F6;
  --base-superficie-3: #EDEDEA;
  --base-incavo: #E8E8E5;
  --base-rilievo: #FFFFFF;
  --base-linea: #E1E2DE;
  --base-linea-forte: #C9CBC6;
  --linea-campo: #8A8D87;
  --inchiostro: #17191C;
  --secondario: #585C62;
  --terziario: #666A71;
  --verso: #000000;
  --orlo-verso: #000000;
  --tinta-superficie: 0%;
  --pomello: #FFFFFF;

  --accento-base: var(--marchio-pieno);
  --accento-testo-base: var(--marchio-testo);
  --accento-luce-min: 0;
  --accento-luce-max: 0.9;
  --accento-inchiostro: var(--marchio-inchiostro);

  --ok: #1D7442;
  --ok-fondo: #E3F2E8;
  --ok-bordo: #A8D5B9;
  --ok-spia: #22A45A;
  --attenzione: #874800;
  --attenzione-fondo: #FDF1D6;
  --attenzione-bordo: #EDC77F;
  --attenzione-spia: #E69F0B;
  --pericolo: #B3261E;
  --pericolo-fondo: #FCE8E6;
  --pericolo-bordo: #F1B2AB;
  --pericolo-spia: #E4463B;
  --pericolo-pieno: #B3261E;
  --info: #2B4E72;
  --info-fondo: #E7EEF5;
  --info-bordo: #B3C6DB;
  --info-spia: #5A86B6;
  --neutro-spia: #9A9EA5;
  --spia-su-inchiostro: #F5B43A;
  /* Luci delle serie dei grafici (--grafico-*), dalla prima all'ultima:
     tutte con almeno 3:1 col fondo delle barre e con la superficie. */
  --grafico-luce-1: 0.29;
  --grafico-luce-2: 0.35;
  --grafico-luce-3: 0.41;
  --grafico-luce-4: 0.47;
  --grafico-luce-5: 0.53;
  --grafico-luce-6: 0.58;

  --ombra-1: 0 1px 2px rgb(20 22 26 / 7%);
  --ombra-2: 0 12px 32px -10px rgb(20 22 26 / 24%), 0 2px 6px rgb(20 22 26 / 8%);
  --ombra-3: 0 32px 80px -20px rgb(20 22 26 / 40%), 0 4px 14px rgb(20 22 26 / 10%);
  --velo: rgb(17 18 21 / 48%);

  /* Superfici invertite (notifiche, barra di pubblicazione, lato
     dell'accesso) quando la pagina e' chiara. */
  --inverso-carta: #1B1D21;
  --inverso-superficie: #25272B;
  --inverso-superficie-2: #2B2D32;
  --inverso-superficie-3: #34373C;
  --inverso-incavo: #141518;
  --inverso-rilievo: #3A3D43;
  --inverso-linea: #383B41;
  --inverso-linea-forte: #4A4E55;
}


/* ---------------------------------------------------------------------------
   Gettoni: colori del tema scuro
   Il primo blocco decide le superfici invertite di una pagina scura; il
   secondo vale per la pagina scura e per ogni superficie invertita. Lo
   stesso contenuto e' ripetuto per chi non ha scelto un tema e ha il
   dispositivo in scuro (test_comune.py controlla che i blocchi coincidano).
   ------------------------------------------------------------------------ */

[data-theme="dark"] {
  --inverso-carta: #26282D;
  --inverso-superficie: #2E3136;
  --inverso-superficie-2: #34373C;
  --inverso-superficie-3: #3C3F45;
  --inverso-incavo: #1C1E21;
  --inverso-rilievo: #45484F;
  --inverso-linea: #43464D;
  --inverso-linea-forte: #555960;
}

[data-theme="dark"],
.inverso,
.notifica,
.barra-pubblica,
.ingresso-lato {
  color-scheme: dark;
  --base-carta: #0F1012;
  --base-superficie: #17181B;
  --base-superficie-2: #1D1F22;
  --base-superficie-3: #26282C;
  --base-incavo: #0B0C0E;
  --base-rilievo: #2A2D31;
  --base-linea: #2B2E32;
  --base-linea-forte: #3A3D42;
  --linea-campo: #80848B;
  --inchiostro: #EDEEEF;
  --secondario: #A9ADB4;
  --terziario: #969AA1;
  --verso: #FFFFFF;
  --orlo-verso: var(--marchio-inchiostro-scuro);
  --tinta-superficie: 2%;
  --pomello: #C9CCD1;

  --accento-base: var(--marchio-pieno-scuro);
  --accento-testo-base: var(--marchio-testo-scuro);
  --accento-luce-min: 0.5;
  --accento-luce-max: 1;
  --accento-inchiostro: var(--marchio-inchiostro-scuro);

  --ok: #72D49D;
  --ok-fondo: #132A1D;
  --ok-bordo: #2A5B3E;
  --ok-spia: #3DCF7E;
  --attenzione: #F1BE5E;
  --attenzione-fondo: #2F2309;
  --attenzione-bordo: #6B4B12;
  --attenzione-spia: #F5B43A;
  --pericolo: #FF9A90;
  --pericolo-fondo: #381411;
  --pericolo-bordo: #7C2D25;
  --pericolo-spia: #FF6B5E;
  --pericolo-pieno: #C8352B;
  --info: #9FC0E2;
  --info-fondo: #16222F;
  --info-bordo: #2E4762;
  --info-spia: #6FA1D8;
  --neutro-spia: #7D828A;
  --spia-su-inchiostro: #B86E00;
  --grafico-luce-1: 0.92;
  --grafico-luce-2: 0.84;
  --grafico-luce-3: 0.76;
  --grafico-luce-4: 0.68;
  --grafico-luce-5: 0.61;
  --grafico-luce-6: 0.54;

  --ombra-1: 0 1px 2px rgb(0 0 0 / 40%);
  --ombra-2: 0 14px 36px -10px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 35%);
  --ombra-3: 0 32px 80px -16px rgb(0 0 0 / 70%), 0 4px 14px rgb(0 0 0 / 40%);
  --velo: rgb(0 0 0 / 62%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --inverso-carta: #26282D;
    --inverso-superficie: #2E3136;
    --inverso-superficie-2: #34373C;
    --inverso-superficie-3: #3C3F45;
    --inverso-incavo: #1C1E21;
    --inverso-rilievo: #45484F;
    --inverso-linea: #43464D;
    --inverso-linea-forte: #555960;
  }

  :root:not([data-theme]) {
    color-scheme: dark;
    --base-carta: #0F1012;
    --base-superficie: #17181B;
    --base-superficie-2: #1D1F22;
    --base-superficie-3: #26282C;
    --base-incavo: #0B0C0E;
    --base-rilievo: #2A2D31;
    --base-linea: #2B2E32;
    --base-linea-forte: #3A3D42;
    --linea-campo: #80848B;
    --inchiostro: #EDEEEF;
    --secondario: #A9ADB4;
    --terziario: #969AA1;
    --verso: #FFFFFF;
    --orlo-verso: var(--marchio-inchiostro-scuro);
    --tinta-superficie: 2%;
    --pomello: #C9CCD1;

    --accento-base: var(--marchio-pieno-scuro);
    --accento-testo-base: var(--marchio-testo-scuro);
    --accento-luce-min: 0.5;
    --accento-luce-max: 1;
    --accento-inchiostro: var(--marchio-inchiostro-scuro);

    --ok: #72D49D;
    --ok-fondo: #132A1D;
    --ok-bordo: #2A5B3E;
    --ok-spia: #3DCF7E;
    --attenzione: #F1BE5E;
    --attenzione-fondo: #2F2309;
    --attenzione-bordo: #6B4B12;
    --attenzione-spia: #F5B43A;
    --pericolo: #FF9A90;
    --pericolo-fondo: #381411;
    --pericolo-bordo: #7C2D25;
    --pericolo-spia: #FF6B5E;
    --pericolo-pieno: #C8352B;
    --info: #9FC0E2;
    --info-fondo: #16222F;
    --info-bordo: #2E4762;
    --info-spia: #6FA1D8;
    --neutro-spia: #7D828A;
    --spia-su-inchiostro: #B86E00;
    --grafico-luce-1: 0.92;
    --grafico-luce-2: 0.84;
    --grafico-luce-3: 0.76;
    --grafico-luce-4: 0.68;
    --grafico-luce-5: 0.61;
    --grafico-luce-6: 0.54;

    --ombra-1: 0 1px 2px rgb(0 0 0 / 40%);
    --ombra-2: 0 14px 36px -10px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 35%);
    --ombra-3: 0 32px 80px -16px rgb(0 0 0 / 70%), 0 4px 14px rgb(0 0 0 / 40%);
    --velo: rgb(0 0 0 / 62%);
  }
}

/* Le superfici invertite prendono i fondi dal tema che le contiene. */
.inverso,
.notifica,
.barra-pubblica,
.ingresso-lato {
  --base-carta: var(--inverso-carta);
  --base-superficie: var(--inverso-superficie);
  --base-superficie-2: var(--inverso-superficie-2);
  --base-superficie-3: var(--inverso-superficie-3);
  --base-incavo: var(--inverso-incavo);
  --base-rilievo: var(--inverso-rilievo);
  --base-linea: var(--inverso-linea);
  --base-linea-forte: var(--inverso-linea-forte);
}


/* ---------------------------------------------------------------------------
   Gettoni derivati: ricalcolati in ogni radice di tema, perche' dipendono
   dai valori del tema in cui stanno.
   ------------------------------------------------------------------------ */

:root,
[data-theme],
.inverso,
.notifica,
.barra-pubblica,
.ingresso-lato {
  --tinta: var(--marchio);
  --carta: color-mix(in oklab, var(--tinta) 2.5%, var(--base-carta));
  --superficie: color-mix(in oklab, var(--tinta) var(--tinta-superficie), var(--base-superficie));
  --superficie-2: color-mix(in oklab, var(--tinta) 2%, var(--base-superficie-2));
  --superficie-3: color-mix(in oklab, var(--tinta) 3%, var(--base-superficie-3));
  --incavo: color-mix(in oklab, var(--tinta) 3%, var(--base-incavo));
  --rilievo: var(--base-rilievo);
  --linea: color-mix(in oklab, var(--tinta) 5%, var(--base-linea));
  --linea-forte: color-mix(in oklab, var(--tinta) 5%, var(--base-linea-forte));
  /* Il pieno del marchio: nel tema chiaro quello del core, sulle superfici
     scure (tema scuro, notifiche, barra di pubblicazione, lato dell'accesso)
     la sua variante per il fondo scuro. */
  --accento: var(--accento-base);
  --accento-testo: var(--accento-testo-base);
  --accento-tenue: color-mix(in oklab, var(--accento) 11%, var(--superficie));
  --accento-tenue-forte: color-mix(in oklab, var(--accento) 22%, var(--superficie));
  --accento-bordo: color-mix(in oklab, var(--accento) 45%, var(--base-linea));
  /* Passaggio e pressione si allontanano dal testo (--marchio-verso, dal
     core): il contrasto del pulsante non scende mai sotto quello del pieno.
     Sulle superfici scure un marchio neutro ha il testo scuro: la direzione
     si ricava dal testo nel blocco @supports qui sotto. */
  --accento-verso: var(--marchio-verso);
  --accento-sopra: color-mix(in oklab, var(--accento) 88%, var(--accento-verso));
  --accento-premuto: color-mix(in oklab, var(--accento) 78%, var(--accento-verso));
  --accento-orlo: color-mix(in oklab, var(--accento) 72%, var(--orlo-verso));
  --fuoco: var(--accento-inchiostro);
  --fondo-locale: var(--carta);
  /* Le serie dei grafici (le voci dei costi del pannello): la tinta
     dell'inchiostro del marchio. Qui solo mescolata con la superficie; con i
     colori relativi (sotto) alle luci fisse --grafico-luce-*. */
  --grafico-1: var(--accento-inchiostro);
  --grafico-2: color-mix(in oklab, var(--accento-inchiostro) 80%, var(--superficie));
  --grafico-3: color-mix(in oklab, var(--accento-inchiostro) 62%, var(--superficie));
  --grafico-4: color-mix(in oklab, var(--accento-inchiostro) 46%, var(--superficie));
  --grafico-5: color-mix(in oklab, var(--accento-inchiostro) 32%, var(--superficie));
  --grafico-6: color-mix(in oklab, var(--accento-inchiostro) 20%, var(--superficie));
}

/* Il riempimento del marchio resta distinguibile dal fondo: un marchio quasi
   nero nel tema scuro (o quasi bianco nel chiaro) si schiarisce (o si scurisce)
   quanto basta, con la stessa tinta. Il testo sopra resta leggibile: il pieno
   del core ha gia' 4,5:1 col suo testo, un colore scuro ha il testo bianco, e
   a luce 0,5 il bianco ha ancora 6:1.
   La tinta dei neutri ha la croma limitata: un marchio caldo (arancio, rosso)
   non porta la carta verso il crema, uno freddo non la porta verso l'azzurro.
   --accento-verso e' il nero se il testo del pulsante e' chiaro, il bianco se
   e' scuro (la luce fuori da 0-1 si ferma ai bordi): con i colori del core e'
   sempre --marchio-verso, salvo il marchio neutro sulle superfici scure. */
@supports (color: oklch(from red l c h)) {
  :root,
  [data-theme],
  .inverso,
  .notifica,
  .barra-pubblica,
  .ingresso-lato {
    --accento: oklch(from var(--accento-base) clamp(var(--accento-luce-min), l, var(--accento-luce-max)) c h);
    --accento-verso: oklch(from var(--accento-testo-base) calc((0.5 - l) * 1000) 0 0);
    --tinta: oklch(from var(--marchio) l min(c, 0.06) h);
    /* Luci fisse: con la sola mescolanza le due serie piu' chiare stavano a
       1,3:1 col fondo delle barre, e dipendevano dal marchio. */
    --grafico-1: oklch(from var(--accento-inchiostro) var(--grafico-luce-1) c h);
    --grafico-2: oklch(from var(--accento-inchiostro) var(--grafico-luce-2) c h);
    --grafico-3: oklch(from var(--accento-inchiostro) var(--grafico-luce-3) c h);
    --grafico-4: oklch(from var(--accento-inchiostro) var(--grafico-luce-4) c h);
    --grafico-5: oklch(from var(--accento-inchiostro) var(--grafico-luce-5) c h);
    --grafico-6: oklch(from var(--accento-inchiostro) var(--grafico-luce-6) c h);
  }
}

/* Browser senza color-mix: neutri puri, niente sfumature del marchio. */
@supports not (color: color-mix(in oklab, #000 50%, #fff)) {
  :root,
  [data-theme],
  .inverso,
  .notifica,
  .barra-pubblica,
  .ingresso-lato {
    --carta: var(--base-carta);
    --superficie: var(--base-superficie);
    --superficie-2: var(--base-superficie-2);
    --superficie-3: var(--base-superficie-3);
    --incavo: var(--base-incavo);
    --linea: var(--base-linea);
    --linea-forte: var(--base-linea-forte);
    --accento-tenue: var(--base-superficie-2);
    --accento-tenue-forte: var(--base-superficie-3);
    --accento-bordo: var(--base-linea-forte);
    --accento-sopra: var(--accento);
    --accento-premuto: var(--accento);
    --accento-orlo: var(--accento);
    --grafico-2: var(--accento-inchiostro);
    --grafico-3: var(--accento-inchiostro);
    --grafico-4: var(--accento-inchiostro);
    --grafico-5: var(--accento-inchiostro);
    --grafico-6: var(--accento-inchiostro);
  }
}


/* ---------------------------------------------------------------------------
   Fondamenta
   ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--f-testo);
  font-size: 100%;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--carta);
  color: var(--inchiostro);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-size: var(--t-testo);
  background: var(--carta);
  color: var(--inchiostro);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: 600;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--accento-inchiostro);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 2px;
}

::selection {
  background: var(--accento-tenue-forte);
  color: var(--inchiostro);
}

hr {
  height: 0;
  margin: var(--s-4) 0;
  border: 0;
  border-top: 1px solid var(--linea);
}

strong,
b {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   Tipografia
   Saira, larghezza normale, solo per titoli e cifre delle misure; tutto il
   resto in Atkinson. Orari, numeri di telefono, durate e codici in Atkinson
   Mono. Pesi: 600 per titoli, etichette e pulsanti; 700 solo per il
   grassetto nel testo.
   ------------------------------------------------------------------------ */

/* Non piu' frasi grandi in testa alle pagine: al massimo 24 px (l'accesso,
   una cifra sola). Dove c'era la frase va .titolo-pagina. */
.titolo-mostra {
  font-family: var(--f-titoli);
  font-weight: 600;
  font-size: var(--t-mostra);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.titolo-pagina {
  font-family: var(--f-titoli);
  font-weight: 600;
  font-size: var(--t-pagina);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Titolo di una sezione fuori da un riquadro: come il titolo di un riquadro
   (14 px), cosi' sotto il titolo della pagina (20 px) c'e' un livello solo. */
.titolo-sezione {
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.43;
}

.titolo-riquadro {
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.43;
}

.testo-piccolo {
  font-size: var(--t-piccolo);
  line-height: 1.4;
}

.nota {
  font-size: var(--t-nota);
  line-height: 1.4;
  color: var(--secondario);
}

.secondario {
  color: var(--secondario);
}

.testo-pericolo {
  color: var(--pericolo);
}

.testo-lungo {
  max-width: 68ch;
}

/* Solo cifre (orari, durate, numeri, codici): le parole restano in Atkinson. */
.cifre {
  font-family: var(--f-cifre);
  font-size: max(0.94em, 13px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Un importo: <span class="importo">39,00 €</span>. Tutto nel carattere del
   testo con le cifre tabellari: la spaziatura fissa staccava la virgola e il
   simbolo («39 , 00  €»), anche dentro una colonna di cifre. */
.importo {
  font-family: var(--f-testo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Etichetta sopra un dato o un gruppo: come l'intestazione di una colonna,
   niente maiuscole spaziate. */
.etichetta-dato {
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 1.4;
  color: var(--secondario);
}

.numero-telefono {
  font-family: var(--f-cifre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.numero-telefono-prefisso {
  margin-right: 0.35em;
  color: var(--terziario);
}


/* ---------------------------------------------------------------------------
   Icone: <svg class="icona" aria-hidden="true"><use href="/icone.svg#i-phone"/></svg>
   ------------------------------------------------------------------------ */

/* 16 px accanto al testo di 14 (menu, pulsanti, schede); -grande per le
   voci della barra in basso e gli stati vuoti. */
.icona {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icona-piccola {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.icona-grande {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}


/* ---------------------------------------------------------------------------
   Stato della linea
   Una spia piatta e una parola: dicono se il telefono e' coperto. La spia
   usa i colori di stato, mai il marchio. Niente riflessi, aloni o fili che
   corrono: si muove solo la spia di una chiamata in corso.
   ------------------------------------------------------------------------ */

.spia {
  --spia: var(--neutro-spia);
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spia);
}

.spia-grande {
  width: 10px;
  height: 10px;
}

.spia-ok { --spia: var(--ok-spia); }
.spia-attenzione { --spia: var(--attenzione-spia); }
.spia-pericolo { --spia: var(--pericolo-spia); }
.spia-info { --spia: var(--info-spia); }
.spia-accento { --spia: var(--accento-inchiostro); }

.spia-spenta {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--spia);
}

.spia-viva::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--spia);
  border-radius: 50%;
  opacity: 0;
  animation: spia-onda 1.8s var(--curva) infinite;
}

@keyframes spia-onda {
  0% { transform: scale(0.55); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Stato della linea, nella barra in alto: data-stato decide la spia. Un
   comando basso, non una pillola: spia, parola, numero. */
.linea-stato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

a.linea-stato:hover {
  border-color: var(--linea-forte);
  text-decoration: none;
}

.linea-stato-breve {
  display: none;
}

.linea-stato-dettaglio {
  padding-left: 8px;
  border-left: 1px solid var(--linea);
  color: var(--secondario);
  font-weight: 400;
}

.linea-stato[data-stato="attiva"] .spia,
.linea-stato[data-stato="in-chiamata"] .spia,
.linea-giorno[data-stato="attiva"] .spia,
.linea-giorno[data-stato="in-chiamata"] .spia { --spia: var(--ok-spia); }
.linea-stato[data-stato="pausa"] .spia,
.linea-giorno[data-stato="pausa"] .spia { --spia: var(--attenzione-spia); }
.linea-stato[data-stato="guasto"] .spia,
.linea-giorno[data-stato="guasto"] .spia { --spia: var(--pericolo-spia); }
.linea-stato[data-stato="da-completare"] .spia,
.linea-giorno[data-stato="da-completare"] .spia {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--neutro-spia);
}

.linea-stato[data-stato="in-chiamata"] .spia::after,
.linea-giorno[data-stato="in-chiamata"] .linea-giorno-adesso .spia::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--spia);
  border-radius: 50%;
  opacity: 0;
  animation: spia-onda 1.8s var(--curva) infinite;
}

/* La linea del giorno: il filo delle 24 ore di oggi. IN USCITA (ondata 6):
   decorativa, esce da Panoramica, Situazione, Clienti e scheda del cliente
   al posto delle chiamate vere; le regole restano finche' le pagine non la
   tolgono. --da, --a e --pos (fra 0 e 1) si impostano da JS. */
.linea-giorno {
  display: grid;
  gap: var(--s-2);
}

.linea-giorno-filo {
  position: relative;
  height: 24px;
}

.linea-giorno-filo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--linea-campo) 0 3px, transparent 3px 7px);
}

.linea-giorno-orario {
  position: absolute;
  top: 50%;
  left: calc(var(--da, 0) * 100%);
  width: calc((var(--a, 0) - var(--da, 0)) * 100%);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--inchiostro);
}

.linea-giorno-segno {
  position: absolute;
  top: 50%;
  left: calc(var(--pos, 0) * 100%);
  width: 2px;
  height: 14px;
  margin: -7px 0 0 -1px;
  border-radius: 1px;
  background: var(--secondario);
}

.linea-giorno-segno[data-esito="da-richiamare"] {
  height: 24px;
  margin-top: -12px;
  background: var(--accento-inchiostro);
}

.linea-giorno-segno[data-esito="da-richiamare"]::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accento-inchiostro);
}

.linea-giorno-adesso {
  position: absolute;
  top: 50%;
  left: calc(var(--pos, 0) * 100%);
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--fondo-locale);
}

.linea-giorno-adesso[data-ora]::after {
  content: attr(data-ora);
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--fondo-locale);
  color: var(--inchiostro);
  font-family: var(--f-cifre);
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
}

.linea-giorno-scala {
  display: flex;
  justify-content: space-between;
  color: var(--terziario);
  font-family: var(--f-cifre);
  font-size: var(--t-nota);
  line-height: 1;
}

.linea-giorno-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

/* Versione piccola, per una riga di tabella (pannello: Situazione). */
.linea-mini {
  height: 18px;
  min-width: 120px;
}

.linea-mini .linea-giorno-orario {
  height: 2px;
  margin-top: -1px;
}

.linea-mini .linea-giorno-segno {
  height: 10px;
  margin-top: -5px;
}

.linea-mini .linea-giorno-segno[data-esito="da-richiamare"] {
  height: 14px;
  margin-top: -7px;
}

.linea-mini .linea-giorno-segno[data-esito="da-richiamare"]::after {
  display: none;
}


/* ---------------------------------------------------------------------------
   Pulsanti
   <button class="pulsante pulsante-primario">Pubblica</button>
   Varianti: -primario (uno per schermata), -secondario, -quieto,
   -pericolo (solo per confermare), -pericolo-quieto (Rimuovi).
   Misure: -piccolo, -grande, -icona (quadrato, serve aria-label).
   Stati: :disabled o aria-disabled="true"; aria-busy="true" = in corso.
   ------------------------------------------------------------------------ */

.pulsante {
  --p-fondo: var(--superficie);
  --p-testo: var(--inchiostro);
  --p-bordo: var(--linea-forte);
  --p-sopra: var(--superficie-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--altezza-pulsante);
  padding: 0 12px;
  border: 1px solid var(--p-bordo);
  border-radius: var(--raggio);
  background: var(--p-fondo);
  color: var(--p-testo);
  font-family: var(--f-testo);
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--ombra-1);
  transition:
    background-color var(--durata-breve) var(--curva),
    border-color var(--durata-breve) var(--curva);
}

.pulsante:hover {
  background: var(--p-sopra);
  color: var(--p-testo);
  text-decoration: none;
}

.pulsante:active {
  box-shadow: none;
}

.pulsante-primario {
  --p-fondo: var(--accento);
  --p-testo: var(--accento-testo);
  --p-bordo: var(--accento-orlo);
  --p-sopra: var(--accento-sopra);
}

.pulsante-primario:active {
  background: var(--accento-premuto);
}

.pulsante-secondario {
  --p-fondo: var(--superficie);
}

.pulsante-quieto {
  --p-fondo: transparent;
  --p-bordo: transparent;
  --p-sopra: var(--superficie-3);
  box-shadow: none;
}

.pulsante-pericolo {
  --p-fondo: var(--pericolo-pieno);
  --p-testo: #FFFFFF;
  --p-bordo: color-mix(in oklab, var(--pericolo-pieno) 80%, #000000);
  --p-sopra: color-mix(in oklab, var(--pericolo-pieno) 88%, #000000);
}

.pulsante-pericolo-quieto {
  --p-fondo: transparent;
  --p-testo: var(--pericolo);
  --p-bordo: transparent;
  --p-sopra: var(--pericolo-fondo);
  box-shadow: none;
}

.pulsante-piccolo {
  min-height: var(--altezza-piccolo);
  padding: 0 10px;
  font-size: var(--t-piccolo);
}

/* Solo per l'azione di una pagina a se' (accesso, pagamento). */
.pulsante-grande {
  min-height: 40px;
  padding: 0 16px;
}

.pulsante-icona {
  width: var(--altezza-pulsante);
  padding: 0;
}

.pulsante-icona.pulsante-piccolo {
  width: var(--altezza-piccolo);
}

.pulsante:disabled,
.pulsante[aria-disabled="true"] {
  --p-fondo: var(--superficie-3);
  --p-testo: var(--terziario);
  --p-bordo: transparent;
  --p-sopra: var(--superficie-3);
  box-shadow: none;
  cursor: not-allowed;
}

.pulsante-quieto:disabled,
.pulsante-quieto[aria-disabled="true"],
.pulsante-pericolo-quieto:disabled,
.pulsante-pericolo-quieto[aria-disabled="true"] {
  --p-fondo: transparent;
  --p-sopra: transparent;
}

.pulsante[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.pulsante[aria-busy="true"] > .icona {
  display: none;
}

.pulsante[aria-busy="true"]::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira 0.7s linear infinite;
}

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

/* Gruppo di pulsanti; -fine li allinea a destra. */
.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.azioni-fine {
  justify-content: flex-end;
}

/* Comando non disponibile: il motivo sta accanto, non in un avviso. */
.comando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.comando-motivo {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 48ch;
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.45;
}

.comando-motivo > .icona {
  margin-top: 1px;
}


/* ---------------------------------------------------------------------------
   Moduli
   <div class="campo">
     <label class="campo-etichetta" for="x">Nome</label>
     <input class="controllo" id="x">
     <p class="campo-aiuto">...</p>
   </div>
   ------------------------------------------------------------------------ */

.campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-3) var(--s-4);
}

.campo {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.campo-largo {
  grid-column: 1 / -1;
}

.campo-etichetta {
  color: var(--inchiostro);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.35;
}

.campo-facoltativo {
  color: var(--secondario);
  font-weight: 400;
}

.campo-aiuto {
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.4;
}

.campo-errore {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--pericolo);
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 1.4;
}

.controllo {
  display: block;
  width: 100%;
  min-height: var(--altezza-controllo);
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--linea-campo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font-size: var(--t-campo);
  line-height: 20px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva);
}

.controllo::placeholder {
  color: var(--terziario);
  opacity: 1;
}

.controllo:hover {
  border-color: var(--secondario);
}

.controllo:focus {
  outline: none;
  border-color: var(--fuoco);
  box-shadow: 0 0 0 1px var(--fuoco), 0 0 0 4px var(--accento-tenue-forte);
}

.controllo[aria-invalid="true"] {
  border-color: var(--pericolo);
}

.controllo[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--pericolo), 0 0 0 4px var(--pericolo-fondo);
}

.controllo:disabled,
.controllo[readonly] {
  border-color: var(--linea-forte);
  background: var(--superficie-2);
  color: var(--secondario);
}

.controllo:disabled {
  cursor: not-allowed;
}

/* Una sola altezza per i controlli di una riga (--altezza-controllo, la
   stessa dei pulsanti col mouse): data, ora e numero nelle cifre mono
   crescevano e disallineavano le file dei filtri. Il codice di accesso
   (carattere grande) e le aree di testo restano alti quanto il loro
   contenuto. :where() tiene bassa la specificita': le regole dei gruppi e
   delle app vincono ancora. */
input.controllo:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .controllo-codice)),
select.controllo:where(:not([multiple], [size])) {
  height: var(--altezza-controllo);
}

textarea.controllo {
  min-height: 88px;
  padding-block: 7px;
  resize: vertical;
  line-height: 1.45;
}

.controllo[type="time"],
.controllo[type="date"],
.controllo[type="number"],
.controllo[type="tel"] {
  font-family: var(--f-cifre);
  font-variant-numeric: tabular-nums;
}

/* Codice di accesso a sei cifre. */
.controllo-codice {
  max-width: 13ch;
  padding-left: 0.55em;
  font-family: var(--f-cifre);
  font-size: var(--t-mostra);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-align: center;
}

/* Tendina: <div class="selettore"><select class="controllo">...</select></div> */
.selettore {
  position: relative;
  display: block;
  min-width: 0;
}

.selettore > .controllo {
  padding-right: 30px;
  cursor: pointer;
}

.selettore::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--secondario);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Controllo con icona davanti o unita' di misura dietro. */
.controllo-gruppo {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--linea-campo);
  border-radius: var(--raggio);
  background: var(--superficie);
  transition: border-color var(--durata-breve) var(--curva), box-shadow var(--durata-breve) var(--curva);
}

.controllo-gruppo:hover {
  border-color: var(--secondario);
}

.controllo-gruppo:focus-within {
  border-color: var(--fuoco);
  box-shadow: 0 0 0 1px var(--fuoco), 0 0 0 4px var(--accento-tenue-forte);
}

.controllo-gruppo > .controllo {
  flex: 1;
  min-width: 0;
  height: calc(var(--altezza-controllo) - 2px);
  min-height: calc(var(--altezza-controllo) - 2px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.controllo-gruppo > .controllo:focus {
  box-shadow: none;
}

.controllo-gruppo > .icona {
  align-self: center;
  margin-left: 10px;
  color: var(--secondario);
}

.controllo-gruppo > .icona + .controllo {
  padding-left: 8px;
}

.controllo-unita {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--linea);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--superficie-2);
  color: var(--secondario);
  font-size: var(--t-piccolo);
  white-space: nowrap;
}

/* Spunta e scelta: <input type="checkbox" class="spunta">, <input type="radio" class="scelta"> */
.spunta,
.scelta {
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--linea-campo);
  background: var(--superficie);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--durata-breve) var(--curva), border-color var(--durata-breve) var(--curva);
}

.spunta {
  border-radius: var(--raggio-piccolo);
}

.scelta {
  border-radius: 50%;
}

.spunta:hover,
.scelta:hover {
  border-color: var(--secondario);
}

.spunta::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--accento-testo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--durata-breve) var(--curva);
}

.spunta:indeterminate::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.scelta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accento-testo);
  transform: scale(0);
  transition: transform var(--durata-breve) var(--curva);
}

.spunta:checked,
.spunta:indeterminate,
.scelta:checked {
  border-color: var(--accento-orlo);
  background: var(--accento);
}

.spunta:checked::before,
.spunta:indeterminate::before,
.scelta:checked::before {
  transform: scale(1);
}

.spunta:disabled,
.scelta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Spunta o scelta con il suo testo. */
.opzione {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-testo);
  line-height: 20px;
  cursor: pointer;
}

.opzione > .spunta,
.opzione > .scelta {
  margin-top: 2px;
}

.opzione-nota {
  display: block;
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.4;
}

.opzioni {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Interruttore: per le impostazioni che si accendono e si spengono.
   <input type="checkbox" role="switch" class="interruttore-controllo">
   32 x 18 col mouse, 40 x 24 al tocco (blocco «Tocco» in fondo). */
.interruttore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-testo);
  line-height: 1.4;
  cursor: pointer;
}

.interruttore-controllo {
  position: relative;
  flex: none;
  width: 32px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--linea-campo);
  border-radius: var(--raggio-pillola);
  background: var(--incavo);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--durata) var(--curva), border-color var(--durata) var(--curva);
}

.interruttore-controllo::before {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pomello);
  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
  transition: transform var(--durata) var(--curva), background-color var(--durata) var(--curva);
}

.interruttore-controllo:checked {
  border-color: var(--accento-orlo);
  background: var(--accento);
}

.interruttore-controllo:checked::before {
  background: var(--accento-testo);
  transform: translateX(14px);
}

.interruttore-controllo:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Elenco di impostazioni: titolo e descrizione a sinistra, controllo a destra. */
.impostazioni {
  container-type: inline-size;
  display: grid;
}

.impostazione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--linea);
}

.impostazione:first-child {
  border-top: 0;
}

/* Dentro un riquadro la riga ha i margini del riquadro. */
.riquadro > .impostazioni > .impostazione {
  padding-inline: var(--s-4);
}

.impostazione-titolo {
  display: block;
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.43;
}

.impostazione-descrizione {
  max-width: 68ch;
  margin-top: 2px;
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.4;
}

.impostazione-controllo {
  justify-self: end;
  min-width: 0;
}

.impostazione-impilata {
  grid-template-columns: minmax(0, 1fr);
}

.impostazione-impilata .impostazione-controllo {
  justify-self: stretch;
}

@container (max-width: 520px) {
  .impostazione:not(:has(> .interruttore-controllo)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .impostazione:not(:has(> .interruttore-controllo)) .impostazione-controllo {
    justify-self: stretch;
  }
}


/* ---------------------------------------------------------------------------
   Schede, segmenti, filtri
   ------------------------------------------------------------------------ */

/* Schede di una pagina (role="tablist"): il filo si accende sotto la scelta. */
.schede {
  display: flex;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.schede::-webkit-scrollbar {
  display: none;
}

/* Schede e filtri rapidi che non ci stanno (telefono): la sfumatura solo
   dal lato dove la fila continua, cosi' l'ultima voce si legge intera e una
   fila che ci sta non si sfuma. data-sfuma lo mette app.js (sfumaSchede) a
   ogni scorrimento, cambio di pagina e cambio della fila. */
.schede[data-sfuma="destra"],
.filtri-rapidi[data-sfuma="destra"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.schede[data-sfuma="sinistra"],
.filtri-rapidi[data-sfuma="sinistra"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}

.schede[data-sfuma="entrambe"],
.filtri-rapidi[data-sfuma="entrambe"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.scheda {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio-piccolo) var(--raggio-piccolo) 0 0;
  background: none;
  color: var(--secondario);
  font-size: var(--t-testo);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}

.scheda:hover {
  color: var(--inchiostro);
  text-decoration: none;
}

.scheda:focus-visible {
  outline-offset: -2px;
}

.scheda[aria-selected="true"],
.scheda[aria-current="page"] {
  color: var(--inchiostro);
  font-weight: 600;
}

.scheda[aria-selected="true"]::after,
.scheda[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accento-inchiostro);
}

/* Segmenti: due-quattro scelte che si escludono (filtro, tema, periodo). */
/* Alti quanto un controllo: stanno in fila con campi e pulsanti. */
.segmenti {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--incavo);
  overflow-x: auto;
  scrollbar-width: none;
}

.segmenti::-webkit-scrollbar {
  display: none;
}

.segmento {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: calc(var(--altezza-controllo) - 6px);
  padding: 0 10px;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: transparent;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.segmento:hover {
  color: var(--inchiostro);
}

.segmento[aria-pressed="true"],
.segmento[aria-selected="true"],
.segmento:has(> input:checked) {
  background: var(--rilievo);
  color: var(--inchiostro);
  box-shadow: var(--ombra-1), 0 0 0 1px var(--linea);
}

.segmento > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmento:has(> input:focus-visible) {
  outline: 2px solid var(--fuoco);
  outline-offset: 1px;
}

/* Filtri rapidi: si accendono e spengono, anche piu' di uno. Comandi bassi
   a spigoli morbidi, non pillole. */
.filtri-rapidi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtro-rapido {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--altezza-piccolo);
  padding: 0 10px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.filtro-rapido:hover {
  border-color: var(--linea-campo);
}

.filtro-rapido[aria-pressed="true"] {
  border-color: var(--inchiostro);
  background: var(--inchiostro);
  color: var(--superficie);
}

.filtro-rapido[aria-pressed="true"] .conteggio {
  background: color-mix(in oklab, var(--superficie) 22%, transparent);
  color: var(--superficie);
}

/* Scelta del tema: segmenti con tre radio (Chiaro, Scuro, Automatico). */
.scelta-tema {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Nel menu dell'utente: tre colonne uguali, senza icone. */
.menu-tendina .scelta-tema .segmenti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.menu-tendina .scelta-tema .segmento {
  padding: 0 6px;
}

.menu-tendina .scelta-tema .segmento > .icona {
  display: none;
}

.tema-rapido > .icona {
  transition: transform var(--durata) var(--curva);
}

.tema-rapido:active > .icona {
  transform: rotate(-25deg);
}

.tema-rapido-sole {
  display: none;
}

[data-theme="dark"] .tema-rapido-sole {
  display: inline-block;
}

[data-theme="dark"] .tema-rapido-luna {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tema-rapido-sole {
    display: inline-block;
  }

  :root:not([data-theme]) .tema-rapido-luna {
    display: none;
  }
}


/* ---------------------------------------------------------------------------
   Riquadri, sezioni, elenchi
   I riquadri solo per gli elenchi di cose; il resto sta sulla carta.
   ------------------------------------------------------------------------ */

/* Testata della pagina: titolo di 20 px, una riga di descrizione (o di
   dati: .intestazione-pagina-dati), le azioni a destra sulla linea del
   titolo. Alta 48-56 px, non una copertina. */
.intestazione-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
}

.intestazione-pagina > .percorso {
  grid-column: 1 / -1;
}

.intestazione-pagina-descrizione {
  max-width: 80ch;
  margin-top: 2px;
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

/* Dati del soggetto sotto il titolo: codice, stato, piano, numero. */
.intestazione-pagina-dati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-3);
  margin-top: 4px;
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

.intestazione-pagina-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Le schede subito sotto la testata: la testata non aggiunge altro spazio. */
.intestazione-pagina + .schede {
  margin-top: calc(-1 * var(--s-1));
}

.sezione {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
}

.sezione + .sezione {
  margin-top: var(--s-7);
}

/* Dentro una pila lo spazio fra due sezioni resta 32 px: la pila ne da'
   gia' una parte. Affiancate in una griglia non si spostano in basso. */
.pila > .sezione + .sezione {
  margin-top: calc(var(--s-7) - var(--pila-spazio, var(--s-4)));
}

.griglia > .sezione + .sezione {
  margin-top: 0;
}

.sezione-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
}

.sezione-descrizione {
  max-width: 80ch;
  margin-top: 2px;
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

.riquadro {
  --fondo-locale: var(--superficie);
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--superficie);
}

/* Testata di un riquadro: 44 px, titolo (.titolo-riquadro) e un
   collegamento o un conteggio a destra. */
.riquadro-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--linea);
}

/* Un collegamento da solo nella testata («Apri l'agenda», «Tutti i
   clienti»): alto almeno 24 px, da toccare anche sul telefono. */
.riquadro-testata > a,
.sezione-testata > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.riquadro-corpo {
  padding: var(--s-4);
}

.riquadro-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--raggio-riquadro) var(--raggio-riquadro);
  background: var(--superficie-2);
  font-size: var(--t-piccolo);
}

/* Elenco di cose (messaggi, appuntamenti di oggi): una riga per cosa, due
   righe di testo al massimo, 52-56 px. */
.elenco {
  container-type: inline-size;
  display: grid;
}

.elenco-voce {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}

.elenco-voce:first-child {
  border-top: 0;
}

a.elenco-voce:hover,
.elenco-voce-apribile:hover {
  background: var(--superficie-2);
  text-decoration: none;
  cursor: pointer;
}

a.elenco-voce:focus-visible {
  outline-offset: -2px;
}

/* L'ora sta in alto, sulla riga del titolo, anche quando il corpo della
   voce va su tre o quattro righe (i messaggi): come nell'agenda. */
.elenco-voce-ora {
  align-self: start;
  min-width: 6ch;
  padding-top: 1px;
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.35;
}

.elenco-voce-ora > strong {
  display: block;
  color: var(--inchiostro);
  font-family: var(--f-cifre);
  font-size: var(--t-testo);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.elenco-voce-corpo {
  display: grid;
  gap: 0;
  min-width: 0;
}

.elenco-voce-titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  font-weight: 600;
  line-height: 1.43;
}

.elenco-voce-dettaglio {
  display: -webkit-box;
  overflow: hidden;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.elenco-voce-fine {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--secondario);
}

@container (max-width: 480px) {
  .elenco-voce > .pillola {
    grid-column: 2;
    justify-self: start;
  }
}

/* Coppie chiave-valore (dettaglio di una chiamata, di un cliente). */
.chiave-valore {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 6px var(--s-4);
  margin: 0;
  font-size: var(--t-testo);
  line-height: 1.43;
}

.chiave-valore dt {
  color: var(--secondario);
  font-size: var(--t-piccolo);
  line-height: 20px;
}

.chiave-valore dd {
  min-width: 0;
  margin: 0;
  color: var(--inchiostro);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Due colonne di coppie affiancate sopra i 960 px (scheda del cliente). */
.chiave-valore-doppia {
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) minmax(120px, max-content) minmax(0, 1fr);
}

@media (max-width: 959px) {
  .chiave-valore-doppia {
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  }
}


/* ---------------------------------------------------------------------------
   Tabelle: sotto i 680 px del contenitore ogni riga diventa una scheda.
   <div class="tabella-contenitore"><table class="tabella">...
   Ogni <td> ha data-etichetta="..." (il nome della colonna, per la scheda).
   Con .tabella-apribile il collegamento della cella principale copre tutta
   la scheda e la colonna con la sola freccia (.col-apri) sparisce.
   Con .tabella-a-voci la scheda diventa una voce d'elenco su due righe, come
   i Messaggi: l'ora a sinistra (.cella-ora), il nome in alto
   (.cella-principale), una misura a destra (.cella-fine), il resto sotto
   senza etichette; .cella-tecnica e .col-azioni si nascondono, .cella-solo-voce
   compare solo qui.
   ------------------------------------------------------------------------ */

.tabella-contenitore {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--superficie);
}

/* Righe da 37 px su una riga (8 + 20 + 8 + il filo), 55 px su due (nome e
   codice). Intestazione da 33 px in 13 px, nel colore secondario. */
/* Una tabella dentro un riquadro (sotto la sua testata): niente secondo
   bordo, niente angoli. */
.tabella-contenitore-interna {
  border: 0;
  border-radius: 0 0 var(--raggio-riquadro) var(--raggio-riquadro);
}

.tabella-contenitore-interna .tabella thead th:is(:first-child, :last-child) {
  border-radius: 0;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-testo);
  line-height: 20px;
}

.tabella th {
  height: 32px;
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
  color: var(--secondario);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.tabella thead th:first-child {
  border-top-left-radius: var(--raggio-riquadro);
}

.tabella thead th:last-child {
  border-top-right-radius: var(--raggio-riquadro);
}

.tabella td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

/* La prima e l'ultima colonna hanno il margine del riquadro (non nelle
   schede sotto i 680 px). */
@container (min-width: 680px) {
  .tabella th:first-child,
  .tabella td:first-child {
    padding-left: var(--s-4);
  }

  .tabella th:last-child,
  .tabella td:last-child {
    padding-right: var(--s-4);
  }

  /* Con una colonna di riassunto (che prende tutto lo spazio) le altre
     celle non vanno a capo: sarebbe «Mario / Rossi», pillole una sotto
     l'altra. */
  .tabella:has(.cella-testo) td:not(.cella-testo) {
    white-space: nowrap;
  }

  .tabella:has(.cella-testo) td:not(.cella-testo) > * {
    flex-wrap: nowrap;
  }
}

.tabella tbody tr:last-child td {
  border-bottom: 0;
}

.tabella tbody tr:hover {
  background: var(--superficie-2);
}

.tabella .cella-principale {
  font-weight: 600;
}

/* Seconda riga di una cella (codice del cliente, piano, numero). */
.cella-sotto {
  display: block;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  font-weight: 400;
  line-height: 18px;
}

/* Larghezze delle colonne ricorrenti: la tabella non si allarga a caso. */
.tabella .col-ora { width: 8.5rem; white-space: nowrap; }
.tabella .col-stato { width: 9.5rem; }
.tabella .col-durata { width: 5rem; }
.tabella .col-stretta { width: 1%; white-space: nowrap; }

/* Testo lungo in una cella (riassunto): una riga sola, i puntini; la
   colonna prende lo spazio che resta, le altre stanno su una riga. */
.tabella .cella-testo {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  color: var(--secondario);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabella .cella-principale a {
  color: inherit;
  text-decoration: none;
}

.tabella .cella-principale a:hover {
  text-decoration: underline;
}

.tabella .col-numero {
  font-family: var(--f-cifre);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.tabella th.col-numero {
  font-family: var(--f-testo);
}

.tabella .col-azioni {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* Pulsanti con e senza icona sulla stessa linea. Col mouse un pulsante in
   una cella non allunga la riga: sborda nel margine della cella. */
.tabella .col-azioni > .pulsante {
  vertical-align: middle;
}

@media (hover: hover) and (pointer: fine) {
  .tabella td > .pulsante-piccolo {
    margin-block: -4px;
  }
}

@container (max-width: 679px) {
  .tabella thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabella,
  .tabella tbody,
  .tabella tr,
  .tabella td {
    display: block;
    width: 100%;
  }

  .tabella tr {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--linea);
  }

  .tabella tbody tr:first-child {
    border-top: 0;
  }

  /* Solo .tabella td: con «tbody tr:last-child td» l'ultima scheda aveva
     anche la cella principale allineata a destra. */
  .tabella td {
    display: flow-root;
    padding: 2px 0;
    border: 0;
    text-align: right;
  }

  .tabella td[data-etichetta]::before {
    content: attr(data-etichetta);
    float: left;
    margin-right: var(--s-4);
    color: var(--secondario);
    font-family: var(--f-testo);
    font-size: var(--t-piccolo);
    font-weight: 400;
    text-align: left;
  }

  .tabella .cella-principale {
    display: block;
    padding-bottom: 4px;
    font-size: var(--t-testo);
    text-align: left;
  }

  .tabella .cella-testo {
    width: 100%;
    max-width: none;
    white-space: normal;
  }

  .tabella .col-ora,
  .tabella .col-stato,
  .tabella .col-durata,
  .tabella .col-stretta {
    width: 100%;
  }

  .tabella .cella-principale::before {
    display: none;
  }

  .tabella .col-numero {
    text-align: right;
  }

  .tabella .col-azioni {
    padding-top: var(--s-2);
    text-align: left;
  }

  .tabella .cella-principale a {
    display: inline-block;
    padding-block: 2px;
  }

  /* Un collegamento in una cella della scheda (il cliente di un numero, di
     una segnalazione): alto almeno 24 px, da toccare col dito. */
  .tabella td > a:not(.pulsante) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  /* Schede apribili: il collegamento della cella principale copre tutta la
     scheda, e la colonna con la sola freccia (.col-apri) sparisce. */
  .tabella-apribile tr {
    position: relative;
  }

  .tabella-apribile .cella-principale a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .tabella-apribile .cella-principale a:focus-visible {
    outline: none;
  }

  .tabella-apribile .cella-principale a:focus-visible::after {
    border-radius: var(--raggio-piccolo);
    outline: 2px solid var(--fuoco);
    outline-offset: -3px;
  }

  /* I controlli dentro la scheda restano cliccabili sopra il collegamento. */
  .tabella-apribile td:not(.cella-principale) a,
  .tabella-apribile td button {
    position: relative;
    z-index: 1;
  }

  .tabella .col-apri {
    display: none;
  }

  /* Voce d'elenco su due righe. */
  .tabella-a-voci tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-4);
    row-gap: 0;
    align-items: start;
    padding: var(--s-3) var(--s-4);
  }

  /* Lo spazio fra le righe della voce sta sulle celle, non nella griglia:
     l'ora occupa piu' righe e quelle vuote non aggiungono spazio. */
  .tabella-a-voci tr > td:not(.cella-ora):not(.cella-principale):not(.cella-fine) {
    margin-top: 2px;
  }

  .tabella-a-voci tr:has(> .cella-ora) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tabella-a-voci tbody tr:hover {
    background: var(--superficie-2);
  }

  .tabella-a-voci td {
    grid-column: 1 / -1;
    padding: 0;
    text-align: left;
  }

  .tabella-a-voci tr:has(> .cella-ora) > td {
    grid-column: 2 / -1;
  }

  .tabella-a-voci td[data-etichetta]::before {
    display: none;
  }

  /* <td class="cella-ora"><span>oggi</span> <strong>16:40</strong></td>:
     sulla voce l'ora sta sopra e il giorno sotto. */
  .tabella-a-voci tr > .cella-ora,
  .tabella-a-voci tr:has(> .cella-ora) > .cella-ora {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    grid-column: 1;
    grid-row: 1 / span 6;
    min-width: 52px;
    padding-top: 2px;
    color: var(--secondario);
    font-size: var(--t-nota);
    line-height: 1.35;
  }

  .tabella-a-voci tr > .cella-ora strong {
    color: var(--inchiostro);
    font-size: var(--t-piccolo);
    font-weight: 500;
  }

  .tabella-a-voci tr > .cella-principale {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    font-size: var(--t-testo);
  }

  .tabella-a-voci tr > .cella-fine {
    grid-column: 2;
    grid-row: 1;
    padding-top: 3px;
    color: var(--secondario);
    font-size: var(--t-nota);
    text-align: right;
  }

  .tabella-a-voci tr:has(> .cella-ora) > .cella-principale {
    grid-column: 2;
  }

  .tabella-a-voci tr:has(> .cella-ora) > .cella-fine {
    grid-column: 3;
  }

  .tabella-a-voci .cella-testo {
    display: -webkit-box;
    overflow: hidden;
    color: var(--secondario);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .tabella-a-voci .cella-tecnica,
  .tabella-a-voci .col-azioni,
  .tabella-a-voci td:empty {
    display: none;
  }

  /* Una cella che esiste solo nella voce (un riassunto di colonne tecniche). */
  .tabella-a-voci td.cella-solo-voce:not(:empty) {
    display: block;
  }
}

/* Tabella compatta (tabelle di numeri e impostazioni: costi, listino, soglie,
   numeri, accessi): sotto i 680 px niente scheda con una coppia per riga.
   In alto il nome (.cella-principale) e a destra la misura (.cella-fine);
   sotto, le altre coppie «etichetta valore» una dopo l'altra, in piccolo,
   finche' c'e' posto; le azioni in fondo a destra, sulla stessa riga se ci
   stanno. .cella-tecnica sparisce. */
@container (max-width: 679px) {
  .tabella-compatta tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--s-4);
    padding: var(--s-2) var(--s-4);
  }

  .tabella-compatta td {
    display: inline-flex;
    flex-wrap: wrap;
    order: 2;
    align-items: baseline;
    gap: 0 6px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    font-size: var(--t-piccolo);
    line-height: 20px;
    text-align: left;
  }

  /* Nessuna larghezza di colonna nella scheda: .col-azioni (1%) faceva
     uscire i pulsanti dal bordo, .col-stato e .col-ora (100%) andavano a
     capo da sole. */
  .tabella.tabella-compatta td,
  .tabella.tabella-compatta th {
    width: auto;
  }

  .tabella-compatta td[data-etichetta]::before {
    float: none;
    margin-right: 0;
  }

  .tabella-compatta tr > .cella-principale {
    display: block;
    flex: 1 1 55%;
    order: 0;
    padding: 0;
    font-size: var(--t-testo);
  }

  /* Un a capo dopo nome e misura: le coppie cominciano sempre sulla
     seconda riga, mai accanto alla misura. */
  .tabella-compatta tbody tr::after {
    content: "";
    flex-basis: 100%;
    order: 1;
    height: 0;
  }

  /* La misura sta sulla prima riga, accanto al nome, dovunque sia la sua
     colonna. */
  .tabella-compatta tr > .cella-fine {
    order: 1;
    margin-left: auto;
    font-size: var(--t-testo);
    text-align: right;
  }

  .tabella-compatta tr > .cella-fine::before {
    display: none;
  }

  .tabella-compatta tbody th {
    flex-basis: 100%;
    padding: 0;
  }

  .tabella-compatta .col-azioni {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
    padding-top: 0;
  }

  .tabella-compatta .cella-tecnica,
  .tabella-compatta td:empty {
    display: none;
  }
}

/* Fuori dalla voce la cella solo-voce non c'e'. */
.tabella .cella-solo-voce {
  display: none;
}

/* Sopra i 680 px le celle d'ora stanno su una riga: «oggi 16:40». */
.tabella .cella-ora {
  white-space: nowrap;
}

.tabella .cella-ora strong {
  font-family: var(--f-cifre);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}


/* ---------------------------------------------------------------------------
   Stati: pillole, conteggi, misuratori
   ------------------------------------------------------------------------ */

/* Stato di una riga: un'etichetta bassa (20 px), a spigoli morbidi, con la
   spia e la parola. Il fondo tenue basta: il bordo resta solo dove il fondo
   e' quello della superficie (Messaggio). */
.pillola {
  --pillola-testo: var(--secondario);
  --pillola-fondo: var(--superficie-3);
  --pillola-bordo: transparent;
  --spia: var(--neutro-spia);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--pillola-bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--pillola-fondo);
  color: var(--pillola-testo);
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.pillola::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spia);
}

.pillola-ok {
  --pillola-testo: var(--ok);
  --pillola-fondo: var(--ok-fondo);
  --spia: var(--ok-spia);
}

.pillola-attenzione {
  --pillola-testo: var(--attenzione);
  --pillola-fondo: var(--attenzione-fondo);
  --spia: var(--attenzione-spia);
}

.pillola-pericolo {
  --pillola-testo: var(--pericolo);
  --pillola-fondo: var(--pericolo-fondo);
  --spia: var(--pericolo-spia);
}

.pillola-info {
  --pillola-testo: var(--info);
  --pillola-fondo: var(--info-fondo);
  --spia: var(--info-spia);
}

/* Due esiti che non usano il marchio (un marchio verde sembrerebbe «ok», uno
   blu «info»): «Da richiamare» e' piena d'inchiostro, tocca a qualcuno;
   «Messaggio» e' chiara con il bordo e la spia quadrata di un foglietto. */
.pillola-richiamo {
  --pillola-testo: var(--superficie);
  --pillola-fondo: var(--inchiostro);
  --pillola-bordo: var(--inchiostro);
  --spia: var(--spia-su-inchiostro);
}

.pillola-messaggio {
  --pillola-testo: var(--inchiostro);
  --pillola-fondo: var(--superficie);
  --pillola-bordo: var(--linea-campo);
  --spia: var(--inchiostro);
}

.pillola-messaggio::before {
  border-radius: 2px;
}

/* Piena: non si confonde con info nemmeno quando il marchio e' blu. */
.pillola-accento {
  --pillola-testo: var(--accento-testo);
  --pillola-fondo: var(--accento);
  --pillola-bordo: var(--accento-orlo);
  --spia: var(--accento-testo);
}

.pillola-viva {
  --pillola-testo: var(--ok);
  --pillola-fondo: var(--ok-fondo);
  --spia: var(--ok-spia);
}

.pillola-viva::before {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--spia) 30%, transparent);
  animation: pillola-battito 1.4s ease-in-out infinite;
}

@keyframes pillola-battito {
  50% { box-shadow: 0 0 0 1px color-mix(in oklab, var(--spia) 30%, transparent); opacity: 0.55; }
}

.pillola-senza-spia::before {
  display: none;
}

.conteggio {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raggio-pillola);
  background: var(--superficie-3);
  color: var(--inchiostro);
  font-family: var(--f-cifre);
  font-size: var(--t-nota);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Il conteggio dentro un titolo («Messaggi da gestire 3»): staccato dal testo. */
.titolo-riquadro > .conteggio,
.titolo-sezione > .conteggio {
  margin-left: var(--s-2);
  vertical-align: 1px;
}

/* Cose da fare (messaggi aperti, segnalazioni nuove): inchiostro pieno, non
   il marchio, che in verde sembrerebbe «tutto bene». */
.conteggio-evidente {
  background: var(--inchiostro);
  color: var(--superficie);
}

/* Misuratore: <progress class="misuratore" value="214" max="400"> */
.misuratore {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--raggio-pillola);
  background: var(--incavo);
  color: var(--accento-inchiostro);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.misuratore::-webkit-progress-bar {
  border-radius: var(--raggio-pillola);
  background: var(--incavo);
}

.misuratore::-webkit-progress-value {
  border-radius: var(--raggio-pillola);
  background: var(--accento-inchiostro);
}

.misuratore::-moz-progress-bar {
  border-radius: var(--raggio-pillola);
  background: var(--accento-inchiostro);
}

.misuratore-alto::-webkit-progress-value {
  background: var(--attenzione-spia);
}

.misuratore-alto::-moz-progress-bar {
  background: var(--attenzione-spia);
}

.misuratore-pieno::-webkit-progress-value {
  background: var(--pericolo-spia);
}

.misuratore-pieno::-moz-progress-bar {
  background: var(--pericolo-spia);
}

/* Misure (Panoramica, Situazione, scheda del cliente): una striscia in un
   riquadro, celle divise da un filo. Etichetta di 13, cifra di 20, una riga
   di confronto: 76 px in tutto. */
.misure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--superficie);
  overflow: hidden;
}

/* Il filo a sinistra e sopra ogni cella: sui bordi del riquadro resta
   nascosto, e una riga incompleta non lascia caselle grigie. */
.misura {
  --fondo-locale: var(--superficie);
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--superficie);
  box-shadow: -1px 0 0 var(--linea), 0 -1px 0 var(--linea);
}

.misura-etichetta {
  overflow: hidden;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.misura-valore {
  margin: 0;
  font-family: var(--f-titoli);
  font-size: var(--t-pagina);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* «214 / 400»: il totale piu' piccolo, accanto. */
.misura-valore > small {
  margin-left: 4px;
  color: var(--secondario);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 500;
}

.misura-confronto {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--secondario);
  font-size: var(--t-nota);
}

.misura > .misuratore {
  margin-top: 4px;
}

/* Passi da completare (Panoramica): una sequenza vera, quindi numerata. */
.da-fare {
  display: grid;
}

.da-fare-voce {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--linea);
}

.da-fare-voce:first-child {
  border-top: 0;
}

.da-fare-segno {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px dashed var(--linea-campo);
  border-radius: 50%;
  color: var(--secondario);
  font-family: var(--f-cifre);
  font-size: var(--t-nota);
  font-weight: 600;
}

.da-fare-voce[data-fatto] .da-fare-segno {
  border: 0;
  background: var(--ok-fondo);
  color: var(--ok);
}

.da-fare-titolo {
  font-weight: 600;
  line-height: 1.43;
}

.da-fare-voce[data-fatto] .da-fare-titolo {
  color: var(--secondario);
}

.tacche {
  display: inline-flex;
  gap: 4px;
}

/* La tacca vuota ha il bordo dei campi (3:1 sul fondo), visibile anche nel
   tema scuro. */
.tacca {
  width: 22px;
  height: 6px;
  border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--linea-campo);
}

.tacca-piena {
  background: var(--ok-spia);
  box-shadow: none;
}


/* ---------------------------------------------------------------------------
   Allerte, stati vuoti, caricamento
   ------------------------------------------------------------------------ */

.allerta {
  --allerta-segno: var(--info);
  --allerta-fondo: var(--info-fondo);
  --allerta-bordo: var(--info-bordo);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px var(--s-2);
  padding: 10px var(--s-3);
  border: 1px solid var(--allerta-bordo);
  border-radius: var(--raggio);
  background: var(--allerta-fondo);
  color: var(--inchiostro);
  font-size: var(--t-piccolo);
  line-height: 1.45;
}

.allerta > .icona {
  margin-top: 2px;
  color: var(--allerta-segno);
}

.allerta-corpo {
  display: grid;
  gap: 0;
  min-width: 0;
}

.allerta-titolo {
  font-weight: 600;
}

.allerta-azioni {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--s-2);
}

.allerta-ok {
  --allerta-segno: var(--ok);
  --allerta-fondo: var(--ok-fondo);
  --allerta-bordo: var(--ok-bordo);
}

.allerta-attenzione {
  --allerta-segno: var(--attenzione);
  --allerta-fondo: var(--attenzione-fondo);
  --allerta-bordo: var(--attenzione-bordo);
}

.allerta-pericolo {
  --allerta-segno: var(--pericolo);
  --allerta-fondo: var(--pericolo-fondo);
  --allerta-bordo: var(--pericolo-bordo);
}

@media (max-width: 679px) {
  .allerta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .allerta-azioni {
    grid-column: 2;
    margin-top: var(--s-2);
  }
}

/* Stato vuoto: dice cosa comparira' e propone il primo passo. */
/* Stato vuoto: una riga di titolo, una di testo, il primo passo. Compatto:
   dentro un riquadro (.vuoto-interno) sta nell'altezza di tre righe. */
.vuoto {
  display: grid;
  justify-items: start;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-4);
  border: 1px dashed var(--linea-forte);
  border-radius: var(--raggio-riquadro);
}

.vuoto-interno {
  border: 0;
  border-radius: 0;
}

.vuoto-icona {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--s-1);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--secondario);
}

.vuoto-titolo {
  font-size: var(--t-testo);
  font-weight: 600;
  line-height: 1.43;
}

.vuoto-testo {
  max-width: 64ch;
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

.vuoto > .azioni {
  margin-top: var(--s-2);
}

/* Segnaposto durante il caricamento (il contenitore ha aria-busy="true"). */
.segnaposto {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: var(--raggio-piccolo);
  background: linear-gradient(90deg, var(--incavo) 0 40%, var(--superficie-2) 50%, var(--incavo) 60% 100%);
  background-size: 300% 100%;
  animation: luccica 1.6s linear infinite;
}

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

.segnaposto-titolo {
  width: 30%;
  height: 20px;
}

.segnaposto-corta {
  width: 60%;
}

.segnaposto-tondo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.segnaposto-blocco {
  height: 96px;
  border-radius: var(--raggio-riquadro);
}


/* ---------------------------------------------------------------------------
   Finestre di dialogo, notifiche, menu a tendina
   ------------------------------------------------------------------------ */

/* <dialog class="finestra"> aperta con showModal(); sul telefono sale dal basso. */
.finestra {
  width: min(520px, calc(100vw - 32px));
  max-height: min(85vh, 760px);
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-finestra);
  background: var(--superficie);
  color: var(--inchiostro);
  box-shadow: var(--ombra-3);
  overflow: auto;
}

.finestra::backdrop {
  background: var(--velo, rgb(17 18 21 / 50%));
}

.finestra[open] {
  animation: finestra-entra var(--durata-lunga) var(--curva);
}

@keyframes finestra-entra {
  from { opacity: 0; transform: translateY(6px); }
}

.finestra-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) 0 var(--s-5);
}

.finestra-titolo {
  font-family: var(--f-titoli);
  font-size: var(--t-sottotitolo);
  font-weight: 600;
  line-height: 1.4;
}

.finestra-corpo {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5) var(--s-5);
}

.finestra-azioni {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--linea);
  background: var(--superficie-2);
}

/* Finestra di lato (dettaglio di una chiamata, di un messaggio): alta come
   la pagina, a destra, 720 px; l'elenco resta visibile a sinistra. Sotto i
   680 px occupa lo schermo. <dialog class="finestra finestra-lato">. */
.finestra-lato {
  width: min(var(--larghezza-lato-finestra), 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
  overflow: hidden;
}

.finestra-lato[open] {
  display: flex;
  flex-direction: column;
  animation-name: lato-entra;
}

@keyframes lato-entra {
  from { opacity: 0; transform: translateX(24px); }
}

.finestra-lato > .finestra-testata {
  flex: none;
  min-height: var(--altezza-barra);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
  border-bottom: 1px solid var(--linea);
}

.finestra-lato > .finestra-corpo,
.finestra-lato > form > .finestra-corpo {
  flex: 1;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finestra-lato > .finestra-azioni {
  flex: none;
  justify-content: flex-start;
}

.elenco-puntato {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
}

@media (max-width: 679px) {
  .finestra {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--raggio-finestra) var(--raggio-finestra) 0 0;
  }

  .finestra[open] {
    animation-name: foglio-sale;
  }

  .finestra-azioni {
    flex-direction: column-reverse;
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  }

  .finestra-azioni > .pulsante {
    width: 100%;
  }
}

@keyframes foglio-sale {
  from { transform: translateY(40px); opacity: 0; }
}

/* Notifiche brevi: <div class="notifiche" aria-live="polite"> in fondo alla pagina.
   Non coprono mai la barra di pubblicazione: l'app scrive in
   --notifiche-sopra-barra la distanza fra il fondo della finestra e il bordo
   alto della barra (0 senza barra), e le notifiche stanno sopra.
   Il bordo destro e' quello del contenuto (.pagina-interna: menu a lato,
   margine della pagina, larghezza massima); in percentuale della finestra,
   cosi' la barra di scorrimento non lo sposta. */
.notifiche {
  position: fixed;
  z-index: 80;
  right: max(var(--s-7), calc(100% - var(--larghezza-lato) - var(--s-7) - var(--larghezza-contenuto)));
  bottom: max(var(--s-5), var(--notifiche-sopra-barra, 0px));
  display: grid;
  gap: var(--s-2);
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}

.notifica {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 6px 6px var(--s-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: var(--ombra-2);
  font-size: var(--t-piccolo);
  line-height: 1.4;
  pointer-events: auto;
  animation: notifica-entra var(--durata-lunga) var(--curva);
}

.notifica > .spia {
  --spia: var(--info-spia);
}

.notifica-ok > .spia { --spia: var(--ok-spia); }
.notifica-attenzione > .spia { --spia: var(--attenzione-spia); }
.notifica-pericolo > .spia { --spia: var(--pericolo-spia); }

.notifica-azioni {
  display: flex;
  align-items: center;
  gap: 2px;
}

@keyframes notifica-entra {
  from { opacity: 0; transform: translateY(8px); }
}


/* Menu a tendina (menu dell'utente): il contenitore ha position: relative. */
.menu-tendina {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  min-width: 260px;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--superficie);
  color: var(--inchiostro);
  box-shadow: var(--ombra-2);
}

.menu-tendina-testata {
  display: grid;
  gap: 0;
  margin-bottom: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
}

.menu-tendina-voce {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--altezza-pulsante);
  padding: 0 8px;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: none;
  color: var(--inchiostro);
  font-size: var(--t-testo);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-tendina-voce:hover {
  background: var(--superficie-2);
  text-decoration: none;
}

.menu-tendina-voce > .icona {
  color: var(--secondario);
}

.menu-tendina-sezione {
  display: grid;
  gap: 6px;
  padding: 6px 8px 8px;
}

.menu-tendina-separatore {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--linea);
}


/* ---------------------------------------------------------------------------
   Percorso e paginazione
   ------------------------------------------------------------------------ */

.percorso ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  list-style: none;
}

.percorso li + li::before {
  content: "/";
  margin: 0 6px;
  color: var(--linea-campo);
}

.percorso a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--secondario);
  text-decoration: none;
}

.percorso a:hover {
  color: var(--inchiostro);
  text-decoration: underline;
}

.percorso [aria-current="page"] {
  color: var(--inchiostro);
  font-weight: 600;
}

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

/* «1–25 di 132», «32 mostrate»: parole nel carattere del testo, cifre
   allineate (il carattere a spaziatura fissa e' solo per le cifre sole). */
.paginazione-stato {
  color: var(--secondario);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   Guscio dell'app: barra in alto, menu a lato, pagina, piede;
   sotto i 960 px il menu a lato lascia il posto alla barra in basso.

   +---------------------------------------------+
   | testata (48 px, tutta la larghezza)         |
   +------------+--------------------------------+
   | lato       | pagina                         |
   |  (menu     |                                |
   |  sticky)   |                                |
   +------------+--------------------------------+
   | piede (tutta la larghezza)                  |
   +---------------------------------------------+

   La colonna del lato (.lato, con il suo bordo) corre per tutta la riga
   fino al piede, su pagine corte e lunghe; il menu dentro (.menu-lato)
   resta sotto la barra mentre si scorre e in fondo alla pagina si ferma sul
   piede: la colonna e' il suo contenitore. Con poco contenuto il piede sta
   in fondo alla finestra.
   <div class="guscio"> <header class="testata-app"> <div class="lato">
   <nav class="menu-lato"> ... </nav></div> <main class="pagina">
   <footer class="piede-app"> <nav class="schede-telefono"></div>
   ------------------------------------------------------------------------ */

.guscio {
  display: grid;
  grid-template-columns: var(--larghezza-lato) minmax(0, 1fr);
  grid-template-rows: var(--altezza-barra) minmax(0, 1fr) auto;
  grid-template-areas:
    "testata testata"
    "lato pagina"
    "piede piede";
  min-height: 100vh;
  min-height: 100dvh;
}

.lato {
  grid-area: lato;
  min-width: 0;
  border-right: 1px solid var(--linea);
}

/* Barra in alto: 48 px, piena (niente vetro smerigliato). Il suo bordo
   inferiore dice lo stato della linea: acceso in chiamata, tratteggiato in
   pausa, rosso col guasto; fermo, senza segnali che corrono. */
.testata-app {
  grid-area: testata;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--altezza-barra);
  padding: 0 var(--s-4);
  background: var(--carta);
}

.testata-app::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--linea);
}

.testata-app[data-linea="in-chiamata"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ok-spia);
}

.testata-app[data-linea="pausa"]::after {
  background: repeating-linear-gradient(90deg, var(--linea-campo) 0 6px, transparent 6px 12px);
}

.testata-app[data-linea="guasto"]::after {
  height: 2px;
  background: var(--pericolo-spia);
}

@keyframes filo-segnale {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* Il marchio finisce dove finisce il menu a lato: lo stato della linea
   parte allineato al contenuto della pagina. */
.testata-marchio {
  display: inline-flex;
  flex: 0 0 calc(var(--larghezza-lato) + var(--s-7) - var(--s-4) - var(--s-3));
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--inchiostro);
  text-decoration: none;
}

.testata-marchio:hover {
  text-decoration: none;
}

.marchio-immagine {
  display: block;
  width: auto;
  max-width: 140px;
  height: auto;
  max-height: 24px;
  object-fit: contain;
}

.marchio-tessera {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--raggio);
  background: var(--marchio-pieno);
  color: var(--marchio-testo);
  font-family: var(--f-titoli);
  font-size: var(--t-piccolo);
  font-weight: 700;
  line-height: 1;
}

/* Su un fondo scuro la tessera ha un filo: un marchio quasi nero non si
   confonde con la barra e resta la forma, non solo la lettera. */
[data-theme="dark"] .marchio-tessera,
.inverso .marchio-tessera,
.ingresso-lato .marchio-tessera {
  box-shadow: inset 0 0 0 1px var(--linea-forte);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .marchio-tessera {
    box-shadow: inset 0 0 0 1px var(--linea-forte);
  }
}

.marchio-nome {
  min-width: 0;
  overflow: hidden;
  font-family: var(--f-titoli);
  font-size: var(--t-testo);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testata-azioni {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.aggiornato {
  margin-right: var(--s-2);
  color: var(--secondario);
  font-size: var(--t-nota);
  white-space: nowrap;
}

.utente {
  position: relative;
}

.utente-pulsante {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--altezza-pulsante);
  padding: 0 6px 0 4px;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  background: none;
  color: var(--inchiostro);
  font-size: var(--t-piccolo);
  font-weight: 600;
}

.utente-pulsante:hover,
.utente-pulsante[aria-expanded="true"] {
  background: var(--superficie-3);
}

.utente-pulsante > .icona {
  color: var(--secondario);
}

.avatar-iniziale {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--raggio);
  background: var(--incavo);
  color: var(--inchiostro);
  font-family: var(--f-titoli);
  font-size: var(--t-nota);
  font-weight: 700;
  line-height: 1;
}

/* Menu a lato: 216 px, voci da 32 px in 14 px, icone di 16. La voce
   aperta ha un fondo pieno appena piu' scuro, non una carta in rilievo. */
.menu-lato {
  position: sticky;
  top: var(--altezza-barra);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  /* Alto quanto la finestra sotto la barra, ma mai oltre la colonna: con
     una pagina corta il piede del menu sta subito sopra il piede della
     pagina. Se le voci non ci stanno, scorre dentro. */
  height: min(100%, calc(100vh - var(--altezza-barra)));
  height: min(100%, calc(100dvh - var(--altezza-barra)));
  min-height: 0;
  padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3);
  overflow-y: auto;
  scrollbar-width: thin;
}

.menu-lato-gruppo {
  display: grid;
  gap: 1px;
}

.menu-lato-titolo {
  padding: 0 8px 4px;
  color: var(--terziario);
  font-size: var(--t-nota);
  font-weight: 500;
}

.menu-lato-voce {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--raggio);
  color: var(--secondario);
  font-size: var(--t-testo);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.menu-lato-voce:hover {
  background: color-mix(in oklab, var(--superficie-3) 60%, transparent);
  color: var(--inchiostro);
  text-decoration: none;
}

.menu-lato-voce[aria-current="page"] {
  background: var(--superficie-3);
  color: var(--inchiostro);
  font-weight: 600;
}

.menu-lato-voce[aria-current="page"] > .icona {
  color: var(--accento-inchiostro);
}

.menu-lato-voce > .conteggio {
  margin-left: auto;
}

.menu-lato-piede {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: var(--s-3) 8px 0;
  border-top: 1px solid var(--linea);
  color: var(--secondario);
  font-size: var(--t-nota);
}

/* Pagina: 24 px sopra, 32 ai lati, larga fino a 1440 px. I moduli e le
   impostazioni stanno in .larghezza-modulo (760 px). */
.pagina {
  grid-area: pagina;
  min-width: 0;
  padding: var(--s-6) var(--s-7) var(--s-9);
}

.pagina-interna {
  max-width: var(--larghezza-contenuto);
}

.larghezza-modulo {
  max-width: var(--larghezza-modulo);
}

/* Piede: una riga di 13 px, a tutta larghezza sotto il lato e la pagina;
   il testo parte dove parte il marchio nella barra in alto. */
.piede-app {
  grid-area: piede;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--linea);
  color: var(--secondario);
  font-size: var(--t-nota);
  line-height: 1.4;
}

.piede-app a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--secondario);
  text-decoration: none;
}

.piede-app a:hover {
  color: var(--inchiostro);
  text-decoration: underline;
}

.piede-app-contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-4);
}

.piede-app-tecnologia {
  margin-left: auto;
  color: var(--terziario);
}

/* Barra in basso, solo su telefono e tablet: cinque voci. */
.schede-telefono {
  display: none;
}

.scheda-telefono {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--secondario);
  font-size: var(--t-nota);
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.scheda-telefono:hover {
  color: var(--inchiostro);
  text-decoration: none;
}

.scheda-telefono:focus-visible {
  outline-offset: -4px;
  border-radius: var(--raggio);
}

.scheda-telefono > .icona {
  width: 20px;
  height: 20px;
}

.scheda-telefono[aria-current="page"] {
  color: var(--inchiostro);
  font-weight: 600;
}

.scheda-telefono[aria-current="page"] > .icona {
  color: var(--accento-inchiostro);
}

.scheda-telefono[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24%;
  right: 24%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accento-inchiostro);
}

.scheda-telefono > .conteggio {
  position: absolute;
  top: 4px;
  left: calc(50% + 4px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

/* Barra di pubblicazione: una sola, per tutte le schede dell'assistente. */
.barra-pubblica {
  position: sticky;
  bottom: var(--s-4);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: var(--ombra-2);
}

.barra-pubblica-stato {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--t-piccolo);
  line-height: 1.4;
}

.barra-pubblica-stato > .spia {
  --spia: var(--attenzione-spia);
}

.barra-pubblica-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.barra-pubblica-stato a {
  color: var(--secondario);
  font-weight: 600;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Accesso: due colonne da 880 px, una sola sotto.
   ------------------------------------------------------------------------ */

.ingresso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--carta);
}

.ingresso-lato {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5) var(--s-7);
  background: var(--carta);
  color: var(--inchiostro);
  overflow: hidden;
}

/* Il logo di un cliente e' disegnato per il chiaro: sta sempre su bianco. */
.ingresso-marchio {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  background: #FFFFFF;
  color: #17191C;
}

.ingresso-marchio > .marchio-immagine {
  max-height: 36px;
}

.ingresso-filo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ingresso-filo-linea {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--linea-forte);
  overflow: hidden;
}

/* Il filo dell'accesso e' fermo: niente segnale che corre. */
.ingresso-filo-linea::after {
  content: none;
}

.ingresso-filo > .spia {
  --spia: var(--ok-spia);
}

.ingresso-punti {
  display: none;
  gap: var(--s-4);
  margin: 0;
}

.ingresso-punto {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 var(--s-3);
  align-items: start;
}

.ingresso-punto-icona {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
}

.ingresso-punto-titolo {
  font-weight: 600;
}

.ingresso-punto-testo {
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

.ingresso-modulo {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-5) 0;
}

.ingresso-modulo-interno {
  display: grid;
  gap: var(--s-4);
  width: 100%;
  max-width: 380px;
  margin: 0 auto auto;
}

.ingresso-modulo > .piede-app {
  margin-top: var(--s-8);
  padding-inline: 0;
  justify-content: center;
}

@media (min-width: 880px) {
  .ingresso {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }

  .ingresso-lato {
    position: sticky;
    top: 0;
    justify-content: space-between;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--s-8) var(--s-9);
  }

  .ingresso-punti {
    display: grid;
  }

  .ingresso-modulo {
    padding: var(--s-8) var(--s-8) 0;
  }

  .ingresso-modulo-interno {
    margin: auto;
  }
}


/* ---------------------------------------------------------------------------
   Aiuti di impaginazione
   ------------------------------------------------------------------------ */

.pila {
  display: grid;
  align-content: start;
  gap: var(--pila-spazio, var(--s-4));
  min-width: 0;
}

.pila-stretta {
  --pila-spazio: var(--s-2);
}

.pila-larga {
  --pila-spazio: var(--s-6);
}

.riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--riga-spazio, var(--s-2));
  min-width: 0;
}

.spingi {
  margin-left: auto;
}

.griglia {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--griglia-min, 300px)), 1fr));
  gap: var(--s-4);
}

/* Pagina di lavoro in due colonne sopra i 1200 px: il contenuto a sinistra,
   una colonna di 340 px a destra (agenda di oggi, sicurezza, pagamenti).
   Sotto, una colonna sola, la destra dopo la sinistra. */
.griglia-lavoro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-4);
}

@media (min-width: 1200px) {
  .griglia-lavoro {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

.griglia-lavoro > * {
  min-width: 0;
}

.solo-lettori {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta-contenuto {
  position: fixed;
  z-index: 100;
  top: var(--s-2);
  left: var(--s-2);
  padding: 10px 14px;
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: var(--carta);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--durata) var(--curva);
}

.salta-contenuto:focus {
  transform: none;
}


/* ---------------------------------------------------------------------------
   Barra dei filtri, sopra un elenco o una tabella: cerca, periodo, filtri,
   azioni a destra. Una riga di controlli da 32 px, 12 px sopra la tabella.
   <div class="barra-filtri">
     <div class="controllo-gruppo barra-filtri-cerca">...</div>
     <div class="selettore">...</div> <div class="filtri-rapidi">...</div>
     <div class="spingi azioni">...</div>
   </div>
   ------------------------------------------------------------------------ */

.barra-filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.barra-filtri-cerca {
  flex: 1 1 220px;
  max-width: 320px;
}

.barra-filtri > .selettore {
  flex: 0 1 180px;
}

.barra-filtri-stato {
  color: var(--secondario);
  font-size: var(--t-nota);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Dettaglio di una chiamata (portale e pannello, nella .finestra-lato):
   testata con chi, quando, durata ed esito; il lettore dell'audio; il
   riassunto; la trascrizione. Senza registrazione il lettore lascia il
   posto a .lettore-assente.
   ------------------------------------------------------------------------ */

.chiamata-testata {
  display: grid;
  gap: 4px;
}

.chiamata-testata-dati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-3);
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

/* Lettore: <div class="lettore"> con il comando (pulsante-icona, Ascolta o
   Pausa), il tempo, la barra (input type="range" class="lettore-barra",
   --avanzamento fra 0 e 1 da JS con style.setProperty), la durata, la
   velocita' (segmenti) e Scarica. */
.lettore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--linea);
  border-radius: var(--raggio-riquadro);
  background: var(--superficie-2);
}

.lettore-tempo {
  min-width: 5ch;
  color: var(--secondario);
  font-size: var(--t-piccolo);
  text-align: center;
}

.lettore-barra {
  flex: 1 1 160px;
  min-width: 120px;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.lettore-barra::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accento-inchiostro) calc(var(--avanzamento, 0) * 100%), var(--linea-forte) 0);
}

.lettore-barra::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--linea-forte);
}

.lettore-barra::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--accento-inchiostro);
}

.lettore-barra::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--accento-inchiostro);
  -webkit-appearance: none;
  appearance: none;
}

.lettore-barra::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--accento-inchiostro);
}

.lettore-barra:focus-visible {
  outline-offset: 4px;
}

.lettore-velocita .segmento {
  min-width: 3.5ch;
  padding: 0 6px;
  font-family: var(--f-cifre);
}

.lettore-nota {
  margin-top: 4px;
}

/* Registrazione spenta, cancellata dopo 90 giorni o in arrivo: una riga
   quieta al posto del lettore, con il perche'. L'icona e poi il testo in un
   solo <span> (lo spazio fra gli elementi non spezza le frasi). */
.lettore-assente {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--linea-forte);
  border-radius: var(--raggio-riquadro);
  color: var(--secondario);
  font-size: var(--t-piccolo);
}

/* Trascrizione: una battuta per riga, il tempo a sinistra (un pulsante che
   porta l'audio li', o un testo se l'audio non c'e'), chi parla sopra il
   testo. La battuta che si sta ascoltando ha aria-current="true".
   <ol class="trascrizione">
     <li class="trascrizione-battuta" data-chi="assistente|chiamante|collega">
       <button class="trascrizione-tempo cifre" type="button">00:06</button>
       <div><p class="trascrizione-chi">Marta</p><p class="trascrizione-testo">...</p></div>
     </li>
     <li class="trascrizione-evento">...</li>
   </ol> */
.trascrizione {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trascrizione-battuta,
.trascrizione-evento {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--s-2);
  padding: 6px var(--s-2) 6px 0;
  border-left: 2px solid transparent;
  border-radius: 0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
}

.trascrizione-battuta[aria-current="true"] {
  border-left-color: var(--accento-inchiostro);
  background: var(--accento-tenue);
}

.trascrizione-tempo {
  justify-self: start;
  height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: none;
  color: var(--terziario);
  font-size: var(--t-nota);
  line-height: 20px;
  text-align: left;
}

button.trascrizione-tempo:hover {
  background: var(--superficie-3);
  color: var(--inchiostro);
}

.trascrizione-chi {
  color: var(--secondario);
  font-size: var(--t-nota);
  font-weight: 600;
  line-height: 20px;
}

.trascrizione-battuta[data-chi="assistente"] .trascrizione-chi {
  color: var(--accento-inchiostro);
}

.trascrizione-battuta[data-chi="chiamante"] .trascrizione-chi {
  color: var(--inchiostro);
}

.trascrizione-testo {
  max-width: 72ch;
  font-size: var(--t-testo);
  line-height: 1.5;
}

.trascrizione-evento {
  color: var(--secondario);
  font-size: var(--t-nota);
}

.trascrizione-evento > :last-child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 1px;
  background: var(--linea-campo);
  vertical-align: 1px;
}


/* ---------------------------------------------------------------------------
   Servizio collegato (Google Calendar nelle Impostazioni del portale): il
   logo, il nome, con chi e' collegato, lo stato, le azioni.
   <div class="collegamento">
     <span class="collegamento-logo"><img src="/marchi/google-calendar.svg" alt=""></span>
     <div class="collegamento-corpo"><p class="collegamento-nome">Google Calendar</p>
       <p class="nota">Collegato come studio@gmail.com, calendario «Studio»</p></div>
     <span class="pillola pillola-ok">Collegato</span>
     <div class="azioni">...</div>
   </div>
   ------------------------------------------------------------------------ */

.collegamento {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.collegamento-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: #FFFFFF;
}

.collegamento-logo > img {
  width: 20px;
  height: 20px;
}

.collegamento-corpo {
  min-width: 0;
}

.collegamento-nome {
  font-weight: 600;
}

@media (max-width: 679px) {
  .collegamento {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .collegamento > .pillola,
  .collegamento > .azioni {
    grid-column: 2;
    justify-self: start;
  }
}

/* «Accedi con Google»: i colori del pulsante di Google (chiaro e scuro),
   il logo «G» a colori a sinistra, 40 px. Il logo e' un file del core,
   mai caricato da Google. <a class="pulsante pulsante-google" href="...">
   <img src="/marchi/google-g.svg" alt="">Accedi con Google</a> */
.pulsante-google {
  --p-fondo: #FFFFFF;
  --p-testo: #1F1F1F;
  --p-bordo: #747775;
  --p-sopra: #F2F2F2;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--raggio);
  font-weight: 500;
  box-shadow: none;
}

.pulsante-google > img {
  width: 18px;
  height: 18px;
}

[data-theme="dark"] .pulsante-google {
  --p-fondo: #131314;
  --p-testo: #E3E3E3;
  --p-bordo: #8E918F;
  --p-sopra: #1F1F20;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pulsante-google {
    --p-fondo: #131314;
    --p-testo: #E3E3E3;
    --p-bordo: #8E918F;
    --p-sopra: #1F1F20;
  }
}


/* ---------------------------------------------------------------------------
   Schermi stretti
   ------------------------------------------------------------------------ */

@media (max-width: 959px) {
  .guscio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "testata"
      "pagina"
      "piede";
    padding-bottom: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
  }

  .lato {
    display: none;
  }

  .testata-marchio {
    flex: 0 1 auto;
  }

  .pagina {
    padding: var(--s-5) var(--s-6) var(--s-8);
  }

  .piede-app {
    padding: var(--s-3) var(--s-6);
  }

  .schede-telefono {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--altezza-schede) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--linea);
    background: var(--superficie);
  }

  .barra-pubblica {
    bottom: calc(var(--altezza-schede) + env(safe-area-inset-bottom) + var(--s-3));
  }

  /* Larghe quanto il contenuto: stessi margini della pagina. */
  .notifiche {
    left: var(--s-6);
    right: var(--s-6);
    bottom: max(calc(var(--altezza-schede) + env(safe-area-inset-bottom) + var(--s-3)), var(--notifiche-sopra-barra, 0px));
    width: auto;
  }
}

@media (max-width: 679px) {
  .testata-app {
    gap: var(--s-2);
    padding: 0 var(--s-2) 0 var(--s-4);
  }

  .linea-stato-testo,
  .linea-stato-dettaglio,
  .aggiornato,
  .utente-nome {
    display: none;
  }

  .linea-stato-breve {
    display: inline;
  }

  .pagina {
    padding: var(--s-4) var(--s-4) var(--s-7);
  }

  .notifiche {
    left: var(--s-4);
    right: var(--s-4);
  }

  .piede-app {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--s-3) var(--s-4);
  }

  .piede-app-tecnologia {
    margin-left: 0;
  }

  /* Il titolo resta a 20 px; le azioni vanno sotto, a sinistra. */
  .intestazione-pagina {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--s-3);
  }

  .chiave-valore {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .chiave-valore dd + dt {
    margin-top: var(--s-2);
  }

  .riquadro-testata,
  .riquadro-corpo,
  .riquadro-piede,
  .elenco-voce,
  .da-fare-voce {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }

  .da-fare-voce {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .da-fare-voce > :last-child:not(.da-fare-segno):not(:nth-child(2)) {
    grid-column: 2;
    justify-self: start;
  }

  .misura {
    padding: var(--s-2) var(--s-3);
  }

  .schede {
    gap: var(--s-4);
  }

  /* I filtri rapidi su una riga che scorre, come le schede: tre righe di
     filtri spingevano l'elenco sotto la piega. */
  .filtri-rapidi {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--s-4));
    padding: 2px var(--s-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtri-rapidi::-webkit-scrollbar {
    display: none;
  }

  .filtro-rapido {
    flex: none;
  }

  /* Barra dei filtri: la ricerca su tutta la riga, il resto sotto. */
  .barra-filtri-cerca {
    flex-basis: 100%;
    max-width: none;
  }

  .barra-filtri > .selettore {
    flex: 1 1 140px;
  }

  .barra-pubblica {
    padding: var(--s-2);
  }

  .barra-pubblica-azioni {
    justify-content: flex-end;
    width: 100%;
  }

  .barra-pubblica-azioni > .pulsante {
    padding: 0 12px;
  }

  .vuoto {
    padding: var(--s-4) var(--s-3);
  }

  .finestra-lato {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .finestra-lato[open] {
    animation-name: lato-entra;
  }

  .finestra-lato > .finestra-corpo,
  .finestra-lato > form > .finestra-corpo {
    padding: var(--s-3) var(--s-4) var(--s-5);
  }

  .finestra-lato > .finestra-azioni {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .finestra-lato > .finestra-azioni > .pulsante {
    width: auto;
    flex: 1 1 auto;
  }

  .lettore-barra {
    flex-basis: 100%;
    order: 5;
  }

  /* Il tempo («00:00» con il suo spazio interno) e' largo 52 px: la colonna
     non si stringe, e fra il tempo e il nome restano 4 px anche al tocco. */
  .trascrizione-battuta,
  .trascrizione-evento {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s-1);
  }
}

@media (max-width: 419px) {
  .testata-marchio .marchio-nome {
    display: none;
  }
}

/* Tocco: interruttori, spunte e scelte piu' grandi da prendere col dito. */
@media (max-width: 679px), (pointer: coarse) {
  .interruttore-controllo {
    width: 40px;
    height: 24px;
  }

  .interruttore-controllo::before {
    width: 18px;
    height: 18px;
  }

  .interruttore-controllo:checked::before {
    transform: translateX(16px);
  }

  .spunta,
  .scelta {
    width: 20px;
    height: 20px;
  }

  .spunta::before {
    width: 14px;
    height: 14px;
  }

  .opzione > .spunta,
  .opzione > .scelta {
    margin-top: 0;
  }

  .menu-lato-voce {
    min-height: 40px;
  }

  .tabella-a-voci tr,
  .elenco-voce {
    min-height: 48px;
  }
}


/* ---------------------------------------------------------------------------
   Movimento ridotto e colori forzati
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .segnaposto {
    background: var(--incavo);
  }
}

@media (forced-colors: active) {
  .spia,
  .pillola::before {
    forced-color-adjust: none;
  }

  /* Senza fondi le etichette di stato e la voce aperta del menu restano
     riconoscibili dal bordo. */
  .pillola,
  .filtro-rapido[aria-pressed="true"] {
    border-color: CanvasText;
  }

  .menu-lato-voce[aria-current="page"] {
    outline: 1px solid CanvasText;
  }

  .trascrizione-battuta[aria-current="true"] {
    border-left-color: Highlight;
  }

  .interruttore-controllo,
  .spunta,
  .scelta {
    border-color: ButtonText;
  }

  .interruttore-controllo:checked,
  .spunta:checked,
  .scelta:checked {
    background: Highlight;
  }

  .scheda[aria-selected="true"]::after,
  .scheda[aria-current="page"]::after,
  .scheda-telefono[aria-current="page"]::before {
    background: Highlight;
  }
}