/* ============================================================================
   haline.css — strato base dello standard di comfort Ha-Line  (v1.0.0)
   ----------------------------------------------------------------------------
   Cos'è: token + componenti + comportamenti visivi comuni a tutte le app.
   Cosa NON è: il tema di un'app. Un'app sovrascrive SOLO le variabili `--hl-*`
   in un foglio proprio caricato dopo questo (vedi MANUALE_COMFORT.md §2.4).

   Come si include (vanilla):
     <link rel="stylesheet" href="/haline/haline.css">   <!-- prima del css dell'app -->
     <script src="/haline/haline.js"></script>            <!-- in <head>, senza defer:
                                                              applica la sidebar prima del primo render -->

   Regole che questo file dà per scontate (manuale §1):
     · transizioni solo su colore / bordo / ombra / opacità / transform, 120-200 ms;
     · fuoco visibile ovunque: mai `outline: 0` senza sostituto;
     · contrasto testo ≥ 4,5:1 (i valori sono misurati, vedi tabella in §2 del manuale);
     · niente font remoti, niente CDN: stack di sistema + Georgia per i titoli;
     · leggibilità (manuale §4b): scala 12·13·14·16·18·22·28, corpo 1,5 / titoli 1,2,
       testo lungo in `.prosa` (70ch), cifre tabulari, niente maiuscolo né spaziatura
       tra lettere (eccezione: il marchio), 12 px solo per `.etichetta-secondaria`.

   Ambito: questo file e haline.js sono SOLO frontend. Lo standard non chiede né
   permette modifiche a backend, API, database o autenticazione (manuale §0.1).

   Origine dei pattern: AUDIT_RAFFINATE.md (HRM2, Cassandra, Case Online),
   AUDIT_GREZZE.md (Computa, HRM1, Ombrello), AUDIT_RESTO.md (Walkie, Prisma, Flusso…).
   ============================================================================ */


/* ============================================================================
   1. TOKEN
   Nomi di RUOLO in italiano (come Case Online staff.css), con la scala di tinte
   sotto per derivarli (come HRM2). Il tema di un'app ridefinisce i ruoli, mai
   i componenti.
   ============================================================================ */
:root {
  /* --- Scala del primario, calcolata da #6BA3BE (azzurro del logo).
         Contrasto su bianco: 50 1,08 · 100 1,16 · 200 1,36 · 300 1,73 · 400 2,18
         · 500 2,76 · 600 5,13 · 700 6,55 · 800 8,90 · 900 12,61.
         Regola: 500 è TINTA (sfondi, bordi, accenti decorativi), mai testo e mai
         pulsante pieno con testo bianco (2,76:1 non basta). Per testo e pulsanti
         pieni si usa 600 o più scuro. --- */
  --hl-primario-50:  #F3F7FA;
  --hl-primario-100: #E6F0F4;
  --hl-primario-200: #CDE0E9;
  --hl-primario-300: #AACADA;
  --hl-primario-400: #8AB6CC;
  --hl-primario-500: #6BA3BE;
  --hl-primario-600: #3F748D;
  --hl-primario-700: #346379;
  --hl-primario-800: #2C4E5E;
  --hl-primario-900: #203641;

  /* --- Ruoli: è QUI che un tema per app interviene --- */
  --hl-primario:        var(--hl-primario-600);   /* testo-azione, pulsante primario, link forte: 5,13:1 su bianco */
  --hl-primario-hover:  var(--hl-primario-700);   /* pulsante primario al passaggio */
  --hl-primario-tinta:  var(--hl-primario-500);   /* accenti decorativi: barra attiva, bordo, marchio */
  --hl-primario-velo:   var(--hl-primario-100);   /* sfondo tenue di una voce attiva o di un badge primario */
  --hl-su-primario:     #FFFFFF;                  /* testo sopra il primario pieno */

  --hl-fondo:        #FCFCFB;   /* fondo pagina (brand) */
  --hl-superficie:   #FFFFFF;   /* schede, tabelle, campi */
  --hl-superficie-2: #F3F6F8;   /* velo: hover riga, intestazione tabella, pulsante secondario al passaggio */
  --hl-testo:        #1F2A33;   /* inchiostro: 14,6:1 */
  --hl-testo-2:      #5C6B75;   /* tenue (etichette, aiuto, intestazioni): 5,50:1 su bianco, 5,07 su velo */
  --hl-testo-3:      #8A959E;   /* SOLO decorativo (segnaposto, icone spente, disabilitato): 3,06:1 — mai per testo che serve */
  --hl-bordo:        #DDE3E7;   /* filetti, bordi di scheda */
  --hl-bordo-forte:  #CBD3D9;   /* bordi dei campi e dei pulsanti secondari */
  --hl-scuro:        #2F4858;   /* acciaio scuro: sidebar, toast, popover (da Walkie --dark) */
  --hl-scuro-testo:  #FFFFFF;   /* 9,59:1 su --hl-scuro */
  --hl-scuro-testo-2:#B7C6D0;   /* 5,48:1 su --hl-scuro */
  --hl-scuro-velo:   rgba(255,255,255,.10);

  /* Semantici: ogni coppia colore/tinta è verificata ≥ 4,5:1 (testo sulla sua tinta) */
  --hl-ok:           #1F7A45;  --hl-ok-tinta:     #E3F3E8;   /* 5,35 su bianco · 4,65 sulla tinta */
  --hl-avviso:       #946200;  --hl-avviso-tinta: #FBF0D4;   /* 5,24 · 4,62 */
  --hl-errore:       #B42318;  --hl-errore-tinta: #FBE9E7;   /* 6,57 · 5,61 */
  --hl-info:         #185FA5;  --hl-info-tinta:   #E3EEF8;   /* 6,52 · 5,55 */

  --hl-anello:       var(--hl-primario-600);   /* anello di fuoco: 5,13:1, visibile anche sul velo */
  --hl-selezione:    var(--hl-primario-200);

  /* --- Tipografia: sistema per il lavoro, Georgia per i titoli (brand) --- */
  --hl-font:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  --hl-font-titoli: Georgia, "Times New Roman", serif;
  --hl-font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Scala tipografica (manuale §4b): 7 gradini, e basta. Niente mezzi pixel. */
  --hl-t-xs:   12px;   /* SOLO etichette secondarie: badge, intestazioni di tabella, aiuto, .etichetta-secondaria */
  --hl-t-sm:   13px;   /* minimo per testo operativo: note, metadati, pulsanti piccoli, toast */
  --hl-t-base: 14px;   /* corpo: testo, campi, pulsanti, celle */
  --hl-t-md:   16px;   /* titoli di scheda (sans 600), h4, pulsanti grandi */
  --hl-t-lg:   18px;   /* h3: titolo di gruppo */
  --hl-t-xl:   22px;   /* h2: titolo di sezione, titolo di dialogo, stato vuoto */
  --hl-t-2xl:  28px;   /* h1: titolo di pagina; numeri KPI */
  --hl-interlinea: 1.5;         /* corpo: 1,45-1,6 */
  --hl-interlinea-titoli: 1.2;  /* titoli */

  /* --- Spazi 4 / 8 / 12 / 16 / 24 / 32 / 48 --- */
  --hl-s-1: 4px;  --hl-s-2: 8px;  --hl-s-3: 12px; --hl-s-4: 16px;
  --hl-s-5: 24px; --hl-s-6: 32px; --hl-s-7: 48px;

  /* --- Raggi 6 / 10 / 14 (controlli / schede / dialoghi) --- */
  --hl-r-sm: 6px; --hl-r-md: 10px; --hl-r-lg: 14px; --hl-r-pillola: 999px;

  /* --- Due livelli di ombra, non quaranta (Computa ne ha 40 diversi) --- */
  --hl-ombra-1: 0 1px 2px rgba(31,42,51,.06), 0 1px 3px rgba(31,42,51,.04);
  --hl-ombra-2: 0 8px 24px rgba(31,42,51,.12), 0 2px 6px rgba(31,42,51,.06);

  /* --- Movimento: 4 durate, 2 curve. Entrata morbida, uscita rapida. --- */
  --hl-d-1: 120ms;  /* hover di colore/bordo */
  --hl-d-2: 160ms;  /* smorzamento, toast, sidebar */
  --hl-d-3: 200ms;  /* dialoghi */
  --hl-d-4: 300ms;  /* spostamenti piccoli e rari */
  --hl-ease-in:  cubic-bezier(.2,.8,.2,1);   /* entrata */
  --hl-ease-out: cubic-bezier(.4,0,1,1);     /* uscita */

  /* --- Layout --- */
  --hl-sidebar-l:        240px;
  --hl-sidebar-l-chiusa: 64px;
  --hl-header-h:         56px;
  --hl-contenuto-max:    1200px;
  --hl-riga-h:           40px;   /* righe di tabella */
  --hl-controllo-h:      36px;   /* pulsanti e campi, taglia media */
  --hl-controllo-h-sm:   30px;
  --hl-controllo-h-lg:   44px;

  --hl-z-header: 90; --hl-z-sidebar: 100; --hl-z-dialogo: 500; --hl-z-toast: 600;

  color-scheme: light;
}

