/* =====================================================================
   CRM — design system
   Decisioni e perché: docs/12-Design-cruscotto-e-ricerca.md.

   Tre piani: il fondo dell'applicazione (dove sta il menu), il pannello del
   contenuto staccato dal fondo, le schede bianche dentro il pannello. Un
   solo pulsante scuro per l'azione principale; il colore si usa solo per
   dire qualcosa (stati, scadenze, contatori).
   ===================================================================== */

@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ----- colori ----- */
  /* Dal 05/11/2026 i colori dell'Hub /dc-admin (docs/25): grafite
     #1d2327, blu #2271b1, grigi neutri. Contrasti sul bianco: testo
     15,9:1, secondario 7,3:1, terziario 5,5:1, bordo dei campi 3,2:1,
     accento 5,2:1 (il bianco sull'accento 5,2:1). */
  --fondo-app:#f5f6f7;         /* sotto il contenuto (al telefono) */
  --fondo:#f5f6f7;             /* il pannello del contenuto */
  --superficie:#ffffff;        /* schede */
  --superficie-2:#f3f4f6;      /* schede interne, righe illuminate */
  --superficie-3:#eceef0;
  --velo-hover:rgba(29,35,39,.05);
  --inchiostro:#1d2327;
  --inchiostro-2:#2c3338;
  --testo-2:#50575e;
  --testo-3:#646970;
  --bordo:#e7e8ea;             /* decorativo */
  --bordo-tenue:#eeeff1;       /* decorativo, il più leggero */
  --bordo-forte:#d4d6da;       /* decorativo, all'hover */
  --bordo-controllo:#8c8f94;   /* campi: 3,2:1 sul bianco */
  --accento:#2271b1;           /* il blu dell'Hub */
  --accento-scuro:#2271b1;     /* fuoco e collegamenti (nome storico) */
  --accento-forte:#135e96;
  --accento-tenue:#eaf2fa;
  --evidenza:#d6e6f5;
  --cornice:#1d2327;           /* la cornice e il menu */

  /* Il pieno: l'azione principale e le scelte attive. */
  --pieno:#2271b1; --pieno-hover:#135e96; --su-pieno:#ffffff;
  --anello:rgba(34,113,177,.18);
  --vetro:rgba(245,246,247,.86);

  /* Stati: testo (almeno 4,5:1 sul suo fondo e sul grigio), fondo
     trasparente della tinta, e il colore vivo per pallini e barre. */
  --ok:#11703a;      --ok-bg:rgba(22,163,74,.12);    --ok-vivo:#22c55e;
  --attesa:#a64b07;  --attesa-bg:rgba(245,158,11,.15); --attesa-vivo:#f59e0b;
  --allarme:#b91c1c; --allarme-bg:rgba(239,68,68,.12); --allarme-vivo:#ef4444;
  --neutro:#4b5563;  --neutro-bg:rgba(107,114,128,.12); --neutro-vivo:#9ca3af;
  --info:#1d4ed8;    --info-bg:rgba(59,130,246,.12);  --info-vivo:#3b82f6;

  /* nomi di prima, tenuti come sinonimi: le pagine li usano ancora */
  --text:var(--inchiostro); --text-l-3:var(--testo-2); --neutral:var(--fondo);
  --accent:var(--accento); --background-accent-2:var(--accento-scuro);
  --crm-surface:var(--superficie); --crm-surface-alt:var(--superficie-2);
  --crm-surface-hover:var(--superficie-2); --crm-border:var(--bordo);
  --crm-success:var(--ok); --crm-success-bg:var(--ok-bg);
  --crm-warning:var(--attesa); --crm-warning-bg:var(--attesa-bg);
  --crm-danger:var(--allarme); --crm-danger-bg:var(--allarme-bg);
  --crm-neutral-state:var(--neutro); --crm-neutral-state-bg:var(--neutro-bg);

  /* ----- spazi ----- */
  --space-micro-1:2px;  --space-micro-2:3px;  --space-micro-3:4px;
  --space-micro-4:6px;  --space-micro-5:8px;  --space-micro-6:11px;
  --space-micro-7:13px; --space-micro-8:16px; --space-micro-9:20px;
  --space-micro-10:24px; --space-medium-11:32px; --space-medium-12:40px;
  --space-medium-13:48px;

  /* ----- tipografia ----- */
  /* Il carattere di sistema, come nell'Hub (dal 05/11/2026). */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Inter,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Scala compatta per lo schermo col mouse; al tocco risale di un
     gradino (sotto, in «Con il dito»). */
  --fs-3xs:12px; --fs-2xs:12.5px; --fs-xs:13px; --fs-s:13.5px; --fs-body:14px;
  --fs-prosa:15px; --fs-m:17px; --fs-l:32px;
  --heading-h6:15px; --heading-h5:17px; --heading-h4:19px; --heading-h3:26px;
  --line-height-body:1.55; --line-height-heading:1.2; --letter-spacing-body:-0.006em;

  /* ----- forme e profondità ----- */
  --radius-4:4px; --radius-6:6px; --radius-8:8px; --radius-10:10px;
  --radius-12:12px; --radius-16:16px; --radius-max:999px;
  --ombra-xs:none;
  --ombra-s:none;
  --ombra-m:0 16px 40px -12px rgba(0,0,0,.18);
  --ombra-l:0 24px 48px -16px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.06);
  /* Le schede: un'ombra morbida che le stacca dal grigio. */
  --ombra-scheda:0 1px 2px rgba(16,24,40,.04), 0 6px 20px -10px rgba(16,24,40,.10);
  --ombra-scheda-su:0 2px 4px rgba(16,24,40,.05), 0 16px 32px -12px rgba(16,24,40,.18);
  --luce:none;
  --shadow-1:var(--ombra-xs); --shadow-2:var(--ombra-l);

  /* ----- movimento -----
     Feedback 70–200 ms con curva che rallenta all'arrivo; pannelli 200–300.
     Sopra i 300 ms un hover «trascina» (13-motion: NN/g 2020, Carbon). */
  --durata-hover:200ms;
  --durata-pannello:220ms;
  --curva:cubic-bezier(0,0,.38,.9);
  --t-fast:150ms; --t-base:220ms; --t-hover:var(--durata-hover);

  /* ----- misure ----- */
  --touch-target:44px;
  --altezza-controllo:44px;
  --border-width:1px;
  --focus-width:2px;
  --container-max:1320px;
  --fianco-largo:260px;
  --fianco-stretto:72px;
  --barra-alta:64px;
  --stacco:8px;                /* distanza del pannello dai bordi */
}

/* Con un mouse i controlli scendono a 36 px: ben sopra i 24 del criterio
   2.5.8, e l'interfaccia respira. */
@media (pointer:fine){
  :root{--altezza-controllo:36px;}
}

/* Con il dito si torna alla scala piena: 44 px per ogni tocco e campi a
   16 px, sotto i quali Safari su iPhone ingrandisce la pagina a ogni
   tocco su un campo. Vale anche per un tablet senza mouse. */
@media (pointer:coarse), (max-width:767px){
  :root{
    --altezza-controllo:44px;
    --fs-2xs:13px; --fs-s:14px; --fs-body:15px; --fs-prosa:16px; --fs-m:18px;
    --heading-h6:16px; --heading-h5:18px; --heading-h4:21px;
  }
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--line-height-body);
  letter-spacing:var(--letter-spacing-body);
  color:var(--inchiostro);
  background:var(--fondo);
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11";
}

:focus-visible{
  outline:var(--focus-width) solid var(--accento-scuro);
  outline-offset:2px;
}

a{color:var(--accento-scuro); text-underline-offset:3px;}

.icona{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Il primo tasto Tab porta al contenuto, saltando il menu. */
.salta{
  position:absolute; left:var(--space-micro-8); top:-100px; z-index:200;
  padding:var(--space-micro-5) var(--space-micro-8);
  background:var(--inchiostro); color:#fff; border-radius:var(--radius-10);
  text-decoration:none; font-weight:500;
}
.salta:focus{top:var(--space-micro-8);}
main:focus{outline:none;}

/* Etichetta presente per chi usa lo schermo letto, invisibile agli altri. */
.visivamente-nascosto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ===== pagina di verifica ===== */

.diag{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:var(--space-medium-11) var(--space-micro-8);}
.diag-box{
  width:100%; max-width:560px; background:var(--superficie);
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  box-shadow:var(--ombra-s); padding:var(--space-medium-12);
}
.diag-title{font-size:var(--heading-h4); font-weight:600; line-height:var(--line-height-heading); margin:0;}
.diag-sub{font-size:var(--fs-s); color:var(--testo-2); margin:var(--space-micro-2) 0 var(--space-medium-11);}
.diag-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.diag-item{display:flex; align-items:flex-start; gap:var(--space-micro-6); padding:var(--space-micro-6) 0; border-top:var(--border-width) solid var(--bordo);}
.diag-item:first-child{border-top:0;}
.diag-mark{
  flex:none; width:var(--space-micro-10); height:var(--space-micro-10);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-max); font-size:var(--fs-3xs); font-weight:600;
}
.diag-item[data-ok="si"] .diag-mark{background:var(--ok-bg); color:var(--ok);}
.diag-item[data-ok="no"] .diag-mark{background:var(--allarme-bg); color:var(--allarme);}
.diag-testo{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.diag-testo strong{font-size:var(--fs-s); font-weight:500;}
.diag-nota{font-size:var(--fs-2xs); color:var(--testo-2); word-break:break-word;}
.diag-esito{margin:var(--space-medium-11) 0 0; padding:var(--space-micro-7) var(--space-micro-8); border-radius:var(--radius-10); font-size:var(--fs-s); font-weight:500;}
.diag-esito[data-ok="si"]{background:var(--ok-bg); color:var(--ok);}
.diag-esito[data-ok="no"]{background:var(--allarme-bg); color:var(--allarme);}
.diag-piede{margin:var(--space-micro-8) 0 0; font-size:var(--fs-2xs); color:var(--testo-2);}
.diag-piede code{font-family:var(--mono);}
@media (max-width:478px){ .diag-box{padding:var(--space-micro-9);} }

/* =====================================================================
   Componenti
   Qui solo l'aspetto a riposo. Hover, pressione e passaggi di stato sono
   tutti nella sezione «Stati di interazione» in fondo: in un posto solo
   non possono prendere durate diverse, e non scattano sui touch.
   ===================================================================== */

/* ----- pulsanti ----- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-micro-5);
  font:inherit; font-size:var(--fs-body); font-weight:500; letter-spacing:-0.01em;
  min-height:var(--altezza-controllo);
  padding:var(--space-micro-4) var(--space-micro-8);
  border:var(--border-width) solid transparent; border-radius:var(--radius-10);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn .icona{width:18px; height:18px;}
.btn-primario{background:var(--inchiostro); color:#fff; border-color:var(--inchiostro); box-shadow:var(--luce), var(--ombra-xs);}
.btn-secondario{background:var(--superficie); color:var(--inchiostro); border-color:var(--bordo-forte); box-shadow:var(--ombra-xs);}
.btn-quieto{background:transparent; color:var(--testo-2); border-color:transparent;}
.btn-pieno{width:100%;}

/* ----- form ----- */
.modulo{display:flex; flex-direction:column; gap:var(--space-micro-8);}
.campo{display:flex; flex-direction:column; gap:var(--space-micro-3);}
.etichetta{font-size:var(--fs-s); font-weight:500;}
/* 16px e non meno: sotto, Safari su iPhone ingrandisce la pagina a ogni
   tocco su un campo, e poi va rimpicciolita a mano. */
.input{
  font:inherit; font-size:var(--fs-prosa); color:var(--inchiostro); width:100%;
  background:var(--superficie);
  border:var(--border-width) solid var(--bordo-controllo); border-radius:var(--radius-10);
  min-height:var(--altezza-controllo); padding:var(--space-micro-4) var(--space-micro-6);
  box-shadow:var(--ombra-xs);
}
/* Il fuoco di un campo: bordo pieno e un alone morbido attorno. */
.input:focus-visible{
  outline:none; border-color:var(--accento-scuro);
  box-shadow:0 0 0 3px var(--anello);
}
.input::placeholder{color:var(--testo-3);}
.input[aria-invalid="true"]{border-color:var(--allarme); background:var(--allarme-bg);}

/* ----- allegati delle richieste ----- */
/* Il campo: il pulsante del browser vestito come un pulsante del CRM, e
   sotto l'elenco dei file scelti. */
/* Nel messaggio: anteprime quadrate per le immagini, righe per i file. */
.allegati-elenco{list-style:none; margin:var(--space-micro-5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-micro-4);}
.allegato-immagine{display:block; width:112px; height:112px; border-radius:var(--radius-10); overflow:hidden; border:var(--border-width) solid var(--bordo); background:var(--superficie-2);}
.allegato-immagine img{width:100%; height:100%; object-fit:cover; display:block;}
.allegato-file{display:inline-flex; align-items:center; gap:var(--space-micro-4); max-width:100%; min-height:var(--touch-target); padding:var(--space-micro-3) var(--space-micro-6); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-10); background:var(--superficie); color:var(--inchiostro); text-decoration:none; font-size:var(--fs-s);}
.allegato-file .icona{width:18px; height:18px; flex:none; color:var(--testo-2);}
.allegato-nome{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.allegato-peso{color:var(--testo-2); white-space:nowrap; font-size:var(--fs-2xs);}
.allegato-immagine:focus-visible, .allegato-file:focus-visible{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:2px;}
@media (hover:hover){
  .input-file::file-selector-button:hover, .allegato-file:hover{background:var(--superficie-2);}
  .allegato-immagine:hover{border-color:var(--bordo-controllo);}
}

/* La sezione «File» della richiesta: una riga per allegato. */
.allegati-conta{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; margin-left:var(--space-micro-2); border-radius:999px; background:var(--superficie-2); font-size:var(--fs-2xs); font-weight:500; color:var(--testo-2); vertical-align:middle;}
.allegati-righe{list-style:none; margin:var(--space-micro-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-micro-2);}
.allegato-riga{display:flex; align-items:center; gap:var(--space-micro-6); padding:var(--space-micro-3); margin:0 calc(-1 * var(--space-micro-3)); border-radius:var(--radius-10); color:var(--inchiostro); text-decoration:none; min-width:0;}
.allegato-riga-miniatura, .allegato-riga-icona{flex:none; width:40px; height:40px; border-radius:var(--radius-8); border:var(--border-width) solid var(--bordo); background:var(--superficie-2);}
.allegato-riga-miniatura{object-fit:cover;}
.allegato-riga-icona{display:grid; place-items:center;}
.allegato-riga-icona .icona{width:18px; height:18px; color:var(--testo-2);}
.allegato-riga-testo{display:flex; flex-direction:column; gap:2px; min-width:0;}
.allegato-riga .allegato-nome{font-size:var(--fs-s); font-weight:500;}
.allegato-riga-meta{font-size:var(--fs-2xs); color:var(--testo-2);}
.allegato-riga:focus-visible{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:1px;}
@media (hover:hover){ .allegato-riga:hover{background:var(--velo-hover);} }

/* La galleria degli allegati: a tutto schermo su fondo scuro, come in
   Loverbass. Sopra contatore, nome e azioni; al centro il file adattato
   alla finestra (mai più grande); ai lati le frecce; sotto la striscia. */
.galleria{
  --galleria-fondo:#101617; --galleria-testo:#f4f6f2; --galleria-testo-2:rgba(244,246,242,.66);
  --galleria-bordo:rgba(244,246,242,.18); --galleria-velo:rgba(244,246,242,.06);
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:var(--galleria-fondo); color:var(--galleria-testo); overflow:hidden;
}
.galleria::backdrop{background:var(--galleria-fondo);}
/* Con la galleria aperta la pagina sotto non scorre. */
html:has(.galleria[open]){overflow:hidden;}
.galleria[open]{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto;}
.galleria-barra{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-8); padding:var(--space-micro-8) clamp(var(--space-micro-8), 4vw, var(--space-medium-12));}
.galleria-info{flex:1; min-width:0; display:flex; align-items:center; gap:var(--space-micro-8);}
.galleria-conta, .galleria-zoom-valore{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--galleria-testo-2); white-space:nowrap;}
.galleria-titolo{min-width:0; display:flex; flex-direction:column; gap:2px;}
.galleria-nome{margin:0; font-size:var(--fs-body); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.galleria-meta{margin:0; font-size:var(--fs-2xs); color:var(--galleria-testo-2);}
.galleria-strumenti{display:flex; align-items:center; gap:var(--space-micro-5);}
.galleria-zoom{display:none; align-items:center; gap:var(--space-micro-5);}
.galleria.is-immagine .galleria-zoom{display:flex;}
.galleria-zoom-valore{min-width:5ch; text-align:right; opacity:0; transition:opacity .18s ease;}
.galleria.is-ingrandita .galleria-zoom-valore{opacity:1; color:var(--accento);}
.galleria-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-micro-4); flex:none;
  min-width:40px; height:40px; padding:0; border:var(--border-width) solid var(--galleria-bordo); border-radius:var(--radius-max);
  background:var(--galleria-velo); color:var(--galleria-testo); font:inherit; font-size:var(--fs-s); font-weight:500;
  text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease, background .18s ease, opacity .18s ease;
}
.galleria-btn .icona{width:18px; height:18px;}
.galleria-btn:focus-visible{outline:var(--focus-width) solid var(--accento); outline-offset:2px;}
.galleria-btn[disabled]{opacity:.35; cursor:default;}
@media (hover:hover){ .galleria-btn:not([disabled]):hover{border-color:var(--accento); background:rgba(244,246,242,.1);} }
.galleria-scarica{padding:0 var(--space-micro-8) 0 var(--space-micro-7);}
.galleria-palco{position:relative; min-height:0; display:flex; padding:0 clamp(var(--space-micro-8), 7vw, 88px);}
.galleria-vista{flex:1; min-width:0; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.galleria-freccia{position:absolute; top:50%; z-index:2; transform:translateY(-50%);}
.galleria-prec{left:clamp(var(--space-micro-6), 2.5vw, 28px);}
.galleria-prec .icona{transform:rotate(180deg);}
.galleria-succ{right:clamp(var(--space-micro-6), 2.5vw, 28px);}
/* Le immagini: adattate alla vista; la scacchiera si vede solo dove sono trasparenti. */
.galleria-img{
  display:block; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-6);
  background:repeating-conic-gradient(#fff 0 25%, #eceee9 0 50%) 0 0 / 16px 16px;
  cursor:zoom-in; touch-action:none; -webkit-user-select:none; user-select:none;
  transform-origin:center; transition:opacity .2s ease, transform .2s var(--curva);
}
.galleria-img.is-ingrandita{cursor:grab;}
.galleria-img.is-trascinata{cursor:grabbing; transition:opacity .2s ease;}
.galleria-documento{width:min(980px, 100%); height:100%; border:0; border-radius:var(--radius-8); background:#fff;}
.galleria-testo{
  width:min(860px, 100%); max-height:100%; margin:0; padding:var(--space-micro-9); overflow:auto; align-self:flex-start;
  background:var(--superficie); color:var(--inchiostro); border-radius:var(--radius-10);
  font-family:var(--mono); font-size:var(--fs-s); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere;
}
.galleria-vuota{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-micro-8); max-width:420px;
  padding:var(--space-medium-11) var(--space-micro-10); text-align:center;
  background:var(--superficie); color:var(--testo-2); border-radius:var(--radius-16);
}
.galleria-vuota p{margin:0;}
.galleria-vuota .icona{width:40px; height:40px; color:var(--inchiostro);}
.galleria-vuota .btn{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.galleria-nota{margin:0; padding:var(--space-micro-6) var(--space-micro-8) 0; text-align:center; font-size:var(--fs-2xs); color:var(--galleria-testo-2);}
.galleria-nota:empty{display:none;}
/* La striscia: centrata finché ci sta, poi scorre (i margini automatici non tagliano l'inizio). */
.galleria-striscia{display:flex; gap:var(--space-micro-5); overflow-x:auto; padding:var(--space-micro-8) clamp(var(--space-micro-8), 4vw, var(--space-medium-12)) clamp(var(--space-micro-8), 3vw, var(--space-medium-11)); scrollbar-width:thin;}
.galleria-striscia > :first-child{margin-left:auto;}
.galleria-striscia > :last-child{margin-right:auto;}
.galleria-miniatura{
  position:relative; flex:none; width:56px; height:56px; padding:0; overflow:hidden;
  border:var(--border-width) solid var(--galleria-bordo); border-radius:var(--radius-6);
  background:var(--galleria-velo); color:var(--galleria-testo); cursor:pointer; opacity:.5;
  transition:opacity .18s ease, border-color .18s ease;
}
.galleria-miniatura img{width:100%; height:100%; object-fit:cover; display:block;}
.galleria-miniatura-file{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.galleria-miniatura-file .icona{width:18px; height:18px;}
.galleria-estensione{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;}
.galleria-miniatura.is-attiva{opacity:1; border-color:var(--accento); box-shadow:0 0 0 1px var(--accento);}
.galleria-miniatura:focus-visible{opacity:1; outline:var(--focus-width) solid var(--accento); outline-offset:2px;}
@media (hover:hover){ .galleria-miniatura:hover{opacity:.85;} }
.galleria.is-singolo .galleria-striscia, .galleria.is-singolo .galleria-freccia, .galleria.is-singolo .galleria-conta{display:none;}
/* Telefono: niente frecce (si scorre col dito) né pulsanti di zoom (si pizzica),
   «Scarica» solo icona, miniature più piccole. */
@media (max-width:640px){
  .galleria-barra{padding:var(--space-micro-6) var(--space-micro-8); gap:var(--space-micro-5);}
  .galleria-info{gap:var(--space-micro-6);}
  .galleria-strumenti{gap:var(--space-micro-3);}
  .galleria.is-immagine .galleria-zoom{display:none;}
  .galleria-scarica{padding:0;}
  .galleria-scarica-testo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  .galleria-palco{padding:0 var(--space-micro-5);}
  .galleria-freccia{display:none;}
  .galleria-miniatura{width:44px; height:44px;}
}
@media (prefers-reduced-motion: reduce){
  .galleria-img, .galleria-miniatura, .galleria-zoom-valore{transition:none;}
}

/* ----- avvisi ----- */
/* L'avviso sta fuori da .pagina, fra la barra e il contenuto: i fianchi
   sono gli stessi della colonna (la stessa formula della .testata), così
   parte e finisce dove partono e finiscono titolo e schede, a ogni
   larghezza. */
.avviso{
  font-size:var(--fs-s); padding:var(--space-micro-6) var(--space-micro-8);
  border-radius:var(--radius-12); margin-block:0 var(--space-micro-8);
  margin-inline:max(var(--pagina-fianchi, 0px), calc((100% - var(--container-max)) / 2 + var(--pagina-fianchi, 0px)));
  border:var(--border-width) solid transparent;
}
.avviso-ok{background:var(--ok-bg); color:var(--ok); border-color:rgba(47,107,70,.35);}
.avviso-errore{background:var(--allarme-bg); color:var(--allarme); border-color:rgba(155,44,44,.35);}

/* ----- accesso ----- */
.schermo-vuoto{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--fondo-app);}
.accesso{width:100%; padding:var(--space-medium-11) var(--space-micro-8);}
.accesso-box{
  width:100%; max-width:400px; margin-inline:auto;
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-m);
  padding:var(--space-medium-12);
}
.accesso-titolo{font-size:var(--heading-h4); font-weight:600; letter-spacing:-0.02em; line-height:var(--line-height-heading); margin:0;}
.accesso-sub{font-size:var(--fs-s); color:var(--testo-2); margin:var(--space-micro-2) 0 var(--space-medium-11);}
.accesso-nota{margin:var(--space-micro-8) 0 0; font-size:var(--fs-2xs); color:var(--testo-2); text-align:center;}
.accesso-box .avviso + .btn, .accesso-box .accesso-nota + .btn{margin-top:var(--space-micro-8);}

/* Etichetta con un collegamento a destra («Password dimenticata?»). */
.etichetta-riga{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-micro-5);}
.collegamento-piccolo{font-size:var(--fs-2xs); font-weight:500; color:var(--accento-scuro); text-underline-offset:3px;}

/* Casella con testo: tutta la riga è il bersaglio del clic. */
.casella{display:flex; align-items:flex-start; gap:var(--space-micro-5); cursor:pointer; font-size:var(--fs-s); min-height:var(--touch-target); padding-top:var(--space-micro-2);}
.casella input{width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:var(--inchiostro);}
.casella-nota{display:block; font-size:var(--fs-2xs); color:var(--testo-2);}

