/* ===================================================================
   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,
[data-tema="scuro"] .who.aperto .who-toggle { background: var(--blu-tenue); color: var(--ink); border-color: var(--blu); }
/* intestazioni di tabella, righe alterne e riquadri con colori scritti a mano */
[data-tema="scuro"] .tbl tbody tr:nth-child(even) { 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"] .who-menu-section { 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, .who-caret {
  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; }
.content { padding: 22px; max-width: 1180px; width: 100%; }

/* --------------------------------------------- menu utente (dropdown) */
.who { position: relative; }
/* 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.) */
.who-name { font-weight: 600; }
.who.aperto .who-caret { transform: rotate(180deg); }
.who-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(30,39,50,.14); padding: 6px; z-index: 50;
}
.who.aperto .who-menu { display: flex; flex-direction: column; }
.who-menu a { padding: 8px 10px; border-radius: 4px; color: var(--ink); font-size: 14px; }
.who-menu a:hover { background: var(--blu-tenue); color: var(--blu-scuro); text-decoration: none; }
.who-menu-section {
  margin: 8px 10px 2px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; color: #7f8ea0;
}
.who-menu-sep { border-top: 1px solid var(--line); margin: 6px 4px; }

/* ------------------------------------------------------------- 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:nth-child(even) { background: var(--riga-alterna); }
.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; }
  .who-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .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); }
.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); }

/* I filtri si aprono con il loro pulsante, su qualunque schermo: la vista
   resta pulita quando le colonne filtrabili sono molte. Restano già aperti
   se c'è un filtro attivo, così non si perde di vista che cosa è applicato. */
#pannello-filtri { display: none; }
#pannello-filtri.zona-aperta { display: flex; }
.barra-filtri { display: flex; margin: 0 0 10px; }

/* 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); }
/* righe alterne: la colonna ferma deve seguirne il colore, non restare bianca */
.tbl-scroll.con-frecce .tbl-dati tbody tr:nth-child(even) .col-check,
.tbl-scroll.con-frecce .tbl-dati tbody tr:nth-child(even) .col-ferma {
  background: var(--riga-alterna);
}

/* 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; }
.scorri-tab {
  /* stanno sopra la tabella, in alto: al centro si sarebbero sovrapposte
     alla prima colonna bloccata e alle caselle di selezione */
  position: sticky; top: 6px; z-index: 6; float: left;
  width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink); cursor: pointer;
  font-size: 1.1rem; line-height: 1; box-shadow: 0 2px 8px var(--ombra);
  opacity: .92;
}
.scorri-tab:hover { background: var(--blu-tenue); border-color: var(--blu); color: var(--blu-scuro); }
.scorri-sx { left: 8px; }           /* fuori dalle colonne bloccate */
.scorri-dx { float: right; right: 12px; }
.scorri-tab[hidden] { display: none; }
@media (max-width: 640px) { .scorri-tab { display: none; } }

/* 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; }

/* Filtro data: scorciatoie + intervallo, sopra l'elenco dei mesi */
.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: due colonne e larghezze proporzionate al tipo di dato ──
   Prima ogni campo occupava una riga intera a tutta larghezza: nella finestra
   di inserimento/modifica i controlli brevi (date, numeri, spunte) risultavano
   sproporzionati. Ora la griglia è a due colonne, i campi che hanno bisogno di
   spazio la occupano tutta e ogni controllo ha una misura propria del tipo. */
.form-griglia {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px; align-items: start;
}
.form-griglia .form-group { min-width: 0; margin: 0; }
.form-griglia .campo-largo { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea { max-width: 100%; }
.campo-date input { max-width: 190px; }
.campo-number input { max-width: 180px; }
.campo-boolean .check-bool { width: max-content; }
.campo-select select, .campo-text input { max-width: 460px; }
.campo-textarea textarea { width: 100%; max-width: 100%; resize: vertical; }
/* 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 { grid-template-columns: 1fr; }
  .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:nth-child(odd) { background: var(--sfondo, #f5f7fa); }
.scheda-riga dt { margin: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--grigio-500, #6b7280); align-self: center; }
.scheda-riga dd { margin: 0; font-size: .95rem; }
.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; }

/* ── 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%; } }

/* Senza una scelta esplicita dell'utente, su schermi stretti restano le prime
   sei colonne: il resto si consulta aprendo la scheda del record. */
@media (max-width: 1024px) {
  .tbl-auto-colonne th:nth-child(n+8),
  .tbl-auto-colonne td:nth-child(n+8) { display: none; }
}
@media (max-width: 640px) {
  .tbl-auto-colonne th:nth-child(n+5),
  .tbl-auto-colonne td:nth-child(n+5) { display: none; }
}
.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, .who-menu, .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 */
  .form-griglia, .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;
  }
  .form-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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, .who-toggle:hover { background: var(--barra-bottone-hover); text-decoration: none; }
#menu-sezioni[open] .who-caret { transform: rotate(180deg); }
#menu-sezioni[open] > .nav-voce,
#menu-sezioni[open] > .nav-voce:hover,
.who.aperto .who-toggle,
.who.aperto .who-toggle: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 utente: icona e nome, senza ruolo */
.who-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--barra-bottone); border: 1px solid var(--barra-bordo);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
  color: var(--barra-testo-forte); font: inherit; font-weight: 600;
}
.who-ico { font-size: 1.05em; line-height: 1; }
.who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.who-caret { 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; }
  .who-name { display: none; }            /* resta l'icona: lo spazio è poco */
}

/* 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 */

/* ── 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; }


/* ── 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; }
@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, .who-menu, .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 utente e quello di sezione diventano a tutta larghezza */
  .who-menu { position: fixed; left: 8px; right: 8px; top: 58px; }
  .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; }
.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);
}
.tbl-wrap.scorre .tbl-dati tbody tr:nth-child(even) td:first-child { background: var(--riga-alterna); }

/* ── 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 e quello utente non escono dal bordo */
  .who-menu, .nav-voce-menu > .filtro-voci {
    max-height: 72dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .who-menu a, .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 a capo: annulla la sua spinta */
  .paginazione .grow, .toolbar .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, .who-toggle, .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, .who-toggle { 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; }
  .tabella-report .tbl-dati tbody tr:nth-child(even) td:first-child { background: var(--riga-alterna); }
}

/* 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; }
/* Fra 641 e 1024px le colonne oltre la settima sono nascoste per scelta:
   la colonna di chiusura non va nascosta con loro, altrimenti l'avanzo
   torna a gonfiare le colonne rimaste. */
@media (min-width: 641px) and (max-width: 1024px) {
  .tbl-auto-colonne th.col-riempi,
  .tbl-auto-colonne td.col-riempi { display: table-cell; }
}

/* ── 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; }
.who-menu a, .nav-voce-menu > .filtro-voci a {
  display: flex; align-items: center; gap: 9px;
}