/* Tema scuro: predisposto, non obbligatorio. Si attiva con <html data-tema="scuro">.
   Ridefinisce solo i ruoli: i componenti non cambiano. Contrasti: testo 13,3:1,
   tenue 7,9:1, primario-400 come azione 7,2:1 su #1C242B. */
[data-tema="scuro"] {
  --hl-fondo:        #151B20;
  --hl-superficie:   #1C242B;
  --hl-superficie-2: #232D35;
  --hl-testo:        #E8EDF0;
  --hl-testo-2:      #AEB9C2;
  --hl-testo-3:      #6F7E89;
  --hl-bordo:        #2A3640;
  --hl-bordo-forte:  #364550;
  --hl-primario:       var(--hl-primario-400);
  --hl-primario-hover: var(--hl-primario-300);
  --hl-su-primario:    #10181E;
  --hl-primario-velo:  rgba(107,163,190,.16);
  --hl-anello:         var(--hl-primario-400);
  --hl-scuro:          #0F151A;
  --hl-ok:     #5FB37E; --hl-ok-tinta:     rgba(95,179,126,.14);
  --hl-avviso: #E0A63A; --hl-avviso-tinta: rgba(224,166,58,.14);
  --hl-errore: #F0867A; --hl-errore-tinta: rgba(240,134,122,.14);
  --hl-info:   #6FAEE8; --hl-info-tinta:   rgba(111,174,232,.14);
  --hl-ombra-1: 0 1px 2px rgba(0,0,0,.4);
  --hl-ombra-2: 0 8px 24px rgba(0,0,0,.5);
  color-scheme: dark;
}


/* ============================================================================
   2. RESET LEGGERO E TIPOGRAFIA
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--hl-t-base)/var(--hl-interlinea) var(--hl-font);
  color: var(--hl-testo);
  background: var(--hl-fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
/* Titoli: interlinea 1,2, peso 600 (mai 700+ sui titoli, mai 800+ da nessuna parte).
   Al massimo tre livelli visibili per vista (manuale §4b.4). */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--hl-interlinea-titoli); font-weight: 600; }
/* Georgia per i titoli di pagina e di sezione (brand, peso 400: il serif porta già
   il peso); i titoli "operativi" (schede, tabelle) restano in sans 600: vedi .scheda-titolo */
h1, h2, h3 { font-family: var(--hl-font-titoli); font-weight: 400; }
h1 { font-size: var(--hl-t-2xl); }
h2 { font-size: var(--hl-t-xl); }
h3 { font-size: var(--hl-t-lg); }
h4 { font-size: var(--hl-t-md); }
p  { margin: 0 0 var(--hl-s-3); }
a  { color: var(--hl-primario); text-decoration: none; text-underline-offset: .18em; transition: color var(--hl-d-1); }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--hl-font-mono); font-size: .92em; }
code { background: var(--hl-superficie-2); padding: 1px 5px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--hl-bordo); margin: var(--hl-s-5) 0; }
::selection { background: var(--hl-selezione); }

/* Il fuoco è visibile OVUNQUE, con una sola regola (Case Online staff.css:21).
   Mai `outline: 0` senza sostituto. I campi lo rimpiazzano con bordo + alone. */
