/* ==========================================================================
   Quaderno di Campagna — foglio di stile unico (ridisegno del 26/09/2026)

   Perché è stato riscritto. La segnalazione dell'utente («struttura caotica,
   menù a tendina sovrapposti di dimensioni errate, salvataggio poco
   intuitivo») aveva cause misurate nel foglio precedente:
   · lo stile dei campi esisteva solo dentro `.field`, `.search` e `.tbl`: 39
     controlli restavano quelli nativi del browser (bianchi, 13 px, alti 21
     px) accanto a campi stilati alti 39 px — le «tendine di dimensioni
     errate»;
   · il bordo dei campi aveva contrasto 1,18:1 (WCAG 1.4.11 chiede 3:1) e il
     foglio non dichiarava `color-scheme`, così calendari e tendine aperte
     restavano chiari su fondo scuro;
   · le griglie a 4 colonne fisse lasciavano campi soli su una riga e 49
     etichette finte ` ` servivano ad allineare i pulsanti;
   · 47 colori scritti a mano fuori dalle variabili, 11 dimensioni di
     carattere, 12 raggi diversi.

   Come è organizzato. Strati `@layer` in ordine di priorità crescente: ciò
   che sta in `utilities` vince su `pages`, che vince su `components`, ecc.
   Le regole senza strato (leaflet.css e gli stili in linea) vincono su
   tutti gli strati: per questo le correzioni a Leaflet stanno in fondo,
   fuori dagli strati.

   Temi (decisione dell'utente del 26/09/2026): CHIARO predefinito — si legge
   meglio al sole, in campo — e SCURO a scelta. Senza una scelta esplicita
   (`data-theme` su <html>, impostato da auth.js prima del disegno) il tema
   segue l'impostazione del dispositivo.

   Classi che i JavaScript usano da mesi (`btn`, `field`, `card`, `tag`,
   `tbl`, `table-wrap`, `static-box`, `row-inline`, `grid-*`, `hidden`…)
   restano le stesse: cambia l'aspetto, non il nome.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  /* L'attributo `hidden` del browser da solo NON bastava: `main .card
     { display: block }` lo scavalcava e le viste «operatori»/«macchine»
     mostravano comunque tutto (difetto del 30/07/2026). Fra le regole
     !important vince lo strato dichiarato PER PRIMO: stando in `reset`,
     questa vince su tutto. */
  [hidden], .hidden { display: none !important; }
  /* un modulo chiuso finché non si preme «+ Nuovo…»: classe distinta da
     `hidden`, che è riservata alle viste (`data-vista`, ui.js) */
  .chiusa { display: none !important; }
  /* ISPETTORE: sola lettura — il server rifiuta comunque le scritture, qui
     non gli si mostrano comandi che fallirebbero */
  body.sola-lettura [data-scrittura] { display: none !important; }
  img, svg { max-width: 100%; }
  /* nessun campo più largo del suo contenitore: le tendine con voci lunghe
     facevano scorrere in orizzontale la pagina su telefono */
  input, select, textarea, button { max-width: 100%; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, Consolas, "SF Mono", monospace;
    --fs-xs: 12.5px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px;
    --fs-xl: 22px; --fs-2xl: 26px;
    --lh: 1.5; --lh-tight: 1.25;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
    --control-h: 42px;
    --bw-field: 1.5px;
    --topbar-h: 56px;
    --sidebar-w: 264px;
    --content-max: 1240px;
    --card-pad: 20px;
    --z-sticky: 10; --z-map-ui: 800; --z-backdrop: 1100; --z-drawer: 1150;
    --z-topbar: 1200; --z-modal: 1400; --z-toast: 2000;

    /* tema chiaro: rapporti di contrasto su --surface (#fff) */
    --bg: #f2f5f2;
    --surface: #ffffff;
    --surface-2: #f3f6f3;
    --surface-3: #e7ece8;
    --border: #d2dad4;
    --field-border: #6b7a71;          /* 4,5:1 — WCAG 1.4.11 chiede 3:1 */
    --text: #111a14;                  /* 17,8:1 */
    --text-muted: #4a584f;            /* 7,3:1 */
    --primary: #1b6b3d;               /* 6,5:1 col testo bianco */
    --primary-hover: #14532f;
    --on-primary: #ffffff;
    --primary-soft: #e2f1e7;
    --focus: #0b57d0;                 /* blu: diverso dal verde di stato */
    --ok: #176b35;   --ok-bg: #e3f4e8;   --ok-border: #9ccfad;
    --warn: #7a4d00; --warn-bg: #fff3d1; --warn-border: #e2bf62;
    --ko: #b3261e;   --ko-bg: #fde8e6;   --ko-border: #eea59f;
    --info: #0b57d0; --info-bg: #e7effc; --info-border: #a9c3ef;
    /* colori UFFICIALI delle allerte del bollettino di criticità della
       Protezione Civile (file di stile della fonte, 28/09/2026): uguali nei
       due temi, perché sono quelli della mappa ufficiale; si usano solo come
       campione accanto al testo, mai come colore del testo */
    --allerta-nessuna: #90c985; --allerta-gialla: #f8f865;
    --allerta-arancione: #f0bf01; --allerta-rossa: #fd6767;
    /* icone meteo dello storico (icone-meteo.js) */
    --meteo-sole: #e8a200; --meteo-nube: #eef1f4; --meteo-nube-scura: #b9c2cb;
    --meteo-bordo: #6d7a86; --meteo-pioggia: #1f6fd1; --meteo-grandine: #ffffff;
    --meteo-fulmine: #f2b705; --meteo-gelo: #1f8fd1; --meteo-caldo: #d1422a;
    --shadow-1: 0 1px 2px rgb(16 24 20 / .07), 0 1px 3px rgb(16 24 20 / .05);
    --shadow-2: 0 12px 32px rgb(16 24 20 / .18);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a584f' stroke-width='2'/%3E%3C/svg%3E");

    /* nomi storici, ancora usati negli stili in linea di alcuni script */
    --panel: var(--surface);
    --panel-2: var(--surface-2);
    --line: var(--border);
    --muted: var(--text-muted);
    --accent: var(--primary);
    --accent-2: var(--primary);
    --danger: var(--ko);
    --radius: var(--r-lg);
    --shadow: var(--shadow-1);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1512;
    --surface: #151d19;
    --surface-2: #1c2621;
    --surface-3: #243129;
    --border: #2f3d35;
    --field-border: #7d9186;
    --text: #e8efe9;
    --text-muted: #aebdb2;
    --primary: #34d17f;
    --primary-hover: #4fe39a;
    --on-primary: #06210f;
    --primary-soft: rgb(52 209 127 / .14);
    --focus: #8ab4ff;
    --ok: #6fe3a6;   --ok-bg: rgb(52 209 127 / .12);  --ok-border: #2b5a3f;
    --warn: #f4cd7a; --warn-bg: rgb(255 193 72 / .12); --warn-border: #5a4a22;
    --ko: #ffa3a3;   --ko-bg: rgb(239 91 91 / .14);   --ko-border: #5a2a2a;
    --info: #9cc8f0; --info-bg: rgb(90 170 235 / .12); --info-border: #22394d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 12px 32px rgb(0 0 0 / .5);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aebdb2' stroke-width='2'/%3E%3C/svg%3E");
    --meteo-sole: #ffc93c; --meteo-nube: #cfd6dd; --meteo-nube-scura: #8c979f;
    --meteo-bordo: #4b5760; --meteo-pioggia: #6fb2ff; --meteo-grandine: #f4f7fa;
    --meteo-fulmine: #ffd23f; --meteo-gelo: #7cc8ff; --meteo-caldo: #ff8a70;
  }
  /* nessuna scelta esplicita: segue il dispositivo (stessi valori di sopra) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #0f1512;
      --surface: #151d19;
      --surface-2: #1c2621;
      --surface-3: #243129;
      --border: #2f3d35;
      --field-border: #7d9186;
      --text: #e8efe9;
      --text-muted: #aebdb2;
      --primary: #34d17f;
      --primary-hover: #4fe39a;
      --on-primary: #06210f;
      --primary-soft: rgb(52 209 127 / .14);
      --focus: #8ab4ff;
      --ok: #6fe3a6;   --ok-bg: rgb(52 209 127 / .12);  --ok-border: #2b5a3f;
      --warn: #f4cd7a; --warn-bg: rgb(255 193 72 / .12); --warn-border: #5a4a22;
      --ko: #ffa3a3;   --ko-bg: rgb(239 91 91 / .14);   --ko-border: #5a2a2a;
      --info: #9cc8f0; --info-bg: rgb(90 170 235 / .12); --info-border: #22394d;
      --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
      --shadow-2: 0 12px 32px rgb(0 0 0 / .5);
      --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23aebdb2' stroke-width='2'/%3E%3C/svg%3E");
      --meteo-sole: #ffc93c; --meteo-nube: #cfd6dd; --meteo-nube-scura: #8c979f;
      --meteo-bordo: #4b5760; --meteo-pioggia: #6fb2ff; --meteo-grandine: #f4f7fa;
      --meteo-fulmine: #ffd23f; --meteo-gelo: #7cc8ff; --meteo-caldo: #ff8a70;
    }
  }
  /* in campo, sotto il sole: chi chiede più contrasto al sistema lo ottiene */
  @media (prefers-contrast: more) {
    :root:not([data-theme="dark"]) {
      --text-muted: #26312a; --field-border: #1f2a23; --border: #8a978e;
    }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-family: var(--font);
    font-size: var(--fs-sm);
    line-height: var(--lh);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    min-height: 100vh; min-height: 100dvh;
  }
  h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0; }
  h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.01em; }
  h2 { font-size: var(--fs-lg); font-weight: 700; }
  h3 { font-size: var(--fs-md); font-weight: 700; }
  p { margin: 0 0 var(--sp-2); }
  code {
    font-family: var(--mono); font-size: .92em;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 0 5px;
  }
  /* I collegamenti dentro il contenuto non erano mai stati definiti: blu del
     browser su fondo scuro, contrasto 1,97:1 (28/07/2026). */
  a { color: var(--primary); text-underline-offset: 2px; }
  a:hover { color: var(--primary-hover); }
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
  ::selection { background: var(--primary-soft); }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px;
  }
  details > summary { cursor: pointer; }
  /* scorrimento scuro nel tema scuro, chiaro nel chiaro */
  * { scrollbar-color: var(--field-border) transparent; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  /* Salto al contenuto: il primo Tab della pagina porta al lavoro, non al
     menu (WCAG 2.4.1). Invisibile finché non riceve il fuoco. */
  .skip-link {
    position: absolute; left: var(--sp-3); top: -60px; z-index: calc(var(--z-topbar) + 1);
    background: var(--surface); color: var(--text); padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
  }
  .skip-link:focus { top: var(--sp-2); }

  /* --- barra superiore: a ogni larghezza (prima solo sotto gli 820 px) --- */
  .topbar {
    position: sticky; top: 0; z-index: var(--z-topbar);
    height: var(--topbar-h);
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0 var(--sp-4);
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .tb-marchio {
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--text); text-decoration: none; min-width: 0;
    width: calc(var(--sidebar-w) - var(--sp-4) - var(--sp-3));
  }
  .tb-marchio:hover { color: var(--text); }
  .tb-logo, .logo {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    background: var(--primary); color: var(--on-primary);
    font-weight: 800; font-size: 12px; letter-spacing: .02em;
    display: grid; place-items: center;
  }
  .tb-nome { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .tb-nome strong { font-size: 15px; white-space: nowrap; }
  .tb-nome span {
    font-size: var(--fs-xs); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* il titolo nella barra serve sul telefono, quando l'intestazione della
     pagina è scorsa via; su schermo largo ripeterebbe il titolo accanto */
  .tb-title {
    flex: 1; min-width: 0; font-weight: 700; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    visibility: hidden;
  }
  .tb-azioni { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
  .nav-toggle {
    display: none; width: 44px; height: 44px; flex: none; cursor: pointer;
    border: var(--bw-field) solid var(--border); background: var(--surface);
    color: var(--text); border-radius: var(--r-md); font-size: 18px;
    place-items: center; padding: 0;
  }
  .tema-btn {
    width: 40px; height: 40px; flex: none; cursor: pointer; padding: 0;
    border: var(--bw-field) solid var(--border); background: var(--surface);
    color: var(--text); border-radius: var(--r-md); font-size: 17px;
    display: grid; place-items: center;
  }
  .tema-btn:hover, .nav-toggle:hover { background: var(--surface-2); }

  /* --- sessione (auth.js) dentro la barra superiore. Prima era un riquadro
     fisso in basso a destra che copriva l'ultimo pulsante di ogni modulo. */
  #auth-badge {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); color: var(--text-muted); min-width: 0;
  }
  #auth-badge strong { color: var(--text); }
  #auth-badge .ab-dettaglio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
  /* pagina senza barra superiore (non dovrebbe accadere): resta in basso */
  body > #auth-badge {
    position: fixed; right: 14px; bottom: 14px; z-index: 900;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 6px 10px; box-shadow: var(--shadow-2);
  }

  /* --- menu laterale a gruppi --- */
  #sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0;
    width: var(--sidebar-w); z-index: var(--z-drawer);
    background: var(--surface); border-right: 1px solid var(--border);
    /* L'elenco completo delle sezioni è più alto dello schermo: la barra
       DEVE scorrere, e arrivati in fondo lo scorrimento non passa al
       contenuto. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3) var(--sp-2) calc(var(--sp-6) + env(safe-area-inset-bottom));
  }
  .nav-gruppo { margin-bottom: 2px; }
  .nav-gruppo > summary {
    list-style: none; display: flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
    user-select: none;
  }
  .nav-gruppo > summary::-webkit-details-marker { display: none; }
  .nav-gruppo > summary::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s;
  }
  .nav-gruppo[open] > summary::after { transform: rotate(45deg); }
  .nav-gruppo > summary:hover { background: var(--surface-2); color: var(--text); }
  .nav-gruppo.corrente > summary { color: var(--text); }
  .nav-conta {
    font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border);
    border-radius: var(--r-pill); padding: 0 8px; line-height: 20px;
  }
  .nav-sezioni { display: grid; gap: 1px; padding: 2px 0 var(--sp-2); }
  .nav-sezioni a {
    display: flex; align-items: center; min-height: 40px;
    padding: 6px var(--sp-3) 6px calc(var(--sp-3) + 6px);
    border-radius: var(--r-md); color: var(--text); text-decoration: none;
    font-size: var(--fs-sm); line-height: 1.3;
  }
  .nav-sezioni a:hover { background: var(--surface-2); color: var(--text); }
  .nav-sezioni a.corrente {
    background: var(--primary-soft); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primary);
  }
  .nav-piede {
    margin: var(--sp-4) var(--sp-3) 0; padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs); color: var(--text-muted);
  }
  .nav-backdrop {
    display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
    z-index: var(--z-backdrop); background: rgb(0 0 0 / .45);
  }

  /* --- colonna del contenuto: intestazione di pagina + #app ---
     Il margine laterale cresce sugli schermi larghi, così il contenuto resta
     largo al massimo --content-max e centrato nella colonna a destra del
     menu (un modulo steso su 1600 px non si legge). */
  .testa-pagina, #app {
    margin-left: var(--sidebar-w);
    --gutter: max(var(--sp-5), calc((100vw - var(--sidebar-w) - var(--content-max)) / 2));
  }
  .testa-pagina { padding: var(--sp-5) var(--gutter) 0; }
  .tp-riga {
    display: flex; align-items: flex-end; gap: var(--sp-3) var(--sp-4);
    flex-wrap: wrap; min-height: 44px;
  }
  .tp-titoli { flex: 1 1 18rem; min-width: 0; }
  .tp-gruppo {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
  }
  .tp-sotto { color: var(--text-muted); margin-top: 4px; }
  .azioni-pagina { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  /* le viste (schede) del gruppo corrente: una striscia sola da 44 px al
     posto dei tre livelli di pulsanti di prima (148 px a 390 px) */
  .viste {
    display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
    box-shadow: inset 0 -1px 0 var(--border); margin-top: var(--sp-4);
  }
  .viste a {
    flex: none; display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 var(--sp-4); color: var(--text-muted); font-weight: 600;
    text-decoration: none; box-shadow: inset 0 -3px 0 transparent; white-space: nowrap;
  }
  .viste a:hover { color: var(--text); background: var(--surface-2); }
  .viste a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--primary); }

  #app {
    display: flex; align-items: flex-start; gap: var(--sp-5);
    padding: var(--sp-5) var(--gutter) calc(var(--sp-6) * 2);
  }
  #app > main { flex: 1; min-width: 0; }
  #app > main, #app > .pannello-pagina { display: flex; flex-direction: column; gap: var(--sp-4); }
  /* pannello laterale di una pagina (elenchi, filtri, riepiloghi): era la
     barra laterale di ogni pagina, dove gli elenchi finivano schiacciati a
     16 px di altezza */
  .pannello-pagina {
    width: 320px; flex: none;
    position: sticky; top: calc(var(--topbar-h) + var(--sp-4));
    max-height: calc(100dvh - var(--topbar-h) - var(--sp-5));
    overflow-y: auto;
  }
  .pannello-pagina .toolbar { display: flex; flex-direction: column; gap: var(--sp-2); }

  /* --- griglie di modulo: le colonne si adattano allo spazio (prima 4
     colonne fisse lasciavano un campo solo su una riga) --- */
  /* allineati sul FONDO: un'etichetta lunga va a capo verso l'alto e i campi
     della stessa riga restano alla stessa altezza */
  .grid-2, .grid-3, .grid-4, .form-grid {
    display: grid; gap: var(--sp-4) var(--sp-4); align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-min, 13rem)), 1fr));
  }
  .grid-3 { --col-min: 15rem; }
  /* due colonne: `auto-fit` fa occupare ai due campi tutta la riga invece
     di lasciare vuota una terza colonna sugli schermi larghi */
  .grid-2 {
    --col-min: 19rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min)), 1fr));
  }
  :is(.grid-2, .grid-3, .grid-4) + :is(.grid-2, .grid-3, .grid-4) { margin-top: var(--sp-4); }
  .span-all { grid-column: 1 / -1; }
  /* un pulsante direttamente nella griglia: si allinea al fondo dei campi
     senza l'etichetta finta `&nbsp;` di prima, e non si stira sulla cella */
  .cella-azione { justify-self: start; }
  .stack { display: flex; flex-direction: column; gap: var(--sp-3); }
  .row-inline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
  .row-inline > label { min-width: 0; }
  .space-between { justify-content: space-between; }
  .spacer { flex: 1; }
}

