/* ===================================================================
   Gestionale — identità corporate (stile approvato)
   -------------------------------------------------------------------
   NOTA DI MANUTENZIONE — il foglio conteneva DUE COPIE complete di se
   stesso (92 KB + 99 KB): la seconda era la versione aggiornata, la
   prima restava sotto e continuava ad applicarsi per tutte le regole
   che la seconda non ridefiniva. Copia rimossa: restano solo le regole
   in uso, più il blocco «Campo a categorie» che esisteva unicamente
   nella copia vecchia e che è stato riportato in fondo al file.
   =================================================================== */
/* [identità corporate — regole in uso]
   Palette: inchiostro ardesia, carta grigio-freddo, blu istituzionale.
   Firma visiva: sidebar con brand-mark quadrato + striscia replica.
   Novità di questa versione: menu Amministrazione come tendina sotto
   il nome utente nel topbar (solo per gli abilitati).
   =================================================================== */
:root {
  --ink: #1e2732;          /* inchiostro ardesia */
  --ink-soft: #3d4b5c;
  --paper: #eef1f4;        /* carta grigio-freddo */
  --card: #ffffff;
  --line: #d7dde4;
  --blu: #1f5fa8;          /* blu istituzionale */
  --blu-scuro: #17497f;
  --blu-tenue: #e7eef7;
  --ok: #1b7a4b;  --ok-bg: #e2f3ea;
  --err: #a83232; --err-bg: #f9e8e8;
  --warn-bg: #fdf3dd; --warn-testo: #6b4f14; --warn-bordo: #e3cf9a;
  --r: 6px;
  /* alias usati dalle regole aggiunte in seguito: puntano alla stessa palette */
  --bordo: #d7dde4; --sfondo: #eef1f4; --carta: #ffffff; --grigio-500: #3d4b5c;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "Consolas", monospace;
  /* barra in alto: colori a sé, così restano leggibili in entrambi i temi */
  --barra: #1e2732;
  --barra-testo: #cfd8e2;
  --barra-testo-forte: #ffffff;
  --barra-bottone: rgba(255, 255, 255, .10);
  --barra-bottone-hover: rgba(255, 255, 255, .20);
  --barra-bordo: rgba(255, 255, 255, .24);
  --riga-alterna: #f7f9fb;
  --campo: #ffffff;          /* sfondo di caselle di testo, date, elenchi */
  --tbl-testa: #1e2732;      /* fondo dell'intestazione delle tabelle */
  --tbl-testa-testo: #e7edf3;
  --ombra: rgba(15, 26, 42, .16);
}

/* ===================================================================
   ASPETTO SCURO
   -------------------------------------------------------------------
   Si attiva dal menu utente ed è salvato sul profilo, quindi arriva già
   applicato dal server (niente lampeggio chiaro all'apertura). Sono
   ridefinite le variabili della tavolozza: tutto ciò che le usa segue
   automaticamente. I pochi colori scritti a mano nel foglio di stile
   sono riportati qui sotto uno per uno.
   =================================================================== */
[data-tema="scuro"] {
  --ink: #e6ecf3;          /* il testo diventa chiaro */
  --ink-soft: #a9b6c6;
  --paper: #141a21;        /* sfondo della pagina */
  --card: #1c242e;         /* riquadri */
  --line: #2f3b48;
  --blu: #4f93e0;
  --blu-scuro: #79b0ef;
  --blu-tenue: #21344a;
  --ok: #4cc38a;  --ok-bg: #16302a;
  --err: #f0736a; --err-bg: #3a1f1f;
  --warn-bg: #3a2f16; --warn-testo: #f5d98a; --warn-bordo: #6b5520;
  --bordo: #2f3b48; --sfondo: #141a21; --carta: #1c242e; --grigio-500: #a9b6c6;
  --barra: #10161d;
  --barra-bottone: rgba(255, 255, 255, .08);
  --barra-bottone-hover: rgba(255, 255, 255, .16);
  --barra-bordo: rgba(255, 255, 255, .18);
  --riga-alterna: #1f2831;
  --campo: #131a21;
  --tbl-testa: #0f151b;
  --tbl-testa-testo: #dbe6f2;
  --ombra: rgba(0, 0, 0, .5);
  color-scheme: dark;
}
[data-tema="scuro"] html, [data-tema="scuro"] body { background: var(--paper); }
/* nel tema scuro il pulsante «aperto» non può essere bianco pieno */
[data-tema="scuro"] #menu-sezioni[open] > .nav-voce { background: var(--riga-alterna); }
[data-tema="scuro"] .ramo-voci li { border-top-color: var(--line); }
[data-tema="scuro"] .btn-ghost { background: transparent; color: var(--ink); }
[data-tema="scuro"] .galleria-voce, [data-tema="scuro"] .sel-icona-voce,
[data-tema="scuro"] .filtro-menu > summary { background: var(--card); color: var(--ink); }
[data-tema="scuro"] .menu-titolo-gruppo { color: var(--ink-soft); }
[data-tema="scuro"] img.icona-img { filter: brightness(1.35); }
* { box-sizing: border-box; }
/* Una sola freccia per pulsante: il triangolino nativo di <summary> compare in
   alcuni browser e non in altri, affiancandosi al nostro e mostrandone due.
   Lo spegniamo ovunque e teniamo il nostro, di misura uniforme. */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
.titolo-caret, .filter-dropdown-arrow, .menu-freccia {
  font-size: 12px; line-height: 1; color: inherit; opacity: .75;
}
/* Lo sfondo va dichiarato anche su <html>: senza, tra un caricamento e l'altro
   il browser dipinge per un istante il proprio sfondo predefinito (che con il
   tema scuro di sistema è nero) e si vede un lampo scuro a ogni aggiornamento. */
html { background: var(--paper); color-scheme: light; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--paper); color: var(--ink); font-size: 15px; }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: .85em; background: var(--blu-tenue); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: 0 0 232px; background: var(--ink); color: #cfd8e2;
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: var(--r); background: var(--blu);
  color: #fff; font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-name { font-weight: 600; color: #fff; letter-spacing: .3px; }
.nav { display: flex; flex-direction: column; padding: 6px 10px 16px; gap: 1px; flex: 1; overflow-y: auto; }
.nav-section {
  margin: 14px 8px 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; color: #7f8ea0;
}
.nav-link {
  color: #cfd8e2; padding: 8px 10px; border-radius: var(--r); font-size: 14px;
}
.nav-link:hover { background: #2a3543; color: #fff; text-decoration: none; }
.nav-sub { font-size: 13px; color: #9fb0c2; }
.replica-strip {
  padding: 10px 16px; border-top: 1px solid #2a3543; font-size: 12px;
  color: #7f8ea0; display: flex; gap: 8px; align-items: center;
}
.replica-strip code { background: #2a3543; color: #aebdcd; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px; min-height: 58px; position: relative; z-index: 20;
}
.page-title { font-size: 19px; margin: 0; font-weight: 600; }
/* Il contenuto è incolonnato al centro dello spazio disponibile: senza
   «margin-inline: auto» il tetto di 1180px restava ancorato a sinistra e su
   uno schermo largo tutta la pagina risultava spostata da un lato. */
.content { padding: 22px; max-width: 1180px; width: 100%; margin-inline: auto; }

/* --------------------------------------------- menu utente (dropdown) */
/* L'aspetto del pulsante utente è definito una volta sola più avanti, insieme
   a quello del pulsante di sezione: qui resta solo l'animazione della freccia.
   (Le vecchie regole duplicate sono state tolte: erano sovrascritte e facevano
   ricomparire il testo grigio su fondo scuro.) */
#menu-sezioni[open] > .nav-voce .menu-freccia { transform: rotate(180deg); }
.menu-titolo-gruppo {
  margin: 8px 10px 2px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; color: #7f8ea0;
}

/* ------------------------------------------------------------- carte */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; }
.card .hint, .hint { color: var(--ink-soft); font-size: 13px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat b { font-size: 26px; }

/* ----------------------------------------------------------- tabelle */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; background: var(--card); font-size: 14px; }
.tbl th {
  background: var(--tbl-testa); color: var(--tbl-testa-testo);
  text-align: left; padding: 8px 10px;
  position: sticky; top: 0; font-weight: 600; white-space: nowrap;
}
.tbl th a { color: var(--tbl-testa-testo); }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:hover { background: var(--blu-tenue); }

/* --------------------------------------------------------------- form */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1; }
.form-group.grow { flex: 2; }
label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=file], input[type=search], input[type=time],
input[type=datetime-local], select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--campo); color: var(--ink); width: 100%;
}
/* il calendario e le frecce dei campi nativi seguono il tema */
input[type=date], input[type=time], input[type=datetime-local] { color-scheme: inherit; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blu); outline: none; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; color: var(--ink); }
.check input { width: auto; }
.opzioni-multi { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 6px 0; }

