/* Eva — Rilevazione tempi · stile della PWA di postazione.
   Requisiti (docs/12_RILEVAZIONE_TEMPI_SPEC.md sez. 4, 10.3, 13a-13b):
   contrasto alto, leggibile da lontano, bersagli ampi per l'uso coi guanti,
   colori stato COSTANTI e sempre ridondanti rispetto all'etichetta,
   interfaccia muta: nessuna animazione decorativa, nessuno slogan. */

/* Ripristina la semantica di [hidden]: nella cascata i display espliciti dell'autore (es. .overlay in flex) battono il display:none dello user-agent. */
[hidden] { display: none !important; }

:root {
  --sfondo: #14181d;
  --superficie: #1d232b;
  --superficie-alta: #262e38;
  --bordo: #3a4550;
  --testo: #f2f5f8;
  --testo-secondario: #9fb0bf;

  /* I quattro colori di stato (spec sez. 4.3): verde / giallo-ambra / rosso / blu */
  --lavoro: #17833e;
  --lavoro-chiaro: #43c878;
  --preparo: #e08a00;
  --preparo-chiaro: #f0a83a;
  --fermo: #c9302c;
  --fermo-chiaro: #f2655c;
  --regolo: #2456c4;
  --regolo-chiaro: #6ea8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- testata */

#testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

#testata-postazione {
  font-size: 1.15rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#testata-operatore {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 1.05rem;
}

.btn-testo {
  color: var(--testo-secondario);
  text-decoration: underline;
  font-size: 1rem;
  padding: 8px 6px;
  min-height: 44px;
}

/* ----------------------------------------------------------------- banner */

#banner {
  padding: 12px 20px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--bordo);
}

#banner.banner-errore { background: #4a1512; border-color: #7a2723; }
#banner.banner-offline { background: #4a3a10; border-color: #7a6320; }
#banner.banner-ok { background: #12402a; border-color: #1f6b44; }

/* ------------------------------------------------------------------ viste */

#contenuto {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px;
}

.messaggio-centrale {
  margin-top: 18vh;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.messaggio-secondario {
  margin-top: 16px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--testo-secondario);
  overflow-wrap: break-word;
}

.titolo-sezione {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-secondario);
  margin-bottom: 14px;
}

/* Riga-guida: dice all'operaio cosa si fa qui, prima dei bottoni */
.riga-guida {
  font-size: 1.05rem;
  color: var(--testo-secondario);
  margin-bottom: 12px;
}

/* --------------------------------------------- vista apertura: i lavori */

#lista-lavori {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.btn-lavoro {
  min-height: 100px;
  padding: 18px 22px;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 600;
  background: var(--superficie);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}

.btn-lavoro:active { background: var(--superficie-alta); }

/* Ripresa visibile (26/07/2026): la voce del piano la cui FASE risulta già completata sul
   centro NON sparisce più dalla lista — si mostra MARCATA e resta TAPPABILE. Marcatura
   SOBRIA di proposito: il bordo si smorza e la nota va sotto l'etichetta, in secondario e
   più piccola, così non compete col nome del lavoro. Nessuno stato disabilitato: mostrare
   non è vietare. Le regole valgono per entrambe le liste (.btn-lavoro della griglia e
   .btn-altra della fascia «Altre commesse qui oggi»), che condividono il compositore. */
.lavoro-completato { border-color: var(--testo-secondario); }

.nota-completata {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--testo-secondario);
}

/* --------------------------------------------- vista sessione: la card */

.card-sessione {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 22px;
}

#sessione-commessa {
  font-size: 1.7rem;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* Indicatore, badge e cronometro compatti su UNA riga (schermo A) */
.riga-stato-crono {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
}

#sessione-indicatore {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

#indicatore-pallino {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--testo-secondario);
}

#indicatore-pallino.colore-lavoro  { background: var(--lavoro-chiaro); }
#indicatore-pallino.colore-preparo { background: var(--preparo-chiaro); }
#indicatore-pallino.colore-fermo   { background: var(--fermo-chiaro); }
#indicatore-pallino.colore-regolo  { background: var(--regolo-chiaro); }

/* Compatto ma leggibile da lontano (dimensione da rifinire al collaudo visivo) */
#cronometro {
  margin-left: auto;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

/* Badge best-effort «macchina in moto non presidiata» (non sopravvive al reboot) */
.badge-in-moto {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo);
  background: var(--superficie-alta);
  border: 1px solid var(--testo-secondario);
  border-radius: 999px;
}