/* ----- marchio ----- */
.marchio{display:flex; align-items:center; gap:var(--space-micro-5); text-decoration:none; color:var(--inchiostro); flex:none; min-height:var(--touch-target); min-width:0;}
.marchio-segno{
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--inchiostro); color:var(--accento); border-radius:var(--radius-8);
  font-size:var(--fs-3xs); font-weight:700; letter-spacing:0.02em;
  box-shadow:var(--luce), var(--ombra-xs);
}
.marchio-testi{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.marchio-testo{font-size:var(--fs-body); font-weight:600; letter-spacing:-0.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.marchio-data{font-size:var(--fs-3xs); color:var(--testo-2); white-space:nowrap;}

/* ----- pagina ----- */
.pagina{
  width:100%; max-width:var(--container-max); margin-inline:auto;
  padding:var(--space-medium-11) var(--pagina-fianchi) var(--space-medium-13);
  display:flex; flex-direction:column; gap:var(--space-micro-9);
}
.intestazione{display:flex; flex-direction:column; gap:var(--space-micro-3);}
.titolo{font-size:var(--heading-h3); font-weight:600; line-height:1.15; letter-spacing:-0.03em; margin:0;}
.sottotitolo{font-size:var(--fs-body); color:var(--testo-2); margin:0;}

/* L'intestazione della pagina (briciole, titolo, pulsanti). Il layout la
   porta dentro la barra in alto: sopra i 992px ne diventa la parte
   sinistra, sotto resta una fascia sua che scorre con la pagina (e fra 768
   e 991 si ferma sotto la barra). */
.pagina-testa{
  position:sticky; top:var(--barra-alta); z-index:15;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-micro-8); flex-wrap:wrap;
  background:var(--fondo);
  padding:var(--space-micro-9) var(--pagina-fianchi) var(--space-micro-8);
  border-bottom:var(--border-width) solid transparent;
  transition:border-color var(--durata-pannello) var(--curva);
}
.pagina-testa:focus{outline:none;}
/* La riga sotto compare solo quando c'è del contenuto che le passa dietro. */
.pagina-testa[data-staccata]{border-bottom-color:var(--bordo);}
.pagina-testa .intestazione{flex:1 1 280px; min-width:0;}
.pagina-azioni{display:flex; gap:var(--space-micro-5); flex-wrap:wrap; align-items:center;}

.briciole{font-size:var(--fs-2xs); color:var(--testo-3); display:flex; gap:var(--space-micro-3); flex-wrap:wrap;}
.briciole a{color:var(--testo-2); text-decoration:none;}

.titolo-riga{display:flex; align-items:center; gap:var(--space-micro-5); flex-wrap:wrap;}
.meta-riga{display:flex; flex-wrap:wrap; gap:var(--space-micro-3) var(--space-micro-7); font-size:var(--fs-2xs); color:var(--testo-2);}

/* ----- pannelli ----- */
.pannello{
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s); padding:var(--space-micro-10);
  min-width:0;
}
.pannello-testa{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-micro-6); margin-bottom:var(--space-micro-8); flex-wrap:wrap;
}
.pannello-testa .pannello-titolo{margin:0;}
.pannello-titolo{font-size:var(--heading-h6); font-weight:600; line-height:var(--line-height-heading); letter-spacing:-0.012em; margin:0 0 var(--space-micro-3);}
/* Un gruppo dentro un pannello (Backup e stato: backup, lavori, registro). */
.pannello-sottotitolo{font-size:var(--fs-s); font-weight:600; color:var(--testo-2); margin:var(--space-micro-9) 0 var(--space-micro-4);}
.pannello-nota{font-size:var(--fs-s); color:var(--testo-2); margin:0 0 var(--space-micro-9);}
.pannello-sotto{margin:var(--space-micro-2) 0 0; font-size:var(--fs-2xs); color:var(--testo-2);}
/* «Vedi tutti»: testo e freccia, la freccia dice che porta altrove. */
.pannello-link{
  display:inline-flex; align-items:center; gap:var(--space-micro-2);
  min-height:36px; padding:0 var(--space-micro-4) 0 var(--space-micro-5); margin-right:calc(-1 * var(--space-micro-4));
  border-radius:var(--radius-8);
  font-size:var(--fs-s); font-weight:500; color:var(--testo-2); text-decoration:none;
}
.pannello-link .icona{width:16px; height:16px;}
/* Un pannello che contiene solo una tabella: la tabella arriva ai bordi. */
.pannello-tabella{padding:var(--space-micro-9) var(--space-micro-5) var(--space-micro-5);}
.pannello-tabella .pannello-testa{padding-inline:var(--space-micro-9) var(--space-micro-5);}

.vuoto{
  max-width:520px; margin:var(--space-medium-13) auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-micro-7);
}
.vuoto-titolo{font-size:var(--heading-h5); font-weight:600; margin:0;}
.vuoto-testo{font-size:var(--fs-body); color:var(--testo-2); margin:0;}

/* ----- badge e contatori ----- */
/* Lo stato ha sempre la parola; il pallino davanti la fa riconoscere al
   primo sguardo anche in una colonna lunga. */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-micro-4);
  font-size:var(--fs-3xs); font-weight:500; line-height:1.3; white-space:nowrap;
  padding:var(--space-micro-2) var(--space-micro-5) var(--space-micro-2) var(--space-micro-4);
  border-radius:var(--radius-max);
  background:var(--neutro-bg); color:var(--neutro);
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}
.badge[data-tono="ok"]{background:var(--ok-bg); color:var(--ok);}
.badge[data-tono="attesa"]{background:var(--attesa-bg); color:var(--attesa);}
.badge[data-tono="allarme"]{background:var(--allarme-bg); color:var(--allarme);}
.badge[data-tono="neutro"]{background:var(--neutro-bg); color:var(--neutro);}
.badge[data-tono="info"]{background:var(--info-bg); color:var(--info);}

/* Un colore per ogni stato (Etichette::COLORI). Ogni colore dà tre valori:
   il testo del tag (almeno 4,5:1 sul suo fondo), il fondo trasparente
   della tinta e il pallino, acceso e con l'alone (dal 05/11/2026 più vivo:
   accanto c'è sempre la parola, il colore non lavora da solo).
   Chi ha data-colore li eredita. */
[data-colore="verde"]   {--c-testo:#11703a; --c-fondo:rgba(22,163,74,.12);  --c-punto:#22c55e;}
[data-colore="ambra"]   {--c-testo:#a64b07; --c-fondo:rgba(245,158,11,.15); --c-punto:#f59e0b;}
[data-colore="rosso"]   {--c-testo:#b91c1c; --c-fondo:rgba(239,68,68,.12);  --c-punto:#ef4444;}
[data-colore="blu"]     {--c-testo:#1d4ed8; --c-fondo:rgba(59,130,246,.12); --c-punto:#3b82f6;}
[data-colore="viola"]   {--c-testo:#6d28d9; --c-fondo:rgba(139,92,246,.12); --c-punto:#8b5cf6;}
[data-colore="petrolio"]{--c-testo:#0d6a63; --c-fondo:rgba(20,184,166,.13); --c-punto:#14b8a6;}
[data-colore="arancio"] {--c-testo:#b33c0b; --c-fondo:rgba(249,115,22,.13); --c-punto:#f97316;}
[data-colore="rosa"]    {--c-testo:#be185d; --c-fondo:rgba(236,72,153,.12); --c-punto:#ec4899;}
[data-colore="grigio"]  {--c-testo:#4b5563; --c-fondo:rgba(107,114,128,.12); --c-punto:#9ca3af;}
.badge[data-colore]{background:var(--c-fondo); color:var(--c-testo);}
.badge[data-colore]::before{background:var(--c-punto);}

.contatore{
  margin-left:auto; min-width:22px; height:20px; padding:0 var(--space-micro-4);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-max); font-size:var(--fs-3xs); font-weight:600;
  font-variant-numeric:tabular-nums;
  background:var(--neutro-bg); color:var(--neutro);
}
.contatore[data-tono="info"]{background:var(--info-bg); color:var(--info);}
.contatore[data-tono="attesa"]{background:var(--attesa-bg); color:var(--attesa);}
.contatore[data-tono="allarme"]{background:var(--allarme-bg); color:var(--allarme);}

/* Andamento rispetto a un periodo: una pillola con la freccia e il segno.
   Neutra: più ore non è né bene né male, è solo più lavoro. */
.tendenza{
  margin-left:auto; display:inline-flex; align-items:center; gap:var(--space-micro-2);
  padding:2px var(--space-micro-4); border-radius:var(--radius-max);
  font-size:var(--fs-3xs); font-weight:500; color:var(--testo-2);
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  white-space:nowrap;
}
.tendenza .icona{width:13px; height:13px;}

/* Il segno colorato di un tipo di record: stessa tinta nel menu, nella
   ricerca e nelle tabelle, così l'occhio impara a riconoscerla.
   Non porta informazione da solo: accanto c'è sempre il nome del tipo. */
.segno-tipo{
  width:30px; height:30px; flex:none; border-radius:var(--radius-8);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--neutro-bg); color:var(--neutro);
  box-shadow:inset 0 0 0 1px rgba(34,47,48,.05);
}
.segno-tipo .icona{width:16px; height:16px;}
.segno-tipo[data-tipo="clienti"]{background:#e6eefa; color:#2a5696;}
.segno-tipo[data-tipo="siti"]{background:#e2f2f0; color:#1f6a61;}
.segno-tipo[data-tipo="accessi"]{background:#efe9fa; color:#5b3f99;}
.segno-tipo[data-tipo="interventi"]{background:#fcebdc; color:#9a4a12;}
.segno-tipo[data-tipo="preventivi"]{background:#fbf2cf; color:#7a5b00;}
.segno-tipo[data-tipo="contratti"]{background:#e5f3e6; color:#2f6b46;}
.segno-tipo[data-tipo="fatture"]{background:#fbe6ea; color:#9b2c48;}
.segno-tipo[data-tipo="richieste"]{background:#e3f1fa; color:#1d5f86;}

/* ----- barra dei filtri ----- */
.filtri{
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s); padding:var(--space-micro-8);
  display:flex; flex-wrap:wrap; gap:var(--space-micro-6); align-items:flex-end;
}
.filtro{display:flex; flex-direction:column; gap:var(--space-micro-3); min-width:0; flex:0 1 170px;}
.filtro-cerca{flex:1 1 240px;}
.filtro-etichetta{font-size:var(--fs-2xs); font-weight:500; color:var(--testo-2);}
.filtri-azioni{margin-left:auto; display:flex; gap:var(--space-micro-5); align-items:center;}
.filtri-azioni:empty{display:none;}
/* Con lo script i filtri partono da soli: «Filtra» serve solo senza. */
.filtri-invia[hidden]{display:none;}
.filtri-azzera .icona{width:16px; height:16px;}
/* Mentre arrivano i risultati nuovi, quelli vecchi si fanno da parte:
   si capisce che il filtro è partito, senza una rotellina. */
main[aria-busy="true"] > :not([data-filtri-contenitore]){opacity:.55; transition:opacity var(--durata-hover) var(--curva);}

/* ----- tabella ----- */
/* Una lista moderna: testa grigia arrotondata, righe alte e ariose,
   separatori sottili che si fermano prima dei bordi. La riga che porta a
   una scheda si illumina tutta, come un tassello arrotondato: in quel
   momento spariscono le due linee che la toccano, così l'evidenziazione
   non si incastra fra i separatori. */
.tabella-card{
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s);
  padding:var(--space-micro-5); overflow:hidden;
}
.pannello .tabella-card, .pannello-tabella .tabella-card{border:0; box-shadow:none; padding:0; border-radius:0;}
.tabella{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-s);}
.tabella th{
  background:var(--superficie-2); text-align:left; font-weight:500;
  font-size:var(--fs-3xs); color:var(--testo-2);
  padding:var(--space-micro-5) var(--space-micro-7); white-space:nowrap;
  /* Un filo di vuoto sotto la testa: il fondo grigio non tocca la prima
     riga quando si illumina. */
  border-bottom:4px solid transparent; background-clip:padding-box;
}
.tabella th:first-child{border-radius:var(--radius-10) 0 0 var(--radius-10); padding-left:var(--space-micro-8);}
.tabella th:last-child{border-radius:0 var(--radius-10) var(--radius-10) 0; padding-right:var(--space-micro-8);}
.tabella td{
  padding:var(--space-micro-7) var(--space-micro-7);
  border-top:var(--border-width) solid var(--bordo); vertical-align:middle;
}
.tabella td:first-child{padding-left:var(--space-micro-8);}
.tabella td:last-child{padding-right:var(--space-micro-8);}
/* Aria fra la testa e la prima riga, senza linea. */
.tabella tbody tr:first-child td{border-top-color:transparent;}
/* Righe che portano a una scheda: le rende cliccabili lo script. Senza
   script restano normali righe con il loro collegamento, e niente hover
   che prometta un clic che non c'è. */
.tabella tr[data-riga-link]{cursor:pointer;}
.tabella tr[data-riga-link] td:first-child{border-top-left-radius:var(--radius-10); border-bottom-left-radius:var(--radius-10);}
.tabella tr[data-riga-link] td:last-child{border-top-right-radius:var(--radius-10); border-bottom-right-radius:var(--radius-10);}
.tabella .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tabella .azioni{width:1%; white-space:nowrap; text-align:right;}
/* La colonna che dice di cosa si parla prende lo spazio: le altre sono
   brevi e non devono spingerla a capo ogni tre parole. */
.tabella .col-principale{width:46%;}
.tabella tfoot td{
  border-top:var(--border-width) solid var(--bordo);
  background:var(--superficie-2); font-size:var(--fs-s); border-radius:0;
}
/* Le azioni di riga sono discrete: si fanno avanti quando la riga è sotto
   il mouse. Restano sempre visibili, perché al tocco l'hover non c'è. */
.tabella .riga-azioni .btn-icona{width:32px; height:32px; color:var(--testo-3);}
.tabella .riga-azioni .btn-icona .icona{width:17px; height:17px;}
.riga-freccia{display:inline-flex; color:var(--testo-3);}
.riga-freccia .icona{width:17px; height:17px;}

.cella-primaria{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.cella-primaria a{font-size:var(--fs-s); font-weight:500; color:var(--inchiostro); text-decoration:none; word-break:break-word;}
.cella-sub{font-size:var(--fs-2xs); color:var(--testo-2);}
/* Una cella col segno del tipo a sinistra e due righe di testo. */
.cella-segno{display:flex; align-items:center; gap:var(--space-micro-6); min-width:0;}
.cella-segno .cella-primaria{flex:1;}
.cella-link{color:var(--inchiostro); text-decoration:none; font-weight:500;}

.quando{display:inline-flex; align-items:center; gap:var(--space-micro-4); color:var(--testo-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.quando .icona{width:15px; height:15px;}

.azione-testo{
  display:inline-flex; align-items:center; min-height:34px; padding:0 var(--space-micro-6);
  border-radius:var(--radius-8); font-size:var(--fs-s); font-weight:500;
  color:var(--testo-2); text-decoration:none;
}

/* ----- scadenze colorate ----- */
.scad{display:flex; flex-direction:column; gap:1px; white-space:nowrap;}
.scad-data{font-size:var(--fs-s); font-variant-numeric:tabular-nums;}
.scad-resto{font-size:var(--fs-2xs); color:var(--testo-2);}
.scad[data-urgenza="allarme"] .scad-data,
.scad[data-urgenza="allarme"] .scad-resto{color:var(--allarme); font-weight:500;}
.scad[data-urgenza="attesa"] .scad-data,
.scad[data-urgenza="attesa"] .scad-resto{color:var(--attesa); font-weight:500;}
.scad[data-urgenza="nessuna"] .scad-data{color:var(--testo-2);}

/* ----- pulsanti icona / azioni di riga ----- */
.btn-icona{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--altezza-controllo); height:var(--altezza-controllo); flex:none;
  border:var(--border-width) solid transparent; border-radius:var(--radius-10);
  background:transparent; color:var(--testo-2); cursor:pointer;
  text-decoration:none; font-size:var(--fs-s);
  -webkit-tap-highlight-color:transparent;
}
.btn-icona .icona{width:19px; height:19px;}
.riga-azioni{display:inline-flex; gap:var(--space-micro-1);}

/* ----- lista card (sostituisce la tabella su mobile) ----- */
.card-lista{display:none; flex-direction:column; gap:var(--space-micro-6);}
.card-riga{
  display:block; background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s); padding:var(--space-micro-8);
  text-decoration:none; color:var(--inchiostro);
  -webkit-tap-highlight-color:transparent;
}
.card-alto{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-micro-5);}
.card-titolo{font-size:var(--fs-prosa); font-weight:500; word-break:break-word; line-height:1.3;}
.card-sub{font-size:var(--fs-s); color:var(--testo-2); word-break:break-word;}
.card-meta{
  display:flex; flex-wrap:wrap; gap:var(--space-micro-7);
  margin-top:var(--space-micro-6); padding-top:var(--space-micro-6);
  border-top:var(--border-width) solid var(--bordo);
}
.card-meta > div{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.card-meta-et{font-size:var(--fs-3xs); color:var(--testo-2);}
.card-meta-val{font-size:var(--fs-s); font-variant-numeric:tabular-nums;}

/* Riga compatta: la forma delle tabelle del cruscotto al telefono. Segno,
   due o tre righe di testo, stato a destra. Niente griglia di etichette:
   in un elenco breve le etichette ripetute occupano più dei dati. */
.riga-compatta{display:flex; align-items:flex-start; gap:var(--space-micro-6);}
.riga-compatta .segno-tipo{margin-top:2px;}
.riga-compatta-testo{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.riga-compatta-titolo{font-size:var(--fs-body); font-weight:500; line-height:1.35; word-break:break-word;}
.riga-compatta .quando{font-size:var(--fs-2xs); margin-top:2px; white-space:normal;}
.riga-compatta-coda{display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-micro-3); flex:none;}

/* ----- piede elenco ----- */
.elenco-piede{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-8); flex-wrap:wrap;}
.elenco-conteggio{font-size:var(--fs-2xs); color:var(--testo-2);}
.paginazione{display:flex; gap:var(--space-micro-3); align-items:center; flex-wrap:wrap;}
.pag-voce{
  min-width:var(--altezza-controllo); min-height:var(--altezza-controllo);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--space-micro-5); border-radius:var(--radius-10);
  border:var(--border-width) solid var(--bordo); background:var(--superficie);
  color:var(--inchiostro); text-decoration:none; font-size:var(--fs-s);
}
.pag-voce[aria-current="page"]{background:var(--inchiostro); color:#fff; font-weight:500; border-color:var(--inchiostro);}
.pag-voce[aria-disabled="true"]{opacity:.45; pointer-events:none;}

/* ----- scheda di dettaglio ----- */
.scheda{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-micro-9); align-items:start;}
.scheda-colonna{display:flex; flex-direction:column; gap:var(--space-micro-9); min-width:0;}

.dati-griglia{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-8) var(--space-micro-10);}
.dato{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.dato-et{font-size:var(--fs-2xs); color:var(--testo-2);}
.dato-val{font-size:var(--fs-body); word-break:break-word;}
.dato-val a{color:var(--accento-scuro);}
.dato-nota{font-size:var(--fs-2xs); color:var(--testo-2);}
.dato-vuoto{color:var(--testo-3);}
.dati-separatore{grid-column:1 / -1; height:var(--border-width); background:var(--bordo); border:0; margin:var(--space-micro-2) 0;}
.dati-una-colonna{grid-template-columns:1fr;}

.riepilogo-griglia{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-7);}
.riepilogo-valore{font-size:var(--fs-m); font-weight:600; font-variant-numeric:tabular-nums; line-height:var(--line-height-heading);}

.lista-righe{display:flex; flex-direction:column;}
.lista-riga{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6);
  min-height:var(--touch-target); padding:var(--space-micro-7) var(--space-micro-7);
  margin-inline:calc(-1 * var(--space-micro-7));
  border-top:var(--border-width) solid var(--bordo); border-radius:var(--radius-10);
  text-decoration:none; color:var(--inchiostro);
  -webkit-tap-highlight-color:transparent;
}
.lista-riga:first-child{border-top-color:transparent;}
.lista-riga-testa{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.lista-riga-titolo{font-size:var(--fs-body); font-weight:500; word-break:break-word;}
.lista-riga-meta{font-size:var(--fs-2xs); color:var(--testo-2);}
.lista-riga-coda{display:flex; align-items:center; gap:var(--space-micro-5); flex:none;}

.nota-blocco{
  background:var(--superficie-2); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-12); padding:var(--space-micro-7);
  font-size:var(--fs-prosa); white-space:pre-line; margin:0;
}

/* ----- moduli ----- */
/* Nessun max-width: i moduli si allineano a filtri, tabelle e pannelli.
   Larghezze diverse fanno ballare il bordo sinistro passando da una pagina
   all'altra, ed è la prima cosa che si nota. */
.modulo-largo{display:flex; flex-direction:column; gap:var(--space-micro-9);}
.sezione{
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s); padding:var(--space-micro-10);
}
.sezione-titolo{font-size:var(--heading-h6); font-weight:600; letter-spacing:-0.012em; margin:0 0 var(--space-micro-5);}
.sezione-nota{font-size:var(--fs-s); color:var(--testo-2); margin:calc(-1 * var(--space-micro-3)) 0 var(--space-micro-9);}
.campi-griglia{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-8);}
.campo-pieno{grid-column:1 / -1;}
.campo-aiuto{font-size:var(--fs-2xs); color:var(--testo-2);}
.campo-errore{font-size:var(--fs-2xs); color:var(--allarme); font-weight:500;}
.campo-obbligatorio{color:var(--allarme);}
.campo-facoltativo{color:var(--testo-2); font-weight:400;}
.campo-riga{display:flex; align-items:center; gap:var(--space-micro-5); min-height:var(--touch-target);}
.campo-riga input[type="checkbox"]{width:20px; height:20px; accent-color:var(--inchiostro); flex:none;}
textarea.input{min-height:104px; resize:vertical; line-height:var(--line-height-body);}
select.input{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--testo-2) 50%),linear-gradient(135deg,var(--testo-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:var(--space-medium-11);
}
input[type="file"].input{padding:var(--space-micro-5); font-size:var(--fs-s);}

.modulo-piede{display:flex; align-items:center; gap:var(--space-micro-5); flex-wrap:wrap;}
.modulo-piede .btn-primario{margin-left:auto;}

/* In fondo a una pagina di modifica i pulsanti restano sempre a vista: una
   barra che si ferma sul bordo in basso mentre si compila, e torna al suo
   posto quando si arriva in fondo. È sticky, non fixed: sta nel flusso e
   non copre mai l'ultimo campo. La riga sopra e l'ombra compaiono solo
   quando c'è del contenuto che le passa dietro (lo dice lo script). */
.modulo-largo > .modulo-piede{
  position:sticky; bottom:0; z-index:14;
  margin-inline:calc(-1 * var(--pagina-fianchi));
  padding:var(--space-micro-7) var(--pagina-fianchi) max(var(--space-micro-7), env(safe-area-inset-bottom));
  background:rgba(247,248,246,.88);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-top:var(--border-width) solid transparent;
  transition:border-color var(--durata-pannello) var(--curva), box-shadow var(--durata-pannello) var(--curva);
}
.modulo-largo > .modulo-piede[data-staccata]{
  border-top-color:var(--bordo);
  box-shadow:0 -12px 28px -18px rgba(22,34,35,.22);
}

.riepilogo-errori{
  background:var(--allarme-bg); border:var(--border-width) solid rgba(155,44,44,.35);
  border-radius:var(--radius-12); padding:var(--space-micro-7); color:var(--allarme);
  font-size:var(--fs-s);
}
.riepilogo-errori ul{margin:var(--space-micro-4) 0 0; padding-left:var(--space-micro-9);}

.testo-allarme{color:var(--allarme); font-weight:500;}
.testo-ok{color:var(--ok); font-weight:500;}
.testo-attesa{color:var(--attesa); font-weight:500;}

/* Una voce ritirata resta leggibile ma si fa da parte. */
.riga-spenta{opacity:.55;}

/* Monte ore: barra sottile, colore per soglia, percentuale scritta accanto. */
.barra-riga{align-items:stretch;}
.barra-riga .lista-riga-testa{flex:1; gap:var(--space-micro-3);}
.barra{display:block; height:6px; border-radius:var(--radius-max); background:var(--neutro-bg); overflow:hidden;}
.barra-pieno{display:block; height:100%; width:var(--pct,0%); border-radius:var(--radius-max); background:var(--ok);}
.barra-pieno[data-tono="attesa"]{background:#c98a1b;}
.barra-pieno[data-tono="allarme"]{background:var(--allarme);}

.monte-ore{display:flex; flex-direction:column; gap:var(--space-micro-3); min-width:110px;}
.monte-testo{font-size:var(--fs-2xs); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ----- righe del preventivo ----- */
.righe{display:flex; flex-direction:column; gap:var(--space-micro-7);}
.riga-voce{
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);
  background:var(--superficie-2); padding:var(--space-micro-8); margin:0;
  display:grid; gap:var(--space-micro-6);
  grid-template-columns:1fr auto;
  grid-template-areas:"scelta scelta" "descrizione descrizione" "numeri numeri" "togli togli";
}
.riga-scelta{grid-area:scelta; display:flex; flex-direction:column; gap:var(--space-micro-3);}
.riga-descrizione{grid-area:descrizione; display:flex; flex-direction:column; gap:var(--space-micro-3);}
.riga-numeri{grid-area:numeri; display:grid; gap:var(--space-micro-6); grid-template-columns:90px 130px 150px 1fr; align-items:end;}
.riga-calcolo{
  min-height:var(--altezza-controllo);
  display:flex; align-items:center; justify-content:flex-end;
  font-size:var(--fs-body); font-variant-numeric:tabular-nums; font-weight:500;
  color:var(--inchiostro); padding-inline:var(--space-micro-5);
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-10); white-space:nowrap; overflow-x:auto;
}
.riga-togli{grid-area:togli; justify-self:end; font-size:var(--fs-2xs);}
.righe-piede{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-micro-8); flex-wrap:wrap; margin-top:var(--space-micro-8);
  padding-top:var(--space-micro-8); border-top:var(--border-width) solid var(--bordo);
}
.righe-totale{margin:0; text-align:right; display:flex; flex-direction:column; gap:var(--space-micro-2); font-size:var(--fs-s);}
.righe-totale output{font-size:var(--heading-h4); font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}

/* Un dato che resta nello studio si vede subito che è di un'altra natura. */
.blocco-interno{background:var(--neutro-bg); border-radius:var(--radius-10); padding:var(--space-micro-6); margin-top:var(--space-micro-5); border-top:0;}
.colonna-interna{color:var(--testo-2);}
.azioni-stato{display:flex; flex-direction:column; gap:var(--space-micro-5);}

/* Elenco di caselle: due colonne finché ci stanno. */
.scelte-multiple{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-3) var(--space-micro-8);}
.scelte-multiple .etichetta{font-size:var(--fs-body); font-weight:400;}
.sezione-proposta{border-left:3px solid var(--accento);}

.elenco-servizi{margin:0; padding-left:var(--space-micro-9); font-size:var(--fs-body);}
.elenco-servizi li{margin-bottom:var(--space-micro-3);}

/* ----- filtri richiudibili ----- */
/* Su desktop il guscio non si vede: i filtri sono sempre aperti e il
   riassunto sparisce. Su mobile diventa una fisarmonica, perché sei filtri
   a tutta larghezza si mangiano la prima schermata. */
.filtri-guscio{margin:0;}
.filtri-riassunto{display:none;}
@media (min-width:768px){
  /* Aperto per forza. Due regole perché i motori sono due: quelli nuovi
     nascondono il contenuto con ::details-content, i vecchi con la regola
     display:none dell'agente utente. */
  .filtri-guscio::details-content{content-visibility:visible; block-size:auto; opacity:1;}
  .filtri-guscio > .filtri{display:flex;}
}

/* ----- posta in uscita ----- */
.lista-messaggi{display:flex; flex-direction:column; gap:var(--space-micro-6);}
.messaggio{padding:0;}
.messaggio-testa{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-micro-6); padding:var(--space-micro-8);
  cursor:pointer; list-style:none; min-height:var(--touch-target);
  border-radius:var(--radius-16);
}
.messaggio-testa::-webkit-details-marker{display:none;}
.messaggio-titolo{display:flex; flex-direction:column; gap:var(--space-micro-1); min-width:0;}
.messaggio-corpo{
  margin:0; padding:var(--space-micro-8);
  border-top:var(--border-width) solid var(--bordo); background:var(--superficie-2);
  font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.6;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto;
}
.messaggio form{padding:var(--space-micro-8); padding-top:0;}
.messaggio .campo-errore{padding:0 var(--space-micro-8) var(--space-micro-5);}
.messaggio-viste{border-top:var(--border-width) solid var(--bordo);}
.messaggio-vista{padding:var(--space-micro-8);}
.messaggio-vista .dato-et{display:block; margin-bottom:var(--space-micro-5); cursor:pointer;}
.messaggio-anteprima{width:100%; height:520px; border:var(--border-width) solid var(--bordo); border-radius:var(--radius-10); background:#fff; display:block;}
.messaggio-viste .messaggio-corpo{border-top:0; border-radius:var(--radius-10);}
.messaggio-viste details[open] summary{margin-bottom:var(--space-micro-5);}

/* Riga di scelta con la casella a sinistra: tutta la riga è cliccabile. */
.riga-scelta-canone{cursor:pointer; gap:var(--space-micro-7);}
.riga-scelta-canone .campo-riga{flex:none; min-height:auto;}
.riga-scelta-canone .lista-riga-testa{flex:1 1 auto; min-width:0;}

/* ----- schede di filtro ----- */
/* Controllo segmentato: la scheda attiva è un tassello bianco in rilievo
   dentro una guida grigia. */
.schede-filtro{
  display:flex; gap:var(--space-micro-1); flex-wrap:wrap;
  padding:var(--space-micro-2); background:var(--superficie-3);
  border-radius:var(--radius-12); width:fit-content; max-width:100%;
}
.scheda-filtro{
  display:inline-flex; align-items:center; min-height:36px;
  padding:0 var(--space-micro-7); border-radius:var(--radius-10);
  font-size:var(--fs-s); color:var(--testo-2); text-decoration:none;
}
/* Email delle comunicazioni: testo a sinistra, anteprima a destra; sotto i
   1200px una sotto l'altra. L'anteprima ha la larghezza vera delle email
   (600px) quando c'è spazio. */
.email-modifica{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-micro-10); align-items:start;}
@media (min-width:1200px){ .email-modifica{grid-template-columns:minmax(0,1fr) minmax(0,640px);} .email-anteprima{position:sticky; top:calc(var(--barra-alta, 76px) + var(--space-micro-8));} }
.email-anteprima{display:flex; flex-direction:column; gap:var(--space-micro-5);}
.email-colonna{display:flex; flex-direction:column; gap:var(--space-micro-9); min-width:0;}
.invio-azioni{display:flex; flex-wrap:wrap; gap:var(--space-micro-5); margin-top:var(--space-micro-7);}
.email-anteprima-testa{padding:var(--space-micro-7) var(--space-micro-8); background:var(--superficie); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12); display:flex; flex-direction:column; gap:var(--space-micro-2);}
.email-anteprima-testa p{margin:0;}
.email-anteprima-da{font-size:var(--fs-s); color:var(--testo-2);}
.email-anteprima-oggetto{font-size:var(--fs-body); font-weight:600;}
.email-anteprima-cornice{width:100%; height:640px; border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12); background:#f7f7f5;}
/* La barra in fondo: a sinistra si torna o si annulla, a destra si agisce. */
.email-piede-destra{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-micro-5); margin-left:auto;}
.email-piede .btn-primario{margin-left:0;}

/* Nuovo cliente: la scelta fra le due strade, con la frase che la spiega. */
.nuovo-cliente-scelta{display:flex; flex-direction:column; gap:var(--space-micro-5);}
.nuovo-cliente-scelta .sezione-nota{margin:0; max-width:72ch;}
.scheda-filtro[aria-current="page"]{color:var(--inchiostro); font-weight:500; background:var(--superficie); box-shadow:var(--ombra-xs), 0 0 0 1px var(--bordo);}

/* Un pallino accanto a chi aspetta una risposta. */
.pallino{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--allarme); margin-left:var(--space-micro-4); vertical-align:middle;}

/* =====================================================================
   Area cliente
   ===================================================================== */

.area{--container-max:1040px;}
.area-piede{
  width:100%; max-width:1040px; margin:0 auto; padding:var(--space-medium-11);
  border-top:var(--border-width) solid var(--bordo);
  font-size:var(--fs-2xs); color:var(--testo-2);
}
.area-piede p{margin:0 0 var(--space-micro-2);}
.area-piede a, .accesso-legale a{color:inherit; text-underline-offset:2px;}
.accesso-legale{margin:var(--space-micro-10) 0 0; text-align:center; font-size:var(--fs-2xs); color:var(--testo-2);}

/* Il pannello che chiede qualcosa al cliente si distingue dagli altri. */
.pannello-attesa{border-left:3px solid var(--attesa); background:var(--attesa-bg);}
.pannello-attesa .pannello-titolo{color:var(--attesa);}
.pannello-attesa .pannello-nota{color:var(--attesa);}

/* ----- lavori ----- */
.lista-lavori{display:flex; flex-direction:column; gap:var(--space-micro-6);}
.lavoro{padding:var(--space-micro-9);}
.lavoro-alto{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-micro-7);}
.lavoro-data{margin:0 0 var(--space-micro-2); font-size:var(--fs-2xs); color:var(--testo-2);}
.lavoro-descrizione{margin:0; font-size:var(--fs-m); line-height:1.35; letter-spacing:-0.01em; text-wrap:pretty;}
.lavoro-meta{
  display:flex; flex-wrap:wrap; gap:var(--space-micro-3) var(--space-micro-8);
  margin-top:var(--space-micro-7); padding-top:var(--space-micro-6);
  border-top:var(--border-width) solid var(--bordo);
  font-size:var(--fs-s); color:var(--testo-2);
}
.lavoro-attesa{margin:var(--space-micro-7) 0 0; padding:var(--space-micro-6) var(--space-micro-7); background:var(--attesa-bg); color:var(--attesa); border-radius:var(--radius-10); font-size:var(--fs-s);}
.lavoro-attesa a{color:inherit;}

