/* griglia.css - la cronostriscia (vista Anno), la cella a 4 segmenti,
   la vista Mese e i pannelli di controllo.  #ANCHOR: css-griglia */

/* ==========================================================  VISTA ANNO == */
/* La colonna dei nomi prende tutto lo spazio che avanza: le destinazioni sono
   lunghe e la griglia dei mesi ha larghezza fissa. Sotto il minimo si scorre.
   Ogni cliente e' una CARTA (`.blocco`) staccata dalle altre da un filo
   d'aria: la separazione la fa lo spazio, non un bordo forte. Il rientro ai
   lati e' `--rientro` e torna nello sticky della colonna nome. */
.crono {
  min-width: calc(var(--col-min) + 12 * var(--passo-mese) + var(--col-tot) + 2 * var(--rientro));
  padding: 0 var(--rientro) 40vh;
}

.riga {
  display: grid;
  grid-template-columns: minmax(var(--col-min), 1fr)
                         calc(12 * var(--passo-mese)) var(--col-tot);
  align-items: center;
}

/* -- intestazione mesi, appiccicata sotto la barra strumenti -------------- */
/* Una fascia sola: nome del mese, sotto "chiuse/in scadenza" e un filo di 2px
   che si riempie di verde (`--p`) - la linea di stato della barra strumenti
   spezzata in dodici. Prima erano due righe sticky impilate (mesi + totali):
   con testa e barra strumenti facevano quattro fasce prima del primo cliente. */
.crono-testa {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo);
  height: 48px;
}
.crono-testa .col-nome {
  position: sticky; left: var(--rientro); z-index: 2; height: 100%;
  display: flex; align-items: center; gap: 12px; padding-left: 8px;
  font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tenue);
  background: inherit;
}
.crono-testa .col-nome i { font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--tenue-2); }
.mesi { display: grid; grid-template-columns: repeat(12, var(--passo-mese)); height: 100%; }
.crono-testa .m {
  display: grid; justify-items: center; align-content: center; gap: 4px;
  font: 600 var(--t-micro)/1 var(--f-dato); letter-spacing: .06em; color: var(--tenue);
  text-transform: uppercase;
}
/* Il mese corrente: la lettera si accende; la colonna prosegue in `.mese-oggi`. */
.crono-testa .m.oggi { color: var(--marchio-scuro); }
.crono-testa .col-tot {
  text-align: right; padding-right: 10px;
  font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--tenue);
}
.tm {
  display: grid; justify-items: center; gap: 3px;
  font: 500 var(--t-micro)/1 var(--f-dato); color: var(--tenue-2);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-transform: none;
}
.tm::after {
  content: ""; width: 22px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--completa) var(--p, 0%), var(--st-vuoto) 0);
  transition: background var(--medio);
}
.tm:empty { visibility: hidden; }
.tm.pieno { color: var(--completa-testo); }

/* -- la carta del cliente ------------------------------------------------- */
/* NB: NON chiamarla .gruppo, in base.css .gruppo e' il segmented control.
   Quando tutte le mappature dovute del cliente sono chiuse (`.completo`) la
   carta intera si accende: bordo e alone verdi, fondo appena tinto. E' il
   terzo livello dello stesso segnale che parte dalla cella e passa dalla
   riga del sito (`.riga-srv.a-posto`): una cosa fatta si vede da lontano. */
.blocco {
  margin-top: 8px; border-radius: var(--r-carta);
  background: var(--superficie);
  box-shadow: var(--ombra-1), inset 0 0 0 1px var(--bordo-lieve), inset 0 1px 0 var(--lucido);
  transition: box-shadow var(--medio), background var(--medio);
}
.blocco:first-of-type { margin-top: 10px; }
.blocco.completo {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--completa) 40%, transparent),
              0 8px 22px -12px color-mix(in srgb, var(--completa) 55%, transparent);
}
/* LA FESTA (anno.js, aggiorna dopo la spunta): quando l'ULTIMA spunta chiude la
   mappatura di un cliente, la carta si accende di verde e una luce la
   attraversa da sinistra a destra, una volta sola. E' il momento che il lavoro
   aspettava tutto l'anno, e merita un secondo di scena. La luce e' un
   `background-position` che corre, non un elemento che trasla: niente
   sconfina dalla carta. */
.blocco.festa { animation: festa-alone 1.4s var(--molla) both; }
@keyframes festa-alone {
  25% { box-shadow: 0 0 0 2px var(--completa),
                    0 14px 44px -8px color-mix(in srgb, var(--completa) 75%, transparent); }
}
.blocco.festa.completo .riga-cli {
  background-image: linear-gradient(100deg, transparent 38%,
    color-mix(in srgb, var(--completa) 38%, transparent) 50%, transparent 62%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: festa-luce 1.2s var(--molla) .1s both;
}
@keyframes festa-luce { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* la capsula che diventa completa fiorisce: cresce e manda un alone, poi si posa */
.cella.fiorisce { animation: fiorisce .8s var(--molla) both; z-index: 4; }
@keyframes fiorisce {
  35% { transform: scale(1.45);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--completa) 55%, transparent),
                    0 0 28px 4px color-mix(in srgb, var(--completa) 60%, transparent); }
}
/* L'ONDA delle azioni di massa (anno.js, onda()): un fronte di luce inclinato
   attraversa la griglia. Sta sopra la griglia e sotto le finestre (velo 80,
   avvisi 90), non prende clic, e il JS lo toglie da solo. Verde quando si
   completa, ambra quando si azzera. E' l'unico movimento dell'azione: la
   fioritura delle singole celle, che arrivava subito dopo, faceva due
   animazioni di fila. */