:focus-visible { outline: 2px solid var(--hl-anello); outline-offset: 2px; }

/* ---- Leggibilità del testo (manuale §4b): le utilità, con i contrasti misurati ----
   .testo-tenue  → --hl-testo-2 #5C6B75: 5,50:1 su bianco · 5,36 sul fondo · 5,07 sul velo
                   · 5,11 sulla riga aperta · 5,27 sulla zebra · 4,75 sul velo primario.
                   Nei temi: scuro 7,87 · Flusso 5,45 sulla sabbia · Cassandra 5,81.
                   È l'unico grigio ammesso per testo che serve; --hl-testo-3 (3,06) è decorativo.
   .prosa        → misura 60-80 caratteri: max-width 70ch, interlinea 1,55. Per ogni testo
                   che supera le due righe (intro di pagina, aiuto lungo, note, verbali).
   .numero       → cifre tabulari dove un numero sta in linea col testo o in colonna fuori
                   da una tabella (contatori, KPI, elenchi); in tabella si usa .num (destra).
   .tronca       → una riga con "…"; vuole SEMPRE title="testo intero" e, dentro un flex,
                   min-width: 0 sul figlio. .tronca-righe → n righe (--righe, default 2).
   .etichetta-secondaria → l'unico 12 px libero: didascalie, metadati sotto un valore.
                   (.etichetta è l'etichetta di campo, 13 px / 600: non confonderle.) */
.tenue, .testo-tenue { color: var(--hl-testo-2); }
.piccolo { font-size: var(--hl-t-sm); }
.mono    { font-family: var(--hl-font-mono); font-variant-numeric: tabular-nums; }
.numero  { font-variant-numeric: tabular-nums; }
.num, .testo-destra { text-align: right; font-variant-numeric: tabular-nums; }
.prosa   { max-width: 70ch; line-height: 1.55; }
.prosa > :last-child { margin-bottom: 0; }
.tronca  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tronca-righe { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--righe, 2); overflow: hidden; }
.etichetta-secondaria { font-size: var(--hl-t-xs); color: var(--hl-testo-2); }
.titolo-pagina { font-family: var(--hl-font-titoli); font-weight: 400; font-size: var(--hl-t-2xl); line-height: var(--hl-interlinea-titoli); }
.sottotitolo   { color: var(--hl-testo-2); font-size: var(--hl-t-base); margin-top: var(--hl-s-1); max-width: 70ch; }
/* Il marchio è l'UNICA eccezione a "niente maiuscolo, niente spaziatura tra lettere":
   HA-LINE è una sigla (manuale §4b.6). */
.marchio { font-family: var(--hl-font-titoli); letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }

/* Visibile solo ai lettori di schermo (per etichette di pulsanti-icona) */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nascosto, [hidden] { display: none !important; }


/* ============================================================================
   3. PULSANTI
   Anatomia: <button class="btn btn-primario">. Base = secondario (bianco con
   bordo, come Case Online staff): così un pulsante "dimenticato" non urla.
   Un solo primario per vista. Niente maiuscolo forzato, niente emoji, niente
   width:100% di default (HRM1 dashboard.html:98 → tutti corretti inline).
   Stati: hover (colore) · active (1px giù, Case Online pubblico.css:135)
   · focus-visible (anello) · disabled · in corso (aria-busy).
   Transizioni 120 ms solo su colore/bordo/ombra/opacità/transform.
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hl-s-2);
  height: var(--hl-controllo-h); padding: 0 14px;
  border: 1px solid var(--hl-bordo-forte); border-radius: var(--hl-r-sm);
  background: var(--hl-superficie); color: var(--hl-testo);
  font-size: var(--hl-t-base); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hl-d-1), border-color var(--hl-d-1), color var(--hl-d-1),
              box-shadow var(--hl-d-1), opacity var(--hl-d-1), transform var(--hl-d-1);
}
.btn:hover { background: var(--hl-superficie-2); border-color: color-mix(in srgb, var(--hl-bordo-forte) 70%, var(--hl-testo-2)); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }   /* icona opzionale, a sinistra */

.btn-secondario { /* alias esplicito della base, per chi vuole leggerlo nel markup */ }

.btn-primario { background: var(--hl-primario); border-color: var(--hl-primario); color: var(--hl-su-primario); }
.btn-primario:hover { background: var(--hl-primario-hover); border-color: var(--hl-primario-hover); }

.btn-fantasma { background: transparent; border-color: transparent; color: var(--hl-primario); }
.btn-fantasma:hover { background: var(--hl-primario-velo); border-color: transparent; }

.btn-pericolo { color: var(--hl-errore); }                       /* rosso solo nel testo finché non ci passi sopra */
.btn-pericolo:hover { background: var(--hl-errore-tinta); border-color: color-mix(in srgb, var(--hl-errore) 35%, var(--hl-bordo-forte)); }
.btn-pericolo.btn-pieno { background: var(--hl-errore); border-color: var(--hl-errore); color: #fff; }
.btn-pericolo.btn-pieno:hover { background: color-mix(in srgb, var(--hl-errore) 86%, black); border-color: color-mix(in srgb, var(--hl-errore) 86%, black); }

.btn-icona { width: var(--hl-controllo-h); padding: 0; }           /* quadrato; richiede aria-label o .solo-lettori */
.btn-icona.btn-fantasma { color: var(--hl-testo-2); }
.btn-icona.btn-fantasma:hover { color: var(--hl-testo); background: var(--hl-superficie-2); }

/* Tre taglie. La media è quella di default: 36 px, 14 px. */
.btn-piccolo { height: var(--hl-controllo-h-sm); padding: 0 10px; font-size: var(--hl-t-sm); gap: 6px; }
.btn-piccolo.btn-icona { width: var(--hl-controllo-h-sm); }
.btn-piccolo svg { width: 14px; height: 14px; }
.btn-grande  { height: var(--hl-controllo-h-lg); padding: 0 20px; font-size: var(--hl-t-md); }
.btn-grande.btn-icona { width: var(--hl-controllo-h-lg); }
.btn-largo   { width: 100%; }   /* opt-in esplicito (login, piede di un dialogo stretto) */

/* Stato "in corso": aria-busy="true" + testo che dice cosa sta facendo ("Salvo…").
   HaLine.bottoneInCorso() blocca anche la larghezza così il pulsante non salta.
   Lo spinner è in CSS: funziona anche senza JS. */
.btn[aria-busy="true"] { pointer-events: none; cursor: progress; opacity: .85; transform: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: hl-gira .7s linear infinite;
}
.btn-gruppo { display: inline-flex; gap: var(--hl-s-2); flex-wrap: wrap; align-items: center; }
.btn-gruppo-unito { display: inline-flex; }
.btn-gruppo-unito .btn { border-radius: 0; margin-left: -1px; }
.btn-gruppo-unito .btn:first-child { border-radius: var(--hl-r-sm) 0 0 var(--hl-r-sm); margin-left: 0; }
.btn-gruppo-unito .btn:last-child  { border-radius: 0 var(--hl-r-sm) var(--hl-r-sm) 0; }
.btn-gruppo-unito .btn[aria-pressed="true"] { background: var(--hl-primario-velo); color: var(--hl-primario); border-color: var(--hl-primario-300); position: relative; z-index: 1; }

@keyframes hl-gira { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hl-bordo-forte); border-top-color: var(--hl-primario); animation: hl-gira .7s linear infinite; vertical-align: -3px; }


