/* ui/componenti.css — la forma canonica dei componenti di M-SUITE (ondata zero, 04/10/2026).
   Si carica per ULTIMO. Le classi legacy che fanno la stessa cosa sono alias della canonica:
   spariscono dai template nelle ondate successive. Spec: vault m-suite/catalogo-grafico. */

/* ---- testo e titoli ------------------------------------------------------------ */
body{font-family:var(--font-testo);color:var(--ink)}
.content h1,.page-head h1,.h-page{font-family:var(--font-titoli);font-weight:600;font-size:var(--fs-xl);
  color:var(--blu);line-height:1.2}
.hello h1{font-size:var(--fs-xxl)}                 /* il saluto della Home resta più grande */
/* Titoli dentro la pagina (ondata 1). Classi da scegliere, MAI una regola su h2/h3: cambierebbe
   le sezioni non ancora armonizzate. Il blocco è l'h2 di allora al token più vicino (19 → 18 px,
   margini .2em/.5em); la parte di un blocco dal 13/10/2026 è 15 px (era 18 come il blocco: la
   gerarchia non si vedeva). Ivar Soft ha solo il 600: il grassetto del browser rendeva già quello.
   La riga resta quella ereditata (1.5). */
.titolo-blocco{font-family:var(--font-titoli);font-weight:600;font-size:var(--fs-lg);color:var(--blu);
  margin:var(--sp-1) 0 var(--sp-2)}
.titolo-sotto{font-family:var(--font-titoli);font-weight:600;font-size:var(--fs-base);color:var(--ink);
  margin:var(--sp-4) 0}

/* ---- pulsanti -------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  box-sizing:border-box;min-height:var(--h-ctrl);padding:0 var(--sp-4);
  font-family:var(--font-testo);font-size:var(--fs-base);font-weight:600;line-height:1.2;
  border:1px solid var(--line-forte);border-radius:var(--r-ctrl);
  background:var(--card);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap}
/* il pulsante spento non reagisce al passaggio del mouse; :where non cambia il peso (11/10/2026) */
.btn:where(:not(:disabled):not([aria-disabled="true"])):hover{background:var(--bg)}
.btn-primary{background:var(--blu);border-color:var(--blu);color:var(--su-scuro)}
.btn-primary:where(:not(:disabled):not([aria-disabled="true"])):hover{background:var(--blu-d);border-color:var(--blu-d)}
.btn-danger,.btn-warn{background:var(--card);border-color:var(--errore-bordo);color:var(--errore)}
.btn-danger:where(:not(:disabled):not([aria-disabled="true"])):hover,
.btn-warn:where(:not(:disabled):not([aria-disabled="true"])):hover{background:var(--errore-fondo)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn-sm{min-height:var(--h-ctrl-sm);padding:0 var(--sp-2);font-size:var(--fs-md)}
/* l'icona dentro un pulsante (ui.pulsante(icona=…), 13/10/2026): i fogli dei moduli che la vogliono diversa (15 px in Fatturazione da ClickUp) arrivano dopo e vincono */
.btn .ic{width:16px;height:16px;flex:none}

/* ---- etichette di stato ------------------------------------------------------------ */
.pill,.badge,.tag{display:inline-block;font-family:var(--font-testo);font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;
  padding:0 var(--sp-2);border-radius:var(--r-pill);white-space:nowrap}
.pill-ok,.pill.done,.badge.green,.tag-real{background:var(--ok-fondo);color:var(--ok)}
.pill-attesa,.pill.wait,.badge.orange,.tag-dry{background:var(--attesa-fondo);color:var(--attesa)}
.pill-errore,.badge.red{background:var(--errore-fondo);color:var(--errore)}
.pill-neutro,.pill.todo,.badge.gray{background:var(--neutro-fondo);color:var(--neutro)}
.pill-info,.pill.prog,.badge.blue{background:var(--info-fondo);color:var(--info)}
.pill-ok-pieno{background:var(--ok);color:var(--su-scuro)}   /* l'ultimo passo di un lavoro, dove «ok» c'è già per i passi prima (Bilanci SRL: Inviato) */

/* ---- persone, Rating e regime (19/10 e 26/10/2026, macro ui.persona, ui.rating, ui.regime; valori in app/core/aspetto.py) ---- */
.persona{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border-radius:var(--r-pill);background:var(--neutro);color:var(--su-scuro);font-family:var(--font-testo);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;line-height:1;vertical-align:middle}
.persona-1{background:var(--blu-3)}
.persona-2{background:var(--viola)}
.persona-3{background:var(--ok)}
.persona-4{background:var(--attesa)}
.persona-5{background:var(--indaco)}
.persona-6{background:var(--giallo)}
.persona-7{background:var(--blu-d)}
.rating{display:inline-block;font-family:var(--font-testo);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.5;padding:0 var(--sp-2);
  border-radius:var(--r-pill);white-space:nowrap;background:var(--neutro-fondo);color:var(--neutro)}
.rating-1{background:var(--blu);color:var(--su-scuro)}
.rating-2{background:var(--blu-3);color:var(--su-scuro)}
.rating-3{background:var(--blu-5);color:var(--blu)}
.rating-4{background:transparent;color:var(--blu-3);box-shadow:inset 0 0 0 1px var(--blu-5)}
.rating-5{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-forte)}
/* il regime contabile del Cliente (26/10/2026, macro ui.regime): un colore per valore in tutta la SUITE;
   Minimi e ogni altro valore restano neutri, col bordo */