/* Nota multi-giorno client-only: solo se la fetta è iniziata ieri o prima */
#sessione-nota {
  margin-top: 10px;
  font-size: 1.05rem;
  color: var(--testo-secondario);
}

/* ------------------------------------------------- i quattro bottoni stato */

.griglia-stati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 900px) {
  .griglia-stati { grid-template-columns: repeat(4, 1fr); }
}

/* Due righe: NOME grande con pallino accanto, sottotitolo-segnaletica sotto */
.btn-stato {
  min-height: 130px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 3px solid var(--bordo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.stato-nome {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Pallino di stato accanto al nome: colore sempre presente anche da spento */
.stato-nome::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Sottotitolo (lessico provvisorio, spec 3.1): neutro da spento, eredita da acceso */
.stato-sotto {
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  color: var(--testo-secondario);
}

.btn-stato.acceso .stato-sotto { color: inherit; opacity: 0.9; }

/* Spenti: superficie scura, etichetta e pallino nel colore dello stato */
.btn-stato.colore-lavoro  { color: var(--lavoro-chiaro); }
.btn-stato.colore-lavoro .stato-nome::before  { background: var(--lavoro-chiaro); }
.btn-stato.colore-preparo { color: var(--preparo-chiaro); }
.btn-stato.colore-preparo .stato-nome::before { background: var(--preparo-chiaro); }
.btn-stato.colore-fermo   { color: var(--fermo-chiaro); }
.btn-stato.colore-fermo .stato-nome::before   { background: var(--fermo-chiaro); }
.btn-stato.colore-regolo  { color: var(--regolo-chiaro); }
.btn-stato.colore-regolo .stato-nome::before  { background: var(--regolo-chiaro); }

/* Acceso (stato in corso): riempimento pieno + bordo chiaro (spec 4.2) */
.btn-stato.acceso { color: #ffffff; border-color: var(--testo); }
.btn-stato.acceso .stato-nome::before { background: #ffffff; }
.btn-stato.colore-lavoro.acceso  { background: var(--lavoro); }
.btn-stato.colore-preparo.acceso { background: var(--preparo); color: #14181d; border-color: #f2f5f8; }
.btn-stato.colore-preparo.acceso .stato-nome::before { background: #14181d; }
.btn-stato.colore-fermo.acceso   { background: var(--fermo); }
.btn-stato.colore-regolo.acceso  { background: var(--regolo); }

.btn-stato:active:not(.acceso) { background: var(--superficie-alta); }

/* -------------------------------------------- lascio in moto / rientro */

.riga-in-moto {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* Azione discreta ma con bersaglio adeguato ai guanti; due righe: nome + spiegazione */
.btn-in-moto {
  min-height: 64px;
  padding: 12px 28px;
  color: var(--testo);
  background: var(--superficie);
  border: 2px solid var(--bordo);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.btn-in-moto:active { background: var(--superficie-alta); }

/* Le due righe dei bottoni-azione (lascio in moto, chiudi sessione) */
.azione-nome {
  font-size: 1.1rem;
  font-weight: 600;
}

.azione-sotto {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--testo-secondario);
}

/* --------------------------------------- altre commesse alla postazione */

#fascia-altre { margin-top: 26px; }

#lista-altre {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 720px) {
  #lista-altre { grid-template-columns: repeat(2, 1fr); }
}

/* Compatta rispetto a .btn-lavoro: qui è un riprendi, non la scelta primaria */
.btn-altra {
  min-height: 64px;
  padding: 12px 18px;
  text-align: left;
  font-size: 1.15rem;
  font-weight: 600;
  background: var(--superficie);
  border: 2px solid var(--bordo);
  border-radius: 12px;
}

.btn-altra:active { background: var(--superficie-alta); }

/* ------------------------------------------------------ chiusura sessione */

.riga-chiusura {
  margin-top: 26px;
  display: flex;
  justify-content: center;
}

/* Azione discreta (schermo A): piccola e defilata, flusso di conferma invariato */
.btn-chiudi {
  min-height: 56px;
  padding: 10px 24px;
  color: var(--testo-secondario);
  background: none;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.btn-chiudi:active { background: var(--superficie-alta); }

/* ---------------------------------------------------------------- overlay */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}

.overlay-corpo {
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 24px;
}

.overlay-titolo {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}

/* Riga di spiegazione sotto il titolo dell'overlay (conferma lascio-in-moto) */
.overlay-spiega {
  font-size: 1.1rem;
  color: var(--testo-secondario);
  margin-bottom: 18px;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------- motivi del fermo */

.griglia-motivi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 720px) {
  .griglia-motivi { grid-template-columns: repeat(3, 1fr); }
}

.btn-motivo {
  min-height: 96px;
  padding: 14px;
  font-size: 1.25rem;
  font-weight: 600;
  background: var(--superficie-alta);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}

.btn-motivo:active { border-color: var(--testo-secondario); }

.btn-motivo-altro { grid-column: 1 / -1; }

#blocco-nota {
  margin-top: 14px;
  display: flex;
  gap: 12px;
}

#motivo-nota {
  flex: 1;
  min-height: 64px;
  padding: 10px 14px;
  font-size: 1.2rem;
  font-family: inherit;
  color: var(--testo);
  background: var(--sfondo);
  border: 2px solid var(--bordo);
  border-radius: 12px;
}

#motivo-nota:focus { outline: none; border-color: var(--testo-secondario); }

/* -------------------------------------------------------------- operatori */

.griglia-operatori {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 720px) {
  .griglia-operatori { grid-template-columns: repeat(2, 1fr); }
}

.btn-operatore {
  min-height: 88px;
  padding: 14px 20px;
  font-size: 1.35rem;
  font-weight: 600;
  background: var(--superficie-alta);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}

.btn-operatore:active { border-color: var(--testo-secondario); }

/* ------------------------------------------------------- conferma/annulla */

.btn-conferma {
  min-height: 64px;
  padding: 12px 26px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--testo);
  background: var(--superficie-alta);
  border: 2px solid var(--testo-secondario);
  border-radius: 12px;
}

.btn-conferma-grande {
  display: block;
  width: 100%;
  min-height: 96px;
  font-size: 1.4rem;
}

.btn-annulla {
  display: block;
  margin: 18px auto 0;
  min-height: 56px;
  padding: 10px 30px;
  font-size: 1.05rem;
  color: var(--testo-secondario);
  border: 1px solid var(--bordo);
  border-radius: 12px;
}

/* -------------------------------------------- 13c · conferma al ritorno */

/* La domanda di realtà: la riga più importante dello schermo */
.ritorno-domanda {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 18px;
}

/* Gli esiti come bottoni pieni, uno sotto l'altro (tap coi guanti) */
.colonna-esiti {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.btn-esito {
  min-height: 96px;
  padding: 14px 18px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--testo);
  background: var(--superficie-alta);
  border: 2px solid var(--bordo);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-esito:active { border-color: var(--testo-secondario); }

/* I due gesti di chiusura riusano le due righe nome + spiegazione */
.btn-esito .azione-nome { font-size: 1.3rem; }
.btn-esito .azione-sotto { font-size: 1rem; }

/* Selettore del giorno (solo finestre oltre le 24h) */
.picker-giorni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.btn-giorno {
  min-height: 56px;
  padding: 8px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--superficie-alta);
  border: 2px solid var(--bordo);
  border-radius: 999px;
}

.btn-giorno.acceso {
  background: var(--testo);
  color: var(--sfondo);
  border-color: var(--testo);
}

/* Il picker dell'ora: passi grandi attorno alla lettura */
.picker-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 20px;
}

.btn-picker {
  min-width: 88px;
  min-height: 88px;
  padding: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--superficie-alta);
  border: 2px solid var(--bordo);
  border-radius: 14px;
}

.btn-picker:active { border-color: var(--testo-secondario); }

.picker-lettura {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 168px;
}

#picker-ora {
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

#picker-giorno {
  font-size: 1.05rem;
  color: var(--testo-secondario);
}

/* Invio bloccato fuori finestra (oltre alla guardia nel listener) */
.btn-conferma[disabled] { opacity: 0.4; }

/* Schermata di esito: le fette risultanti, orari marcati stima */
.riga-esito {
  padding: 12px 0;
  font-size: 1.15rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bordo);
  overflow-wrap: break-word;
}