/* ----- conversazione ----- */
.conversazione{display:flex; flex-direction:column; gap:var(--space-micro-7);}
.messaggio-bolla{max-width:min(560px, 88%); padding:var(--space-micro-7) var(--space-micro-8); border-radius:var(--radius-16); border:var(--border-width) solid var(--bordo); box-shadow:var(--ombra-xs);}
/* Chi ha scritto si capisce dal lato, non solo dal nome. */
.messaggio-bolla[data-autore="cliente"]{align-self:flex-end; background:var(--superficie-2); border-bottom-right-radius:var(--radius-4);}
.messaggio-bolla[data-autore="studio"]{align-self:flex-start; background:var(--superficie); border-bottom-left-radius:var(--radius-4);}
.bolla-chi{margin:0 0 var(--space-micro-4); font-size:var(--fs-2xs); font-weight:500; display:flex; gap:var(--space-micro-5); align-items:baseline; flex-wrap:wrap;}
.bolla-quando{color:var(--testo-2); font-weight:400;}
.bolla-testo{margin:0; font-size:var(--fs-prosa); line-height:var(--line-height-body); text-wrap:pretty;}

/* ----- accesso in due passaggi e profilo ----- */
/* Sei cifre spaziate e centrate. Largo come gli altri campi: occupa la
   colonna del modulo. Il rientro a sinistra compensa la spaziatura dopo
   l'ultima cifra, così il gruppo resta davvero al centro. */
.input-codice{font-size:var(--fs-m); letter-spacing:0.35em; text-align:center; font-variant-numeric:tabular-nums; padding-left:calc(var(--space-micro-6) + 0.35em);}
.accesso-altre{display:flex; flex-direction:column; gap:var(--space-micro-5); margin-top:var(--space-micro-9); padding-top:var(--space-micro-8); border-top:var(--border-width) solid var(--bordo);}
.accesso-recupero summary{cursor:pointer; min-height:var(--touch-target); display:flex; align-items:center; font-size:var(--fs-s); color:var(--testo-2);}
/* Le altre strade sono voci di un elenco, non pulsanti: stesso bordo
   sinistro e stessa misura della voce «Telefono non disponibile». */
.accesso-altre .btn-quieto{padding-inline:0; border-inline-width:0; justify-content:flex-start; min-height:var(--touch-target); font-size:var(--fs-s); font-weight:400;}
.accesso-altre .btn-quieto:hover{background:transparent; color:var(--inchiostro); text-decoration:underline; text-underline-offset:3px;}
.accesso-recupero[open] summary{margin-bottom:var(--space-micro-6);}
.azioni-profilo{display:flex; gap:var(--space-micro-5); flex-wrap:wrap; margin-top:var(--space-micro-8);}
.scelte-metodo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-9);}
.metodo{display:flex; flex-direction:column; gap:var(--space-micro-6); padding:var(--space-micro-9); background:var(--superficie-2); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);}
.metodo-titolo{margin:0; font-size:var(--heading-h6); font-weight:600;}
.metodo-testo{margin:0; font-size:var(--fs-body); color:var(--testo-2); flex:1; text-wrap:pretty;}
.metodo form{margin-top:auto;}
.metodo .btn{width:100%;}
/* Verifica in due passaggi: tre passi numerati. Il QR sta accanto alle
   istruzioni dove c'è spazio, sopra dove non c'è. Su un telefono il QR non
   si può inquadrare con lo stesso telefono: lì conta il pulsante che apre
   l'app, e le istruzioni «inquadra» lasciano il posto alle sue. */
.totp-passi{list-style:none; margin:0; padding:0; counter-reset:passo; display:flex; flex-direction:column; gap:var(--space-micro-10);}
.totp-passo{counter-increment:passo; position:relative; padding-left:calc(28px + var(--space-micro-7)); display:flex; flex-direction:column; gap:var(--space-micro-5);}
.totp-passo::before{
  content:counter(passo); position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:var(--fs-s); font-weight:600; background:var(--accento-scuro); color:#fff;
}
.totp-passo-titolo{font-size:var(--fs-body); font-weight:600; margin:0;}
.totp-passo-testo{font-size:var(--fs-s); color:var(--testo-2); margin:0; max-width:62ch;}
.totp-aggiungi{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-micro-9);}
.totp-qr{flex:none; width:196px; padding:var(--space-micro-4); background:#fff; border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);}
.totp-qr svg{display:block; width:100%; height:auto;}
.totp-aggiungi-testo{flex:1 1 260px; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-micro-6);}
.totp-manuale{font-size:var(--fs-s);}
.totp-manuale > summary{cursor:pointer; color:var(--testo-2); text-decoration:underline; text-underline-offset:3px;}
.totp-manuale[open]{padding:var(--space-micro-8); background:var(--superficie-2); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-micro-5);}
.totp-manuale[open] > summary{margin-bottom:var(--space-micro-3);}
.totp-conferma{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-micro-7); max-width:62ch;}
.totp-conferma .campo{margin:0; align-self:stretch;}
.totp-da-telefono{display:none;}
@media (hover:none) and (pointer:coarse){
  p.totp-da-telefono{display:block;}
  span.totp-da-telefono{display:inline;}
  a.totp-da-telefono{display:inline-flex;}
  .totp-da-computer{display:none;}
  .totp-qr{order:2; width:160px;}
}
.totp-segreto{margin:var(--space-micro-4) 0 var(--space-micro-5); font-family:var(--mono); font-size:var(--fs-m); letter-spacing:0.08em; word-break:break-all; user-select:all;}
/* I codici di recupero si leggono e si ricopiano: caratteri a larghezza
   fissa e molta aria, perché si guardano da un foglio stampato. */
.codici-recupero{list-style:none; margin:0 0 var(--space-micro-8); padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-6);}
.codici-recupero li{font-family:var(--mono); font-size:var(--fs-m); letter-spacing:0.06em; padding:var(--space-micro-6) var(--space-micro-7); background:var(--superficie-2); border-radius:var(--radius-10); border:var(--border-width) solid var(--bordo); user-select:all;}

/* ----- credenziali ----- */
/* Nella scheda del sito: ogni sezione con i suoi accessi sotto, da copiare
   senza entrare nella sezione. */
.lista-sezioni{display:flex; flex-direction:column; gap:var(--space-micro-7);}
.sezione-sito{border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12); overflow:hidden;}
.sezione-sito > .lista-riga{border-bottom:var(--border-width) solid var(--bordo);}
.sezione-sito-corpo{display:flex; flex-direction:column; gap:var(--space-micro-8); padding:var(--space-micro-9) var(--space-micro-10);}
.sezione-sito-descrizione{margin:0; font-size:var(--fs-s); color:var(--testo-2); line-height:var(--line-height-body);}
.sezione-sito-accesso{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-micro-6);}
.sezione-sito-accesso + .sezione-sito-accesso{padding-top:var(--space-micro-8); border-top:var(--border-width) dashed var(--bordo);}
.sezione-sito-etichetta{margin:0; font-size:var(--fs-s); font-weight:600;}
.sezione-sito-documenti{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-micro-3) var(--space-micro-7); font-size:var(--fs-s);}
.sezione-sito-documenti a{color:var(--accento-scuro);}
.lista-credenziali{display:flex; flex-direction:column; gap:var(--space-micro-7);}
.credenziale{padding:var(--space-micro-8); background:var(--superficie-2); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);}
.credenziale-testa{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-micro-6); margin-bottom:var(--space-micro-5);}
.credenziale-titolo{margin:0 0 var(--space-micro-5); font-size:var(--fs-m); font-weight:600; letter-spacing:-0.012em; line-height:var(--line-height-heading);}
.credenziale-testa .credenziale-titolo{margin-bottom:0;}
.credenziale-testa .riga-azioni form{display:inline-flex;}
.credenziale-dati{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-micro-4) var(--space-micro-8); align-items:baseline;}
.credenziale-dati dt{font-size:var(--fs-2xs); color:var(--testo-2); white-space:nowrap;}
.credenziale-dati dd{margin:0; font-size:var(--fs-body); min-width:0; word-break:break-word; display:flex; align-items:center; gap:var(--space-micro-5); flex-wrap:wrap;}
/* Le credenziali si ricopiano: caratteri a larghezza fissa, così 0 e O si
   distinguono, e un tocco seleziona tutto. */
.valore-copiabile{font-family:var(--mono); font-size:var(--fs-s); user-select:all;}
.password-valore{letter-spacing:0.08em;}
.btn-copia{
  min-height:32px; padding:0 var(--space-micro-6); flex:none;
  border:var(--border-width) solid var(--bordo-forte); border-radius:var(--radius-max);
  background:var(--superficie); color:var(--testo-2); box-shadow:var(--ombra-xs);
  font:inherit; font-size:var(--fs-2xs); cursor:pointer;
}
.aggiungi-credenziale{margin-top:var(--space-micro-9); padding-top:var(--space-micro-8); border-top:var(--border-width) solid var(--bordo);}
.aggiungi-credenziale summary{cursor:pointer; min-height:var(--touch-target); display:flex; align-items:center; font-size:var(--fs-body); font-weight:500;}
.aggiungi-credenziale[open] summary{margin-bottom:var(--space-micro-8);}
/* La pagina della sezione: la gestione di accessi e documenti sta chiusa
   in un riquadro, e si apre quando serve. */
.gestione-sezione > summary{cursor:pointer; min-height:var(--touch-target); display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6); font-size:var(--fs-m); font-weight:600; list-style:none;}
.gestione-sezione > summary::-webkit-details-marker{display:none;}
.gestione-sezione > summary::after{content:""; width:8px; height:8px; border-right:2px solid var(--testo-2); border-bottom:2px solid var(--testo-2); transform:rotate(45deg); transition:transform var(--t-fast) var(--curva); margin-right:4px;}
.gestione-sezione[open] > summary::after{transform:rotate(-135deg);}
@media (prefers-reduced-motion: reduce){ .gestione-sezione > summary::after{transition:none;} }
.gestione-sezione[open] > summary{margin-bottom:var(--space-micro-6);}
.gestione-sezione .pannello-sottotitolo{display:flex; align-items:center; gap:var(--space-micro-5);}
.credenziale-compatta{padding:var(--space-micro-6) var(--space-micro-8);}
.credenziale-compatta .credenziale-testa{margin-bottom:0; align-items:center;}
.credenziale-compatta .credenziale-titolo{font-size:var(--fs-body);}
.sezione-pagine-accesso{flex-wrap:wrap;}

/* =====================================================================
   Guscio: fondo dell'applicazione, menu, pannello del contenuto
   Un solo menu nel markup. Sopra i 992px è una colonna sul fondo e il
   contenuto sta in un pannello staccato che scorre per conto suo; sotto,
   lo stesso menu diventa un cassetto che scorre da sinistra.
   ===================================================================== */

.guscio{display:grid; grid-template-columns:var(--fianco-largo) minmax(0,1fr); min-height:100vh;}
.corpo{min-width:0; display:flex; flex-direction:column; --pagina-fianchi:var(--space-medium-11);}

/* Sopra i 992px il cassetto e il suo scorrimento non esistono: la colonna
   è un normale elemento della griglia. `display: contents` batte anche il
   `display: none` che il browser dà a un popover chiuso. */
.cassetto, .cassetto-scorri{display:contents;}

.fianco{
  position:sticky; top:0; align-self:start; z-index:5;
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--space-micro-8);
  padding:var(--space-micro-7) var(--space-micro-6) var(--space-micro-6);
  background:var(--fondo-app);
}
.fianco:focus{outline:none;}
.fianco-testa{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-3); padding-left:var(--space-micro-4); flex:none;}
.chiudi-cassetto{display:none;}
.riduci-fianco .icona{width:18px; height:18px;}

/* Scorre il menu, non la colonna: marchio in alto e profilo in basso
   restano dove sono anche quando le voci non ci stanno. */
.menu{
  display:flex; flex-direction:column; gap:var(--space-micro-9);
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--bordo-forte) transparent;
  margin-inline:calc(-1 * var(--space-micro-3)); padding-inline:var(--space-micro-3);
}
.menu-gruppo{display:flex; flex-direction:column; gap:var(--space-micro-1);}
.menu-titolo{
  margin:0 0 var(--space-micro-3); padding-inline:var(--space-micro-6);
  font-size:var(--fs-3xs); color:var(--testo-3); font-weight:500;
}
/* Voce attiva: un tassello bianco in rilievo sul fondo grigio. Il colore
   da solo non basterebbe a dire dove si è. */