.onda-velo {
  position: fixed; z-index: 44; pointer-events: none; overflow: hidden;
  animation: onda-velo .95s ease-out both;
  --tinta-onda: var(--completa);
}
.onda-velo.giu { --tinta-onda: var(--allerta); }
.onda-velo::before {
  content: ""; position: absolute; top: -14%; bottom: -14%; left: 0; width: 26%;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--tinta-onda) 30%, transparent) 58%,
    color-mix(in srgb, var(--tinta-onda) 62%, transparent) 80%,
    transparent 85%);
  animation: onda-fronte .95s cubic-bezier(.36, 0, .22, 1) both;
}
@keyframes onda-fronte {
  from { transform: translateX(-110%) skewX(-9deg); }
  to   { transform: translateX(420%) skewX(-9deg); }
}
@keyframes onda-velo { 70% { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .onda-velo { display: none; animation: none; }
}

.blocco.completo .riga-cli {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--completa) 10%, var(--superficie)),
    color-mix(in srgb, var(--completa) 4%, var(--superficie)) 60%);
}

/* -- riga cliente --------------------------------------------------------- */
.riga-cli {
  height: 40px; cursor: pointer;
  border-radius: var(--r-carta) var(--r-carta) 0 0;
  background: var(--superficie); transition: background var(--rapido);
}
.riga-cli[aria-expanded="false"] { border-radius: var(--r-carta); }
.riga-cli[aria-expanded="true"] { border-bottom: 1px solid color-mix(in srgb, var(--bordo) 65%, transparent); }
.riga-cli:hover { background: color-mix(in srgb, var(--marchio) 6%, var(--superficie)); }
.blocco.completo .riga-cli:hover {
  background: color-mix(in srgb, var(--completa) 13%, var(--superficie));
}
.riga-cli .col-nome {
  position: sticky; left: var(--rientro); z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 10px; min-width: 0; background: inherit; height: 100%;
  border-radius: inherit;
}
/* la spina: 3px di verde sul bordo sinistro della carta completa */
.blocco.completo .riga-cli .col-nome::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--completa);
}
.cuneo { flex: none; color: var(--tenue-2); transition: transform var(--rapido), color var(--rapido); }
.riga-cli:hover .cuneo { color: var(--inchiostro); }
.riga-cli[aria-expanded="true"] .cuneo { transform: rotate(90deg); }
.cli-nome { font-weight: 650; font-size: var(--t-base); letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-id { font-family: var(--f-dato); font-size: var(--t-micro); color: var(--tenue-2); flex: none; }
/* Le etichette sono informazione, non stato: neutre. Il verde e' UNA cosa
   sola, "a posto", e compare solo quando la carta e' completa. */
.tag {
  flex: none; font: 500 var(--t-micro)/1 var(--f-ui); padding: 3px 0;
  border-radius: var(--r-tonda); color: var(--tenue-2);
}
.tag.completo {
  display: none; align-items: center; gap: 5px; padding: 3px 7px;
  color: var(--completa-testo); font-weight: 600;
  background: color-mix(in srgb, var(--completa) 14%, transparent);
}
.tag.completo::before {
  content: ""; width: 4px; height: 7px; margin: -2px 1px 0 0;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.blocco.completo .tag.completo,
.riga-srv.a-posto .tag.completo,
.scheda.finita .tag.completo { display: inline-flex; }

/* Le dodici caselle della riga cliente sono VUOTE: tengono solo la colonna di
   oggi allineata. La barretta in percentuale e poi la capsula a quattro
   segmenti sono state tolte dal committente (28a sessione): "non serve". */
.riga-cli .mesi .q { display: grid; place-items: center; }

/* Bottone "Chiudi tutti / Apri tutti" nell'angolo della testa: con 222 clienti
   le tendine si richiudevano a mano una per una. */
.piega-tutti {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 8px 3px 6px; border-radius: var(--r-tonda);
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--tenue); font-size: var(--t-micro); font-weight: 600;
  text-transform: none; letter-spacing: 0; transition: var(--transizione);
}
.piega-tutti:hover { color: var(--inchiostro); border-color: var(--bordo-forte);
  background: var(--fondo); }
.piega-tutti svg { flex: none; }

/* -- riga service --------------------------------------------------------- */
.riga-srv {
  height: var(--h-riga);
  background: var(--superficie); transition: background var(--rapido);
}
.riga-srv:first-of-type { padding-top: 2px; }
.riga-srv:last-child { padding-bottom: 2px; border-radius: 0 0 var(--r-carta) var(--r-carta); }
.riga-srv:hover { background: color-mix(in srgb, var(--marchio) 4%, var(--superficie)); }
/* SITO A POSTO: la mappatura dell'anno e' chiusa. Spina verde sul bordo, fondo
   appena tinto, totale col segno di spunta: la riga si legge da lontano
   anche quando la cella verde e' in un mese fuori schermo. */
.riga-srv.a-posto { background: color-mix(in srgb, var(--completa) 4%, var(--superficie)); }
.riga-srv.a-posto:hover { background: color-mix(in srgb, var(--completa) 8%, var(--superficie)); }
.riga-srv.a-posto .col-nome::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--completa);
  opacity: .8;
}
.riga-srv.chiuso { background: repeating-linear-gradient(135deg,
  var(--superficie) 0 6px, var(--superficie-2) 6px 12px); }
.riga-srv.chiuso .srv-dest, .riga-srv.chiuso .srv-id { color: var(--tenue-2); }
.riga-srv .col-nome {
  position: sticky; left: var(--rientro); z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 32px; min-width: 0; background: inherit; height: var(--h-riga);
  border-radius: inherit; cursor: pointer;
}
.riga-srv .col-nome:hover .srv-dest { color: var(--marchio-scuro); }
.srv-id { font-family: var(--f-dato); font-size: var(--t-micro); color: var(--tenue-2);
  flex: none; width: 40px; }