.esito-nota {
  margin: 14px 0 18px;
  font-size: 1.05rem;
  color: var(--testo-secondario);
}

/* ------------------------------------------- 13c · riepilogo di conferma */

.riga-macchina {
  padding: 12px 0;
  border-bottom: 1px solid var(--bordo);
}

.riga-macchina-testa {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 700;
}

.riga-macchina-tipi,
.riga-macchina-aperta {
  margin-top: 4px;
  font-size: 1rem;
  color: var(--testo-secondario);
}

.riepilogo-totale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 1.35rem;
  font-weight: 700;
}

#riepilogo-nota {
  margin-top: 6px;
  font-size: 1rem;
  color: var(--testo-secondario);
}

#btn-riepilogo-conferma { margin-top: 18px; }

/* Azione in corso: si ignora il doppio tocco senza spegnere lo schermo */
body.in-attesa .btn-stato,
body.in-attesa .btn-lavoro,
body.in-attesa .btn-motivo,
body.in-attesa .btn-altra,
body.in-attesa .btn-in-moto,
body.in-attesa .btn-chiudi,
body.in-attesa .btn-esito,
body.in-attesa .btn-picker,
body.in-attesa .btn-giorno,
body.in-attesa .btn-annulla,
body.in-attesa .btn-conferma { opacity: 0.6; }