/* ============================================================================
   4. CAMPI E FORM
   Etichetta sopra, aiuto sotto, errore inline con aria-invalid (modello
   FormRisorsa di Case Online). Fuoco: bordo primario + alone 3 px (Walkie
   walkie.css:55-59). Numeri a destra con cifre tabulari.
   ============================================================================ */
.gruppo-campo { display: flex; flex-direction: column; gap: var(--hl-s-1); min-width: 0; }
.griglia-campi { display: grid; gap: var(--hl-s-4) var(--hl-s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.etichetta { font-size: var(--hl-t-sm); font-weight: 600; color: var(--hl-testo); display: flex; gap: .5em; align-items: baseline; }
.etichetta .obbligatorio { color: var(--hl-errore); font-weight: 400; }
.etichetta .nota { font-weight: 400; color: var(--hl-testo-2); font-size: var(--hl-t-xs); margin-left: auto; }
.aiuto { font-size: var(--hl-t-xs); color: var(--hl-testo-2); }
.errore-campo { font-size: var(--hl-t-xs); color: var(--hl-errore); font-weight: 500; }
.errore-campo:empty { display: none; }

.campo {
  width: 100%; height: var(--hl-controllo-h); padding: 0 10px;
  border: 1px solid var(--hl-bordo-forte); border-radius: var(--hl-r-sm);
  background: var(--hl-superficie); color: var(--hl-testo); font-size: var(--hl-t-base);
  transition: border-color var(--hl-d-1), box-shadow var(--hl-d-1), background-color var(--hl-d-1);
  appearance: none; -webkit-appearance: none; min-width: 0;
}
.campo::placeholder { color: var(--hl-testo-3); }
.campo:hover { border-color: color-mix(in srgb, var(--hl-bordo-forte) 60%, var(--hl-testo-2)); }
.campo:focus { outline: none; border-color: var(--hl-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl-primario) 22%, transparent); }
.campo:disabled, .campo[readonly] { background: var(--hl-superficie-2); color: var(--hl-testo-2); cursor: not-allowed; }
.campo[readonly] { cursor: default; }
.campo[aria-invalid="true"] { border-color: var(--hl-errore); }
.campo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl-errore) 22%, transparent); }
textarea.campo { height: auto; min-height: 88px; padding: 8px 10px; resize: vertical; line-height: var(--hl-interlinea); }
select.campo {
  padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.campo-numero { text-align: right; font-variant-numeric: tabular-nums; }
.campo-piccolo { height: var(--hl-controllo-h-sm); font-size: var(--hl-t-sm); padding: 0 8px; }
.campo-grande  { height: var(--hl-controllo-h-lg); font-size: var(--hl-t-md); padding: 0 12px; }

/* Campo con icona o pulsante dentro (ricerca) */
.campo-con-icona { position: relative; }
.campo-con-icona > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--hl-testo-2); pointer-events: none; }
.campo-con-icona > .campo { padding-left: 32px; }

/* Caselle e radio: native, colorate col primario, bersaglio comodo */
.scelta { display: inline-flex; align-items: center; gap: var(--hl-s-2); font-size: var(--hl-t-base); cursor: pointer; min-height: 28px; }
.scelta input[type="checkbox"], .scelta input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--hl-primario); cursor: pointer; }
.scelta input:disabled, .scelta input:disabled + * { cursor: not-allowed; opacity: .6; }

/* Interruttore: <label class="interruttore"><input type="checkbox" role="switch"><span></span> Testo</label> */
.interruttore { display: inline-flex; align-items: center; gap: var(--hl-s-2); cursor: pointer; font-size: var(--hl-t-base); }
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruttore span { width: 36px; height: 20px; border-radius: 999px; background: var(--hl-bordo-forte); position: relative; flex: none; transition: background-color var(--hl-d-2); }
.interruttore span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--hl-ombra-1); transition: transform var(--hl-d-2) var(--hl-ease-in); }
.interruttore input:checked + span { background: var(--hl-primario); }
.interruttore input:checked + span::after { transform: translateX(16px); }
.interruttore input:focus-visible + span { outline: 2px solid var(--hl-anello); outline-offset: 2px; }

/* Barra delle azioni in fondo a un form lungo: "N campi modificati, non salvati" + Salva */
.barra-modifiche { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--hl-s-3); padding: var(--hl-s-3) var(--hl-s-4); margin-top: var(--hl-s-5);
  background: var(--hl-superficie); border: 1px solid var(--hl-bordo); border-radius: var(--hl-r-md); box-shadow: var(--hl-ombra-2); }
.barra-modifiche .spazio { flex: 1; }


/* ============================================================================
   5. TABELLE, SCHEDE, BADGE, AVVISI, VUOTO, SKELETON
   ============================================================================ */