.srv-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-mini);
  color: var(--inchiostro-2); transition: color var(--rapido); }
.srv-loc { color: var(--tenue-2); font-size: var(--t-micro); flex: none; }
/* Il pallino in testa alla riga del sito: lo STATO della mappatura dell'anno,
   non piu' il tipo di gas. Cerchio vuoto = da fare, cyan = iniziata, ambra = in
   ritardo, verde = a posto, puntino tenue = non dovuta quest'anno. Sono le
   stesse quattro parole del filtro nella barra, e non aggiungono un colore:
   ambra e verde sono gia' quelli delle celle. */
.punto-stato {
  width: 7px; height: 7px; border-radius: var(--r-tonda); flex: none;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--bordo-forte);
  transition: var(--transizione);
}
/* Una FORMA per stato, non solo un colore (A11Y-17, chi non distingue ambra
   da verde): cerchio vuoto = da fare, mezzo cerchio = iniziata, rombo = in
   ritardo, cerchio pieno = a posto, quadratino vuoto = pre-tracciamento,
   puntino = non dovuta, trattino = service chiuso. */
.punto-stato.corso    { background: linear-gradient(90deg, var(--marchio) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px var(--marchio); }
.punto-stato.ritardo  { background: var(--allerta); border-radius: 1px;
  transform: rotate(45deg) scale(.9);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--allerta) 20%, transparent); }
.punto-stato.completa { background: var(--completa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--completa) 22%, transparent); }
/* Pre-tracciamento: quadratino appena accennato. Non e' un impegno dell'anno,
   ma e' lavoro che si puo' recuperare - diverso dal sito che non ha mappatura. */
.punto-stato.pretrac {
  width: 6px; height: 6px; margin: 0 .5px; border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bordo-forte) 70%, transparent);
}
.punto-stato.fuori {
  width: 4px; height: 4px; margin: 0 1.5px; background: var(--bordo-forte); box-shadow: none;
}
.punto-stato.chiuso {
  width: 7px; height: 2px; border-radius: 1px; background: var(--bordo-forte); box-shadow: none;
}

.col-tot { text-align: right; padding-right: 12px; font-family: var(--f-dato);
  font-size: var(--t-mini); color: var(--tenue); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: flex-end; gap: 7px; height: 100%; }
.col-tot b { color: var(--inchiostro); font-weight: 600; }
.col-tot.pieno { color: var(--completa-testo); }
.col-tot.pieno b { color: var(--completa-testo); }
/* il segno di spunta e' disegnato in CSS: nessun nodo in piu' per riga */
.col-tot.pieno::before {
  content: ""; width: 5px; height: 9px; margin-top: -3px;
  border: solid var(--completa); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* -- LA CELLA: quattro segmenti che si riempiono da sinistra -------------- */
.mesi > * { display: grid; place-items: center; height: 100%; position: relative; }
/* La "testina di lettura": la colonna del mese corrente attraversa la griglia.
   Al filo cyan si aggiunge un velo appena percettibile, cosi' la colonna si
   segue anche scorrendo 274 righe senza guardare la testa. */
.mese-oggi {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--marchio) 40%, transparent);
  background: color-mix(in srgb, var(--marchio) 4%, transparent);
}

/* La capsula VUOTA e' leggera: un velo di grigio e un filo di contorno. Con
   274 righe le capsule piene di grigio erano una muraglia; adesso pesa solo
   quello che e' stato fatto, cioe' i segmenti colorati e il verde. */
.cella {
  width: calc(var(--passo-mese) - 10px); height: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5px;
  padding: 2px; border-radius: 6px; position: relative;
  background: color-mix(in srgb, var(--st-vuoto) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-vuoto) 90%, transparent);
  transition: box-shadow var(--rapido), background var(--rapido), transform var(--rapido);
}
.cella:hover { transform: scale(1.15); box-shadow: var(--ombra-2); z-index: 3; }
/* il SATIN: un velo bianco che si spegne prima di meta' altezza, sopra tutta
   la capsula. E' quello che fa una capsula smaltata invece che quattro
   rettangolini colorati. Assoluto, quindi fuori dalla griglia dei segmenti;
   `::before` perche' `::after` e' del segno della nota. */
.cella::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--satin); pointer-events: none;
}
.cella .seg {
  border-radius: 2.5px; background: transparent;
  transform: scaleX(.001); transform-origin: left center;
  transition: transform 180ms var(--molla), background var(--rapido);
}
.cella[data-s="1"] .seg.s { background: var(--st-stampata);    transform: none; }
.cella[data-c="1"] .seg.c { background: var(--st-controllata); transform: none; }
.cella[data-k="1"] .seg.k { background: var(--st-corretta);    transform: none; }
.cella[data-r="1"] .seg.r { background: var(--st-ricambi);     transform: none; }
/* UN SEGMENTO O E' DEL SUO COLORE O E' VUOTO. Il modello distingue tre modi di
   essere acceso - data-x="1" fatto qui, "2" EREDITATO da una visita prima
   (#ANCHOR: passi-cumulativi), "3" PROPOSTO e in attesa di chi approva
   (#ANCHOR: ruoli) - e fino alla 28a sessione li disegnava diversi: tenue il
   2, a righe il 3. Non si leggeva niente ("cosa orrenda", parola del
   committente), e la domanda a cui la cella deve rispondere e' una sola:
   QUALI passi ci sono. Il dove e il "non ancora approvato" li dicono il
   popover, il cassetto e la pillola "da approvare"; il verde della capsula
   intera continua a chiedere il valore 1 su tutti e quattro (statoCella), quindi
   una cella con quattro segmenti accesi e NON verde e' una cella con qualcosa
   da approvare. Gli attributi restano nel DOM: e' solo il disegno a
   coincidere. */
