/* base.css: copia di Fastdoctor-Round static/round.css @ 5eb90f2: schede, tabelle, bottoni, finestre delle dashboard. Si cambia la', non qui. */
/* ===========================================================================
   FastDoctor — lo stile di fd-round.

   Stessi token delle altre app del server (pacchetto home-v2: palette
   "sanita", Inter per il testo, Nunito per i titoli, schede rounded-3xl,
   controlli rounded-xl, header col marchio), scritti qui una volta sola.

   L'armonia viene da tre scale, e niente fuori di esse:
     testo     11 · 12.5 · 14 · 17 · 22 · 26 px   (--t-xs ... --t-xxl)
     spazio    4 · 8 · 12 · 16 · 20 · 24 · 32 px  (--s1 ... --s7)
     altezze   36 px i controlli, 30 px quelli piccoli, 22 px le barre dei dati
   I nomi delle classi sono quelli del planner nato come artefatto (panel, hd,
   seg, pill, tag...): cosi' il suo script genera markup gia' stilato.
   Colori di stato con contrasto AA su bianco (verificati nel planning).
   =========================================================================== */
:root {
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 17px; --t-xl: 22px; --t-xxl: 26px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --h-ctl: 36px; --h-ctl-sm: 30px;
  --r-card: 24px; --r-ctl: 12px; --r-sm: 8px;

  --bg: var(--fondo);
  --card: var(--superficie);
  --surface-2: var(--rialzo);
  --line: var(--bordo);
  --line-2: var(--bordo-lieve);
  --line-strong: var(--bordo-forte);
  --ink: var(--testo);
  --ink-2: var(--tenue);
  --ink-3: var(--muto);

  --blu: var(--accento);
  --blu-scuro: var(--accento-forte);
  --blu-chiaro: var(--accento-tenue);
  --aqua: var(--acqua);
  --urgente: var(--oltre);

  --good: var(--entro-testo); --good-bg: var(--entro-fondo); --good-line: color-mix(in srgb, var(--entro) var(--tinta-35, 35%), var(--superficie));
  --warn: var(--attenzione-testo); --warn-bg: var(--attenzione-fondo); --warn-line: color-mix(in srgb, var(--attenzione) var(--tinta-35, 35%), var(--superficie));
  --bad: var(--oltre);  --bad-bg: var(--oltre-fondo);  --bad-line: color-mix(in srgb, var(--oltre) var(--tinta-35, 35%), var(--superficie));

  /* Serie dei grafici: un colore per gruppo, nell'ordine in cui stanno nella
     barra. Set validato (metodo dataviz, su bianco): CVD minimo 15.4, vista
     normale 27.2; l'aqua sta sotto 3:1, per questo ogni barra ha le etichette
     e la tabella sotto. Blu e aqua sono quelli di FastDoctor. */
  --c-fondatori: #2A69AC; --c-pool: #49C5B6; --c-r1: #EB6834; --c-r2: #4A3AA7;

  --ombra-s: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --ombra-m: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
  --ombra-l: 0 10px 15px -3px rgba(15, 23, 42, .09), 0 4px 6px -4px rgba(15, 23, 42, .05);

  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand: Nunito, Inter, system-ui, sans-serif;
  --altezza-testa: 61px;            /* aggiornata da fd.js quando l'header va a capo */
  --margine: var(--s6);             /* bordo della pagina, come la dashboard di estrazione */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--t-md)/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--brand); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-xxl); font-weight: 800; line-height: 1.15; }
h2 { font-size: var(--t-md); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
h3 { font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--blu-scuro); }
p { margin: 0; }
a { color: var(--blu); }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.note { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; max-width: 90ch; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--blu); font-weight: 700; }
.good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.spinta { flex: 1; }
.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

@keyframes comparsa { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulsazione { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------------------------------------------------------------- header */
/* Tre colonne: il nome a sinistra, la barra delle viste al centro, le azioni a destra. Le colonne di lato si
   dividono lo spazio a meta': la barra resta al centro finche' le azioni ci stanno (Ale, 24/10/2026). */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s6);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
}
@supports (backdrop-filter: blur(8px)) { .topbar { background: color-mix(in srgb, var(--superficie) 80%, transparent); backdrop-filter: blur(8px); } }