.menu-voce{
  position:relative;
  display:flex; align-items:center; gap:var(--space-micro-6);
  min-height:34px; padding:0 var(--space-micro-6);
  border:var(--border-width) solid transparent; border-radius:var(--radius-10);
  font-size:var(--fs-s); color:var(--testo-2); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.menu-voce .icona{color:var(--testo-3);}
.menu-voce[aria-current="page"]{
  background:var(--superficie); color:var(--inchiostro); font-weight:500;
  border-color:var(--bordo); box-shadow:var(--ombra-xs);
}
.menu-voce[aria-current="page"] .icona{color:var(--inchiostro);}
.menu-voce-testo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.recenti-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-micro-1);}
.recente{
  display:flex; align-items:center; gap:var(--space-micro-5);
  min-height:36px; padding:0 var(--space-micro-5);
  border-radius:var(--radius-10); font-size:var(--fs-s); color:var(--testo-2); text-decoration:none;
}
.recente .segno-tipo{width:22px; height:22px; border-radius:var(--radius-6);}
.recente .segno-tipo .icona{width:12px; height:12px;}
.recente-testo{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.fianco-piede{flex:none; display:flex; align-items:center; gap:var(--space-micro-2);}
.profilo-scheda{
  flex:1; min-width:0; display:flex; align-items:center; gap:var(--space-micro-5);
  padding:var(--space-micro-4) var(--space-micro-5);
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-12); box-shadow:var(--ombra-xs);
  text-decoration:none; color:var(--inchiostro);
}
.avatar{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #dfe6de, #cfd8cf); color:var(--inchiostro);
  font-size:var(--fs-3xs); font-weight:600;
}
.profilo-testo{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
.profilo-nome{font-size:var(--fs-s); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profilo-nota{font-size:var(--fs-3xs); color:var(--testo-2);}
.esci{margin:0; flex:none;}

/* ----- barra in alto ----- */
/* Sotto i 992px la barra è la fascia con Menu, ricerca e azione, e la
   .testata che la contiene non ha una scatola sua (display: contents).
   Sopra i 992px è la .testata a fare da barra, con l'intestazione della
   pagina: vedi la sezione responsive. Vetro leggero: il contenuto che
   scorre sotto si intuisce appena. */
.testata{display:contents;}
.testata-barra{
  position:sticky; top:0; z-index:40;
  height:var(--barra-alta); flex:none;
  display:flex; align-items:center; gap:var(--space-micro-5);
  padding:0 var(--space-micro-7) 0 var(--space-micro-5);
  background:rgba(247,248,246,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:var(--border-width) solid var(--bordo);
}
.apri-menu, .marchio-barra, .apri-cerca, .barra-azione{display:none;}

/* ----- ricerca ----- */
/* Il pannello dei risultati si apre largo quanto il contenuto della
   pagina: lo script misura la colonna e scrive --cerca-sx e --cerca-largo.
   Per questo il modulo non è posizionato: il riferimento è la barra. */
.cerca{margin:0 0 0 auto; width:min(400px, 34vw);}
.cerca-riga{display:flex; align-items:center; gap:var(--space-micro-3);}
.cerca-campo{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:var(--space-micro-5);
  height:var(--altezza-controllo); padding:0 var(--space-micro-5) 0 var(--space-micro-6);
  background:var(--superficie); border:var(--border-width) solid var(--bordo-controllo);
  border-radius:var(--radius-10); box-shadow:var(--ombra-xs);
}
.cerca-campo:focus-within{border-color:var(--accento-scuro); box-shadow:0 0 0 3px var(--anello);}
.cerca-lente{color:var(--testo-2);}
.cerca-input{
  flex:1; min-width:0; height:100%; border:0; background:transparent; padding:0;
  font:inherit; font-size:var(--fs-body); color:var(--inchiostro);
}
.cerca-input:focus{outline:none;}
.cerca-input::placeholder{color:var(--testo-3);}
.cerca-input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.cerca-tasti{
  flex:none; font-family:var(--font); font-size:var(--fs-3xs); color:var(--testo-2);
  padding:1px var(--space-micro-4); border:var(--border-width) solid var(--bordo-forte);
  border-bottom-width:2px; border-radius:var(--radius-6); background:var(--superficie-2);
}
.cerca-annulla{display:none;}

.cerca-pannello{
  position:absolute; z-index:50;
  top:calc(100% + var(--space-micro-5));
  left:var(--cerca-sx, var(--space-micro-10));
  width:var(--cerca-largo, calc(100% - 2 * var(--space-micro-10)));
  max-height:min(72vh, 640px);
  display:flex; flex-direction:column;
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-l);
  overflow:hidden;
  transform-origin:top center;
}
.cerca-pannello[hidden]{display:none;}
@media (prefers-reduced-motion:no-preference){
  .cerca-pannello:not([hidden]){animation:pannello-entra var(--durata-pannello) var(--curva);}
}
@keyframes pannello-entra{from{opacity:0; transform:translateY(-6px) scale(.99);}}

.cerca-testa{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6);
  padding:var(--space-micro-4) var(--space-micro-4) var(--space-micro-4) var(--space-micro-8);
  border-bottom:var(--border-width) solid var(--bordo);
}
.cerca-intestazione{margin:0; font-size:var(--fs-2xs); font-weight:500; color:var(--testo-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cerca-espandi{width:36px; height:36px;}
.cerca-espandi .icona{width:17px; height:17px;}
.cerca-espandi .icona-riduci{display:none;}
.cerca[data-estesa] .cerca-espandi .icona-espandi{display:none;}
.cerca[data-estesa] .cerca-espandi .icona-riduci{display:block;}

/* I gruppi si dispongono in colonne quando c'è spazio: un pannello largo
   quanto la pagina con una sola colonna di risultati sarebbe metà vuoto. */
.cerca-risultati{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--space-micro-5);
  columns:2 360px; column-gap:var(--space-micro-5);
}
.cerca-gruppo{break-inside:avoid; margin-bottom:var(--space-micro-5); padding-bottom:var(--space-micro-3);}
.cerca-gruppo-titolo{
  display:flex; align-items:center; gap:var(--space-micro-4);
  padding:var(--space-micro-5) var(--space-micro-6) var(--space-micro-3);
  font-size:var(--fs-3xs); font-weight:500; color:var(--testo-2);
}
.cerca-voce{
  display:flex; align-items:center; gap:var(--space-micro-6);
  min-height:52px; padding:var(--space-micro-4) var(--space-micro-6);
  border-radius:var(--radius-10); color:var(--inchiostro); text-decoration:none;
  scroll-margin:var(--space-micro-5);
}
.cerca-voce[aria-selected="true"]{background:var(--superficie-2); box-shadow:inset 0 0 0 1px var(--bordo);}
.cerca-testo{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.cerca-titolo{font-size:var(--fs-body); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cerca-sotto{font-size:var(--fs-2xs); color:var(--testo-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cerca-voce mark{background:var(--evidenza); color:inherit; border-radius:3px; padding:0 1px;}
.cerca-invio{display:flex; color:var(--testo-2); visibility:hidden;}
.cerca-invio .icona{width:16px; height:16px;}
.cerca-voce[aria-selected="true"] .cerca-invio{visibility:visible;}
.cerca-niente{margin:0; padding:var(--space-micro-10) var(--space-micro-8); font-size:var(--fs-body); color:var(--testo-2); text-align:center; text-wrap:balance; column-span:all;}
.cerca-piede{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6);
  margin:0; padding:var(--space-micro-3) var(--space-micro-8);
  border-top:var(--border-width) solid var(--bordo); background:var(--superficie-2);
  font-size:var(--fs-3xs); color:var(--testo-2);
}
.cerca-piede:empty{display:none;}
.cerca-suggerimento kbd{font-family:var(--font); padding:0 4px; border:var(--border-width) solid var(--bordo-forte); border-bottom-width:2px; border-radius:4px; background:var(--superficie);}
.cerca-tutti{display:inline-flex; align-items:center; gap:var(--space-micro-2); min-height:34px; padding:0 var(--space-micro-4); margin-left:auto; border-radius:var(--radius-8); font-size:var(--fs-2xs); font-weight:500; color:var(--inchiostro); text-decoration:none;}
.cerca-tutti .icona{width:14px; height:14px;}

/* A tutto schermo (desktop, su richiesta) e al telefono (sempre): il modulo
   intero copre la finestra, con il campo in alto e i risultati sotto. */
.cerca[data-estesa], .cerca[data-aperta]{
  display:flex; flex-direction:column;
  position:fixed; inset:0; z-index:120; width:auto; max-width:none; margin:0;
  background:var(--fondo);
  padding-top:env(safe-area-inset-top);
}
/* Un antenato con backdrop-filter fa da contenitore agli elementi fissi:
   con la ricerca a tutto schermo la barra rinuncia al vetro, o il
   «tutto schermo» resterebbe chiuso dentro i 64px della barra. */
body.cerca-aperta .testata, body.cerca-aperta .testata-barra{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--fondo);}
body.cerca-aperta{overflow:hidden;}
.cerca[data-estesa] .cerca-riga, .cerca[data-aperta] .cerca-riga{
  flex:none; padding:var(--space-micro-7) var(--space-micro-10);
  background:var(--superficie); border-bottom:var(--border-width) solid var(--bordo);
}
.cerca[data-estesa] .cerca-riga .cerca-campo{max-width:880px; margin-inline:auto; height:48px;}
.cerca[data-estesa] .cerca-riga{justify-content:center;}
.cerca[data-estesa] .cerca-annulla, .cerca[data-aperta] .cerca-annulla{
  display:inline-flex; align-items:center; height:var(--touch-target);
  padding:0 var(--space-micro-6); flex:none; border-radius:var(--radius-10);
  border:0; background:transparent; font:inherit; font-size:var(--fs-body); font-weight:500;
  color:var(--accento-scuro); cursor:pointer;
}
.cerca[data-estesa] .cerca-input{font-size:var(--fs-m);}
.cerca[data-estesa] .cerca-pannello, .cerca[data-aperta] .cerca-pannello{
  position:static; width:auto; max-height:none; flex:1; min-height:0;
  border:0; border-radius:0; box-shadow:none; background:transparent; animation:none;
}
.cerca[data-estesa] .cerca-pannello[hidden], .cerca[data-aperta] .cerca-pannello[hidden]{display:flex;}
.cerca[data-estesa] .cerca-testa{padding-inline:var(--space-micro-10) var(--space-micro-9); border-bottom:0;}
.cerca[data-estesa] .cerca-risultati{columns:3 320px; column-gap:var(--space-micro-9); padding:0 var(--space-micro-10) var(--space-micro-10);}
/* A tutto schermo ogni gruppo è una scheda: sul fondo grigio i gruppi si
   leggono come blocchi separati. */
.cerca[data-estesa] .cerca-gruppo{
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-xs);
  padding:var(--space-micro-3) var(--space-micro-4) var(--space-micro-4); margin-bottom:var(--space-micro-9);
}
.cerca[data-estesa] .cerca-piede{padding-inline:var(--space-micro-10);}

/* La pagina completa dei risultati. */
.risultati-gruppo .lista-riga{justify-content:flex-start;}
.risultati-gruppo .lista-riga-testa{flex:1;}

/* =====================================================================
   Cruscotto
   ===================================================================== */

.cruscotto{display:flex; flex-direction:column; gap:var(--space-micro-9);}

/* Numeri chiave: una scheda dentro la scheda. Dentro, grigio, il numero;
   sotto, bianco, cosa significa. */
.numeri{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-micro-8);}
.numero{
  display:flex; flex-direction:column;
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s);
  padding:var(--space-micro-4); color:inherit; text-decoration:none; min-width:0;
  -webkit-tap-highlight-color:transparent;
}
.numero-dentro{
  flex:1; justify-content:space-between;
  display:flex; flex-direction:column; gap:var(--space-micro-7);
  padding:var(--space-micro-8); border-radius:var(--radius-12);
  background:linear-gradient(180deg, #fafbf9 0%, var(--superficie-2) 100%);
  border:var(--border-width) solid var(--bordo);
}
.numero-testa{display:flex; align-items:center; gap:var(--space-micro-5); font-size:var(--fs-s); color:var(--testo-2); min-width:0;}
.numero-segno{
  width:26px; height:26px; flex:none; border-radius:var(--radius-8);
  display:flex; align-items:center; justify-content:center;
  background:var(--inchiostro); color:var(--accento); box-shadow:var(--luce);
}
.numero-segno .icona{width:14px; height:14px;}
/* Numeri grandi con le cifre proporzionali: le tabulari li allargano. */
.numero-valore{font-size:var(--fs-l); font-weight:600; letter-spacing:-0.035em; line-height:1.1; overflow-wrap:anywhere;}
.numero-piede{
  display:flex; align-items:center; gap:var(--space-micro-4);
  padding:var(--space-micro-5) var(--space-micro-5) var(--space-micro-3);
  font-size:var(--fs-2xs); color:var(--testo-2); min-height:36px;
}
.numero-piede .icona{width:15px; height:15px;}
.numero-piede[data-tono="ok"]{color:var(--ok);}
.numero-piede[data-tono="attesa"]{color:var(--attesa);}
.numero-piede[data-tono="allarme"]{color:var(--allarme);}
.numero-piede .numero-freccia{margin-left:auto; color:var(--testo-3);}

.cruscotto-basso{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-micro-9); align-items:start;}
.colonna{display:flex; flex-direction:column; gap:var(--space-micro-9); min-width:0;}

/* Schede dei preventivi da seguire. Il riquadro in alto ha una trama di
   punti appena visibile: dà materia senza illustrazioni finte. */
.schede-fila{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-micro-8); list-style:none; margin:0; padding:0;}
.scheda-doc{
  display:flex; flex-direction:column; gap:var(--space-micro-5); height:100%;
  padding:var(--space-micro-4) var(--space-micro-4) var(--space-micro-7);
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-xs);
  color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.scheda-doc-visuale{
  position:relative; height:112px; border-radius:var(--radius-12);
  background-color:var(--superficie-2);
  background-image:radial-gradient(rgba(34,47,48,.13) 1px, transparent 1.2px);
  background-size:12px 12px; background-position:6px 6px;
  border:var(--border-width) solid var(--bordo);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.scheda-doc-visuale .badge{position:absolute; top:var(--space-micro-5); right:var(--space-micro-5); box-shadow:var(--ombra-xs);}
.scheda-doc-sigla{
  width:54px; height:54px; border-radius:var(--radius-12);
  display:flex; align-items:center; justify-content:center;
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  box-shadow:0 10px 24px -8px rgba(34,47,48,.30), 0 2px 4px rgba(34,47,48,.06);
  font-size:var(--fs-m); font-weight:600; color:var(--inchiostro); letter-spacing:-0.02em;
}
.scheda-doc-corpo{display:flex; flex-direction:column; gap:var(--space-micro-2); padding-inline:var(--space-micro-5);}
.scheda-doc-titolo{font-size:var(--fs-body); font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.scheda-doc-meta{font-size:var(--fs-2xs); color:var(--testo-2);}
.scheda-doc-piede{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-micro-5); margin-top:auto; padding:var(--space-micro-5) var(--space-micro-5) 0; border-top:var(--border-width) solid var(--bordo);}
.scheda-doc-totale{font-size:var(--fs-body); font-weight:600; letter-spacing:-0.01em;}
.scheda-doc-numero{font-size:var(--fs-2xs); color:var(--testo-2); font-variant-numeric:tabular-nums;}

/* ----- grafico delle ore ----- */
/* Una serie sola: le settimane passate in petrolio chiaro, quella in corso
   in petrolio pieno. Colori validati con lo script di dataviz (contrasto
   ≥ 3:1 sul bianco, distinguibili anche per i daltonici). */
.grafico{position:relative; margin:0;}
.grafico-testa{display:flex; align-items:baseline; gap:var(--space-micro-5); margin-bottom:var(--space-micro-5);}
.grafico-cifra{font-size:22px; font-weight:600; letter-spacing:-0.03em; line-height:1.1;}
.grafico-nota{font-size:var(--fs-2xs); color:var(--testo-2);}
.grafico svg{display:block; width:100%; height:auto; overflow:visible;}
.grafico .asse{stroke:var(--bordo); stroke-width:1;}
.grafico .tacca{fill:var(--testo-3); font-size:12px; font-family:var(--font); font-variant-numeric:tabular-nums;}
.grafico .colonna-dato{fill:#5e999c;}
.grafico .colonna-dato[data-corrente]{fill:#2a6a6e;}
.grafico .zona{fill:transparent;}
.grafico .zona[data-attiva]{fill:var(--superficie-2);}
.grafico-suggerimento{
  position:absolute; z-index:3; pointer-events:none;
  transform:translate(-50%, calc(-100% - 8px));
  padding:var(--space-micro-3) var(--space-micro-5);
  background:var(--inchiostro); color:#fff; border-radius:var(--radius-8);
  box-shadow:var(--ombra-m); font-size:var(--fs-3xs); white-space:nowrap;
}
.grafico-suggerimento strong{font-weight:600;}
.grafico-suggerimento[hidden]{display:none;}
.grafico-dati{margin-top:var(--space-micro-5);}
.grafico-dati summary{
  display:inline-flex; align-items:center; min-height:34px; padding:0 var(--space-micro-5);
  margin-left:calc(-1 * var(--space-micro-5)); border-radius:var(--radius-8);
  font-size:var(--fs-2xs); font-weight:500; color:var(--testo-2); cursor:pointer;
}
.grafico-dati .tabella{margin-top:var(--space-micro-4);}
.grafico-dati .tabella td{padding:var(--space-micro-3) var(--space-micro-5); font-size:var(--fs-2xs);}
.grafico-dati .tabella th{padding:var(--space-micro-3) var(--space-micro-5);}

/* ----- pulsante «Crea» ----- */
/* Il pannello sta nel primo piano del browser (popover): nessun contenitore
   con overflow lo taglia. La posizione sotto il pulsante la scrive lo
   script in --crea-x/--crea-y; senza script il browser lo centra. */
.crea-freccia{width:16px; height:16px; margin-left:-2px; opacity:.8;}
.menu-crea{
  position:fixed; inset:auto; margin:0;
  top:var(--crea-y, 50%); left:var(--crea-x, 50%);
  width:var(--crea-largo, 320px); max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain;
  padding:var(--space-micro-4);
  background:var(--superficie); color:var(--inchiostro);
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  box-shadow:var(--ombra-l);
  transform-origin:top right;
}
/* Entrata e uscita: breve, dall'alto, e l'uscita più rapida dell'entrata. */
@media (prefers-reduced-motion:no-preference){
  .menu-crea{
    transition:opacity var(--durata-hover) var(--curva), transform var(--durata-pannello) var(--curva),
               overlay var(--durata-pannello) allow-discrete, display var(--durata-pannello) allow-discrete;
  }
  .menu-crea:not(:popover-open){opacity:0; transform:translateY(-4px) scale(.98); transition-duration:120ms;}
  @starting-style{
    .menu-crea:popover-open{opacity:0; transform:translateY(-4px) scale(.98);}
  }
}
.menu-crea-gruppo + .menu-crea-gruppo{margin-top:var(--space-micro-3); padding-top:var(--space-micro-3); border-top:var(--border-width) solid var(--bordo);}
.menu-crea-titolo{margin:0; padding:var(--space-micro-5) var(--space-micro-6) var(--space-micro-3); font-size:var(--fs-3xs); font-weight:500; color:var(--testo-2);}
.menu-crea ul{list-style:none; margin:0; padding:0;}
.menu-crea-voce{
  display:flex; align-items:center; gap:var(--space-micro-6);
  min-height:52px; padding:var(--space-micro-4) var(--space-micro-6);
  border-radius:var(--radius-10); color:var(--inchiostro); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.menu-crea-voce:focus-visible{outline-offset:-2px; background:var(--superficie-2);}
.menu-crea-testo{display:flex; flex-direction:column; gap:1px; min-width:0;}
.menu-crea-nome{font-size:var(--fs-body); font-weight:500;}
.menu-crea-nota{font-size:var(--fs-2xs); color:var(--testo-2);}
/* Aperto, la freccia si gira: dice che lo stesso pulsante lo richiude. */
.crea-pulsante .crea-freccia{transition:transform var(--durata-pannello) var(--curva);}
.crea-pulsante[data-aperto] .crea-freccia{transform:rotate(180deg);}

/* ----- calendario ----- */
/* Con il mouse il campo data diventa testo più un pulsante, e il pannello
   del browser (che non si può vestire) lascia il posto al nostro. Al tocco
   resta il selettore di sistema. */
.data-campo{position:relative; display:flex; align-items:center;}
.data-campo .input{padding-right:calc(var(--altezza-controllo) + 2px); font-variant-numeric:tabular-nums;}
.data-apri{
  position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:calc(var(--altezza-controllo) - 6px); height:calc(var(--altezza-controllo) - 6px);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius-8); background:transparent; color:var(--testo-2); cursor:pointer;
}
.data-apri .icona{width:17px; height:17px;}
.data-apri[aria-expanded="true"]{background:var(--superficie-3); color:var(--inchiostro);}

.calendario{
  position:fixed; inset:auto; margin:0; width:296px;
  padding:var(--space-micro-6);
  background:var(--superficie); color:var(--inchiostro);
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  box-shadow:var(--ombra-l);
}
@media (prefers-reduced-motion:no-preference){
  .calendario{
    transition:opacity var(--durata-hover) var(--curva), transform var(--durata-pannello) var(--curva),
               overlay var(--durata-pannello) allow-discrete, display var(--durata-pannello) allow-discrete;
  }
  .calendario:not(:popover-open){opacity:0; transform:translateY(-4px) scale(.98); transition-duration:120ms;}
  @starting-style{ .calendario:popover-open{opacity:0; transform:translateY(-4px) scale(.98);} }
}
.calendario-testa{display:flex; align-items:center; gap:var(--space-micro-2); padding:0 0 var(--space-micro-5) var(--space-micro-4);}
.calendario-titolo{flex:1; margin:0; font-size:var(--fs-body); font-weight:600; letter-spacing:-0.01em;}
.calendario-freccia{width:32px; height:32px;}
.calendario-freccia .icona{width:17px; height:17px;}
.calendario-freccia:first-of-type .icona{transform:rotate(180deg);}
.calendario-griglia{width:100%; border-collapse:separate; border-spacing:2px; table-layout:fixed;}
/* Il titolo è un pulsante: si salta agli anni e ai mesi. Anni e mesi stanno
   in una griglia 4×3 alta come quella dei giorni, così il pannello non
   cambia misura passando da una vista all'altra. */
.calendario-salta{display:inline-flex; align-items:center; gap:var(--space-micro-2); margin-left:calc(-1 * var(--space-micro-4)); padding:var(--space-micro-2) var(--space-micro-4); border:0; border-radius:var(--radius-8); background:transparent; font:inherit; font-weight:600; color:inherit; cursor:pointer;}
.calendario-salta .icona{width:14px; height:14px; color:var(--testo-2);}
.calendario-salta:focus-visible, .calendario-scelta:focus-visible{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:1px;}
.calendario-scelte{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-micro-2); min-height:252px; align-content:center;}
.calendario-scelta{min-height:48px; border:0; border-radius:var(--radius-10); background:transparent; font:inherit; font-size:var(--fs-s); font-variant-numeric:tabular-nums; color:var(--inchiostro); cursor:pointer;}
.calendario-scelta[aria-pressed="true"]{background:var(--inchiostro); color:#fff; font-weight:600; box-shadow:var(--luce), var(--ombra-xs);}
.calendario-scelta:disabled{opacity:.4; cursor:not-allowed;}
@media (hover:hover){
  .calendario-salta:hover, .calendario-scelta:not(:disabled):not([aria-pressed="true"]):hover{background:var(--velo-hover);}
}
.calendario-griglia th{padding:0 0 var(--space-micro-3); font-size:var(--fs-3xs); font-weight:500; color:var(--testo-3); text-align:center;}
.calendario-griglia td{padding:0; text-align:center;}
.calendario-giorno{
  position:relative; width:100%; aspect-ratio:1; max-width:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--radius-10); background:transparent;
  font:inherit; font-size:var(--fs-s); font-variant-numeric:tabular-nums; color:var(--inchiostro); cursor:pointer;
}
.calendario-giorno[data-fuori]{color:var(--testo-3);}
/* Oggi: numero in grassetto e un filo attorno. Il puntino sotto il numero
   è degli interventi. */
.calendario-giorno[aria-current="date"]{font-weight:700; box-shadow:inset 0 0 0 1px var(--bordo-controllo);}
.calendario-giorno[aria-pressed="true"]{background:var(--inchiostro); color:#fff; font-weight:600; box-shadow:var(--luce), var(--ombra-xs);}
.calendario-giorno:focus-visible{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:1px;}
.calendario-giorno:disabled{color:var(--testo-3); opacity:.4; cursor:not-allowed; text-decoration:line-through;}
.calendario-piede{display:flex; justify-content:space-between; gap:var(--space-micro-5); margin-top:var(--space-micro-5); padding-top:var(--space-micro-5); border-top:var(--border-width) solid var(--bordo);}
.calendario-azione{
  min-height:32px; padding:0 var(--space-micro-6); border:0; border-radius:var(--radius-8);
  background:transparent; font:inherit; font-size:var(--fs-s); font-weight:500; color:var(--testo-2); cursor:pointer;
}
.calendario-oggi{color:var(--inchiostro); background:var(--superficie-2);}

/* ----- menu a tendina ----- */
/* Con il mouse il <select> resta nel modulo, nascosto, e al suo posto c'è
   un pulsante che apre il nostro elenco (con la ricerca se è lungo). Al
   tocco resta il menu di sistema. */
.selezione{position:relative;}
.selezione-nativo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; opacity:0; pointer-events:none;
}
.selezione-campo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-5);
  text-align:left; cursor:pointer; padding-right:var(--space-micro-5);
}
.selezione-valore{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.selezione-freccia{width:16px; height:16px; flex:none; color:var(--testo-2); transition:transform var(--durata-pannello) var(--curva);}
.selezione-campo[aria-expanded="true"]{border-color:var(--accento-scuro); box-shadow:0 0 0 3px var(--anello);}
.selezione-campo[aria-expanded="true"] .selezione-freccia{transform:rotate(180deg);}

.selezione-pannello{
  position:fixed; inset:auto; margin:0;
  max-width:min(420px, calc(100vw - 16px)); max-height:min(360px, calc(100dvh - 24px));
  flex-direction:column; padding:var(--space-micro-4);
  background:var(--superficie); color:var(--inchiostro);
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  box-shadow:var(--ombra-l);
}
.selezione-pannello:popover-open{display:flex;}
@media (prefers-reduced-motion:no-preference){
  .selezione-pannello{
    transform-origin:top left;
    transition:opacity var(--durata-hover) var(--curva), transform var(--durata-pannello) var(--curva),
               overlay var(--durata-pannello) allow-discrete, display var(--durata-pannello) allow-discrete;
  }
  .selezione-pannello:not(:popover-open){opacity:0; transform:translateY(-4px) scale(.98); transition-duration:120ms;}
  @starting-style{ .selezione-pannello:popover-open{opacity:0; transform:translateY(-4px) scale(.98);} }
}
.selezione-cerca-riga{
  display:flex; align-items:center; gap:var(--space-micro-5); flex:none;
  margin:0 0 var(--space-micro-3); padding:0 var(--space-micro-6);
  border-bottom:var(--border-width) solid var(--bordo);
}
.selezione-cerca-riga .icona{width:16px; height:16px; color:var(--testo-2);}
.selezione-cerca{
  flex:1; min-width:0; height:40px; border:0; background:transparent; padding:0;
  font:inherit; font-size:var(--fs-body); color:var(--inchiostro);
}
.selezione-cerca:focus{outline:none;}
.selezione-cerca::placeholder{color:var(--testo-3);}
.selezione-cerca::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}
.selezione-lista{overflow-y:auto; overscroll-behavior:contain; min-height:0; outline:none;}
.selezione-gruppo-titolo{padding:var(--space-micro-5) var(--space-micro-6) var(--space-micro-2); font-size:var(--fs-3xs); font-weight:500; color:var(--testo-2);}
.selezione-voce{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6);
  min-height:36px; padding:var(--space-micro-3) var(--space-micro-6);
  border-radius:var(--radius-10); font-size:var(--fs-body); cursor:pointer;
  scroll-margin:var(--space-micro-4);
}
.selezione-voce[data-attiva]{background:var(--superficie-2);}
.selezione-voce[aria-selected="true"]{font-weight:500;}
.selezione-voce[aria-disabled="true"]{color:var(--testo-3); cursor:not-allowed;}
.selezione-voce-testo{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:var(--space-micro-5);}
.selezione-voce-testo[data-colore]::before, .selezione-valore[data-colore]::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:none; background:var(--c-punto);
}
.selezione-valore[data-colore]{display:inline-flex; align-items:center; gap:var(--space-micro-5);}
/* Quante voci darebbe questa scelta, con gli altri filtri che ci sono. */
.selezione-conteggio{margin-left:auto; font-size:var(--fs-3xs); color:var(--testo-3); font-variant-numeric:tabular-nums;}
.selezione-voce[aria-disabled="true"] .selezione-voce-testo::before{opacity:.45;}
.selezione-voce mark{background:var(--evidenza); color:inherit; border-radius:3px; padding:0 1px;}
.selezione-spunta{width:16px; height:16px; flex:none; color:var(--inchiostro); visibility:hidden;}
.selezione-voce[aria-selected="true"] .selezione-spunta{visibility:visible;}
.selezione-niente{margin:0; padding:var(--space-micro-8) var(--space-micro-6); font-size:var(--fs-s); color:var(--testo-2); text-align:center;}
.selezione-niente[hidden]{display:none;}