.regime{display:inline-block;font-family:var(--font-testo);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.5;padding:0 var(--sp-2);
  border-radius:var(--r-pill);white-space:nowrap;background:transparent;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line-forte)}
.regime-ordinario{background:var(--indaco-fondo);color:var(--indaco);box-shadow:none}
.regime-semplificato{background:var(--viola-fondo);color:var(--viola);box-shadow:inset 0 0 0 1px var(--viola-bordo)}
.regime-forfettario{background:var(--giallo-fondo);color:var(--giallo);box-shadow:none}
/* il suggerimento di [data-suggerimento] (app.js): fisso sulla pagina, così nessun riquadro che scorre lo taglia */
.suggerimento{position:fixed;z-index:60;top:0;left:0;max-width:280px;padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-tag);background:var(--blu);color:var(--su-scuro);font-family:var(--font-testo);
  font-size:var(--fs-sm);font-weight:600;line-height:1.4;pointer-events:none;box-shadow:var(--ombra-1)}
.suggerimento[hidden]{display:none}

/* ---- riquadri (niente più alto di oggi: .panel-b era 14 px, l'ombra l'aveva solo .card) ---- */
.panel,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.card{padding:var(--sp-4);margin-bottom:var(--sp-4);box-shadow:var(--ombra-1)}
.panel-h{padding:var(--sp-3) var(--sp-4)}
.panel-b{padding:var(--sp-3) var(--sp-4)}
/* lo stato vuoto dentro un riquadro (ui.vuoto): il riquadro ha già l'imbottitura (13/10/2026: prima era un secondo panel-b, +24 px) */
.testo-vuoto{margin:0}

/* ---- avvisi ------------------------------------------------------------------------ */
.alert{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-ctrl);font-size:var(--fs-md);
  background:var(--attesa-tenue);color:var(--attesa);--muted:var(--muted-su-fondo)}
/* Il flash resta un blocco di testo (un <strong> in mezzo non lo spezza in colonne) e senza
   sfondo: il tono lo dà la categoria di flash(), una regola per ognuna usata nel codice. */
.flash{display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-ctrl);font-size:var(--fs-md)}
.alert-info,.flash-info{background:var(--info-fondo);color:var(--info);border-color:var(--info-fondo);--muted:var(--muted-su-fondo)}
.alert-ok,.flash-ok,.flash-success{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok-fondo);--muted:var(--muted-su-fondo)}
.alert-attesa,.flash-warn{background:var(--attesa-tenue);color:var(--attesa);border-color:var(--attesa-fondo);--muted:var(--muted-su-fondo)}
.alert-errore,.alert-error,.flash-error,.flash-err{background:var(--errore-fondo);color:var(--errore);
  border-color:var(--errore-fondo);--muted:var(--muted-su-fondo)}

/* ---- tabelle: densa (.tbl) e normale (.dtable), stesse intestazioni ---------------- */
table.tbl th,.dtable th{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);text-align:left}
table.tbl th,table.tbl td{padding:var(--sp-2) var(--sp-2)}
table.tbl td{font-size:var(--fs-md)}                  /* il testo più grande solo nelle celle */
.dtable th{padding:var(--sp-2) var(--sp-3);background:var(--tenue)}
.dtable td{padding:var(--sp-3) var(--sp-3);font-size:var(--fs-md)}
table.tbl tr:hover td,.dtable tr:hover td{background:var(--tenue)}