.marchio { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.marchio .segno {
  position: relative; width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--blu), var(--blu-scuro));
  display: flex; align-items: center; justify-content: center; box-shadow: var(--ombra-l);
}
.marchio .segno svg { width: 18px; height: 18px; color: var(--accento-testo); }
.marchio .segno::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  border-radius: 999px; background: var(--urgente); border: 2px solid var(--superficie);
}
@media (prefers-reduced-motion: no-preference) { .marchio .segno::after { animation: pulsazione 2s cubic-bezier(.4, 0, .6, 1) infinite; } }
.marchio .nome {
  font-family: var(--brand); font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--blu), var(--blu-scuro));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marchio .sezione { font-size: var(--t-sm); color: var(--ink-2); font-weight: 500;
                    padding-left: var(--s3); margin-left: var(--s1); border-left: 1px solid var(--line); }

.nav { display: flex; gap: 2px; padding: 3px; background: var(--line-2); border-radius: var(--r-ctl); }
/* con la spina le voci delle pagine si nascondono (fd-veste.js): una barra rimasta senza voci non si vede (24/10) */
.nav:not(:has(> a:not(.fd-nascosto-spina))) { display: none; }
.nav a { display: inline-flex; align-items: center; min-height: calc(var(--h-ctl-sm) - 2px); padding: 0 var(--s3);
         border-radius: 9px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
         text-decoration: none; transition: background .16s, color .16s; white-space: nowrap; }
.nav a:hover { color: var(--blu); }
.nav a[aria-current="page"] { background: var(--card); color: var(--blu-scuro); box-shadow: var(--ombra-s); }
.topbar .azioni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }
/* Il bottone del tema: fd-veste.js lo aggiunge in fondo all'intestazione. Nella griglia sta nella terza colonna, a
   destra delle azioni, che gli lasciano il posto (largo --h-controllo, .fd-btn--icona di fd.css). */
.topbar > .fd-tema-testa { grid-area: 1 / 3; justify-self: end; }
.topbar > .azioni { grid-area: 1 / 3; justify-self: end; }
.topbar:has(> .fd-tema-testa) > .azioni { margin-right: calc(var(--h-controllo) + var(--s2)); }
.topbar .separatore { width: 1px; height: 20px; background: var(--line); margin: 0 var(--s1); }
.chi { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; padding: 0 var(--s1); }
.chi b { color: var(--ink); font-weight: 600; }

/* L'area di lavoro prende tutta la larghezza della finestra, come la dashboard di
   estrazione: niente colonna centrale con i margini vuoti ai lati. */
.area { padding: var(--s4) var(--margine) var(--s4); min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .area { animation: comparsa .3s ease-out; } }
body.con-finestra { overflow: hidden; }

/* ---------------------------------------------------------------- schede */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s6); box-shadow: var(--ombra-s);
  display: grid; gap: var(--s4); min-width: 0; align-content: start;
}
.hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; min-height: 24px; }
.hd > div:first-child:not(.seg) { display: grid; gap: var(--s1); min-width: 0; flex: 1 1 260px; }   /* il titolo col suo sottotitolo: si stringe, bottoni e legende restano in riga */
.hd p { color: var(--ink-2); font-size: var(--t-sm); max-width: 72ch; }

/* ---------------------------------------------------------------- bottoni */
/* Solo per classe: un <button> senza classe resta nudo, cosi' i segmenti e le
   crocette non devono smontare uno stile che non e' il loro. */
button { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h-ctl); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--card); color: var(--ink); font-size: var(--t-md); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: var(--ombra-s);
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.btn:hover:not(:disabled) { border-color: var(--blu); color: var(--blu); box-shadow: var(--ombra-m); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.primary { background: var(--blu); border-color: var(--blu); color: var(--accento-testo); box-shadow: var(--ombra-m); }
.btn.primary:hover:not(:disabled) { background: var(--blu-scuro); border-color: var(--blu-scuro); color: var(--accento-testo); box-shadow: var(--ombra-l); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.btn.sm { min-height: var(--h-ctl-sm); padding: 0 var(--s3); font-size: var(--t-sm); border-radius: 10px; }
.btn.icona { width: var(--h-ctl-sm); padding: 0; font-weight: 700; }
.x {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  font-size: 18px; line-height: 1; border-radius: var(--r-sm);
}
.x:hover { color: var(--urgente); background: var(--bad-bg); }

/* ---------------------------------------------------------------- campi */
/* Piatti: nei moduli fitti un'ombra per campo e' rumore. Il fuoco li accende. */
input[type="text"], input[type="number"], input[type="email"], input[type="date"],
input[type="password"], input[type="search"], textarea, select {
  font: inherit; font-size: var(--t-md); color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  min-height: var(--h-ctl); padding: 0 var(--s3); width: 100%; min-width: 0;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
textarea { padding: var(--s2) var(--s3); resize: vertical; min-height: 88px; line-height: 1.45; }
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus, textarea:focus, select:focus { outline: none; background: var(--card); border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); }
input[type="number"] { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
input:disabled { opacity: .55; }
input[type="range"] { width: 100%; accent-color: var(--blu); min-height: 0; }
input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--blu); }
.field { display: grid; gap: 6px; min-width: 0; }
.lbl { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: var(--s2); font-size: var(--t-sm); cursor: pointer; line-height: 1.45; }
.check input { margin-top: 2px; flex: none; }

/* ---------------------------------------------------------------- segmenti */
.seg {
  display: inline-flex; gap: 3px; padding: 3px; max-width: 100%; min-height: var(--h-ctl);
  background: var(--line-2); border-radius: var(--r-ctl);
}
.seg button {
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer;
  padding: 4px var(--s3); font-size: var(--t-sm); font-weight: 600; line-height: 1.25;
  transition: background .16s, color .16s;
}
.seg button:hover { color: var(--blu); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--blu-scuro); box-shadow: var(--ombra-s); }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1 1 0; }

/* ---------------------------------------------------------------- pillole ed etichette */
.pill, .tag {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--s2); border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; background: var(--fondo); color: var(--ink-2);
}
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--blu-chiaro); color: var(--blu-scuro); }

/* ---------------------------------------------------------------- avvisi */
.warnbox, .badbox, .okbox, .infobox {
  margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-ctl);
  border: 1px solid; font-size: var(--t-sm); font-weight: 500; line-height: 1.45;
}
.warnbox { background: var(--attenzione-fondo); border-color: var(--warn-line); color: var(--warn); }
.badbox { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.okbox { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.infobox { background: var(--blu-chiaro); border-color: color-mix(in srgb, var(--accento) var(--tinta-35, 35%), var(--superficie)); color: var(--blu-scuro); }

/* ---------------------------------------------------------------- tabelle */
/* Dentro la scheda, senza una seconda cornice: l'intestazione e' una fascia
   chiara con gli angoli arrotondati, le righe sono separate da un filo. */
.tw { overflow-x: auto; min-width: 0; }
.tw:has(> table:empty) { display: none; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
th, td { padding: 9px var(--s3); border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; white-space: nowrap; }
thead th { background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700;
           text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
thead th:first-child { border-top-left-radius: var(--r-sm); }
thead th:last-child { border-top-right-radius: var(--r-sm); }
tbody th { color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em; }
td.n, th.n { text-align: right; }
tbody tr:last-child > td, tbody tr:last-child > th { border-bottom: 0; }
tr.sub > td { font-weight: 700; background: var(--blu-chiaro); }
tr.sub > td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
tr.sub > td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
td.wrap { white-space: normal; min-width: 200px; }
.riga2 { display: block; font-size: var(--t-xs); color: var(--ink-2); font-weight: 400; line-height: 1.35; }
.riga2.good { color: var(--good); } .riga2.bad { color: var(--bad); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--s2); vertical-align: -1px; }

/* ---------------------------------------------------------------- cifre */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); }
.kpi { display: grid; gap: 2px; min-width: 0; align-content: start; }
.kpi .val { font-size: var(--t-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; }
.kpi .lab { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-weight: 700; }
.kpi .sub { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------------------------------------------------------------- finestre */
.veil {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: var(--s6); background: rgba(2, 8, 23, .45);
}
.dialog {
  width: 100%; max-width: 600px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--ombra-l);
}
@media (prefers-reduced-motion: no-preference) { .veil { animation: comparsa .18s ease-out; } }
.dialog-hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
             padding: var(--s6) var(--s6) var(--s3); }
.dialog-hd h2 { font-size: var(--t-lg); text-transform: none; letter-spacing: -0.01em; }
.dialog-body { padding: 0 var(--s6); overflow-y: auto; display: grid; gap: var(--s4); }
.dialog-ft { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s5) var(--s6) var(--s6); }
.dialog.largo { max-width: 980px; }
.dialog-body > .tw { margin: 0 calc(-1 * var(--s2)); }

