:root{
  /* 🎨 13/09/2026 — LA TAVOLOZZA DELLO STANDARD (comune/docs/DESIGN_STANDARD.md, v2).
     I nomi restano quelli di prima, cosi' non si tocca una sola riga del resto del foglio:
     cambiano i valori. Era una scala di verdi; lo standard di casa è il blu navy con il ciano
     per il fuoco, e gli stati verde/ambra/rosso/teal uguali in tutte le case.
     ⚠️ I nomi non si rinominano apposta: rinominarli avrebbe voluto dire toccare trecento righe
        per un guadagno estetico, ed è il modo più rapido di rompere qualcosa che non si vede. */
  --carta:#f4f8fc; --foglio:#ffffff; --barra:#062c74;
  --inchiostro:#173052; --inchiostro-2:#2b4467; --tenue:#64748b;
  --filo:#dbe6f1; --filo-forte:#c3d4e6;
  --studio:#16468f; --studio-chiaro:#eef4fa; --studio-scuro:#062c74;
  --ottone:#8a5a06; --ottone-fondo:#fdf3e2;
  --mattone:#a3231b; --mattone-fondo:#fbeceb;
  --ambra:#8a5a06; --ambra-fondo:#fdf3e2;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,serif;

  /* 🔗 13/09/2026 (task #1232) — GLI ALIAS DELLO STANDARD SOPRA I NOMI DI CASA.
     Il pezzo nuovo del «conto del cliente» è scritto coi nomi di comune/docs/DESIGN_STANDARD.md
     (--navy, --card, --ink…), questo foglio usa i suoi (--studio-scuro, --foglio, --inchiostro…).
     🚨 E l'ho scoperto nel modo giusto solo perché sono andato a guardare: in CSS una variabile
        che non esiste NON dà errore — il colore resta vuoto e il testo sparisce, senza una riga
        rossa da nessuna parte. Stessa famiglia di «una chiave si guarda, non si indovina».
     👉 Invece di rinominare trecento righe, i due vocabolari si legano qui, in un posto solo.
        Puntando alle variabili di casa, il tema scuro li segue da sé: non c'è un secondo
        elenco da tenere allineato. */
  --navy:var(--studio-scuro); --navy-2:var(--studio); --cyan:#6ec1e4;
  --bg:var(--carta); --card:var(--foglio); --sunken:var(--studio-chiaro);
  --ink:var(--inchiostro); --ink-2:var(--inchiostro-2); --mut:var(--tenue);
  --line:var(--filo); --line-soft:var(--filo);
  --amb:var(--ottone); --amb-bg:var(--ottone-fondo);
  --red:var(--mattone); --red-bg:var(--mattone-fondo);
  /* verde e teal non c'erano in questo foglio: sono i valori dello standard */
  --ok:#166534; --ok-bg:#e8f5ec;
  --teal:#0f6f7f; --teal-bg:#e7f5f7;
  --ombra:0 1px 2px rgba(6,44,116,.06), 0 6px 18px rgba(6,44,116,.07);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ok:#6ee7a5; --ok-bg:#12301f; --teal:#7fd4df; --teal-bg:#123037;
  --ombra:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --ok:#6ee7a5; --ok-bg:#12301f; --teal:#7fd4df; --teal-bg:#123037;
  --ombra:0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  /* 🌙 gli stessi nomi, i valori del tema scuro dello standard. */
  --carta:#0b1524; --foglio:#111e31; --barra:#0b1524;
  --inchiostro:#e6eefb; --inchiostro-2:#c3d2e8; --tenue:#8fa3bf;
  --filo:#22344f; --filo-forte:#31466a;
  --studio:#8fb5f0; --studio-chiaro:#0e1a2b; --studio-scuro:#b6cff7;
  --ottone:#f0c274; --ottone-fondo:#33260e;
  --mattone:#f39c95; --mattone-fondo:#341615;
  --ambra:#f0c274; --ambra-fondo:#33260e;
}}
:root[data-theme="dark"]{
  /* 🌙 gli stessi nomi, i valori del tema scuro dello standard. */
  --carta:#0b1524; --foglio:#111e31; --barra:#0b1524;
  --inchiostro:#e6eefb; --inchiostro-2:#c3d2e8; --tenue:#8fa3bf;
  --filo:#22344f; --filo-forte:#31466a;
  --studio:#8fb5f0; --studio-chiaro:#0e1a2b; --studio-scuro:#b6cff7;
  --ottone:#f0c274; --ottone-fondo:#33260e;
  --mattone:#f39c95; --mattone-fondo:#341615;
  --ambra:#f0c274; --ambra-fondo:#33260e;
}
*{box-sizing:border-box}
body{background:var(--carta);color:var(--inchiostro);font-family:var(--sans);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;text-wrap:balance}

.schermo{max-width:78rem;margin:0 auto;padding:0 1.1rem 5rem}