.cella[data-s="2"] .seg.s, .cella[data-s="3"] .seg.s { background: var(--st-stampata);    transform: none; }
.cella[data-c="2"] .seg.c, .cella[data-c="3"] .seg.c { background: var(--st-controllata); transform: none; }
.cella[data-k="2"] .seg.k, .cella[data-k="3"] .seg.k { background: var(--st-corretta);    transform: none; }
.cella[data-r="2"] .seg.r, .cella[data-r="3"] .seg.r { background: var(--st-ricambi);     transform: none; }
/* MAPPATURA COMPLETA: la capsula intera si accende di verde, non solo un alone.
   E' il segnale piu' importante della griglia - "questo sito e' a posto per
   l'anno" - e si deve leggere da lontano, scorrendo 274 righe. I quattro
   segmenti restano visibili in chiaro sopra il verde: dicono che i passi ci
   sono tutti, ma non hanno piu' bisogno di distinguersi fra loro.
   Le regole dei segmenti stanno sopra e hanno la stessa specificita': queste
   devono venire DOPO per vincere. */
.cella.completa {
  background: var(--completa);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--completa) 62%, transparent),
              0 0 10px -2px color-mix(in srgb, var(--completa) 55%, transparent);
}
.cella.completa .seg.s, .cella.completa .seg.c,
.cella.completa .seg.k, .cella.completa .seg.r {
  background: color-mix(in srgb, #fff 62%, var(--completa)); transform: none;
}
.cella.completa:hover { box-shadow: 0 0 0 1.5px var(--completa), var(--ombra-2); }
.cella.ritardo:not(.completa) {
  background: var(--allerta-tenue);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--allerta) 45%, transparent);
}
.cella.orfana { box-shadow: inset 0 0 0 1.5px var(--orfana); }

/* Classi temporali: il tratteggio vuol dire "non e' un dato certo".
   Vedi #ANCHOR: anno-modello in js/stato.js. */
.cella.stima:not(.completa) {
  background: color-mix(in srgb, var(--marchio) 9%, var(--superficie));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marchio) 45%, transparent),
              inset 0 0 0 3px var(--superficie);
}
.cella.darinnovare:not(.completa) {
  background: var(--scadenza-tenue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--scadenza) 60%, transparent),
              inset 0 0 0 3px var(--superficie);
}
/* Mese di manutenzione che NON e' la scadenza della mappatura: la visita c'e' e
   si puo' spuntare, ma non e' un secondo impegno. Capsula vuota col solo
   contorno: una riga si legge come "una mappatura piena + le visite".
   Vedi #ANCHOR: mappatura-anno in js/stato.js. */
.cella.visita:not(.completa) {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordo-forte) 75%, transparent);
}
 /* Il pre-tracciamento e' la cosa MENO importante dell'anno: si vede che c'e'
    e si puo' spuntare per il recupero storico, ma non deve rubare l'occhio. */
.cella.nontracciato:not(.completa) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bordo);
  opacity: .8;
}
.cella.nontracciato:not(.completa):hover { opacity: 1; }
.cella.con-nota::after {                  /* c'e' una nota su questa cella */
  content: ""; position: absolute; bottom: -3px; left: 50%; translate: -50% 0;
  width: 6px; height: 2px; border-radius: 2px; background: var(--inchiostro-2);
}
.cella.sospesa { opacity: .45; }          /* in coda offline, non confermata */

/* Mese non di manutenzione: un punto, non un trattino. Con dodici colonne per
   274 righe i trattini facevano una trama che copriva le capsule; il punto
   dice "qui niente" e sparisce da solo. Fuori contratto e' ancora piu' tenue. */
.non-previsto::before {
  content: ""; width: 3px; height: 3px; border-radius: var(--r-tonda);
  background: var(--bordo-forte); opacity: .75;
}
.fuori-contratto::before {
  content: ""; width: 3px; height: 3px; border-radius: var(--r-tonda);
  background: var(--bordo);
}

/* Un collega ha questa cella APERTA adesso (#ANCHOR: fuoco in js/stato.js):
   anello del suo colore e le sue iniziali. Si vede prima di cliccarci sopra
   anche tu; e' un avviso, quindi resta leggero. L'anello e' un outline e non
   un box-shadow: non litiga con quelli delle classi temporali. */
.mesi > .q { position: relative; }
.cella.altrui { outline: 2px solid var(--tinta, var(--marchio)); outline-offset: 1.5px; }
.fuoco-nome {
  position: absolute; top: -9px; right: 0; z-index: 4; pointer-events: none;
  font: 700 var(--t-micro)/1 var(--f-ui); letter-spacing: .02em; color: #fff;
  background: var(--tinta, var(--marchio)); padding: 2px 3px;
  border-radius: var(--r-tonda); border: 1.5px solid var(--superficie);
  animation: entra 180ms var(--molla) both;
}

/* Modifica arrivata da un altro operatore: anello che pulsa una volta sola.
   E' la concorrenza resa visibile, non una decorazione. */
.cella.remota { animation: eco 1100ms var(--molla) both; }
@keyframes eco {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marchio) 70%, transparent); }
  35%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--marchio) 0%, transparent); }
  100% { box-shadow: none; }
}
.eco-nome {
  position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; z-index: 5;
  /* testo del colore della superficie, non bianco fisso: nel tema scuro
     l'inchiostro e' quasi bianco e l'etichetta era una pillola vuota */
  font: 600 var(--t-micro)/1 var(--f-ui); color: var(--superficie); background: var(--inchiostro);
  padding: 3px 5px; border-radius: var(--r-tonda); white-space: nowrap;
  animation: eco-via 1600ms both;
}
@keyframes eco-via { 0%,70% { opacity: 1; } 100% { opacity: 0; translate: -50% -8px; } }