/* ---------------------------------------------------------------- menu «⋯» */
/* Un <details class="menu">: le azioni meno usate. fd.js lo chiude al clic fuori o su una voce. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--blu); color: var(--blu); }
.menu-voci {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px;
  display: grid; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--ombra-l);
}
.menu.su .menu-voci { top: auto; bottom: calc(100% + 4px); }
.menu-voci button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 500; cursor: pointer; }
.menu-voci button:hover, .menu-voci button:focus-visible { background: var(--surface-2); color: var(--blu); }
.menu-voci button.pericolo { color: var(--bad); }
.menu-voci button.pericolo:hover { background: var(--bad-bg); color: var(--bad); }

/* ---------------------------------------------------------------- note a bolla */
/* Il bottoncino "i" accanto a un titolo o a un campo apre la spiegazione lunga,
   che cosi' non occupa la pagina. La bolla la crea fd.js. */
.i-nota {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink-2);
  font: 700 11px/1 var(--sans); letter-spacing: 0; text-transform: none; vertical-align: 1px; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.i-nota:hover, .i-nota[aria-expanded="true"] { border-color: var(--blu); color: var(--blu); background: var(--blu-chiaro); }
.bolla {
  position: fixed; z-index: 80; width: max-content; max-width: min(360px, calc(100vw - 24px));
  display: grid; gap: var(--s2); padding: var(--s3) var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--ombra-l);
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink);
}
.bolla b { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .bolla { animation: comparsa .14s ease-out; } }

/* ---------------------------------------------------------------- notifiche */
.toast {
  position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%); z-index: 70;
  max-width: min(560px, calc(100vw - 32px)); padding: var(--s3) var(--s4); border-radius: var(--r-ctl);
  background: var(--ink); color: var(--accento-testo); box-shadow: var(--ombra-l); font-size: var(--t-sm);
}
.toast a { color: var(--accento); }

.empty { padding: var(--s6); text-align: center; color: var(--ink-2); border: 1px dashed var(--line-strong);
         border-radius: var(--r-ctl); background: var(--surface-2); font-size: var(--t-sm); }

/* ---------------------------------------------------------------- accesso */
/* La pagina d'accesso delle specifiche (.fd-accesso in fd.css). I campi di round valgono per tipo
   (input[type=...]), piu' forti di .fd-input: qui riprendono la forma delle specifiche. */
.fd-accesso .fd-input { min-height: var(--h-controllo); padding: 0 var(--pad-controllo); font-size: var(--t-corpo);
                        background: var(--superficie); border-color: var(--bordo-forte); border-radius: var(--raggio); }
.fd-accesso .fd-input:focus { border-color: var(--bordo-accento); box-shadow: 0 0 0 3px var(--selezione); }

/* ---------------------------------------------------------------- schermi stretti */
/* sotto i 1300 px (con la spina aperta) nome, viste e azioni del planner non stanno in una riga: si va a capo */
@media (max-width: 1300px) {
  .topbar { display: flex; flex-wrap: wrap; }
  /* in riga: le azioni vanno a destra col loro margin-left: auto, il tema subito dopo (non un secondo auto) */
  .topbar:has(> .fd-tema-testa) > .azioni { margin-right: 0; }
  .topbar > .fd-tema-testa { margin-left: 0 !important; }
}
@media (max-width: 1100px) { :root { --margine: var(--s4); } }
@media (max-width: 760px) {
  .topbar { position: static; display: flex; flex-wrap: wrap; padding: var(--s3) var(--s4); gap: var(--s3); }
  .topbar > .marchio { order: -2; margin-right: auto; }       /* al telefono il tema sta accanto al nome */
  .topbar > .fd-tema-testa { order: -1; }
  .topbar .azioni { margin-left: 0; width: 100%; }
  .topbar .separatore { display: none; }
  .nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; justify-content: center; padding: 0 var(--s2); }
  .panel { padding: var(--s4); border-radius: 20px; }
  .veil { padding: var(--s3); }
  .dialog-hd { padding: var(--s4) var(--s4) var(--s2); }
  .dialog-body { padding: 0 var(--s4); }
  .dialog-ft { padding: var(--s4); }
  h1 { font-size: var(--t-xl); }
}
@media print {
  .topbar, .toast, .veil, .bolla { display: none !important; }
  body { background: var(--superficie); }
  .panel { box-shadow: none; break-inside: avoid; }
}