/* ==========================================================================
   VISTA PIANO — la superficie d'ufficio delle titolari (pwa/piano.html)
   Fetta VP-0, 06/08/2026. AGGIUNTE IN CODA: nessuna regola sopra è toccata —
   il tablet usa lo stesso foglio e non deve accorgersi di nulla. Tutto vive
   sotto `body.vista-piano` o sotto classi nuove `piano-*`.
   Bersaglio: schermo di ufficio guardato da un PC, non tablet coi guanti —
   corpo più piccolo, larghezza utile ampia, tabella a colonne da scandire.
   ========================================================================== */

body.vista-piano { font-size: 15px; }

body.vista-piano #contenuto {
  max-width: 1600px;
  padding: 20px 24px 64px;
}

/* ------------------------------------------------------- testata e controlli */

#piano-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 24px;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.piano-titolo { display: flex; flex-direction: column; gap: 2px; }

.piano-titolo-nome { font-size: 1.25rem; font-weight: 700; }

.piano-titolo-sotto { font-size: 0.9rem; color: var(--testo-secondario); }

.piano-controlli { display: flex; align-items: center; gap: 10px; }

.piano-etichetta-controllo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-secondario);
}

#selettore-settimana {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--testo);
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 320px;
}

#selettore-settimana:disabled { opacity: 0.5; }

.piano-btn {
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 8px 16px;
}

.piano-btn:disabled { opacity: 0.5; cursor: default; }

/* --------------------------------------------------- riepilogo e legenda */

.piano-riepilogo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 16px;
}

.piano-riepilogo-settimana { font-size: 1.5rem; font-weight: 700; }

.piano-legenda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.piano-legenda ul { margin: 0; padding-left: 20px; }

.piano-legenda li {
  font-size: 0.92rem;
  color: var(--testo-secondario);
  margin-bottom: 5px;
}

.piano-legenda li strong { color: var(--testo); }

/* ------------------------------------------------------------- postazioni */

.piano-postazione { margin-bottom: 26px; }

.piano-postazione-testata {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: var(--superficie-alta);
  border-left: 4px solid var(--regolo);
  border-radius: 4px 4px 0 0;
}

.piano-postazione-nome { font-size: 1.1rem; font-weight: 700; }

.piano-postazione-tecnico { font-size: 0.82rem; color: var(--testo-secondario); }

.piano-vuoto-postazione {
  padding: 10px 16px;
  font-size: 0.92rem;
  color: var(--testo-secondario);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-top: none;
}

/* ---------------------------------------------------------------- tabella */

.piano-tabella {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-top: none;
}

.piano-tabella th {
  text-align: left;
  vertical-align: bottom;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bordo);
  background: var(--superficie);
}

.piano-tabella td {
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordo);
}

.piano-tabella tbody tr:last-child td { border-bottom: none; }

.piano-colonna-nome {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.piano-colonna-fonte {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--testo-secondario);
}

/* Le cinque colonne: commessa e lavoro strette, i due mestieri larghi */
.piano-cella-commessa { width: 15%; }
.piano-cella-lavoro { width: 22%; }
.piano-cella-pianificato { width: 18%; }
.piano-cella-consuntivo { width: 30%; }
.piano-cella-scostamento { width: 15%; }

.piano-commessa { display: block; font-size: 1.05rem; font-weight: 700; }

.piano-valore { display: block; font-size: 1.05rem; font-weight: 700; }

.piano-dettaglio {
  display: block;
  font-size: 0.85rem;
  color: var(--testo-secondario);
  margin-top: 2px;
}

.piano-dettaglio-nome { font-weight: 600; }

/* La fonte del dato: L6 — ogni cella dice da dove viene ciò che mostra */
.piano-fonte {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--testo-secondario);
  margin-top: 6px;
}