/* comparsa a scaglioni al primo disegno */
.entra-riga { animation: fadein 300ms var(--molla) both; animation-delay: var(--rit, 0ms); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }

/* ==========================================================  POPOVER ===== */
.pop {
  position: fixed; z-index: 70; width: 272px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--bordo-lieve);
  border-radius: var(--r-3); box-shadow: var(--ombra-3), inset 0 1px 0 var(--lucido);
  animation: entra 180ms var(--molla) both;
}
.pop h3 { margin: 0; font-size: var(--t-base); font-weight: 600; letter-spacing: -.015em; }
.pop .pop-sotto { margin: 2px 0 10px; font-size: var(--t-micro); color: var(--tenue);
  font-family: var(--f-dato); }
.passi { display: flex; flex-direction: column; gap: 2px; }
.passo {
  display: flex; align-items: center; gap: 10px; padding: 8px 9px;
  border-radius: var(--r-2); transition: var(--transizione); text-align: left; width: 100%;
}
.passo:hover { background: var(--fondo); }
.passo .box {
  flex: none; width: 19px; height: 19px; border-radius: 5px;
  border: 1.5px solid var(--bordo-forte); display: grid; place-items: center;
  transition: var(--transizione); color: #fff;
}
.passo .box svg { opacity: 0; transform: scale(.5); transition: var(--transizione); }
.passo[aria-checked="true"] .box svg { opacity: 1; transform: none; }
.passo[data-campo="stampata"][aria-checked="true"] .box    { background: var(--st-stampata);    border-color: var(--st-stampata); }
.passo[data-campo="controllata"][aria-checked="true"] .box { background: var(--st-controllata); border-color: var(--st-controllata);
  color: var(--su-marchio); }   /* la spunta bianca sul cyan puro non si legge */
.passo[data-campo="corretta"][aria-checked="true"] .box    { background: var(--st-corretta);    border-color: var(--st-corretta); }
.passo[data-campo="ricambi"][aria-checked="true"] .box     { background: var(--st-ricambi);     border-color: var(--st-ricambi); }
.passo .et { flex: 1; font-size: var(--t-mini); font-weight: 500; }
/* Passo EREDITATO (.eredita) e passo PROPOSTO (.proposto, aria-checked=mixed):
   stessa casella piena degli altri - vedi la nota sui segmenti della cella. Il
   dove e il "in attesa" stanno nel suggerimento e nella riga `.chi`; il clic
   su un ereditato lo toglie da dove e' stato messo (stato.toccaPasso). */
.passo[aria-checked="mixed"] .box svg { opacity: 1; transform: none; }
.passo[data-campo="corretta"][aria-checked="mixed"] .box { background: var(--st-corretta); border-color: var(--st-corretta); }
.passo[data-campo="ricambi"][aria-checked="mixed"] .box  { background: var(--st-ricambi);  border-color: var(--st-ricambi); }
.passo[data-campo="stampata"][aria-checked="mixed"] .box    { background: var(--st-stampata);    border-color: var(--st-stampata); }
.passo[data-campo="controllata"][aria-checked="mixed"] .box { background: var(--st-controllata); border-color: var(--st-controllata); color: var(--su-marchio); }
.passo.eredita .chi { white-space: nowrap; }
.passo .chi { font: var(--t-micro)/1 var(--f-dato); color: var(--tenue-2); }
.passo .n-passo { font: 600 var(--t-micro)/1 var(--f-dato); color: var(--tenue-2); flex: none; }

.pop-nota { margin-top: 10px; }
/* la nota che un altro operatore ha scritto mentre questa era aperta: si
   annuncia sopra la casella e non tocca quello che si sta scrivendo */
.pop-nota .js-eco-nota { margin: 0 0 6px; font-size: var(--t-micro); line-height: 1.35;
  color: var(--allerta); }
.pop-nota textarea { width: 100%; min-height: 46px; resize: vertical; font-size: var(--t-mini);
  padding: 7px 9px; border: 1px solid var(--bordo); border-radius: var(--r-2);
  background: var(--fondo); }
.pop-piede { display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bordo); }
.pop-piede button { font-size: var(--t-micro); color: var(--tenue); padding: 3px 6px;
  min-height: 24px; border-radius: var(--r-1); }
.pop-piede button:hover { background: var(--fondo); color: var(--inchiostro); }
.pop-piede .primario { color: var(--marchio-scuro); font-weight: 600; }
/* al tocco i passi e i due comandi in fondo si prendono col pollice: erano
   35 e 24 px (tests/e2e/test_e2e_telefono.py) */
@media (pointer: coarse) {
  .pop .passo, .pop-piede button { min-height: 44px; }
  .pop-piede button { min-width: 44px; }
}
/* Sul telefono il popover e' un foglio dal basso, largo quanto lo schermo:
   ancorato alla cella (left/top inline di spunte.js, che lo misura prima di
   riempire i passi) finiva per meta' sotto il bordo, e da fixed non ci si
   arrivava scorrendo. Qui resta sempre intero e sotto il pollice. */