.contenitore-tabella { overflow: auto; border: 1px solid var(--hl-bordo); border-radius: var(--hl-r-md); background: var(--hl-superficie); }
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hl-t-base); }
/* Intestazioni: 12 px / 600, tenui (5,07:1 sul velo), in minuscolo: niente maiuscolo
   forzato né spaziatura tra lettere (manuale §4b.6; Ombrello ombrello.css:726-735 le
   ha a 0,7 rem maiuscole a 1,5-2,7:1). Testo a sinistra, numeri a destra con .num. */
.tabella th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: var(--hl-t-xs); font-weight: 600;
  color: var(--hl-testo-2); background: var(--hl-superficie-2); border-bottom: 1px solid var(--hl-bordo);
  padding: 0 var(--hl-s-3); height: 36px; white-space: nowrap;
}
.tabella td { padding: 0 var(--hl-s-3); height: var(--hl-riga-h); border-bottom: 1px solid var(--hl-bordo); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr { transition: background-color var(--hl-d-1); }
.tabella tbody tr:hover > td { background: var(--hl-superficie-2); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella th.num { text-align: right; }
.tabella tr.cliccabile { cursor: pointer; }            /* la manina SOLO dove c'è un'azione (Computa computa.css:77 la mette ovunque) */
.tabella tr.selezionata > td { background: var(--hl-primario-velo); }
.tabella tr.aperta > td { background: var(--hl-primario-50); border-bottom-color: transparent; }
.tabella tr.tabella-dettaglio > td { background: var(--hl-primario-50); padding: var(--hl-s-3) var(--hl-s-4); height: auto; }
.tabella tr.totale > td { font-weight: 600; border-top: 2px solid var(--hl-bordo-forte); }
.tabella tr.spenta > td { color: var(--hl-testo-2); }
.tabella-compatta td { height: 32px; }
.tabella-compatta th { height: 30px; }
/* Zebra: SOLO se le righe sono più di 8 (manuale §4b.11); sotto, i filetti bastano.
   Più chiara del velo di hover (hover, selezione e riga aperta vincono: :where azzera la specificità).
   Testo-2 sulla zebra #F9FAFC: 5,27:1. */
.tabella-zebra tbody tr:where(:nth-child(even)) > td { background: color-mix(in srgb, var(--hl-superficie-2) 50%, var(--hl-superficie)); }
/* Colonna ordinabile: <th aria-sort="ascending"><button>…</button></th> */
.tabella th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tabella th[aria-sort] button::after { content: "↕"; opacity: .4; font-size: var(--hl-t-xs); }
.tabella th[aria-sort="ascending"] button::after  { content: "↑"; opacity: 1; }
.tabella th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.tabella th.solo-icona { width: 1px; }
.tabella td .btn-gruppo { justify-content: flex-end; }
.tabella .colonna-fissa { position: sticky; left: 0; background: inherit; z-index: 1; box-shadow: 1px 0 0 var(--hl-bordo); }
.tabella tbody tr .colonna-fissa { background: var(--hl-superficie); }

/* Scheda (card) */
.scheda { background: var(--hl-superficie); border: 1px solid var(--hl-bordo); border-radius: var(--hl-r-md); padding: var(--hl-s-4) var(--hl-s-5); box-shadow: var(--hl-ombra-1); min-width: 0; }
.scheda-testa { display: flex; align-items: center; gap: var(--hl-s-3); margin-bottom: var(--hl-s-3); }
.scheda-testa .spazio { flex: 1; }
.scheda-titolo { font-size: var(--hl-t-md); font-weight: 600; }
.scheda-compatta { padding: var(--hl-s-3) var(--hl-s-4); }
.scheda-cliccabile { cursor: pointer; transition: border-color var(--hl-d-1), box-shadow var(--hl-d-1), transform var(--hl-d-1); }
.scheda-cliccabile:hover { border-color: var(--hl-primario-300); box-shadow: var(--hl-ombra-2); }
.scheda-cliccabile:active { transform: translateY(1px); }
.griglia-schede { display: grid; gap: var(--hl-s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kpi-valore { font-size: var(--hl-t-2xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--hl-interlinea-titoli); }
.kpi-etichetta { font-size: var(--hl-t-xs); color: var(--hl-testo-2); font-weight: 600; margin-bottom: var(--hl-s-1); }   /* in minuscolo: "Occupazione", non "OCCUPAZIONE" */
.kpi-delta { font-size: var(--hl-t-sm); font-variant-numeric: tabular-nums; }
.kpi-delta.su  { color: var(--hl-ok); }
.kpi-delta.giu { color: var(--hl-errore); }

/* Badge e punto di stato: sempre testo + colore, mai solo colore */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--hl-r-pillola);
  font-size: var(--hl-t-xs); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--hl-superficie-2); color: var(--hl-testo-2); }
.badge-primario { background: var(--hl-primario-velo); color: var(--hl-primario-700); }
.badge-ok     { background: var(--hl-ok-tinta);     color: var(--hl-ok); }
.badge-avviso { background: var(--hl-avviso-tinta); color: var(--hl-avviso); }
.badge-errore { background: var(--hl-errore-tinta); color: var(--hl-errore); }
.badge-info   { background: var(--hl-info-tinta);   color: var(--hl-info); }
.badge-scuro  { background: var(--hl-scuro); color: var(--hl-scuro-testo); }
.badge-contorno { background: transparent; border: 1px solid var(--hl-bordo-forte); }
.badge:empty { display: none; }   /* contatori a zero spariscono (Walkie .count:empty) */
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hl-testo-3); vertical-align: middle; margin-right: 6px; }
.punto-ok { background: var(--hl-ok); }  .punto-avviso { background: var(--hl-avviso); }  .punto-errore { background: var(--hl-errore); }  .punto-info { background: var(--hl-info); }

/* Avviso in pagina (non un toast: resta finché ha senso) */
.avviso { display: flex; gap: var(--hl-s-3); align-items: flex-start; padding: var(--hl-s-3) var(--hl-s-4); border: 1px solid; border-radius: var(--hl-r-sm); font-size: var(--hl-t-base); }
.avviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.avviso-info   { background: var(--hl-info-tinta);   border-color: color-mix(in srgb, var(--hl-info) 30%, transparent);   color: var(--hl-info); }
.avviso-ok     { background: var(--hl-ok-tinta);     border-color: color-mix(in srgb, var(--hl-ok) 30%, transparent);     color: var(--hl-ok); }
.avviso-avviso { background: var(--hl-avviso-tinta); border-color: color-mix(in srgb, var(--hl-avviso) 30%, transparent); color: var(--hl-avviso); }
.avviso-errore { background: var(--hl-errore-tinta); border-color: color-mix(in srgb, var(--hl-errore) 30%, transparent); color: var(--hl-errore); }
.avviso .btn { margin-left: auto; }