/* ----- interventi sui giorni ----- */
/* Un pallino per intervento (al massimo tre), colore dello stato: lo
   stesso dei tag nelle liste. Il numero è anche nell'etichetta del giorno. */
.calendario-numero{line-height:1;}
.calendario-puntini{position:absolute; left:50%; bottom:4px; translate:-50% 0; display:flex; gap:2px;}
.calendario-puntino{width:5px; height:5px; border-radius:50%; background:var(--neutro);}
.calendario-puntino[data-tono="ok"], .calendario-evento[data-tono="ok"]::before{background:#3b8a5a;}
.calendario-puntino[data-tono="attesa"], .calendario-evento[data-tono="attesa"]::before{background:#c98a1b;}
.calendario-puntino[data-tono="allarme"], .calendario-evento[data-tono="allarme"]::before{background:var(--allarme);}
.calendario-puntino[data-tono="info"], .calendario-evento[data-tono="info"]::before{background:var(--info);}
.calendario-puntino[data-colore], .calendario-evento[data-colore]::before{background:var(--c-punto);}
.calendario-giorno[aria-pressed="true"] .calendario-puntino{box-shadow:0 0 0 1px rgba(255,255,255,.85);}
.calendario-eventi{display:none;}
.calendario-espandi{width:32px; height:32px;}
.calendario-espandi .icona{width:16px; height:16px;}

/* Espanso: grande e al centro, con le righe degli interventi dentro ogni
   giorno. Le posizioni scritte dallo script valgono solo da ridotto. */
.calendario[data-esteso]{
  left:50% !important; top:4vh !important; translate:-50% 0;
  width:min(1180px, 94vw); height:min(840px, 92vh);
  gap:var(--space-micro-8); padding:var(--space-micro-9);
  transform-origin:top center;
}
/* Solo da aperto: su un popover chiuso vince il «display: none» del browser. */
.calendario[data-esteso]:popover-open{display:flex;}
.calendario[data-esteso]::backdrop{background:rgba(34,47,48,.32);}
.calendario[data-esteso] .calendario-mese{flex:1; width:auto; display:flex; flex-direction:column; min-height:0;}
.calendario[data-esteso] .calendario-titolo{font-size:var(--fs-m);}
.calendario[data-esteso] .calendario-griglia{flex:1; height:100%; border-spacing:4px;}
.calendario-periodo[data-esteso] .calendario-griglia{border-spacing:0 4px;}
.calendario[data-esteso] .calendario-griglia td{vertical-align:top; height:16%;}
.calendario[data-esteso] .calendario-giorno{
  max-width:none; aspect-ratio:auto; height:100%; min-height:84px;
  flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
  padding:var(--space-micro-4) var(--space-micro-5); text-align:left;
  border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);
}
.calendario[data-esteso] .calendario-giorno[data-fuori]{background:var(--superficie-2); border-color:transparent;}
.calendario[data-esteso] .calendario-numero{font-size:var(--fs-s); font-weight:600;}
.calendario[data-esteso] .calendario-puntini{display:none;}
.calendario[data-esteso] .calendario-eventi{display:flex; flex-direction:column; gap:2px; min-width:0;}
.calendario-evento{
  display:flex; align-items:center; gap:5px; min-width:0;
  font-size:var(--fs-3xs); font-weight:400; line-height:1.35; color:var(--testo-2);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.calendario-evento::before{content:""; width:6px; height:6px; border-radius:50%; flex:none; background:var(--neutro);}
.calendario-altri{font-size:var(--fs-3xs); font-weight:500; color:var(--testo-3);}
.calendario[data-esteso] .calendario-giorno[aria-pressed="true"] .calendario-evento{color:rgba(255,255,255,.85);}
.calendario[data-esteso] .calendario-giorno[aria-pressed="true"] .calendario-altri{color:rgba(255,255,255,.7);}

/* ----- periodo: dal … al … ----- */
/* Senza script (o al tocco) due date affiancate con una freccia; con il
   mouse un campo solo che apre il calendario a intervallo. */
.filtro-periodo{flex:0 1 250px;}
.periodo-campi{display:flex; align-items:center; gap:var(--space-micro-4);}
.periodo-campi .input{flex:1; min-width:0;}
.periodo-freccia{color:var(--testo-3); flex:none;}
.periodo-campo{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-5);
  text-align:left; cursor:pointer; font-variant-numeric:tabular-nums;
}
.periodo-campo[data-vuoto] .periodo-valore{color:var(--testo-3);}
.periodo-campo .icona{width:17px; height:17px; color:var(--testo-2); flex:none;}
.periodo-valore{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.calendario-periodo{width:auto;}
.calendario-periodo:popover-open{display:flex; gap:var(--space-micro-5);}
.calendario-mese{width:274px;}
/* Il periodo si sceglie con due clic su una griglia: giorni più grandi,
   bersagli più facili. */
.calendario-periodo{padding:var(--space-micro-7); transform-origin:top right;}
.calendario-periodo .calendario-mese{width:350px;}
.calendario-periodo .calendario-giorno{max-width:46px; font-size:var(--fs-body);}
.calendario-periodo .calendario-scorciatoie{width:160px;}
.calendario-scorciatoie{
  display:flex; flex-direction:column; gap:1px; width:148px; flex:none;
  padding-right:var(--space-micro-5); border-right:var(--border-width) solid var(--bordo);
}
.calendario-scorciatoia{text-align:left; width:100%;}
.calendario-suggerimento{margin:0; align-self:center; font-size:var(--fs-2xs); color:var(--testo-2);}
/* Nell'intervallo le celle si toccano: la fascia deve essere continua. */
.calendario-periodo .calendario-griglia{border-spacing:0 2px;}
.calendario-periodo td[data-dentro]{background:var(--superficie-2);}
.calendario-periodo td[data-inizio]{background:linear-gradient(to right, transparent 50%, var(--superficie-2) 50%);}
.calendario-periodo td[data-fine]{background:linear-gradient(to left, transparent 50%, var(--superficie-2) 50%);}
.calendario-periodo td[data-dentro]:first-child, .calendario-periodo td[data-fine]:first-child{border-radius:var(--radius-10) 0 0 var(--radius-10);}
.calendario-periodo td[data-dentro]:last-child, .calendario-periodo td[data-inizio]:last-child{border-radius:0 var(--radius-10) var(--radius-10) 0;}
/* Il giorno sotto il mouse durante la scelta: la fine possibile. */
.calendario-giorno[data-fine]:not([aria-pressed="true"]){background:var(--superficie); box-shadow:inset 0 0 0 1.5px var(--inchiostro);}

/* =====================================================================
   Modulo dei dati di fatturazione (pagina pubblica) e finestre
   ===================================================================== */

.pubblico{width:100%; padding:var(--space-medium-11) var(--space-micro-8);}
.pubblico-box{
  width:100%; max-width:680px; margin-inline:auto;
  background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-16); box-shadow:var(--ombra-m);
  padding:var(--space-medium-12);
  display:flex; flex-direction:column; gap:var(--space-micro-9);
}
.pubblico-box-stretto{max-width:480px;}
.pubblico-testa{display:flex; flex-direction:column; gap:var(--space-micro-3);}
.pubblico-marca{margin:0; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--testo-2);}
.pubblico-titolo{margin:0; font-size:var(--heading-h4); font-weight:600; letter-spacing:-0.02em; line-height:var(--line-height-heading);}
.pubblico-sub{margin:0; font-size:var(--fs-s); color:var(--testo-2); max-width:56ch;}
.pubblico-box .sezione{margin:0; box-shadow:none;}
.pubblico-box fieldset.sezione{min-width:0;}
.pubblico-box legend.sezione-titolo{padding:0; float:left; width:100%;}
.pubblico-box legend.sezione-titolo + *{clear:both;}

/* Il tipo di cliente: quattro scelte affiancate, come un interruttore. */
.scelta-tipo{display:flex; flex-wrap:wrap; gap:var(--space-micro-3); padding:var(--space-micro-2); background:var(--superficie-2); border-radius:var(--radius-12);}
/* Ogni voce larga quanto il suo nome, poi le voci di una riga si dividono lo
   spazio che avanza: con cinque tipi nessuna resta sola in fondo. */
.scelta-tipo-voce{position:relative; display:flex; flex:1 1 auto;}
.scelta-tipo-voce input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer;}
.scelta-tipo-voce span{
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--altezza-controllo); padding:var(--space-micro-2) var(--space-micro-4);
  border-radius:var(--radius-10); font-size:var(--fs-s); font-weight:500; color:var(--testo-2);
  transition:background-color var(--durata-hover) var(--curva), color var(--durata-hover) var(--curva), box-shadow var(--durata-hover) var(--curva);
}
.scelta-tipo-voce input:checked + span{background:var(--superficie); color:var(--inchiostro); box-shadow:var(--ombra-xs);}
.scelta-tipo-voce input:focus-visible + span{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:2px;}

.cerca-piva-riga{display:flex; gap:var(--space-micro-4);}
.cerca-piva-riga .input{flex:1; min-width:0;}
.cerca-esito{margin:var(--space-micro-4) 0 0; font-size:var(--fs-s); min-height:1.4em; color:var(--testo-2);}
.cerca-esito:empty{display:none;}
.cerca-esito[data-tono="ok"]{color:var(--ok);}
.cerca-esito[data-tono="attesa"]{color:var(--attesa);}
.cerca-esito[data-tono="allarme"]{color:var(--allarme);}

.input-maiuscolo{text-transform:uppercase;}
.input-maiuscolo::placeholder{text-transform:none;}

/* Un campo appena compilato dalla ricerca si accende un momento. */
@keyframes appena-compilato{from{box-shadow:0 0 0 3px var(--evidenza);} to{box-shadow:0 0 0 3px transparent;}}
.appena-compilato .input{animation:appena-compilato 1.4s var(--curva);}

.modulo-privacy{margin:0; font-size:var(--fs-2xs); color:var(--testo-2);}
.modulo-privacy a{color:inherit;}

.pubblico-riepilogo{margin:0; display:grid; gap:var(--space-micro-3); padding:var(--space-micro-6); background:var(--superficie-2); border-radius:var(--radius-12);}
.pubblico-riepilogo div{display:grid; grid-template-columns:minmax(0,11rem) 1fr; gap:var(--space-micro-4);}
.pubblico-riepilogo dt{font-size:var(--fs-2xs); color:var(--testo-2);}
.pubblico-riepilogo dd{margin:0; font-size:var(--fs-s); overflow-wrap:anywhere;}

@media (max-width: 600px){
  .pubblico{padding:var(--space-micro-6) var(--space-micro-4);}
  .pubblico-box{padding:var(--space-micro-8);}
  .pubblico-riepilogo div{grid-template-columns:1fr; gap:0;}
}

/* I passi del modulo: numeri in fila, quello attuale pieno, i fatti con la spunta. */
.passi ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-micro-3);}
.passi-voce{
  width:100%; display:flex; align-items:center; gap:var(--space-micro-3);
  padding:var(--space-micro-3) 0; border:0; border-top:3px solid var(--bordo); background:none;
  font:inherit; font-size:var(--fs-2xs); color:var(--testo-3); text-align:left; cursor:default;
  transition:border-color var(--durata-hover) var(--curva), color var(--durata-hover) var(--curva);
}
.passi-numero{
  flex:none; display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--superficie-2); font-weight:600; font-size:var(--fs-3xs);
}
.passi-voce[aria-current="step"]{border-top-color:var(--inchiostro); color:var(--inchiostro); font-weight:600;}
.passi-voce[aria-current="step"] .passi-numero{background:var(--inchiostro); color:var(--superficie);}
[data-fatto] > .passi-voce{border-top-color:var(--accento-scuro); color:var(--testo-2); cursor:pointer;}
[data-fatto] > .passi-voce .passi-numero{background:var(--evidenza); color:var(--inchiostro);}
.passi-voce:focus-visible{outline:var(--focus-width) solid var(--accento-scuro); outline-offset:2px;}

.passo{display:flex; flex-direction:column; gap:var(--space-micro-8);}
.passo[hidden]{display:none;}
.passo-titolo{margin:0; font-size:var(--heading-h5); font-weight:600; letter-spacing:-0.015em;}
.passo-titolo:focus{outline:none;}
.passo-conta{color:var(--testo-2); font-weight:500;}
.passo-azioni{display:flex; justify-content:space-between; align-items:center; gap:var(--space-micro-4);}
.passo-azioni[hidden]{display:none;}
.modulo-conferma{display:flex; flex-direction:column; gap:var(--space-micro-6);}
.modulo-conferma[hidden]{display:none;}
.a-passi .modulo-conferma .passo-azioni{margin-top:0;}

/* Gli altri contatti: una scheda per contatto. */
.contatti-aggiuntivi{display:flex; flex-direction:column; gap:var(--space-micro-6); align-items:flex-start;}
.contatti-righe{display:flex; flex-direction:column; gap:var(--space-micro-6); width:100%;}
.contatto{margin:0; padding:var(--space-micro-6); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12); min-width:0; width:100%;}
.contatto-titolo{padding:0; font-size:var(--fs-2xs); font-weight:600; color:var(--testo-2); margin-bottom:var(--space-micro-4);}
.contatto-togli{margin-top:var(--space-micro-4);}

.riepilogo{display:flex; flex-direction:column; gap:var(--space-micro-8);}
.riepilogo-testa{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-4); margin-bottom:var(--space-micro-4);}
.riepilogo-testa .sezione-titolo{margin:0;}
.pubblico-riepilogo dd{white-space:pre-line;}

@media (max-width: 600px){
  .passi-nome{display:none;}
  .passi-voce[aria-current="step"] .passi-nome{display:inline;}
  .passi ol{grid-template-columns:auto auto auto;}
}

/* La casella del consenso: il testo accanto, leggibile per intero. */
.consenso{display:flex; gap:var(--space-micro-4); align-items:flex-start; font-size:var(--fs-s); line-height:1.5; cursor:pointer;}
.consenso input{flex:none; width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--inchiostro);}
/* Il campo che vedono solo i programmi automatici. */
[data-iscrizione-campi]{margin-top:var(--space-micro-6);}
.campo-trappola{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.elenco-puntato{margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:var(--space-micro-4); font-size:var(--fs-s); color:var(--testo-2);}
.pannello-stretto{max-width:640px;}
.collegamento-riga-stretta{max-width:520px; margin:var(--space-micro-6) auto 0;}

/* ----- dati del cliente nella scheda ----- */
.collegamento-riga{display:flex; gap:var(--space-micro-3);}
/* Un campo con il suo pulsante accanto (per esempio «Copia»). */
.input-con-pulsante{display:flex; gap:var(--space-micro-3);}
.input-con-pulsante .input{flex:1; min-width:0;}
.collegamento-riga .input{flex:1; min-width:0; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--testo-2);}
.pannello-azioni{display:flex; flex-wrap:wrap; gap:var(--space-micro-3); margin-top:var(--space-micro-6);}
.pannello-azioni form{display:contents;}
.cambiamenti{margin:var(--space-micro-5) 0 0; display:grid; gap:var(--space-micro-3); font-size:var(--fs-s);}
.cambiamenti div{display:grid; gap:2px;}
.cambiamenti dt{font-size:var(--fs-2xs); color:var(--testo-2);}
.cambiamenti dd{margin:0; overflow-wrap:anywhere;}
.cambiamenti del{color:var(--testo-3);}
.cambiamenti ins{text-decoration:none; font-weight:500;}