/* ── barra in alto ─────────────────────────────────── */
.capo{background:var(--barra);color:#e6ede8;margin:0 -1.1rem 0;padding:.85rem 1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.marchio{font-family:var(--serif);font-size:1.3rem;letter-spacing:.01em}
.marchio b{color:#5fbe8b;font-weight:400}
.capo .chi{margin-left:auto;display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:#9fb3a8}
.bollo{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(95,190,139,.16);color:#5fbe8b;border:1px solid rgba(95,190,139,.4);border-radius:2px;padding:.2rem .45rem}

/* ── schede ────────────────────────────────────────── */
.schede{display:flex;gap:.15rem;margin:0 -1.1rem;padding:0 1.4rem;background:var(--barra);border-bottom:1px solid var(--filo)}
.scheda{background:transparent;border:0;border-bottom:2px solid transparent;padding:.55rem .95rem .7rem;font-size:.9rem;font-weight:500;color:#9fb3a8}
.scheda[aria-selected="true"]{color:#fff;border-bottom-color:#5fbe8b}
.scheda:focus-visible{outline:2px solid #5fbe8b;outline-offset:-2px}
.scheda .n{font-family:var(--mono);font-size:.7rem;background:rgba(255,255,255,.1);border-radius:2px;padding:.1rem .3rem;margin-left:.4rem}
.scheda.urg .n{background:rgba(224,134,114,.22);color:#e08672}

/* ── la riga del periodo: la regola dei dati ───────── */
.periodo{
  background:var(--ambra-fondo);border:1px solid var(--ambra);border-left-width:3px;
  border-radius:3px;margin-top:1rem;padding:.75rem .95rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.periodo .icona{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ambra);font-weight:600;flex:none}
.periodo p{margin:0;font-size:.88rem;color:var(--inchiostro-2);flex:1;min-width:16rem}
.periodo strong{color:var(--inchiostro)}
.bottone{
  background:var(--foglio);border:1px solid var(--filo-forte);border-radius:3px;
  padding:.4rem .8rem;font-size:.85rem;font-weight:500;white-space:nowrap;
}
.bottone:hover{border-color:var(--studio);color:var(--studio-scuro)}
.bottone:focus-visible{outline:2px solid var(--studio);outline-offset:1px}
.bottone.pieno{background:var(--studio);border-color:var(--studio);color:#fff}
.bottone.pieno:hover{background:var(--studio-scuro);color:#fff}
.bottone[disabled]{opacity:.45;cursor:not-allowed}

/* ── testata dell'azienda aperta ───────────────────── */
.testata-az{display:flex;align-items:flex-end;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem}
.testata-az h1{font-size:1.55rem;font-weight:600;letter-spacing:-.015em}
.sotto{font-size:.85rem;color:var(--tenue);margin-top:.15rem;display:flex;gap:.75rem;flex-wrap:wrap}
.sotto span{display:flex;gap:.3rem;align-items:center}
.azioni{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

/* ── i totali ──────────────────────────────────────── */
.totali{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1px;background:var(--filo);border:1px solid var(--filo);border-radius:3px;margin-top:1rem;overflow:hidden}
.tot{background:var(--foglio);padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.tot .v{font-family:var(--mono);font-size:1.5rem;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tot .k{font-size:.78rem;color:var(--tenue)}
.tot.soldi{background:linear-gradient(180deg,var(--ottone-fondo),var(--foglio) 70%)}
.tot.soldi .v{color:var(--ottone)}
.tot.rosso .v{color:var(--mattone)}
.tot.manca .v{color:var(--ambra)}

/* ── filtri ────────────────────────────────────────── */
.filtri{display:flex;gap:.5rem;margin-top:1.3rem;flex-wrap:wrap;align-items:center}
.campo{position:relative;display:flex;align-items:center}
.campo input{
  font:inherit;font-size:.87rem;padding:.42rem .7rem .42rem 1.9rem;border-radius:3px;
  border:1px solid var(--filo-forte);background:var(--foglio);color:var(--inchiostro);min-width:14rem;
}
.campo.data input{padding-left:.7rem;min-width:9.5rem}
.campo input:focus{outline:2px solid var(--studio);outline-offset:-1px;border-color:var(--studio)}
.campo .lente{position:absolute;left:.6rem;color:var(--tenue);font-size:.9rem;pointer-events:none}
.filtri .sep{font-size:.85rem;color:var(--tenue)}
.filtri .esito{margin-left:auto;font-size:.83rem;color:var(--tenue);font-family:var(--mono)}

/* ── tabella ───────────────────────────────────────── */
.tavola{margin-top:.7rem;border:1px solid var(--filo);border-radius:3px;background:var(--foglio);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:52rem}
thead th{
  background:var(--carta);border-bottom:1px solid var(--filo-forte);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tenue);font-weight:500;text-align:left;padding:0;white-space:nowrap;
}
thead th button{
  width:100%;background:none;border:0;padding:.6rem .8rem;text-align:inherit;font:inherit;
  color:inherit;display:flex;align-items:center;gap:.35rem;
}
thead th button:hover{color:var(--studio)}
thead th button:focus-visible{outline:2px solid var(--studio);outline-offset:-2px}
thead th .fr{opacity:0;font-size:.85em}
thead th[aria-sort] .fr{opacity:1;color:var(--studio)}
thead th.dx button{justify-content:flex-end}
tbody td{border-bottom:1px solid var(--filo);padding:.55rem .8rem;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--studio-chiaro)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* 👤 il raggruppamento per dipendente: la persona è il capo, le prestazioni stanno sotto */
tr.capo-persona td{background:var(--studio-chiaro);border-top:1px solid var(--studio);border-bottom:1px solid var(--filo)}
tr.capo-persona:first-child td{border-top:0}
tr.capo-persona .persona{font-weight:700;font-size:.98rem}
tr.capo-persona .eur{font-weight:700}
tr.capo-persona:hover td{background:var(--studio-chiaro)}
tr.sotto-persona td:nth-child(3){padding-left:1.4rem;position:relative}
tr.sotto-persona td:nth-child(3)::before{
  content:"";position:absolute;left:.55rem;top:0;bottom:0;width:1px;background:var(--filo-forte);
}
tr.sotto-persona td{color:var(--inchiostro-2)}

/* 💶 il prezzo è un bottone: si vede che si può toccare */
button.prezzo{
  background:none;border:0;border-bottom:1px dashed var(--filo-forte);padding:.1rem .1rem 0;
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ottone);font-weight:500;
}
button.prezzo:hover{border-bottom-color:var(--ottone);background:var(--ottone-fondo);border-radius:2px}
button.prezzo:focus-visible{outline:2px solid var(--ottone);outline-offset:1px}
button.prezzo .segno{color:var(--studio);font-size:.8em}

dialog#dlg-prezzo{
  border:1px solid var(--filo-forte);border-radius:5px;background:var(--foglio);color:var(--inchiostro);
  padding:0;max-width:32rem;width:calc(100% - 2rem);box-shadow:0 24px 60px -20px rgba(0,0,0,.4);
}
dialog#dlg-prezzo::backdrop{background:rgba(10,20,15,.45)}
.dlg{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.dlg h3{font-size:1.15rem;font-weight:700;margin-bottom:.3rem}
.dp-riga{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--tenue);border-bottom:1px solid var(--filo);padding-bottom:.35rem}
.dp-riga b{color:var(--inchiostro);font-weight:500;text-align:right}
.dp-riga b.soldi{font-family:var(--mono);color:var(--ottone)}
.dp-campo{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--tenue);margin-top:.5rem}
.dp-campo input{
  font-family:var(--mono);font-size:1.25rem;padding:.5rem .7rem;border-radius:3px;
  border:1px solid var(--filo-forte);background:var(--carta);color:var(--inchiostro);
}
.dp-campo input:focus{outline:2px solid var(--studio);border-color:var(--studio)}
.dp-strade{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.6rem}
@media (max-width:520px){.dp-strade{grid-template-columns:1fr}}
.dp-strade .bottone{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.7rem .8rem;align-items:flex-start}
.dp-strade .bottone b{font-size:.95rem}
.dp-strade .bottone span{font-size:.8rem;color:var(--tenue);font-weight:400;line-height:1.35}
.dp-strade .bottone:first-child:hover{border-color:var(--ottone);background:var(--ottone-fondo)}
.dp-esito{
  background:var(--studio-chiaro);border:1px solid var(--studio);border-radius:3px;
  padding:.7rem .8rem;font-size:.86rem;color:var(--inchiostro-2);margin-top:.5rem;
}
.dp-esito b{color:var(--studio-scuro)}
.dp-esito b:first-child{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.25rem}
.dp-fondo{display:flex;align-items:center;gap:1rem;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--filo);flex-wrap:wrap}
.dp-fondo p{font-size:.8rem;color:var(--tenue);flex:1;min-width:14rem}
.dp-fondo b{color:var(--inchiostro-2)}
td.eur{color:var(--ottone);font-weight:500}
.persona{font-weight:500}
.esame{color:var(--inchiostro-2)}
.voce{font-size:.83rem;color:var(--tenue)}

/* stato come forma, non solo parola */
.pill{
  display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.04em;padding:.16rem .45rem;border-radius:2px;border:1px solid;white-space:nowrap;
}
.pill.ok{color:var(--studio-scuro);background:var(--studio-chiaro);border-color:var(--studio)}
.pill.no{color:var(--mattone);background:var(--mattone-fondo);border-color:var(--mattone)}
.pill.att{color:var(--ambra);background:var(--ambra-fondo);border-color:var(--ambra)}
.pill::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none}

/* gli appigli su ogni riga di persona */
.appigli{display:flex;gap:.28rem;flex-wrap:wrap}
.app{
  font-size:.72rem;padding:.18rem .42rem;border-radius:2px;border:1px solid var(--filo-forte);
  background:var(--foglio);color:var(--inchiostro-2);text-decoration:none;white-space:nowrap;
}
.app:hover{border-color:var(--studio);color:var(--studio-scuro);background:var(--studio-chiaro)}
.app:focus-visible{outline:2px solid var(--studio);outline-offset:1px}

/* ── il riquadro fuori totale ──────────────────────── */
.fuori{
  margin-top:1.1rem;border:1px solid var(--mattone);border-left-width:3px;border-radius:3px;
  background:var(--mattone-fondo);padding:.95rem 1.05rem 1.05rem;
}
.fuori h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mattone);margin-bottom:.55rem}
.fuori ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem}
/* 🧾 13/09/2026 — la riga ha TRE posti fissi, sempre gli stessi: cosa · perché · il gesto.
   Prima era un flex che andava a capo dove capitava, e da una riga all'altra le stesse
   informazioni finivano in punti diversi: l'occhio non poteva scorrere una colonna. */
.fuori li{display:grid;grid-template-columns:minmax(11rem,16rem) 1fr auto;gap:.35rem .9rem;
  align-items:baseline;font-size:.88rem;color:var(--inchiostro-2);
  padding:.4rem 0;border-top:1px solid rgba(176,74,58,.16)}
.fuori li:first-child{border-top:0}
.fuori li .che{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;min-width:0}
.fuori li b{font-weight:600;color:var(--inchiostro)}
.fuori li .volte{font-family:var(--mono);font-size:.78rem;color:var(--tenue);white-space:nowrap}
.fuori li .voce{min-width:0;overflow-wrap:anywhere}
@media (max-width:760px){
  .fuori li{grid-template-columns:1fr;gap:.25rem}
  .fuori li button{justify-self:start;margin-top:.2rem}
}
.fuori p{margin:.7rem 0 0;font-size:.82rem;color:var(--tenue)}

/* ── piede: la conferma ────────────────────────────── */
.piede{
  margin-top:1.3rem;background:var(--foglio);border:1px solid var(--filo-forte);border-radius:3px;
  padding:1rem 1.1rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
}
.piede .gran{font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--ottone);font-variant-numeric:tabular-nums}
.piede .nota{font-size:.83rem;color:var(--tenue);max-width:26rem}
.piede .fine{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ── scheda listini ────────────────────────────────── */
.pannello[hidden]{display:none!important}
.intro{margin-top:1.2rem;max-width:44rem;color:var(--inchiostro-2);font-size:.95rem}
.intro strong{color:var(--inchiostro)}
.barretta{display:inline-flex;align-items:center;gap:.4rem;width:100%}
.barretta .b{height:.5rem;border-radius:1px;background:var(--filo-forte);flex:none;min-width:2px}
.barretta .b.si{background:var(--studio)}
.barretta .b.no{background:var(--mattone)}
.barretta .e{font-family:var(--mono);font-size:.75rem;color:var(--tenue)}

@media (max-width:700px){
  .capo .chi{width:100%;margin-left:0}
  .azioni{margin-left:0;width:100%}
  .piede .fine{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.carico,.vuoto{padding:1.8rem 1rem;text-align:center;color:var(--tenue);font-size:.9rem}
.male{background:var(--mattone-fondo);border:1px solid var(--mattone);border-left-width:3px;
  border-radius:3px;padding:.7rem .9rem;margin-top:1rem;color:var(--mattone);font-size:.88rem}
.bene{background:var(--studio-chiaro);border:1px solid var(--studio);border-left-width:3px;
  border-radius:3px;padding:.7rem .9rem;margin-top:1rem;color:var(--studio-scuro);font-size:.88rem}
.torna{color:#9fb3a8;font-size:.85rem;text-decoration:none}.torna:hover{color:#fff}
.pill{max-width:100%;white-space:normal}
#risultati-az{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.6rem}
#risultati-az .bottone,.fuori li button{white-space:normal;text-align:left;max-width:100%}
.barra{height:.55rem;background:var(--studio);border-radius:1px;min-width:2px;display:block}
@media (max-width:760px){
  .schermo{padding:0 .7rem 4rem}
  table{min-width:0}
  .tavola{overflow:visible;border:0;background:transparent}
  thead{display:none}
  tbody tr{display:block;background:var(--foglio);border:1px solid var(--filo);
    border-radius:3px;margin-bottom:.5rem;padding:.55rem .7rem}
  tbody td{display:flex;justify-content:space-between;gap:.8rem;border:0;padding:.2rem 0;text-align:left}
  tbody td::before{content:attr(data-eti);font-family:var(--mono);font-size:.66rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--tenue);flex:none}
  tbody td.num{text-align:right}
  tr.capo-persona{border-left:3px solid var(--studio)!important}
  tr.sotto-persona td:nth-child(3){padding-left:0}
  tr.sotto-persona td:nth-child(3)::before{position:static;width:auto;background:none;
    content:attr(data-eti)}
  .totali{grid-template-columns:1fr 1fr}
  .filtri .campo input{min-width:0;width:100%}
  .filtri label.campo{flex:1 1 100%}
}

/* ═══════════════ DA TELEFONO: il flusso a passi del mockup approvato ═══════════════
   Non è il desktop schiacciato: è l'altra pagina che Pietro ha guardato e approvato —
   «tre tocchi, zero tastiera». Un livello per schermata (azienda → persone → totale),
   bottoni alti, e le due uscite di una proforma che si distinguono dal COLORE prima
   che dalla parola, perché da fuori ufficio si legge il colore. */
html body #video-fab,html body #foto-fab{display:none!important}
#tel{display:none}
@media (max-width:760px){body{font-size:15.5px}}
@media (max-width:760px){
  .schermo,.capo,.schede,.pannello{display:none!important}
  html body{padding-top:0!important;margin:0!important}
  .dpo-testata,.dpo-torna-sofia{display:none!important}
  #tel{display:flex;flex-direction:column;min-height:100vh;background:var(--carta)}
}
#tel .appbar{background:var(--studio);color:#fff;padding:.7rem .9rem;display:flex;align-items:center;gap:.6rem;position:sticky;top:0;z-index:5}
#tel .appbar .indietro{background:rgba(255,255,255,.16);border:0;color:#fff;width:1.9rem;height:1.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:1rem}
#tel .appbar .indietro[hidden]{display:none}
#tel .appbar .tit{font-weight:600;font-size:.98rem;line-height:1.2;flex:1;min-width:0}
#tel .appbar .tit small{display:block;font-weight:400;font-size:.72rem;opacity:.85}
#tel .appbar a{color:#fff;opacity:.85;text-decoration:none;font-size:.78rem;flex:none}
#tel .corpo-app{padding:.9rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
#tel .passo[hidden]{display:none}
#tel .passo{display:flex;flex-direction:column;gap:.6rem}
#tel .dice-app{font-size:.83rem;color:var(--tenue);padding:0 .15rem;margin:0}
#tel .dice-app b{color:var(--inchiostro)}
/* 📱 13/09/2026 — RIGHE, NON CENTO RIQUADRI.
   Lo standard lo dice e questa pagina lo rompeva: «le liste lunghe sono righe separate da una
   linea, non cento riquadri». Con il bordo colorato attorno a ogni persona la schermata
   diventava un mercato: venti riquadri uguali, tutti che gridano, e l'occhio non trova niente.
   Adesso: una riga, un filo sottile a separarle, il nome che si legge, una riga di grigio sotto,
   e l'importo a destra incolonnato. Il colore si spende su una cosa sola, la cifra. */
/* ⚠️ 13/09 — QUESTA GRIGLIA VALE SOLO PER LE RIGHE CON LA SPUNTA (le persone).
   Applicata a tutte, metteva il nome dell'azienda dentro una colonna da 1,6 rem: usciva una
   lettera per riga. Le righe delle aziende hanno due colonne, nome e importo. */
#tel .mega{width:100%;background:transparent;border:0;border-bottom:1px solid var(--filo);
  border-radius:0;padding:.9rem .3rem;min-height:4rem;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.1rem .7rem;
  box-shadow:none;text-align:left}
/* 🕳 13/09/2026 — IL NOME ANDAVA A CAPO UNA LETTERA PER VOLTA, ed è la seconda volta oggi
   che questa griglia morde: tre colonne dichiarate, ma la prima — la spunta — esiste SOLO
   quando si sta scegliendo chi escludere. Quando non c'è, il nome scivola nella colonna da
   1,6 rem e ci va a capo dentro, lettera per lettera. Nessun errore, solo illeggibile.
   👉 Tre colonne quando la spunta c'è, due quando non c'è. */
#tel .mega[data-tp]{grid-template-columns:minmax(0,1fr) auto}
#tel .mega[data-tp]:has(.spunta){grid-template-columns:1.6rem minmax(0,1fr) auto}
#tel .mega:last-child{border-bottom:0}
#tel .mega:active{background:var(--studio-chiaro)}
#tel .mega:focus-visible{outline:2px solid var(--studio);outline-offset:-2px}
#tel .mega .testo{min-width:0;display:flex;flex-direction:column;gap:.1rem}
#tel .mega .nome{font-weight:600;font-size:1rem;line-height:1.3;letter-spacing:-.01em;
  color:var(--inchiostro);overflow-wrap:anywhere}
#tel .mega .sotto{font-size:.8rem;color:var(--tenue);font-family:var(--mono)}
#tel .mega .cifra{font-family:var(--mono);font-weight:600;font-size:1.05rem;color:var(--ottone);white-space:nowrap}
#tel .mega .freccia{color:var(--filo-forte);font-size:1.2rem;flex:none}
#tel .mega .prest{display:flex;flex-wrap:wrap;gap:.22rem;margin-top:.15rem}
#tel .mega .prest .pr{font-size:.7rem;line-height:1.3;padding:.1rem .35rem;border-radius:2px;
  background:var(--carta);border:1px solid var(--filo);color:var(--tenue)}
#tel .mega .prest .pr b{font-family:var(--mono);font-weight:600;color:var(--ottone)}
#tel .mega .prest .pr.esclusa{color:var(--mattone);border-color:var(--mattone);background:var(--mattone-fondo)}
#tel .mega .cifra small{display:block;font:normal .68rem var(--sans);color:var(--mattone);white-space:normal;text-align:right}
#tel .mega .spunta{width:1.5rem;height:1.5rem;border-radius:6px;border:2px solid var(--filo-forte);flex:none;
  display:flex;align-items:center;justify-content:center;color:transparent;font-size:.9rem;font-weight:700}
#tel .mega.scelto{border-color:var(--studio);background:var(--studio-chiaro)}
#tel .mega.scelto .spunta{background:var(--studio);border-color:var(--studio);color:#fff}
#tel .mega.chiudi{background:var(--studio);border-color:var(--studio);color:#fff;justify-content:center;min-height:3.6rem}
#tel .mega.chiudi .nome{color:#fff}
#tel .mega.azione.fatt{border-color:var(--studio);background:var(--studio-chiaro)}
#tel .mega.azione.fatt .nome{color:var(--studio-scuro)}
#tel .mega.azione.ann{border-color:var(--mattone);background:var(--mattone-fondo)}
#tel .mega.azione.ann .nome{color:var(--mattone)}
#tel .mega.azione .sotto{font-family:var(--sans);letter-spacing:0}
#tel .mega.azione.fatt::before,#tel .mega.azione.ann::before{content:"";width:.55rem;align-self:stretch;border-radius:3px;flex:none}
#tel .mega.azione.fatt::before{background:var(--studio)}
#tel .mega.azione.ann::before{background:var(--mattone)}
#tel .somma{background:var(--foglio);border:1px solid var(--filo-forte);border-radius:12px;padding:.9rem}
#tel .somma .riga{display:flex;justify-content:space-between;gap:.6rem;font-size:.9rem;padding:.28rem 0}
#tel .somma .riga span:last-child{font-family:var(--mono)}
#tel .somma .riga.gran{border-top:1px solid var(--filo);margin-top:.35rem;padding-top:.6rem;font-size:1.1rem;font-weight:700}
#tel .somma .riga.gran b{font-family:var(--mono);color:var(--ottone)}
#tel .fuori-mini{background:var(--mattone-fondo);border:1px solid var(--mattone);border-radius:10px;
  padding:.65rem .8rem;font-size:.82rem;color:var(--inchiostro-2)}
#tel .fuori-mini b{color:var(--mattone);display:block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2rem}
#tel .conferma{background:var(--foglio);border:1px solid var(--filo-forte);border-radius:12px;padding:1rem}
#tel .conferma p{font-size:1.02rem;font-weight:600;line-height:1.35;margin:0}
#tel .conferma .cosa-succede{margin-top:.55rem;font-size:.87rem;font-weight:400;color:var(--inchiostro-2);
  border-top:1px solid var(--filo);padding-top:.55rem}