/* Stato vuoto: una frase e un'azione (TabellaRisorsa.tsx:162-172, Flusso home.js:171) */
.vuoto { text-align: center; padding: var(--hl-s-7) var(--hl-s-5); color: var(--hl-testo-2); }
.vuoto-titolo { font-family: var(--hl-font-titoli); font-size: var(--hl-t-xl); color: var(--hl-testo); margin-bottom: var(--hl-s-2); }
.vuoto-testo { max-width: 42ch; margin: 0 auto var(--hl-s-4); }
.vuoto svg { width: 40px; height: 40px; margin: 0 auto var(--hl-s-3); color: var(--hl-testo-3); }
.vuoto-compatto { padding: var(--hl-s-5) var(--hl-s-4); }                 /* dentro una scheda o un pannello stretto */
.vuoto-compatto .vuoto-titolo { font-size: var(--hl-t-lg); }

/* Skeleton: SOLO al primo caricamento. Dopo, il contenuto vecchio resta e si smorza. */
.skeleton { display: block; background: linear-gradient(90deg, var(--hl-superficie-2) 25%, color-mix(in srgb, var(--hl-superficie-2) 50%, var(--hl-superficie)) 50%, var(--hl-superficie-2) 75%);
  background-size: 200% 100%; border-radius: var(--hl-r-sm); animation: hl-scorre 1.4s ease-in-out infinite; min-height: 1em; }
.skeleton-riga { height: 14px; margin: 10px 0; }
.skeleton-riga.corta { width: 60%; }
.skeleton-blocco { height: 96px; }
.skeleton-cerchio { width: 36px; height: 36px; border-radius: 50%; }
@keyframes hl-scorre { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Smorzamento durante un aggiornamento: il contenuto vecchio resta a video
   (Case Online TabellaRisorsa.tsx:175 opacity-60; HRM2 "silenzioso").
   HaLine.carica() mette aria-busy="true" sul contenitore. */
.aggiornabile { transition: opacity var(--hl-d-2); }
.aggiornabile[aria-busy="true"] { opacity: .6; }   /* resta cliccabile: il dato vecchio è ancora valido */

/* Riga appena arrivata: solo ingresso, mai in idle (Cassandra HoldingsTable con key stabile) */
.nuovo { animation: hl-entra var(--hl-d-4) var(--hl-ease-in); }
@keyframes hl-entra { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }


/* ============================================================================
   6. TOAST
   Un solo contenitore (HaLine lo crea), basso a destra, massimo 3, 4 s / 8 s
   per gli errori, entrata e uscita 160 ms. Scuro su chiaro così si stacca dal
   fondo, bordo colorato per il tipo (sempre testo + colore).
   ============================================================================ */
.toast-contenitore { position: fixed; right: var(--hl-s-5); bottom: var(--hl-s-5); z-index: var(--hl-z-toast);
  display: flex; flex-direction: column; gap: var(--hl-s-2); width: min(380px, calc(100vw - 2 * var(--hl-s-5))); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--hl-s-3); padding: 11px 12px 11px 14px;
  background: var(--hl-scuro); color: var(--hl-scuro-testo); border-radius: var(--hl-r-md); box-shadow: var(--hl-ombra-2);
  font-size: var(--hl-t-sm); line-height: 1.45; border-left: 3px solid var(--hl-primario-tinta);
  animation: hl-toast-entra var(--hl-d-2) var(--hl-ease-in); }