/* ----- finestre (dialog) ----- */
.finestra{
  width:min(560px, calc(100vw - 2 * var(--space-micro-6))); max-height:calc(100dvh - 2 * var(--space-micro-8));
  padding:0; border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  background:var(--superficie); color:var(--inchiostro); box-shadow:var(--ombra-l);
}
.finestra::backdrop{background:rgba(24,32,33,.32);}
.finestra[open]{display:flex; flex-direction:column;}
.finestra-testa{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-5); padding:var(--space-micro-8) var(--space-micro-8) 0;}
.finestra-titolo{margin:0; font-size:var(--heading-h6); font-weight:600;}
.finestra-corpo{padding:var(--space-micro-8); overflow:auto; display:flex; flex-direction:column; gap:var(--space-micro-6);}
.finestra-piede{display:flex; justify-content:flex-end; gap:var(--space-micro-3); padding:0 var(--space-micro-8) var(--space-micro-8);}
.finestra textarea.input{min-height:12rem; resize:vertical; line-height:1.5;}
/* La conferma: stretta, il messaggio in chiaro, il pulsante dice cosa fa. */
.finestra-conferma{width:min(440px, calc(100vw - 2 * var(--space-micro-6)));}
.finestra-conferma .finestra-corpo{padding-bottom:var(--space-micro-7);}
.finestra-conferma-testo{margin:0; font-size:var(--fs-prosa); line-height:1.55; color:var(--inchiostro); overflow-wrap:anywhere;}
.btn-pericolo{background:var(--allarme); color:#fff; border-color:var(--allarme); box-shadow:var(--luce), var(--ombra-xs);}
@media (prefers-reduced-motion: no-preference){
  .finestra[open]{animation:finestra-entra .18s var(--curva);}
  @keyframes finestra-entra{from{opacity:0; transform:translateY(6px) scale(.99);}}
}

/* =====================================================================
   Stati di interazione
   Un posto solo per hover, pressione e passaggi. Gli hover valgono solo
   dove c'è un puntatore che sorvola: su un telefono resterebbero accesi
   dopo il tocco. Sul touch risponde lo stato premuto.
   ===================================================================== */

/* Ogni elemento che risponde al mouse passa da uno stato all'altro con la
   stessa durata e la stessa curva: 200 ms che rallentano all'arrivo. La
   regola sugli elementi nativi prende anche i collegamenti e i controlli
   nati dopo; quella sulle classi i contenitori che si illuminano. */
a, button, summary, input, select, textarea, label,
.btn, .btn-icona, .menu-voce, .menu-voce .icona, .recente, .profilo-scheda,
.scheda-filtro, .pag-voce, .card-riga, .numero, .scheda-doc, .lista-riga,
.tabella td, .messaggio-testa, .filtri-riassunto, .input, .cerca-campo,
.azione-testo, .pannello-link, .btn-copia, .cella-link, .briciole a,
.cerca-tutti, .cerca-annulla, .menu-crea-voce, .calendario-giorno, .calendario-azione, .data-apri, .periodo-campo, .selezione-campo, .apri-menu, .grafico-dati summary,
.segno-tipo, .azione-btn, .azione-input, .strumenti a, .strumenti button{
  transition:background-color var(--durata-hover) var(--curva),
             color var(--durata-hover) var(--curva),
             border-color var(--durata-hover) var(--curva),
             box-shadow var(--durata-hover) var(--curva),
             opacity var(--durata-hover) var(--curva),
             transform var(--durata-hover) var(--curva);
}
.pannello-link .icona, .numero-freccia, .btn .ruota, .scheda-doc-sigla, .riga-freccia{
  transition:transform var(--durata-hover) var(--curva), color var(--durata-hover) var(--curva);
}
/* Nella ricerca la voce attiva segue le frecce: deve essere immediata. */
.cerca-voce{transition:none;}

/* Premuto: una leggera pressione sotto il dito o il clic. */
.btn:active, .btn-icona:active, .btn-copia:active{transform:scale(.97);}

@media (hover:hover) and (pointer:fine){
  .btn-primario:hover{background:var(--inchiostro-2); border-color:var(--inchiostro-2);}
  .btn-pericolo:hover{background:#7f2222; border-color:#7f2222;}
  /* L'icona «+» ruota di un quarto: è il pattern del bottone con l'icona
     che si muove (01 §13), tenuto sotto i 200 ms. */
  .btn:hover .ruota{transform:rotate(90deg);}
  .btn-secondario:hover{background:var(--superficie-2); border-color:var(--bordo-controllo);}
  .btn-quieto:hover, .btn-icona:hover{background:var(--velo-hover); color:var(--inchiostro);}
  .btn-icona[data-pericolo]:hover{background:var(--allarme-bg); color:var(--allarme);}
  .btn-copia:hover{background:var(--superficie-2); color:var(--inchiostro); border-color:var(--bordo-controllo);}

  .input:hover, .cerca-campo:hover{border-color:var(--inchiostro);}
  .input:focus-visible:hover, .cerca-campo:focus-within:hover{border-color:var(--accento-scuro);}

  .menu-voce:not([aria-current="page"]):hover, .recente:hover{background:var(--velo-hover); color:var(--inchiostro);}
  .menu-voce:hover .icona{color:var(--inchiostro);}
  .profilo-scheda:hover{border-color:var(--bordo-forte); box-shadow:var(--ombra-s);}
  .apri-menu:hover{background:var(--velo-hover);}

  /* Schede che portano altrove: bordo più deciso, ombra, freccia che
     accenna la direzione. Mai uno spostamento della scheda intera. */
  a.numero:hover, .scheda-doc:hover{border-color:var(--bordo-forte); box-shadow:var(--ombra-m);}
  a.numero:hover .numero-freccia{transform:translate(2px,-2px); color:var(--inchiostro);}
  .scheda-doc:hover .scheda-doc-sigla{transform:translateY(-2px);}
  a.card-riga:hover{border-color:var(--bordo-forte); box-shadow:var(--ombra-m);}

  /* La riga sotto il mouse diventa un tassello: sparisce la sua linea e
     quella della riga dopo, che altrimenti la taglierebbero. */
  a.lista-riga:hover{background:var(--superficie-2); border-top-color:transparent;}
  a.lista-riga:hover + .lista-riga{border-top-color:transparent;}
  .tabella tr[data-riga-link]:hover td{background:var(--superficie-2); border-top-color:transparent;}
  .tabella tr[data-riga-link]:hover + tr td{border-top-color:transparent;}
  .tabella tr[data-riga-link]:hover .cella-link{text-decoration:underline; text-decoration-color:var(--bordo-controllo);}
  .tabella tr[data-riga-link]:hover .riga-azioni .btn-icona{color:var(--testo-2);}
  .tabella tr[data-riga-link]:hover .riga-freccia{color:var(--inchiostro); transform:translateX(3px);}
  .tabella tr[data-riga-link]:hover .segno-tipo{box-shadow:inset 0 0 0 1px rgba(34,47,48,.08), var(--ombra-xs);}
  .cella-link:hover, .cella-primaria a:hover{text-decoration:underline;}
  .azione-testo:hover{background:var(--velo-hover); color:var(--inchiostro);}

  .pannello-link:hover{color:var(--inchiostro); background:var(--velo-hover);}
  .pannello-link:hover .icona{transform:translateX(2px);}
  .briciole a:hover{color:var(--inchiostro); text-decoration:underline;}

  .pag-voce:not([aria-current="page"]):hover{background:var(--superficie-2); border-color:var(--bordo-forte);}
  .scheda-filtro:not([aria-current="page"]):hover{color:var(--inchiostro); background:var(--velo-hover);}
  .messaggio-testa:hover{background:var(--superficie-2);}
  .filtri-riassunto:hover{background:var(--superficie-2);}
  .riga-togli:hover{background:var(--allarme-bg); color:var(--allarme);}
  .riga-spenta:hover{opacity:1;}

  .cerca-tutti:hover, .cerca-annulla:hover{background:var(--velo-hover);}
  .menu-crea-voce:hover{background:var(--superficie-2);}
  .calendario-giorno:not([aria-pressed="true"]):not(:disabled):hover{background:var(--superficie-2);}
  .calendario-azione:hover, .data-apri:hover{background:var(--velo-hover); color:var(--inchiostro);}
  .selezione-campo:hover{border-color:var(--inchiostro);}
  .grafico-dati summary:hover{background:var(--velo-hover); color:var(--inchiostro);}
}

/* Sul touch la risposta è il fondo che si accende mentre il dito preme. */
@media (hover:none){
  a.numero:active, .scheda-doc:active, a.card-riga:active,
  a.lista-riga:active, .menu-voce:active, .recente:active, .profilo-scheda:active{background:var(--superficie-2);}
}

/* Chi arriva col tasto di tabulazione non aspetta per sapere dov'è. */
:focus-visible{transition:none;}

/* =====================================================================
   Responsive — tutto in fondo, così sovrascrive le regole di base
   ===================================================================== */

@media (max-width:1279px){
  .filtro{flex:0 1 150px;}
  .numeri{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ----- sopra i 992px: il pannello staccato ----- */
@media (min-width:992px){
  body{background:var(--fondo-app);}
  .guscio{height:100vh; height:100dvh; min-height:0; overflow:hidden;}
  .fianco{position:relative; height:100%;}
  /* Il contenuto scorre dentro il pannello: menu e bordi restano fermi. */
  .corpo{
    height:calc(100dvh - 2 * var(--stacco));
    margin:var(--stacco) var(--stacco) var(--stacco) 0;
    background:var(--fondo);
    border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
    box-shadow:var(--ombra-s);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .avviso{margin-block:var(--space-micro-9) 0;}

  /* La barra unica, su una riga: a sinistra briciole, titolo e
     sottotitolo della pagina; a destra la ricerca e i pulsanti, con
     l'azione principale sul bordo.
     I fianchi seguono la colonna del contenuto anche oltre la larghezza
     massima, così titolo e schede partono dallo stesso bordo.
     Se lo spazio non basta, i pulsanti vanno a capo sotto: mai uno
     scorrimento orizzontale. */
  .testata{
    position:sticky; top:0; z-index:40; flex:none;
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:var(--space-micro-8); row-gap:var(--space-micro-6);
    min-height:76px;
    padding:var(--space-micro-7) max(var(--pagina-fianchi), calc((100% - var(--container-max)) / 2 + var(--pagina-fianchi)));
    background:rgba(247,248,246,.88);
    -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
    border-bottom:var(--border-width) solid transparent;
    transition:border-color var(--durata-pannello) var(--curva);
  }
  .testata[data-staccata]{border-bottom-color:var(--bordo);}
  .testata-barra, .testata .pagina-testa{display:contents;}
  /* Nel DOM la ricerca viene prima del titolo; a schermo va dopo. Il
     titolo non riceve il fuoco, quindi l'ordine di Tab (ricerca, poi
     pulsanti) resta quello che si vede da sinistra a destra. */
  .testata .intestazione{order:1; flex:1 1 320px; gap:2px;}
  .testata .cerca{order:2; flex:0 1 300px; width:auto; margin:0 0 0 auto;}
  .testata .pagina-azioni{order:3; flex:none; gap:var(--space-micro-5);}
  .testata .sottotitolo{font-size:var(--fs-s);}
  .pagina{padding-top:var(--space-micro-10);}
  /* Chi avanza con Tab non deve finire con il campo sotto la barra in alto,
     l'intestazione fissa o la barra dei pulsanti (WCAG 2.4.11). */
  .corpo{scroll-padding-top:120px; scroll-padding-bottom:96px;}

  /* ----- menu ridotto alle icone ----- */
  html[data-fianco="stretto"] .guscio{grid-template-columns:var(--fianco-stretto) minmax(0,1fr);}
  html[data-fianco="stretto"] .fianco{overflow:visible; align-items:center; padding-inline:var(--space-micro-5);}
  html[data-fianco="stretto"] .fianco-testa{flex-direction:column; padding:0; gap:var(--space-micro-5);}
  html[data-fianco="stretto"] .marchio-testi,
  html[data-fianco="stretto"] .marchio-testo,
  html[data-fianco="stretto"] .menu-titolo,
  html[data-fianco="stretto"] .recenti,
  html[data-fianco="stretto"] .profilo-testo{display:none;}
  html[data-fianco="stretto"] .menu{overflow:visible; margin:0; padding:0; gap:var(--space-micro-8); align-items:center;}
  html[data-fianco="stretto"] .menu-gruppo{align-items:center;}
  html[data-fianco="stretto"] .menu-voce{width:44px; min-height:40px; justify-content:center; padding:0;}
  html[data-fianco="stretto"] .menu-voce-testo{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  /* Il contatore diventa un pallino: il numero è nel suggerimento. */
  html[data-fianco="stretto"] .contatore{position:absolute; top:5px; right:6px; min-width:0; width:8px; height:8px; padding:0; font-size:0; box-shadow:0 0 0 2px var(--fondo-app);}
  html[data-fianco="stretto"] .contatore[data-tono="info"]{background:var(--info);}
  html[data-fianco="stretto"] .contatore[data-tono="attesa"]{background:#c98a1b;}
  html[data-fianco="stretto"] .contatore[data-tono="allarme"]{background:var(--allarme);}
  html[data-fianco="stretto"] .contatore[data-tono="neutro"]{background:var(--neutro);}
  html[data-fianco="stretto"] .fianco-piede{flex-direction:column;}
  html[data-fianco="stretto"] .profilo-scheda{flex:none; padding:var(--space-micro-2); border-radius:50%;}
  /* Il nome della voce compare accanto all'icona, con il mouse o con Tab. */
  html[data-fianco="stretto"] .menu-voce::after{
    content:attr(data-suggerimento);
    position:absolute; left:calc(100% + 10px); top:50%; z-index:60;
    transform:translate(-4px,-50%); opacity:0; pointer-events:none;
    padding:var(--space-micro-3) var(--space-micro-5);
    background:var(--inchiostro); color:#fff; border-radius:var(--radius-8);
    font-size:var(--fs-3xs); font-weight:500; white-space:nowrap; box-shadow:var(--ombra-m);
    transition:opacity var(--durata-hover) var(--curva), transform var(--durata-hover) var(--curva);
  }
  html[data-fianco="stretto"] .menu-voce:hover::after,
  html[data-fianco="stretto"] .menu-voce:focus-visible::after{opacity:1; transform:translate(0,-50%);}
}

/* ----- sotto i 992px: cassetto ----- */
@media (max-width:991px){
  :root{--barra-alta:60px;}

  .guscio{grid-template-columns:minmax(0,1fr);}
  .riduci-fianco{display:none;}

  /* Il cassetto: un popover in primo piano, largo quanto lo schermo, con
     dentro uno scorrimento orizzontale a due fermate — aperto e chiuso.
     Si chiude trascinandolo, toccando fuori, con Esc o con la ✕. */
  .cassetto{
    --cassetto-largo:min(304px, 86vw);
    --velo:0;
    display:block;
    position:fixed; inset:0; width:auto; height:auto;
    margin:0; padding:0; border:0; background:transparent; overflow:visible;
  }
  .cassetto:not(:popover-open){display:none;}
  .cassetto::backdrop{background:rgb(34,47,48); opacity:calc(var(--velo) * .45);}

  .cassetto-scorri{
    display:grid; height:100%;
    grid-template-columns:var(--cassetto-largo) 100%;
    overflow-x:scroll; overflow-y:hidden; overscroll-behavior:none;
    scrollbar-width:none; scroll-snap-type:x mandatory;
  }
  .cassetto-scorri::-webkit-scrollbar{display:none;}
  .cassetto-scorri::after{content:""; scroll-snap-align:end; scroll-initial-target:nearest;}

  .fianco{
    position:relative; top:auto; align-self:stretch;
    height:100svh; overflow-y:auto; overscroll-behavior:contain;
    scroll-snap-align:start; scroll-snap-stop:always;
    padding-top:max(var(--space-micro-7), env(safe-area-inset-top));
    padding-bottom:max(var(--space-micro-7), env(safe-area-inset-bottom));
    padding-left:max(var(--space-micro-7), env(safe-area-inset-left));
    padding-right:var(--space-micro-7);
    box-shadow:var(--ombra-l);
    border-radius:0 var(--radius-16) var(--radius-16) 0;
  }
  /* Nel cassetto scorre tutta la colonna, non solo il menu: su un telefono
     basso il profilo in fondo deve restare raggiungibile. */
  .fianco .menu{flex:none; overflow:visible;}
  .chiudi-cassetto{display:inline-flex;}
  .menu-voce, .recente{min-height:var(--touch-target); font-size:var(--fs-body);}

  .apri-menu{
    display:inline-flex; align-items:center; gap:var(--space-micro-4);
    height:var(--touch-target); padding:0 var(--space-micro-6) 0 var(--space-micro-5);
    border:0; border-radius:var(--radius-10); background:transparent;
    font:inherit; font-size:var(--fs-body); font-weight:500; color:var(--inchiostro); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .apri-menu .icona{width:20px; height:20px;}
  .marchio-barra{display:flex;}
  .barra-azione{display:inline-flex; padding-inline:var(--space-micro-7); margin-left:auto;}
  .apri-cerca + .barra-azione{margin-left:0;}
  .cerca{width:auto; flex:1 1 200px; max-width:360px;}

  .corpo{--pagina-fianchi:var(--space-micro-8);}
  .pagina{padding-top:var(--space-micro-9);}
  .scheda{grid-template-columns:1fr;}
  /* Al telefono, nelle schede di clienti, siti e contratti, contano prima
     contatti, scadenze e numeri, poi i dati tecnici. Nelle altre (intervento,
     preventivo, fattura, richiesta) il contenuto viene prima: la colonna
     laterale porta anche «Elimina», che non deve stare in cima. */
  .scheda-laterale[data-prima-al-telefono]{order:-1;}
  /* Lì però «Elimina» va in fondo a tutto: le due colonne si sciolgono
     (display: contents) e il pannello prende l'ultimo posto. */
  .scheda:has(> [data-prima-al-telefono] > .pannello-elimina){display:flex; flex-direction:column; align-items:stretch;}
  .scheda:has(> [data-prima-al-telefono] > .pannello-elimina) > .scheda-colonna{display:contents;}
  .scheda:has(> [data-prima-al-telefono] > .pannello-elimina) > [data-prima-al-telefono] > *{order:-1;}
  .scheda:has(> [data-prima-al-telefono] > .pannello-elimina) > [data-prima-al-telefono] > .pannello-elimina{order:99;}
  /* Anche per i pulsanti che la barra in alto già offre (+ Intervento,
     + Richiesta): due pulsanti uguali nella stessa schermata sembrano
     due cose diverse. */
  .nascondi-991{display:none !important;}
  .cruscotto-basso{grid-template-columns:1fr;}
  .avviso{margin-block:var(--space-micro-8) 0;}
  .cerca-espandi{display:none;}
  /* In una pagina di modifica l'azione è salvare, e la barra in fondo la
     tiene a vista: «+ Intervento» in alto sarebbe un secondo pulsante pieno
     che porta via dal modulo a metà. */
  body:has(.modulo-largo > .modulo-piede) .barra-azione{display:none;}
  /* Sotto i 992px l'azione principale è «+ Intervento» in barra: «Crea»
     scende a secondario, perché una schermata ha un solo pulsante pieno. */
  .crea-pulsante{background:var(--superficie); color:var(--inchiostro); border-color:var(--bordo-forte); box-shadow:var(--ombra-xs);}
}

/* ----- telefono ----- */
@media (max-width:767px){
  .cerca-tasti{display:none;}
  .apri-cerca{display:inline-flex; margin-left:auto;}

  /* La ricerca, chiusa, è solo la lente. Aperta, occupa lo schermo. */
  .cerca{display:none;}
  .cerca[data-aperta] .cerca-riga{padding:var(--space-micro-5) var(--space-micro-5) var(--space-micro-5) var(--space-micro-7);}
  .cerca-input{font-size:var(--fs-prosa);}
  .cerca[data-aperta] .cerca-testa{display:none;}
  .cerca[data-aperta] .cerca-risultati{columns:auto; padding:var(--space-micro-4);}
  .cerca[data-aperta] .cerca-pannello{background:var(--superficie);}
  .cerca-suggerimento{display:none;}
  .cerca-piede:not(:has(.cerca-tutti)){display:none;}
  /* Al telefono non c'è Invio da suggerire, e il titolo ha bisogno di
     spazio: va su due righe invece di troncarsi dopo tre parole. */
  .cerca-invio{display:none;}
  .cerca-voce{align-items:flex-start; padding-block:var(--space-micro-5);}
  .cerca-voce .badge{margin-top:2px;}
  .cerca-titolo{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3;}
  .cerca-piede{padding-bottom:max(var(--space-micro-4), env(safe-area-inset-bottom));}

  .tabella-card{display:none;}
  .card-lista{display:flex;}
  .pannello .card-lista{gap:0;}
  .pannello .card-lista .card-riga{border:0; border-top:var(--border-width) solid var(--bordo); border-radius:0; box-shadow:none; padding-inline:0;}
  .pannello .card-lista .card-riga:first-child{border-top:0; padding-top:0;}
  .pannello .card-lista .riga-compatta{padding-block:var(--space-micro-7);}
  .pannello .card-lista .riga-compatta:first-child{padding-top:var(--space-micro-3);}

  /* In colonna il flex-basis vale per l'altezza, non per la larghezza:
     senza questo reset l'intestazione si porta dietro 280px di vuoto. */
  .pagina-testa{
    position:static; flex-direction:column; align-items:stretch;
    padding-bottom:0; border-bottom:0;
  }
  .pagina-testa .intestazione{flex:0 0 auto;}
  .pagina-azioni{flex-direction:column; align-items:stretch;}
  .pagina-azioni .btn, .pagina-azioni .crea{width:100%;}

  .filtro{flex:1 1 calc(50% - var(--space-micro-6));}
  .filtro-cerca, .filtri-azioni{flex:1 1 100%; margin-left:0;}
  .filtri-azioni .btn{width:100%;}

  .filtri-riassunto{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-5);
    min-height:var(--touch-target); padding:var(--space-micro-5) var(--space-micro-8);
    background:var(--superficie); border:var(--border-width) solid var(--bordo);
    border-radius:var(--radius-12); font-size:var(--fs-body); font-weight:500;
    cursor:pointer; list-style:none;
  }
  .filtri-riassunto::-webkit-details-marker{display:none;}
  .filtri-riassunto::after{content:"▾"; color:var(--testo-2); transition:transform var(--durata-pannello) var(--curva);}
  .filtri-guscio[open] .filtri-riassunto{border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0;}
  .filtri-guscio[open] .filtri-riassunto::after{transform:rotate(180deg);}
  .filtri-guscio[open] .filtri{border-top-left-radius:0; border-top-right-radius:0;}

  .campi-griglia{grid-template-columns:1fr;}
  .dati-griglia{grid-template-columns:1fr;}
  .sezione{padding:var(--space-micro-8);}
  .pannello{padding:var(--space-micro-8);}
  .pannello-tabella{padding:var(--space-micro-8);}
  .pannello-tabella .pannello-testa{padding-inline:0;}
  .modulo-piede{flex-direction:column-reverse; align-items:stretch;}
  .modulo-piede .btn{width:100%; margin-left:0;}
  /* La barra fissa invece resta su una riga: impilati, due pulsanti a
     tutta larghezza occuperebbero un quarto dello schermo per sempre.
     «Annulla» si stringe, l'azione principale prende il resto. */
  .modulo-largo > .modulo-piede{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--space-micro-4);}
  .modulo-largo > .modulo-piede .btn{width:auto; flex:none;}
  .modulo-largo > .modulo-piede .btn-quieto{padding-inline:var(--space-micro-5);}
  .modulo-largo > .modulo-piede .btn-primario{flex:1 1 auto; margin-left:auto;}
  /* Le email hanno cinque azioni: fisse occuperebbero mezzo schermo. Qui la
     barra sta in fondo, dopo l'anteprima, con i pulsanti a tutta larghezza. */
  .modulo-largo > .email-piede{position:static; margin-inline:0; padding-inline:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; flex-direction:column-reverse; align-items:stretch;}
  .modulo-largo > .email-piede .btn, .email-piede-destra{width:100%;}
  .email-piede-destra{flex-direction:column-reverse; align-items:stretch; margin-left:0;}
  .modulo-largo > .email-piede[data-staccata]{border-top-color:transparent; box-shadow:none;}
  html{scroll-padding-top:calc(var(--barra-alta) + 16px); scroll-padding-bottom:96px;}
  .elenco-piede{flex-direction:column; align-items:stretch;}

  /* La riga in elenco si impila: titolo e meta sopra, stato e numeri sotto. */
  .lista-riga{flex-direction:column; align-items:stretch; gap:var(--space-micro-4);}
  .lista-riga-coda{justify-content:flex-start;}
  /* Nei risultati di ricerca il segno resta accanto al testo. */
  .risultati-gruppo .lista-riga{flex-direction:row; align-items:center; flex-wrap:wrap; column-gap:var(--space-micro-6);}
  .risultati-gruppo .lista-riga-testa{flex:1 1 60%;}

  /* I link dentro una frase non possono essere alti 44px senza sfondare la
     riga: il padding verticale allarga l'area da toccare senza spostare niente. */
  .briciole a, .meta-riga a, .dato-val a, .lista-riga-meta a{padding-block:var(--space-micro-7); margin-block:calc(-1 * var(--space-micro-7));}

  .riga-numeri{grid-template-columns:1fr 1fr;}
  .riga-numeri > .campo:last-child{grid-column:1 / -1;}
  .riga-togli{justify-self:stretch;}
  .righe-piede{flex-direction:column-reverse; align-items:stretch;}
  .righe-piede .btn{width:100%;}
  .righe-totale{text-align:left;}
  .scelte-multiple{grid-template-columns:1fr;}

  .messaggio-bolla{max-width:94%;}
  .lavoro{padding:var(--space-micro-8);}
  .lavoro-alto{flex-direction:column; gap:var(--space-micro-5);}
  .schede-filtro{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; width:auto;}
  .schede-filtro::-webkit-scrollbar{display:none;}
  .scheda-filtro{white-space:nowrap;}
  .scelte-metodo{grid-template-columns:1fr;}
  .codici-recupero{grid-template-columns:1fr;}
  .area-piede{padding-inline:var(--space-micro-8);}

  /* Cruscotto al telefono: prima «Da fare», poi le scadenze. */
  .cruscotto{gap:var(--space-micro-8);}
  .crm-da-fare{order:-2;}
  .crm-urgenti{order:-1;}
  .numeri{gap:var(--space-micro-5);}
  .numero-dentro{padding:var(--space-micro-6); gap:var(--space-micro-5);}
  .numero-valore{font-size:22px;}
  .numero-testa{font-size:var(--fs-2xs);}
  .numero-segno, .numero .tendenza{display:none;}

  /* I preventivi da seguire scorrono di lato: non sono il contenuto
     principale, e la scheda successiva tagliata dice che ce ne sono altre. */
  .schede-fila{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pagina-fianchi)); padding:0 var(--pagina-fianchi) var(--space-micro-3);
    scroll-padding-inline:var(--pagina-fianchi); scrollbar-width:none;
  }
  .schede-fila::-webkit-scrollbar{display:none;}
  .schede-fila > li{flex:0 0 78%; scroll-snap-align:start;}
}

@media (max-width:478px){
  .titolo{font-size:23px;}
  .filtro{flex:1 1 100%;}
  .riepilogo-griglia{grid-template-columns:1fr;}
  .credenziale-dati{grid-template-columns:1fr; gap:var(--space-micro-1) 0;}
  .credenziale-dati dd{margin-bottom:var(--space-micro-5);}
}

/* Sotto i 400px lo stato scende sotto al testo: accanto, toglierebbe al
   nome del dominio lo spazio per stare su una riga. */
@media (max-width:399px){
  .riga-compatta{flex-wrap:wrap;}
  .riga-compatta-testo{flex:1 1 calc(100% - 48px);}
  .riga-compatta-coda{flex-direction:row; align-items:center; width:100%; padding-left:calc(32px + var(--space-micro-6)); gap:var(--space-micro-5);}
}

/* Sotto i 360px il segno del marchio lascia posto: «Menu», la lente e
   l'azione principale devono starci senza schiacciarsi. */
@media (max-width:359px){
  .marchio-barra{display:none;}
  .barra-azione{padding-inline:var(--space-micro-6);}
}

/* ----- movimento ridotto ----- */
/* Ridotto, non tolto: i cambi di colore restano (non muovono niente), gli
   spostamenti e le entrate spariscono. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important; scroll-behavior:auto !important;}
  .btn:active, .btn-icona:active, .btn-copia:active{transform:none;}
  .btn:hover .ruota, a.numero:hover .numero-freccia, .pannello-link:hover .icona,
  .scheda-doc:hover .scheda-doc-sigla, .tabella tr:hover .riga-freccia{transform:none !important;}
}

/* Il velo del cassetto segue lo scorrimento dove il browser lo sa fare da
   solo; altrove lo scrive lo script. Dentro @supports, o i browser che non
   lo capiscono applicherebbero il primo fotogramma e il velo resterebbe
   sempre scuro. */
@supports (animation-timeline: scroll()){
  @property --velo{syntax:"<number>"; inherits:true; initial-value:0;}
  @media (max-width:991px){
    .cassetto{timeline-scope:--cassetto-scorre; animation:velo-cassetto linear both; animation-timeline:--cassetto-scorre;}
    .cassetto-scorri{scroll-timeline:--cassetto-scorre x;}
  }
  @keyframes velo-cassetto{from{--velo:1;} to{--velo:0;}}
}

/* ----- stampa ----- */
@media print{
  .fianco, .testata-barra, .pagina-azioni, .modulo-piede, .campo-aiuto, .avviso{display:none !important;}
  body{background:#fff;}
  .guscio{display:block; height:auto; overflow:visible;}
  .corpo{height:auto; margin:0; border:0; box-shadow:none; overflow:visible;}
  .codici-recupero{grid-template-columns:repeat(2,1fr);}
}

/* «Crea» secondario sotto i 992px risponde al mouse come un secondario. */
@media (hover:hover) and (pointer:fine) and (max-width:991px){
  .crea-pulsante:hover{background:var(--superficie-2); border-color:var(--bordo-controllo);}
}

/* =====================================================================
   Documenti legali: /privacy-policy e /cookie-policy (docs/21).
   Il testo lo impagina legal.css del modulo Privacy; qui solo il foglio
   bianco sul fondo dell'app, con la stessa misura di lettura.
   ===================================================================== */
.schermo-legale{background:var(--fondo-app); min-height:100vh; padding:var(--space-medium-12) 16px;}
.legale{max-width:calc(76ch + 2 * var(--space-medium-12)); margin:0 auto; background:var(--superficie);
  border-radius:var(--radius-16); box-shadow:var(--ombra-s); padding:var(--space-medium-12);}
.legale-titolo{max-width:76ch; margin:0 auto var(--space-micro-10); font-size:var(--heading-h3);
  line-height:var(--line-height-heading); color:var(--inchiostro); text-wrap:balance;}
.legale-piede{max-width:76ch; margin:0 auto; padding-top:var(--space-micro-10); border-top:1px solid var(--bordo);
  font-size:var(--fs-s); color:var(--testo-2);}
.legale-piede a{color:var(--accento-scuro);}
@media (max-width:767px){
  .schermo-legale{padding:0;}
  .legale{border-radius:0; box-shadow:none; padding:var(--space-medium-11) 16px;}
}

/* =====================================================================
   Componenti comuni (Claude code operate/modelli-componenti, docs/22):
   leggono solo variabili --comp-*, legate qui ai token del CRM.
   ===================================================================== */
:root{
  --comp-accento:var(--pieno); --comp-accento-testo:var(--su-pieno);
  --comp-superficie:var(--superficie); --comp-superficie-2:var(--superficie-2);
  --comp-testo:var(--inchiostro); --comp-testo-2:var(--testo-2);
  --comp-bordo:var(--bordo); --comp-bordo-campo:var(--bordo-controllo); --comp-focus:var(--accento-scuro);
  --comp-errore:var(--allarme); --comp-errore-sfondo:var(--allarme-bg);
  --comp-raggio:var(--radius-10); --comp-raggio-piccolo:var(--radius-8); --comp-raggio-grande:var(--radius-16);
  --comp-carattere:var(--font);
}

/* =====================================================================
   Moduli DC (docs/21): le pagine dei moduli di dc-custom-tools dentro il
   CRM. Il loro stile (dc-ui.css, tutto sotto .dc-ui) prende colori, raggi
   e carattere da queste variabili, legate ai token del CRM.
   ===================================================================== */
.modulo-dc{
  --dc-ui-accent:var(--accento-scuro); --dc-ui-accent-dark:var(--inchiostro);
  --dc-ui-text:var(--inchiostro); --dc-ui-muted:var(--testo-2); --dc-ui-faint:var(--testo-2);
  --dc-ui-border:var(--bordo); --dc-ui-border-soft:var(--bordo);
  --dc-ui-surface:var(--superficie); --dc-ui-surface-2:var(--fondo);
  --dc-ui-ok:var(--ok); --dc-ui-ok-soft:var(--ok-bg);
  --dc-ui-warn:var(--attesa); --dc-ui-warn-mark:var(--attesa); --dc-ui-warn-soft:var(--attesa-bg);
  --dc-ui-bad:var(--allarme); --dc-ui-bad-soft:var(--allarme-bg);
  --dc-ui-radius:var(--radius-12); --dc-ui-radius-s:var(--radius-8);
  --dc-ui-shadow:var(--ombra-xs); --dc-ui-font:var(--font);
  /* Lo sfondo sotto il pulsante «Salva», che resta in fondo allo schermo:
     quello del pannello del CRM, così sfuma senza coprire il testo. */
  --dc-ui-page:var(--fondo);
}

/* =====================================================================
   Semplificazione del novembre 2026 (docs/24)
   ===================================================================== */

/* ----- barra delle sezioni (componente «subnav di sezione», #011) -----
   Orizzontale e ferma sotto l'intestazione; le voci non vanno mai a capo:
   se non ci stanno, scorre di lato. La voce corrente ha un filetto e il
   peso, non solo il colore. */
.sezioni{
  position:sticky; top:var(--sezioni-alto, var(--barra-alta)); z-index:14;
  margin:calc(var(--space-micro-9) * -1) calc(var(--pagina-fianchi) * -1) 0;
  padding:0 var(--pagina-fianchi);
  background:var(--fondo); border-bottom:var(--border-width) solid var(--bordo);
}
.sezioni ul{
  display:flex; gap:var(--space-micro-3); list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.sezioni ul::-webkit-scrollbar{display:none;}
.sezioni.scorre-sx ul{-webkit-mask-image:linear-gradient(90deg, transparent, #000 32px); mask-image:linear-gradient(90deg, transparent, #000 32px);}
.sezioni.scorre-dx ul{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 32px), transparent);}
.sezioni.scorre-sx.scorre-dx ul{-webkit-mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);}
.sezioni a{
  display:flex; align-items:center; gap:6px; min-height:44px; padding:0 var(--space-micro-6);
  color:var(--testo-2); text-decoration:none; font-size:var(--fs-s); font-weight:500;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--durata-hover) var(--curva), border-color var(--durata-hover) var(--curva);
}
.sezioni .conta{font-size:var(--fs-3xs); color:var(--testo-2); background:var(--superficie-3); border-radius:var(--radius-max); padding:0 6px; line-height:18px;}
.sezioni a[aria-current="true"]{color:var(--inchiostro); font-weight:600; border-bottom-color:var(--inchiostro);}
@media (hover:hover){ .sezioni a:hover{color:var(--inchiostro);} }
.sezioni a:focus-visible{outline:2px solid var(--inchiostro); outline-offset:-4px; border-radius:var(--radius-6);}
/* I collegamenti portano il titolo sotto la barra, mai dietro. */
/* Con la barra delle sezioni il margine di scorrimento è uno solo:
   intestazione più barra, misurate dallo script, più un respiro. */
html:has([data-sezioni]), :root:has([data-sezioni]) .corpo{scroll-padding-top:calc(var(--sezioni-fine, 120px) + var(--space-micro-8));}
.sezione-ancora{scroll-margin-top:0;}
.sezione-ancora > .sezione-testa:first-child{margin-top:0;}
.sezioni-pagina{display:flex; flex-direction:column; gap:var(--space-micro-9);}

/* Intestazione di una sezione della pagina, con la sua azione. */
.sezione-testa{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-6); flex-wrap:wrap; margin-bottom:var(--space-micro-7);}
.sezione-testa h2{font-size:var(--heading-h5); font-weight:600; margin:0; letter-spacing:-0.015em;}
.sezione-testa .meta{font-size:var(--fs-xs); color:var(--testo-2);}

/* ----- numeri del cliente: ognuno porta all'elenco che conta ----- */
.numeri-cliente{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-micro-5);}
.numeri-cliente a{
  display:flex; flex-direction:column; gap:2px; padding:var(--space-micro-6) var(--space-micro-7);
  border-radius:var(--radius-10); background:var(--superficie-2); text-decoration:none; color:inherit;
  transition:background-color var(--durata-hover) var(--curva);
}
.numeri-cliente strong{font-size:var(--fs-m); font-weight:600; letter-spacing:-0.02em;}
.numeri-cliente span{font-size:var(--fs-2xs); color:var(--testo-2);}
.numeri-cliente a[data-tono="allarme"] strong{color:var(--allarme);}
@media (hover:hover){ .numeri-cliente a:hover{background:var(--superficie-3);} }

/* ----- righe di stato con la loro azione (accesso, dati, comunicazioni) ----- */
.righe-stato{display:flex; flex-direction:column;}
.riga-stato{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-micro-5) var(--space-micro-8); padding:var(--space-micro-8) 0; border-top:var(--border-width) solid var(--bordo);}
.riga-stato:first-child{border-top:0; padding-top:0;}
.riga-stato:last-child{padding-bottom:0;}
.riga-stato-testo{display:flex; flex-direction:column; gap:var(--space-micro-3); min-width:0;}
.riga-stato-titolo{font-weight:500; display:flex; align-items:center; gap:var(--space-micro-5); flex-wrap:wrap;}
.riga-stato-nota{font-size:var(--fs-xs); color:var(--testo-2);}
.riga-stato-azioni{display:flex; gap:var(--space-micro-5); flex-wrap:wrap; justify-content:flex-end;}
.riga-stato-largo{grid-column:1 / -1;}
@media (max-width:640px){ .riga-stato{grid-template-columns:1fr;} .riga-stato-azioni{justify-content:flex-start;} }

/* ----- pulsante con menu ----- */
.menu-azione{position:relative;}
.menu-azione > summary{list-style:none;}
.menu-azione > summary::-webkit-details-marker{display:none;}
.menu-azione-lista{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:240px;
  background:var(--superficie); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-12);
  box-shadow:var(--ombra-m); padding:6px; display:flex; flex-direction:column;
}
.menu-azione-lista a{display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border-radius:var(--radius-8); color:var(--inchiostro); text-decoration:none; font-size:var(--fs-body);}
.menu-azione-lista .icona{width:16px; height:16px; color:var(--testo-2);}
@media (hover:hover){ .menu-azione-lista a:hover{background:var(--velo-hover);} }