/* ---- riga cliccabile (09/10/2026): <tr data-apri="url"> ------------------------------------
   La riga intera porta alla scheda, niente colonna «Apri» (regola R9 del guardiano; l'ascoltatore è in
   app.js). Il cursore e il passaggio dicono che si apre. Il passaggio va sulle CELLE perché le due
   regole comuni qui sopra e in console.css le colorano già con --tenue e coprirebbero il fondo della
   riga: questa pesa (0,3,5) contro le loro (0,3,4), (0,2,3) e (0,2,2), e la riga «al legale» di
   Solleciti (0,5,4) e ogni altra regola di sezione più specifica continuano a vincere. L'anello del
   fuoco sta dentro la riga (offset negativo): fuori sporgerebbe sulle righe vicine.
   La cella che NON apre la riga (la stessa regola di app.js: un controllo dentro, campi nascosti
   esclusi, o [data-non-apre]) ha il cursore normale: la mano promette «qui si apre». Il passaggio
   resta sulla riga intera. */
tr[data-apri]{cursor:pointer}
/* al passaggio il grigio della riga diventa --muted-su-fondo: --muted su --info-tenue arriva a 4,35:1 */
body.app table tbody tr[data-apri]:hover td,
body.app table tbody tr[data-apri]:hover th{background:var(--info-tenue);--muted:var(--muted-su-fondo)}
tr[data-apri]:focus-visible{outline:2px solid var(--blu-4);outline-offset:-2px}
tr[data-apri] :is(td,th):is([data-non-apre],:has(input:not([type=hidden]),select,textarea,button)){cursor:default}

/* ---- campi: riempie solo i vuoti (specificità zero), non scavalca mai una regola esistente ---- */
/* Ora e data-ora compresi (ondata 2): senza, il data-ora della Newsletter › Riepilogo restava un
   riquadro di sistema in mezzo ai campi della suite. */
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=datetime-local],input[type=search],input[type=tel],
input[type=url],select,textarea){
  box-sizing:border-box;font-family:var(--font-testo);font-size:var(--fs-base);color:var(--ink);
  background:var(--card);border:1px solid var(--line-forte);border-radius:var(--r-ctrl);
  padding:var(--sp-2) var(--sp-3)}
/* Altezza unica dei campi su una riga (ondata 2): 36 px, 28 nei contesti densi. Il padding in
   verticale va a zero perché l'altezza la decide height: con il padding di prima (9+9) il testo di
   15 px avrebbe 16 px di spazio e in una select verrebbe tagliato in basso. Specificità zero: un
   modulo che sceglie già un'altezza (Time Sheet 40) la tiene. Ora e data-ora sono
   campi su una riga come gli altri (Scadenziario › Nuovo li mette accanto a un numero). */
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=time],input[type=datetime-local],input[type=search],input[type=tel],
input[type=url],select:not([multiple]):not([size])){
  height:var(--h-ctrl);padding-top:0;padding-bottom:0}
/* :is() pesa quanto input[type=text] di style.css (0,1,1) e arriva dopo: vince su padding e testo */
:is(input,select).campo-piccolo{height:var(--h-ctrl-sm);padding:0 var(--sp-2);font-size:var(--fs-md)}
/* Campo con l'etichetta sopra (ondata 1; macro ui.campo). La forma delle etichette di Time Sheet:
   colonna, 12 px semibold grigio, e fra testo e controllo gli 8 px che si vedono oggi (lì erano
   4 di gap più i 4 sopra che style.css dà ai campi; le date, senza quel margine, ne avevano 4).
   Qui il margine del controllo va a zero e lo spazio lo dà solo il gap, uguale per tutti. Lo
   spazio fra un campo e l'altro lo dà il contenitore: niente dei 10 px sopra e sotto di ogni label. */
.campo{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}
.campo > :is(input,select,textarea){margin:0}
.campo-etichetta{display:block;margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.campo-aiuto{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
/* Riga di controlli (filtri, «aggiungi»): i campi della suite sono larghi al 100% e qui ognuno
   prenderebbe una riga intera. :is() e non :where(): input[type=text]{width:100%} di style.css
   pesa 0,1,1 e con :where() (0,1,0) vincerebbe lui. */
.barra-filtri{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2)}
.barra-filtri :is(input,select){width:auto}

/* ---- finestra: un dialogo sopra la pagina (ondata 2; Home e arretrati Time Sheet) ---------- */
.finestra-velo{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);background:rgba(20,30,50,.42)}
.finestra-velo[hidden]{display:none}
.finestra-velo-forte{z-index:10000;background:rgba(22,12,48,.62)}   /* il richiamo che blocca: sopra a tutto */
.finestra{width:100%;max-width:440px;padding:var(--sp-5);text-align:center;background:var(--card);
  border-radius:var(--r-card);box-shadow:0 24px 60px -24px rgba(20,30,60,.5)}