@media (max-width: 760px) {
  .pop {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
    top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
}

/* ==========================================================  VISTA MESE == */
.mese-testa { padding: 22px 18px 14px; display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap; }
/* Il nome del mese e' il titolo della pagina: display serif, come l'anno in
   testa. L'anno accanto resta un dato, quindi monospazio. */
.mese-titolo { font-family: var(--f-display); font-size: var(--t-titolo); font-weight: 600;
  letter-spacing: var(--tr-display); line-height: 1.05; margin: 0; min-width: 240px; }
.mese-titolo span { color: var(--tenue-2); font-family: var(--f-dato); font-weight: 400;
  font-size: 24px; letter-spacing: -.02em; }
/* I dodici mesi in una pista: l'indicatore (`::before`) scivola sotto il mese
   scelto con `--i`, cosi' il cambio di mese si vede come un movimento e non
   come un lampeggio. */
/* il vassoio dei dodici mesi: stesso incavo dei comandi segmentati della
   barra, e il cursore e' la posizione d'inchiostro che scorre */
.mese-nav {
  position: relative; display: flex; gap: 2px; padding: 3px;
  background: var(--pista-fondo); border-radius: var(--r-2);
}
/* MOV-10: il cursore scorre con `transform`, non con `left` */
.mese-nav::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; width: 36px;
  left: 3px; transform: translateX(calc(var(--i, 0) * 38px)); border-radius: var(--r-1);
  background: var(--btn-fondo); box-shadow: var(--btn-ombra);
  transition: transform var(--medio);
}
.mese-nav button {
  position: relative; z-index: 1;
  width: 36px; height: 26px; border-radius: var(--r-1); font: 600 var(--t-micro) var(--f-dato);
  color: var(--tenue); text-transform: uppercase; letter-spacing: .04em;
  transition: color var(--rapido), background var(--rapido);
}
.mese-nav button:hover { background: color-mix(in srgb, var(--superficie) 60%, transparent); color: var(--inchiostro); }
.mese-nav button[aria-pressed="true"] { color: var(--btn-testo); background: transparent; }
.mese-nav button[aria-pressed="true"]:hover { background: transparent; }
.mese-testa .riepilogo { margin-left: auto; }

.lavoro { padding: 0 18px 40vh; }
.lavoro.entra { animation: fadein 220ms var(--molla) both; }
.lavoro .cli-sep {
  position: sticky; top: 0; z-index: 10; padding: 16px 2px 7px;
  background: linear-gradient(var(--fondo) 72%, transparent);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.lavoro .cli-sep::after { content: ""; flex: 1; height: 1px; background: var(--bordo);
  align-self: center; margin-left: 6px; }
.scheda {
  position: relative;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 6px;
  background: var(--superficie); border: 1px solid var(--bordo-lieve); border-radius: var(--r-carta);
  box-shadow: var(--ombra-1);
  transition: border-color var(--rapido), box-shadow var(--rapido), background var(--rapido);
}
.scheda:hover { box-shadow: var(--ombra-2); border-color: var(--bordo); }
/* un collega ha questa scheda aperta (#ANCHOR: fuoco): bordo del suo colore e
   le sue iniziali all'angolo */
.scheda.altrui { border-color: var(--tinta, var(--marchio)); }
.scheda.altrui::after {
  content: attr(data-altrui); position: absolute; top: -9px; left: 12px;
  font: 700 var(--t-micro)/1 var(--f-ui); letter-spacing: .02em; color: #fff;
  background: var(--tinta, var(--marchio)); padding: 2px 4px;
  border-radius: var(--r-tonda); border: 1.5px solid var(--superficie);
}
.scheda .meta .eredita-nota { color: var(--tenue); }
/* SCHEDA FINITA: la spina verde a sinistra (ombra interna, segue il raggio),
   il fondo appena tinto e l'etichetta "a posto" nella riga dei dati. */
.scheda.finita {
  border-color: color-mix(in srgb, var(--completa) 35%, transparent);
  background: color-mix(in srgb, var(--completa) 4%, var(--superficie));
  box-shadow: inset 3px 0 0 var(--completa);
}
.scheda.finita:hover { box-shadow: inset 3px 0 0 var(--completa), var(--ombra-1); }
.scheda.ritardo:not(.finita) { border-color: color-mix(in srgb, var(--allerta) 40%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--allerta) 70%, transparent); }
.scheda.previsione { border-style: dashed; }
/* La scheda col fuoco e' l'unita' di lavoro dei tasti (su/giu' la scelgono,
   1/2/3 spuntano): si evidenzia tutta, non solo con un contorno sottile, e
   resta evidente anche col fuoco su uno dei passi (`:focus-within`).
   Sta dopo .finita/.ritardo di proposito: deve vincere sul loro fondo. */
.scheda:focus, .scheda:focus-within {
  outline: 2px solid var(--marchio); outline-offset: 1px;
  background: color-mix(in srgb, var(--marchio) 8%, var(--superficie));
  border-color: var(--marchio); box-shadow: inset 3px 0 0 var(--marchio), var(--ombra-2);
}
.bollo {
  flex: none; font: 700 var(--t-micro)/1 var(--f-dato); letter-spacing: .06em;
  padding: 3px 5px; border-radius: 3px;
}
.bollo.stima { color: var(--marchio-scuro); background: var(--marchio-tenue); }
.bollo.darinnovare { color: var(--scadenza); background: var(--scadenza-tenue); }
.bollo.nontracciato { color: var(--tenue); background: var(--fondo);
  border: 1px solid var(--bordo); }