/* ------------------------------------------------------------- components */
@layer components {
  /* === CAMPI: un solo aspetto ovunque ===================================
     Prima lo stile valeva solo dentro `.field`: la ricerca dei prodotti, il
     filtro «categoria fitoiatrica», l'anno del report e i campi dell'admin
     restavano nativi. Ora ogni campo, dovunque stia, ha lo stesso aspetto,
     16 px di testo (sotto i 16 px iOS ingrandisce la pagina al tocco) e un
     bordo che si vede (4,5:1). */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"]), select, textarea) {
    font: inherit; font-size: var(--fs-md); line-height: 1.3;
    min-height: var(--control-h); padding: 8px 12px; min-width: 0;
    color: var(--text); background-color: var(--surface);
    border: var(--bw-field) solid var(--field-border); border-radius: var(--r-md);
    transition: border-color .12s, box-shadow .12s;
  }
  :where(select:not([multiple], [size])) {
    appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: var(--chevron); background-repeat: no-repeat;
    background-position: right 12px center; background-size: 12px 8px;
    text-overflow: ellipsis;
  }
  :where(textarea) { min-height: 88px; line-height: var(--lh); resize: vertical; }
  :where(input, select, textarea):hover:not(:disabled) { border-color: var(--text-muted); }
  :where(input, select, textarea):focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); outline: none; }
  :where(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  :where(input, select, textarea):disabled, :where(input, textarea)[readonly] {
    background-color: var(--surface-2); color: var(--text-muted); cursor: not-allowed;
  }
  ::placeholder { color: var(--text-muted); opacity: .8; }
  :where(input[type="checkbox"], input[type="radio"]) {
    width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary);
    vertical-align: middle;
  }
  :where(input[type="file"]) { font: inherit; font-size: var(--fs-sm); max-width: 100%; }
  :where(input[type="number"]) { font-variant-numeric: tabular-nums; }
  /* campo segnalato dalla scheda di modulo (QdcUI.scheda) */
  :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--ko); box-shadow: 0 0 0 3px var(--ko-bg); }

  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field > span:first-child, .field > .etichetta {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    line-height: var(--lh-tight);
  }
  .field :where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { width: 100%; }
  /* un pulsante in una cella di griglia non si stira più su tutta la cella */
  .field > .btn { align-self: flex-start; }
  .field .errore-campo, .errore-campo { color: var(--ko); font-size: var(--fs-xs); font-weight: 600; }
  .obbligatorio::after, .field.richiesto > span:first-child::after,
  .field:has(> :required) > span:first-child::after { content: " *"; color: var(--ko); }
  .field .aiuto, .aiuto { font-size: var(--fs-xs); color: var(--text-muted); }

  .row-inline > :is(input:not([type="checkbox"], [type="radio"]), select) { flex: 1 1 12rem; }
  .row-inline input[type="search"] { flex: 1 1 16rem; }
  .row-inline input[type="checkbox"], .row-inline input[type="radio"] { width: 20px; height: 20px; }
  /* spunte con la loro etichetta: area da toccare alta 44 px */
  .check, .filtri > label {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  }
  .filtri {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-5);
    margin: var(--sp-2) 0;
  }
  .filtri > label { min-width: 0; }
  .filtri select { max-width: 100%; }
  .search { padding: 0; }
  .search input { width: 100%; }
  .add-coltura { display: flex; gap: var(--sp-2); }
  .add-coltura input { flex: 1; }
  .part-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: var(--sp-2); }
  .part-row .rm {
    background: transparent; border: var(--bw-field) solid var(--ko-border); color: var(--ko);
    border-radius: var(--r-md); cursor: pointer; min-width: 40px;
  }

  /* === PULSANTI ======================================================== */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--control-h); padding: 0 var(--sp-4);
    font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight);
    text-decoration: none; text-align: center; cursor: pointer; white-space: normal;
    color: var(--text); background: var(--surface);
    border: var(--bw-field) solid var(--field-border); border-radius: var(--r-md);
    transition: background-color .12s, border-color .12s, color .12s;
  }
  .btn:hover { background: var(--surface-2); color: var(--text); }
  .btn:active { background: var(--surface-3); }
  .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
  .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
  .btn-primary:active { background: var(--primary-hover); }
  /* `btn-ghost` = pulsante secondario: bordo visibile, fondo trasparente */
  .btn-ghost { background: transparent; }
  .btn-danger { background: transparent; color: var(--ko); border-color: var(--ko-border); }
  .btn-danger:hover { background: var(--ko-bg); color: var(--ko); }
  .btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  .btn[aria-busy="true"] { cursor: progress; opacity: .75; }
  .btn[aria-busy="true"]::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: qdc-gira .8s linear infinite;
  }
  @keyframes qdc-gira { to { transform: rotate(360deg); } }
  .ico { font-size: 1.05em; line-height: 1; }
  .icon-btn {
    display: inline-grid; place-items: center; min-width: 36px; min-height: 36px;
    background: transparent; border: 0; border-radius: var(--r-md);
    color: var(--text-muted); font-size: 16px; cursor: pointer;
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }

  /* === SCHEDE (pannelli del contenuto) ================================= */
  main .card, .pannello-pagina .riquadro {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--card-pad);
    box-shadow: var(--shadow-1); display: block; cursor: auto;
  }
  main .card > h2:first-child, main .card > .row-inline:first-child h2 { margin-bottom: var(--sp-3); }
  main .card h2 { margin: 0 0 var(--sp-3); }
  main .card h3 { margin: var(--sp-5) 0 var(--sp-3); }
  main .card h3:first-child { margin-top: 0; }
  .card-testa {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin-bottom: var(--sp-3);
  }
  .card-testa h2 { margin: 0 !important; flex: 1 1 auto; }
  .muted { color: var(--text-muted); }
  .small { font-size: var(--fs-xs); }
  .pad { padding: var(--sp-3); }
  p.muted.small { line-height: 1.55; }

  /* «Perché?»: le spiegazioni lunghe restano, ma chiuse, con una frase
     sempre visibile — prima riempivano ogni scheda prima dei campi */
  .perche {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); margin: var(--sp-2) 0 var(--sp-3);
    font-size: var(--fs-sm);
  }
  .perche > summary {
    list-style: none; display: block; position: relative;
    padding: 10px var(--sp-3) 10px 40px; min-height: 40px;
    color: var(--text-muted); line-height: 1.4;
  }
  .perche > summary::-webkit-details-marker { display: none; }
  .perche > summary::before {
    content: "?"; position: absolute; left: var(--sp-3); top: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    color: var(--info); border: 1.5px solid var(--info);
  }
  .perche > summary strong { color: var(--text); }
  .perche[open] > summary { border-bottom: 1px solid var(--border); }
  .perche > :not(summary) { padding: var(--sp-2) var(--sp-3); margin: 0; line-height: 1.55; }

  /* === ELENCHI ========================================================== */
  .list { display: flex; flex-direction: column; gap: var(--sp-2); }
  .list-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  }
  .pill {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
    border-radius: var(--r-pill); padding: 0 9px; font-size: 12px; line-height: 20px;
    font-weight: 700; letter-spacing: 0;
  }
  .item {
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
    padding: var(--sp-3); cursor: pointer; font-size: var(--fs-sm);
    display: flex; flex-direction: column; gap: var(--sp-1);
    transition: border-color .12s, background-color .12s;
  }
  .item:hover { border-color: var(--field-border); background: var(--surface-2); }
  .item-title { font-weight: 700; }
  .static-box {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-sm);
    min-height: var(--control-h);
  }
  .empty, .vuoto {
    padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--text-muted);
    border: 1.5px dashed var(--border); border-radius: var(--r-md);
  }
  .riga-prodotto {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2);
    font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-2);
  }
  .prod-card {
    display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center;
    flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-sm);
  }
  /* riepilogo nel dialogo di conferma (QdcUI.chiediConferma) */
  .riepilogo {
    display: grid; grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: var(--sp-1) var(--sp-4); margin: 0;
  }
  .riepilogo dt { color: var(--text-muted); font-size: var(--fs-sm); }
  .riepilogo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  /* sezione raggiunta da un collegamento con ancora: si vede dove si è
     arrivati, e resta sotto la barra superiore */
  #app [id] { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }
  .evidenzia { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: var(--r-md); transition: outline-color .6s; }
  /* note sotto una griglia di campi (riga prodotto del trattamento): ciò che
     stava SOTTO un controllo lo alzava rispetto ai vicini della riga */
  .note-campi {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4);
  }
  .risultati {
    display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2);
    max-height: min(380px, 55vh); overflow-y: auto; padding-right: 2px;
  }

  /* === STATI: tag, badge, banner ======================================= */
  .tag, .badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap;
    border-radius: var(--r-sm); padding: 1px 8px;
    border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2);
  }
  .tag.ok, .badge.ok     { color: var(--ok);   border-color: var(--ok-border);   background: var(--ok-bg); }
  .tag.warn, .badge.warn { color: var(--warn); border-color: var(--warn-border); background: var(--warn-bg); }
  .tag.info, .badge.info { color: var(--info); border-color: var(--info-border); background: var(--info-bg); }
  .tag.ko, .badge.ko     { color: var(--ko);   border-color: var(--ko-border);   background: var(--ko-bg); }
  .tag.na, .badge.na     { color: var(--text-muted); }

  .banner, .banner-warn, .banner-ok, .banner-ko, .banner-info {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm); background: var(--surface); color: var(--text);
  }
  .banner-warn { border-color: var(--warn-border); border-left-color: var(--warn); background: var(--warn-bg); }
  .banner-ok   { border-color: var(--ok-border);   border-left-color: var(--ok);   background: var(--ok-bg); }
  .banner-ko   { border-color: var(--ko-border);   border-left-color: var(--ko);   background: var(--ko-bg); }
  .banner-info { border-color: var(--info-border); border-left-color: var(--info); background: var(--info-bg); }
  .banner > .banner-testo, .banner-warn > div { flex: 1; min-width: 0; }

  /* === ESITO DELLA VERIFICA (verdetti, controlli) ====================== */
  .verdetti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .verdetto {
    border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px;
    font-size: var(--fs-xs); background: var(--surface);
  }
  .verdetto span { color: var(--text-muted); }
  .verdetto strong { font-size: var(--fs-sm); }
  .verdetto.ok   { border-left-color: var(--ok); }   .verdetto.ok strong   { color: var(--ok); }
  .verdetto.warn { border-left-color: var(--warn); } .verdetto.warn strong { color: var(--warn); }
  .verdetto.info { border-left-color: var(--info); } .verdetto.info strong { color: var(--info); }
  .verdetto.ko   { border-left-color: var(--ko); }   .verdetto.ko strong   { color: var(--ko); }
  .ctrl {
    border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-md);
    background: var(--surface); margin-bottom: var(--sp-2); padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
  }
  .ctrl.ok   { border-left-color: var(--ok); }
  .ctrl.warn { border-left-color: var(--warn); }
  .ctrl.info { border-left-color: var(--info); }
  .ctrl.ko   { border-left-color: var(--ko); background: color-mix(in srgb, var(--ko-bg) 50%, var(--surface)); }
  .ctrl.na   { border-left-color: var(--border); }
  .ctrl summary {
    padding: 10px 2px; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
    min-height: 44px;
  }
  .ctrl-id { font-family: var(--mono); color: var(--text-muted); font-size: 12px; }
  .ctrl ul { margin: var(--sp-1) 0 var(--sp-3); padding-left: 22px; }
  .ctrl li { margin-bottom: var(--sp-1); }
  .alert-row { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
  .alert-row code { color: var(--warn); }

  /* === WIZARD: passi e stepper ========================================= */
  .wiz-step { border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-5); scroll-margin-top: calc(var(--topbar-h) + 64px); }
  .wiz-step:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--sp-3); }
  .wiz-step > h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3) !important; }
  .step-n {
    display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: 50%; background: var(--primary-soft); color: var(--primary);
    font-size: 13px; font-weight: 800;
  }
  .stepper::-webkit-scrollbar, .viste::-webkit-scrollbar { display: none; }
  .stepper {
    scrollbar-width: none;
    display: flex; gap: var(--sp-1); overflow-x: auto; list-style: none;
    margin: 0 0 var(--sp-4); padding: 0 0 2px; counter-reset: passo;
    position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
    background: var(--surface);
  }
  .stepper li { flex: 1 0 auto; }
  .stepper a {
    display: flex; align-items: center; gap: var(--sp-2); min-height: 44px;
    padding: 0 var(--sp-3); border-bottom: 3px solid var(--border);
    color: var(--text-muted); text-decoration: none; font-size: var(--fs-xs); font-weight: 600;
    white-space: nowrap;
  }
  .stepper a::before {
    counter-increment: passo; content: counter(passo);
    display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
    border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px;
  }
  .stepper a:hover { color: var(--text); }
  .stepper [data-stato="completo"] a { color: var(--ok); border-bottom-color: var(--ok); }
  .stepper [data-stato="completo"] a::before { content: "✓"; background: var(--ok-bg); }
  .stepper [data-stato="avviso"] a { color: var(--warn); border-bottom-color: var(--warn); }
  .stepper [data-stato="errore"] a { color: var(--ko); border-bottom-color: var(--ko); }
  .stepper [data-stato="attivo"] a { color: var(--text); border-bottom-color: var(--primary); }

  /* === BARRA AZIONI: il salvataggio resta a vista ======================
     Prima VERIFICA e REGISTRA stavano in fondo a una pagina lunghissima, e
     l'esito della verifica compariva SOTTO il pulsante che salva. Ora la
     barra resta attaccata al fondo dello schermo finché la sua scheda è
     visibile, con un solo pulsante primario e lo stato scritto accanto. */
  .wiz-actions, .form-actions {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  /* la barra della scheda di modulo è l'ultimo figlio della scheda: si
     allarga fino ai bordi e ne chiude il fondo */
  .form-actions {
    margin: var(--sp-5) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding-left: var(--card-pad); padding-right: var(--card-pad);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .form-actions:not(:last-child) { margin-bottom: 0; border-radius: 0; }
  .form-actions .stato, .wiz-actions .stato, #verifica-hint {
    margin-right: auto; font-size: var(--fs-sm); color: var(--text-muted);
    display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0;
  }
  .stato[data-tipo="sporco"]::before, .stato[data-tipo="ok"]::before, .stato[data-tipo="ko"]::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  }
  .stato[data-tipo="sporco"]::before { background: var(--warn); }
  .stato[data-tipo="ok"]::before { background: var(--ok); }
  .stato[data-tipo="ko"]::before { background: var(--ko); }
  .stato[data-tipo="ko"] { color: var(--ko); font-weight: 600; }
  .esito-scheda:not(:empty) { margin-top: var(--sp-3); }

  /* === TABELLE ========================================================== */
  .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--r-md); margin: var(--sp-2) 0;
    background: var(--surface);
  }
  .tbl { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--fs-sm); }
  .tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .tbl td { white-space: nowrap; }
  .tbl th {
    position: sticky; top: 0; z-index: 1; background: var(--surface-2);
    color: var(--text-muted); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  }
  .tbl tr:last-child td { border-bottom: none; }
  .tbl tbody tr:hover td { background: var(--surface-2); }
  .tbl .num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .tbl tr.tot td, .tbl tr.tot th { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--field-border); }
  .tbl tr.warn td { background: var(--warn-bg); }
  .tbl input, .tbl select { width: 100%; min-width: 90px; min-height: 36px; padding: 6px 9px; font-size: var(--fs-sm); }
  .tbl input[type="checkbox"] { width: 20px; min-width: 20px; height: 20px; min-height: 0; padding: 0; }

  /* === TOAST: una pila sotto la barra superiore =========================
     Prima c'era un solo messaggio per pagina e il nuovo cancellava il
     vecchio (le avvertenze normative del magazzino sparivano sotto l'esito
     del salvataggio); stava in basso, sopra i pulsanti. */
  .toast-pila {
    position: fixed; top: calc(var(--topbar-h) + var(--sp-3)); right: var(--sp-4);
    z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2);
    width: min(420px, calc(100vw - 24px)); pointer-events: none;
  }
  .toast, .toast-pila .toast-voce {
    pointer-events: auto;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-left: 4px solid var(--info);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.45;
    display: flex; gap: var(--sp-3); align-items: flex-start; white-space: pre-line;
  }
  .toast-voce .toast-testo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .toast-voce .icon-btn { min-width: 28px; min-height: 28px; margin: -4px -8px -4px 0; }
  .toast-voce.ok { border-left-color: var(--ok); }
  .toast-voce.err, .toast-voce.ko { border-left-color: var(--ko); }
  .toast-voce.warn { border-left-color: var(--warn); }
  /* il vecchio contenitore unico #toast resta nelle pagine ma non si usa più */
  #toast.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: var(--z-toast); }

  /* === MODALE =========================================================== */
  .modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgb(0 0 0 / .45); display: grid; place-items: center; padding: var(--sp-3);
  }
  .modal-card {
    width: min(600px, 100%); max-height: 92vh; max-height: 92dvh;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden;
  }
  .modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  }
  .modal-head h2 { font-size: var(--fs-lg); }
  .modal-body { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; }
  .modal-foot {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2);
  }

  /* === PRONTEZZA DELL'AZIENDA (Gestione aziendale e wizard) ============ */
  .prontezza { display: flex; flex-direction: column; gap: var(--sp-3); }
  .prontezza-testa { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .prontezza-testa h2 { margin: 0 !important; flex: 1 1 auto; font-size: var(--fs-md); }
  .prontezza-voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-2); }
  .pv {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3);
    background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm);
  }
  a.pv:hover { border-color: var(--field-border); color: var(--text); background: var(--surface-2); }
  .pv-segno {
    width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: 1px;
    display: grid; place-items: center; font-size: 13px; font-weight: 800;
    color: var(--surface);
  }
  .pv[data-stato="PRONTO"] .pv-segno { background: var(--ok); }
  .pv[data-stato="AVVISO"] .pv-segno { background: var(--warn); }
  .pv[data-stato="MANCA"] .pv-segno { background: var(--ko); }
  .pv[data-stato="NON_VERIFICABILE"] .pv-segno { background: var(--text-muted); }
  .pv[data-stato="MANCA"] { border-color: var(--ko-border); }
  .pv[data-stato="AVVISO"] { border-color: var(--warn-border); }
  .pv-titolo { font-weight: 700; display: block; }
  .pv-msg { color: var(--text-muted); font-size: var(--fs-xs); display: block; margin-top: 2px; }

  /* stato di validità di un certificato (operatori, macchine) */
  .validita { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }
  .validita::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex: none; }
  .validita[data-stato="VALIDA"] { color: var(--ok); }        .validita[data-stato="VALIDA"]::before { background: var(--ok); }
  .validita[data-stato="IN_SCADENZA"] { color: var(--warn); } .validita[data-stato="IN_SCADENZA"]::before { background: var(--warn); }
  .validita[data-stato="SCADUTA"] { color: var(--ko); }       .validita[data-stato="SCADUTA"]::before { background: var(--ko); }
  .validita[data-stato="ASSENTE"] { color: var(--ko); }       .validita[data-stato="ASSENTE"]::before { background: transparent; border: 1.5px solid var(--ko); }

  /* schede anagrafiche (operatori, macchine) */
  .anagrafe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-3); }
  .anagrafe > :not(.anagrafe-voce) { grid-column: 1 / -1; }
  .anagrafe-voce {
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
    padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  }
  .anagrafe-voce.disattiva { opacity: .7; background: var(--surface-2); }
  .anagrafe-voce .av-testa { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
  .anagrafe-voce .av-nome { font-weight: 700; font-size: var(--fs-md); flex: 1 1 auto; }
  .anagrafe-voce .av-stati { display: flex; flex-direction: column; gap: 4px; }
  .anagrafe-voce .av-azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
  .anagrafe-voce .perche { margin: 0; }
  .anagrafe-voce li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); justify-content: space-between; }
  /* modulo dentro una scheda (certificato, correzione): la barra azioni non
     si allarga oltre i bordi come quella di una scheda intera */
  .sotto-scheda {
    border-top: 1px dashed var(--border); padding-top: var(--sp-3); margin-top: var(--sp-1);
  }
  .sotto-scheda h3 { margin: 0 0 var(--sp-3) !important; font-size: var(--fs-sm); }
  .sotto-scheda .form-actions {
    position: static; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
    border-radius: 0; background: transparent;
  }

  /* === AUTOCONTROLLO A SPUNTE (CTRL-28) ================================
     Tre stati per voce: rispettato / non rispettato / non spuntato. */
  #ac-riepilogo {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    position: sticky; top: calc(var(--topbar-h) + 48px); z-index: 5; padding: var(--sp-2) 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .ac-area {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
  }
  .ac-testa { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; }
  .ac-titolo { font-weight: 700; font-size: var(--fs-sm); }
  .ac-descrizione { margin: var(--sp-2) 0; font-size: var(--fs-sm); }
  .ac-scelta { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-2); margin-top: var(--sp-2); }
  .ac-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px; padding: var(--sp-2) var(--sp-3); cursor: pointer;
    border: var(--bw-field) solid var(--field-border); border-radius: var(--r-md);
    background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
  }
  .ac-btn input { margin: 0; }
  .ac-btn.ok:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
  .ac-btn.ko:has(input:checked) { border-color: var(--ko); background: var(--ko-bg); color: var(--ko); }
  .ac-nota { margin-top: var(--sp-2); width: 100%; }
  .ac-citazioni { margin-top: var(--sp-2); font-size: var(--fs-xs); }
  .ac-citazioni summary { color: var(--text-muted); min-height: 32px; display: flex; align-items: center; }
  .ac-citazioni ul { margin: var(--sp-2) 0 var(--sp-1); padding-left: 20px; }
  .ac-citazioni li { margin-bottom: var(--sp-2); }

  /* === MOTIVO IN LINEA (QdcUI.chiediMotivo) =========================== */
  .chiedi-motivo { margin-top: var(--sp-2); border-color: var(--warn-border); background: var(--warn-bg); }
  .chiedi-motivo .row-inline { width: 100%; }
}