/* ----- viste rapide degli elenchi ----- */
.viste{display:flex; gap:var(--space-micro-3); flex-wrap:wrap;}
.vista{
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px;
  border-radius:var(--radius-max); border:var(--border-width) solid var(--bordo); background:var(--superficie);
  color:var(--testo-2); font-size:var(--fs-s); font-weight:500; text-decoration:none;
  transition:border-color var(--durata-hover) var(--curva), color var(--durata-hover) var(--curva);
}
.vista .conta{font-size:var(--fs-3xs); color:var(--testo-2);}
.vista[aria-current="true"]{background:var(--inchiostro); border-color:var(--inchiostro); color:#fff;}
.vista[aria-current="true"] .conta{color:rgba(255,255,255,.8);}
@media (hover:hover){ .vista:not([aria-current="true"]):hover{border-color:var(--bordo-controllo); color:var(--inchiostro);} }

/* ----- filtri compatti: i secondari dietro «Altri filtri» ----- */
.filtri-compatti{position:relative;}
.altri-filtri{flex:none; align-self:flex-end;}
.altri-filtri > summary{list-style:none; gap:6px;}
.altri-filtri > summary::-webkit-details-marker{display:none;}
.altri-filtri[open] > summary{background:var(--superficie-2);}
.altri-filtri .contatore[hidden]{display:none;}
.altri-filtri-pannello{
  position:absolute; z-index:30; right:var(--space-micro-8); top:calc(100% + 6px);
  width:min(440px, calc(100vw - 32px)); background:var(--superficie); border:var(--border-width) solid var(--bordo);
  border-radius:var(--radius-12); box-shadow:var(--ombra-m); padding:var(--space-micro-8);
  display:grid; gap:var(--space-micro-7);
}
.altri-filtri-pannello .filtro{flex:none;}
@media (max-width:767px){
  .altri-filtri{width:100%;}
  .altri-filtri > summary{width:100%; justify-content:center;}
  .altri-filtri-pannello{position:static; width:auto; margin-top:var(--space-micro-5); box-shadow:none;}
}

/* ----- cruscotto: «Da fare» ----- */
.da-fare{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:var(--space-micro-5);}
.compito{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-micro-7);
  padding:var(--space-micro-7) var(--space-micro-8); border-radius:var(--radius-12);
  background:var(--superficie); border:var(--border-width) solid var(--bordo); box-shadow:var(--ombra-xs);
  text-decoration:none; color:inherit;
  transition:border-color var(--durata-hover) var(--curva), box-shadow var(--durata-hover) var(--curva);
}
.compito-numero{font-size:var(--fs-l); font-weight:600; letter-spacing:-0.03em; min-width:1.6ch; text-align:center; font-variant-numeric:tabular-nums;}
.compito[data-tono="allarme"] .compito-numero{color:var(--allarme);}
.compito[data-tono="attesa"] .compito-numero{color:var(--attesa);}
.compito[data-tono="info"] .compito-numero{color:var(--info);}
.compito-testo{display:flex; flex-direction:column; gap:2px; min-width:0;}
.compito-titolo{font-weight:500;}
.compito-nota{font-size:var(--fs-xs); color:var(--testo-2);}
.compito > .icona{color:var(--testo-2); width:16px; height:16px;}
.da-fare-niente{display:flex; align-items:center; gap:var(--space-micro-5); color:var(--ok); font-weight:500;}
@media (hover:hover){ .compito:hover{border-color:var(--bordo-forte); box-shadow:var(--ombra-s);} }

/* ----- impostazioni ----- */
.impostazioni-griglia{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--space-micro-8);}
.impostazione{
  display:flex; flex-direction:column; gap:var(--space-micro-4); padding:var(--space-micro-9);
  background:var(--superficie); border:var(--border-width) solid var(--bordo); border-radius:var(--radius-16);
  text-decoration:none; color:inherit; box-shadow:var(--ombra-xs);
  transition:border-color var(--durata-hover) var(--curva), box-shadow var(--durata-hover) var(--curva);
}
.impostazione-testa{display:flex; align-items:center; gap:var(--space-micro-5); font-weight:600;}
.impostazione p{margin:0; font-size:var(--fs-s); color:var(--testo-2);}
.impostazione-stato{margin-top:auto; padding-top:var(--space-micro-5);}
@media (hover:hover){ .impostazione:hover{border-color:var(--bordo-forte); box-shadow:var(--ombra-s);} }
.campo-mancante .input{border-color:var(--attesa);}
/* Un fieldset che raggruppa i campi senza disegnare una cornice. */
fieldset.campi-griglia{border:0; padding:0; margin:0; min-width:0;}
fieldset.campi-griglia > legend{padding:0;}

/* ----- ore da fatturare ----- */
.campo-riga-tariffa{flex:0 1 200px;}
form[data-ore-tariffa] .modulo-piede{display:flex; align-items:flex-end; gap:var(--space-micro-8); flex-wrap:wrap; margin-top:var(--space-micro-8);}
form[data-ore-tariffa] .modulo-piede .sottotitolo{margin-right:auto;}

/* ----- schede di Comunicazioni (iscritti, email e auguri, Brevo) ----- */
.schede-pagina{display:flex; gap:var(--space-micro-3); flex-wrap:wrap; border-bottom:var(--border-width) solid var(--bordo); margin-top:calc(var(--space-micro-5) * -1);}
.schede-pagina a{display:flex; align-items:center; min-height:40px; padding:0 var(--space-micro-6); color:var(--testo-2); text-decoration:none; font-size:var(--fs-s); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px;}
.schede-pagina a[aria-current="page"]{color:var(--inchiostro); font-weight:600; border-bottom-color:var(--inchiostro);}
@media (hover:hover){ .schede-pagina a:hover{color:var(--inchiostro);} }
.avviso-attesa{background:var(--attesa-bg); color:var(--attesa); border-color:rgba(138,87,18,.35);}
/* Un avviso con la sua azione, dentro un pannello. */
.riga-avviso{display:flex; align-items:center; justify-content:space-between; gap:var(--space-micro-8); flex-wrap:wrap; margin:0 0 var(--space-micro-8);}
.pannello-testa-staccata{margin-top:var(--space-micro-10); padding-top:var(--space-micro-9); border-top:var(--border-width) solid var(--bordo);}
.scheda-piede{display:flex; align-items:center; justify-content:center; gap:var(--space-micro-8); flex-wrap:wrap; text-align:center; padding:var(--space-micro-8) 0;}

/* ----- «Rinnovato» accanto a una scadenza ----- */
.form-rinnova{display:inline-flex; margin:0;}
.btn-rinnova{min-height:30px; padding-inline:10px; font-size:var(--fs-xs);}
/* Una riga intera che porta alla scheda, con un pulsante sopra. */
.riga-con-azione{position:relative;}
.lista-riga-link{color:inherit; text-decoration:none;}
.lista-riga-link::after{content:""; position:absolute; inset:0; border-radius:inherit;}
.riga-con-azione .form-rinnova{position:relative; z-index:1;}
.lista-riga-link:focus-visible{outline:none;}
.lista-riga-link:focus-visible::after{outline:2px solid var(--inchiostro); outline-offset:-2px;}
/* Con «Rinnovato» la coda della riga è larga: se non c'è posto (colonna
   laterale, telefono) va a capo sotto il titolo, che non si sbriciola. */
.lista-riga:has(.form-rinnova){flex-wrap:wrap; row-gap:var(--space-micro-4);}
.lista-riga:has(.form-rinnova) .lista-riga-testa{flex:1 1 9em; min-width:0;}
.lista-riga:has(.form-rinnova) .lista-riga-coda{margin-left:auto;}
.campo[hidden]{display:none;}
.pannello > .riepilogo-errori{margin-bottom:var(--space-micro-9);}
/* Il contrario di .nascondi-991: una cella che serve solo sotto i 992 px. */
.solo-991{display:none;}
@media (max-width:991px){ .solo-991{display:table-cell;} }
/* Nelle pagine d'accesso l'avviso sta nel riquadro: niente rientri della pagina, e aria sotto. */
.accesso-box .avviso{margin-inline:0; margin-bottom:var(--space-micro-9);}
.accesso-marca{margin:0 0 var(--space-micro-4); font-size:var(--fs-xs); font-weight:600; color:var(--testo-2);}

/* =====================================================================
   Restyling del novembre 2026 (docs/25)
   I colori dell'Hub /dc-admin (grafite #1d2327, blu #2271b1, grigi
   neutri); per il 70% spunti dal web (Linear, Arc, Vercel, Twenty,
   Attio, la raccolta Muzli 2026), per il 30% l'Hub. La cornice scura
   avvolge il pannello del contenuto, il menu è scuro con la voce attiva
   piena, pulsanti e filtri sono pillole, le schede hanno un'ombra
   morbida, «Da fare» è un mosaico. Tema chiaro e scuro (il pulsante in
   testa al menu); colonne laterali ferme quando ci stanno per intero.
   Questa sezione viene dopo tutte le altre: ne cambia l'aspetto, non il
   markup né il comportamento.
   ===================================================================== */

@media (pointer:fine){ :root{--altezza-controllo:38px;} }
:root{
  color-scheme:light;
  --raggio-pannello:20px;
  --raggio-scheda:18px;
  --luce-blu:radial-gradient(900px 340px at 85% -120px, rgba(34,113,177,.13), transparent 70%);
  --lucido:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 75%);
}

/* ---------- tema scuro ----------
   Grafite neutra e lo stesso blu, schiarito. Sulle schede (#1b1e22):
   testo 14:1, secondario 8,6:1, terziario 6:1, bordo dei campi 3,6:1,
   accento 7,1:1; testo scuro sul pieno 7,5:1. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --cornice:#0b0d0f;
  --fondo-app:#121417; --fondo:#121417;
  --superficie:#1b1e22; --superficie-2:#23262b; --superficie-3:#2b2f35;
  --velo-hover:rgba(233,235,238,.06);
  --inchiostro:#e9ebee; --inchiostro-2:#ffffff; --testo-2:#b4bac1; --testo-3:#959ca4;
  --bordo:#2c3036; --bordo-tenue:#25292e; --bordo-forte:#3a3f46; --bordo-controllo:#6f767e;
  --accento:#72aee6; --accento-scuro:#72aee6; --accento-forte:#9cc7ef;
  --accento-tenue:rgba(114,174,230,.14); --evidenza:rgba(114,174,230,.3);
  --pieno:#72aee6; --pieno-hover:#9cc7ef; --su-pieno:#0c1a27;
  --anello:rgba(114,174,230,.3);
  --vetro:rgba(18,20,23,.82);
  --ok:#4ade80;      --ok-bg:rgba(34,197,94,.15);
  --attesa:#fbbf24;  --attesa-bg:rgba(245,158,11,.16);
  --allarme:#f87171; --allarme-bg:rgba(239,68,68,.16);
  --neutro:#a1a1aa;  --neutro-bg:rgba(161,161,170,.13);
  --info:#60a5fa;    --info-bg:rgba(59,130,246,.17);
  --ombra-m:0 16px 40px -12px rgba(0,0,0,.6);
  --ombra-l:0 24px 48px -16px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04);
  --ombra-scheda:0 1px 2px rgba(0,0,0,.3);
  --ombra-scheda-su:0 16px 32px -12px rgba(0,0,0,.6);
  --luce-blu:radial-gradient(900px 340px at 85% -120px, rgba(114,174,230,.12), transparent 70%);
  --lucido:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 75%);
}
:root[data-theme="dark"] [data-colore="verde"]   {--c-testo:#4ade80; --c-fondo:rgba(34,197,94,.15);  --c-punto:#22c55e;}
:root[data-theme="dark"] [data-colore="ambra"]   {--c-testo:#fbbf24; --c-fondo:rgba(245,158,11,.16); --c-punto:#f59e0b;}
:root[data-theme="dark"] [data-colore="rosso"]   {--c-testo:#f87171; --c-fondo:rgba(239,68,68,.16);  --c-punto:#ef4444;}
:root[data-theme="dark"] [data-colore="blu"]     {--c-testo:#60a5fa; --c-fondo:rgba(59,130,246,.17); --c-punto:#3b82f6;}
:root[data-theme="dark"] [data-colore="viola"]   {--c-testo:#a78bfa; --c-fondo:rgba(139,92,246,.18); --c-punto:#8b5cf6;}
:root[data-theme="dark"] [data-colore="petrolio"]{--c-testo:#2dd4bf; --c-fondo:rgba(20,184,166,.15); --c-punto:#14b8a6;}
:root[data-theme="dark"] [data-colore="arancio"] {--c-testo:#fb923c; --c-fondo:rgba(249,115,22,.16); --c-punto:#f97316;}
:root[data-theme="dark"] [data-colore="rosa"]    {--c-testo:#f472b6; --c-fondo:rgba(236,72,153,.16); --c-punto:#ec4899;}
:root[data-theme="dark"] [data-colore="grigio"]  {--c-testo:#a1a1aa; --c-fondo:rgba(161,161,170,.13); --c-punto:#71717a;}
:root[data-theme="dark"] .segno-tipo[data-tipo="clienti"],
.fianco .segno-tipo[data-tipo="clienti"]   {background:rgba(59,130,246,.18); color:#60a5fa;}
:root[data-theme="dark"] .segno-tipo[data-tipo="siti"],
.fianco .segno-tipo[data-tipo="siti"]      {background:rgba(20,184,166,.18); color:#2dd4bf;}
:root[data-theme="dark"] .segno-tipo[data-tipo="accessi"],
.fianco .segno-tipo[data-tipo="accessi"]   {background:rgba(139,92,246,.2); color:#a78bfa;}
:root[data-theme="dark"] .segno-tipo[data-tipo="interventi"],
.fianco .segno-tipo[data-tipo="interventi"]{background:rgba(249,115,22,.18); color:#fb923c;}
:root[data-theme="dark"] .segno-tipo[data-tipo="preventivi"],
.fianco .segno-tipo[data-tipo="preventivi"]{background:rgba(234,179,8,.18); color:#facc15;}
:root[data-theme="dark"] .segno-tipo[data-tipo="contratti"],
.fianco .segno-tipo[data-tipo="contratti"] {background:rgba(34,197,94,.17); color:#4ade80;}
:root[data-theme="dark"] .segno-tipo[data-tipo="fatture"],
.fianco .segno-tipo[data-tipo="fatture"]   {background:rgba(236,72,153,.18); color:#f472b6;}
:root[data-theme="dark"] .segno-tipo[data-tipo="richieste"],
.fianco .segno-tipo[data-tipo="richieste"] {background:rgba(14,165,233,.18); color:#38bdf8;}
:root[data-theme="dark"] .segno-tipo, .fianco .segno-tipo{box-shadow:none;}
:root[data-theme="dark"] .totp-qr, :root[data-theme="dark"] .messaggio-anteprima{background:#fff;}
:root[data-theme="dark"] .avviso-ok{border-color:rgba(34,197,94,.3);}
:root[data-theme="dark"] .avviso-errore, :root[data-theme="dark"] .riepilogo-errori{border-color:rgba(239,68,68,.35);}
:root[data-theme="dark"] .avviso-attesa{border-color:rgba(245,158,11,.35);}

/* ---------- base ---------- */
body{letter-spacing:0; font-feature-settings:normal;}
::selection{background:var(--evidenza); color:inherit;}
.input:focus-visible, .cerca-campo:focus-within, .selezione-campo[aria-expanded="true"]{
  border-color:var(--accento); box-shadow:0 0 0 1px var(--accento), 0 0 0 4px var(--anello);
}
.input{border-radius:var(--radius-10); box-shadow:none;}

/* ---------- il menu scuro ----------
   I token si ridefiniscono dentro il menu, così profilo, pulsanti e
   recenti si adattano da soli. Su #1d2327: testo 14,6:1, secondario
   9,1:1, titoli dei gruppi 7:1; il bianco sulla voce attiva 5,2:1. */