.scheda .info { flex: 1; min-width: 0; }
.scheda .info b { display: block; font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.scheda .info b:hover { color: var(--marchio-scuro); }
.scheda .info .meta { font-size: var(--t-micro); color: var(--tenue); display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center; margin-top: 3px; }
.scheda .meta .dato { font-family: var(--f-dato); }
/* I QUATTRO PASSI COME CAPSULA: la stessa forma della cella dell'Anno, letta
   da vicino. Una pista grigia, quattro segmenti; il segmento fatto si alza in
   bianco con la sua casella colorata. A scheda finita la pista diventa verde. */
.passi-riga {
  display: flex; gap: 2px; flex: none; padding: 3px;
  background: var(--pista-fondo);
  box-shadow: var(--pista-incavo);
  border-radius: var(--r-tonda);
  transition: background var(--medio), box-shadow var(--medio);
}
.passi-riga .passo {
  width: auto; padding: 5px 11px 5px 7px; border-radius: var(--r-tonda);
  background: transparent; gap: 7px; color: var(--tenue);
}
.passi-riga .passo:hover { background: color-mix(in srgb, var(--superficie) 55%, transparent);
  color: var(--inchiostro); }
.passi-riga .passo .box { width: 16px; height: 16px; border-radius: var(--r-tonda);
  border-color: color-mix(in srgb, var(--bordo-forte) 80%, transparent); }
.passi-riga .passo .et { font-size: var(--t-micro); font-weight: 600; }
.passi-riga .passo[aria-checked="true"], .passi-riga .passo[aria-checked="mixed"] {
  background: var(--vetro-fondo); color: var(--inchiostro);
  box-shadow: 0 0 0 1px var(--bordo-lieve), inset 0 1px 0 var(--lucido), var(--ombra-1); }
.scheda.finita .passi-riga { background: color-mix(in srgb, var(--completa) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--completa) 30%, transparent); }
/* Nel cassetto la colonna e' stretta (520px meno i margini): i quattro passi
   vanno a capo e la capsula resta larga quanto serve, non tutta la riga. */
.cassetto .scheda { flex-wrap: wrap; }
.cassetto .scheda .info { flex: 1 1 100%; }
.cassetto .passi-riga { width: auto; align-self: flex-start; flex-wrap: wrap; }

/* Il pallino dello stato E' il bottone della scheda: un clic chiude tutti e
   quattro i passi del mese. L'alone verde al passaggio dice cosa succede (il
   verde vuol dire "completa" in tutta l'applicazione) senza scrivere niente;
   l'anello cyan e' invece la selezione per le azioni multiple, che ora si fa
   con ctrl+clic. Colore dello stato al centro, sempre visibile. */
.selez {
  position: relative; flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: var(--r-tonda);
  cursor: pointer; transition: var(--transizione);
}
.selez:hover { background: color-mix(in srgb, var(--completa) 22%, transparent); }
.selez:active { transform: scale(.88); }
.selez.scelto {
  background: var(--marchio-tenue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marchio) 70%, transparent);
}
.selez:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }

.barra-massa {
  /* MOB-17: sopra la barra dei gesti, come gli avvisi */
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%); z-index: 75;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--inchiostro); color: var(--fondo); border-radius: var(--r-tonda);
  box-shadow: var(--ombra-3); font-size: var(--t-mini);
  animation: sali var(--medio) both;
}
.barra-massa b { font-family: var(--f-dato); }
.barra-massa button { color: inherit; padding: 5px 10px; border-radius: var(--r-tonda);
  background: color-mix(in srgb, currentColor 16%, transparent); font-weight: 600; }
.barra-massa button:hover { background: color-mix(in srgb, currentColor 28%, transparent); }
/* Gli avvisi (base.css) stanno nello stesso punto della barra, e sopra: con
   la barra aperta salgono sopra di lei, altrimenti un avviso da 15 s ne
   copriva i bottoni (tests/e2e/test_e2e_giro.py, vista Mese). */
body:has(> .barra-massa) .avvisi { bottom: calc(18px + 60px + env(safe-area-inset-bottom, 0px)); }
/* Sul telefono la barra (640 px in fila) usciva dai due lati: va a capo,
   larga quanto lo schermo meno i margini. Alta com'e' allora, gli avvisi
   salgono in cima finche' e' aperta. */