.toast.esce { animation: hl-toast-esce var(--hl-d-2) var(--hl-ease-out) forwards; }
.toast-ok     { border-left-color: #5FB37E; }
.toast-errore { border-left-color: #F0867A; }
.toast-avviso { border-left-color: #E0A63A; }
.toast-info   { border-left-color: #6FAEE8; }
.toast-testo { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }
.toast-azione { all: unset; cursor: pointer; font-weight: 600; color: var(--hl-primario-300); padding: 0 4px; border-radius: 4px; white-space: nowrap; }
.toast-azione:hover { text-decoration: underline; }
.toast-azione:focus-visible { outline: 2px solid var(--hl-primario-300); outline-offset: 2px; }
.toast-chiudi { all: unset; cursor: pointer; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--hl-scuro-testo-2); flex: none; font-size: var(--hl-t-md); line-height: 1; }
.toast-chiudi:hover { background: var(--hl-scuro-velo); color: var(--hl-scuro-testo); }
.toast-chiudi:focus-visible { outline: 2px solid var(--hl-primario-300); }
@keyframes hl-toast-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hl-toast-esce  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }


/* ============================================================================
   7. DIALOGO
   <dialog class="dialogo"> nativo (Esc, focus trap, ::backdrop, inert dietro
   gratis: Prisma comune.js:422, Case Online Modale.tsx) + fade/zoom 150-200 ms
   di Cassandra dialog.tsx:39. Mai alert/confirm/prompt: HaLine.conferma/chiedi/avvisa.
   ============================================================================ */
dialog.dialogo {
  width: min(480px, calc(100vw - 2 * var(--hl-s-4))); max-height: calc(100vh - 2 * var(--hl-s-5));
  padding: 0; margin: auto; border: 1px solid var(--hl-bordo); border-radius: var(--hl-r-lg);
  background: var(--hl-superficie); color: var(--hl-testo); box-shadow: var(--hl-ombra-2);
  display: flex; flex-direction: column; overflow: hidden;
}
dialog.dialogo:not([open]) { display: none; }
dialog.dialogo[open] { animation: hl-dialogo-entra var(--hl-d-3) var(--hl-ease-in); }
dialog.dialogo[open]::backdrop { background: rgba(31,42,51,.45); animation: hl-fade var(--hl-d-3) var(--hl-ease-in); }
dialog.dialogo.chiude { animation: hl-dialogo-esce var(--hl-d-2) var(--hl-ease-out) forwards; }
dialog.dialogo.chiude::backdrop { animation: hl-fade-via var(--hl-d-2) var(--hl-ease-out) forwards; }
dialog.dialogo-larga { width: min(840px, calc(100vw - 2 * var(--hl-s-4))); }
.dialogo-testa { display: flex; align-items: center; gap: var(--hl-s-3); padding: var(--hl-s-4) var(--hl-s-5) var(--hl-s-3); }
.dialogo-titolo { font-family: var(--hl-font-titoli); font-weight: 400; font-size: var(--hl-t-xl); flex: 1; line-height: var(--hl-interlinea-titoli); }
.dialogo-corpo { padding: 0 var(--hl-s-5) var(--hl-s-4); overflow: auto; color: var(--hl-testo); }
.dialogo-corpo p:last-child { margin-bottom: 0; }
.dialogo-piede { display: flex; justify-content: flex-end; gap: var(--hl-s-2); padding: var(--hl-s-3) var(--hl-s-5) var(--hl-s-4); border-top: 1px solid var(--hl-bordo); background: var(--hl-superficie); }
.dialogo-piede .a-sinistra { margin-right: auto; }
@keyframes hl-dialogo-entra { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hl-dialogo-esce  { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
@keyframes hl-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes hl-fade-via { from { opacity: 1; } to { opacity: 0; } }


/* ============================================================================
   8. LAYOUT: GUSCIO, SIDEBAR, HEADER, CONTENUTO, TAB, BRICIOLE
   Sidebar 240 → 64 px (HRM2 app.css:47-65), stato in localStorage applicato
   PRIMA del primo render tramite <html data-sidebar="chiusa"> (haline.js in head).
   Sotto 900 px la sidebar esce dallo schermo e si apre dal pulsante dell'header.
   ============================================================================ */
.guscio { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--hl-z-sidebar);
  width: var(--hl-sidebar-l); display: flex; flex-direction: column;
  background: var(--hl-scuro); color: var(--hl-scuro-testo-2);
  transition: width var(--hl-d-2) var(--hl-ease-in), transform var(--hl-d-3) var(--hl-ease-in);
  overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--hl-scuro-velo) transparent;
}
html[data-sidebar="chiusa"] .sidebar { width: var(--hl-sidebar-l-chiusa); }
/* .sidebar-marchio è il wordmark (sigla): la spaziatura tra lettere è ammessa solo qui e in .marchio */
.sidebar-marchio { height: var(--hl-header-h); display: flex; align-items: center; gap: var(--hl-s-3); padding: 0 var(--hl-s-4); color: var(--hl-scuro-testo); font-family: var(--hl-font-titoli); font-size: var(--hl-t-lg); letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid var(--hl-scuro-velo); flex: none; }
.sidebar-marchio .logo { width: 28px; height: 28px; border-radius: 7px; background: var(--hl-primario-tinta); flex: none; }
.sidebar-nav { padding: var(--hl-s-2); flex: 1; }
/* Gruppo: 12 px in minuscolo ("Progetti"), colore pieno: con opacity .8 scendeva a 4,15:1, così è 5,48 */
.sidebar-gruppo { font-size: var(--hl-t-xs); font-weight: 600; color: var(--hl-scuro-testo-2); padding: var(--hl-s-4) var(--hl-s-3) var(--hl-s-1); white-space: nowrap; }
.sidebar-voce {
  display: flex; align-items: center; gap: var(--hl-s-3); height: 38px; padding: 0 var(--hl-s-3); margin: 2px 0;
  border-radius: var(--hl-r-sm); color: inherit; text-decoration: none; font-size: var(--hl-t-base); font-weight: 500; white-space: nowrap;
  transition: background-color var(--hl-d-1), color var(--hl-d-1); position: relative; cursor: pointer; border: 0; background: none; width: 100%; text-align: left;
}
.sidebar-voce:hover { background: var(--hl-scuro-velo); color: var(--hl-scuro-testo); text-decoration: none; }
.sidebar-voce[aria-current="page"] { background: var(--hl-scuro-velo); color: var(--hl-scuro-testo); box-shadow: inset 3px 0 0 var(--hl-primario-tinta); }
.sidebar-voce svg { width: 18px; height: 18px; flex: none; }
.sidebar-voce .badge { margin-left: auto; }
.sidebar-voce:focus-visible { outline-color: var(--hl-primario-300); outline-offset: -2px; }
html[data-sidebar="chiusa"] .sidebar-voce { justify-content: center; padding: 0; }
html[data-sidebar="chiusa"] .sidebar-voce-testo, html[data-sidebar="chiusa"] .sidebar-gruppo, html[data-sidebar="chiusa"] .sidebar-marchio-testo, html[data-sidebar="chiusa"] .sidebar-voce .badge { display: none; }
html[data-sidebar="chiusa"] .sidebar-marchio { justify-content: center; padding: 0; }
.sidebar-piede { padding: var(--hl-s-2); border-top: 1px solid var(--hl-scuro-velo); flex: none; }
.sidebar-interruttore { color: var(--hl-scuro-testo-2); }
.sidebar-interruttore:hover { color: var(--hl-scuro-testo); background: var(--hl-scuro-velo); }

.principale { flex: 1; min-width: 0; margin-left: var(--hl-sidebar-l); transition: margin-left var(--hl-d-2) var(--hl-ease-in); display: flex; flex-direction: column; }
html[data-sidebar="chiusa"] .principale { margin-left: var(--hl-sidebar-l-chiusa); }
.senza-sidebar .principale { margin-left: 0; }

.header { position: sticky; top: 0; z-index: var(--hl-z-header); height: var(--hl-header-h); display: flex; align-items: center; gap: var(--hl-s-3);
  padding: 0 var(--hl-s-5); background: color-mix(in srgb, var(--hl-superficie) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hl-bordo); }
.header .spazio { flex: 1; }
.header-titolo { font-weight: 600; font-size: var(--hl-t-md); }
.contenuto { width: 100%; max-width: var(--hl-contenuto-max); margin: 0 auto; padding: var(--hl-s-5); }
.contenuto-largo { max-width: none; }
.sezione { margin-bottom: var(--hl-s-6); }
.sezione > h2 { margin-bottom: var(--hl-s-3); }
.intestazione-pagina { display: flex; align-items: flex-end; gap: var(--hl-s-4); margin-bottom: var(--hl-s-5); flex-wrap: wrap; }
.intestazione-pagina .spazio { flex: 1; }

/* Velo dietro la sidebar su schermi stretti */
.sidebar-velo { display: none; position: fixed; inset: 0; z-index: calc(var(--hl-z-sidebar) - 1); background: rgba(31,42,51,.4); }
.solo-mobile { display: none !important; }

/* Tab: <div class="tab-lista" role="tablist"><button class="tab" role="tab" aria-selected="true" aria-controls="p1">…</button></div>
   Frecce, Home/End e aria-selected li gestisce HaLine.tab(). Sottolineatura 2 px (HRM2 app.css:111-122). */
.tab-lista { display: flex; gap: var(--hl-s-1); border-bottom: 1px solid var(--hl-bordo); overflow-x: auto; scrollbar-width: none; }
.tab { all: unset; cursor: pointer; padding: 0 var(--hl-s-3); height: 40px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px;
  font-size: var(--hl-t-base); font-weight: 500; color: var(--hl-testo-2); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--hl-d-1), border-color var(--hl-d-1); }
.tab:hover { color: var(--hl-testo); }
.tab[aria-selected="true"] { color: var(--hl-primario); border-bottom-color: var(--hl-primario); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--hl-anello); outline-offset: -2px; border-radius: 4px; }
.tab .badge { height: 18px; }
.tab-pannello { padding-top: var(--hl-s-4); }
.tab-pannello:focus { outline: none; }