.fianco{
  --inchiostro:#f0f0f1; --testo-2:#c3c4c7; --testo-3:#a7aaad;
  --superficie:rgba(255,255,255,.06); --superficie-2:rgba(255,255,255,.08); --superficie-3:rgba(255,255,255,.12);
  --bordo:rgba(255,255,255,.09); --bordo-forte:rgba(255,255,255,.16); --bordo-controllo:#8c8f94;
  --velo-hover:rgba(255,255,255,.07);
  color:var(--inchiostro); background:var(--cornice); border-right:0;
  padding:var(--space-micro-9) var(--space-micro-8) var(--space-micro-8);
  gap:var(--space-micro-9);
}
.fianco :focus-visible{outline-color:#72aee6;}
.menu{margin-inline:calc(-1 * var(--space-micro-8)); padding-inline:var(--space-micro-8); gap:var(--space-micro-8);}
.menu-titolo{
  margin:0 0 var(--space-micro-3); padding-inline:var(--space-micro-6);
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--testo-3);
}
.menu-voce{
  min-height:40px; gap:var(--space-micro-6); padding:0 var(--space-micro-6);
  border:0; border-radius:var(--radius-12);
  font-size:14.5px; font-weight:500; color:#dcdcde;
}
.menu-voce .icona{color:var(--testo-3); width:19px; height:19px;}
.menu-voce[aria-current="page"]{
  background:linear-gradient(180deg,#2a7cc0,#2271b1); color:#fff; font-weight:600; border:0;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 16px -6px rgba(34,113,177,.6);
}
.menu-voce[aria-current="page"] .icona{color:#fff;}
@media (hover:hover){
  .menu-voce:not([aria-current]):hover{background:rgba(255,255,255,.07); color:#fff;}
  .menu-voce:not([aria-current]):hover .icona{color:#fff;}
  .fianco .recente:hover{background:rgba(255,255,255,.07); color:#fff;}
  .fianco .btn-icona:hover{background:rgba(255,255,255,.08); color:#fff;}
}
/* Contatori pieni: neutro per «da vedere», rosso per il ritardo, ambra
   per le scadenze; con un filo di luce in alto. */
.menu .contatore{background:rgba(255,255,255,.14); color:#fff; font-size:11px; height:20px; min-width:20px;}
.menu .contatore[data-tono="allarme"]{background:linear-gradient(180deg,#ef4444,#dc2626); color:#fff; box-shadow:0 0 0 3px rgba(239,68,68,.18);}
.menu .contatore[data-tono="attesa"]{background:linear-gradient(180deg,#fbbf24,#f59e0b); color:#1d2327; box-shadow:0 0 0 3px rgba(245,158,11,.18);}
.menu .contatore[data-tono="info"]{background:linear-gradient(180deg,#60a5fa,#3b82f6); color:#0c1a27;}
.menu-voce[aria-current="page"] .contatore{background:rgba(255,255,255,.25); color:#fff; box-shadow:none;}
.recente{font-size:13.5px; color:var(--testo-2); border-radius:var(--radius-10);}
.fianco .btn-icona{color:var(--testo-2);}
.fianco .profilo-scheda{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-12); box-shadow:none; padding:5px 12px 5px 5px;}
.fianco .marchio-data{color:var(--testo-3);}
.marchio-segno{width:34px; height:34px; border-radius:var(--radius-10); background:linear-gradient(180deg,#2a7cc0,#2271b1); color:#fff; font-size:14px; font-weight:600; letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.marchio-testo{font-size:14.5px; font-weight:600;}
/* Un nome lungo (lo studio nell'area cliente) va su due righe invece di
   tagliarsi: accanto ci sono i pulsanti del tema e del menu. */
.fianco-testa .marchio-testo{white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.25;}
.avatar{background:linear-gradient(180deg,#2a7cc0,#2271b1); color:#fff; font-size:13px;}

/* Il pulsante del tema: si vede l'icona della scelta di adesso. */
.fianco-testa{gap:0;}
.fianco-testa .marchio{flex:1; min-width:0; margin-right:var(--space-micro-3);}
@media (pointer:fine){ .fianco-testa .btn-icona{width:30px; height:30px; border-radius:var(--radius-8);} }
.tema-btn .icona{width:18px; height:18px; display:none;}
.tema-btn .tema-sistema{display:block;}
html[data-tema-scelta="chiaro"] .tema-btn .tema-sistema, html[data-tema-scelta="scuro"] .tema-btn .tema-sistema{display:none;}
html[data-tema-scelta="chiaro"] .tema-btn .tema-chiaro, html[data-tema-scelta="scuro"] .tema-btn .tema-scuro{display:block;}

/* ---------- la cornice e il pannello ----------
   Sopra i 992px il contenuto è un pannello chiaro arrotondato dentro la
   cornice scura, con un velo di luce blu in cima. */
@media (min-width:992px){
  body{background:var(--cornice);}
  .corpo{
    height:calc(100dvh - 20px); margin:10px 10px 10px 0;
    border:0; border-radius:var(--raggio-pannello);
    background:var(--luce-blu), var(--fondo);
    box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 20px 50px -20px rgba(0,0,0,.6);
    --pagina-fianchi:28px;
  }
  .testata{background:rgba(245,246,247,.72); border-radius:var(--raggio-pannello) var(--raggio-pannello) 0 0; padding-block:var(--space-micro-8);}
  :root[data-theme="dark"] .testata{background:rgba(18,20,23,.72);}
  .testata[data-staccata]{border-bottom-color:var(--bordo);}
  .titolo{font-size:28px; font-weight:650; letter-spacing:-.025em;}
  html[data-fianco="stretto"] .menu{margin:0; padding:0;}
}
.testata-barra, .modulo-largo > .modulo-piede, .email-piede{background:var(--vetro);}
.titolo{font-weight:650; letter-spacing:-.02em;}
.pannello-titolo{font-size:17px; font-weight:650; letter-spacing:-.01em;}

/* ---------- pulsanti a pillola ---------- */
.btn{border-radius:999px; font-weight:500; padding-inline:18px;}
.btn-primario{
  background:linear-gradient(180deg,#2a7cc0,#2271b1); border-color:#1f68a3; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(34,113,177,.3), 0 6px 14px -6px rgba(34,113,177,.55);
}
.btn-secondario{background:var(--superficie); border-color:var(--bordo-forte); color:var(--inchiostro); box-shadow:0 1px 2px rgba(16,24,40,.05);}
.btn-pericolo{background:linear-gradient(180deg,#e5484d,#c81e1e); border-color:#b91c1c; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(200,30,30,.5);}
.btn-icona{border-radius:999px;}
.salta, .pag-voce[aria-current="page"], .calendario-scelta[aria-pressed="true"], .calendario-giorno[aria-pressed="true"]{
  background:var(--pieno); border-color:var(--pieno); color:var(--su-pieno); box-shadow:none;
}
:root[data-theme="dark"] .btn-primario{background:linear-gradient(180deg,#86bbec,#72aee6); border-color:#72aee6; color:#0c1a27;}
@media (hover:hover){
  .btn-primario:hover{background:linear-gradient(180deg,#2271b1,#135e96); border-color:#135e96; color:#fff;}
  :root[data-theme="dark"] .btn-primario:hover{background:#9cc7ef; border-color:#9cc7ef; color:#0c1a27;}
  .btn-secondario:hover{background:var(--superficie-2); border-color:var(--bordo-controllo);}
  .btn-pericolo:hover{background:#b91c1c; border-color:#991b1b;}
}
.cerca-campo{height:42px; border-radius:999px; border-color:var(--bordo-forte); background:var(--superficie); box-shadow:0 1px 2px rgba(16,24,40,.04);}

/* ---------- schede con l'ombra morbida ---------- */
.pannello, .filtri, .tabella-card, .numero, .impostazione, .scheda-doc, .card-riga, .lista-riga, .pubblico-box, .accesso-box{
  border-radius:var(--raggio-scheda); border-color:rgba(16,24,40,.06); box-shadow:var(--ombra-scheda);
}
:root[data-theme="dark"] :is(.pannello, .filtri, .tabella-card, .numero, .impostazione, .scheda-doc, .card-riga, .lista-riga, .pubblico-box, .accesso-box){border-color:var(--bordo);}
.pannello{padding:22px 24px;}
.pannello-tabella{padding:18px 0 6px;}
.pannello-tabella .pannello-testa{padding-inline:24px;}

/* ---------- tabelle ----------
   Testa senza fondo in maiuscoletto, una riga sottile sotto; la riga
   intera si illumina di un blu tenue. */
.tabella-card{padding:6px 0;}
.tabella th{
  background:transparent; color:var(--testo-3); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 14px; border-bottom:var(--border-width) solid var(--bordo-tenue); border-radius:0 !important;
}
:root[data-theme="dark"] .tabella th{border-bottom-color:var(--bordo);}
.tabella th:first-child, .tabella td:first-child{padding-left:24px;}
.tabella th:last-child, .tabella td:last-child{padding-right:24px;}
.tabella td{padding:13px 14px; font-size:14px; border-top-color:var(--bordo-tenue);}
:root[data-theme="dark"] .tabella td{border-top-color:var(--bordo);}
.tabella tr[data-riga-link] td{border-radius:0 !important;}
.tabella tfoot td{background:var(--superficie-2);}
@media (hover:hover){
  .tabella tr[data-riga-link]:hover td{background:rgba(34,113,177,.05); border-top-color:var(--bordo-tenue);}
  .tabella tr[data-riga-link]:hover + tr td{border-top-color:var(--bordo-tenue);}
  :root[data-theme="dark"] .tabella tr[data-riga-link]:hover td{background:rgba(114,174,230,.07);}
}
.cella-primaria a{font-size:14px; font-weight:600;}
.cella-sub{font-size:12.5px; color:var(--testo-3);}
.segno-tipo{border-radius:var(--radius-10); box-shadow:none;}

/* ---------- stati accesi ----------
   Etichette con la tinta trasparente, un riflesso in alto (lucido), un
   filo della stessa tinta e il pallino vivo con l'alone. Il testo resta
   almeno a 4,5:1; la parola c'è sempre. */
.badge{
  --b-testo:var(--neutro); --b-fondo:var(--neutro-bg); --b-punto:var(--neutro-vivo);
  color:var(--b-testo); background-color:var(--b-fondo); background-image:var(--lucido);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--b-punto) 28%, transparent);
  font-size:12px; font-weight:550; padding:2px 10px 2px 8px; border:0;
}
.badge::before{background:var(--b-punto); box-shadow:0 0 0 3px color-mix(in srgb, var(--b-punto) 22%, transparent), 0 0 6px color-mix(in srgb, var(--b-punto) 55%, transparent);}
.badge[data-tono="ok"]     {--b-testo:var(--ok);      --b-fondo:var(--ok-bg);      --b-punto:var(--ok-vivo);}
.badge[data-tono="attesa"] {--b-testo:var(--attesa);  --b-fondo:var(--attesa-bg);  --b-punto:var(--attesa-vivo);}
.badge[data-tono="allarme"]{--b-testo:var(--allarme); --b-fondo:var(--allarme-bg); --b-punto:var(--allarme-vivo);}
.badge[data-tono="neutro"] {--b-testo:var(--neutro);  --b-fondo:var(--neutro-bg);  --b-punto:var(--neutro-vivo);}
.badge[data-tono="info"]   {--b-testo:var(--info);    --b-fondo:var(--info-bg);    --b-punto:var(--info-vivo);}
.badge[data-colore]        {--b-testo:var(--c-testo); --b-fondo:var(--c-fondo);    --b-punto:var(--c-punto);}
.badge[data-tono], .badge[data-colore]{background-color:var(--b-fondo); color:var(--b-testo);}
.badge[data-colore]::before{background:var(--b-punto);}
:root[data-theme="dark"]{--neutro-vivo:#71717a;}

/* Barre del monte ore: lucide, con la luce della loro tinta. */
.barra-pieno{background:linear-gradient(180deg, #4ade80, var(--ok-vivo)); box-shadow:0 0 8px rgba(34,197,94,.35);}
.barra-pieno[data-tono="attesa"]{background:linear-gradient(180deg, #fcd34d, var(--attesa-vivo)); box-shadow:0 0 8px rgba(245,158,11,.4);}
.barra-pieno[data-tono="allarme"]{background:linear-gradient(180deg, #f87171, var(--allarme-vivo)); box-shadow:0 0 8px rgba(239,68,68,.4);}
.calendario-puntino[data-tono="ok"], .calendario-evento[data-tono="ok"]::before{background:var(--ok-vivo);}
.calendario-puntino[data-tono="attesa"], .calendario-evento[data-tono="attesa"]::before{background:var(--attesa-vivo);}
.calendario-puntino[data-tono="allarme"], .calendario-evento[data-tono="allarme"]::before{background:var(--allarme-vivo);}
.calendario-puntino[data-tono="info"], .calendario-evento[data-tono="info"]::before{background:var(--info-vivo);}
/* Avvisi: tinta trasparente, filo a sinistra nel colore vivo. */
.avviso{border-radius:var(--radius-12); border-left-width:4px; background-image:var(--lucido);}
.avviso-ok{border-color:rgba(34,197,94,.3); border-left-color:var(--ok-vivo);}
.avviso-errore{border-color:rgba(239,68,68,.3); border-left-color:var(--allarme-vivo);}
.avviso-attesa{border-color:rgba(245,158,11,.35); border-left-color:var(--attesa-vivo);}
.riepilogo-errori{border-color:rgba(239,68,68,.3); border-left:4px solid var(--allarme-vivo);}

/* ---------- filtri, viste rapide, barra delle sezioni ---------- */
.schede-filtro{background:var(--superficie); border:var(--border-width) solid var(--bordo-tenue); border-radius:999px; padding:4px; gap:4px;}
.scheda-filtro{border-radius:999px; font-weight:500; color:var(--testo-2);}
.scheda-filtro[aria-current="page"]{background:var(--superficie-2); color:var(--inchiostro); font-weight:600; box-shadow:inset 0 0 0 1px var(--bordo);}
.vista{background:var(--superficie); border-color:var(--bordo); border-radius:999px; padding-inline:14px; font-weight:500; box-shadow:0 1px 2px rgba(16,24,40,.04);}
.vista[aria-current="true"]{background:var(--cornice); border-color:var(--cornice); color:#fff;}
.vista[aria-current="true"] .conta{color:rgba(255,255,255,.75);}
:root[data-theme="dark"] .vista[aria-current="true"]{background:var(--inchiostro); border-color:var(--inchiostro); color:var(--fondo);}
:root[data-theme="dark"] .vista[aria-current="true"] .conta{color:var(--fondo);}
.sezioni{background:transparent; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.sezioni a[aria-current="true"]{border-bottom-color:var(--accento); color:var(--inchiostro);}
.sezioni .conta{background:var(--superficie-3);}

/* ---------- «Da fare» a mosaico ----------
   In alto la cifra grande, sotto l'etichetta con il pallino del tono,
   poi la nota. Il primo compito (il più urgente, nell'ordine fisso del
   cruscotto) prende due colonne e il blu. */
.da-fare{grid-template-columns:repeat(auto-fill, minmax(185px,1fr)); gap:12px;}
.compito{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"numero freccia" "titolo titolo" "nota nota";
  align-items:center; row-gap:4px; column-gap:8px;
  padding:16px 18px; border-radius:16px;
  background:var(--superficie); border:1px solid rgba(16,24,40,.06); box-shadow:var(--ombra-scheda);
}
:root[data-theme="dark"] .compito{border-color:var(--bordo);}
.compito-testo{display:contents;}
.compito-titolo{grid-area:titolo; display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--inchiostro);}
.compito-titolo::before{content:""; width:7px; height:7px; margin-left:2px; border-radius:50%; flex:none; background:var(--neutro-vivo); box-shadow:0 0 0 4px rgba(156,163,175,.18);}
.compito[data-tono="allarme"] .compito-titolo::before{background:var(--allarme-vivo); box-shadow:0 0 0 4px rgba(239,68,68,.16), 0 0 6px rgba(239,68,68,.5);}
.compito[data-tono="attesa"] .compito-titolo::before{background:var(--attesa-vivo); box-shadow:0 0 0 4px rgba(245,158,11,.2), 0 0 6px rgba(245,158,11,.5);}
.compito[data-tono="info"] .compito-titolo::before{background:var(--info-vivo); box-shadow:0 0 0 4px rgba(59,130,246,.16), 0 0 6px rgba(59,130,246,.5);}
.compito-numero{grid-area:numero; text-align:left; font-size:32px; font-weight:650; line-height:1.15; letter-spacing:-.03em; color:var(--inchiostro) !important; margin-bottom:4px;}
.compito-nota{grid-area:nota; font-size:12.5px; color:var(--testo-3);}
.compito > .icona{grid-area:freccia; width:16px; height:16px; color:var(--testo-3); transition:transform var(--durata-hover) var(--curva), color var(--durata-hover) var(--curva);}
.compito:first-child{
  background:radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(135deg,#2271b1,#135e96);
  border-color:transparent; color:#fff;
  box-shadow:0 2px 4px rgba(19,94,150,.2), 0 14px 30px -12px rgba(19,94,150,.55);
}
.compito:first-child .compito-numero{color:#fff !important; font-size:40px;}
.compito:first-child .compito-titolo, .compito:first-child .compito-nota, .compito:first-child > .icona{color:#fff;}
.compito:first-child .compito-titolo::before{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);}
:root[data-theme="dark"] .compito:first-child{background:radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.1), transparent 60%), linear-gradient(135deg,#235f92,#173f61);}
@media (min-width:768px){ .compito:first-child{grid-column:span 2;} }
@media (hover:hover){
  .compito:hover{transform:translateY(-2px); background-color:var(--superficie); border-color:rgba(16,24,40,.1); box-shadow:var(--ombra-scheda-su);}
  .compito:hover > .icona{transform:translateX(2px); color:var(--accento);}
  .compito:first-child:hover{border-color:transparent; box-shadow:0 4px 8px rgba(19,94,150,.25), 0 20px 40px -14px rgba(19,94,150,.6);}
  .compito:first-child:hover > .icona{color:#fff;}
}

/* «In numeri» della scheda cliente e il grafico: tinte dell'accento. */
.numeri-cliente a{background:rgba(34,113,177,.05); border:1px solid rgba(34,113,177,.10); border-radius:var(--radius-12); padding:14px 16px;}
:root[data-theme="dark"] .numeri-cliente a{background:rgba(114,174,230,.07); border-color:rgba(114,174,230,.12);}
.numeri-cliente strong{font-size:24px; letter-spacing:-.02em;}
.grafico .colonna-dato{fill:#b9d4ee;}
.grafico .colonna-dato[data-corrente]{fill:var(--accento);}
:root[data-theme="dark"] .grafico .colonna-dato{fill:#3a5674;}
.grafico-cifra{font-size:32px;}

/* ---------- finestre e menu a comparsa ----------
   Tutte le superfici che galleggiano (ricerca, «Crea», menu di scelta,
   calendario, «Nuovo per questo cliente», «Altri filtri», finestre di
   conferma) hanno la stessa forma: angoli a 16, un filo sottile,
   l'ombra lunga; le voci si illuminano di blu tenue. */
:is(.cerca-pannello, .menu-crea, .selezione-pannello, .calendario, .menu-azione-lista, .altri-filtri-pannello, .finestra){
  border:1px solid rgba(16,24,40,.08); border-radius:16px; box-shadow:var(--ombra-l);
}
:root[data-theme="dark"] :is(.cerca-pannello, .menu-crea, .selezione-pannello, .calendario, .menu-azione-lista, .altri-filtri-pannello, .finestra){
  border-color:var(--bordo-forte); background:#1f2227;
}
.menu-azione-lista, .altri-filtri-pannello{padding:6px;}
.altri-filtri-pannello{padding:16px;}
.finestra{border-radius:20px;}
.finestra::backdrop, .calendario[data-esteso]::backdrop{background:rgba(13,17,20,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.finestra-titolo{font-size:17px; font-weight:650;}
.finestra-testa{padding:20px 22px 0;}
.finestra-corpo{padding:16px 22px;}
.finestra-piede{padding:0 22px 20px; gap:8px;}
.menu-crea-voce, .menu-azione-lista a, .selezione-voce, .cerca-voce{border-radius:var(--radius-10);}
.cerca-voce[aria-selected="true"], .selezione-voce[data-attiva]{background:var(--accento-tenue); box-shadow:none;}
@media (hover:hover){
  .menu-crea-voce:hover, .menu-azione-lista a:hover{background:var(--accento-tenue);}
}
.selezione-voce[aria-selected="true"]{font-weight:600; color:var(--accento-forte);}
:root[data-theme="dark"] .selezione-voce[aria-selected="true"]{color:var(--accento);}
.grafico-suggerimento{border-radius:var(--radius-10); background:var(--cornice); color:#fff; border:0;}

/* Invio del contratto al cliente (docs/26). */
#invio .invio-stato{margin:0 0 var(--space-micro-6);}
#invio .invio-cambiato{margin:0 0 var(--space-micro-3);}
#invio form{margin:var(--space-micro-6) 0 var(--space-micro-4);}

/* Scadenze del sito (docs/27): il nome porta alla modifica, sotto i file
   dei pagamenti come piccoli collegamenti. */
.scadenza-riga .lista-riga-titolo{color:var(--inchiostro); text-decoration:none;}
@media (hover:hover){ .scadenza-riga a.lista-riga-titolo:hover{text-decoration:underline; text-underline-offset:2px;} }
.scadenza-file{display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:4px;}
.scadenza-file a{display:inline-flex; align-items:center; gap:4px; max-width:100%; font-size:var(--fs-2xs); color:var(--testo-2); text-decoration:none;}
.scadenza-file a .icona{width:13px; height:13px; flex:none;}
.scadenza-file a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (hover:hover){ .scadenza-file a:hover{color:var(--accento); text-decoration:underline;} }

/* Il giro giornaliero fermo o con problemi, in cima al cruscotto (docs/28). */
.avviso-giro{margin:0; display:flex; flex-direction:column; gap:4px;}
.avviso-giro-riga{display:block;}

/* ---------- colonne fisse ----------
   guscio.js mette data-fissa solo se la colonna ci sta tutta sotto le
   barre in alto (e la colonna principale è più lunga). */
@media (min-width:992px){
  .scheda-laterale[data-fissa]{position:sticky; top:var(--fissa-alto, 96px); z-index:2;}
}

/* ---------- telefono ---------- */
@media (max-width:991px){
  body{background:var(--luce-blu), var(--fondo); background-repeat:no-repeat; background-color:var(--fondo);}
  .testata-barra{background:rgba(245,246,247,.86);}
  :root[data-theme="dark"] .testata-barra{background:rgba(18,20,23,.86);}
  .crea-pulsante.btn-primario{background:var(--superficie); color:var(--inchiostro); border-color:var(--bordo-forte); box-shadow:0 1px 2px rgba(16,24,40,.05);}
}
@media (hover:hover) and (pointer:fine) and (max-width:991px){
  .crea-pulsante.btn-primario:hover{background:var(--superficie-2); color:var(--inchiostro); border-color:var(--bordo-controllo);}
}
@media (max-width:767px){
  .da-fare{grid-template-columns:1fr; gap:8px;}
  .compito{grid-template-columns:3ch minmax(0,1fr) auto; grid-template-areas:"numero titolo freccia" "numero nota freccia"; column-gap:14px; row-gap:2px; padding:12px 16px;}
  .compito-numero, .compito:first-child .compito-numero{font-size:26px; margin:0;}
  .tabella th:first-child, .tabella td:first-child{padding-left:16px;}
  .tabella th:last-child, .tabella td:last-child{padding-right:16px;}
  .pannello{padding:18px;}
}

/* ---------- passaggio fra le pagine ----------
   Chrome, Edge e Safari 18: il contenuto sfuma in 160 ms e il menu resta
   fermo; altrove la pagina cambia come sempre. Niente per chi riduce il
   movimento. */
@view-transition{navigation:auto;}
.fianco{view-transition-name:fianco;}
::view-transition-old(root), ::view-transition-new(root){animation-duration:160ms; animation-timing-function:cubic-bezier(0,0,.38,.9);}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none;} }

/* ---------- stampa: sempre chiara ---------- */
@media print{
  :root[data-theme="dark"]{
    color-scheme:light;
    --fondo-app:#fff; --fondo:#fff; --superficie:#fff; --superficie-2:#f3f4f6; --superficie-3:#eceef0;
    --inchiostro:#1d2327; --testo-2:#50575e; --testo-3:#646970; --bordo:#e7e8ea; --bordo-tenue:#eeeff1; --bordo-forte:#d4d6da;
    --ok:#11703a; --ok-bg:rgba(22,163,74,.12); --attesa:#a64b07; --attesa-bg:rgba(245,158,11,.15);
    --allarme:#b91c1c; --allarme-bg:rgba(239,68,68,.12); --neutro:#4b5563; --neutro-bg:rgba(107,114,128,.12);
    --info:#1d4ed8; --info-bg:rgba(59,130,246,.12);
    --pieno:#2271b1; --su-pieno:#fff;
  }
  body, .corpo{background:#fff !important;}
}