@media (max-width: 760px) {
  .barra-massa {
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    transform: none; flex-wrap: wrap; justify-content: center; gap: 6px 8px;
    border-radius: var(--r-3); animation-name: sali-fermo;
  }
  body:has(> .barra-massa) .avvisi { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
}
@keyframes sali-fermo { from { opacity: 0; translate: 0 10px; } }
@media (pointer: coarse) {
  .barra-massa button { min-height: 44px; }
}

/* Con poca larghezza il nome del cliente vince sui dettagli accessori:
   senza questo si riduceva a una lettera piu' i puntini. */
@media (max-width: 1080px) {
  .riga-cli .cli-id { display: none; }
  /* sulla riga del sito bastano spina, tinta e spunta: il nome vince */
  .riga-srv .tag.completo { display: none !important; }
}
@media (max-width: 900px) {
  :root { --col-min: 210px; --rientro: 8px; }
  .riga-cli .tag:not(.aperti):not(.completo) { display: none; }
  .riga-srv .srv-loc { display: none; }
  .riga-srv .doc-chips { display: none; }
  .riepilogo { display: none; }
  .mese-nav::before { display: none; }
  .mese-nav { flex-wrap: wrap; border-radius: var(--r-2); }
  .mese-nav button[aria-pressed="true"] { background: var(--btn-fondo); }
}
@media (max-width: 760px) {
  :root { --col-min: 180px; --passo-mese: 32px; --col-tot: 54px; --rientro: 6px; }
  .riga-cli .tag:not(.completo) { display: none; }
  .scheda { flex-wrap: wrap; }
  .passi-riga { width: 100%; }
  .passi-riga .passo { flex: 1; justify-content: center; }
}

/* ---- SCHELETRO DI CARICAMENTO (MOV-14, contratto con L9) --------------------
   Righe finte al posto di "Caricamento…" mentre arrivano clienti e spunte: la
   stessa geometria delle righe della vista Anno (colonna nome a sinistra,
   dodici mesi a destra), cosi' al caricamento non salta niente.
   Uso (js/anno.js, js/mese.js):
     <div class="scheletro-elenco" role="status" aria-label="Caricamento…">
       <div class="scheletro"></div>   (ripetuta 8-12 volte)
     </div>
   La riga e' alta --h-riga e ha il rientro delle carte cliente. Il bagliore
   e' un'opacita' che pulsa; con prefers-reduced-motion resta ferma. */
.scheletro-elenco { display: grid; gap: 6px; padding: 14px var(--rientro); }
.scheletro {
  height: var(--h-riga); border-radius: var(--r-1);
  background:
    linear-gradient(var(--superficie-3, var(--st-vuoto)), var(--superficie-3, var(--st-vuoto)))
      10px 50% / min(30%, calc(var(--col-min) - 40px)) 10px no-repeat,
    linear-gradient(90deg, var(--st-vuoto) 0 calc(100% - 1px), transparent 0)
      calc(var(--col-min) + 8px) 50% / calc((100% - var(--col-min) - var(--col-tot) - 16px) / 12) 14px repeat-x,
    var(--superficie);
  border: 1px solid var(--bordo-lieve);
  animation: scheletro-pulsa 1.4s ease-in-out infinite;
}
.scheletro:nth-child(3n+2) { animation-delay: .15s; }
.scheletro:nth-child(3n) { animation-delay: .3s; }
@keyframes scheletro-pulsa { 50% { opacity: .55; } }
@media (max-width: 760px) {
  .scheletro { background:
    linear-gradient(var(--st-vuoto), var(--st-vuoto)) 10px 50% / 45% 10px no-repeat,
    var(--superficie); }
}
@media (prefers-reduced-motion: reduce) {
  .scheletro { animation: none; }
}

/* =============================================== TELEFONO (VIS-25, MOB-15) ==
   Sotto i 760 px la vista Anno non e' piu' una matrice da scorrere di lato
   (il nome piu' dodici colonne facevano 630 px su uno schermo da 375). Diventa
   un ELENCO PER SITO: la carta del cliente resta, ogni sito e' una voce con il
   nome in alto, il totale dell'anno a destra e sotto i SOLI mesi di
   manutenzione, ognuno col suo nome accanto alla capsula (`.q-mese`, da
   anno.js) e alto un pollice: si tocca la voce e si apre il popover dei passi,
   come sul computer. I mesi senza manutenzione (i puntini) sul telefono non si
   disegnano. La riga del cliente tiene nome e totale, l'intestazione tiene
   "Apri / Chiudi tutti"; i totali per mese stanno nella vista Mese e nelle
   Statistiche. Sul computer non cambia niente: `.q-mese` non si vede. */
.q-mese { display: none; }
@media (max-width: 760px) {
  .crono { min-width: 0; }
  .riga { grid-template-columns: minmax(0, 1fr) auto; }
  .crono-testa .mesi, .riga-cli .mesi, .crono-testa .col-nome i { display: none; }
  .crono-testa .col-nome, .riga-cli .col-nome, .riga-srv .col-nome { position: relative; left: auto; }
  .crono-testa { height: 48px; }
  .piega-tutti { position: relative; padding: 5px 10px 5px 8px; }
  .piega-tutti::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .riga-cli { height: auto; min-height: 44px; }

  .riga-srv { height: auto; grid-template-areas: "nome tot" "mesi mesi"; }
  .riga-srv + .riga-srv { border-top: 1px solid var(--bordo-lieve); }
  .riga-srv .col-nome {
    grid-area: nome; height: auto; min-height: 40px; padding: 8px 8px 4px 12px;
  }
  /* il nome del sito va a capo (due righe al massimo, intero nel title) */
  .riga-srv .srv-dest {
    white-space: normal; overflow-wrap: anywhere; font-size: var(--t-base);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .riga-srv .col-tot { grid-area: tot; align-self: start; height: 40px; margin-top: 4px; }
  .riga-srv .mesi {
    grid-area: mesi; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px;
    height: auto; padding: 2px 12px 10px;
  }
  .riga-srv .mesi:not(:has(.cella)) { display: none; }
  .riga-srv .mesi > .q:empty { display: none; }
  .riga-srv .mesi > .q {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 8px 0 10px; cursor: pointer;
    border-radius: var(--r-2); background: var(--superficie);
    box-shadow: inset 0 0 0 1px var(--bordo-lieve);
  }
  .riga-srv .q-mese {
    display: inline; min-width: 2.4em;
    font: 600 var(--t-mini)/1 var(--f-dato); letter-spacing: .06em;
    text-transform: uppercase; color: var(--tenue);
  }
  .riga-srv .mese-oggi {
    background: color-mix(in srgb, var(--marchio) 6%, var(--superficie));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marchio) 50%, transparent);
  }
  .riga-srv .mese-oggi .q-mese { color: var(--marchio-scuro); }
  .riga-srv .cella { width: 46px; height: 24px; margin-left: auto; }
  .riga-srv .cella:hover { transform: none; }

  /* -- vista Mese: la testa si stringe, i dodici mesi in due righe da sei, i
     quattro passi in un quadrato due per due (in fila uscivano dallo schermo) */
  .mese-testa { padding: 14px 4px 10px; gap: 12px; }
  .mese-titolo { min-width: 0; }
  .mese-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .mese-nav button { width: auto; height: 36px; }
  .mese-testa .riepilogo { display: flex; margin-left: 0; }
  .lavoro { padding: 0 var(--rientro) 40vh; }
  .scheda { padding: 10px 12px; gap: 8px 12px; }
  .scheda .info b {
    white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .passi-riga {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--r-3);
  }
  .passi-riga .passo { min-height: 44px; justify-content: flex-start; border-radius: var(--r-2); }
  .passi-riga .passo .et { font-size: var(--t-mini); }
  .selez::after { content: ""; position: absolute; inset: -13px; }
}