/* ------------------------------------------------------------------ pages */
@layer pages {
  /* === CARTOGRAFIA (index.html): mappa a tutta altezza ================= */
  #app.pagina-mappa {
    padding: 0; gap: 0; align-items: stretch;
    height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
  }
  #app.pagina-mappa > .pannello-pagina {
    position: static; max-height: none; height: 100%;
    width: 340px; padding: var(--sp-4); gap: var(--sp-3);
    background: var(--surface); border-right: 1px solid var(--border);
  }
  #app.pagina-mappa > main { position: relative; display: block; }
  #map-wrap { position: relative; flex: 1; min-height: 320px; }
  #map { position: absolute; inset: 0; background: #0b0f0d; }
  .pannello-mappa-lista { flex: 1; min-height: 0; overflow-y: auto; }
  .pannello-mappa-lista .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 10px 12px; margin: 0 0 var(--sp-2); cursor: pointer;
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .pannello-mappa-lista .card:hover { border-color: var(--field-border); background: var(--surface-2); }
  .pannello-mappa-lista .card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
  .swatch { width: 8px; height: 34px; border-radius: 4px; background: var(--primary); flex: none; }
  .card-main { flex: 1; min-width: 0; }
  .card-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-area { font-size: var(--fs-xs); color: var(--primary); font-weight: 700; white-space: nowrap; }
  .side-foot { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--sp-2); }
  .toolbar-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .toolbar-row .btn { flex: 1 1 auto; }
  .apri-lista-mappa { display: none; }

  .basemap-switch {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 500;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 4px; display: flex; gap: 4px; box-shadow: var(--shadow-2); flex-wrap: wrap;
  }
  .basemap-switch button {
    border: none; background: transparent; color: var(--text-muted); font: inherit;
    padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: var(--fs-xs); font-weight: 700;
    min-height: 34px;
  }
  .basemap-switch button.active { background: var(--primary-soft); color: var(--text); }
  #basemap-switch #btn-rame.active { background: #7a4a1d; color: #ffe2b8; }
  #basemap-switch #btn-economia.active { background: #184f95; color: #e1eeff; }
  .draw-hint {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 500;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); box-shadow: var(--shadow-2);
  }
  /* Legende sopra il satellite: fondo sempre scuro e opaco, a ogni tema,
     perché sotto ci sono immagini e numeri da leggere (12/08/2026). */
  .rame-legend {
    position: absolute; right: var(--sp-3); top: 64px; z-index: var(--z-map-ui);
    background: rgb(20 26 34 / .95); border: 1px solid #2c3947;
    border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-xs); color: #e8eef5;
    max-width: 280px;
  }
  .rame-legend .rl-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
  .rame-legend .rl-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  .rame-legend small { display: block; margin-top: 7px; color: #b4c4d4; }
  .eco-pannello { max-width: 300px; background: rgb(16 22 29 / .97); }
  .eco-comandi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  .eco-comandi label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #b4c4d4; }
  .eco-comandi select, .eco-comandi input {
    background-color: #10161d; color: #e8eef5; border: 1px solid #5a6b7c;
    border-radius: 6px; padding: 4px 26px 4px 6px; min-height: 34px; font-size: var(--fs-sm); width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b4c4d4' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 10px 7px; background-position: right 8px center; background-repeat: no-repeat;
  }
  .eco-comandi input { background-image: none; padding-right: 6px; }
  #eco-legenda { margin-top: 9px; border-top: 1px solid #2c3947; padding-top: 8px; }
  #eco-legenda .rl-row { justify-content: space-between; }
  #eco-legenda .rl-val { color: #d4dfea; font-variant-numeric: tabular-nums; }
  #eco-legenda .eco-tot { display: block; margin-top: 8px; color: #e8eef5; font-weight: 600; }

  /* modale dell'appezzamento */
  #catastali { display: flex; flex-direction: column; gap: var(--sp-2); }
  .area-box {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
  }
  .area-box > div { display: flex; flex-direction: column; gap: 4px; }
  .area-box strong { font-size: var(--fs-lg); color: var(--primary); }
  .op-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .op-chip {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 5px 11px; font-size: var(--fs-xs); cursor: pointer; color: var(--text); font: inherit;
  }
  .op-chip:hover { border-color: var(--primary); color: var(--primary); }

  /* === ACCESSO (login.html): prima aveva un foglio di stile suo ========= */
  body.pagina-accesso {
    display: grid; justify-items: center; align-content: safe center;
    min-height: 100vh; min-height: 100dvh; padding: var(--sp-5) var(--sp-3);
  }
  .login-card {
    width: min(480px, 100%); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-2); padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-3);
  }
  .login-card .brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0; }
  .login-card .brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
  .login-card .brand-txt strong { font-size: var(--fs-md); }
  .login-card .brand-txt span { font-size: var(--fs-xs); color: var(--text-muted); }
  .login-card h1 { font-size: var(--fs-lg); margin: 4px 0 0; }
  .login-card p.hint, .login-card .hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; line-height: 1.5; }
  .login-card label { font-size: var(--fs-sm); font-weight: 600; display: block; margin-bottom: 4px; }
  .login-card input:not([type="checkbox"], [type="radio"]) { width: 100%; }
  #msg { font-size: var(--fs-sm); min-height: 18px; white-space: pre-line; }
  #msg.err, .msgbox.err { color: var(--ko); }
  #msg.ok, .msgbox.ok { color: var(--ok); }
  .msgbox:not(:empty) { border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); }
  .msgbox.err:not(:empty) { background: var(--ko-bg); }
  .msgbox.ok:not(:empty) { background: var(--ok-bg); }
  .setup-banner, .avviso {
    background: var(--primary-soft); border: 1px solid var(--ok-border);
    border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-xs); line-height: 1.5;
  }
  .login-card .tabs { display: flex; gap: var(--sp-2); }
  .login-card .tabs button {
    flex: 1; min-height: 44px; background: var(--surface-2); border: var(--bw-field) solid var(--border);
    color: var(--text-muted); border-radius: var(--r-md); font: inherit; font-weight: 600; cursor: pointer;
  }
  .login-card .tabs button.active { color: var(--text); border-color: var(--primary); background: var(--primary-soft); }
  .griglia2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .sezione-titolo {
    font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .06em; margin-top: 6px; border-top: 1px solid var(--border); padding-top: var(--sp-3);
  }
  a.linkino { color: var(--primary); font-size: var(--fs-xs); cursor: pointer; }
  .tema-login { position: fixed; top: var(--sp-3); right: var(--sp-3); }

  /* === ECONOMIA: celle modificabili e righe di totale =================== */
  .cella-bilancio { font-variant-numeric: tabular-nums; }

  /* === OPERAZIONI: banner del catalogo e dettaglio ===================== */
  .stato-catalogo { font-size: var(--fs-xs); color: var(--text-muted); }

  /* === PAGINE NON PILOTA: inizio (migrazione dell'ossatura, 26/09/2026) === */

  /* Cartografia (index.html, `body.con-mappa`).
     1) Sotto gli 820 px il pannello dell'elenco è in posizione assoluta:
        senza un contenitore posizionato si ancorava alla pagina intera e,
        spinto fuori dallo schermo, `overflow: hidden` di #app non lo
        ritagliava.
     2) L'altezza di #app sottraeva la sola barra superiore, ma sopra la
        mappa c'è anche l'intestazione della pagina (ui.js): la pagina
        scorreva di quell'altezza, e sopra la mappa la rotella e il dito
        muovono la mappa, non la pagina. Il corpo diventa una colonna alta
        quanto lo schermo e la mappa prende lo spazio che resta. */
  #app.pagina-mappa { position: relative; }
  body.con-mappa {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
  }
  body.con-mappa > .topbar, body.con-mappa > .testa-pagina { flex: none; }
  body.con-mappa > #app.pagina-mappa { flex: 1 1 auto; height: auto; min-height: 0; }
  /* 3) Tutto ciò che sta sulla mappa (controlli di Leaflet a z-index 1000,
        legenda del rame a 800) resta dentro la mappa: senza un contesto
        proprio saliva sopra il pannello dell'elenco (700) aperto sul
        telefono. */
  #app.pagina-mappa > main { z-index: 0; }
  /* 4) Testata del pannello, solo sotto gli 820 px: aperto, il pannello
        copre il pulsante «Appezzamenti», quindi si chiude da qui. */
  .pannello-mappa-testa { display: none; }
  @media (max-width: 820px) {
    .pannello-mappa-testa {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 0;
    }
  }

  /* Report: l'anno comanda la pagina; un anno non ha bisogno di un campo
     largo quanto lo schermo */
  .filtro-pagina { align-self: flex-start; max-width: 100%; }
  .filtro-pagina input { max-width: 10rem; }

  /* riquadri della colonna laterale (alert, amministrazione) */
  .pannello-pagina .riquadro > .list-head:first-child { margin-top: 0; }
  .pannello-pagina .riquadro p:last-child { margin-bottom: 0; }

  /* elenchi dentro «Perché?» (import): i numeri restano dentro il riquadro */
  .perche > ol, .perche > ul { padding-left: calc(var(--sp-3) + 1.5em); }
  .perche li { margin-bottom: var(--sp-1); }

  /* dettaglio aperto da un elenco più in basso: lo scorrimento non lo
     lascia sotto la barra superiore */
  #dettaglio-card, #dettaglio-partita { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }

  /* Voci `.item` fuori da un `.list` (che ha il suo `gap`): il foglio
     precedente dava a ogni voce un margine, questo no, e si toccavano */
  :is(#imports, #records, #d-controlli, #release-elenco) > .item + .item { margin-top: var(--sp-2); }

  /* alert: una scheda per alert, con i comandi in fila */
  #lista-alert { display: flex; flex-direction: column; gap: var(--sp-3); }
  #lista-alert .toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

  /* === REGISTRO A CALENDARIO (operazioni.html?vista=registro, 28/09/2026)
     Il tipo si legge dalla sigla (T, F, R, A), non dal colore: i colori di
     stato (ok/warn/ko) qui direbbero un esito che non c'è. */
  .cal-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
  .cal-barra h3 { margin: 0 var(--sp-2); min-width: 10rem; text-align: center; text-transform: capitalize; align-self: center; }
  .cal-barra .cal-periodo { margin-left: auto; min-width: 10rem; }
  .cal-filtri-box > summary {
    cursor: pointer; font-weight: 700; min-height: 44px;
    display: flex; align-items: center; gap: var(--sp-2);
  }
  .cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: var(--sp-3); }
  .cal-griglia[hidden] { display: none; }
  .cal-intest { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-align: center; text-transform: uppercase; }
  .cal-giorno {
    min-height: 4.75rem; min-width: 0; padding: 4px 5px; text-align: left;
    display: flex; flex-direction: column; gap: 3px; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  }
  .cal-giorno:hover:not([disabled]) { background: var(--surface-2); border-color: var(--field-border); }
  .cal-giorno[disabled] { cursor: default; color: var(--text-muted); background: transparent; }
  .cal-giorno.fuori { visibility: hidden; }
  .cal-giorno.oggi { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
  .cal-giorno[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); }
  .cal-num { font-size: var(--fs-xs); font-weight: 700; }
  .cal-segni { display: flex; flex-wrap: wrap; gap: 3px; }
  .cal-segno {
    font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 5px; white-space: nowrap;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text);
  }
  .cal-segno.nc { color: var(--ko); border-color: var(--ko-border); background: var(--ko-bg); }
  .cal-agenda { display: flex; flex-direction: column; gap: var(--sp-2); }
  .cal-agenda-giorno {
    margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
  }
  .cal-voce { font: inherit; color: inherit; text-align: left; width: 100%; }

  /* === METEO E ALLERTE (meteo.html, 28/09/2026) ======================== */
  .meteo-giorni { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-2); }
  .meteo-giorno { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); background: var(--surface); }
  .meteo-giorno h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
  .meteo-rischio { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 2px 0; }
  .allerta-campione {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid var(--text); background: var(--surface-2);
  }
  .allerta-campione.NESSUNA { background: var(--allerta-nessuna); }
  .allerta-campione.GIALLA { background: var(--allerta-gialla); }
  .allerta-campione.ARANCIONE { background: var(--allerta-arancione); }
  .allerta-campione.ROSSA { background: var(--allerta-rossa); }
  .meteo-misure { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--sp-2); }
  .meteo-avvisi { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding-left: 1.2em; }

  /* === STORICO METEO (meteo.html?vista=storico, 28/09/2026) ============= */
  .icona-meteo { flex: none; display: block; }
  .im-sole circle { fill: var(--meteo-sole); }
  .im-sole line { stroke: var(--meteo-sole); stroke-width: 2.4; stroke-linecap: round; }
  .im-nube { fill: var(--meteo-nube); stroke: var(--meteo-bordo); stroke-width: 1.2; }
  .im-scura { fill: var(--meteo-nube-scura); }
  .im-ignoto { fill: none; stroke-dasharray: 3 2; }
  .im-punto { font: 700 12px system-ui, sans-serif; fill: var(--text-muted); text-anchor: middle; }
  .im-goccia { fill: var(--meteo-pioggia); }
  .im-chicco { fill: var(--meteo-grandine); stroke: var(--meteo-bordo); stroke-width: 1; }
  .im-fulmine { fill: var(--meteo-fulmine); stroke: var(--meteo-bordo); stroke-width: .6; }
  .im-gelo line { stroke: var(--meteo-gelo); stroke-width: 1.8; stroke-linecap: round; }
  .im-caldo rect, .im-caldo circle { fill: var(--meteo-caldo); }
  .storico-avanzamento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .storico-avanzamento progress { flex: 1 1 12rem; height: 12px; accent-color: var(--primary); }
  .storico-serie { margin-top: var(--sp-3); }
  .storico-striscia { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
  .storico-voce {
    flex: 0 0 auto; width: 7.5rem; min-height: 9rem; padding: var(--sp-2);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    font-size: var(--fs-xs);
  }
  .storico-voce.provvisoria { border-style: dashed; }
  .storico-voce.senza-dati { opacity: .6; }
  .storico-voce .sv-periodo { font-weight: 700; }
  .storico-voce .sv-grandine { color: var(--ko); font-weight: 700; }
  .storico-voce .sv-tratt { color: var(--info); font-weight: 700; }
  /* le diciture vanno a capo: su una riga sola spingevano i valori fuori
     schermo (collaudo del 28/09/2026) */
  .storico-serie .tbl td:nth-child(2) { white-space: normal; min-width: 14rem; max-width: 24rem; }
  .storico-serie .tbl td:last-child, .storico-serie .tbl td:nth-child(10) { white-space: normal; min-width: 12rem; }
  .storico-grafico { width: 100%; height: 180px; display: block; }
  .storico-grafico .sg-pioggia { fill: var(--meteo-pioggia); opacity: .75; }
  .storico-grafico .sg-tmax { fill: none; stroke: var(--meteo-caldo); stroke-width: 2; }
  .storico-grafico .sg-tmin { fill: none; stroke: var(--meteo-gelo); stroke-width: 2; }
  .storico-grafico .sg-grandine { fill: var(--ko); }
  .storico-grafico .sg-tratt { stroke: var(--info); stroke-width: 1.5; stroke-dasharray: 3 3; }
  .storico-grafico text { font: 11px system-ui, sans-serif; fill: var(--text-muted); }
  .storico-grafico .sg-asse { stroke: var(--border); }
  .storico-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
  .storico-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; background: currentColor; }
  .storico-legenda .l-pioggia { color: var(--meteo-pioggia); }
  .storico-legenda .l-tmax { color: var(--meteo-caldo); }
  .storico-legenda .l-tmin { color: var(--meteo-gelo); }
  .storico-legenda .l-grandine { color: var(--ko); }
  .storico-legenda .l-tratt { color: var(--info); }

  /* === PAGINE NON PILOTA: fine === */
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .mt-0 { margin-top: 0 !important; }
  .mt-2 { margin-top: var(--sp-2); }
  .mt-3 { margin-top: var(--sp-3); }
  .mt-4 { margin-top: var(--sp-4); }
  .mb-3 { margin-bottom: var(--sp-3); }
  .nowrap { white-space: nowrap; }
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ======================= Adattamento agli schermi =========================
   Una soglia sola per il cassetto: 820 px (deve combaciare con
   LARGHEZZA_CASSETTO in ui.js). Sopra: menu laterale fisso. Sotto: menu a
   cassetto dal comando ☰, che si chiude toccando fuori, con Esc o scegliendo
   una voce. */