/* ------------------------------------------------------------ bottoni */
.btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; cursor: pointer;
  background: var(--blu); color: #fff; border: 1px solid var(--blu-scuro);
  border-radius: var(--r); padding: 7px 14px; font-size: 14px;
}
.btn:hover { background: var(--blu-scuro); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--blu); border-color: var(--line); }
.btn-ghost:hover { background: var(--blu-tenue); color: var(--blu-scuro); }
.btn-danger { background: var(--err); border-color: #8c2626; }
.btn-danger:hover { background: #8c2626; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.form-actions { display: flex; gap: 10px; margin-top: 14px; }

/* --------------------------------------------------------- badge/flash */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-on { background: var(--ok-bg); color: var(--ok); }
.badge-off { background: var(--err-bg); color: var(--err); }
.badge-blu { background: var(--blu-tenue); color: var(--blu-scuro); }
.badge-multi { background: var(--blu-tenue); color: var(--blu-scuro); margin: 0 3px 3px 0; }
.flash { padding: 10px 14px; border-radius: var(--r); margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--err-bg); color: var(--err); }
.flash-warn { background: var(--warn-bg); color: var(--warn-testo); }

/* --------------------------------------------------------- utilities */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.toolbar .form-group { min-width: 150px; flex: 0 1 auto; }
.paginazione { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }
.analisi-riga td { background: #f3f7fc; font-weight: 600; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.login-card { width: 360px; background: var(--card); border-radius: 8px; padding: 26px; }
.login-card .brand { padding: 0 0 14px; }
.login-card .brand-name { color: var(--ink); }

/* ------------------------------------------------------- mobile bar */
.mobilebar { display: none; }
.hamburger { display: none; }
.nav-overlay { display: none; }

@media (max-width: 1024px) {
  .shell { flex-direction: column; }
  .mobilebar {
    display: flex; align-items: center; gap: 12px; background: var(--ink);
    color: #fff; padding: 10px 14px; position: sticky; top: 0; z-index: 60;
  }
  .mobilebar .btn-ghost { color: #cfd8e2; border-color: #3d4b5c; margin-left: auto; }
  .hamburger { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: 6px; cursor: pointer; }
  .hamburger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%);
    transition: transform .18s ease; z-index: 80;
  }
  body.nav-aperta .sidebar { transform: none; }
  .nav-overlay { position: fixed; inset: 0; background: rgba(20,26,33,.5); z-index: 70; }
  body.nav-aperta .nav-overlay { display: block; }
  .sidebar .brand { display: none; }
  .content { padding: 14px; }
  .topbar { padding: 8px 14px; }
  .form-group { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Filtri a tendina multi-selezione (porting filter-dropdown vecchia app) ── */
.filtro-menu { position: relative; }
.filtro-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  border: 1px solid var(--bordo, #d7dce3); border-radius: 8px;
  padding: 8px 12px; background: var(--carta, #fff); font-size: .92rem;
  white-space: nowrap;
}
.filtro-menu > summary::-webkit-details-marker { display: none; }
.filtro-menu > summary::after { content: " ▾"; color: var(--grigio-500, #6b7280); }
/* I pulsanti dei filtri (gestione dati e report) non hanno frecce: ne
   avevano due, questa generica dei menu e una scritta nel modello. Il
   pulsante si legge già come un comando da aprire. */
.filtro-menu > summary.filter-dropdown-btn::after { content: none; }
.filtro-menu[open] > summary { border-color: var(--blu, #1e3a5f); }
.filtro-voci {
  position: absolute; z-index: 30; min-width: 210px; max-height: 260px; overflow: auto;
  background: var(--carta, #fff); border: 1px solid var(--bordo, #d7dce3);
  border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 26, 42, .14);
  padding: 8px 10px; margin-top: 6px; display: grid; gap: 2px;
}
.filtro-voci .check { display: flex; gap: 8px; align-items: center; padding: 3px 2px; }
.colonne-menu > summary { border: 0; padding: 0; background: none; }
.colonne-menu .filtro-voci { right: auto; }

/* ── Lista valori: chips per il testo lungo ── */
.lista-valori-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lista-chip {
  border: 1px solid var(--bordo, #d7dce3); background: var(--sfondo, #f5f7fa);
  border-radius: 999px; padding: 3px 10px; font-size: .82rem; cursor: pointer;
}
.lista-chip:hover { border-color: var(--blu, #1e3a5f); }

/* ── Autocomplete vincolato da tabella esterna ── */
.autocomplete-wrapper { position: relative; }
.autocomplete-list {
  position: absolute; z-index: 40; left: 0; right: 0; margin: 4px 0 0; padding: 4px;
  list-style: none; background: var(--carta, #fff);
  border: 1px solid var(--bordo, #d7dce3); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 26, 42, .14); max-height: 240px; overflow: auto;
}
.autocomplete-list li { padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: .9rem; }
.autocomplete-list li:hover { background: var(--sfondo, #f5f7fa); }
.input-error { border-color: #e53e3e !important; }
.input-error-msg { font-size: .78rem; color: #e53e3e; margin-top: 2px; }

/* ── Dettagli inline (sezione tabella esterna nel form campo) ── */
.card-inline { border: 1px dashed var(--bordo, #d7dce3); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.card-inline > summary { cursor: pointer; font-weight: 600; }


/* ── Import CSV ── */
.import-preview .col-esclusa { opacity: .4; text-decoration: line-through; }
.import-step { border-left: 3px solid var(--blu, #1e3a5f); padding-left: 12px; margin: 14px 0; }

/* ── Titolo-tendina: il nome della tabella è il selettore ── */
.page-title { display: flex; align-items: center; gap: 10px; }
.titolo-menu { position: relative; }
.titolo-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px; border-radius: 8px;
}
.titolo-menu > summary::-webkit-details-marker { display: none; }
.titolo-menu > summary:hover { background: var(--sfondo, #f5f7fa); }
.titolo-caret { font-size: .7em; color: var(--grigio-500, #6b7280); }
.titolo-voci {
  position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px; min-width: 260px;
  max-height: 380px; overflow: auto; padding: 6px;
  background: var(--carta, #fff); border: 1px solid var(--bordo, #d7dce3);
  border-radius: 12px; box-shadow: 0 14px 30px rgba(15, 26, 42, .16);
  display: grid; gap: 2px;
}
.titolo-voci a {
  display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: .95rem; font-weight: 500; color: inherit;
}
.titolo-voci a:hover { background: var(--sfondo, #f5f7fa); }
.titolo-voci a.attiva { background: var(--sfondo, #f5f7fa); font-weight: 700; }
.titolo-sep { display: block; height: 1px; background: var(--bordo, #d7dce3); margin: 4px 2px; }
.pin-form { margin: 0; }
.pin-attivo { border-color: var(--blu, #1e3a5f); }
.nav-hint { display: block; padding: 6px 14px; font-size: .78rem; color: var(--grigio-500, #6b7280); }

/* ── Pannello filtri (stessa impostazione della vecchia app) ── */
.filter-panel {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bordo, #d7dce3);
}
.filter-field { position: relative; }
.filter-dropdown-btn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--bordo, #d7dce3); border-radius: 999px; padding: 7px 14px;
  background: var(--carta, #fff); font-size: .88rem; white-space: nowrap;
}
.filter-dropdown-btn::-webkit-details-marker { display: none; }
.filter-dropdown-btn.active { border-color: var(--blu, #1e3a5f); background: var(--sfondo, #f5f7fa); }
.filter-dropdown-label { font-weight: 600; }
.filter-dropdown-value { color: var(--grigio-500, #6b7280); }
.filter-dropdown-arrow { font-size: .7em; color: var(--grigio-500, #6b7280); }
.filter-active-count {
  background: var(--blu, #1e3a5f); color: #fff; border-radius: 999px;
  font-size: .72rem; padding: 1px 7px; font-weight: 700;
}
.filter-dropdown-panel {
  position: absolute; z-index: 50; margin-top: 6px; min-width: 240px;
  background: var(--carta, #fff); border: 1px solid var(--bordo, #d7dce3);
  border-radius: 12px; box-shadow: 0 12px 26px rgba(15, 26, 42, .16); overflow: hidden;
}
.filter-dropdown-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--bordo, #d7dce3);
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--grigio-500, #6b7280);
}
.filter-dropdown-clear { font-size: .74rem; color: #b23; text-decoration: none; }
.filter-dropdown-list { max-height: 260px; overflow: auto; padding: 6px; display: grid; gap: 1px; }
.filter-dropdown-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: 7px; cursor: pointer; font-size: .9rem;
}
.filter-dropdown-item:hover { background: var(--sfondo, #f5f7fa); }
.filter-dropdown-item.checked { background: var(--sfondo, #f5f7fa); font-weight: 600; }
.filter-dropdown-item.special { font-style: italic; color: var(--grigio-500, #6b7280); }
.filter-dropdown-empty { padding: 10px 12px; font-size: .85rem; color: var(--grigio-500, #6b7280); }
/* Cella delle categorie: la categoria in evidenza, le sottocategorie scelte
   incolonnate sotto. È l'unica cella che può occupare più righe. */
.tbl-dati td:has(.cella-categoria) { white-space: normal; }
.cella-categoria { margin-bottom: 4px; }
.cella-categoria:last-child { margin-bottom: 0; }
.cella-cat-nome {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); font-weight: 700;
}
.cella-cat-voce { display: block; padding-left: 9px; line-height: 1.35; }
.cella-cat-voce::before { content: "· "; color: var(--ink-soft); }

/* Filtri sempre in vista, subito sotto la ricerca: aprirli con un pulsante
   era un passaggio in più proprio dove si lavora di continuo, e nascondeva
   quali filtri esistono.
   Sul telefono invece il pulsante resta: lì ogni filtro occupa una riga
   intera, e con quattro o cinque filtri (più i criteri avanzati del report)
   i dati finirebbero uno schermo più in basso. Il pannello parte già aperto
   se c'è un filtro attivo, così non si perde di vista che cosa è applicato.
   «solo-telefono» marca ciò che serve solo lì: il pulsante e, se resta
   vuota, la barra che lo contiene. */
#pannello-filtri { display: flex; }
.barra-filtri { display: flex; margin: 0 0 10px; }
.solo-telefono { display: none !important; }
@media (max-width: 640px) {
  #pannello-filtri { display: none; }
  #pannello-filtri.zona-aperta { display: flex; }
  .barra-filtri.solo-telefono { display: flex !important; }
  .btn.solo-telefono { display: inline-flex !important; }
}

/* Prima colonna bloccata durante lo scorrimento orizzontale (solo quando le
   frecce sono attive, cioè da 26 righe in su): resta il riferimento per capire
   di quale record si sta leggendo la riga. Anche la colonna delle spunte resta
   ferma, altrimenti scorrerebbe sotto quella bloccata. */
.tbl-scroll.con-frecce .tbl-dati .col-check,
.tbl-scroll.con-frecce .tbl-dati .col-ferma {
  position: sticky; z-index: 3; background: var(--card);
}
.tbl-scroll.con-frecce .tbl-dati .col-check { left: 0; }
.tbl-scroll.con-frecce .tbl-dati .col-ferma { left: 44px; box-shadow: 1px 0 0 var(--line); }
/* se l'utente non ha i permessi di scrittura la colonna delle spunte non c'è:
   la prima colonna parte allora dal bordo */
.tbl-scroll.con-frecce .tbl-dati tr > .col-ferma:first-child { left: 0; }
.tbl-scroll.con-frecce .tbl-dati thead .col-check,
.tbl-scroll.con-frecce .tbl-dati thead .col-ferma { z-index: 5; background: var(--tbl-testa); }

/* Grafico a barre con molte voci: il riquadro scorre invece di allungare la
   pagina. L'altezza mostra circa dodici barre, il resto si raggiunge
   scorrendo. */
/* Oltre dodici voci il grafico a barre scorre: sulla pagina si vedono tutte
   le righe scorrendo, mentre nella stampa il limite resta dodici (oltre, le
   barre si schiacciano) e l'esportazione lo dice prima di procedere. */
.barre-scorrevoli {
  max-height: 340px; overflow-y: auto; padding-right: 6px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px;
}
.barre-nota { font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; }

/* Frecce di scorrimento della tabella: fuori dalla colonna delle caselle di
   selezione (a sinistra partono dopo di essa) e sopra il contenuto, ma senza
   coprire i comandi. */
.tbl-scroll.con-frecce { position: relative; }
/* Le frecce laterali sono quelle di mobile.js («aiuto-sx»/«aiuto-dx»): il
   secondo gioco di pulsanti, scritto nel modello della tabella, è stato tolto
   perché ne faceva comparire quattro invece di due. */

/* Colonna delle categorie: in tabella le sole categorie, con quante
   sottocategorie contengono; il dettaglio si legge nel riquadro al passaggio
   del mouse. */
.badge-cat {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blu-tenue); color: var(--blu-scuro);
  border-radius: 999px; padding: 1px 9px; font-size: .82em; font-weight: 600;
  margin: 1px 3px 1px 0;
}
.badge-conta {
  background: var(--blu); color: #fff; border-radius: 999px;
  padding: 0 5px; font-size: .78em; font-weight: 700;
}
.cella-nidificata { cursor: help; }

/* Filtro ad albero: categoria e sottocategorie in una sola tendina */
.filtro-ramo { border-bottom: 1px solid var(--line); }
.filtro-ramo:last-child { border-bottom: 0; }
.filtro-ramo-testa { display: flex; align-items: center; }
.filtro-ramo-testa .filter-dropdown-item { flex: 1; font-weight: 600; }
.filtro-ramo-freccia {
  border: 0; background: none; cursor: pointer; color: var(--ink-soft);
  font-size: .8rem; padding: 4px 6px; line-height: 1;
}
.filtro-ramo-freccia:hover { color: var(--blu); }
.filter-dropdown-item.sotto { padding-left: 30px; font-size: .88em; }
.filtro-ramo-voci[hidden] { display: none; }
/* Albero delle date (anni → mesi → giorni, come in Excel): ogni livello
   rientra sotto il suo genitore; gli anni in grassetto, i mesi no, e fra
   un mese e l'altro niente filetto, che a tre livelli diventerebbe una
   griglia. */
.filtro-albero-date .filtro-ramo-voci { padding-left: 16px; }
.filtro-albero-date .filtro-ramo .filtro-ramo { border-bottom: 0; }
.filtro-albero-date .filtro-ramo .filtro-ramo .filtro-ramo-testa .filter-dropdown-item { font-weight: 500; }
.filtro-albero-date .filter-dropdown-item.sotto { padding-left: 28px; font-variant-numeric: tabular-nums; }

/* Filtro data: scorciatoie + intervallo, sopra l'albero di anni, mesi e giorni */
.filtro-data { padding: 8px 10px; border-bottom: 1px solid var(--bordo, #d7dce3); }
.filtro-data-scorciatoie { display: flex; flex-wrap: wrap; gap: 5px; }
.filtro-data-intervallo { display: flex; gap: 8px; margin-top: 7px; }
.filtro-data-intervallo label { display: flex; align-items: center; gap: 5px;
  font-size: .8rem; color: var(--ink-soft); flex: 1; }
.filtro-data-intervallo input { width: 100%; font-size: .8rem; padding: 3px 5px; }
.filtro-data .hint { display: block; margin-top: 6px; font-size: .75rem; }

/* barra in fondo alla tendina: la selezione multipla si conferma da qui
   (oppure chiudendo la tendina), senza ricaricare a ogni spunta */
.filter-dropdown-azioni {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 8px 10px; border-top: 1px solid var(--bordo, #d7dce3);
  background: var(--sfondo, #f5f7fa);
}
.toolbar-btn-active { border-color: var(--blu, #1e3a5f); }

/* ── Tabella dati: tutte le colonne, con scorrimento orizzontale ──
   L'area ha un'altezza massima: così la barra di scorrimento orizzontale
   resta sempre a portata di mano, senza dover arrivare in fondo alla pagina. */
.tbl-scroll {
  overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; max-width: 100%;
}
/* la griglia si adatta alla larghezza della pagina; scorre solo se serve davvero */
/* Larghezza delle colonne
   Prima ogni colonna aveva un minimo di 90px e la tabella si allargava al 100%:
   le colonne venivano stirate e i dati risultavano lontanissimi fra loro. Ora
   la larghezza segue il contenuto, con un tetto per non far dilagare i campi
   lunghi, e lo spazio che avanza finisce tutto nella colonna di riempimento in
   fondo. La separazione fra colonne è affidata a una spaziatura interna e a un
   filo verticale leggero, senza allungare le colonne. */
/* LARGHEZZA DELLE COLONNE
   La tabella si dimensiona sul contenuto («max-content») e non scende sotto
   la larghezza del contenitore: se lo spazio basta le colonne si distribuiscono
   da sole, se non basta la tabella scorre in orizzontale con la prima colonna
   bloccata. Prima c'era «width: 1%» su ogni cella e una colonna di riempimento
   al 100%: quest'ultima si prendeva tutto lo spazio libero e costringeva le
   altre al minimo, per cui campi come TELAIO o ICCID risultavano troncati
   mentre in fondo restava mezza pagina vuota. */
.tbl-dati { width: max-content; min-width: 100%; table-layout: auto; }
.tbl-dati th, .tbl-dati td {
  white-space: normal; word-break: break-word;
  min-width: 0; max-width: 340px;
  padding-left: var(--tbl-gap, 14px); padding-right: var(--tbl-gap, 14px);
}
/* Larghezza delle colonne: segue il contenuto, ma entro una forbice che
   dipende da quante colonne ci sono. Con poche colonne conviene lasciarle
   respirare, con molte conviene comprimerle: senza questa regola una tabella
   di tre colonne mostrava campi lunghissimi accanto a campi minuscoli, e una
   di quindici diventava illeggibile. Il risultato è una griglia più uniforme
   a colpo d'occhio. */
.tbl-dati td:not(.col-riempi):not(.col-check),
.tbl-dati th:not(.col-riempi):not(.col-check) {
  min-width: var(--col-min, 90px);
  max-width: var(--col-max, 340px);
}
/* Larghezza suggerita dal contenuto reale della colonna: «--col-car» è il
   numero di caratteri della cella più lunga, calcolato sul server. La colonna
   chiede quello spazio ma non scende sotto il minimo né supera il massimo
   della fascia, così il contenuto si vede quando c'è posto e si comprime
   ordinatamente quando le colonne sono molte. */
/* Spazio richiesto in base ai caratteri della cella più lunga: è un MINIMO,
   non un tetto, e non supera comunque il massimo della fascia. Le colonne con
   contenuti brevi restano strette, quelle con TELAIO o ICCID chiedono lo
   spazio che serve a leggerli. */
.tbl-dati th.col-piena {
  min-width: min(calc((var(--col-car, 10) * 0.55em) + 2.4em), var(--col-max, 340px));
}
/* Se il contenuto non entra si va a capo invece di troncare, ma solo per i
   campi di testo lungo: sulle altre colonne il riquadro al passaggio del
   mouse resta il modo di leggere tutto senza scomporre la griglia. */
.tbl-dati td.cella-lunga { white-space: normal; }
/* Le categorie stanno su una riga sola, come tutte le altre celle: prima la
   cella si allungava e la riga diventava più alta delle vicine. */
.tbl-dati td.cella-categorie { white-space: nowrap; }
.badge-altri {
  background: var(--ink-soft); color: var(--card); border-radius: 999px;
  padding: 1px 8px; font-size: .78em; font-weight: 700; cursor: help;
}
/* Le colonne senza alcun valore non devono rubare spazio a quelle piene:
   prendono il minimo indispensabile. */
.tbl-dati th.col-vuota, .tbl-dati td.col-vuota {
  min-width: 56px; width: 56px; max-width: 90px;
}
/* Le fasce regolano il MINIMO (quanto respira una colonna quando ce ne sono
   poche) e un massimo di sicurezza contro i campi note chilometrici. Il
   massimo non deve strozzare i campi lunghi: con quindici colonne un ICCID
   veniva tagliato a 150px pur essendoci spazio libero in fondo. */
.tbl-poche { --col-min: 140px; --col-max: 520px; }
.tbl-medie { --col-min: 110px; --col-max: 460px; }
.tbl-molte { --col-min: 80px; --col-max: 400px; }
.tbl-moltissime { --col-min: 64px; --col-max: 360px; }
.tbl-dati th { white-space: nowrap; }
/* Separazione: restano le righe e il contorno, niente linee verticali fra le
   colonne (a dividerle basta la spaziatura). */
.tbl-dati { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tbl-dati td, .tbl-dati th { border-left: 0; border-right: 0; }
/* La colonna in fondo raccoglie lo spazio che avanza.
   Storia di questa riga, perché è stata cambiata due volte:
   · all'inizio era «width: 100%» mentre ogni cella aveva «width: 1%»: si
     prendeva tutto e costringeva le altre al minimo, TELAIO e ICCID
     uscivano troncati con mezza pagina vuota in fondo;
   · è stata allora azzerata («width: 0»), ma tolto il «width: 1%» dalle
     celle l'avanzo ha cominciato a spalmarsi sulle colonne dei dati —
     misurato in reportistica a 2560px: «BUS», quattro cifre, largo 515px
     esattamente quanto le colonne da dodici caratteri;
   · ora ogni colonna dichiara la larghezza calcolata sul suo contenuto
     (vedi «th.col-piena», più sotto) e qui finisce solo l'eccedenza. */
.tbl-dati .col-riempi {
  width: auto; max-width: none; min-width: 0; padding: 0; border-left: 0;
}
.tbl-dati thead th { position: sticky; top: 0; z-index: 2;
  background: var(--tbl-testa); color: var(--tbl-testa-testo); }
.tbl-dati thead th a { color: var(--tbl-testa-testo); text-decoration: none; }
.tbl-dati thead th a:hover { color: #ffffff; text-decoration: underline; }
.tbl-dati .col-check { width: 34px; }
.tbl-dati .col-azioni { width: 150px; }
.riga-record { cursor: pointer; }
.riga-record:hover td { background: var(--sfondo, #f5f7fa); }

/* ── Finestra modale (scheda record e modifica in blocco) ── */
body.modale-aperta { overflow: hidden; }
.modale { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modale[hidden] { display: none; }
.modale-sfondo { position: absolute; inset: 0; background: rgba(15, 26, 42, .5); }
.modale-box {
  position: relative; z-index: 1; width: min(860px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; background: var(--carta, #fff);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 26, 42, .3); overflow: hidden;
}
.modale-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--bordo, #d7dce3);
}
.modale-testa h2 { margin: 0; font-size: 1.05rem; }
.modale-corpo { padding: 16px 18px; overflow: auto; }
.modale-corpo .card { box-shadow: none; border: 0; padding: 0; margin: 0; }

/* ── Form record: righe che seguono il contenuto, non due colonne fisse ──
   Prima ogni campo occupava una riga intera a tutta larghezza: nella finestra
   di inserimento/modifica i controlli brevi (date, numeri, spunte) risultavano
   sproporzionati. Poi è diventata una griglia RIGIDA a due colonne uguali: un
   passo avanti, ma una casella piccola (dimensione xxs/xs) restava comunque
   in una cella larga la metà del modulo, con dello spazio vuoto sprecato alla
   sua destra — e due campi piccoli non potevano stare affiancati sulla stessa
   riga. Ora la griglia è un flusso a righe (flex-wrap): ogni casella occupa
   solo lo spazio che la sua misura richiede (variabile «--car», impostata sul
   contenitore in _form_corpo.html) e più caselle piccole si affiancano da
   sole; i campi che hanno bisogno di spazio (testo lungo, selezione
   multipla, categorie) occupano comunque la riga intera. */
.form-griglia {
  display: flex; flex-wrap: wrap;
  gap: 12px 18px; align-items: start;
}
.form-griglia .form-group {
  min-width: 0; margin: 0;
  /* la base segue «--car» (assente = misura standard, vedi dimensione_car in
     config.py); un minimo di 150px lascia comunque spazio all'etichetta e
     ai bottoni di un campo senza misura propria (data, lista, spunta…). La
     crescita (flex-grow) distribuisce lo spazio avanzato in una riga fra le
     caselle che la condividono, invece di lasciarlo vuoto a un'estremità. */
  flex: 1 1 clamp(150px, calc((var(--car, 15) * 0.6em) + 3.4em), 100%);
  max-width: clamp(280px, calc((var(--car, 15) * 1.3em) + 7em), 100%);
}
.form-griglia .campo-largo { flex: 1 1 100%; max-width: 100%; }
/* Data e spunta non hanno una «dimensione» propria (--car si applica solo a
   testo, numero e testo lungo): senza questo la cella cadrebbe sullo
   standard di 15 caratteri, molto più larga del controllo vero e proprio
   (190px la data, poco più della sola etichetta la spunta) — lo stesso
   spazio vuoto sprecato che questa modifica vuole togliere altrove. */
.form-griglia .campo-date, .form-griglia .campo-boolean {
  flex-basis: 170px; max-width: 220px;
}
/* Orario: casella di 5 caratteri esatti, «hh:mm» — non serve di più. La
   misura è in «ch» (larghezza di una cifra) con le cifre tutte larghe uguali,
   così «08:30» ci sta preciso a ogni dimensione del testo. Vale nel modulo
   del record, nella modifica in blocco e nel valore predefinito del campo;
   restano esclusi i criteri del report, dove si possono scrivere più orari
   («08:00|09:30»). Il contenitore si stringe sulla casella (o sull'etichetta,
   se è più lunga) invece di tenere la larghezza di un campo normale. */
input[data-orario]:not(.valore-criterio) {
  box-sizing: content-box; width: 5ch; max-width: 5ch;
  font-variant-numeric: tabular-nums;
}
.form-griglia .campo-time { flex: 0 0 auto; max-width: none; }

/* Pulsante «leggi codice a barre» accanto alla casella (static/js/codice_barre.js).
   La casella si stringe per fargli posto; il riquadro del campo si allarga
   di altrettanto, così la misura scelta per il testo resta quella. */
.con-lettore { display: flex; gap: 6px; align-items: stretch; }
.con-lettore > input, .con-lettore > textarea { flex: 1 1 auto; min-width: 0; }
.con-lettore > textarea { align-self: stretch; }
.btn-lettore { flex: 0 0 auto; padding: 0 9px; justify-content: center; align-self: stretch; }
.con-lettore > textarea + .btn-lettore { align-self: flex-start; min-height: 36px; }
.form-griglia .form-group:not(.campo-largo):has(.con-lettore) {
  flex-basis: clamp(190px, calc((var(--car, 15) * 0.6em) + 6.4em), 100%);
  max-width: clamp(320px, calc((var(--car, 15) * 1.3em) + 10em), 100%);
}
/* Finestra del lettore: sopra a tutto, anche alla finestra del record */
.lettore-modale { z-index: 260; }
.lettore-box { width: min(560px, 100%); }
.lettore-corpo { padding: 14px 18px 16px; }
.lettore-video {
  position: relative; overflow: hidden; border-radius: 10px; background: #000;
  aspect-ratio: 4 / 3; max-height: 62vh; margin: 0 auto;
}
.lettore-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* mirino: solo un aiuto a inquadrare, la lettura vale su tutta l'immagine */
.lettore-mirino {
  position: absolute; inset: 22% 8%; border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 8px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none;
}
.lettore-mirino::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: rgba(230, 60, 60, .85);
}
.lettore-stato { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); min-height: 1.4em; }
.lettore-stato.lettore-errore { color: var(--err); }
.lettore-corpo .form-actions { justify-content: flex-end; }

/* Selettore dell'orario (static/js/orario.js): due rulli, ore 00–23 e
   minuti 00–59, alti tre righe con la voce scelta al centro. Sta nel flusso
   della pagina, sotto il campo, e non sopra: dentro la finestra del record
   un pannello sovrapposto verrebbe tagliato dal suo scorrimento. */
.orario-selettore {
  --orario-riga: 32px;
  display: flex; width: max-content; align-items: center; gap: 2px;
  margin-top: 6px; padding: 4px 8px; position: relative;
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 26, 42, .14);
}
/* la fascia centrale: è lì che sta la voce scelta */
.orario-selettore::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  height: var(--orario-riga); transform: translateY(-50%);
  background: var(--blu-tenue, #e8eef6); border-radius: 6px; pointer-events: none;
}
.orario-colonna {
  position: relative; width: 3.4em;
  height: calc(var(--orario-riga) * var(--orario-righe, 3));
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; outline: none;
}
.orario-colonna::-webkit-scrollbar { display: none; }
/* una riga vuota sopra e sotto: anche 00 e 23/59 arrivano al centro */
.orario-colonna::before, .orario-colonna::after {
  content: ""; display: block; height: var(--orario-riga);
}
.orario-colonna:focus-visible { box-shadow: 0 0 0 2px var(--blu); border-radius: 6px; }
.orario-voce {
  height: var(--orario-riga); line-height: var(--orario-riga);
  text-align: center; scroll-snap-align: center; cursor: pointer;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.orario-voce.orario-scelta { color: var(--ink); font-weight: 700; }
.orario-separatore { font-weight: 700; color: var(--ink); position: relative; }
@media (prefers-reduced-motion: reduce) {
  .orario-colonna { scroll-behavior: auto; }
}
.campo input, .campo select, .campo textarea { max-width: 100%; }
/* Campo primario o "Modificabile" tolta in Struttura dati: lo sfondo dice
   subito che il valore è bloccato, senza bisogno di una scritta accanto
   all'etichetta (era "campo primario, non modificabile"). */
.campo-bloccato input, .campo-bloccato select, .campo-bloccato textarea {
  background: var(--sfondo, #eef1f4); cursor: not-allowed;
}
.campo-date input { max-width: 190px; }
.campo-boolean .check-bool { width: max-content; }
.campo-select select { max-width: 460px; }
/* Lista con una dimensione scelta: larga quella, anche più stretta della
   voce più lunga (il testo della voce scelta si taglia, il menu aperto la
   mostra intera). I 3.4em in più fanno posto alla freccia del menu. */
.campo-select select.con-dimensione {
  width: calc((var(--car) * 0.55em) + 3.4em); max-width: 100%;
}
/* La larghezza di Testo e Numero segue la «dimensione» scelta sul campo,
   in caratteri (--car, ora sul contenitore .form-group e quindi ereditata
   anche qui): stessa formula già usata per le colonne della tabella
   (col-piena), qui applicata alla casella d'inserimento. Senza una misura
   scelta vale lo standard di 15 caratteri (il --car della regola sotto). */
.campo-text input, .campo-number input {
  max-width: calc((var(--car, 15) * 0.55em) + 2.4em);
}
.campo-textarea textarea { width: 100%; max-width: 100%; resize: vertical; }
/* Il Testo lungo resta a piena larghezza finché non gli si sceglie una
   misura esplicita (classe "con-dimensione"): è l'unico caso in cui lo
   standard non è 15 caratteri ma «come sempre». Una misura scelta lo rende
   anche non più "largo" (vedi _form_corpo.html), quindi qui sotto vale solo
   quando la textarea è finita in una cella normale, non a riga intera. */
.campo-textarea textarea.con-dimensione {
  width: auto; max-width: calc((var(--car) * 0.55em) + 2.4em);
}
/* elenchi lunghi: riquadro a scorrimento invece di una colonna infinita */
.campo-multiselect .ms-group,
.campo .lista-valori-chips {
  max-height: 168px; overflow: auto;
  border: 1px solid var(--bordo, #d7dce3); border-radius: 8px;
  padding: 8px; background: var(--carta, #fff);
}
/* Categorie e sottocategorie: il nome della categoria è un'intestazione, non
   una voce spuntabile; accanto c'è «tutte», che spunta o toglie l'intero
   gruppo. Le sottocategorie sono rientrate sotto la loro categoria. */
.ms-nidificato { display: block; }
.ms-gruppo { margin-bottom: 8px; }
.ms-gruppo-nome {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin: 6px 0 3px; border-bottom: 1px solid var(--line);
  padding-bottom: 3px; cursor: default; user-select: none;
}
.ms-tutte {
  border: 1px solid var(--line); background: var(--card); color: var(--blu);
  border-radius: 999px; font: inherit; font-size: .68rem; text-transform: none;
  letter-spacing: 0; padding: 1px 8px; cursor: pointer;
}
.ms-tutte:hover { background: var(--blu-tenue); border-color: var(--blu); }
.ms-nidificato .ms-gruppo > .check { padding-left: 12px; }
.ms-nidificato .ms-gruppo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px 12px; }
.ms-nidificato .ms-gruppo-nome { grid-column: 1 / -1; }
.campo-multiselect .ms-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
/* nella finestra la larghezza si adatta al contenuto, senza eccedere lo schermo */
.modale-corpo .form-griglia { gap: 10px 16px; }
@media (max-width: 640px) {
  .form-griglia .form-group { flex: 1 1 100%; max-width: 100%; }
  .campo-date input, .campo-number input { max-width: 100%; }
}

/* ── Scheda record nella finestra ── */
.scheda-campi { margin: 0; display: grid; gap: 2px; }
.scheda-riga {
  display: grid; grid-template-columns: minmax(140px, 30%) 1fr; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
}
.scheda-riga dt { margin: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-soft); opacity: .72; align-self: center; }
.scheda-riga dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.scheda-testo-lungo { white-space: pre-wrap; }
.scheda-tracce {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; padding: 10px 12px;
  border: 1px dashed var(--bordo, #d7dce3); border-radius: 10px;
  font-size: .8rem; color: var(--grigio-500, #6b7280);
}
.modale-azioni {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bordo, #d7dce3);
}

/* ── Pulsante filtri con icona ── */
.toolbar-btn { display: inline-flex; align-items: center; gap: 7px; }
.toolbar-btn .ico { flex: none; }
.toolbar-btn-aperto { background: var(--sfondo, #f5f7fa); border-color: var(--blu, #1e3a5f); }
.bulk-riga + .bulk-riga { margin-top: 4px; }
/* Modifica in blocco: quando il campo scelto è nidificato, il "nuovo
   valore" diventa una coppia categoria/sottocategoria affiancata invece
   della singola casella di testo. */
.bulk-valore-controllo { display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-valore-controllo > select, .bulk-valore-controllo > input { flex: 1 1 auto; min-width: 0; }

/* ── Pulsante diviso (azione + freccia con le alternative) ── */
.split-btn { display: inline-flex; align-items: stretch; position: relative; }
.split-btn .split-azione { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .split-menu > summary {
  list-style: none; cursor: pointer; border-top-left-radius: 0; border-bottom-left-radius: 0;
  margin-left: -1px; padding-left: 9px; padding-right: 9px;
}
.split-btn .split-menu > summary::-webkit-details-marker { display: none; }
.split-btn .split-menu { position: relative; }
.split-btn .filtro-voci { right: 0; left: auto; min-width: 170px; }
.split-btn .filtro-voci a,
.per-pagina-menu .filtro-voci a {
  display: block; padding: 7px 10px; border-radius: 7px; text-decoration: none;
  color: inherit; font-size: .9rem; white-space: nowrap;
}
.split-btn .filtro-voci a:hover,
.per-pagina-menu .filtro-voci a:hover { background: var(--sfondo, #f5f7fa); }
.per-pagina-menu .filtro-voci a.attiva { background: var(--sfondo, #f5f7fa); font-weight: 700; }
.per-pagina-menu .filtro-voci { right: 0; left: auto; }
.toolbar-azioni { align-items: center; }
.paginazione-basso { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.riga-modifica-campo { background: var(--sfondo, #f5f7fa); padding: 14px !important; }

/* ── Permessi: due colonne (gruppi e utenti) con ricerca e lista scorrevole ── */
.permessi-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.permessi-blocco h3 { margin: 0 0 8px; font-size: .95rem; }
.permessi-lista {
  border: 1px solid var(--bordo, #d7dce3); border-radius: 10px; padding: 6px;
  max-height: 268px; overflow-y: auto;      /* ~5 righe, poi scorre */
}
.permesso-riga {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px;
}
.permesso-riga:nth-child(odd) { background: var(--sfondo, #f5f7fa); }
.permesso-riga label { font-size: .74rem; color: var(--grigio-500, #6b7280); display: grid; gap: 2px; }
.permesso-nome { font-size: .92rem; font-weight: 600; display: grid; }
.permesso-nome .hint { font-weight: 400; }

/* ── Grafici dei report (SVG e barre, nessuna libreria esterna) ── */
.grafici-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 14px; }
.grafico h2 { margin-top: 0; font-size: 1rem; }
.barre { display: grid; gap: 7px; }
.barra-riga { display: grid; grid-template-columns: minmax(80px, 26%) 1fr auto; gap: 10px; align-items: center; }
.barra-et { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-traccia { background: var(--sfondo, #f5f7fa); border-radius: 999px; height: 16px; overflow: hidden; }
.barra-valore { display: block; height: 100%; border-radius: 999px; }
.barra-num { font-size: .84rem; font-variant-numeric: tabular-nums; }
.torta-riga { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.torta { width: 150px; height: 150px; transform: rotate(-90deg); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.legenda-inline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.legenda .chiave { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.grafico-linea { width: 100%; height: 150px; color: #1e3a5f; }

/* Otto colori della palette aziendale, riusati a rotazione */
.barra-0, .chiave-0 { background: #1e3a5f; } .fetta-0 { stroke: #1e3a5f; }
.barra-1, .chiave-1 { background: #c2410c; } .fetta-1 { stroke: #c2410c; }
.barra-2, .chiave-2 { background: #0f766e; } .fetta-2 { stroke: #0f766e; }
.barra-3, .chiave-3 { background: #b91c1c; } .fetta-3 { stroke: #b91c1c; }
.barra-4, .chiave-4 { background: #6d28d9; } .fetta-4 { stroke: #6d28d9; }
.barra-5, .chiave-5 { background: #a16207; } .fetta-5 { stroke: #a16207; }
.barra-6, .chiave-6 { background: #2563eb; } .fetta-6 { stroke: #2563eb; }
.barra-7, .chiave-7 { background: #4d7c0f; } .fetta-7 { stroke: #4d7c0f; }

/* ── Elementi cliccabili in homepage ── */
.card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.card-link:hover { box-shadow: 0 10px 24px rgba(15, 26, 42, .12); transform: translateY(-1px); }
.riga-link { cursor: pointer; }
.riga-link:hover td { background: var(--sfondo, #f5f7fa); }

/* Regola di base: l'attributo hidden deve vincere sui display dei componenti
   (.form-row usa display:flex, .btn inline-flex: senza questo restavano visibili). */
[hidden] { display: none !important; }

/* ── Permessi allegati per soggetto ── */
.permessi-allegati { grid-column: 1 / -1; }
.permessi-allegati > summary { cursor: pointer; font-size: .78rem; color: var(--grigio-500, #6b7280); }
.permessi-allegati-voci { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 8px 4px 2px; }

/* ── Ricerca dentro la tendina del filtro ── */
.filter-dropdown-cerca { padding: 8px 8px 4px; border-bottom: 1px solid var(--bordo, #d7dce3); }
.filter-dropdown-cerca input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--bordo, #d7dce3);
  border-radius: 8px; padding: 6px 9px; font-size: .87rem;
}
.filter-dropdown-cerca input:focus { outline: 2px solid var(--blu, #1e3a5f); outline-offset: 1px; }

/* ── Pulsante di eliminazione e celle booleane ── */
.btn-danger { background: var(--err); border-color: var(--err); color: #ffffff; }
.btn-danger:hover { background: #8f2a2a; border-color: #8f2a2a; color: #ffffff; }
.btn-danger .filter-active-count { background: rgba(255,255,255,.28); color: #ffffff; }
/* modifica in blocco: azione secondaria evidente ma non allarmante */
#btn-bulk { background: var(--blu-tenue); border-color: var(--blu); color: var(--blu-scuro); }
#btn-bulk:hover { background: var(--blu); border-color: var(--blu); color: #ffffff; }
#btn-bulk:hover .filter-active-count { background: rgba(255,255,255,.3); }
.bool-cella { font-weight: 700; }
.check-bool { display: inline-flex; align-items: center; gap: 8px; }
.ac-modo { display: block; margin-top: 6px; font-size: .78rem; color: var(--grigio-500, #6b7280); }
.ac-modo select { margin-left: 6px; font-size: .82rem; padding: 3px 6px; }
.autocomplete-suggerimenti { position: relative; }

/* ── Export report con scelta delle sezioni ── */
.export-report .filtro-voci { right: 0; left: auto; min-width: 210px; }
.export-sezioni { border-bottom: 1px solid var(--bordo, #d7dce3); padding-bottom: 8px; margin-bottom: 6px; display: grid; gap: 3px; }
.link-export { display: block; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: inherit; font-size: .9rem; }
.link-export:hover { background: var(--sfondo, #f5f7fa); }

/* ── Pagina minima (finestre di servizio, es. allegati) ── */
.pagina-minima { background: var(--sfondo, #f5f7fa); margin: 0; }
.contenuto-minimo { max-width: 860px; margin: 0 auto; padding: 22px 18px 32px; }
.contenuto-minimo .page-title { font-size: 1.15rem; margin: 0 0 14px; }

/* ── Schede e righe cliccabili: solo sollevamento, nessuna sottolineatura ── */
.card-link, .card-link:hover, .card-link h2, .card-link:hover h2 { text-decoration: none; }
.riga-link, .riga-link:hover, .riga-link td, .riga-link:hover td { text-decoration: none; }
.riga-link a, .card-link a { text-decoration: none; }

/* ── Accostamenti cromatici dei grafici ── */
.pal-istituzionale .barra-0, .pal-istituzionale .chiave-0 { background: #17497f; } .pal-istituzionale .fetta-0 { stroke: #17497f; }
.pal-istituzionale .barra-1, .pal-istituzionale .chiave-1 { background: #b45309; } .pal-istituzionale .fetta-1 { stroke: #b45309; }
.pal-istituzionale .barra-2, .pal-istituzionale .chiave-2 { background: #0e7490; } .pal-istituzionale .fetta-2 { stroke: #0e7490; }
.pal-istituzionale .barra-3, .pal-istituzionale .chiave-3 { background: #9f1239; } .pal-istituzionale .fetta-3 { stroke: #9f1239; }
.pal-istituzionale .barra-4, .pal-istituzionale .chiave-4 { background: #4c1d95; } .pal-istituzionale .fetta-4 { stroke: #4c1d95; }
.pal-istituzionale .barra-5, .pal-istituzionale .chiave-5 { background: #1d4ed8; } .pal-istituzionale .fetta-5 { stroke: #1d4ed8; }
.pal-istituzionale .barra-6, .pal-istituzionale .chiave-6 { background: #3f6212; } .pal-istituzionale .fetta-6 { stroke: #3f6212; }
.pal-istituzionale .barra-7, .pal-istituzionale .chiave-7 { background: #475569; } .pal-istituzionale .fetta-7 { stroke: #475569; }

.pal-sabbia .barra-0, .pal-sabbia .chiave-0 { background: #7c2d12; } .pal-sabbia .fetta-0 { stroke: #7c2d12; }
.pal-sabbia .barra-1, .pal-sabbia .chiave-1 { background: #ca8a04; } .pal-sabbia .fetta-1 { stroke: #ca8a04; }
.pal-sabbia .barra-2, .pal-sabbia .chiave-2 { background: #57534e; } .pal-sabbia .fetta-2 { stroke: #57534e; }
.pal-sabbia .barra-3, .pal-sabbia .chiave-3 { background: #d97706; } .pal-sabbia .fetta-3 { stroke: #d97706; }
.pal-sabbia .barra-4, .pal-sabbia .chiave-4 { background: #4d7c0f; } .pal-sabbia .fetta-4 { stroke: #4d7c0f; }
.pal-sabbia .barra-5, .pal-sabbia .chiave-5 { background: #92400e; } .pal-sabbia .fetta-5 { stroke: #92400e; }
.pal-sabbia .barra-6, .pal-sabbia .chiave-6 { background: #eab308; } .pal-sabbia .fetta-6 { stroke: #eab308; }
.pal-sabbia .barra-7, .pal-sabbia .chiave-7 { background: #78716c; } .pal-sabbia .fetta-7 { stroke: #78716c; }

.pal-verde .barra-0, .pal-verde .chiave-0 { background: #14532d; } .pal-verde .fetta-0 { stroke: #14532d; }
.pal-verde .barra-1, .pal-verde .chiave-1 { background: #ca8a04; } .pal-verde .fetta-1 { stroke: #ca8a04; }
.pal-verde .barra-2, .pal-verde .chiave-2 { background: #0e7490; } .pal-verde .fetta-2 { stroke: #0e7490; }
.pal-verde .barra-3, .pal-verde .chiave-3 { background: #84cc16; } .pal-verde .fetta-3 { stroke: #84cc16; }
.pal-verde .barra-4, .pal-verde .chiave-4 { background: #047857; } .pal-verde .fetta-4 { stroke: #047857; }
.pal-verde .barra-5, .pal-verde .chiave-5 { background: #b45309; } .pal-verde .fetta-5 { stroke: #b45309; }
.pal-verde .barra-6, .pal-verde .chiave-6 { background: #0891b2; } .pal-verde .fetta-6 { stroke: #0891b2; }
.pal-verde .barra-7, .pal-verde .chiave-7 { background: #365314; } .pal-verde .fetta-7 { stroke: #365314; }

.pal-contrasto .barra-0, .pal-contrasto .chiave-0 { background: #0072b2; } .pal-contrasto .fetta-0 { stroke: #0072b2; }
.pal-contrasto .barra-1, .pal-contrasto .chiave-1 { background: #d55e00; } .pal-contrasto .fetta-1 { stroke: #d55e00; }
.pal-contrasto .barra-2, .pal-contrasto .chiave-2 { background: #009e73; } .pal-contrasto .fetta-2 { stroke: #009e73; }
.pal-contrasto .barra-3, .pal-contrasto .chiave-3 { background: #cc79a7; } .pal-contrasto .fetta-3 { stroke: #cc79a7; }
.pal-contrasto .barra-4, .pal-contrasto .chiave-4 { background: #56b4e9; } .pal-contrasto .fetta-4 { stroke: #56b4e9; }
.pal-contrasto .barra-5, .pal-contrasto .chiave-5 { background: #9a6a00; } .pal-contrasto .fetta-5 { stroke: #9a6a00; }
.pal-contrasto .barra-6, .pal-contrasto .chiave-6 { background: #6d28d9; } .pal-contrasto .fetta-6 { stroke: #6d28d9; }
.pal-contrasto .barra-7, .pal-contrasto .chiave-7 { background: #3f3f46; } .pal-contrasto .fetta-7 { stroke: #3f3f46; }

.pal-istituzionale .grafico-linea { color: #17497f; }
.pal-sabbia .grafico-linea { color: #7c2d12; }
.pal-verde .grafico-linea { color: #14532d; }
.pal-contrasto .grafico-linea { color: #0072b2; }

/* ── Albero dei permessi (gruppi) ── */
.albero-nodo { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 6px; background: var(--card); }
.albero-nodo > summary {
  cursor: pointer; padding: 9px 12px; display: flex; align-items: center; gap: 8px;
  font-weight: 600; list-style: none;
}
.albero-nodo > summary::-webkit-details-marker { display: none; }
.albero-nodo > summary::before { content: "▸"; color: var(--ink-soft); font-weight: 400; }
.albero-nodo[open] > summary::before { content: "▾"; }
.albero-nodo[open] > summary { border-bottom: 1px solid var(--line); background: var(--paper); }
.albero-titolo { flex: 1; }
.albero-corpo { padding: 10px 12px 12px 28px; display: grid; gap: 10px; }
.albero-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.albero-etichetta { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); min-width: 92px; }
.albero-gruppo label { display: flex; align-items: center; gap: 6px; font-size: .8rem; }

/* Nome a sinistra, controlli allineati sulla STESSA riga a destra */
.permesso-riga {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  grid-template-columns: none !important;
}
.permesso-riga .permesso-nome { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.permesso-riga > label,
.permesso-riga .riga-controlli { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.permesso-riga > label > select { margin-left: 2px; }
.riga-controlli { flex-wrap: wrap; gap: 6px 14px; }
.riga-controlli .check { margin: 0; white-space: nowrap; }
.permessi-allegati { flex-basis: 100%; }
/* Lettura, scrittura ed eliminazione restano in linea con il nome */
.permesso-riga > label { flex: 0 0 auto; font-size: .74rem; }
.permesso-riga > label > select { font-size: .82rem; padding: 3px 6px; }
@media (max-width: 640px) { .permesso-riga > label { flex: 1 1 45%; } }

/* PRIMA (rimosso): fra 641 e 1024px le colonne oltre la settima sparivano
   con «display: none», senza barra di scorrimento e senza alcun avviso —
   chi non aveva scelto esplicitamente le colonne (il caso di serie, dato che
   ogni campo è «visibile» finché non lo si spegne) restava con parte dei
   dati semplicemente irraggiungibili su una finestra di larghezza media
   (un laptop non a schermo intero, un pannello di editor stretto…), un
   comportamento diverso e peggiore di quello — corretto — già in uso quando
   l'utente sceglie le colonne a mano: scorrimento orizzontale con la prima
   colonna ferma (vedi «.tbl-scroll» più sopra). Tolta la regola, ora il
   comportamento è lo stesso in entrambi i casi. La regola sotto i 640px era
   comunque già lettera morta: a quella larghezza «.tbl-scroll» è nascosta e
   compaiono le schede (vedi «.schede-record» più sopra), quindi la tabella
   con le colonne tagliate non era mai visibile. */
.avviso-colonne { font-size: .78rem; color: var(--ink-soft); margin: 8px 0 0; }

/* ── Stellina dei preferiti ── */
.stella {
  background: none; border: 0; cursor: pointer; padding: 0 2px; line-height: 1;
  font-size: 1.45rem; color: var(--ink-soft); transition: transform .12s, color .12s;
}
.stella:hover { transform: scale(1.15); color: #c9a227; }
.stella-attiva { color: #e3b505; }
.pin-form { display: inline-flex; align-items: center; }

/* ── Menu laterale riducibile alle sole icone ── */
.collassa {
  margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.22);
  color: #cfd8e2; border-radius: var(--r); width: 24px; height: 24px; cursor: pointer;
  line-height: 1; font-size: 15px;
}
.collassa:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-link { display: flex; align-items: center; gap: 9px; }
.nav-ico { flex: none; width: 18px; text-align: center; }
/* Menu ridotto: restano solo le icone, sparisce ogni testo (replica compresa) */
body.nav-ridotta .sidebar { width: 60px; flex-basis: 60px; overflow: hidden; }
body.nav-ridotta .nav-testo,
body.nav-ridotta .nav-section,
body.nav-ridotta .nav-hint,
body.nav-ridotta .replica-strip { display: none !important; }
body.nav-ridotta .nav-link {
  justify-content: center; gap: 0; padding-left: 0; padding-right: 0;
  font-size: 17px; overflow: hidden; white-space: nowrap;
}
body.nav-ridotta .nav-link .nav-ico { width: auto; }
body.nav-ridotta .nav-sub { padding-left: 0; }
/* Marchio in alto e freccia sotto: nessuna sovrapposizione */
body.nav-ridotta .brand {
  flex-direction: column; justify-content: flex-start; align-items: center;
  padding: 10px 4px 6px; gap: 8px;
}
body.nav-ridotta .brand-mark { margin: 0; }
body.nav-ridotta .collassa { position: static; transform: none; margin: 0; }
body.nav-ridotta .sidebar { position: relative; }
@media (max-width: 1024px) { body.nav-ridotta .sidebar { width: 260px; flex-basis: 260px; } }

/* ── Azioni sullo storico dei backup ── */
.azioni-storico { white-space: nowrap; display: flex; gap: 6px; align-items: center; }

/* ── Caricamento allegati: campo e pulsante allineati ── */
.carica-allegato { margin-top: 16px; display: grid; gap: 4px; }
.carica-etichetta { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.carica-riga { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.carica-riga input[type=file] { flex: 1 1 240px; min-width: 0; }
.carica-riga .btn { flex: none; }
.anteprima-riquadro { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.anteprima-riquadro iframe { width: 100%; height: min(62vh, 560px); border: 0; display: block; background: #fff; }

/* ── Pagine con griglie: tutta la larghezza del browser ── */
body.pagina-larga .content { max-width: none; }
.colonne-elenco { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.colonne-azioni { display: flex; gap: 6px; margin-top: 8px; }
/* Campi numero senza le frecce su/giù: in inserimento e modifica sono
   scomode e fanno cambiare il valore per sbaglio con la rotellina. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Aspetto: icone caricate e selettore ─────────────────────────────── */
.icona-img { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.18em; }
.nav-ico .icona-img { width: 18px; height: 18px; vertical-align: middle; }
.icona-cella .icona-img { width: 22px; height: 22px; }
.galleria-icone { display: flex; flex-wrap: wrap; gap: 10px; }
.galleria-set { flex: 0 0 100%; margin: 10px 0 0; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); }
.galleria-voce {
  position: relative; width: 92px; padding: 10px 6px 6px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.galleria-voce img { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 6px; }
.galleria-nome { display: block; font-size: .72rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galleria-elimina {
  position: absolute; top: 2px; right: 2px; border: 0; background: transparent;
  color: var(--err); cursor: pointer; font-size: .8rem; line-height: 1; padding: 3px;
}
.nav-icone-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }
.nav-icona-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px dashed var(--line); }
.nav-icona-nome { display: flex; flex-direction: column; font-size: .9rem; }
/* le due scelte, chiara e scura, affiancate sulla stessa riga */
.nav-icona-scelte { display: flex; gap: 10px; align-items: flex-end; }
.nav-icona-scelta { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 640px) {
  .nav-icona-riga { flex-direction: column; align-items: stretch; }
  .nav-icona-scelte { justify-content: flex-start; }
}

.sel-icona { position: relative; }
.sel-icona-menu > summary { list-style: none; cursor: pointer; }
.sel-icona-menu > summary::-webkit-details-marker { display: none; }
.sel-icona-bottone { display: inline-flex; align-items: center; gap: 8px; min-width: 96px; }
.sel-icona-anteprima { font-size: 1.15rem; min-width: 1.3em; text-align: center; }
.sel-icona-etichetta { font-size: .78rem; color: var(--ink-soft); }
.sel-icona-pannello {
  position: absolute; z-index: 60; margin-top: 6px; width: 290px; max-height: 330px;
  overflow: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 26px rgba(15, 26, 42, .16); padding: 10px;
}
.sel-icona-sezione + .sel-icona-sezione { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.sel-icona-griglia { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sel-icona-voce {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  cursor: pointer; font-size: 1.05rem; padding: 0;
}
.sel-icona-voce img { width: 22px; height: 22px; object-fit: contain; }
.sel-icona-voce:hover { border-color: var(--blu); background: var(--blu-tenue); }
.sel-icona-voce.scelta { border-color: var(--blu); background: var(--blu-tenue); font-weight: 700; }
.sel-icona-libero { width: 100%; margin-top: 5px; }
.sel-icona-bi { width: 100%; margin-top: 6px; font-size: .8rem; }
.sel-icona-voce .bi { font-size: 1.05rem; line-height: 1; }
.bootstrap-prova { display: inline-flex; gap: 10px; font-size: 1.25rem; vertical-align: -3px; margin: 0 6px; }
.nav-ico .bi { font-size: 17px; vertical-align: -2px; }
/* Avviso «attenzione»: il colore del testo era fisso e scuro, quindi sul
   fondo scuro del tema notte spariva. Ora entrambi passano da variabili. */
.flash-warn {
  background: var(--warn-bg); border: 1px solid var(--warn-bordo);
  color: var(--warn-testo); padding: 10px 12px; border-radius: var(--r);
}
.sel-icona-azioni { display: flex; gap: 6px; justify-content: space-between; }

/* Import: tendina del tipo sopra ogni colonna dell'anteprima */
.tipo-colonna {
  margin-top: 6px; width: 100%; min-width: 130px; font-size: .8rem;
  padding: 3px 6px; border: 1px solid var(--bordo, #d7dce3); border-radius: 6px;
  background: var(--carta, #fff); color: var(--ink);
}
.import-preview th { vertical-align: top; }

/* ── Anteprima import: intestazioni leggibili (etichette dentro le th) ── */
.import-preview .tbl th,
.import-preview .tbl th label,
.import-preview .tbl th .check { color: #e7edf3; }
.import-preview .tbl th .check { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.import-preview .col-esclusa { opacity: .55; }

/* ── Logo personalizzato e anteprime del marchio ── */
.brand-logo { max-width: 132px; max-height: 38px; object-fit: contain; display: block; }
body.nav-ridotta .brand-logo { max-width: 34px; max-height: 30px; }
.marchio-anteprima {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 14px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
  background: var(--paper); min-height: 74px;
}
.marchio-anteprima img { max-width: 220px; max-height: 60px; object-fit: contain; }
.marchio-piccolo img { max-width: 48px; max-height: 48px; }

/* ── Riquadri della homepage, riordinabili col mouse ── */
.widget-area { display: grid; gap: 14px; }
.widget { margin: 0; position: relative; }
.widget-testa { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.widget-testa h2 { margin: 0; font-size: 1rem; }
.widget-presa {
  cursor: grab; color: var(--ink-soft); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; user-select: none;
}
.widget-presa:hover { background: var(--paper); color: var(--blu); }
.widget-in-movimento { opacity: .55; outline: 2px dashed var(--blu); }
.widget-bersaglio { outline: 2px solid var(--blu-tenue); }
.grid-interna { margin: 0; }
.scheda-tabella h3 { margin: 0 0 6px; font-size: .95rem; }
/* Ricerca e liste: cinque risultati visibili, il resto a scorrimento */
.risultati-scroll { max-height: 244px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); }
.risultati-scroll .tbl th { position: sticky; top: 0; }

/* ── Vista a schede per schermi stretti (come nella vecchia app) ── */
.schede-record { display: none; }
@media (max-width: 640px) {
  .tbl-scroll { display: none; }              /* profilo small: comandano le schede */
  .schede-record { display: grid; gap: 8px; margin-top: 10px; }
  .scheda-rec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .scheda-rec-testa { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
  .scheda-rec-titolo {
    flex: 1; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--ink); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .scheda-rec-apri {
    background: none; border: 0; cursor: pointer; color: var(--ink-soft);
    font-size: 15px; padding: 2px 6px;
  }
  .scheda-rec.aperta .scheda-rec-apri { transform: rotate(180deg); }
  .scheda-rec-corpo { display: none; margin: 0; padding: 0 12px 12px; }
  .scheda-rec.aperta .scheda-rec-corpo { display: grid; gap: 4px; }
  .scheda-rec-corpo > div {
    display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 10px;
    padding: 5px 0; border-top: 1px solid var(--line);
  }
  .scheda-rec-corpo dt { margin: 0; font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: var(--ink-soft); }
  .scheda-rec-corpo dd { margin: 0; font-size: .9rem; word-break: break-word; }
}

/* ── Widget a contatore ── */
.widget-valore { display: flex; align-items: baseline; gap: 10px; }
.widget-valore b { font-size: 30px; color: var(--blu-scuro); line-height: 1; }
.widget-plugin .widget-testa .hint { font-size: .78rem; }

/* ── Nome dell'allegato come pulsante (apre l'anteprima nel popup) ── */
.link-allegato {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--blu); text-align: left;
}
.link-allegato:hover { text-decoration: underline; }

/* ── Riquadri tabella in homepage: scelta e riordino ── */
.box-tabella { position: relative; padding-top: 22px; }
.box-presa {
  position: absolute; top: 6px; right: 8px; cursor: grab; color: var(--ink-soft);
  font-size: 13px; line-height: 1; user-select: none;
}
.box-presa:hover { color: var(--blu); }
.scheda-tabella-link { display: block; text-decoration: none; color: inherit; }
.scegli-tabelle .filtro-voci { right: 0; left: auto; }

/* ── Area widget: stessa grafica dei riquadri tabella, dieci su due righe ── */
/* I riquadri si adattano al contenuto: quelli con un solo numero restano
   stretti, quelli con un elenco prendono la larghezza che serve a leggere le
   voci. Prima erano tutti a un quinto della riga e gli elenchi finivano
   compressi in una colonna da scorrere. */
.griglia-widget {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
}
.box-widget:has(.widget-elenco) { grid-column: span 2; }
@media (max-width: 1024px) { .griglia-widget { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.box-widget { position: relative; padding-top: 22px; }
.box-widget h3 { margin: 0 0 6px; font-size: .95rem; }
.box-widget .stat b { font-size: 26px; color: var(--blu-scuro); }
.box-chiudi { position: absolute; top: 4px; left: 6px; margin: 0; }
.box-chiudi button {
  background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 12px; padding: 2px 4px;
}
.box-chiudi button:hover { color: var(--err); }
.widget-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .84rem; }
.widget-elenco li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.box-widget:has(.widget-elenco) .widget-elenco li { white-space: normal; }

/* ===================================================================
   PROFILI DI RISOLUZIONE
   -------------------------------------------------------------------
   Quattro fasce, ognuna con la propria scala. Le misure non sono più
   sparse nelle regole: stanno tutte nelle variabili qui sotto, così
   ingrandire o rimpicciolire un profilo significa toccare pochi valori
   e l'interfaccia resta coerente in tutte le sue parti.

     small   ≤ 640px    telefoni
     medium  641-1024   tablet e schermi medi
     large   1025-2559  720p, 1080p, QHD          (profilo di riferimento)
     xlarge  ≥ 2560px   4K e oltre

   Su «small» vengono anche alleggeriti gli effetti grafici (ombre,
   animazioni, sfocature): su telefono costano fluidità e non aggiungono
   informazione.
   =================================================================== */
:root {
  --fs: 15px;             /* testo di base */
  --fs-piccolo: 13px;
  --fs-tbl: 14px;         /* griglie dati */
  --fs-titolo: 1.25rem;
  --sp: 16px;             /* spaziatura di riferimento */
  --sp-s: 10px;
  --tbl-gap: 14px;        /* respiro fra una colonna e l'altra */
  --tbl-cell-y: 7px;
  --sidebar-w: 232px;
  --controllo-y: 7px;     /* altezza interna di campi e pulsanti */
  --controllo-x: 9px;
  --contenuto-max: 1600px;
  --ombra-card: 0 1px 2px rgba(15, 26, 42, .06);
}

/* ── small: telefoni ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --fs: 15px; --fs-piccolo: 12px; --fs-tbl: 13px; --fs-titolo: 1.05rem;
    --sp: 12px; --sp-s: 8px;
    --tbl-gap: 9px; --tbl-cell-y: 8px;
    --controllo-y: 9px; --controllo-x: 10px;   /* bersagli più grandi al tocco */
    --contenuto-max: none;
    --ombra-card: none;
  }
  /* meno effetti: su telefono pesano e non aggiungono informazione */
  .card, .modale-box, .filtro-menu > div, .sel-icona-pannello,
  .filter-dropdown-panel { box-shadow: none !important; }
  .widget, .box-tabella, .box-widget { transition: none !important; }
  .riga-record:hover, .tbl tbody tr:hover { background: inherit; }
  /* niente trascinamento dei riquadri: sul tocco confligge con lo scorrimento */
  .widget-presa, .box-presa { display: none; }
  /* una colonna sola dappertutto (il modulo record segue già la propria
     regola, qui sopra: .form-griglia .form-group { flex: 1 1 100% }) */
  .nav-icone-griglia, .analisi-grid { grid-template-columns: 1fr !important; }
  .toolbar, .toolbar-azioni { gap: var(--sp-s); }
  .toolbar .btn, .toolbar-azioni .btn { flex: 1 1 auto; }
  .filter-panel { flex-direction: column; align-items: stretch; }
  .filter-dropdown-wrap, .filtro-menu, .filtro-menu > summary { width: 100%; }
  .filter-dropdown-panel { position: static; width: 100%; max-height: 320px; }
  /* la finestra occupa lo schermo: niente riquadri stretti da leggere in due dita */
  .modale { padding: 0; }
  .modale-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .modale-corpo { padding: var(--sp-s) var(--sp); }
  /* griglia dati: righe più alte, colonne compatte, scorrimento orizzontale */
  .tbl-dati th, .tbl-dati td { max-width: 200px; }
  .tbl-dati .col-riempi { display: none; }     /* su schermo stretto non avanza spazio */
  .paginazione { flex-wrap: wrap; gap: var(--sp-s); }
  .schede-record { width: 100%; }
  .galleria-voce { width: 74px; }
  .sel-icona-pannello { position: static; width: 100%; }
}

/* ── medium: tablet e schermi medi ───────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --fs: 15px; --fs-tbl: 13.5px; --fs-titolo: 1.15rem;
    --sp: 14px; --sp-s: 9px;
    --tbl-gap: 11px;
    --sidebar-w: 224px;
    --contenuto-max: none;
  }
  /* il modulo record (.form-griglia) è un flusso flessibile: si adatta da
     solo, non serve più un numero di colonne dedicato per questo schermo */
  .tbl-dati th, .tbl-dati td { max-width: 260px; }
  .modale-box { width: min(94vw, 760px); }
}

/* ── large: 720p → QHD (profilo di riferimento) ──────────────────── */
@media (min-width: 1025px) and (max-width: 2559px) {
  :root {
    --fs: 15px; --fs-tbl: 14px;
    --sp: 16px; --tbl-gap: 14px;
    --sidebar-w: 232px;
    --contenuto-max: 1600px;
  }
}

/* ── xlarge: 4K e oltre ──────────────────────────────────────────── */
@media (min-width: 2560px) {
  :root {
    --fs: 18px; --fs-piccolo: 15px; --fs-tbl: 17px; --fs-titolo: 1.6rem;
    --sp: 24px; --sp-s: 14px;
    --tbl-gap: 20px; --tbl-cell-y: 10px;
    --controllo-y: 10px; --controllo-x: 13px;
    --sidebar-w: 300px;
    --contenuto-max: 2400px;
  }
  /* su schermi molto grandi il testo non deve attraversare tutto il monitor */
  .content { margin: 0 auto; }
  .galleria-voce { width: 118px; }
  .galleria-voce img { width: 44px; height: 44px; }
  .sel-icona-voce { width: 42px; height: 42px; font-size: 1.3rem; }
  .sel-icona-pannello { width: 380px; max-height: 460px; }
  .torta { width: 210px; height: 210px; }
  .grafico-linea { height: 210px; }
}

/* ── applicazione delle variabili ────────────────────────────────── */
body { font-size: var(--fs); }
.content { padding: var(--sp); max-width: var(--contenuto-max); }
.card { box-shadow: var(--ombra-card); }
.page-title { font-size: var(--fs-titolo); }
.hint, label { font-size: var(--fs-piccolo); }
.tbl { font-size: var(--fs-tbl); }
.tbl-dati td, .tbl-dati th { padding-top: var(--tbl-cell-y); padding-bottom: var(--tbl-cell-y); }
.sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=file], select, textarea {
  padding: var(--controllo-y) var(--controllo-x);
}
.btn { padding: var(--controllo-y) calc(var(--controllo-x) + 4px); }

/* ===================================================================
   BARRA IN ALTO
   -------------------------------------------------------------------
   Tre zone: a sinistra il pulsante di navigazione (porta il nome della
   sezione aperta e apre l'elenco delle destinazioni), al centro il nome
   del sito, a destra il menu utente. La griglia a tre colonne tiene il
   nome esattamente al centro qualunque sia la larghezza dei lati.
   Gli stati dei pulsanti usano un fondo chiaro con testo scuro: sul
   fondo inchiostro è la combinazione che resta leggibile (prima lo
   stato «selezionato» finiva testo chiaro su fondo chiaro).
   =================================================================== */
.shell { display: block; }
.main { width: 100%; }
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-s);
  background: var(--barra); color: var(--barra-testo);
  padding: var(--sp-s) var(--sp);
  border-bottom: 3px solid var(--blu);
  position: sticky; top: 0; z-index: 70;
}
.topbar-sx { justify-self: start; min-width: 0; }
.topbar-dx { justify-self: end; min-width: 0; }
.marchio-nome {
  justify-self: center; text-align: center;
  font-weight: 700; font-size: 1.06rem; letter-spacing: .02em;
  color: var(--barra-testo-forte); text-decoration: none; white-space: nowrap;
}
.marchio-nome:hover { text-decoration: none; color: var(--barra-testo-forte); }

.nav-voce {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--barra-bottone); border: 1px solid var(--barra-bordo);
  border-radius: 999px; padding: 6px 13px;
  color: var(--barra-testo-forte); font: inherit; font-weight: 600;
  text-decoration: none; white-space: nowrap; list-style: none; max-width: 42vw;
}
.nav-voce::-webkit-details-marker { display: none; }
.nav-voce-testo { overflow: hidden; text-overflow: ellipsis; }
/* Passaggio del mouse e stato aperto: le stesse identiche regole del pulsante
   utente. Sono scritte insieme, così i due non possono divergere e il testo
   resta leggibile in entrambi i temi (prima lo stato aperto imponeva fondo
   chiaro mentre il passaggio del mouse riportava il testo al bianco). */
.nav-voce:hover { background: var(--barra-bottone-hover); text-decoration: none; }
#menu-sezioni[open] .menu-freccia { transform: rotate(180deg); }
#menu-sezioni[open] > .nav-voce,
#menu-sezioni[open] > .nav-voce:hover {
  background: var(--card); color: var(--ink); border-color: var(--card);
}
.nav-voce .nav-ico { font-size: 1.05em; line-height: 1; }
.nav-voce-menu { position: relative; }
/* Il pannello del menu di sinistra ha lo stesso aspetto di quello utente:
   stessa larghezza minima, stesso riquadro, stessa ombra. La freccetta sul
   pulsante non serve: lo stato aperto si vede dal colore, come per l'utente. */
/* Il pannello riprende l'aspetto delle altre tendine. Il pulsante invece non
   usa più la classe «filtro-menu»: era quella a imporgli fondo bianco e una
   seconda freccia, vincendo per specificità sulle regole della barra. */
.nav-voce-menu > .filtro-voci {
  position: absolute; z-index: 80; margin-top: 6px;
  min-width: 230px; max-height: 70vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 24px var(--ombra); padding: 6px;
  display: grid; gap: 2px;
}
/* la tendina è un riquadro chiaro: il colore del testo va riportato a quello
   del contenuto, altrimenti eredita il chiaro della barra e sparisce */
.nav-voce-menu > .filtro-voci, .nav-voce-menu > .filtro-voci a { color: var(--ink); }
/* Voci del menu: al passaggio del mouse si illuminano invece di sottolinearsi.
   Il colore è lo stesso dell'evidenza nel menu utente, così i due menu si
   comportano allo stesso modo. */
.nav-voce-menu > .filtro-voci a {
  display: block; padding: 8px 10px; border-radius: 6px;
  text-decoration: none; font-size: .92rem; white-space: nowrap;
  border-left: 3px solid transparent;
}
.nav-voce-menu > .filtro-voci a:hover,
.nav-voce-menu > .filtro-voci a:focus-visible {
  background: var(--blu-tenue); color: var(--blu-scuro);
  border-left-color: var(--blu); text-decoration: none;
}
.nav-voce-menu > .filtro-voci a.attiva {
  background: var(--blu-tenue); color: var(--blu-scuro);
  border-left-color: var(--blu); font-weight: 700;
}

.menu-freccia { font-size: .8em; opacity: .85; }

/* interruttore chiaro/scuro nel menu utente */
.tema-form { margin: 0; }
.tema-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 8px 10px; border-radius: 4px; color: var(--ink); text-align: left;
}
.tema-toggle:hover { background: var(--blu-tenue); }
.tema-interruttore {
  margin-left: auto; width: 34px; height: 18px; border-radius: 999px;
  background: var(--line); position: relative; transition: background .15s ease;
}
.tema-pallino {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--card); transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.tema-toggle[aria-pressed="true"] .tema-interruttore { background: var(--blu); }
.tema-toggle[aria-pressed="true"] .tema-pallino { transform: translateX(16px); }

@media (max-width: 640px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 6px; padding: 8px 10px; }
  .marchio-nome { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
  .nav-voce { padding: 7px 10px; font-size: .9rem; max-width: 38vw; }
}

/* titolo di pagina: fuori dalla barra, discreto, sopra il contenuto */
.titolo-pagina {
  margin: 0 0 var(--sp-s); font-size: var(--fs-titolo); font-weight: 700;
  color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ===================================================================
   CELLE: una riga sola, con il contenuto lungo consultabile a parte
   Una larghezza minima evita colonne strizzate; oltre il massimo il
   testo viene troncato con i puntini invece di mandare il record su
   più righe. Il contenuto per intero si legge passandoci sopra con il
   mouse (riquadro dedicato) oppure aprendo il record.
   =================================================================== */
.tbl-dati td, .tbl-dati th {
  min-width: 96px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tbl-dati .col-check, .tbl-dati .col-riempi { min-width: 0; }
.tbl-dati td.cella-troncata { cursor: help; }
.tbl-dati td.cella-troncata::after {
  content: ""; position: absolute;                 /* nessun ingombro: serve al solo stato */
}
.cella-popup {
  position: fixed; z-index: 120; max-width: min(460px, 82vw); max-height: 320px;
  overflow: auto; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 10px 26px rgba(15, 26, 42, .18); font-size: var(--fs-tbl);
  white-space: pre-wrap; word-break: break-word; pointer-events: none;
}
.cella-popup .cella-popup-campo {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin-bottom: 4px;
}
/* Riquadro delle categorie: intestazione della categoria e sotto l'elenco
   delle sottocategorie scelte, una per riga. Le regole erano andate perse in
   una riscrittura e i nomi uscivano tutti attaccati. */
.cella-popup .popup-albero { display: grid; gap: 10px; }
.cella-popup .popup-cat {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--blu-scuro);
  border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 4px;
}
.cella-popup .popup-elenco { margin: 0; padding-left: 16px; list-style: none; }
.cella-popup .popup-elenco li { padding: 2px 0; line-height: 1.35; }
.cella-popup .popup-elenco li::before { content: "• "; color: var(--ink-soft); }

@media (max-width: 640px) { .cella-popup { display: none; } }   /* sul tocco vale la scheda */

/* Notifiche in alto a destra (es. valore duplicato al salvataggio di un
   record, esito di una sincronizzazione): impilate in un contenitore
   comune così più avvisi non si sovrappongono, un pulsante «×» per
   chiuderle prima, altrimenti spariscono da sole dopo pochi secondi. */
#notifiche-destra {
  position: fixed; top: 16px; right: 16px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(360px, 90vw);
}
.notifica-destra {
  position: relative; padding: 10px 32px 10px 14px;
  border-radius: var(--r); box-shadow: var(--elev-3);
  font-size: var(--fs-tbl); animation: notifica-entra .18s ease-out;
}
.notifica-destra p { margin: 0; }
.notifica-err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); }
.notifica-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }
.notifica-warn { background: var(--warn-bg); color: var(--warn-testo); border: 1px solid var(--warn-bordo); }
.notifica-chiudi {
  position: absolute; top: 4px; right: 6px; background: none; border: none;
  color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px;
}
@keyframes notifica-entra {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) { #notifiche-destra { left: 8px; right: 8px; max-width: none; } }

/* ── Ricerca rapida: risultati raggruppati per tabella, ad albero ─────
   Una riga per tabella con il conteggio; si apre e mostra i singoli
   record, apribili nella finestra. Il nome della tabella porta invece
   alla tabella completa, già filtrata con lo stesso testo. */
.albero-risultati { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.albero-risultati .ramo + .ramo { border-top: 1px solid var(--line); }
.ramo-testa {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 9px 12px; background: var(--paper); list-style: none;
  font-weight: 600; user-select: none;
}
.ramo-testa::-webkit-details-marker { display: none; }
.ramo-testa:hover { background: var(--blu-tenue); }
.ramo-freccia { color: var(--ink-soft); transition: transform .12s ease; font-size: .9em; }
.ramo[open] > .ramo-testa .ramo-freccia { transform: rotate(90deg); }
.ramo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ramo-conteggio {
  background: var(--blu); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: .78rem; font-weight: 700;
}
.ramo-apri { font-weight: 600; font-size: .82rem; white-space: nowrap; }
.ramo-voci { margin: 0; padding: 4px 0; list-style: none; background: var(--card); }
.ramo-voci li { border-top: 1px solid var(--line); }
.voce-record {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 12px 8px 32px; font: inherit; color: var(--ink); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voce-record:hover { background: var(--blu-tenue); text-decoration: none; }
.ramo-altri { padding: 8px 12px 8px 32px; }
@media (max-width: 640px) {
  .ramo-apri { display: none; }          /* sul telefono basta toccare il ramo */
  .voce-record { white-space: normal; }
}

/* ===================================================================
   TELEFONO (profilo small): comandi compatti
   -------------------------------------------------------------------
   I filtri si aprono con il loro pulsante; il resto dei comandi della
   gestione dati (colonne, righe per pagina, esportazione, schede) resta
   disponibile, solo più stretto. La ricerca, dalla v16, è sempre in
   vista: le regole della vecchia barra a icone («barra-compatta»,
   «icona-comando», «solo-testo») sono state tolte con il pulsante a
   lente che le usava.
   =================================================================== */
.comando-attivo { border-color: var(--blu); color: var(--blu); }
.comando-aperto { background: var(--blu-tenue); border-color: var(--blu); }

@media (max-width: 640px) {
  /* comandi della tabella: restano tutti, incolonnati e a piena larghezza */
  .toolbar-azioni { flex-wrap: wrap; gap: 8px; }
  .toolbar-azioni .btn, .toolbar-azioni .filtro-menu > summary { flex: 1 1 auto; justify-content: center; }
  .conteggio-record { flex: 1 1 100%; text-align: right; }
  .colonne-menu .filtro-voci, .per-pagina-menu .filtro-voci { left: 0; right: auto; width: min(92vw, 300px); }
  .split-btn { flex: 1 1 auto; }
}

/* ===================================================================
   TABELLE DEI REPORT SU TELEFONO
   -------------------------------------------------------------------
   In gestione dati la griglia lascia il posto alle schede; nei report
   quella vista non esiste, e la tabella usciva dallo schermo restando
   inutilizzabile. Qui resta una tabella, ma scorrevole in orizzontale
   con la prima colonna bloccata, così si capisce sempre a quale riga
   appartiene il valore che si sta leggendo.
   =================================================================== */
@media (max-width: 640px) {
  .report-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line); border-radius: var(--r);
  }
  .report-scroll .tbl-dati { border: 0; border-radius: 0; min-width: max-content; }
  .report-scroll .tbl-dati th, .report-scroll .tbl-dati td { max-width: 190px; }
  .report-scroll .tbl-dati .col-riempi { display: none; }
  /* prima colonna bloccata: resta il riferimento mentre si scorre */
  .report-scroll .tbl-dati th:first-child,
  .report-scroll .tbl-dati td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card); border-right: 1px solid var(--line);
  }
  .report-scroll .tbl-dati thead th:first-child { background: var(--ink); z-index: 3; }
  .report-suggerimento { display: block; }
  /* pannelli del report: una colonna, senza tagli */
  .analisi-grid, .grafici-grid { grid-template-columns: 1fr !important; }
  .torta-riga { flex-direction: column; align-items: flex-start; }
  .report-toolbar { flex-wrap: wrap; gap: 8px; }
  .report-toolbar .btn, .report-toolbar .filtro-menu > summary { flex: 1 1 auto; justify-content: center; }
}
.report-suggerimento { display: none; font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ── Area Documenti ──────────────────────────────────────────────────
   Aree apribili, ciascuna con i suoi documenti: consultare, stampare e
   scaricare secondo i permessi ricevuti. */
.doc-albero { padding: 6px 10px; }
.doc-area { border-bottom: 1px solid var(--line); }
.doc-area:last-child { border-bottom: 0; }
.doc-area-testa {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 4px; list-style: none; font-weight: 600; user-select: none;
}
.doc-area-testa::-webkit-details-marker { display: none; }
.doc-area-testa:hover { color: var(--blu-scuro); }
.doc-area-freccia { color: var(--ink-soft); font-size: .85em; transition: transform .12s ease; }
.doc-area[open] > .doc-area-testa .doc-area-freccia { transform: rotate(90deg); }
.doc-conta {
  background: var(--blu); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: .78rem; font-weight: 700;
}
.doc-area-desc { font-weight: 400; }
.doc-area-corpo { padding: 0 0 8px 26px; }
.doc-risorsa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 6px; border-top: 1px solid var(--line);
}
.doc-tipo {
  background: var(--blu-tenue); color: var(--blu-scuro); font-weight: 700;
  border-radius: 5px; padding: 2px 7px; font-size: .72rem; letter-spacing: .04em;
}
.doc-titolo { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.doc-peso { white-space: nowrap; }
.doc-azioni { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.doc-riga-admin {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.doc-riga-file { font-size: .92rem; }
@media (max-width: 640px) {
  .doc-area-corpo { padding-left: 12px; }
  .doc-risorsa { gap: 6px; }
  .doc-azioni .btn { flex: 1 1 auto; }
}

/* ── Pagina di manutenzione ───────────────────────────────────────── */
.pagina-servizio {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--paper); margin: 0; padding: 20px;
}
.manutenzione-riquadro { max-width: 520px; text-align: center; padding: 32px 28px; }
.manutenzione-icona { font-size: 2.6rem; display: block; margin-bottom: 10px; color: var(--blu); }
.manutenzione-riquadro h1 { font-size: 1.3rem; margin: 0 0 10px; }
.manutenzione-riquadro p { color: var(--ink); }
.manutenzione-conto { color: var(--ink-soft); }
/* Nel tema scuro il riquadro deve restare leggibile: prima ereditava il testo
   chiaro su fondo chiaro e il messaggio spariva. */
[data-tema="scuro"] .pagina-servizio { background: var(--paper); }
[data-tema="scuro"] .manutenzione-riquadro {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
}
[data-tema="scuro"] .manutenzione-riquadro h1,
[data-tema="scuro"] .manutenzione-riquadro p { color: var(--ink); }
[data-tema="scuro"] .manutenzione-icona { color: var(--blu-scuro); }
.avviso-servizio { margin-bottom: 12px; }


/* Finestra per aggiungere una fonte all'autocomplete */
.ref-dialogo {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center;
  background: rgba(15, 26, 42, .45); padding: 16px;
}
.ref-dialogo[hidden] { display: none; }
.ref-dialogo-riquadro {
  background: var(--card); color: var(--ink); border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: 0 14px 40px var(--ombra);
  padding: 18px; width: min(760px, 96vw); max-height: 90vh; overflow: auto;
}
.ref-dialogo-riquadro h3 { margin-top: 0; }
.ref-riepilogo td { vertical-align: top; }
/* Mappature della fonte: al massimo 3 per riga, oltre le due righe si scorre
   invece di allargare la finestra a dismisura. */
.ref-mapp-scroll { max-height: 208px; overflow-y: auto; margin-bottom: 12px; }
.ref-mapp-riga:last-child { margin-bottom: 0; }
.btn-tondo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--blu); color: #fff; border: 1px solid var(--blu-scuro);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.btn-tondo:hover { background: var(--blu-scuro); }
.ref-mapp-aggiungi { margin-left: auto; }


/* ── Centro documentale a schede ─────────────────────────────────────
   Tre linguette (aree, allegati delle tabelle, gestione); dentro, una
   scheda-riquadro per area o tabella con il conteggio dei file, che si
   apre mostrando l'elenco: una riga per file, con chi l'ha caricato,
   quando, e i pulsanti per consultarlo o esportarlo. */
.doc-tab-barra {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); margin-bottom: 14px;
}
.doc-tab {
  border: 1px solid transparent; border-bottom: 0; background: transparent;
  color: var(--ink-soft); font: inherit; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--r) var(--r) 0 0; margin-bottom: -2px;
}
.doc-tab:hover { color: var(--blu-scuro); background: var(--blu-tenue); }
.doc-tab.attiva {
  color: var(--blu-scuro); background: var(--card);
  border-color: var(--line); border-bottom: 2px solid var(--card);
}
.doc-schede { display: grid; gap: 10px; }
.doc-scheda {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--ombra-card);
}
.doc-scheda-testa {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 14px; list-style: none; font-weight: 600; user-select: none;
}
.doc-scheda-testa::-webkit-details-marker { display: none; }
.doc-scheda-testa::before { content: "▸"; color: var(--ink-soft); font-size: .85em; }
.doc-scheda[open] > .doc-scheda-testa::before { content: "▾"; }
.doc-scheda-testa:hover { color: var(--blu-scuro); }
.doc-scheda-nome { flex: 1; min-width: 0; }
.doc-scheda-corpo { padding: 0 14px 12px; }
.doc-riga {
  display: grid; grid-template-columns: 1fr 160px 130px auto;
  align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.doc-riga-nome { display: flex; flex-direction: column; min-width: 0; }
.doc-riga-azioni { display: flex; gap: 6px; flex-wrap: wrap; }
/* Allegati tabelle: una riga per RECORD, non per file — quelli dello stesso
   record stanno affiancati sulla stessa riga (vedi doc-riga-file-elenco),
   quindi qui bastano due colonne invece delle quattro di .doc-riga. */
.doc-riga-record { grid-template-columns: 1fr auto; }
.doc-riga-file-elenco { display: flex; flex-wrap: wrap; gap: 2px 0; }
@media (max-width: 900px) {
  .doc-riga { grid-template-columns: 1fr; gap: 4px; }
  .doc-riga-azioni { margin-top: 4px; }
  .doc-riga-azioni .btn { flex: 1 1 auto; }
}


/* Card cliccabile: tutta la scheda è il collegamento, non un pulsante dentro */
.card-link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.card-link:hover {
  text-decoration: none; border-color: var(--blu);
  box-shadow: 0 4px 14px var(--ombra);
}
.card-link h2 { color: var(--blu-scuro); }


/* Widget di riepilogo: il totale in evidenza e sotto il dettaglio per valore */
.stat-riepilogo { margin-bottom: 6px; }
/* Nessuno scorrimento interno: l'elenco si legge tutto d'un fiato e il
   riquadro cresce quanto serve. */
.widget-elenco { margin: 0; padding-left: 0; list-style: none; }
.widget-elenco li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: .9rem;
}
.widget-elenco li:last-child { border-bottom: 0; }


/* Spunta per scegliere quali barre stampare (compare solo oltre 12 voci) */
.barra-riga:has(.barra-scelta) { grid-template-columns: auto minmax(80px, 24%) 1fr auto; }
.barra-scelta { margin: 0; }


/* ===================================================================
   PROFONDITÀ E LEGGIBILITÀ
   -------------------------------------------------------------------
   L'interfaccia era piatta: tutto sullo stesso piano, distinguibile
   solo dai bordi. Qui si introduce una scala di elevazione — quanto un
   elemento «sta sopra» il resto — usata in modo coerente:
     livello 0  sfondo della pagina
     livello 1  riquadri e tabelle
     livello 2  barre strumenti e intestazioni appiccicate
     livello 3  tendine, finestre, riquadri al passaggio del mouse
   Insieme all'elevazione si alza il contrasto del testo, perché
   un'ombra non serve a nulla se poi le parole si leggono a fatica.
   =================================================================== */
:root {
  --elev-1: 0 1px 2px rgba(15, 26, 42, .06), 0 1px 3px rgba(15, 26, 42, .08);
  --elev-2: 0 2px 4px rgba(15, 26, 42, .07), 0 4px 10px rgba(15, 26, 42, .09);
  --elev-3: 0 8px 18px rgba(15, 26, 42, .13), 0 2px 6px rgba(15, 26, 42, .08);
  --bordo-tenue: rgba(15, 26, 42, .08);
  /* testo più definito: il grigio medio precedente era al limite della
     leggibilità sulle note e sulle etichette */
  --ink: #16202c;
  --ink-soft: #4a5769;
}
[data-tema="scuro"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, .45);
  --elev-2: 0 2px 6px rgba(0, 0, 0, .5);
  --elev-3: 0 10px 24px rgba(0, 0, 0, .6);
  --bordo-tenue: rgba(255, 255, 255, .07);
  --ink: #e9eef5;
  --ink-soft: #b3c0d0;
}

/* Riquadri: un rilievo appena percettibile, che cresce al passaggio del
   mouse quando sono cliccabili. */
.card {
  box-shadow: var(--elev-1);
  border: 1px solid var(--bordo-tenue);
}
.card-link:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.card-link { transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease; }

/* Barra in alto: sta sopra tutto il resto e lo dichiara con l'ombra. */
.topbar { box-shadow: var(--elev-2); }

/* Tabelle: l'intestazione appiccicata proietta un'ombra sul contenuto che le
   scorre sotto, così si capisce che è ferma. */
.tbl-dati { box-shadow: var(--elev-1); }
.tbl-dati thead th { box-shadow: 0 2px 4px rgba(15, 26, 42, .12); }
.tbl-dati tbody tr:hover { background: var(--blu-tenue); }

/* Pulsanti: un rilievo leggero e una risposta al clic, invece della
   superficie piatta di prima. */
.btn {
  box-shadow: var(--elev-1);
  transition: box-shadow .12s ease, transform .06s ease, background .12s ease;
}
.btn:hover { box-shadow: var(--elev-2); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { box-shadow: var(--elev-1); }

/* Tendine, finestre e riquadri: sono il livello più alto. */
.filtro-voci, .nav-voce-menu > .filtro-voci, .sel-icona-pannello,
.filter-dropdown-panel, .cella-popup, .modale-box, .ref-dialogo-riquadro {
  box-shadow: var(--elev-3);
}

/* Campi: un incavo appena accennato li distingue dallo sfondo del riquadro. */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], input[type=time], select, textarea {
  box-shadow: inset 0 1px 2px rgba(15, 26, 42, .05);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blu);
  box-shadow: 0 0 0 3px var(--blu-tenue);
}
[data-tema="scuro"] input:focus,
[data-tema="scuro"] select:focus,
[data-tema="scuro"] textarea:focus { box-shadow: 0 0 0 3px rgba(79, 147, 224, .28); }

/* Le barre dei grafici guadagnano un accenno di volume. */
.barra-valore { box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .12); }

/* ===================================================================
   PROFILO TELEFONO: impostazioni proprie, da applicazione
   -------------------------------------------------------------------
   Vale per le risoluzioni comuni di iPhone e Android (360–430 px di
   larghezza logica). L'obiettivo non è «rimpicciolire il sito» ma dare
   le proporzioni a cui si è abituati su telefono: testo più grande,
   bersagli comodi da toccare, elenchi a schede, comandi a piena
   larghezza e barra sempre raggiungibile.
   =================================================================== */
@media (max-width: 640px) {
  :root {
    --fs: 16px;            /* iOS non ingrandisce la pagina se il campo è ≥16px */
    --fs-piccolo: 13px;
    --fs-tbl: 15px;
    --fs-titolo: 1.15rem;
    --sp: 14px; --sp-s: 10px;
    --controllo-y: 12px;   /* bersagli da toccare: circa 44px di altezza */
    --controllo-x: 14px;
    --r: 12px;             /* angoli più morbidi, come nelle app */
  }
  body { -webkit-text-size-adjust: 100%; }

  /* la barra resta in alto e raggiungibile mentre si scorre */
  .topbar { position: sticky; top: 0; padding: 10px 12px; }
  .content { padding: 12px; }

  /* riquadri a tutta larghezza, staccati fra loro come schede */
  .card { border-radius: var(--r); margin-bottom: 12px; }

  /* comandi comodi: pulsanti alti e a piena larghezza dove ha senso */
  .btn { min-height: 44px; padding: 0 16px; display: inline-flex; }
  .form-actions { display: flex; gap: 8px; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  textarea { min-height: 96px; }
  .check { padding: 6px 0; }               /* spunte più facili da centrare */

  /* elenchi: le schede record diventano l'interfaccia principale */
  .schede-record .scheda-record {
    border-radius: var(--r); box-shadow: var(--elev-1);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .scheda-record .campo-riga { padding: 3px 0; }

  /* tendine e finestre occupano lo schermo, come nelle app */
  .filtro-voci, .filter-dropdown-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    max-height: 65vh; border-radius: var(--r); box-shadow: var(--elev-3);
  }
  .modale-box { border-radius: 0; }

  /* il menu di sezione diventa a tutta larghezza */
  .nav-voce-menu > .filtro-voci { top: 52px; }

  /* paginazione e barre strumenti: righe intere, niente elementi schiacciati */
  .paginazione, .toolbar-azioni { gap: 8px; }
  .paginazione .btn { flex: 1 1 auto; justify-content: center; }
}

/* Schermi molto stretti (iPhone SE e simili, 360px): si toglie il superfluo */
@media (max-width: 380px) {
  :root { --sp: 10px; --sp-s: 8px; }
  .marchio-nome { display: none; }     /* lo spazio serve ai comandi */
  .nav-voce { max-width: 52vw; }
}


/* ── Correzioni al profilo telefono, dopo la prova sul browser ──────── */
@media (max-width: 640px) {
  /* i widget con elenco non possono occupare due colonne quando la
     griglia ne ha una sola: uscivano dal bordo destro */
  .box-widget:has(.widget-elenco) { grid-column: auto; }
  .griglia-widget { grid-template-columns: 1fr; }

  /* comandi affiancati a due a due invece di una riga ciascuno: la pagina
     era diventata una colonna di pulsanti alta mezzo schermo */
  .toolbar-azioni { flex-wrap: wrap; }
  .toolbar-azioni > .btn,
  .toolbar-azioni > .filtro-menu,
  .toolbar-azioni > .split-btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .toolbar-azioni > .btn:first-of-type { flex-basis: 100%; }   /* «Nuovo record» */
  .toolbar-azioni .filtro-menu > summary { width: 100%; justify-content: center; }
  .conteggio-record { flex-basis: 100%; text-align: left; }


  /* schede record: anteprima di due campi sotto il titolo */
  .scheda-rec-sommario {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
    margin: 6px 0 0; padding: 0 4px 4px;
  }
  .scheda-rec-sommario dt {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-soft);
  }
  .scheda-rec-sommario dd { margin: 0; font-size: .92rem; }
  .scheda-rec.aperta .scheda-rec-sommario { display: none; }   /* aperta: c'è tutto */
}
@media (min-width: 641px) { .scheda-rec-sommario { display: none; } }

/* Rifinitura del rilievo, dopo la prova a schermo: le ombre da sole non
   bastavano a staccare i riquadri. Lo sfondo della pagina si scurisce di un
   grado — restando neutro — così il bianco delle schede emerge, e ogni
   riquadro guadagna un filo di luce sul bordo superiore, come una superficie
   illuminata dall'alto. */
:root {
  --paper: #e7ebf0;
  --elev-1: 0 1px 2px rgba(15, 26, 42, .08), 0 2px 6px rgba(15, 26, 42, .07);
  --elev-2: 0 2px 6px rgba(15, 26, 42, .10), 0 6px 16px rgba(15, 26, 42, .10);
  --elev-3: 0 12px 28px rgba(15, 26, 42, .18), 0 3px 8px rgba(15, 26, 42, .10);
}
[data-tema="scuro"] { --paper: #10161d; --card: #1b232d; }

.card, .tbl-dati, .doc-scheda, .box-widget, .box-tabella {
  border-top-color: rgba(255, 255, 255, .7);
}
[data-tema="scuro"] .card,
[data-tema="scuro"] .tbl-dati,
[data-tema="scuro"] .doc-scheda,
[data-tema="scuro"] .box-widget { border-top-color: rgba(255, 255, 255, .06); }

/* Le intestazioni di sezione dentro i riquadri si staccano dal contenuto */
.card > h2:first-child, .card > h2 {
  border-bottom: 1px solid var(--bordo-tenue); padding-bottom: 8px;
}
/* I riquadri interni (widget, schede tabella) sono un gradino più in alto */
.box-widget, .box-tabella {
  background: var(--card); box-shadow: var(--elev-1);
  border: 1px solid var(--bordo-tenue); border-radius: var(--r);
}
.box-widget:hover, .box-tabella:hover { box-shadow: var(--elev-2); }


/* ===================================================================
   CAMPO A CATEGORIE — recuperato dalla copia rimossa
   =================================================================== */
/* ── Campo a categorie ───────────────────────────────────────────────
   Sopra i tag delle scelte fatte, poi la ricerca e l'albero dei risultati
   (categoria come intestazione, sottocategorie da spuntare), infine il
   pulsante «Aggiungi». Il campo occupa l'intera larghezza del modulo: le
   voci sono lunghe e in una colonna stretta andavano a capo su tre righe,
   con la barra di scorrimento addosso al pulsante. */
.tag-nidificato {
  display: grid; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; background: var(--card);
}
.tag-scelti { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.tag-voce {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blu-tenue); color: var(--blu-scuro);
  border: 1px solid var(--blu); border-radius: 999px;
  padding: 3px 8px 3px 12px; font-size: .88rem; font-weight: 600;
  max-width: 100%;
}
.tag-voce > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-togli {
  border: 0; background: transparent; color: var(--blu-scuro);
  cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px;
}
.tag-togli:hover { color: var(--err); }

.tag-ricerca { border-top: 1px dashed var(--line); padding-top: 10px; }
.tag-cerca { width: 100%; }
.tag-albero {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 10px; background: var(--campo);
  /* spazio fra il contenuto e la barra di scorrimento */
  scrollbar-gutter: stable both-edges;
}
.tag-gruppo + .tag-gruppo { margin-top: 10px; }
.tag-gruppo-nome {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding-bottom: 3px; margin-bottom: 4px;
}
.tag-opzione {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 14px; border-radius: 6px; cursor: pointer;
  font-size: .92rem; line-height: 1.3;
}
.tag-opzione:hover { background: var(--blu-tenue); }
.tag-opzione input { margin: 0; flex: none; }
/* scelta singola: voce cliccabile senza pallino, stesso aspetto della riga */
.tag-opzione-singola {
  width: 100%; border: 0; background: none; color: inherit;
  font-family: inherit; text-align: left;
}
.tag-opzione-singola:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.tag-azioni {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
@media (max-width: 640px) {
  .tag-albero { max-height: 200px; }
  .tag-azioni .btn { flex: 1 1 auto; }
}

/* ===================================================================
   PROFILO TELEFONO — impianto ripreso da «Gestione Flotta Bus» v13
   -------------------------------------------------------------------
   Porta qui le soluzioni che nella vecchia app rendevano il telefono
   usabile, adattate ai nomi di classe di questa:
     · finestre a scomparsa dal basso (bottom-sheet) invece di riquadri
       stretti con il modulo tagliato;
     · cluster di aiuti allo scorrimento sempre in vista sull'area della
       tabella, con «torna in cima» e frecce per le colonne;
     · prima colonna ferma mentre si scorre in orizzontale, così si sa
       sempre di quale record si sta leggendo la riga;
     · tabelle di amministrazione che diventano schede leggibili invece
       di righe da inseguire lateralmente;
     · griglie di riquadri a riempimento automatico;
     · barre strumenti e intestazioni che vanno a capo invece di
       traboccare.
   Le regole stanno in fondo al foglio: essendo le ultime, vincono sulle
   precedenti a parità di specificità.
   =================================================================== */

/* ── Aiuti allo scorrimento (da .tbl-aids di v13) ──────────────────────
   Sovrapposti all'angolo dell'area tabella, non dentro il flusso: non
   rubano spazio ai dati. Il contenitore lascia passare i clic, i pulsanti
   no. Compaiono solo quando servono davvero (li accende il JavaScript). */
.tbl-wrap { position: relative; }
.aiuti-tbl {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 6px; z-index: 7;
  pointer-events: none;                 /* i clic passano alla tabella… */
}
.aiuto-tbl {
  pointer-events: auto;                 /* …ma non sui pulsanti */
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--blu);
  font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: var(--elev-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s ease, background .16s ease;
}
.aiuto-tbl:hover { background: var(--blu); color: #fff; transform: translateY(-2px); }
.aiuto-tbl:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.aiuto-tbl[hidden] { display: none; }
.aiuto-su { background: var(--blu); color: #fff; border-color: var(--blu-scuro); }
.aiuto-su:hover { background: var(--blu-scuro); }

/* ── Prima colonna ferma durante lo scorrimento orizzontale ────────────
   Si attiva solo quando la tabella eccede lo spazio (classe messa dal
   JavaScript): applicata sempre, l'ombra a destra della colonna si
   vedrebbe anche quando non c'è nulla da scorrere. */
.tbl-wrap.scorre .tbl-dati thead th:first-child,
.tbl-wrap.scorre .tbl-dati tbody td:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--card);
  box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px var(--ombra);
}
.tbl-wrap.scorre .tbl-dati thead th:first-child {
  z-index: 4; background: var(--tbl-testa); color: var(--tbl-testa-testo);
}
/* ── Tabella che diventa schede su schermo stretto ─────────────────────
   Meccanismo generico: si aggiunge «tbl-schede» alla tabella e il
   JavaScript copia le intestazioni nei data-etichetta delle celle. Le
   pagine di amministrazione non vanno riscritte cella per cella. */
@media (max-width: 640px) {
  .tbl-schede thead { display: none; }
  .tbl-schede, .tbl-schede tbody, .tbl-schede tr, .tbl-schede td { display: block; width: auto; }
  .tbl-schede tr {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--elev-1); margin-bottom: 10px; padding: 4px 0; overflow: hidden;
  }
  .tbl-schede td {
    display: grid; grid-template-columns: minmax(88px, 38%) 1fr;
    gap: 10px; align-items: baseline;
    padding: 7px 12px; border: 0; border-top: 1px solid var(--bordo-tenue);
    white-space: normal; max-width: none;
  }
  .tbl-schede tr > td:first-child { border-top: 0; }
  .tbl-schede td::before {
    content: attr(data-etichetta);
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-soft);
  }
  /* una cella senza etichetta (comandi, spunte) prende tutta la larghezza */
  .tbl-schede td[data-etichetta=""] { grid-template-columns: 1fr; }
  .tbl-schede td[data-etichetta=""]::before { display: none; }
  /* i comandi di riga si allineano e restano toccabili */
  .tbl-schede td .btn { min-height: 40px; }
  .tbl-schede td:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .tbl-schede td:last-child::before { flex-basis: 100%; }
  /* la riga «nessun dato» non deve sembrare una scheda vuota */
  .tbl-schede td[colspan] { grid-template-columns: 1fr; }
  .tbl-schede td[colspan]::before { display: none; }
}

/* ── Vista a schede del report ─────────────────────────────────────────
   Stesso linguaggio visivo della gestione dati. Il titolo è tutto un
   pulsante: su un telefono un bersaglio di 20px non si centra. */
.schede-report { }
.scheda-rec-tutta {
  width: 100%; background: none; border: 0; font: inherit; text-align: left;
  cursor: pointer; color: inherit;
}
@media (max-width: 640px) {
  .scheda-rec-tutta { min-height: 46px; }
  .schede-report .scheda-rec-corpo > div { grid-template-columns: minmax(88px, 40%) 1fr; }
  .schede-report .badge-multi { margin: 0 4px 3px 0; }
}

/* ── Finestre a scomparsa dal basso (da .modal di v13) ─────────────────
   Su telefono la finestra sale dal bordo inferiore, con testa e piede
   appiccicati: prima il modulo veniva tagliato e i pulsanti di conferma
   finivano fuori dallo schermo, raggiungibili solo scorrendo alla cieca. */
@media (max-width: 640px) {
  .modale { padding: 0; align-items: flex-end; }
  .modale-box {
    width: 100%; max-width: 100%;
    height: auto; max-height: 94dvh;
    border-radius: 14px 14px 0 0;
    display: flex; flex-direction: column;
    animation: finestraSu .22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modale-testa {
    position: sticky; top: 0; z-index: 3;
    background: var(--card); border-bottom: 1px solid var(--line);
  }
  .modale-testa h2 { font-size: 1.02rem; }
  .modale-corpo { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
  /* i pulsanti di conferma restano visibili in fondo alla finestra */
  .modale-corpo .form-actions {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--card); border-top: 1px solid var(--line);
    margin: 10px -12px -8px; padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
  }
  .modale-corpo .form-actions .btn { min-height: 44px; }
}
@keyframes finestraSu { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ── Barra in alto e area sicura ───────────────────────────────────────
   Sui telefoni con la tacca la barra finiva sotto l'intaglio: le misure
   di sicurezza le dichiara il sistema con env(safe-area-inset-*).
   ------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .content {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  /* il menu di sezione non esce dal bordo */
  .nav-voce-menu > .filtro-voci {
    max-height: 72dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-voce-menu > .filtro-voci a { min-height: 44px; display: flex; align-items: center; }
}

/* ── Disposizione degli elementi: intestazioni e barre che vanno a capo ─
   Ripreso da v13: su mobile nulla trabocca in orizzontale, gli elementi
   scendono su più righe. */
@media (max-width: 900px) {
  .toolbar, .toolbar-azioni, .barra-filtri,
  .paginazione, .widget-testa, .card-testa { flex-wrap: wrap; }
  /* Lo spaziatore elastico non ha senso quando gli elementi vanno a capo:
     si annulla la sua spinta. Vale SOLO per lo <span> spaziatore: prima il
     selettore prendeva qualunque «.grow», quindi anche i «.form-group grow»
     che contengono un campo. Effetto misurato sulla homepage a 390px: il
     gruppo della ricerca rapida si ritrovava alto 0 mentre la casella dentro
     era alta 44, e la casella traboccava di 59px sul riquadro sottostante. */
  .paginazione > span.grow, .toolbar > span.grow { flex-basis: 100%; height: 0; }
}
@media (max-width: 640px) {
  /* i comandi di riga di una scheda o di una testata stanno insieme */
  .card > h2, .titolo-pagina { font-size: 1.12rem; line-height: 1.25; }
  .titolo-pagina { margin-bottom: 10px; }
  /* le tabelle di amministrazione che restano tabelle scorrono con inerzia */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* i comandi in coda alla riga non si spezzano a metà parola */
  .tbl td .btn + .btn { margin-left: 6px; }
}

/* ── Riquadri a griglia automatica (da v13) ────────────────────────────
   Una sola regola per tutte le griglie di schede: si riempiono da sole
   secondo lo spazio, senza numeri di colonne scritti a mano per ogni
   soglia. */
.griglia-schede,
.doc-griglia,
.griglia-tabelle {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
@media (max-width: 640px) {
  .griglia-schede, .doc-griglia, .griglia-tabelle { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Log attività: su telefono l'IP cede il posto ai dettagli (da v13) ─ */
@media (max-width: 640px) {
  .log-solo-grande { display: none; }
}

/* ── Meno movimento per chi lo ha chiesto al sistema ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .modale-box { animation: none; }
  .aiuto-tbl { transition: none; }
}

/* ===================================================================
   CORREZIONI DOPO LA PROVA AL BROWSER (iPhone, 390 px)
   -------------------------------------------------------------------
   Rilevate misurando la pagina renderizzata, non a occhio: elementi che
   escono dal bordo (nessuno) e bersagli da toccare più piccoli di 40 px
   (una ventina per pagina). Le linee guida di Apple e Google indicano
   44 px come misura minima di un bersaglio: sotto, si sbaglia il tocco.
   =================================================================== */

/* ── Doppia freccetta nelle tendine ────────────────────────────────────
   «50 per pagina ▾ ▾», «⇩ Esporta ▾ ▾»: la seconda freccia era il
   segnaposto che il browser disegna da sé su <summary>. Era nascosto solo
   dentro .split-btn, quindi ricompariva in tutte le altre tendine. Qui si
   toglie una volta per tutte, in entrambe le forme (quella vecchia di
   WebKit e ::marker, che è quella usata oggi). */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

@media (max-width: 640px) {
  /* ── Bersagli da toccare: 44 px di altezza minima ──────────────────── */
  .nav-voce, .btn, .btn-sm, .split-azione, .split-freccia,
  .filtro-menu > summary, .colonne-menu > summary, .per-pagina-menu > summary,
  .stella, .scheda-rec-apri, .link-allegato {
    min-height: 44px;
  }
  /* «btn-sm» è una misura da scrivania: su telefono un pulsante piccolo è
     solo un pulsante che si sbaglia. Torna della misura normale. */
  .btn-sm { padding: 0 14px; font-size: var(--fs); }

  /* la barra in alto: due comandi da 44 px con il nome del sito in mezzo */
  .nav-voce { padding: 0 10px; display: inline-flex; align-items: center; }

  /* ── Schede record: la testata è tutta il bersaglio ────────────────── */
  .scheda-rec-testa { min-height: 48px; padding: 8px 12px; }
  .scheda-rec-titolo { min-height: 32px; display: flex; align-items: center; }
  .scheda-rec-apri {
    min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  /* la spunta di selezione: 13 px era la misura di serie del browser */
  .scheda-rec-testa input[type="checkbox"],
  .colonne-elenco input[type="checkbox"],
  .check input[type="checkbox"] { width: 20px; height: 20px; }
  .check { min-height: 40px; }

  /* ── La stellina dei preferiti non è più un'icona orfana ───────────── */
  /* Stava da sola su una riga, 25×23 px, senza etichetta: sembrava un
     residuo di impaginazione. Su telefono prende la sua etichetta e la
     misura di un comando. */
  .stella {
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 44px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--card); font-size: 18px;
  }
  .stella::after {
    content: "Preferita"; font-size: var(--fs-piccolo); font-weight: 600;
    color: var(--ink-soft);
  }
  .stella-attiva::after { content: "Preferita ✓"; color: var(--blu); }
  .pin-form { flex: 1 1 calc(50% - 8px); }
  .pin-form .stella { width: 100%; justify-content: center; }

  /* ── Conteggi e comandi di pagina: una riga sola, leggibile ────────── */
  .conteggio-record, .paginazione .hint { font-size: var(--fs-piccolo); }
  .per-pagina-menu > summary { width: 100%; justify-content: center; }
}

/* ── Scelta dei campi in anteprima nelle schede ────────────────────────
   Vive dentro il menu «Colonne», sotto le colonne della tabella: sono due
   scelte vicine (che cosa vedo, e che cosa vedo per primo) e stare nello
   stesso posto le rende comprensibili. */
.colonne-sezione {
  border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.colonne-sezione-titolo {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
}
.colonne-elenco-anteprima { max-height: 190px; overflow-y: auto; }
/* raggiunto il massimo, le voci non spuntate si spengono: si capisce che
   bisogna togliere qualcosa prima di aggiungere */
.colonne-elenco-anteprima .check.esaurito { opacity: .45; }

/* ── Menu «Colonne»: i comandi restano raggiungibili ───────────────────
   Trovato provando la pagina al browser: con l'elenco delle colonne più la
   nuova sezione dell'anteprima, il pulsante «✓ Applica» finiva OLTRE il
   bordo inferiore dello schermo e non era cliccabile in alcun modo — la
   tendina è a scorrimento ma i comandi scorrevano via con il contenuto.
   Ora la tendina è una colonna: gli elenchi scorrono, i comandi restano
   appiccicati in fondo. Vale anche per le tabelle con molte colonne, dove
   il problema esisteva già prima di questa aggiunta. */
@media (max-width: 640px) {
  .colonne-menu > .filtro-voci {
    display: flex; flex-direction: column;
    max-height: 72dvh; overflow: hidden; padding-bottom: 0;
  }
  .colonne-menu .colonne-elenco { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
  .colonne-menu .colonne-elenco-anteprima { flex: 0 1 auto; max-height: 34vh; }
  .colonne-menu .colonne-sezione { min-height: 0; }
  .colonne-menu .colonne-azioni {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--card); border-top: 1px solid var(--line);
    margin: 0 -10px; padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 8px;
  }
  .colonne-menu .colonne-azioni .btn { flex: 1 1 auto; justify-content: center; }
}

/* Ultimi bersagli sotto misura, trovati alla seconda passata al browser:
   una <summary> senza classe (il pannello «⚙ Criteri» del report, alta 19px).
   Si prendono tutte le tendine, così un pannello aggiunto in futuro nasce già
   della misura giusta. */
@media (max-width: 640px) {
  summary { min-height: 44px; display: flex; align-items: center; }
  /* le spunte restano quadrate: è l'etichetta intorno a fare da bersaglio */
  .check input[type="checkbox"] { flex: 0 0 20px; }
}

/* Il pannello «Colonne» misurato al browser: nasceva all'altezza del pulsante
   (424px dall'alto) e si estendeva per 607px, quindi finiva a 1032px su uno
   schermo alto 844: gli ultimi due terzi, comandi compresi, erano fuori.
   Su telefono diventa un pannello ancorato al BASSO dello schermo, come le
   finestre: da qualunque punto della pagina si apra, sta sempre dentro. */
@media (max-width: 640px) {
  .colonne-menu > .filtro-voci,
  .per-pagina-menu > .filtro-voci,
  .export-report > .filtro-voci,
  .split-btn .filtro-voci {
    position: fixed; left: 8px; right: 8px; top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: 76dvh; z-index: 60;
    box-shadow: var(--elev-3); border-radius: var(--r);
  }
}

/* Ultimi due: il comando di ricerca a sola icona era largo 27px, e il titolo
   della scheda alto 32 (dentro una testata da 48, ma il bersaglio è il
   titolo). Entrambi portati a misura. */
@media (max-width: 640px) {
  summary.btn { min-width: 44px; justify-content: center; }
  .zona-ricerca summary.btn, .zona-ricerca .btn { min-width: 44px; }
  .scheda-rec-titolo { min-height: 40px; }
}


/* ===================================================================
   INNESTI DAL RAMO «gestionale_prova_14»
   =================================================================== */

/* ── Categorie aggregate nella scheda del record ───────────────────────
   Prima si leggeva «Motore > Lubrificazione; Motore > Perdita olio; Freni >
   Usura pastiglie»: la categoria ripetuta a ogni voce, e con sei o sette
   scelte la cella diventava un muro. Ora una riga per categoria. */
.scheda-categorie { display: grid; gap: 6px; }
.scheda-categoria { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.scheda-cat-nome {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--ink-soft); min-width: 96px;
}
.scheda-cat-voci { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 640px) {
  /* su telefono la categoria va a capo: 96px di etichetta più le voci non
     stanno su 390px senza spezzare le parole */
  .scheda-categoria { display: grid; gap: 3px; }
  .scheda-cat-nome { min-width: 0; }
}

/* ── Le due viste del report su telefono ───────────────────────────────
   Le schede si leggono (un record per volta, in verticale); la tabella
   serve quando si devono confrontare le colonne fra record. Nessuna delle
   due sostituisce l'altra, quindi ci sono entrambe e si scambiano con un
   comando. Su schermo largo la tabella è l'unica vista e il comando non
   compare. */
.scambia-vista { display: none; }
@media (max-width: 640px) {
  .scambia-vista { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 10px; }
  /* di serie: schede visibili, tabella nascosta */
  .tabella-report { display: none; }
  body.report-tabella .schede-report { display: none; }
  body.report-tabella .tabella-report {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .tabella-report .tbl-dati { font-size: .88rem; }
  .tabella-report .tbl-dati th, .tabella-report .tbl-dati td {
    padding-left: 8px; padding-right: 8px; max-width: 220px;
  }
  /* prima colonna ferma: senza, scorrendo non si sa più di quale record si
     stia leggendo la riga */
  .tabella-report .tbl-dati thead th:first-child,
  .tabella-report .tbl-dati tbody td:first-child {
    position: sticky; left: 0; z-index: 3; background: var(--card);
    box-shadow: 1px 0 0 var(--line), 6px 0 8px -6px var(--ombra);
  }
  .tabella-report .tbl-dati thead th:first-child { background: var(--tbl-testa); z-index: 4; }
}

/* La tabella del report su telefono si COMPRIMEVA invece di scorrere: con 11
   colonne in 364px di larghezza il browser stringe le celle fino a spezzare
   le parole, e lo scorrimento orizzontale non parte perché tecnicamente la
   tabella "ci sta". Con min-width: max-content ogni colonna prende la sua
   larghezza naturale e il contenitore scorre davvero — che è il presupposto
   della prima colonna bloccata. */
@media (max-width: 640px) {
  body.report-tabella .tabella-report { width: 100%; }
  body.report-tabella .tabella-report > table { min-width: max-content; width: auto; }
}

/* Correzione della correzione, misurata al browser: fra «.tabella-report» e la
   tabella c'è un «.report-scroll», quindi l'eccedenza dei 465px di tabella
   finiva dentro QUELLO e il contenitore esterno restava di 364 senza nulla da
   scorrere — la tabella sbordava tagliata e ferma. Lo scorrimento va messo sul
   genitore diretto della tabella, e la prima colonna bloccata deve stare nello
   stesso contesto di scorrimento, altrimenti «sticky» non ha nulla a cui
   agganciarsi. */
@media (max-width: 640px) {
  body.report-tabella .tabella-report { overflow: visible; }
  body.report-tabella .tabella-report .report-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; width: 100%;
  }
  body.report-tabella .tabella-report .report-scroll > table {
    min-width: max-content; width: auto;
  }
}

/* La prima colonna «sticky» non si agganciava: scorrendo di 103px se ne andava
   con il contenuto (misurato: da x=14 a x=-89). Motivo: Chrome non applica
   position:sticky alle celle di una tabella con border-collapse: collapse.
   Con «separate» e spaziatura zero l'aspetto non cambia e l'aggancio funziona. */
@media (max-width: 640px) {
  body.report-tabella .tabella-report .tbl-dati {
    border-collapse: separate; border-spacing: 0;
  }
}


/* ===================================================================
   CORREZIONI v16 — misurate al browser (tools_prova/prova.sh)
   =================================================================== */

/* ── 1. Ricerca: un solo blocco, sempre in vista ──────────────────────
   Prima la casella, la tendina «In» e il pulsante erano tre controlli
   separati dentro una barra elastica. Le conseguenze, misurate:
   · su desktop la riga occupava tutta la card (1370px su 1440) con i
     comandi sparsi e senza un legame visivo fra loro;
   · fra 641 e 1024px la regola «.form-group { min-width: 100% }» dava
     alla casella l'intera larghezza (754px su 820) e spingeva la tendina
     A CAPO SOPRA di essa: le due etichette si sovrapponevano e il campo
     diventava inutilizzabile — è la fascia «fra desktop e telefono»;
   · su telefono la ricerca era nascosta dietro un'icona a lente.
   Ora casella, colonna e invio formano un unico controllo con un contorno
   solo, largo quanto serve e mai più della finestra. */
.ricerca-gruppo {
  /* la misura segue la scala del testo (42em), non un numero fisso di pixel:
     su un 4K, dove il carattere di base è più grande, cresce con il resto
     dell'interfaccia invece di restare un francobollo in mezzo alla pagina */
  display: flex; align-items: stretch; width: 100%; max-width: min(100%, 42em);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--campo); overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
/* il contorno è del gruppo, non dei pezzi: dentro non ci sono bordi */
.ricerca-gruppo > input[type=text],
.ricerca-gruppo > select,
.ricerca-gruppo > button {
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; min-width: 0; outline: 0; box-shadow: none;
}
.ricerca-gruppo > input[type=text] {
  flex: 1 1 auto; padding: 9px 8px 9px 16px; width: auto;
}
.ricerca-gruppo > select {
  flex: 0 1 auto; width: auto; max-width: 42%; cursor: pointer;
  padding: 9px 10px; color: var(--ink-soft);
}
/* filo di separazione fra testo e colonna: divide senza spezzare il blocco */
.ricerca-divisore {
  flex: 0 0 1px; align-self: center; height: 60%;
  background: var(--line);
}
.ricerca-gruppo > button {
  flex: 0 0 auto; padding: 0 20px; cursor: pointer; font-weight: 600;
  background: var(--blu); color: #fff;
}
.ricerca-gruppo > button:hover { background: var(--blu-scuro); }
/* il fuoco si vede sull'intero gruppo: un anello dentro il singolo campo
   avrebbe tagliato in due il contorno */
.ricerca-gruppo:focus-within {
  border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-tenue);
}
/* con una ricerca attiva il blocco resta segnalato anche senza fuoco */
.ricerca-piena { border-color: var(--blu); }
.zona-ricerca { align-items: center; gap: 8px; }
.ricerca-azzera { flex: 0 0 auto; border-radius: 999px; }

/* Fascia intermedia (tablet e finestre a metà schermo): qui stava il guasto.
   La regola generale «.form-group { min-width: 100% }» resta per i moduli,
   ma la ricerca non è un modulo a colonne e non la segue. */
@media (max-width: 1024px) {
  .zona-ricerca .form-group { min-width: 0; }
}
/* Telefono: il blocco prende la larghezza della finestra e va a capo una volta
   sola — testo sopra, colonna e invio sotto — restando un unico riquadro. */
@media (max-width: 560px) {
  .ricerca-gruppo {
    flex-wrap: wrap; border-radius: var(--r); padding: 0;
  }
  .ricerca-gruppo > input[type=text] {
    flex: 1 1 100%; padding: 11px 14px; min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .ricerca-divisore { display: none; }
  .ricerca-gruppo > select { flex: 1 1 auto; max-width: none; min-height: 44px; }
  .ricerca-gruppo > button { min-height: 44px; padding: 0 18px; }
  .ricerca-azzera { min-width: 44px; min-height: 44px; }
}

/* ── 2. Prima colonna: evidenza al passaggio del mouse ────────────────
   La prima colonna e quella delle spunte restano ferme durante lo
   scorrimento, e per non lasciar trasparire le celle sotto hanno uno
   sfondo proprio. Quello sfondo però vinceva sull'evidenza della riga:
   misurato, le prime due celle restavano bianche (rgb(255,255,255))
   mentre le altre passavano al colore di evidenza. Qui l'evidenza viene
   ripetuta sulle colonne ferme, con la stessa forza.
   Le celle normali usavano un grigio appena accennato (--sfondo) mentre la
   riga sotto era già impostata sull'azzurro tenue: due colori diversi per
   la stessa evidenza. Ora la riga si evidenzia tutta con lo stesso azzurro,
   colonne ferme comprese. */
.riga-record:hover td { background: var(--blu-tenue); }
.tbl-dati tbody tr:hover > .col-check,
.tbl-dati tbody tr:hover > .col-ferma,
.tbl-scroll.con-frecce .tbl-dati tbody tr:hover > .col-check,
.tbl-scroll.con-frecce .tbl-dati tbody tr:hover > .col-ferma,
.tbl-scroll.con-frecce .tbl-dati tbody tr:nth-child(even):hover > .col-check,
.tbl-scroll.con-frecce .tbl-dati tbody tr:nth-child(even):hover > .col-ferma {
  background: var(--blu-tenue);
}
/* la riga selezionata (spunta attiva) si distingue anche nella colonna ferma */
.tbl-dati tbody tr:has(input[name=record_ids]:checked) > .col-check,
.tbl-dati tbody tr:has(input[name=record_ids]:checked) > .col-ferma {
  background: var(--blu-tenue);
}
/* stessa cosa nel report, dove la prima colonna si blocca su telefono */
@media (max-width: 640px) {
  .report-scroll .tbl-dati tbody tr:hover > td:first-child,
  .tabella-report .tbl-dati tbody tr:hover > td:first-child {
    background: var(--blu-tenue);
  }
}

/* ── 2b. Larghezza delle colonne: proporzionata al contenuto ──────────
   Difetto misurato in reportistica a 2560px: BUS 515px e AVM 515px, cioè
   una colonna da quattro cifre larga quanto una da dodici caratteri.
   Causa: la colonna di chiusura era stata azzerata (width: 0), così lo
   spazio che avanzava veniva spalmato sulle colonne dei dati, e più
   grande è lo schermo più le colonne si gonfiavano a vuoto.
   Rimedio in due mosse: ogni colonna CHIEDE la larghezza che il server ha
   calcolato sul suo contenuto reale (--col-car, il numero di caratteri
   della cella più lunga), e la colonna di chiusura torna a raccogliere
   quello che avanza. Se invece lo spazio non basta, nulla cambia: la
   tabella scorre in orizzontale come prima. */
.tbl-dati th.col-piena {
  width: min(calc((var(--col-car, 10) * 0.58em) + 2.6em), var(--col-max, 340px));
}
.tbl-dati th.col-vuota { width: 56px; }

/* ── 3. Icone nelle voci di menu ──────────────────────────────────────
   Sotto i 640px le voci del menu utente e di quello di sezione diventano
   flessibili («display: flex») per garantire il bersaglio da 44px al
   tocco. Un'icona Bootstrap è però un elemento vuoto, che disegna il
   simbolo con uno pseudo-elemento: come elemento flessibile veniva
   misurato 0×0 e spariva (su desktop restava 0×16). Con le icone-testo
   di serie il difetto non si vedeva, con un set di icone configurato sì.
   Ora ogni icona ha un posto suo, di misura fissa, valido per tutte e tre
   le forme possibili: carattere, icona Bootstrap e immagine caricata. */
.voce-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; min-width: 1.35em; height: 1.35em; line-height: 1;
}
.voce-ico .bi { font-size: 1.05em; line-height: 1; }
.voce-ico .icona-img { width: 100%; height: 100%; object-fit: contain; }
.nav-voce-menu > .filtro-voci a {
  display: flex; align-items: center; gap: 9px;
}


/* ===================================================================
   CORREZIONI v17 — misurate al browser (tools_prova/misure.py)
   =================================================================== */

/* ── 1. Tabelle: solo le linee sotto le righe ─────────────────────────
   Le linee verticali e il contorno esterno chiudevano ogni cella in una
   gabbia; a schermo l'occhio segue la riga, e per separare le colonne
   basta lo spazio fra loro. Restano quindi le sole linee orizzontali. */
.tbl th, .tbl td { border-left: 0; border-right: 0; }
.tbl td { border-bottom: 1px solid var(--line); }
.tbl { border: 0; }
.tbl-dati { border: 0; border-radius: 0; }
/* l'ultima riga non ha bisogno della linea: sotto non c'è più nulla */
.tbl tbody tr:last-child > td { border-bottom: 0; }
/* una linea più marcata chiude l'intestazione e stacca i titoli dai dati */
.tbl thead th { border-bottom: 2px solid var(--line); }

/* ── 2. Misure standard dei campi di modulo ───────────────────────────
   Misurato a 1600px: il campo del nome tecnico della tabella era largo
   1530px per contenere «parco_mezzi» (undici caratteri), il nome del
   gestionale 1452px, il percorso dei backup 1012px. Un campo lungo dieci
   volte il suo contenuto non aiuta a scriverci dentro: fa perdere di
   vista dove comincia il testo e allontana l'etichetta dal dato.
   Le misure sono in «rem», così seguono la scala del testo scelta
   nell'aspetto invece di essere numeri fissi di pixel. */
.form-group { max-width: 24rem; }
.form-group.grow { max-width: 36rem; }
/* i campi che ospitano testo lungo (descrizioni, elenchi di valori)
   restano larghi: si dichiarano con «campo-lungo» */
.form-group.campo-lungo, .form-group:has(textarea) { max-width: 40rem; }
/* il modulo record ha già la sua misura per campo, legata a --car */
/* la ricerca ha la sua misura, definita con il blocco unificato */
.zona-ricerca .form-group { max-width: none; }

/* ── 3. Pulsanti: larghezza sul contenuto, non sulla riga ─────────────
   Su telefono i comandi della tabella erano impostati per allungarsi
   («flex: 1 1 auto»): «Preferita» e «＋ Nuovo record» occupavano l'intera
   larghezza dello schermo. Ora ognuno è largo quanto il suo testo e vanno
   a capo insieme, mantenendo i 44px di altezza per il tocco. */
@media (max-width: 640px) {
  .toolbar-azioni .btn,
  .toolbar-azioni .filtro-menu > summary { flex: 0 1 auto; }
  .toolbar-azioni .filtro-menu > summary { width: auto; }
  .toolbar-azioni { justify-content: flex-start; }
  /* il pulsante principale resta il più evidente, ma non a tutta riga */
  .toolbar-azioni > .btn:not(.btn-ghost) { flex: 0 1 auto; }
}
/* nessun comando si stira oltre una misura leggibile, su qualunque schermo */
.btn, .filtro-menu > summary { max-width: 22rem; }

/* ── 4. Comandi dentro i riquadri: larghi quanto il loro testo ────────
   Su telefono la regola «.filtro-menu > summary { width: 100% }» valeva
   anche per le tendine dentro i riquadri della homepage: «Scegli tabelle»
   occupava l'intera larghezza della scheda. Resta a piena larghezza solo
   dove la tendina è un filtro vero e proprio, che ha bisogno di spazio. */
@media (max-width: 640px) {
  .widget-testa .filtro-menu, .widget-testa .filtro-menu > summary,
  .card-testa .filtro-menu, .card-testa .filtro-menu > summary { width: auto; }
  .widget-testa .btn, .card-testa .btn { flex: 0 1 auto; }
}
/* La ricerca rapida della homepage usa lo stesso blocco della gestione dati:
   qui non c'è la tendina delle colonne, quindi la casella arriva fino
   all'invio senza bisogno del separatore. */
.zona-ricerca .ricerca-gruppo > input[type=text]:last-of-type { border-bottom: 0; }
@media (max-width: 560px) {
  .ricerca-gruppo:not(:has(select)) > input[type=text] {
    flex: 1 1 auto; border-bottom: 0;
  }
  .ricerca-gruppo:not(:has(select)) { flex-wrap: nowrap; border-radius: 999px; }
}


/* ===================================================================
   CORREZIONI v18 — misurate al browser (tools_prova/misure.py)
   =================================================================== */

/* ── 1. Pulsanti dentro una riga di modulo: stessa altezza degli altri ──
   «.form-row» è un contenitore flessibile e i suoi figli, per impostazione
   predefinita, si allungano fino all'altezza della riga. Il gruppo di un
   campo è alto quanto etichetta + casella (circa 51px), quindi il pulsante
   accanto veniva stirato fin lì. Misurato: «Crea» e «Salva» alti 53px,
   «Autorizza» e «Applica» 55px, contro i 32-34px di tutti gli altri.
   Ora si allineano in basso, alla stessa quota delle caselle, e conservano
   l'altezza data dal loro contenuto. */
.form-row > .form-actions { align-self: flex-end; margin-top: 0; }
.form-row > .form-actions > .btn,
.form-row > .form-actions > button { align-self: center; }
.form-row > .btn, .form-row > button { align-self: flex-end; }
/* stessa cosa per le barre comandi con dentro campi e pulsanti */
.toolbar > .btn, .toolbar > button, .toolbar > .form-actions > .btn { align-self: flex-end; }

/* ── 2. Segnale di caricamento ────────────────────────────────────────
   Fra il clic e la comparsa della pagina non succedeva nulla di visibile:
   su una tabella grande sono secondi in cui sembra che il clic non sia
   stato registrato, e si finisce per premere una seconda volta. */
.barra-carico {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.barra-carico > span {
  display: block; height: 100%; width: 0; background: var(--blu);
  box-shadow: 0 0 8px rgba(30, 58, 95, .5);
}
/* L'avanzamento non è misurabile — il server non dice a che punto è — quindi
   la barra avanza in fretta fino a tre quarti e lì aspetta: dice «sto
   lavorando», non «manca il 25%». */
.barra-carico.in-corso > span { animation: carico-avanza 2.2s ease-out forwards; }
@keyframes carico-avanza {
  0%   { width: 0; }
  35%  { width: 45%; }
  70%  { width: 68%; }
  100% { width: 78%; }
}
/* il puntatore dice la stessa cosa del resto */
.sta-caricando, .sta-caricando a, .sta-caricando button { cursor: progress; }

/* Pulsante premuto: resta leggibile ma si vede che è in corso. Non viene
   disabilitato (un submit disabilitato non verrebbe inviato): il secondo
   clic è bloccato dallo script. */
.btn.in-attesa { opacity: .72; position: relative; pointer-events: none; }
.btn.in-attesa::after {
  content: ""; width: 12px; height: 12px; margin-left: 8px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; vertical-align: -2px; animation: carico-gira .7s linear infinite;
}
@keyframes carico-gira { to { transform: rotate(360deg); } }

/* Segnaposto dentro le finestre e i frammenti caricati a parte */
.carico-segnaposto {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 16px; color: var(--ink-soft); font-size: .95rem;
}
.carico-cerchio {
  width: 18px; height: 18px; border: 2px solid var(--line);
  border-top-color: var(--blu); border-radius: 50%;
  animation: carico-gira .8s linear infinite;
}
/* Rotella per le attese lunghe: ferma in un angolo, non copre i comandi */
.carico-lento {
  position: fixed; right: 16px; bottom: 16px; z-index: 210;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; font-size: .9rem;
  background: var(--card, #fff); color: var(--ink, #1a1a2e);
  border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.carico-lento[hidden] { display: none; }
.carico-lento .carico-cerchio { width: 22px; height: 22px; border-width: 3px; }

/* Avviso di connessione: barra fissa in alto, sopra tutto il resto */
.avviso-connessione {
  position: fixed; top: 0; left: 0; right: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; font-size: .9rem; text-align: center;
  background: var(--ok-bg, #e4f3e8); color: var(--ok, #1f6b3a);
  border-bottom: 1px solid var(--line);
}
.avviso-connessione[hidden] { display: none; }
.avviso-connessione.avviso-connessione-errore { background: var(--err-bg); color: var(--err); }

/* Chi ha chiesto meno animazioni vede comunque il segnale, fermo. */
@media (prefers-reduced-motion: reduce) {
  .barra-carico.in-corso > span { width: 40%; animation: none; }
  .btn.in-attesa::after, .carico-cerchio { animation: none; }
}

/* ── 3. Schede di sezione (pagina Report) ─────────────────────────────
   Due schede: «Consultazione», per tutti, e «Crea e gestisci», che richiede
   l'abilitazione. Quella non concessa resta in vista ma spenta: nasconderla
   farebbe cercare altrove una funzione che esiste e va solo richiesta. */
/* Le schede erano disegnate con il trucco classico: bordo inferiore sulla
   barra e scheda attiva tirata sopra di esso con un margine negativo. Dentro
   un contenitore che scorre («overflow-x: auto») quel margine viene però
   ritagliato, e la linea finisce per passare sopra la scheda: da qui l'effetto
   di schede sovrapposte. Ora la linea è disegnata come ombra interna del
   contenitore, che non ritaglia nulla, e nessun elemento esce dal proprio
   spazio. */
.schede {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end;
  box-shadow: inset 0 -2px 0 var(--line);
  margin-bottom: 16px; padding-bottom: 0;
}
.scheda-voce {
  padding: 9px 16px; border-radius: var(--r) var(--r) 0 0;
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
  border: 1px solid transparent; border-bottom: 0;
  box-shadow: inset 0 -2px 0 transparent;
}
/* Niente sottolineatura al passaggio del mouse: la scheda è un riquadro, non
   una parola in mezzo al testo. La regola generale «a:hover» la sottolineava
   perché le schede sono collegamenti; qui si spegne, e a segnalare che il
   puntatore è sopra bastano il colore e il fondo. */
.scheda-voce:hover {
  color: var(--blu); background: var(--blu-tenue); text-decoration: none;
}
.scheda-voce:focus-visible { text-decoration: none; }
.scheda-voce.attiva {
  background: var(--card); color: var(--ink);
  border-color: var(--line);
  /* copre la linea del contenitore proprio sotto questa scheda, senza
     spostarsi di un pixel fuori dal proprio spazio */
  box-shadow: inset 0 -2px 0 var(--card);
}
/* Scheda non concessa: tonalità spenta, cursore che dice «non si può», e il
   motivo nel suggerimento. Non è un collegamento, quindi non è raggiungibile
   né con il mouse né da tastiera. */
.scheda-spenta {
  opacity: .55; cursor: not-allowed; background: var(--sfondo);
  color: var(--ink-soft); user-select: none;
}
.scheda-spenta:hover { background: var(--sfondo); color: var(--ink-soft); }
.scheda-lucchetto { font-size: .85em; margin-left: 4px; }

/* Scheda di un report con la stellina dei preferiti nell'angolo */
.scheda-report { position: relative; }
.scheda-report-link { display: block; color: inherit; text-decoration: none; }
.stella-form { position: absolute; top: 8px; right: 10px; margin: 0; }
.stella-attiva { color: var(--giallo, #d9a406); }


/* ===================================================================
   CORREZIONI v19
   =================================================================== */

/* ── Schede dell'amministrazione, scorrevoli su schermo stretto ───────
   Le voci sono nove: su un telefono andrebbero a capo su tre righe e
   spingerebbero il contenuto sotto la piega. Scorrono invece in
   orizzontale, restando su una riga sola. */
.schede-scorrevoli {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.schede-scorrevoli .scheda-voce {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
}
@media (max-width: 640px) {
  /* bersaglio da toccare e spazio per non premere la scheda accanto */
  .schede-scorrevoli .scheda-voce { padding: 11px 14px; min-height: 44px; display: flex;
                                    align-items: center; gap: 6px; }
  /* un filo di sfumatura a destra dice che c'è dell'altro oltre il bordo */
  .schede-scorrevoli {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}

/* La voce «Amministrazione» nel menu di sinistra è un pulsante, non una
   voce fra le altre: porta a una sezione con le sue schede. */
.voce-amministrazione { font-weight: 600; }

/* Nota accanto al pulsante «Applica ora»: il filtro parte da solo, il
   pulsante serve solo a chi vuole anticipare l'attesa. */
.applica-nota { margin-left: 8px; font-size: .82rem; }
.filter-dropdown-azioni { display: flex; align-items: center; }

/* ── Aree documentali annidate ────────────────────────────────────────
   Le aree contenute in un'altra si aprono dentro di essa. Il rientro e la
   linea verticale dicono dove finisce un ramo: senza, tre livelli di
   riquadri bianchi uno dentro l'altro sono indistinguibili. */
.doc-sottoaree {
  margin: 8px 0 0 6px; padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.doc-albero .doc-scheda .doc-scheda { background: transparent; box-shadow: none; }
.doc-quante-sotto { font-weight: 400; margin-left: 8px; }
/* più si scende, meno peso ha l'intestazione: aiuta a leggere la profondità */
.doc-livello-1 > .doc-scheda-testa .doc-scheda-nome { font-size: .96em; }
.doc-livello-2 > .doc-scheda-testa .doc-scheda-nome { font-size: .93em; }
.doc-livello-3 > .doc-scheda-testa .doc-scheda-nome,
.doc-livello-4 > .doc-scheda-testa .doc-scheda-nome { font-size: .9em; }
@media (max-width: 640px) {
  /* su schermo stretto il rientro mangia la larghezza utile: si riduce */
  .doc-sottoaree { margin-left: 2px; padding-left: 8px; }
}

/* Zona dei risultati mentre si aggiorna: un velo appena percettibile dice che
   la richiesta è partita, senza far saltare il contenuto. Non si nasconde
   nulla: veder sparire la tabella a ogni spunta sarebbe peggio dell'attesa. */
.zona-in-aggiornamento { opacity: .72; transition: opacity .12s; }
@media (prefers-reduced-motion: reduce) {
  .zona-in-aggiornamento { transition: none; }
}


/* ===================================================================
   CORREZIONI v22
   =================================================================== */

/* ── Barra comandi del report su telefono ─────────────────────────────
   «Colonne» ed «Esporta» occupavano una riga intera ciascuno: due comandi
   larghi 366px uno sopra l'altro, che spingevano la tabella più in basso.
   Stanno su una riga sola, metà per uno, mantenendo i 44px per il tocco. */
@media (max-width: 640px) {
  .toolbar { row-gap: 8px; column-gap: 8px; }
  /* La regola generale «.filtro-menu { width: 100% }» serve alle tendine dei
     filtri, che di spazio ne hanno bisogno: qui va scavalcata, altrimenti i
     due comandi restano larghi quanto lo schermo. Il selettore è più
     specifico di quello generale, così non serve «!important». */
  .toolbar > details.colonne-menu,
  .toolbar > details.export-report {
    /* Metà larghezza MENO lo spazio fra i due: con «50%» esatto la somma
       supera la riga di quei pochi pixel del divario e il secondo comando va
       a capo — che è esattamente il difetto da correggere. */
    flex: 1 1 calc(50% - 8px); width: auto; min-width: 0;
  }
  .toolbar > details.colonne-menu > summary,
  .toolbar > details.export-report > summary {
    width: 100%; display: flex; align-items: center; justify-content: center;
  }
  /* lo spaziatore, andando a capo, li separerebbe su due righe */
  .toolbar > span.grow { display: none; }
}

/* ── Filtri e criteri nello stesso riquadro ───────────────────────────
   Erano due pannelli con due comandi distinti: le tendine per colonna e i
   criteri avanzati. Sono due modi di dire la stessa cosa — restringere che
   cosa si vede — e cercarli in due punti faceva perdere di vista quali
   condizioni fossero attive. */
/* Le due sezioni stanno una SOTTO l'altra: il pannello dei filtri è una riga
   flessibile, e senza questo «Criteri avanzati» finiva di fianco alle tendine
   come se fosse un filtro fra gli altri. */
.riquadro-filtri .filter-panel {
  padding-top: 4px; flex-direction: column; align-items: stretch;
}
/* senza la barra sopra (fuori dal telefono, nulla da azzerare) il pannello
   è la prima cosa del riquadro: il filetto di separazione non separa niente */
@media (min-width: 641px) {
  .riquadro-filtri > .barra-filtri.solo-telefono + .filter-panel {
    margin-top: 0; border-top: 0;
  }
}
/* dentro la prima sezione le tendine restano affiancate, come prima */
#form-filtri-report {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
}
#form-filtri-report > .titolo-sezione-filtri { width: 100%; }
.titolo-sezione-filtri {
  font-size: .95rem; font-weight: 700; margin: 10px 0 6px;
  color: var(--ink); cursor: pointer;
}
.divisorio-filtri {
  border: 0; border-top: 1px solid var(--line); margin: 14px 0 6px;
}
.criteri-avanzati > summary { list-style: none; }
.criteri-avanzati > summary::-webkit-details-marker { display: none; }

/* Finestra dell'informativa: sta sopra la pagina e non si chiude cliccando
   fuori — non è un avviso da scacciare, è una cosa da leggere. Resta però
   una finestra e non una barriera: la pagina sotto continua a esistere. */
.modale-privacy { display: flex; }
.modale-privacy .modale-box { max-width: 44rem; }
.modale-privacy .modale-piede { display: flex; gap: 10px; flex-wrap: wrap; }
.modale-privacy .modale-piede form { margin: 0; }
@media (max-width: 640px) {
  .modale-privacy .modale-piede form { width: 100%; }
  .modale-privacy .modale-piede .btn { width: 100%; }
}


/* ── Aiuto: recapiti dell'assistenza ──────────────────────────────────
   Il pulsante sta in barra, alla stessa altezza in ogni pagina: lo si cerca
   proprio quando non si sa dove cercare. Nella pagina di accesso è invece
   una frase per esteso, perché lì un punto interrogativo solo non basta a
   far capire che c'è una via d'uscita. */
.btn-aiuto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--barra-bottone); border: 1px solid var(--barra-bordo);
  color: var(--barra-testo-forte); font: inherit; font-weight: 700; font-size: 1rem;
}
.btn-aiuto:hover { background: var(--barra-bottone-hover); }
@media (max-width: 640px) {
  /* bersaglio da toccare, come gli altri comandi della barra */
  .btn-aiuto { width: 44px; height: 44px; }
}
.aiuto-login { margin: 14px 0 0; text-align: center; font-size: .92rem; }
.aiuto-login a { color: var(--ink-soft); }
.aiuto-login a:hover { color: var(--blu); }

.modale-aiuto .modale-box { max-width: 30rem; }
.elenco-contatti { list-style: none; margin: 0; padding: 0; }
.elenco-contatti li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.elenco-contatti li:last-child { border-bottom: 0; }
.contatto-etichetta { font-weight: 600; }
/* In fondo alla finestra, staccata dai recapiti: non è un contatto da
   scrivere, è un'informazione per chi deve segnalare un problema. */
.versione-software { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); text-align: left; }

/* Carica da file (Struttura dati → opzioni di un campo) */
.carica-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0; }
.carica-file > label.btn { cursor: pointer; margin: 0; }
.carica-file .carica-file-esito { flex: 1 1 100%; margin: 0; }
.carica-file .carica-file-esito .btn { margin: 4px 6px 0 0; }

/* Modifica in blocco: le opzioni di una Selezione multipla, una per riga e
   con lo scorrimento se sono molte */
.bulk-scelte-multiple {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto; padding: 4px 0;
}
.bulk-valore-controllo .hint { margin: 4px 0 0; }