#tel .finito{text-align:center;padding:1.6rem .6rem;display:flex;flex-direction:column;gap:.6rem;align-items:center}
#tel .finito .cerchio{width:3.4rem;height:3.4rem;border-radius:50%;background:var(--studio);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem}
#tel .finito h3{font-size:1.15rem}
#tel .finito p{font-size:.88rem;color:var(--tenue);max-width:17rem}
#tel .barra-sotto{display:flex;border-top:1px solid var(--filo);background:var(--foglio);
  position:sticky;bottom:0;z-index:5}
#tel .barra-sotto .voce{flex:1;background:none;border:0;padding:.6rem .4rem .75rem;text-align:center;
  font-size:.78rem;font-weight:600;color:var(--tenue);display:flex;flex-direction:column;
  align-items:center;gap:.12rem;position:relative}
#tel .barra-sotto .voce.on{color:var(--studio-scuro)}
#tel .barra-sotto .voce .ico{font-size:1.05rem;line-height:1}
#tel .bolla{position:absolute;top:.35rem;right:50%;margin-right:-1.5rem;background:var(--mattone);
  color:#fff;font-family:var(--mono);font-size:.62rem;min-width:1.05rem;height:1.05rem;
  border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 .22rem}


/* 🔘 LE PILLOLE CHE CONTANO — 12/09/2026, task 1219, ordine di Pietro.
   «Bottoni grandi da premere, mai tendine». Ogni pillola porta dentro il suo numero: chi apre
   la pagina vede DOVE sta il lavoro senza cercare e senza scrivere niente.
   ⚠️ Il numero dev'essere un conto vero, mai una stima: una pillola che mente si preme una volta
      sola, poi non la guarda più nessuno. */