@media (max-width: 1100px) {
  :root { --sidebar-w: 240px; }
  .pannello-pagina { width: 280px; }
}
@media (max-width: 960px) {
  #app:not(.pagina-mappa) { flex-direction: column; align-items: stretch; }
  #app:not(.pagina-mappa) > .pannello-pagina { width: auto; position: static; max-height: none; order: 2; }
}

@media (max-width: 820px) {
  :root { --card-pad: 14px; }
  .nav-toggle { display: grid; width: 44px; height: 44px; }
  .tb-marchio { width: auto; }
  .tb-nome { display: none; }
  .tb-title { visibility: visible; }
  .topbar { gap: var(--sp-2); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  #sidebar {
    width: min(86vw, 320px); transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: var(--shadow-2);
    padding-left: max(var(--sp-2), env(safe-area-inset-left));
  }
  body.nav-open #sidebar { transform: none; }
  body.nav-open .nav-backdrop { display: block; }
  .testa-pagina, #app { margin-left: 0; --gutter: var(--sp-3); }
  .testa-pagina { padding: var(--sp-4) var(--sp-3) 0; }
  /* ⚠ le media query stanno FUORI dagli strati e vincono su tutto ciò che è
     stratificato: la mappa va esclusa esplicitamente, altrimenti eredita il
     margine in fondo pensato per le pagine con la barra di salvataggio
     (misurato il 26/09/2026: fascia vuota di 96 px sotto la mappa) */
  #app:not(.pagina-mappa) { padding: var(--sp-3) var(--sp-3) calc(96px + env(safe-area-inset-bottom)); gap: var(--sp-3); }
  h1 { font-size: var(--fs-xl); }
  .viste { margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-3)); padding: 0 var(--sp-2); }
  #auth-badge .ab-dettaglio, #auth-badge .ab-nome { display: none; }
  .tema-btn { width: 44px; height: 44px; }

  /* comandi a misura di dito (44 px), soprattutto le azioni distruttive;
     `.btn-sm` a 38 px è la scelta deliberata per i comandi secondari */
  .btn { min-height: 44px; padding: 0 14px; }
  /* registro a calendario: sul telefono solo l'agenda del periodo (sette
     colonne a 390 px darebbero giorni larghi 45 px, illeggibili) */
  .cal-griglia { display: none; }
  .cal-barra h3 { min-width: 0; flex: 1 1 8rem; }
  .cal-barra .cal-periodo { margin-left: 0; flex: 1 1 100%; }
  .btn-sm { min-height: 38px; padding: 0 12px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .nav-sezioni a { min-height: 44px; }
  .nav-gruppo > summary { min-height: 44px; }

  /* campi a 16 px sul touch: sotto i 16 px iOS ingrandisce la pagina da
     solo quando si tocca un campo (anche i campi dentro le tabelle) */
  .search input, .field input, .field select, .field textarea,
  .add-coltura input, .row-inline input, .row-inline select,
  .filtri select, .filtri input, .ac-nota {
    font-size: 16px; min-height: 44px;
  }
  .tbl input, .tbl select { font-size: 16px; min-height: 44px; padding: 10px; }
  .tbl input[type="checkbox"] { width: 24px; min-width: 24px; height: 24px; min-height: 0; }
  .field input[type="checkbox"] { width: 22px; height: 22px; }

  /* `nowrap`: in una colonna che va a capo la larghezza di ogni «riga» si
     misura sul contenuto più largo — la voce più lunga della tendina
     «categoria fitoiatrica» — e la pagina si allargava a 662 px (misurato a
     390 px con i dati veri il 26/09/2026) */
  .filtri { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-1); }
  .filtri > label:has(select, input[type="text"], input[type="search"]) { flex-direction: column; align-items: stretch; gap: 4px; }
  .part-row { grid-template-columns: 1fr 1fr; }
  .stepper { top: var(--topbar-h); margin-left: calc(-1 * var(--card-pad)); margin-right: calc(-1 * var(--card-pad)); padding: 0 var(--sp-2); }
  .stepper a { padding: 0 var(--sp-2); gap: 6px; }
  .viste { scrollbar-width: none; }
  .form-actions .stato, .wiz-actions .stato, #verifica-hint { font-size: var(--fs-xs); }
  #ac-riepilogo { top: calc(var(--topbar-h) + 48px); }
  .ac-btn { min-height: 46px; font-size: 15px; }

  /* modale: pannello dal basso, a tutta larghezza */
  .modal { place-items: end stretch; padding: 0; }
  .modal-card { width: 100%; max-height: 94dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-foot { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .toast-pila { right: var(--sp-3); left: var(--sp-3); width: auto; }

  /* cartografia: l'elenco diventa un pannello richiamabile sopra la mappa */
  #app.pagina-mappa > .pannello-pagina {
    position: absolute; z-index: 700; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: auto; max-height: 62%; overflow-y: auto;
    border-right: 0; border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2);
    transform: translateY(calc(100% + 10px)); transition: transform .22s ease;
  }
  #app.pagina-mappa.lista-aperta > .pannello-pagina { transform: none; }
  .apri-lista-mappa {
    display: inline-flex; position: absolute; left: var(--sp-3); bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); z-index: 600;
    box-shadow: var(--shadow-2);
  }
  .basemap-switch { top: 10px; right: 10px; }
  .rame-legend { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); right: 10px; max-width: min(280px, calc(100vw - 20px)); }
}