/* Tab a pillola (filtri): stessa semantica, altro vestito */
.tab-lista.pillole { border: 0; gap: var(--hl-s-1); background: var(--hl-superficie-2); padding: 3px; border-radius: var(--hl-r-sm); width: max-content; max-width: 100%; }
.tab-lista.pillole .tab { height: 28px; border: 0; border-radius: 4px; margin: 0; font-size: var(--hl-t-sm); padding: 0 10px; }
.tab-lista.pillole .tab[aria-selected="true"], .tab-lista.pillole .tab[aria-pressed="true"] { background: var(--hl-superficie); color: var(--hl-testo); box-shadow: var(--hl-ombra-1); }   /* aria-pressed: gruppo di pulsanti, non tab */

/* Briciole */
.briciole { display: flex; align-items: center; gap: var(--hl-s-2); font-size: var(--hl-t-sm); color: var(--hl-testo-2); list-style: none; margin: 0; padding: 0; }
.briciole li { display: inline-flex; align-items: center; gap: var(--hl-s-2); }
.briciole li + li::before { content: "/"; color: var(--hl-testo-3); }
.briciole a { color: var(--hl-testo-2); }
.briciole a:hover { color: var(--hl-primario); }
.briciole [aria-current="page"] { color: var(--hl-testo); font-weight: 500; }

/* Tasto di scorciatoia */
.kbd, kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--hl-bordo-forte); border-bottom-width: 2px; border-radius: 4px;
  background: var(--hl-superficie); font-family: var(--hl-font); font-size: var(--hl-t-xs); font-weight: 600; color: var(--hl-testo-2); text-align: center; line-height: 1.45; }

/* Popover scuro ancorato (tooltip ricco) */
.popover { position: absolute; z-index: var(--hl-z-dialogo); background: var(--hl-scuro); color: var(--hl-scuro-testo); padding: var(--hl-s-2) var(--hl-s-3); border-radius: var(--hl-r-sm); font-size: var(--hl-t-sm); box-shadow: var(--hl-ombra-2); max-width: 320px; }

/* Utilità minime (non un framework: 7 classi di layout; quelle di testo sono nella sezione 2) */
.riga { display: flex; align-items: center; gap: var(--hl-s-3); flex-wrap: wrap; }
.riga-stretta { gap: var(--hl-s-2); }
.pila { display: flex; flex-direction: column; gap: var(--hl-s-3); }
.spazio { flex: 1; }
.a-destra { margin-left: auto; }
.separatore { width: 1px; align-self: stretch; background: var(--hl-bordo); }
.scorri-x { overflow-x: auto; }


/* ============================================================================
   9. RESPONSIVE (≤ 900 px) E MOVIMENTO RIDOTTO E STAMPA
   ============================================================================ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: var(--hl-sidebar-l) !important; box-shadow: none; }
  html[data-sidebar-mobile="aperta"] .sidebar { transform: none; box-shadow: var(--hl-ombra-2); }
  html[data-sidebar-mobile="aperta"] .sidebar-velo { display: block; }
  html[data-sidebar-mobile="aperta"] .sidebar-voce-testo, html[data-sidebar-mobile="aperta"] .sidebar-gruppo, html[data-sidebar-mobile="aperta"] .sidebar-marchio-testo { display: block; }
  html[data-sidebar-mobile="aperta"] .sidebar-voce .badge { display: inline-flex; }
  html[data-sidebar-mobile="aperta"] .sidebar-voce { justify-content: flex-start; padding: 0 var(--hl-s-3); }
  html[data-sidebar-mobile="aperta"] .sidebar-marchio { justify-content: flex-start; padding: 0 var(--hl-s-4); }
  .principale { margin-left: 0 !important; }
  .solo-mobile { display: inline-flex !important; }
  .solo-desktop { display: none !important; }
  .contenuto { padding: var(--hl-s-4); }
  .header { padding: 0 var(--hl-s-4); }
  .toast-contenitore { right: var(--hl-s-4); bottom: var(--hl-s-4); }
  .griglia-schede { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* Chi chiede meno movimento lo ottiene: tutto istantaneo (Case Online pubblico.css:372-374) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .skeleton { animation: none; }
}

@media print {
  .sidebar, .header, .toast-contenitore, .btn, .tab-lista { display: none !important; }
  .principale { margin: 0 !important; }
  .scheda, .contenitore-tabella { box-shadow: none; border-color: #999; }
  body { background: #fff; color: #000; }
}