.pillole{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.9rem 0 .2rem}
.pillola{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem 1rem;
  border:1.5px solid var(--bordo,#d7e0da);border-radius:999px;background:#fff;color:#3d4b45;
  font:inherit;font-size:.92rem;font-weight:500;cursor:pointer;white-space:nowrap}
.pillola:hover{border-color:var(--studio)}
.pillola:focus-visible{outline:2px solid var(--studio);outline-offset:2px}
.pillola b{font-family:var(--mono);font-size:.86rem;font-weight:600}
.pillola[aria-pressed="true"]{background:var(--studio);border-color:var(--studio);color:#fff}
.pillola[disabled]{opacity:.45;cursor:not-allowed}


/* 📖 LA RIGA CHE SPIEGA — 12/09/2026, task 1224.
   Sta sopra un elenco e dice cosa vuol dire quello che si sta guardando. Non è una nota a piè
   di pagina: se una parola della pagina ha due significati possibili, la differenza si scrive
   dove la parola si legge, non in un manuale che non apre nessuno. */
.dice{
  max-width:78ch;margin:.9rem 0 .2rem;padding:.75rem 1rem;
  background:#f4f8f5;border-left:3px solid var(--studio,#2f7d55);border-radius:0 8px 8px 0;
  font-size:.9rem;line-height:1.55;color:#43514a}
.dice b{color:#22302a;font-weight:600}


/* l'unita' di misura sotto il nome della colonna, su una riga sua: attaccata di fianco si
   incolla alla colonna dopo e le intestazioni diventano una parola sola lunga. */
th small{display:block;font-size:.62rem;font-weight:400;letter-spacing:.04em;color:var(--tenue,#8a978f);text-transform:none}


/* 👆 LA RIGA SI APRE TUTTA — 13/09/2026. Il bersaglio è la riga intera, non un bottoncino
   ripetuto settantacinque volte. La freccia a destra dice che si puo' entrare, senza gridare. */
#corpoT tr[data-pcid]{cursor:pointer}
#corpoT tr[data-pcid]:hover{background:#f2f7f4}
#corpoT tr[data-pcid]:focus-visible{outline:2px solid var(--studio,#2f7d55);outline-offset:-2px}
#corpoT td.vai{text-align:right;color:var(--tenue,#8a978f);font-size:1.35rem;line-height:1;width:1.6rem}
#corpoT tr[data-pcid]:hover td.vai{color:var(--studio,#2f7d55)}


/* 📋 il titolo del riquadro «fuori dal totale» porta la spiegazione sotto, non di fianco */
/* ⚠️ il titolo del riquadro è in stampatello monospaziato: la spiegazione NO, sennò diventa
   un blocco di lettere tutte uguali che nessuno legge. Si riportano font e maiuscole a zero. */
#fuori-tit small{display:block;margin-top:.35rem;font-size:.84rem;font-weight:400;line-height:1.55;
  color:var(--tenue,#8a978f);max-width:70ch;font-family:var(--sans);text-transform:none;letter-spacing:0}
/* ✋ i due bottoni del prezzo: grandi, uno accanto all'altro, e la conseguenza sotto il titolo */
.dp-strade .bottone{min-height:56px;text-align:left;padding:.6rem .9rem;display:block}
.dp-strade .bottone b{display:block;font-size:.95rem}
.dp-strade .bottone span{display:block;font-size:.78rem;color:var(--tenue,#8a978f);font-weight:400;margin-top:.15rem}


/* 🖥 LA SCRIVANIA — 13/09/2026, l'impaginato del disegno.
   A sinistra l'elenco, che non se ne va mai; a destra il lavoro. Sotto i 900 px torna una
   colonna sola, perché su un telefono due colonne non ci stanno e la pagina non deve MAI
   scorrere di lato. */
.scrivania{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;align-items:start;
  border:1px solid var(--bordo,#d7e0da);border-radius:14px;overflow:hidden;background:#fff;margin-top:1rem}
.scrivania-elenco{border-right:1px solid var(--bordo,#d7e0da);background:#fbfdfc;padding:.9rem .8rem;
  max-height:78vh;overflow:auto;display:flex;flex-direction:column;gap:.6rem}
.scrivania-elenco .campo{width:100%}
.scrivania-lavoro{padding:1.1rem 1.3rem 1.3rem;min-width:0}
.scrivania-lavoro > .vuoto{padding:3rem 1rem;text-align:center;color:var(--tenue,#8a978f)}
/* la riga dell'elenco: nome, sotto i numeri, l'importo a destra. Bersaglio grande. */
.risultati-aziende .az-riga{display:grid;grid-template-columns:1fr auto;gap:.1rem .7rem;width:100%;
  padding:.6rem .55rem;border:0;border-top:1px solid var(--bordo-chiaro,#eef3f0);background:transparent;
  text-align:left;font:inherit;cursor:pointer;border-radius:8px;min-height:52px;align-items:center}
.risultati-aziende .az-riga:first-child{border-top:0}
.risultati-aziende .az-riga:hover{background:#f2f7f4}
.risultati-aziende .az-riga:focus-visible{outline:2px solid var(--studio,#2f7d55);outline-offset:-2px}
.risultati-aziende .az-riga b{font-size:.88rem;font-weight:600;color:var(--inchiostro,#22302a);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.risultati-aziende .az-riga small{grid-column:1;font-size:.76rem;color:var(--tenue,#8a978f)}
.risultati-aziende .az-riga .imp{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);
  font-size:.86rem;font-weight:600;color:var(--ambra,#8a5a06);white-space:nowrap}
.risultati-aziende .az-riga[aria-current="true"]{background:#e8f3ec;box-shadow:inset 3px 0 0 var(--studio,#2f7d55)}
@media (max-width:900px){
  .scrivania{grid-template-columns:1fr}
  .scrivania-elenco{border-right:0;border-bottom:1px solid var(--bordo,#d7e0da);max-height:none}
}


/* 🪜 I CINQUE PASSI — 13/09/2026, dal disegno. Una barra sottile sopra ogni passo dice a che
   punto siamo: verde quello che è fatto, colore di casa quello di adesso, grigio quello che
   deve venire. Il colore non è l'unica informazione: sotto c'è scritto cosa c'è e quanto. */
.passi{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin:1rem 0 .2rem}
.passo{position:relative;padding:.75rem 0 0}
.passo::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--bordo,#d7e0da)}
.passo.fatto::before{background:var(--studio,#2f7d55)}
.passo.adesso::before{background:var(--ambra,#c8891f)}
.passo .titolo{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue,#8a978f)}
.passo b{display:block;margin-top:.15rem;font-size:.9rem;font-weight:600;color:var(--inchiostro,#22302a)}
.passo:not(.fatto):not(.adesso) b{font-weight:500;color:var(--tenue,#8a978f)}
@media (max-width:760px){ .passi{grid-template-columns:repeat(2,1fr)} }


/* la riga premibile vale anche nella scheda dei listini */
#corpoL tr[data-pcid]{cursor:pointer}
#corpoL tr[data-pcid]:hover{background:#f2f7f4}
#corpoL tr[data-pcid]:focus-visible{outline:2px solid var(--studio,#2f7d55);outline-offset:-2px}
#corpoL td.vai{text-align:right;color:var(--tenue,#8a978f);font-size:1.35rem;line-height:1;width:1.6rem}


/* 🧰 la riga sotto i comandi: dice cosa succede premendo quello primario, prima di premerlo */
.sotto-piede{margin:.5rem .2rem 0;font-size:.82rem;color:var(--tenue);max-width:70ch}
.sotto-piede b{color:var(--inchiostro);font-weight:600}
.piede .fine{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}


/* 🧹 la carta della persona sul telefono: nome grande, una riga sotto, importo a destra */
#tel .mega .quante{display:block;margin-top:.15rem;font-size:.82rem;color:var(--tenue)}
#tel .mega .cifra small{display:block;margin-top:.1rem;font-size:.72rem;font-weight:400;color:var(--mattone)}


/* 📱 la spunta: un segno discreto, non un quadrato pieno che pesa quanto il nome */
#tel .mega .spunta{width:1.5rem;height:1.5rem;border-radius:50%;border:1.5px solid var(--filo-forte);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;color:transparent;flex:none}
#tel .mega.scelto .spunta{border-color:var(--studio);background:var(--studio);color:#fff}
/* ⚠️ e lo sbarrato vale SOLO per una persona esclusa a mano: le righe delle aziende non
   sono mai «scelte», e cosi' uscivano tutte sbarrate come se fossero annullate. */
/* 🚨 13/09/2026 — QUESTA RIGA BARRAVA TUTTE LE PERSONE, SEMPRE. Diceva «chi non è scelto è
   escluso», e andava bene finché si arrivava già in modalità scelta, con tutti spuntati. Dal
   13/09 si arriva per GUARDARE: le persone nascono ferme, cioè `fermo` e non `scelto`, e la
   regola le barrava una per una. Un'azienda si apriva e sembrava che nessuno fosse da fatturare.
   👉 Si barra solo chi è stato tolto DAVVERO, cioè `.tolto`. Una cura scritta per uno stato
   che non esiste più continua a funzionare: è il modo peggiore di sbagliare. */
#tel .mega[data-tp].tolto .nome,#tel .mega[data-tp].tolto .cifra{opacity:.45;text-decoration:line-through}
#tel .mega .cifra{font-family:var(--mono);font-weight:600;font-size:1.05rem;color:var(--ottone);
  white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
#tel .mega .quante{font-size:.8rem;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tel .mega .cifra small{display:block;margin-top:.05rem;font:normal .7rem/1.3 var(--sans);
  color:var(--mattone);white-space:nowrap}
/* le righe stanno dentro un foglio solo, con l'aria attorno: un contenitore invece di venti */
#t-persone,#t-aziende{background:var(--foglio);border:1px solid var(--filo);border-radius:12px;
  padding:0 .7rem;margin:.2rem 0 .8rem}


/* 🥬 LA TASTIERA — 13/09/2026, «come una bilancia del supermercato» (Pietro).
   Tasti grandi, uno sotto l'altro, che si premono col pollice senza guardare. */
/* 🟦 i mega bottoni dell'Area Clienti: a tutta larghezza, icona a sinistra, titolo col numero,
   e due righe che dicono cosa ci trovi. Si leggono da lontano e si premono senza mirare. */
#tel .tastiera{display:flex;flex-direction:column;gap:.8rem;margin:.5rem 0 1.2rem}
#tel .tasto{width:100%;background:var(--foglio);border:1px solid var(--filo);border-radius:16px;
  padding:1.15rem 1.1rem;display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem 1rem;
  align-items:start;text-align:left;font:inherit;color:var(--inchiostro)}
#tel .tasto:active{background:var(--studio-chiaro);border-color:var(--studio)}
#tel .tasto:focus-visible{outline:2px solid var(--studio);outline-offset:2px}
#tel .tasto .ico{font-size:1.7rem;line-height:1.1}
#tel .tasto .corpo{min-width:0;display:flex;flex-direction:column;gap:.35rem}
#tel .tasto .q{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:700;
  line-height:1.2;letter-spacing:-.015em}
#tel .tasto .conta{font-family:var(--mono);font-size:.82rem;font-weight:600;color:#fff;
  background:var(--studio);border-radius:999px;padding:.1rem .55rem}
#tel .tasto small{font-size:.88rem;color:var(--inchiostro-2);line-height:1.5}
/* 📅 13/09/2026 — un tasto senza icona (i mesi, i periodi veloci) usa LO STESSO involucro
   .corpo degli altri: titolo sopra, riga piccola sotto. Avevo provato con flex-wrap e il
   titolo si spezzava una parola per riga — il pattern che funziona non si reinventa. */
#tel .tasto>.q{flex:1 1 auto;min-width:0}
/* le due date del telefono: grandi, una per riga, col loro nome davanti in chiaro */
#tel .t-date{display:flex;flex-direction:column;gap:.7rem;margin:.2rem 0 1rem}
#tel .t-date .campo{display:flex;align-items:center;gap:.7rem;background:var(--foglio);
  border:1px solid var(--filo);border-radius:14px;padding:.7rem .9rem}
#tel .t-date .eti{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue);min-width:2.2rem}
#tel .t-date input{flex:1;min-width:0;border:0;background:transparent;color:var(--inchiostro);
  font:inherit;font-size:1.1rem;min-height:44px}
#tel .t-date input:focus{outline:none}
#tel #t-date-dice:empty{display:none}
/* 💶 IL TASTONE DEL TOTALE: la cifra prima di tutto, l'elenco sotto se lo vuoi */
#tel .tastone{width:100%;background:var(--studio);color:#fff;border:0;border-radius:14px;
  padding:1.15rem 1rem;display:flex;flex-direction:column;gap:.25rem;text-align:left;font:inherit;margin:.2rem 0 .7rem}
#tel .tastone .q{font-family:var(--mono);font-size:1.9rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#tel .tastone small{font-size:.8rem;opacity:.85}
#tel .tastone .giu{font-size:.82rem;opacity:.9;margin-top:.2rem}
/* 💶 13/09/2026 — lo stesso tastone, ma fermo: in cima al dettaglio di un'azienda dice il
   totale e non si preme, perché lì non c'è niente da aprire. */
#tel .tastone.fermo{cursor:default;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
#tel .tastone .avviso{background:rgba(255,255,255,.16);border-radius:6px;padding:.15rem .45rem;opacity:1}
/* 👀 una riga che si guarda e basta non finge di essere premibile: niente bordo attivo,
   niente reazione al tocco. Quando invece si sta scegliendo chi togliere, la riga esclusa
   si vede spenta e lo dice anche a parole, perché il colore da solo non basta. */
#tel .mega.fermo{cursor:default}
#tel .mega.fermo:active{background:var(--foglio);border-color:var(--filo)}
#tel .mega.tolto{opacity:.55;border-style:dashed}
#tel .mega.tolto .cifra{text-decoration:line-through}
#tel #t-escludi{margin-top:.4rem}
#tel #t-escludi.scelto{border-color:var(--studio);background:var(--studio-chiaro)}
#tel .tel-cerca{width:100%;margin:.2rem 0 .6rem}


/* la riga dell'azienda: nome che va a capo come deve, sotto i numeri, importo a destra */
#tel .mega[data-taz] .testo{min-width:0;display:flex;flex-direction:column;gap:.15rem}
#tel .mega[data-taz] .nome{white-space:normal;overflow-wrap:anywhere;font-size:1rem}
#tel .mega[data-taz] .sotto{font-size:.78rem;color:var(--tenue);font-family:var(--sans);white-space:normal}
#tel .mega[data-taz] .freccia{color:var(--filo-forte);font-size:1.2rem}


/* 🗂 LE TRE CARTE in fondo al dettaglio — 13/09/2026, dal disegno.
   Dicono a che punto sta il documento, la fattura e il listino. Il bordo di sinistra dice lo
   stato, ma il colore non è mai l'unica informazione: sotto c'è sempre scritto cosa manca. */
.carte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.carta{background:var(--foglio);border:1px solid var(--filo);border-left:3px solid var(--filo-forte);
  border-radius:10px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.carta.fatta{border-left-color:var(--studio)}
.carta.aperta{border-left-color:var(--ambra)}
.carta.manca{border-left-color:var(--mattone)}
.carta .eti{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
.carta b{font-size:1.02rem;font-weight:600;overflow-wrap:anywhere}
.carta small{font-size:.8rem;color:var(--tenue);line-height:1.45}
@media (max-width:760px){ .carte{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════════════
   💶 IL CONTO DEL CLIENTE — task #1232, 13/09/2026
   Ordine di Pietro: la schermata non deve girare intorno alla proforma. In cima il
   conto dell'azienda, sotto cinque viste sulla stessa azienda.
   Colori, caratteri e misure: comune/docs/DESIGN_STANDARD.md v2. Nessun valore
   scritto a mano che non passi da una variabile.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* la striscia: cinque celle, una linea sottile fra loro, nessuna ombra. Non sono
   cinque carte — è una cosa sola letta da sinistra a destra. */
.conto{display:grid;grid-template-columns:repeat(5,1fr);margin:14px 0 0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.conto .cella{padding:11px 13px;border-right:1px solid var(--line-soft);min-width:0}
.conto .cella:last-child{border-right:0}
.conto .et{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.conto .val{display:block;font-family:var(--mono);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.conto .sotto{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis}
.conto .cella.incassato .val{color:var(--ok)}
.conto .cella.scoperto{background:var(--red-bg)}
.conto .cella.scoperto .val{color:var(--red)}
.conto .cella.futuro{background:var(--sunken)}
.conto .cella.futuro .val{font-size:15px;font-weight:500;color:var(--ink-2)}

/* l'avviso che spiega perché «non risulta pagato» non è «non pagato» */
.avviso-conto{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 13px;
  border-radius:10px;border-left:3px solid var(--teal);background:var(--teal-bg);
  font-size:12.5px;color:var(--ink-2);line-height:1.45}
.avviso-conto.amb{border-left-color:var(--amb);background:var(--amb-bg)}
.avviso-conto .segno{font-family:var(--mono);font-weight:700;flex:none;color:var(--teal)}
.avviso-conto.amb .segno{color:var(--amb)}

/* le cinque viste */
.viste{display:flex;gap:2px;margin-top:18px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;overflow-x:auto}
.vista{border:0;background:transparent;padding:9px 13px;cursor:pointer;font-family:inherit;
  font-size:13.5px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;
  font-weight:500;display:flex;gap:7px;align-items:center;white-space:nowrap}
.vista:hover{color:var(--navy)}
.vista[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.vista:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:6px}
.vista .conta{font-family:var(--mono);font-size:10.5px;background:var(--sunken);
  border:1px solid var(--line);border-radius:20px;padding:1px 7px;color:var(--ink-2)}
.vista .conta:empty{display:none}
.vista[aria-selected="true"] .conta{background:var(--navy);border-color:var(--navy);color:var(--card)}
.vista-corpo{padding-top:14px}
.vista-corpo[hidden]{display:none}
.spiega-vista{color:var(--ink-2);font-size:13px;max-width:70ch;margin:0 0 12px}
.spiega-vista b{color:var(--ink)}

/* le pillole di stato: la parola c'è sempre, il colore non è l'unica informazione */
.pill-st{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;
  font-weight:500;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pill-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill-st.pagata{background:var(--ok-bg);color:var(--ok)}
.pill-st.attesa{background:var(--teal-bg);color:var(--teal)}
.pill-st.scade{background:var(--amb-bg);color:var(--amb)}
.pill-st.scaduta{background:var(--red-bg);color:var(--red)}
.pill-st.ignota,.pill-st.da_fatturare{background:var(--sunken);color:var(--mut)}
.pill-st.ignota::before,.pill-st.da_fatturare::before{background:transparent;
  box-shadow:inset 0 0 0 1.5px currentColor}

/* l'accordion dei dipendenti */
.capo-dip{cursor:pointer}
.capo-dip:hover{background:var(--sunken)}
.capo-dip:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.capo-dip .frec{font-family:var(--mono);color:var(--mut);display:inline-block;
  transition:transform .16s ease;width:.8em}
.capo-dip.aperto .frec{transform:rotate(90deg)}
.capo-dip .persona{font-weight:600}
tr.corpo-dip>td{padding:0;background:var(--sunken)}
table.dentro{width:100%;border-collapse:collapse;font-size:12.5px}
table.dentro td{padding:6px 10px;border-bottom:1px solid var(--line)}
table.dentro tr:last-child td{border-bottom:0}
table.dentro .quando{font-family:var(--mono);color:var(--ink-2);white-space:nowrap}

/* la catena dei solleciti */
.tit-catena{font-size:15.5px;font-weight:600;color:var(--navy);margin:26px 0 4px}
.catena{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:8px}
.gradino{padding:11px 13px;border-right:1px solid var(--line-soft);background:var(--card)}
.gradino:last-child{border-right:0}
.gradino .q{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.gradino b{display:block;font-size:14px;margin:4px 0 3px;color:var(--ink)}
.gradino span:last-child{font-size:12px;color:var(--mut);line-height:1.4;display:block}
.gradino.ora{background:var(--ok-bg)} .gradino.ora b{color:var(--ok)}
.gradino.manca{background:var(--sunken)}
.gradino.ultimo b{color:var(--red)}

/* la finestra del mese */
.velo{position:fixed;inset:0;background:rgba(6,20,45,.55);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:60}
.velo[hidden]{display:none}
.velo .finestra{background:var(--card);border:1px solid var(--line);border-radius:14px;
  width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(3,15,40,.4)}
.finestra-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:15px 18px 12px;border-bottom:1px solid var(--line)}
.finestra-testa h3{margin:0;font-size:17px;font-weight:600;color:var(--navy)}
.finestra-testa .sotto{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:3px}
.finestra-corpo{overflow-y:auto;padding:12px 18px 14px}
.finestra-piede{display:flex;justify-content:flex-end;gap:8px;padding:11px 18px;
  border-top:1px solid var(--line)}
.chiudi-fin{border:0;background:transparent;font-size:22px;line-height:1;color:var(--mut);
  cursor:pointer;padding:0 6px}
.chiudi-fin:hover{color:var(--ink)}

.bottone.piccolo{padding:4px 9px;font-size:12px}
.toast{position:fixed;right:18px;bottom:18px;z-index:80;padding:10px 14px;border-radius:10px;
  font-size:13px;box-shadow:var(--ombra);background:var(--ok-bg);color:var(--ok);
  border:1px solid var(--ok)}
.toast.no{background:var(--red-bg);color:var(--red);border-color:var(--red)}

/* ── IL TELEFONO: le stesse cinque viste, impilate ──────────────────────────────
   Ordine di Pietro: «la parte mobile deve fare le cose che fa la desktop». Quello
   che sparisce non sono le funzioni: sono le colonne che su uno schermo stretto
   non si leggono comunque. */
@media (max-width:900px){
  .conto{grid-template-columns:1fr 1fr}
  .conto .cella{border-bottom:1px solid var(--line-soft)}
  .conto .cella:nth-child(5){grid-column:1/-1;border-bottom:0}
  .conto .val{font-size:17px}
  .viste{gap:6px;border-bottom:0;padding-bottom:2px}
  .vista{border:1px solid var(--line);border-radius:20px;padding:8px 12px;min-height:44px;
    font-size:12.5px;margin-bottom:0}
  .vista[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--card)}
  .vista[aria-selected="true"] .conta{background:transparent;border-color:currentColor;color:inherit}
  .capo-dip td,.pill-st{min-height:44px}
  .capo-dip td{display:flex;align-items:center}
  .velo{padding:0;align-items:flex-end}
  .velo .finestra{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
  .catena{grid-template-columns:1fr}
  .gradino{border-right:0;border-bottom:1px solid var(--line-soft)}
  .gradino:last-child{border-bottom:0}
}
@media (max-width:520px){
  .conto{grid-template-columns:1fr}
  .conto .cella:nth-child(5){grid-column:auto}
}

/* 🔗 il numero di fattura come appiglio (task #1232): si vede che è cliccabile, ma non
   sembra un bottone — dentro una tabella dieci bottoni pieni fanno più rumore che servizio. */
.num-fatt{border:0;background:transparent;padding:0;font:inherit;font-family:var(--mono);
  color:var(--studio);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-style:dotted;text-decoration-thickness:1px}
.num-fatt:hover{text-decoration-style:solid;color:var(--studio-scuro)}
.num-fatt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.conto .sotto .num-fatt{color:inherit;text-decoration-color:currentColor}
/* la riga a cui si è arrivati si accende un attimo: senza, non si sa dove si è finiti */
@keyframes accendi{from{background:var(--ottone-fondo)}to{background:transparent}}
tr.accesa{animation:accendi 2.2s ease-out}
tr.accesa td{box-shadow:inset 0 0 0 9999px transparent}
@media (prefers-reduced-motion:reduce){
  tr.accesa{animation:none;background:var(--ottone-fondo)}
}

/* 🪗 i gruppi-persona della vista «Da fatturare»: chiusi di default (ordine di Pietro 13/09) */
.capo-persona[data-g]{cursor:pointer}
.capo-persona[data-g]:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.capo-persona .frec{font-family:var(--mono);color:var(--tenue);display:inline-block;
  width:.8em;transition:transform .16s ease}
.capo-persona:not(.chiuso) .frec{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.capo-persona .frec{transition:none}}

/* 🧾 la finestra di una fattura */
.num-fatt.grosso{font-weight:700;font-size:13.5px}
dl.dati-fatt{margin:14px 0 0;display:grid;gap:0;border:1px solid var(--filo);border-radius:12px;
  overflow:hidden}
dl.dati-fatt>div{display:grid;grid-template-columns:minmax(140px,34%) 1fr;gap:12px;
  padding:9px 13px;border-bottom:1px solid var(--filo)}
dl.dati-fatt>div:last-child{border-bottom:0}
dl.dati-fatt dt{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);align-self:center}
dl.dati-fatt dd{margin:0;color:var(--inchiostro)}
dl.dati-fatt dd .voce{display:block;font-size:11.5px;color:var(--tenue);margin-top:2px}
.manda-riga{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:11px 18px;
  border-top:1px solid var(--filo);background:var(--studio-chiaro)}
.manda-riga label{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue)}
.manda-riga input{flex:1;min-width:200px;padding:8px 10px;border:1px solid var(--filo);
  border-radius:8px;background:var(--foglio);color:var(--inchiostro);font:inherit;min-height:40px}
.manda-riga .voce{flex-basis:100%;font-size:12px;color:var(--tenue)}
@media (max-width:900px){
  .manda-riga{flex-direction:column;align-items:stretch}
  .manda-riga button,.manda-riga input{min-height:44px;width:100%}
  dl.dati-fatt>div{grid-template-columns:1fr;gap:2px}
  .finestra-piede{flex-wrap:wrap}
  .finestra-piede .bottone{flex:1;min-height:44px}
}

/* l'asterisco che dice «il documento ne portava un'altra»: piccolo, non urla, e si spiega
   passandoci sopra. Il posto dove la cosa si legge per intero è la riga sopra la tabella. */
.asterisco{color:var(--ottone);font-weight:700;margin-left:2px;cursor:help}
#spiega-termine a{color:var(--studio)}
/* 📐 la tabella delle fatture ha otto colonne: sotto i 1.100 px scorre DENTRO il suo riquadro,
   così la pagina non scorre mai di lato (regola dello standard). */
#tab-fatt{min-width:860px}
#tab-fatt td,#tab-fatt th{white-space:nowrap}
#tab-fatt td[data-eti="Periodo coperto"]{white-space:normal}

/* ── IL CONTO DEL CLIENTE DAL TELEFONO (task #1232) ────────────────────────────
   Quattro cifre grandi e tre viste: le stesse cose del computer, impilate. */
.t-conto{margin-bottom:12px}
.t-cifre{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.t-cifra{border:1px solid var(--filo);border-radius:12px;padding:9px 11px;background:var(--foglio)}
.t-cifra .et{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tenue)}
.t-cifra .v{display:block;font-family:var(--mono);font-size:16px;font-weight:600;margin-top:2px;
  font-variant-numeric:tabular-nums}
.t-cifra.verde .v{color:var(--ok)}
.t-cifra.rosso{background:var(--mattone-fondo)}
.t-cifra.rosso .v{color:var(--mattone)}
.t-viste{display:flex;gap:6px;overflow-x:auto;margin:12px 0 10px;padding-bottom:2px}
.t-vista{flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--filo);border-radius:22px;
  background:var(--foglio);color:var(--inchiostro-2);font:inherit;font-size:13px;font-weight:500;
  white-space:nowrap;cursor:pointer}
.t-vista[aria-selected="true"]{background:var(--studio-scuro);border-color:var(--studio-scuro);
  color:var(--foglio);font-weight:600}
.t-vista:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.t-carta{display:block;width:100%;text-align:left;border:1px solid var(--filo);border-radius:12px;
  background:var(--foglio);padding:0;margin-bottom:9px;font:inherit;color:var(--inchiostro);
  cursor:pointer;overflow:hidden}
.t-carta:active{background:var(--studio-chiaro)}
.t-carta .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 11px;border-bottom:1px solid var(--filo);background:var(--studio-chiaro);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--inchiostro-2)}
.t-carta .riga{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 11px;min-height:44px}
.t-carta .chi{font-size:13px;font-weight:600}
.t-carta .chi small{display:block;font-weight:400;font-size:11px;color:var(--tenue);margin-top:2px;
  font-family:var(--mono)}
.t-carta b{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:380px){ .t-cifre{grid-template-columns:1fr} }

/* 🕳 `hidden` NON VINCE SU UN display ESPLICITO, ed è un difetto che non dà errore: l'elemento
   resta lì, visibile, e il codice è convinto di averlo nascosto. Visto guardando la foto — la
   riga «Manda a» compariva sempre, anche prima di premere «Manda per email». */
.manda-riga[hidden]{display:none}
.t-viste[hidden],.t-conto[hidden]{display:none}

/* 📱 13/09/2026 — I TOCCHI SOTTO I 44 PX, misurati da telefono e non stimati.
   Regola di Pietro del 05/09: «da telefono» vuol dire CHE SI TOCCA, non che è stretto. Un
   bersaglio alto venti pixel su uno schermo da 390 si sbaglia, e chi lo sbaglia non capisce
   perché non è successo niente. */
@media (max-width:900px){
  .tocco{min-height:44px;min-width:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .appbar .indietro.tocco{padding:0 10px}
  .appbar a.tocco{padding:0 10px}
  .chiudi-fin.tocco{font-size:26px;line-height:1}
  /* la terza voce in basso: è un link, ma deve pesare come i due bottoni accanto */
  .barra-sotto a.voce{text-decoration:none}
  /* le due righe della scadenza, una sotto l'altra */
  .t-carta .chi small{display:block}
}

/* 📱 13/09/2026 — IL DISEGNO APPLICATO AL TELEFONO (artifact 5c79630e).
   Cinque schede in cima, cinque voci in basso, le carte che si toccano.
   (`#tel` esiste solo sul telefono: queste regole non hanno bisogno di un @media attorno.) */
/* 🚨 LE DUE BARRE INSIEME — Pietro l'ha visto subito: sotto quella nuova c'era ancora la
   vecchia. `hidden` sull'elemento non basta quando la regola gli dà un `display` esplicito:
   `#tel .barra-sotto{display:flex}` vince sull'attributo. Stessa famiglia del difetto di
   stamattina sulla riga «Manda a». Si spegne per nome, con la stessa forza. */
#tel .barra-sotto.vecchia{display:none!important}
/* 📌 «ICONE IN BASSO SEMPRE FISSE» (Pietro, 13/09): non `sticky`, che scorre via quando il
   contenitore finisce — `fixed`, inchiodata allo schermo, e il corpo si tiene lo spazio sotto. */
#tel .barra-sotto{position:fixed;left:0;right:0;bottom:0;z-index:20}
#tel .corpo-app{padding-bottom:76px}
@media (max-width:900px){
  #tel .barra-sotto.cinque{grid-template-columns:repeat(5,1fr);display:grid}
  .barra-sotto.cinque .voce{font-size:9.5px;line-height:1.2;padding:6px 1px 7px;min-height:52px}
  .barra-sotto.cinque .voce .ico{font-size:15px;display:block;margin-bottom:2px}
  /* le prestazioni di una persona, aperte col dito dentro la scheda «Persone» */
  .t-dentro{border:1px solid var(--filo);border-top:0;border-radius:0 0 12px 12px;
    margin:-9px 0 9px;background:var(--studio-chiaro);overflow:hidden}
  .t-riga-p{display:flex;justify-content:space-between;gap:10px;align-items:center;
    padding:9px 11px;border-bottom:1px solid var(--filo);min-height:44px;font-size:13px}
  .t-riga-p:last-child{border-bottom:0}
  .t-riga-p small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--tenue);
    margin-top:1px}
  .t-riga-p b{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
  .t-carta .cap .pill-st{text-transform:none;letter-spacing:0}
}

/* 🪗 L'ELENCO DEI DIPENDENTI, TUTTO DENTRO UN ACCORDION (ordine di Pietro, 13/09).
   Chiudere ogni persona non bastava: con 120 dipendenti restavano 120 righe-capo. */
details.elenco-dip{border:1px solid var(--filo);border-radius:12px;overflow:hidden;
  background:var(--foglio);margin-top:.8rem}
details.elenco-dip>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;
  cursor:pointer;list-style:none;min-height:48px;font-size:14px}
details.elenco-dip>summary::-webkit-details-marker{display:none}
details.elenco-dip[open]>summary{border-bottom:1px solid var(--filo);background:var(--studio-chiaro)}
details.elenco-dip>summary .frec{font-family:var(--mono);color:var(--tenue);
  transition:transform .16s ease;display:inline-block;width:.8em}
details.elenco-dip[open]>summary .frec{transform:rotate(90deg)}
details.elenco-dip>summary b{font-weight:600;color:var(--inchiostro)}
details.elenco-dip>summary .dip-tot{margin-left:auto;font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ottone)}
details.elenco-dip .tavola{border:0;border-radius:0;margin:0}
details.elenco-dip:focus-within{outline:none}
details.elenco-dip>summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){details.elenco-dip>summary .frec{transition:none}}

/* 🧾 LE RIGHE DENTRO LA FINESTRA DI UNA FATTURA — task #1273, 18/09/2026.
   Tabella sua e non `.tavola`: quella ha `min-width:52rem` e dentro una finestra larga 640
   costringerebbe a trascinare di lato per leggere l'importo. */
.ff-tit-el{margin:18px 0 6px;font-size:13px;letter-spacing:.01em;color:var(--inchiostro)}
.ff-tav{border:1px solid var(--filo);border-radius:10px;overflow:hidden;background:var(--foglio)}
.ff-tav table{min-width:0;width:100%;border-collapse:collapse}
.ff-tav thead th{padding:.5rem .6rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:500;
  text-align:left;background:var(--carta);border-bottom:1px solid var(--filo-forte)}
.ff-tav thead th.dx{text-align:right}
.ff-tav tbody td{padding:.45rem .6rem;border-bottom:1px solid var(--filo);font-size:13px;
  vertical-align:top}
.ff-tav tbody tr:last-child td{border-bottom:0}
.ff-tav td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;
  white-space:nowrap}
.ff-tav td.mono{font-family:var(--mono);color:var(--tenue);white-space:nowrap}
.ff-vuoto{margin:18px 0 0;font-size:13px;color:var(--tenue)}
details.ff-det{margin-top:14px;border:1px solid var(--filo);border-radius:10px;overflow:hidden;
  background:var(--foglio)}
details.ff-det>summary{padding:10px 14px;cursor:pointer;min-height:44px;display:flex;
  align-items:center;font-size:13px;color:var(--inchiostro)}
details.ff-det[open]>summary{border-bottom:1px solid var(--filo);background:var(--studio-chiaro)}
details.ff-det .ff-tav{border:0;border-radius:0}