/* Il buco che resta buco: un campo assente non somiglia MAI a uno zero */
.piano-assente { color: var(--preparo-chiaro); }

.piano-badge {
  display: inline-block;
  margin-top: 6px;
  margin-right: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--testo-secondario);
}

.piano-badge-chiusa { color: var(--lavoro-chiaro); border-color: var(--lavoro); }

.piano-badge-avviso { color: var(--preparo-chiaro); border-color: var(--preparo); }

/* ------------------------------------------------- matrice ore per tipo */

.piano-matrice { margin-top: 8px; }

.piano-matrice > summary {
  font-size: 0.8rem;
  color: var(--testo-secondario);
  cursor: pointer;
}

.piano-tabella-matrice {
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 0.8rem;
}

.piano-tabella-matrice th,
.piano-tabella-matrice td {
  padding: 2px 12px 2px 0;
  text-align: left;
  color: var(--testo-secondario);
}

.piano-tabella-matrice th { font-weight: 700; }

/* ------------------------------------------------ fatti di commessa e coda */

.piano-blocco { margin-top: 34px; }

.piano-tabella-fatti { border-top: 1px solid var(--bordo); }

.piano-tabella-fatti td { font-size: 0.92rem; }

.piano-provenienza-lista {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 20px;
  font-size: 0.9rem;
}

.piano-provenienza-lista dt {
  font-weight: 700;
  color: var(--testo-secondario);
}

.piano-provenienza-lista dd { margin: 0; overflow-wrap: anywhere; }

/* ⭐ LA LOGIN DELLA VISTA PIANO (fetta LOGIN, 23/08/2026) — in CODA, come le regole della vista
   piano: la testa di questo foglio è del TABLET e ⛔ non si tocca (guardia in suite). */
.entra-corpo {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.entra {
  width: min(22rem, 90vw);
  padding: 1.5rem;
}
.entra h1 {
  margin: 0 0 0.25rem;
}
.entra-sottotitolo {
  margin: 0 0 1.5rem;
  opacity: 0.75;
}
.entra form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.entra label {
  font-size: 0.85rem;
  font-weight: 600;
}
.entra input {
  padding: 0.7rem;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}
.entra button {
  padding: 0.75rem 1rem;
  font-size: 1.05rem;
  cursor: pointer;
}
.entra button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.entra-motivo {
  margin-top: 1.1rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

/* ==========================================================================
   LA PORTA DEL CANONE — pwa/canone.html (fetta PORTA-CANONE, 24/08/2026)
   AGGIUNTE IN CODA, come la vista piano e la login: nessuna regola sopra è
   toccata. Il linguaggio visivo è quello di `body.vista-piano` (stessa mano,
   stesso schermo d'ufficio); qui vivono solo le classi `canone-*`.
   ========================================================================== */

.canone-riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 16px 20px 20px;
  margin-bottom: 20px;
}

.canone-titolo-sezione {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.canone-num { text-align: right; font-variant-numeric: tabular-nums; }

.canone-fascia { font-size: 0.85rem; color: var(--testo-secondario); }

.canone-campo {
  width: 9rem;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* La voce che si sta cambiando si vede: è l'unica cosa che questa pagina
   colora, e colora un FATTO (questo numero non è più quello del canone). */
.canone-campo-mosso {
  outline: 2px solid #d68910;
  background: rgba(214, 137, 16, 0.12);
}

.canone-dopo { font-weight: 700; }

.canone-delta { font-weight: 700; color: #d68910; }

.canone-azioni {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.canone-azioni input[type="number"] { width: 7rem; padding: 6px 8px; }

#gesto-salva { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#gesto-salva input, #sformo-esito input { flex: 1 1 22rem; padding: 7px 9px; }

#sformo-esito { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }

.canone-btn-salva { font-weight: 700; }

.canone-tabella-voci td, .canone-tabella-voci th { padding: 5px 10px; }
.canone-tabella-soglie { max-width: 46rem; }
.canone-tabella-storico td { font-size: 0.9rem; }

/* ------------------------------------------ la coda della macchina (26/09/2026, corsia `piano-per-parti`) */

/* La testa della fila: il lavoro scritto UNA volta sopra le sue parti, che arrivano in fila nell'ordine di carico (la voce di una
   parte dice sul bottone solo la parte e le ore). Occupa tutta la riga anche nella griglia a due colonne della fascia «Altri lavori
   qui oggi». In CODA per la guardia del tablet (`test_pwa_piano_guardie`): le regole del tablet in testa ⛔ si toccano. */
.testa-fila {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--testo);
}