.finestra-larga{max-width:520px}
.finestra-segnale{border-top:6px solid var(--attesa-accento)}       /* chiede di fare qualcosa */
.finestra-icona{font-size:var(--fs-xxl);line-height:1;margin-bottom:var(--sp-2)}
.finestra .titolo-blocco{margin:0 0 var(--sp-2)}
.finestra p{margin:0 0 var(--sp-2);font-size:var(--fs-md);line-height:1.5;color:var(--ink)}
/* I passi di un avviso «da fare» (core/avvisi.py): un elenco si legge allineato a sinistra. */
.finestra .avviso-passi{margin:0 0 var(--sp-2);padding-left:var(--sp-5);text-align:left;font-size:var(--fs-md);
  line-height:1.5;color:var(--ink)}
.finestra .avviso-passi li{margin-bottom:var(--sp-1)}
/* La fascia in Home che resta finché il compito non è fatto: niente chiusura. */
.avviso-fisso{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.avviso-fisso .btn-primary{color:var(--su-scuro)}   /* altrimenti vince `.alert a{color:inherit}` */
.finestra-azioni{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-3);
  margin-top:var(--sp-4)}

/* ---- avviso con azione: banner in testa alla pagina (arretrati, cose da fare; ondata 2) ---- */
.avviso-azione{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border:1px solid;border-left-width:4px;border-radius:var(--r-card)}
.avviso-azione-icona{font-size:var(--fs-lg);line-height:1.1}
.avviso-azione-corpo{flex:1;min-width:0}
.avviso-azione-titolo{font-size:var(--fs-base);font-weight:700;margin-bottom:var(--sp-1)}
.avviso-azione-testo{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
.avviso-azione-link{display:inline-block;padding:var(--sp-1) var(--sp-3);border:1px solid;
  border-radius:var(--r-ctrl);background:var(--card);font-size:var(--fs-md);font-weight:600;
  text-decoration:none;white-space:nowrap}
.avviso-azione-attesa{background:var(--attesa-tenue);border-color:var(--attesa-accento);color:var(--attesa);--muted:var(--muted-su-fondo)}
.avviso-azione-attesa .avviso-azione-link{border-color:var(--attesa-accento);color:var(--attesa)}
.avviso-azione-info{background:var(--info-tenue);border-color:var(--blu-6);border-left-color:var(--blu-3);
  color:var(--blu-3);--muted:var(--muted-su-fondo)}
.avviso-azione-info .avviso-azione-link{border-color:var(--blu-6);color:var(--blu-3)}
.avviso-azione-errore{background:var(--errore-tenue);border-color:var(--errore-bordo);border-left-color:var(--errore);
  color:var(--errore);--muted:var(--muted-su-fondo)}
.avviso-azione-errore .avviso-azione-link{border-color:var(--errore-bordo);color:var(--errore)}

/* ---- utilità di layout (per non scrivere spazi a mano nei template) ---------------- */
.stack-1,.stack-2,.stack-3,.stack-4,.stack-5,.stack-6{display:flex;flex-direction:column}
.riga-1,.riga-2,.riga-3,.riga-4,.riga-5,.riga-6{display:flex;flex-wrap:wrap;align-items:center}
.stack-1,.riga-1{gap:var(--sp-1)} .stack-2,.riga-2{gap:var(--sp-2)} .stack-3,.riga-3{gap:var(--sp-3)}
.stack-4,.riga-4{gap:var(--sp-4)} .stack-5,.riga-5{gap:var(--sp-5)} .stack-6,.riga-6{gap:var(--sp-6)}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}


/* Annuncio di una sezione (core/annunci.py, 11/10/2026): un avviso info con i pulsanti a destra,
   che su uno schermo stretto vanno sotto il testo. «M-SUITE» non si spezza sul trattino. */
.annuncio{flex-wrap:wrap;margin-bottom:var(--sp-4)}
.annuncio-testo{flex:1 1 320px}
.annuncio-intero{white-space:nowrap}
.annuncio[hidden]{display:none}
/* I pulsanti sono link dentro un avviso: senza queste due regole vince «.alert a{color:inherit}» di
   console.css e il testo del pulsante principale sparisce sul fondo scuro. */
.annuncio .btn{color:var(--ink)}
.annuncio .btn-primary{color:var(--su-scuro)}
/* La firma Clawd nelle anteprime dei messaggi che la SUITE scrive su ClickUp (core/clickup_firma.py,
   15/10/2026): l'immagine dell'emoji, grande quanto il testo che la circonda. */
.firma-clawd{width:1.25em;height:1.25em;vertical-align:text-bottom}