@media (max-width: 620px) {
  .ac-scelta { grid-template-columns: 1fr 1fr; }
  .ac-scelta .ac-azzera { grid-column: 1 / -1; }
  .part-row { grid-template-columns: 1fr; }
  .griglia2 { grid-template-columns: 1fr; }
  .login-card { padding: var(--sp-4); }
  .modal-body { padding: var(--sp-4); }
  .modal-head, .modal-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .draw-hint { left: 10px; right: 10px; transform: none; text-align: center; }
  .form-actions, .wiz-actions { justify-content: stretch; }
  .form-actions .btn-primary, .wiz-actions .btn-primary { flex: 1 1 auto; }
  .form-actions .stato, .wiz-actions .stato, #verifica-hint { flex: 1 1 100%; }
}

/* stampa: via barre, menu e comandi; restano i dati */
@media print {
  .topbar, #sidebar, .nav-backdrop, .viste, .azioni-pagina, .form-actions,
  .wiz-actions, .toast-pila, #pwa-banner, .skip-link, .stepper { display: none !important; }
  .testa-pagina, #app { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff; color: #000; }
  main .card { box-shadow: none; break-inside: avoid; }
}

/* Chi preferisce meno animazioni (impostazione di sistema) non le subisce */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- fuori dagli strati: correzioni che devono vincere su leaflet.css --- */
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { font-size: 11px; }
/* il banner della PWA (pwa.js, stile in linea) usciva dallo schermo a 390 px */
#pwa-banner { max-width: calc(100vw - 24px) !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; }