:root{
  /* Un solo colore d'identita', in due valori per destinazione: #EE0000 a
     schermo, #CC0000 (Pantone 485) in stampa — vedi la @media print in fondo
     al file. Prima ne convivevano tre: uno come identita', uno come scuro e
     un terzo per gli errori, che competeva con l'unico colore
     dell'Associazione. */
  --cri-red:#EE0000;
  --cri-red-print:#CC0000;
  --cri-red-dark:#BB0000;
  --cri-red-soft:#FDECEC;
  --ink:#1c2024;
  --ink-soft:#5a6570;
  --line:#e4e8ec;
  --bg:#f4f6f8;
  --card:#ffffff;
  --ok:#14742F;
  --ok-soft:#e7f6ec;
  --warn:#8A5A00;
  --warn-soft:#fff6e0;
  --danger:var(--cri-red);
  --danger-soft:#fdecec;
  --info:#1c6fd3;
  --info-soft:#e8f0fd;
  --radius:14px;
  /* Due ombre sole, appena percettibili: il rilievo lo danno i bordi. */
  --shadow-card:0 1px 2px rgba(20,30,40,.06),0 1px 3px rgba(20,30,40,.08);
  --shadow:var(--shadow-card);
  --shadow-alta:0 4px 16px rgba(0,0,0,.18);
  /* Arial e' l'unico font previsto dal Manuale, per l'interfaccia come per
     i documenti: nessun webfont, nessun @font-face, nessun preload. */
  --font:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
/* L'attributo `hidden` deve nascondere davvero. Il browser lo applica con un
   `display:none` a specificità zero, che qualunque nostra regola di classe
   batte: su .toolbar (display:flex) impostare `.hidden = true` non aveva
   alcun effetto, e finora la cosa si aggirava con una regola dedicata per
   ogni componente (.tour-fab[hidden] e simili). Una regola
   sola vale per tutti. */
[hidden]{display:none!important}
/* Se un elemento qualsiasi finisce anche di poco più largo dello schermo
   (una card, una riga di una tabella non contenuta bene, ecc.) senza questo
   il telefono non va a capo: allarga tutta la pagina, che appare "zoomata"
   e tagliata ai lati invece di essere semplicemente più stretta. */
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100vw}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.45}
.boot{display:grid;place-items:center;height:100vh;color:var(--ink-soft)}
button{font-family:inherit}
a{color:var(--cri-red);text-decoration:none}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:38px;height:38px;background:var(--cri-red);border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;flex:none}
.brand b{font-size:15px;display:block;line-height:1.1}
.brand span{font-size:11.5px;color:var(--ink-soft)}
.section-switch{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.section-switch button{border:1px solid var(--line);background:#fff;padding:9px 10px;border-radius:0;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink-soft);text-align:left}
.section-switch button:hover{background:var(--bg)}
.section-switch button.active{background:var(--cri-red);border-color:var(--cri-red);color:#fff}
.nav-secondary{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:14.5px;cursor:pointer}
.nav a .ic{width:20px;text-align:center;opacity:.8}
.nav a:hover{background:var(--bg)}
.nav a.active{background:var(--cri-red-soft);color:var(--cri-red-dark);font-weight:600}
.sidebar .foot{margin-top:auto;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:12px}
.sidebar .foot .who{font-weight:600;color:var(--ink)}
.sidebar .foot button{margin-top:8px;width:100%;border:1px solid var(--line);background:#fff;padding:7px;border-radius:9px;cursor:pointer;color:var(--ink-soft)}
.sidebar .foot button:hover{background:var(--bg)}

.main{padding:26px 30px 60px;max-width:1280px}

/* ---------- Header ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head>div:first-child{min-width:0}
.page-head h1{font-size:24px;margin:0}
.page-head p{margin:4px 0 0;color:var(--ink-soft);font-size:14px;overflow-wrap:anywhere}
.page-head .actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 15px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s cubic-bezier(.2,0,.2,1)}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--cri-red);border-color:var(--cri-red);color:#fff}
.btn.primary:hover{background:var(--cri-red-dark)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-soft)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow);min-width:0}
.stat .k{font-size:12.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat .v{font-size:30px;font-weight:800;margin-top:6px;letter-spacing:-.02em;overflow-wrap:break-word}
.stat .s{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.stat-clickable{cursor:pointer}
.stat-clickable:hover{box-shadow:0 0 0 2px var(--line) inset}
/* Pannelli <details> a scomparsa (archivio fatture concluse, registro
   modifiche): stesso stile per qualunque <details class="card"> con una
   <summary class="card-h"> e una freccina .archivio-freccia dentro. */
details.card>summary{cursor:pointer;list-style:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary:hover{background:var(--bg)}
details.card .archivio-freccia{transition:transform .15s cubic-bezier(.2,0,.2,1);color:var(--ink-soft)}
details.card[open]>summary .archivio-freccia{transform:rotate(90deg)}
.stat.accent{border-left:4px solid var(--cri-red)}
.stat.warn{border-left:4px solid var(--warn)}
.stat.ok{border-left:4px solid var(--ok)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .card-h{padding:15px 18px;border-bottom:1px solid var(--line);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .card-b{padding:18px}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}
.chip.red{background:var(--cri-red-soft);color:var(--cri-red-dark);border-color:transparent}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.chip.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.chip[data-stato],.chip[data-sollecito]{cursor:pointer}
.chip[data-stato]:hover,.chip[data-sollecito]:hover{filter:brightness(0.94);box-shadow:0 0 0 2px var(--line) inset}
[role="button"]:focus-visible,table.tbl tbody tr[role="button"]:focus-visible{outline:2px solid var(--cri-red);outline-offset:-2px}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px}
.search-icon{flex:none;opacity:.5;font-size:14px;line-height:1}
.search input{flex:1;min-width:0;width:auto;padding:10px 0;border:none;border-radius:0;background:transparent}
.search input:focus{box-shadow:none}
.search:focus-within{border-color:var(--cri-red);box-shadow:0 0 0 3px var(--cri-red-soft)}
select,input[type=text],input[type=date],input[type=number],input[type=password],textarea{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
select{cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cri-red);box-shadow:0 0 0 3px var(--cri-red-soft)}

/* ---------- Table ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl th[data-sort]:hover{color:var(--ink)}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:#fafbfc;cursor:pointer}
.tbl-wrap{overflow-x:auto}
.money{font-variant-numeric:tabular-nums;font-weight:600}
th.money-col,td.money-col{text-align:right}
tr.scaduta td{background:var(--danger-soft)}
tr.scaduta:hover td{background:#fbdcdd}

/* ---------- Banner ---------- */
.banner{border-radius:var(--radius);padding:15px 18px;display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.banner>div{min-width:0}
.banner.danger{background:var(--danger-soft);border:1px solid #f3c0c3}
.banner.warn{background:var(--warn-soft);border:1px solid #f0dca0}
.banner.ok{background:var(--ok-soft);border:1px solid #b8e2c4}
.banner.info{background:#eaf2fb;border:1px solid #c2dbf3}
.banner .bi{font-size:20px;line-height:1}
.banner b{display:block}
.banner .small{font-size:13px;color:var(--ink-soft)}
.banner ul{margin:6px 0 0;padding-left:18px;font-size:13px}

/* ---------- Forms / modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(15,20,25,.45);display:grid;place-items:center;padding:20px;z-index:50;overflow:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:var(--shadow-alta)}
.modal .m-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:2}
.modal .m-h h3{margin:0;font-size:18px}
.modal .m-b{padding:22px}
.modal .m-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}
.field{margin-bottom:15px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:40px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px;line-height:1;padding:6px;color:var(--ink-soft)}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle:focus-visible{outline:2px solid var(--cri-red);outline-offset:2px;border-radius:6px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%}
.field .hint{font-size:12px;color:var(--ink-soft);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.three{grid-template-columns:1fr 1fr 1fr}

/* ---------- Login ---------- */
.login-wrap{display:grid;place-items:center;min-height:100vh;padding:20px;background:#FEFEFE}
.login{background:#fff;border:1px solid var(--line);border-top:8px solid var(--cri-red);border-radius:4px;box-shadow:var(--shadow);width:100%;max-width:380px;padding:32px 28px}
.login .brand{justify-content:center;flex-direction:column;text-align:center;gap:8px;padding-bottom:22px}
.login .brand .logo{width:52px;height:52px;font-size:26px}

/* ---------- Upload PDF / dropzone ---------- */
.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:28px;text-align:center;color:var(--ink-soft);cursor:pointer;transition:.15s cubic-bezier(.2,0,.2,1)}
.dropzone:hover,.dropzone.drag{border-color:var(--cri-red);background:var(--cri-red-soft);color:var(--cri-red-dark)}
.dropzone .big{font-size:32px;margin-bottom:8px}

/* Overlay mostrato trascinando un file su qualunque punto della dashboard,
   non solo sul pulsante "Carica PDF/XML": pointer-events:none così gli eventi
   di drag/drop raggiungono comunque il contenitore sottostante. */
.drop-page-overlay{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;pointer-events:none;background:rgba(28,32,36,.45)}
.drop-page-overlay.show{display:flex}
.drop-page-overlay .box{background:var(--card);border:3px dashed var(--cri-red);border-radius:var(--radius);padding:36px 56px;font-size:18px;font-weight:600;color:var(--cri-red-dark);text-align:center;box-shadow:var(--shadow)}
.upload-progress{font-weight:600;color:var(--ink-soft);margin:-6px 0 14px;font-size:13.5px}
.upload-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.upload-item .u-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600}
.upload-item .u-status{font-size:12.5px;color:var(--ink-soft);font-weight:400}
.upload-item .u-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.upload-item .u-fields .field{margin-bottom:0}

/* ---------- Anteprima file (solo client, per confrontare col letto dall'AI) ---------- */
/* La colonna dei campi non ha bisogno di essere larga quanto quella
   dell'anteprima: qui è il documento a dover restare leggibile senza dover
   continuamente zoomare, ma deve restare abbastanza larga da non spezzare
   le griglie a più colonne dei campi (form-row.three, u-fields). */
.editor-2col{display:flex;gap:20px;align-items:flex-start}
.editor-2col>.col{flex:1;min-width:0}
.editor-2col>.col:first-child{flex:1;max-width:460px}
.editor-2col>#preview-col{flex:2;min-width:460px}
.file-preview{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;height:88vh;display:flex}
.file-preview .fp-frame,.file-preview .fp-img{width:100%;height:100%;border:0;object-fit:contain;background:#fff}
.file-preview .fp-empty{margin:auto;color:var(--ink-soft);font-size:13px;text-align:center;padding:20px}
@media (max-width:900px){.editor-2col{flex-direction:column}.editor-2col>.col:first-child{max-width:none}.editor-2col>#preview-col{min-width:0}.file-preview{height:70vh;width:100%}}

/* ---------- Pagamenti / rate ---------- */
.pag-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pag-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px}
.pag-row .rm{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:16px}
.pag-row .rm:hover{color:var(--danger)}
.residuo-box{display:flex;justify-content:space-between;padding:10px 14px;background:var(--bg);border-radius:10px;font-size:14px;margin-top:6px}
.residuo-box b{font-size:16px}

/* ---------- Log modifiche ---------- */
.log-row{border-bottom:1px solid var(--line);padding:12px 0}
.log-row:last-child{border-bottom:none}
.log-row .l-head{display:flex;align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap}
.log-row .l-when{color:var(--ink-soft);font-size:12px;margin-left:auto}
.log-row details{margin-top:6px;font-size:12.5px}
.log-row pre{background:var(--bg);border-radius:8px;padding:10px;overflow:auto;font-size:11.5px;max-height:220px}

/* ---------- misc ---------- */
.muted{color:var(--ink-soft)}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-soft)}
.empty-state .big{font-size:44px;opacity:.4}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--cri-red);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
.spinner.sm{width:18px;height:18px;border-width:2px;display:inline-block;margin:0;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;box-shadow:var(--shadow-alta);z-index:100;animation:up .25s;display:flex;align-items:center;gap:16px;overflow:hidden;max-width:min(92vw,560px)}
/* Il pulsante dentro al toast (es. «Annulla» dopo aver segnato un impegno
   come fatto): si legge sul fondo scuro o colorato del toast qualunque
   esso sia, quindi prende il colore dal testo e non da una tinta fissa. */
.toast-azione{flex:none;background:transparent;border:1.5px solid currentColor;color:inherit;
  font:inherit;font-weight:700;padding:5px 12px;border-radius:4px;cursor:pointer}
.toast-azione:hover{background:rgba(255,255,255,.18)}
/* Quanto tempo resta per premerlo: una barra che si consuma, invece di un
   numero che conta alla rovescia e che si finisce per leggere invece di
   decidere. */
.toast-tempo{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.55);
  animation-name:toast-tempo;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes toast-tempo{from{width:100%}to{width:0}}
@media (prefers-reduced-motion:reduce){.toast-tempo{animation:none;width:100%;opacity:.45}}
.toast.ok{background:var(--ok)} .toast.err{background:var(--danger)}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}

/* ---------- Tour guidato ---------- */
.tour-fab{position:fixed;right:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;background:var(--cri-red);color:#fff;border:none;box-shadow:var(--shadow);font-size:22px;cursor:pointer;display:grid;place-items:center}
/* Serve esplicitamente: "display:grid" qui sopra è una regola dell'autore e
   vince sul display:none che il browser darebbe da solo a un elemento con
   l'attributo hidden. Senza, il pulsante del tour restava visibile anche in
   home e nelle sezioni che un tour non ce l'hanno. */
.tour-fab:hover{background:var(--cri-red-dark)}
.tour-fab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Il "buco" luminoso è lo stesso elemento .tour-ring: il suo box-shadow con
   spread enorme (9999px) copre tutto il viewport tranne il proprio riquadro,
   ottenendo l'effetto spotlight senza dover modificare position/z-index degli
   elementi reali della pagina (rischioso su tabelle, righe, sidebar fissa). Lo
   scrim sottostante è invece trasparente: il suo unico scopo è intercettare i
   click sul resto della pagina mentre il tour è aperto. */
.tour-scrim{position:fixed;inset:0;z-index:899;background:transparent}
.tour-ring{position:fixed;z-index:900;border-radius:12px;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--cri-red),0 0 0 9999px rgba(15,20,25,.55);pointer-events:none;transition:top .2s cubic-bezier(.2,0,.2,1),left .2s cubic-bezier(.2,0,.2,1),width .2s cubic-bezier(.2,0,.2,1),height .2s cubic-bezier(.2,0,.2,1);display:none}
.tour-tip{position:fixed;z-index:901;background:#fff;border-radius:14px;box-shadow:var(--shadow-alta);width:320px;max-width:calc(100vw - 28px)}
.tour-tip .tt-h{padding:16px 18px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tour-tip .tt-h b{font-size:15.5px;line-height:1.25}
.tour-tip .tt-step{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.tour-tip .tt-x{border:none;background:none;cursor:pointer;color:var(--ink-soft);font-size:15px;padding:2px 4px;line-height:1;flex:none}
.tour-tip .tt-x:hover{color:var(--ink)}
.tour-tip .tt-b{padding:10px 18px 4px;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.tour-tip .tt-f{padding:14px 18px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:820px){.tour-fab{bottom:130px;right:14px;width:46px;height:46px;font-size:19px}}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;flex-direction:row;border-right:none;border-top:1px solid var(--line);padding:6px;z-index:40;gap:0;justify-content:space-around}
  .sidebar .brand,.sidebar .foot,.nav-secondary{display:none}
  .section-switch{position:fixed;bottom:54px;left:0;right:0;flex-direction:row;gap:0;margin:0;z-index:40;background:#fff;border-top:1px solid var(--line)}
  .section-switch button{flex:1;border:none;border-radius:0;font-size:12px;text-align:center}
  .nav{flex-direction:row;width:100%;justify-content:space-around;margin:0}
  .nav a{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 4px;flex:1;text-align:center}
  .nav a .ic{font-size:19px}
  .nav a .txt{font-size:10.5px}
  .main{padding:18px 16px 130px}
  /* Una sola colonna, esplicita: "auto-fit" con un numero grande (es. "€
     194.532,79") può decidere che due colonne ci stanno anche quando non è
     vero, allargando tutta la pagina invece di andare a capo. */
  .stats{grid-template-columns:1fr}
  .form-row,.form-row.three{grid-template-columns:1fr}
  .upload-item .u-fields{grid-template-columns:1fr}
  table.tbl th,table.tbl td{padding:8px}

  /* Ogni filtro della toolbar a piena larghezza, uno sotto l'altro: gli
     input di data/numero hanno una larghezza intrinseca stretta e, lasciati
     in fila con flex-wrap, finivano ammucchiati in righe disomogenee. */
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar>*{width:100%}

  /* Stessa cosa per i controlli nell'intestazione di pagina (es. il
     selettore anno + pulsante export del Report): "flex-wrap" da solo non
     basta perché un elemento come il <select> o il testo di un pulsante può
     restare più largo dello spazio disponibile invece di andare a capo al
     suo interno — un-width:100% esplicito lo forza in ogni caso. */
  .page-head .actions{flex-direction:column;align-items:stretch;width:100%}
  .page-head .actions>*{width:100%}

  /* La tabella principale delle fatture ha 8 colonne: su schermo stretto se
     ne nascondono due meno essenziali (N. Fattura, Data fattura — restano
     comunque consultabili aprendo la fattura) per ridurre lo scroll
     orizzontale. Solo su questa tabella (classe tbl-fatture): le altre
     tabelle dell'app hanno colonne diverse, nasconderle allo stesso modo
     nasconderebbe dati sbagliati.*/
  .tbl-fatture th:nth-child(2),.tbl-fatture td:nth-child(2),
  .tbl-fatture th:nth-child(3),.tbl-fatture td:nth-child(3){display:none}

  /* Pulsanti del footer di modali/editor: se non ci stanno su una riga,
     vanno impilati a piena larghezza invece di restare compressi o uscire
     dal bordo. Lo spaziatore flessibile che li spinge a destra su schermi
     larghi (un <div style="flex:1">, primo figlio del contenitore del
     footer) non serve più quando sono impilati: lo si toglie di mezzo. */
  .m-f>div{flex-wrap:wrap}
  .m-f>div>div[style*="flex:1"]{flex-basis:100%;order:-1;padding:0}
  .m-f>div>button{flex:1 1 auto}

  /* Riga selezionabile di una fattura (pagamenti, note di credito, note di
     credito multiple): l'input dell'importo può andare a capo sotto
     l'etichetta invece di restringersi fino a diventare illeggibile. */
  .pag-row{flex-wrap:wrap}
  .pag-row input[type=number]{width:100%!important}
}

/* ---------- Portale: home a card e menu delle sezioni ----------
   Le card della home sono l'eccezione voluta alla geometria del resto del
   portale: colore pieno per sezione, angoli a 16px e sollevamento in hover.
   L'audit CRI del 11/09/2026 chiedeva di uniformarle (rilievo M3) e la
   versione conforme e' stata fatta e poi ritirata su richiesta: e' la
   pagina d'ingresso, e chi la usa tutti i giorni riconosce le sezioni dal
   colore prima che dal nome. */
.home-head h1{font-size:22px;margin:0}
.home-head p{margin:3px 0 26px;color:var(--ink-soft);font-size:13.5px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,190px));gap:20px}
.home-card{aspect-ratio:1;background:var(--c);border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;box-shadow:0 6px 16px var(--o);color:#fff;text-decoration:none;cursor:pointer;transition:border-color .12s cubic-bezier(.2,0,.2,1)}
.home-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--o)}
.home-card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hc-ico{display:block;width:36px;height:36px;color:rgba(255,255,255,.85);flex:none}
.hc-ico svg{width:100%;height:100%;display:block}
.hc-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:999px}
.hc-badge.lock{background:none;font-size:14px;padding:0}
.hc-line{height:1px;background:rgba(255,255,255,.3);margin-bottom:12px}
/* Il titolo occupa sempre lo spazio di due righe, anche quando ne serve una
   sola: così il filetto e la prima riga del nome stanno alla stessa altezza in
   tutte le card, invece di alzarsi solo su quelle dal nome lungo. */
.hc-title{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;min-height:2.4em}
.hc-ext{font-weight:600;opacity:.75}
/* Sezione non autorizzata: resta visibile (così si sa che esiste e a cosa
   chiedere l'accesso) ma si vede a colpo d'occhio che è spenta. */
.home-card.locked{filter:grayscale(.75);opacity:.5;box-shadow:none}
.home-card.locked:hover{transform:none;box-shadow:none}

/* Le sezioni non autorizzate si leggono: prima erano a opacity .55, che
   portava il grigio molto sotto la soglia di contrasto. Il fatto che non
   siano cliccabili lo dicono il colore piu' tenue e il lucchetto. */
.nav-bloccata{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#5a6570;font-size:14.5px;font-weight:500;cursor:not-allowed}
.nav-bloccata .ic{width:20px;text-align:center}
.sez-corrente:not(:empty){border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
/* Voce presente solo nella barra in basso del telefono (vedi più sotto). */
.solo-mobile{display:none!important}

/* I permessi di una persona: una tendina per sezione, in una griglia che va
   a capo da sola. Le sezioni sono destinate a diventare altre, e finché
   erano le colonne di una tabella ognuna in più allargava la pagina —
   alla settima si scorreva di lato per assegnare un permesso, perdendo di
   vista il nome di chi lo stava ricevendo. La stessa griglia serve il form
   "Aggiungi un utente" e il blocco di ogni utente già esistente. */
.perm-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.perm-griglia .field{margin-bottom:0}

.utenti{display:flex;flex-direction:column}
.utente{padding:16px 0;border-top:1px solid var(--line)}
.utenti>.utente:first-child{border-top:0;padding-top:4px}
.utente-testa{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:12px}
.utente-nome{font-weight:600}
/* Stato e azioni stanno a destra del nome e restano insieme: "Sospendi" ed
   "Elimina" riguardano la persona, non una singola sezione. */
.utente-stato{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}

@media(max-width:560px){
  .utente-testa{flex-direction:column;gap:10px}
  .utente-stato{align-items:flex-start;text-align:left}
}

@media(max-width:820px){
  .home-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  /* Dentro una sezione la barra in basso mostra il menu della sezione (che
     include una voce "Home") al posto dell'elenco delle sezioni: due file di
     voci non ci starebbero. display:contents fa sì che lo switch
     passive/attive e il menu tornino figli diretti della barra, come prima
     che esistesse il portale. */
  .layout.in-sezione .nav-sezioni{display:none}
  .sez-corrente{display:contents}
  .solo-mobile{display:flex!important}
  .nav-bloccata{flex-direction:column;gap:2px;flex:1;padding:6px 4px;font-size:10.5px;text-align:center}
  .nav-bloccata .ic{font-size:19px;width:auto}
  .perm-griglia{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* Il nome del portale è più lungo di quello di una singola sezione: senza
   questo andava a capo nel riquadro del logo. */
.sidebar .brand b{font-size:14px}

/* Riga di ritorno in cima a ogni pagina di sezione. */
.sez-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);margin-bottom:14px;flex-wrap:wrap}
.sez-crumb a{font-weight:600;color:var(--cri-red);text-decoration:none;border:1px solid var(--line);background:#fff;padding:5px 11px;border-radius:999px}
.sez-crumb a:hover{background:var(--cri-red-soft);border-color:transparent}
.sez-crumb .sep{opacity:.5}
.sez-crumb b{color:var(--ink)}
.brand-link{text-decoration:none;color:inherit;border-radius:10px}
.brand-link:hover{background:var(--bg)}

/* ============================================================
   SEZIONE TRASPORTI (preventivi) — stili arrivati dal gestionale
   preventivo-trasporti quando e' stato assorbito nel portale. Le classi
   comuni (card, btn, tbl, banner...) sono gia' quelle del resto del sito e
   non vengono ripetute: qui sta solo cio' che e' specifico dei preventivi.
   ============================================================ */
.fuel-country{white-space:nowrap}
input.fuel-price{width:110px;padding:6px 8px}

/* ---------- Editor preventivo ---------- */
.editor{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
/* Senza questo, le due colonne non scendono sotto la larghezza del loro
   contenuto (è il min-width:auto predefinito degli elementi di una griglia):
   con molte voci attive la tabella del calendario allargava la colonna e
   usciva dalla scheda, invece di scorrere dentro il suo .tbl-wrap. */
.editor>*{min-width:0}
.editor .col-main{display:flex;flex-direction:column;gap:18px}
.section-t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);margin:0 0 12px}

/* Itinerario / tappe */
.tappe{display:flex;flex-direction:column;gap:8px}
.tappa{display:flex;gap:10px;align-items:flex-start;position:relative}
.tappa .marker{width:26px;height:26px;border-radius:50%;background:var(--cri-red-soft);color:var(--cri-red-dark);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;margin-top:7px}
.tappa.fissa .marker{background:var(--ink);color:#fff}
.tappa .body{flex:1;position:relative}
.tappa .body input{width:100%}
.tappa .rm{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:18px;padding:6px 4px;margin-top:3px}
.tappa .rm:hover{color:var(--danger)}
.tappa .locked{width:100%;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--bg);color:var(--ink-soft);font-size:14px}
.ac{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;margin-top:4px;max-height:240px;overflow:auto}
.ac .item{padding:9px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--line)}
.ac .item:last-child{border-bottom:none}
.ac .item:hover,.ac .item.sel{background:var(--cri-red-soft)}
.ac .item .flag{margin-right:6px}
.ac .empty{padding:10px 12px;color:var(--ink-soft);font-size:13px}

/* Riepilogo (colonna destra) */
.summary{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.tot-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tot-box .row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line)}
.tot-box .row:last-child{border-bottom:none}
.tot-box .row .k{color:var(--ink-soft);font-size:13px}
.tot-box .row .v{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.tot-box .row.addebito{background:var(--ink);padding:18px}
.tot-box .row.addebito .k{color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.tot-box .row.addebito .mini{color:rgba(255,255,255,.55)}
.tot-box .row.addebito .v{color:#fff;font-size:28px}
.tot-box .row.margine .v{font-size:18px}
.pos{color:var(--ok)} .neg{color:var(--danger)}
.breakdown{font-size:13px}
.breakdown .b-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.breakdown .b-row:last-child{border-bottom:none}
.breakdown .b-row .lbl{color:var(--ink-soft)}
.breakdown .b-row.strong{font-weight:700;color:var(--ink)}

.inline{display:flex;gap:8px;align-items:center}
.inline > *{margin:0}
.mini{font-size:12px;color:var(--ink-soft)}
.pill-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pill-toggle button{border:none;background:#fff;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink-soft)}
.pill-toggle button.active{background:var(--cri-red);color:#fff}
.matrow{display:grid;grid-template-columns:1fr 120px 34px;gap:8px;margin-bottom:8px}
.mezzo-row{padding:14px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
.mezzo-row:last-child{border-bottom:none;padding-bottom:0}
.mezzo-row .form-row{margin-bottom:0}
.mezzo-row .field{margin-bottom:0}
.mezzo-row .rm{align-self:flex-start}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0}
.chk input{width:auto}

/* ---------- Interruttori sezioni facoltative (Pasti/Pernottamento/Medico) ---------- */
.switch-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .slider{position:relative;width:38px;height:22px;flex:none;background:var(--line);border-radius:999px;transition:background .15s cubic-bezier(.2,0,.2,1)}
.switch .slider::before{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s cubic-bezier(.2,0,.2,1)}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider::before{transform:translateX(16px)}
.switch input:focus-visible + .slider{outline:2px solid var(--cri-red-dark);outline-offset:2px}
.badge-auto{font-size:11px;background:var(--ok-soft);color:var(--ok);padding:2px 8px;border-radius:999px;font-weight:700}

@media(max-width:960px){
  .editor{grid-template-columns:1fr}
  .summary{position:static}
}
@media(max-width:820px){
  input.fuel-price{width:84px;padding:6px}
}

/* Dentro una sezione non si salta da una sezione all'altra: il menu laterale
   tiene solo il ritorno alla home e le pagine della sezione corrente. Le
   altre sezioni si scelgono dalla home, dove si vede anche quali sono
   accessibili e quali no. */
.layout.in-sezione .nav-sezioni > *:not([data-nav-sezione="home"]){display:none}
.sez-titolo{display:flex;align-items:center;gap:11px;padding:2px 12px 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.sez-titolo .ic{width:20px;text-align:center;font-size:15px}
/* Sul telefono la barra in basso non ha spazio per un'intestazione: lì la
   sezione è già scritta nella riga di ritorno in cima alla pagina. */
@media(max-width:820px){.sez-titolo{display:none}}

/* ---------- Assistenze sanitarie: voci del preventivo e calendario ---------- */
.voce-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px dashed var(--line)}
.voce-row:last-child{border-bottom:none}
/* ---------- Rubrica clienti (js/assistenze/views/rubrica.js) ---------- */
.rubrica-azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px dashed var(--line)}
/* Elenco dentro il riquadro "Scegli dalla rubrica": righe cliccabili, non
   una tabella — qui si sceglie e basta. */
.rubrica-elenco{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.rb-voce{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;cursor:pointer;
  border:1px solid transparent;border-radius:4px;background:none;padding:9px 11px;font:inherit}
.rb-voce:hover,.rb-voce:focus-visible{background:#f1f3f5;border-color:var(--line);outline:none}
.rb-nome{font-size:14px;font-weight:600;color:var(--ink)}
.rb-dati{font-size:12px;color:var(--ink-soft)}
.voce-row .chk{flex:1;min-width:190px;padding:0}
/* Voce scelta ma lasciata a 0 €: non incide sul totale, e il preventivo
   uscirebbe regalando quella voce. */
.voce-row.senza-prezzo input[type=number]{border-color:var(--warn);background:#fffdf5}
.voce-row .avviso-zero{color:var(--warn);font-weight:600}
.cal-tbl td{vertical-align:middle}
.cal-tbl input{padding:6px 8px;font-size:13.5px}
.cal-tbl .ore{white-space:nowrap;font-weight:600}
/* Campo di riempimento in blocco, sotto al nome della voce in intestazione. */
.cal-tbl .tutti-turni{margin-top:5px;font-weight:400}
.cal-tbl .tutti-turni input{width:72px;text-align:center;padding:4px 6px;font-size:12.5px;
  border-style:dashed;background:#fff}
.cal-tbl .tutti-turni input::placeholder{font-size:11.5px;letter-spacing:.02em}

/* ---------- Selettore di orario a orologio (js/lib/orologio.js) ---------- */
.campo-ora{cursor:pointer;background:#fff;text-align:center;font-variant-numeric:tabular-nums}
.orologio-sfondo{position:fixed;inset:0;z-index:70;background:rgba(15,20,25,.25)}
.orologio{position:fixed;width:268px;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-alta);padding:14px 18px 10px}
.oro-testa{display:flex;align-items:center;justify-content:center;gap:2px;position:relative}
.oro-parte{border:none;background:none;font:inherit;font-size:30px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink-soft);cursor:pointer;padding:0 4px;border-radius:4px;font-variant-numeric:tabular-nums}
.oro-parte.attiva{color:var(--cri-red)}
.oro-parte:hover{background:var(--bg)}
.oro-sep{font-size:28px;font-weight:800;color:var(--ink-soft)}
.oro-passo{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--ink-soft)}
.oro-quadrante{position:relative;width:232px;height:232px;margin:20px auto 4px;border-radius:50%;background:var(--bg)}
.oro-centro{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--cri-red)}
/* La lancetta parte dal centro e si allunga verso il numero scelto: l'anello
   interno delle ore (13-00) è più vicino, quindi la lancetta è più corta. */
.oro-lancetta{position:absolute;left:50%;bottom:50%;width:2px;background:var(--cri-red);transform-origin:bottom center;display:none}
.oro-num{position:absolute;width:34px;height:34px;border-radius:50%;border:none;background:none;
  font:inherit;font-size:14px;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.oro-num:hover{background:var(--cri-red-soft)}
.oro-num.sel{background:var(--cri-red);color:#fff;font-weight:700}
.oro-piede{display:flex;justify-content:space-between;gap:8px;margin-top:6px}

/* ---------- Calendario assistenze: azioni sotto la tabella ---------- */
.cal-azioni{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.cal-azioni input[type=date]{padding:6px 8px;font-size:13.5px}
@media(max-width:820px){
  .orologio{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}
}
.hint.avviso{color:var(--warn);font-weight:600}
/* Anello interno delle ore (13-23 e 00): numeri leggermente più piccoli, così
   non toccano quelli dell'anello esterno. */
.oro-num.interno{width:30px;height:30px;font-size:12.5px;color:var(--ink-soft)}
.oro-num.interno.sel{color:#fff}

/* ============================================================
   SEZIONE STRAORDINARI
   ============================================================ */

/* Barra del mese: registro e riepilogo si guardano un mese alla volta, e il
   mese scelto è lo stesso per entrambi (vedi js/straordinari/sezione.js). */
.mese-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px 12px;box-shadow:var(--shadow)}
.mese-nome{font-weight:700;font-size:16px;min-width:150px;text-align:center}
.mese-scelta{display:flex;align-items:center;margin-left:auto}
.mese-scelta input[type=month]{font-family:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:4px;background:#fff;color:var(--ink)}
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Registro ---------- */
.str-editor{max-width:900px}
.str-editor .card+.str-elimina{margin-top:18px}
.str-elimina{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.str-meta{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}

/* Riga di separazione fra una giornata e l'altra nel registro: le righe dello
   stesso giorno vanno lette insieme, è la serata in cui è mancato qualcuno. */
tr.str-giorno td{background:var(--bg);font-size:13px;padding:7px 12px}
table.tbl tbody tr.str-giorno:hover td{background:var(--bg);cursor:default}
.str-neg{color:var(--danger)}

/* Tipo di riga: quattro pulsanti invece di una tendina, perché la scelta
   cambia il segno delle ore e deve vedersi senza aprire nulla. */
.str-tipi{display:flex;gap:8px;flex-wrap:wrap}
.str-tipo{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  padding:9px 14px;border-radius:4px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s cubic-bezier(.2,0,.2,1)}
.str-tipo:hover{background:var(--bg)}
.str-tipo.sel{background:var(--cri-red-soft);border-color:var(--cri-red);color:var(--cri-red-dark)}
.str-tipo:focus-visible{outline:2px solid var(--cri-red);outline-offset:2px}

/* ---------- Griglia mensile (riepilogo) ---------- */
/* Le colonne dei giorni sono 28-31: la tabella scorre dentro il suo
   .tbl-wrap, ma la colonna dei nomi resta ferma a sinistra, altrimenti
   scorrendo fino a fine mese non si sa più di chi è la riga. */
.str-griglia{border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums}
.str-griglia th,.str-griglia td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:5px 3px;text-align:center;min-width:27px}
.str-griglia thead th{background:var(--bg);font-size:11px;font-weight:700;color:var(--ink-soft);position:sticky;top:0;z-index:2}
.str-griglia thead th .dow{display:block;font-weight:400;font-size:9.5px;opacity:.75}
.str-griglia th.nome{position:sticky;left:0;z-index:3;background:var(--card);text-align:left;min-width:150px;
  padding-left:10px;font-size:13px;font-weight:600;white-space:nowrap}
.str-griglia thead th.nome{z-index:4;background:var(--bg)}
.str-griglia td.fest,.str-griglia th.fest{background:#eef1f4}
.str-griglia td.piena{font-weight:700;cursor:pointer}
.str-griglia td.piena:hover{background:var(--cri-red-soft)}
.str-griglia td.neg{color:var(--danger)}
/* Cella con righe ancora da confermare: il puntino evita di usare il colore,
   già impegnato a distinguere ore in più e recuperi. */
.str-griglia td.tot,.str-griglia tfoot td,.str-griglia tfoot th{background:#f8fafb;font-weight:700}
.str-griglia td.saldo{background:var(--cri-red-soft)}
.str-griglia tr.str-vuota th.nome{color:var(--ink-soft);font-weight:500}
.str-griglia tfoot th.nome{background:#f8fafb;font-size:12px}

/* ---------- Impostazioni: elenco delle causali ---------- */
.str-causali{display:flex;flex-direction:column;gap:6px}
.str-causale{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:4px;padding:7px 8px 7px 12px;font-size:13.5px}

@media(max-width:820px){
  .mese-scelta{margin-left:0}
  .mese-nome{min-width:120px;font-size:15px}
  .str-griglia th.nome{min-width:110px;font-size:12px}
}
/* Autista disattivato: resta in elenco (lo storico è suo) ma si legge come
   sfondo, senza la barratura usata per le righe annullate del registro. */
tr.str-inattivo td{opacity:.6}

/* ============================================================
   SEZIONE DIRETTORE (impegni)
   ============================================================ */

/* L'elenco non è una tabella: ogni impegno è un blocco con la sua spunta,
   il titolo e i tre chip che ne spiegano il peso. Una tabella avrebbe
   costretto i dettagli in una cella stretta, e i dettagli sono la parte
   che si rilegge quando si riprende in mano la cosa dopo una settimana. */
.dir-lista{display:flex;flex-direction:column;gap:10px}

.dir-riga{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.dir-riga:hover{border-color:var(--ink-soft)}

.dir-spunta{width:26px;height:26px;flex:none;margin-top:2px;border-radius:8px;cursor:pointer;
  border:2px solid var(--line);background:var(--bg);color:var(--ok);
  font-size:15px;font-weight:700;line-height:1;display:grid;place-items:center}
.dir-spunta:hover{border-color:var(--ok)}
.dir-corpo{min-width:0;cursor:pointer}
.dir-titolo{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.dir-dettagli{color:var(--ink-soft);font-size:13px;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dir-chip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dir-azioni{display:flex;gap:4px;white-space:nowrap}

/* Fatto: resta leggibile ma smette di chiedere attenzione. Niente
   barratura sul titolo, che rende faticoso rileggere un archivio. */
.dir-riga.fatta{background:var(--bg)}
.dir-riga.fatta .dir-titolo{color:var(--ink-soft)}
.dir-riga.fatta .dir-spunta{border-color:var(--ok);background:var(--ok-soft)}

/* I tre livelli hanno lo stesso colore ovunque compaiano — sui chip
   dell'elenco e sui pulsanti della scheda — così il colpo d'occhio vale
   in tutte e due le pagine. */
.chip.liv-alta{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.chip.liv-media{background:var(--info-soft);color:var(--info);border-color:transparent}
.chip.liv-bassa{background:var(--bg);color:var(--ink-soft)}

.chip.sca-scaduto{background:var(--danger-soft);color:var(--danger);border-color:transparent;font-weight:700}
.chip.sca-oggi{background:var(--warn-soft);color:var(--warn);border-color:transparent;font-weight:700}
.chip.sca-vicino{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.sca-lontano{background:var(--bg);color:var(--ink-soft)}
.chip.sca-nessuna{background:transparent;color:var(--ink-soft);border-style:dashed}

/* Scelta del livello: tre pulsanti affiancati invece di una tendina.
   Sono tre opzioni sempre le stesse, e vederle tutte e tre insieme rende
   evidente che si sta scegliendo su una scala. */
.dir-livelli{display:flex;gap:6px}
.dir-liv{flex:1;padding:9px 6px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft)}
.dir-liv:hover{border-color:var(--ink-soft)}
.dir-liv.scelto.liv-alta{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.dir-liv.scelto.liv-media{background:var(--info-soft);color:var(--info);border-color:var(--info)}
.dir-liv.scelto.liv-bassa{background:var(--bg);color:var(--ink);border-color:var(--ink-soft)}

/* La riga che dice dove finirà l'impegno nell'elenco: è un aiuto, non un
   dato, quindi sta staccata in fondo alla scheda e non compete col form. */
.dir-peso{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
  color:var(--ink-soft);font-size:13px}

@media (max-width:560px){
  .dir-riga{grid-template-columns:auto 1fr;row-gap:8px}
  .dir-azioni{grid-column:2;justify-content:flex-end}
  .dir-livelli{flex-direction:column}
}

/* ---------- Direttore: il calendario delle scadenze ----------
   Il mese è una griglia di sette colonne, non una tabella: le caselle
   devono poter crescere in altezza con quello che contengono, e una
   tabella avrebbe allungato tutta la riga per la casella più piena. */
.dir-cal-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.dir-cal-mese{display:flex;align-items:center;gap:6px}
.dir-cal-mese b{min-width:9.5em;text-align:center;font-size:16px;text-transform:capitalize}
.dir-cal-fatti{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;cursor:pointer}
.dir-cal-fatti input{margin:0}

.dir-cal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dir-cal-testa,.dir-cal-celle{display:grid;grid-template-columns:repeat(7,1fr)}
.dir-cal-testa div{padding:8px 6px;text-align:center;font-size:12px;font-weight:700;
  color:var(--ink-soft);background:var(--bg);border-bottom:1px solid var(--line);text-transform:uppercase}
.dir-cal-testa .festivo{color:var(--cri-red-dark)}
.dir-cal-testa abbr{text-decoration:none}

.dir-cal-gio{min-height:104px;min-width:0;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
/* Senza questo i titoli non si accorciano: dentro uno <span> lasciato
   inline la larghezza della casella non fa da limite, e una riga lunga
   usciva a scrivere sopra il giorno accanto. */
.dir-cal-gio .voci{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.dir-cal-celle>.dir-cal-gio:nth-child(7n){border-right:0}
.dir-cal-gio:hover{background:var(--bg)}
.dir-cal-gio .n{font-size:13px;font-weight:700;color:var(--ink-soft);line-height:1.2}
/* I giorni della coda del mese prima e di quello dopo ci sono — servono a
   chiudere la settimana — ma non devono farsi contare: restano in grigio. */
.dir-cal-gio.fuori{background:var(--bg)}
.dir-cal-gio.fuori .n,.dir-cal-gio.fuori .dir-cal-voce{opacity:.45}
.dir-cal-gio.oggi .n{background:var(--cri-red);color:#fff;border-radius:999px;
  width:22px;height:22px;display:grid;place-items:center}
.dir-cal-gio.scelto{box-shadow:0 0 0 2px var(--info) inset}

.dir-cal-voce{display:block;font-size:11.5px;font-weight:600;line-height:1.3;padding:2px 5px;
  border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--bg);color:var(--ink-soft)}
.dir-cal-voce.liv-alta{background:var(--danger-soft);color:var(--danger)}
.dir-cal-voce.liv-media{background:var(--info-soft);color:var(--info)}
.dir-cal-voce.liv-bassa{background:var(--bg);color:var(--ink-soft)}
.dir-cal-voce.scaduta{background:var(--danger);color:#fff}
.dir-cal-voce.fatta{background:var(--ok-soft);color:var(--ok);text-decoration:line-through}
.dir-cal-altri{display:block;font-size:11px;color:var(--ink-soft);padding:1px 5px}
/* I pallini sono la stessa informazione ridotta all'osso: servono solo
   dove la casella è larga un dito, quindi a schermo grande non ci sono. */
.dir-cal-gio .pallini{display:none;gap:3px;flex-wrap:wrap}
.dir-cal-gio .pallini i{width:6px;height:6px;border-radius:999px;background:var(--ink-soft)}
.dir-cal-gio .pallini i.liv-alta{background:var(--danger)}
.dir-cal-gio .pallini i.liv-media{background:var(--info)}
.dir-cal-gio .pallini i.scaduta{background:var(--danger)}
.dir-cal-gio .pallini i.fatta{background:var(--ok)}

.dir-cal-giorno{margin-top:18px}
.dir-cal-giorno-testa{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px}
/* «Martedì 15 settembre», non «Martedì 15 Settembre»: in italiano il mese
   è minuscolo, quindi si alza solo la prima lettera della riga. */
.dir-cal-giorno-testa h2{margin:0;font-size:16px}
.dir-cal-giorno-testa h2::first-letter{text-transform:uppercase}
.dir-cal-invito{color:var(--ink-soft);font-size:13.5px;margin:10px 0}
.dir-cal-coda{margin-top:14px}

@media (max-width:760px){
  /* Sul telefono nella casella non ci sta un titolo: restano il numero e
     i pallini, e quello che c'è scritto si legge nel giorno scelto. */
  .dir-cal-gio{min-height:56px;padding:5px 3px;align-items:center;gap:4px}
  .dir-cal-gio .n{font-size:12.5px}
  .dir-cal-gio .voci,.dir-cal-altri{display:none}
  .dir-cal-gio .pallini{display:flex;justify-content:center}
  .dir-cal-mese b{min-width:7.5em;font-size:15px}
}

/* ============================================================
   SEZIONE ANALISI — CENTRI DI COSTO
   ============================================================ */

/* Il filtro di periodo sta sopra a tutto e non dentro una toolbar con
   altri controlli: è la premessa di ogni numero della pagina, non uno
   dei filtri. */
.an-periodo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 16px}
.an-periodo label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.an-periodo select{padding:7px 10px}
.an-periodo-nota{font-size:12.5px;color:var(--ink-soft)}
.an-nota{margin-top:16px}
.an-nota .hint{font-size:13px;line-height:1.5}
.an-lavoro{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.an-lavoro select{font-weight:400}

/* Una riga per attività: chi a sinistra, i tre numeri a destra. Non una
   tabella, perché le colonne dei numeri devono poter scendere sotto il
   nome quando lo schermo è stretto — e una tabella, lì, si sarebbe
   messa a scorrere di lato. */
.cc-lista{display:flex;flex-direction:column;gap:10px}
.cc-riga{display:grid;grid-template-columns:1fr repeat(3,minmax(96px,auto)) auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.cc-riga:hover{border-color:var(--ink-soft)}
.cc-riga.chiusa{background:var(--bg)}
.cc-chi{min-width:0;cursor:pointer}
.cc-nome{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.cc-sotto{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.cc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-num .e{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink-soft)}
.cc-num.entrate b{color:var(--ok)}
.cc-num.uscite b{color:var(--warn)}
.cc-num.saldo b{font-size:15.5px}
.cc-num.saldo.neg b{color:var(--danger)}
.cc-azioni{display:flex;gap:4px;white-space:nowrap}

/* Il conto di una singola attività: entrate e uscite affiancate, perché
   il senso di quella pagina è il confronto fra le due. */
.cc-colonne{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cc-voci{display:flex;flex-direction:column;gap:8px}
.cc-voce{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.cc-voce:last-child{border-bottom:0;padding-bottom:0}
.cc-voce-nome{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.cc-voce-sotto{color:var(--ink-soft);font-size:12px;margin-top:1px}
.cc-voce-euro{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cc-voce-nota{display:block;font-size:11px;color:var(--ink-soft)}
.cc-voce-azioni{display:flex;gap:2px}
.cc-chiusa{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.cc-chiusa input{margin-top:3px;flex:none}

/* Da attribuire: la riga è un piccolo modulo, perché il gesto si fa lì
   senza aprire niente — è lo stesso motivo per cui la spunta degli
   impegni sta nell'elenco. */
.att-lista{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.att-riga{display:grid;grid-template-columns:1fr 150px auto;gap:12px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.att-riga:hover{border-color:var(--ink-soft)}
.att-chi{min-width:0}
.att-nome{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.att-sotto{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.att-quota input{text-align:right}

/* Il blocco dentro la scheda della fattura: stessa forma dei pagamenti,
   che gli sta appena sopra. */
.imp-lista{display:flex;flex-direction:column;gap:4px}
.imp-nuova{display:grid;grid-template-columns:1fr 130px auto;gap:10px;align-items:end;margin-top:12px}

@media (max-width:900px){
  .cc-colonne{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cc-riga{grid-template-columns:1fr 1fr;row-gap:10px}
  .cc-chi{grid-column:1/-1}
  .cc-num{text-align:left}
  .cc-num.saldo{text-align:right}
  .cc-azioni{grid-column:2;justify-content:flex-end}
  .att-riga{grid-template-columns:1fr auto}
  .att-chi{grid-column:1/-1}
  .imp-nuova{grid-template-columns:1fr}
}

/* In stampa il rosso passa al Pantone 485 (#CC0000): e' lo stesso colore
   d'identita', nel valore previsto per la carta. Tutto il resto del foglio
   usa gia' var(--cri-red), quindi basta ridefinire il token. */
@media print{:root{--cri-red:var(--cri-red-print)}}