/* Quartier Generale — foglio di stile (pezzo 1, H157).
   Figlio del disegno approvato execution/h157_prove/quartier-generale-v5.html: stessi colori, stesse classi.
   La pagina NON scorre: scorrono le tre colonne, ognuna per conto suo. */

:root {
  --inchiostro:#101816; --grigio:#4d5956; --linea:#9aa5a1; --linea-ch:#c9d1ce; --carta:#fff; --fondo:#eef1f0;
  --verde:#1a9c5b; --verde-sc:#127a45; --verde-ch:#e2f5ea; --wa-fondo:#eaf6ee; --wa-mio:#d9fdd3;
  --rosso:#b3261e; --rosso-ch:#fde4e1; --servizio:#2b3a55; --servizio-ch:#dfe5f1;
  --c-reso:#127a45;  --c-reso-ch:#e2f5ea;
  --c-fasc:#1f4e8c;  --c-fasc-ch:#e3ecf8;
  --c-oggi:#0b6b83;  --c-oggi-ch:#d9eef3;
  --c-prog:#1f4b99;  --c-prog-ch:#dfe8f8;
  --c-cli:#6a3fa0;   --c-cli-ch:#ece2f7;
  --c-ope:#b3541e;   --c-ope-ch:#fbe8da;
  --c-stato:#a0306b; --c-stato-ch:#f8e1ee;
  --c-log:#7a5d00;   --c-log-ch:#f8edc6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--fondo); font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: var(--inchiostro); font-size: 15px; display: flex; flex-direction: column; -webkit-text-size-adjust: 100%; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
button { font: inherit; cursor: pointer; color: var(--inchiostro); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 3px solid #000; outline-offset: 1px; }
a { color: var(--c-prog); }

/* testo libero che arriva dalle porte: gli a capo si rispettano, le parole lunghe vanno a capo */
.testo { white-space: pre-wrap; overflow-wrap: anywhere; }

/* schermata «Accedi prima» */
.accesso { position: fixed; inset: 0; z-index: 20; background: var(--fondo); display: flex; align-items: center; justify-content: center; padding: 24px; }
.accesso .cart { background: var(--carta); border: 2px solid var(--linea); border-top: 6px solid var(--verde); border-radius: 14px; padding: 26px 30px; max-width: 520px; text-align: center; }
.accesso h1 { font-size: 21px; margin: 0 0 14px; }
.accesso p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.4; color: var(--grigio); }
.accesso form { display: flex; gap: 8px; margin: 0 0 10px; }
.accesso input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 12px; background: var(--carta); color: var(--inchiostro); }
.accesso form button { flex: none; background: var(--verde-sc); color: #fff; font-weight: 800; border: 0; border-radius: 22px; padding: 10px 20px; font-size: 15.5px; }
.accesso .esito { min-height: 20px; margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--rosso); }
.accesso a.altra { font-size: 14px; color: var(--grigio); }

.barra { flex: none; background: var(--carta); border-bottom: 3px solid var(--verde); padding: 7px 16px; display: flex; align-items: center; gap: 12px; }
.barra b { font-size: 18px; letter-spacing: .5px; color: var(--verde-sc); white-space: nowrap; }
.barra span { font-size: 13.5px; color: var(--grigio); white-space: nowrap; }
.barra .dx { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--inchiostro); }

/* il ritorno alla pagina iniziale di Omar Hetman (H157, Greg 4/10: «non c'è un pulsante per ritornare») */
.barra .casa { flex: none; background: var(--verde-sc); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; border-radius: 18px; padding: 4px 13px; white-space: nowrap; }

/* gli avvisi (banner) di questo apparecchio: verde = attivi, rosso = da attivare */
.barra .avvisi { flex: none; border: 2px solid var(--linea); background: var(--carta); border-radius: 18px; padding: 3px 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.barra .avvisi.attivi { border-color: var(--verde); background: var(--verde-ch); color: var(--verde-sc); }
.barra .avvisi.da-fare { border-color: var(--rosso); background: var(--rosso-ch); color: var(--rosso); }
.avvisi-nota { position: fixed; top: 48px; right: 12px; z-index: 15; max-width: min(400px, calc(100vw - 24px)); background: var(--carta); border: 2px solid var(--inchiostro); border-radius: 12px; padding: 10px 13px; font-size: 14.5px; line-height: 1.38; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); cursor: pointer; }

/* la pagina NON scorre: scorrono le tre colonne, ognuna per conto suo */
.tre { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.stanze, .centro, .omar { min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }

/* avvisi comuni: caricamento, lista vuota, errore con «Riprova» */
.carico { color: var(--grigio); font-size: 14.5px; padding: 10px 4px; }
.vuoto { color: var(--inchiostro); font-size: 14.5px; padding: 3px 0; }
.errore { border: 2px solid var(--rosso); background: var(--rosso-ch); color: var(--inchiostro); border-radius: 10px; padding: 9px 12px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.errore button { display: inline-block; margin: 6px 0 0; background: var(--carta); border: 2px solid var(--rosso); color: var(--rosso); border-radius: 9px; padding: 4px 12px; font-weight: 800; font-size: 13.5px; }
.avviso { border: 1.5px solid var(--verde-sc); background: var(--verde-ch); color: var(--verde-sc); font-weight: 700; border-radius: 9px; padding: 6px 10px; margin-bottom: 7px; font-size: 14px; overflow-wrap: anywhere; }
.avviso.no { border-color: var(--rosso); background: var(--rosso-ch); color: var(--rosso); }

/* SINISTRA */
.stanze { background: var(--carta); border-right: 2px solid var(--linea); }
.stanze .scorri { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 9px; -webkit-overflow-scrolling: touch; }
.gr { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--grigio); margin: 12px 4px 6px; }
.st { width: 100%; text-align: left; border: 1.5px solid var(--linea); border-radius: 10px; padding: 7px 10px; margin: 0 0 6px; display: flex; gap: 8px; background: var(--carta); cursor: pointer; }
.st .n { flex: 1; min-width: 0; display: block; }
.st .n b { display: block; font-size: 14.5px; overflow-wrap: break-word; }
.st .n small { display: block; color: var(--grigio); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .q { font-size: 12px; color: var(--grigio); white-space: nowrap; }
.st.alto { border-color: var(--rosso); background: var(--rosso-ch); }
.st.oggi { border-color: #000; background: #ffd43b; }
.st.oggi .n small { color: #000; }
.st.brief { border-color: var(--c-prog); background: var(--c-prog-ch); border-left: 7px solid var(--c-prog); }
.st.cant { border-left: 7px solid var(--k, var(--verde)); background: var(--verde-ch); border-color: #7cc79d; border-left-color: var(--k, var(--verde)); }
.st.cant.qui { background: var(--carta); border: 2.5px solid var(--verde-sc); border-left: 7px solid var(--k, var(--verde)); box-shadow: 0 2px 8px rgba(18,122,69,.28); }
.st.serv { border-left: 7px solid var(--servizio); background: var(--servizio-ch); border-color: #8d9bbb; border-left-color: var(--servizio); }
.st.sel { border: 3px solid #000; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.st.serv.sel { border-left: 7px solid var(--servizio); }
.pall { display: inline-block; background: var(--rosso); color: #fff; border-radius: 10px; font-size: 11.5px; font-weight: 800; padding: 1px 7px; margin-left: 4px; white-space: nowrap; letter-spacing: 0; }
.et-stato { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; border-radius: 20px; padding: 0 7px; margin-left: 5px; background: var(--carta); color: var(--inchiostro); border: 1.5px solid var(--inchiostro); white-space: nowrap; vertical-align: 1px; }

/* CENTRO: testa ferma, schede che scorrono, pulsanti fermi in basso */
.centro .testa { flex: none; background: var(--carta); border-bottom: 2px solid var(--linea); padding: 8px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testa h1 { font-size: 19px; margin: 0; overflow-wrap: anywhere; }
.treno { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.treno .et { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--grigio); }
.treno a { border: 2px solid var(--verde-sc); color: var(--verde-sc); border-radius: 20px; padding: 4px 11px; font-size: 13.5px; font-weight: 700; text-decoration: none; background: var(--carta); white-space: nowrap; }
.centro .schede { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; -webkit-overflow-scrolling: touch; }
.fondo-barra { flex: none; background: var(--carta); border-top: 3px solid var(--linea); padding: 8px 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vai { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--linea); background: var(--carta); border-radius: 9px; padding: 7px 10px; font-weight: 700; font-size: 13.5px; color: var(--inchiostro); white-space: nowrap; flex: none; }
.vai i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; background: var(--k); }
.vai.su { background: var(--k); color: #fff; border-color: var(--k); }
.vai.su i { background: #fff; }
.vai[data-s="reso"] { --k: var(--c-reso); } .vai[data-s="oggi"] { --k: var(--c-oggi); } .vai[data-s="prog"] { --k: var(--c-prog); }
.vai[data-s="cli"] { --k: var(--c-cli); } .vai[data-s="ope"] { --k: var(--c-ope); } .vai[data-s="stato"] { --k: var(--c-stato); } .vai[data-s="log"] { --k: var(--c-log); }

details.scheda { background: var(--carta); border: 1.5px solid var(--linea); border-left: 9px solid var(--c); border-radius: 12px; margin-bottom: 9px; }
details.scheda > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font-weight: 800; font-size: 15.5px; letter-spacing: .3px; color: var(--c); background: var(--cch); border-radius: 0 10px 10px 0; }
details.scheda[open] > summary { border-radius: 0 10px 0 0; border-bottom: 1.5px solid var(--linea-ch); }
details.scheda > summary::-webkit-details-marker { display: none; }
details.scheda > summary::before { content: "▸"; font-size: 14px; }
details.scheda[open] > summary::before { content: "▾"; }
details.scheda > summary small { font-weight: 500; color: var(--inchiostro); font-size: 13px; letter-spacing: 0; opacity: .85; }
details.scheda > summary .pall { margin-left: auto; }
details.scheda.attiva { border-color: var(--c); border-width: 3px; border-left-width: 9px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
details.scheda.attiva > summary { background: var(--c); color: #fff; }
details.scheda.attiva > summary small { color: #fff; opacity: .95; }
details.scheda .dentro { padding: 11px 14px 13px; line-height: 1.45; }
.s-reso { --c: var(--c-reso); --cch: var(--c-reso-ch); } .s-oggi { --c: var(--c-oggi); --cch: var(--c-oggi-ch); }
.s-prog { --c: var(--c-prog); --cch: var(--c-prog-ch); } .s-cli { --c: var(--c-cli); --cch: var(--c-cli-ch); }
.s-ope { --c: var(--c-ope); --cch: var(--c-ope-ch); } .s-stato { --c: var(--c-stato); --cch: var(--c-stato-ch); }
.s-log { --c: var(--c-log); --cch: var(--c-log-ch); } .s-serv { --c: var(--servizio); --cch: var(--servizio-ch); }

.punto { border-left: 5px solid var(--linea); padding: 4px 0 4px 11px; margin-bottom: 9px; overflow-wrap: anywhere; }
.punto.te { border-left-color: var(--rosso); }
.punto b.et { display: block; font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); margin-bottom: 2px; }
.punto.te b.et { color: var(--rosso); }
.punto .riga-s { margin-top: 3px; }
.punto .serve { font-size: 14px; margin-top: 2px; }
.bott { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.bott button { font-size: 13.5px; font-weight: 700; border-radius: 9px; padding: 5px 11px; border: 1.5px solid var(--c-prog); background: var(--c-prog-ch); color: var(--c-prog); }
.riass { background: var(--fondo); border: 1px solid var(--linea-ch); border-radius: 10px; padding: 8px 11px; margin-bottom: 9px; overflow-wrap: anywhere; }
.riass > b { font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); display: block; margin-bottom: 2px; }
h4 { font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); margin: 11px 0 6px; }
h4:first-child { margin-top: 0; }

/* i messaggi dei gruppi: quelli del cliente a sinistra, i nostri a destra e verdi */
.msgs { max-height: min(460px, 52vh); overflow-y: auto; padding: 2px 4px 2px 0; -webkit-overflow-scrolling: touch; }
.msg { border: 1.5px solid var(--linea); border-left: 5px solid var(--c); border-radius: 10px; padding: 6px 10px; margin: 0 9% 6px 0; background: var(--carta); overflow-wrap: anywhere; }
.msg.nostro { margin: 0 0 6px 9%; background: var(--wa-mio); border-left: 1.5px solid var(--linea); border-right: 5px solid var(--verde-sc); }
.msg .chi { font-size: 11.5px; font-weight: 800; color: var(--grigio); letter-spacing: .4px; }
.msg .testo { font-size: 15.5px; line-height: 1.4; }
.msg .or { color: var(--grigio); font-size: 13px; white-space: pre-wrap; }
a.apri { display: inline-block; margin-top: 3px; font-weight: 800; font-size: 13.5px; color: var(--c-prog); border: 1.5px solid var(--c-prog); background: var(--c-prog-ch); border-radius: 20px; padding: 1px 10px; text-decoration: none; white-space: nowrap; }

.tab-scorri { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; }
.tab td, .tab th { text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--linea-ch); font-size: 14.5px; vertical-align: top; }
.tab th { font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); }
.tab tr.giorno th { font-size: 13px; letter-spacing: .2px; color: var(--inchiostro); background: var(--fondo); border-bottom: 1.5px solid var(--linea); }
.tab td.ora { font-weight: 800; font-size: 16px; white-space: nowrap; }
.tab td small { color: var(--grigio); font-size: 12.5px; font-weight: 500; }
.grande { font-size: 17px; font-weight: 800; margin: 2px 0 10px; }
.nota-p { font-size: 13px; color: var(--grigio); margin: 8px 0 0; }
.segno { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .3px; border-radius: 20px; padding: 1px 8px; background: #ffd43b; color: #000; margin-left: 5px; white-space: nowrap; }

/* il Briefing */
.momenti { display: flex; gap: 7px; margin-bottom: 11px; flex-wrap: wrap; }
.momenti button { border: 2px solid var(--c-prog); background: var(--carta); color: var(--c-prog); border-radius: 22px; padding: 7px 14px; font-weight: 800; font-size: 14.5px; }
.momenti button.su { background: var(--c-prog); color: #fff; }
.momenti button small { font-weight: 500; opacity: .9; margin-left: 4px; }
.due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 8px; }
.due > div { background: var(--fondo); border: 1px solid var(--linea-ch); border-radius: 10px; padding: 8px 11px; font-size: 14.5px; line-height: 1.42; overflow-wrap: anywhere; }
.due > div > b { display: block; font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); margin-bottom: 2px; }
.due .voce { margin-bottom: 6px; }
.due .voce:last-child { margin-bottom: 0; }

/* Oggi: il segno a destra e il nome che fa entrare nel cantiere */
.stato-c { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: .3px; border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.stato-c.posto { background: var(--verde-sc); color: #fff; }
.stato-c.te { background: var(--rosso); color: #fff; }
details.scheda.attiva > summary .stato-c { border: 1.5px solid #fff; }
.nome-c { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; overflow-wrap: anywhere; }
.nome-c:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.dove-c { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .3px; border-radius: 20px; padding: 1px 8px; margin: 4px 4px 0 0; background: var(--verde-ch); color: var(--verde-sc); border: 1px solid #7cc79d; }

/* Reception */
.arr { border: 1.5px solid var(--linea); border-left: 7px solid var(--servizio); border-radius: 12px; padding: 10px 13px; margin-bottom: 9px; background: var(--carta); overflow-wrap: anywhere; }
.arr .da { font-size: 11.5px; font-weight: 800; letter-spacing: .4px; color: var(--grigio); }
.arr .cosa { font-size: 15px; margin: 2px 0 6px; line-height: 1.4; }
.arr .prop-o { background: var(--fondo); border: 1px solid var(--linea-ch); border-radius: 9px; padding: 6px 10px; font-size: 14px; }
.arr .prop-o b { font-size: 11px; letter-spacing: .4px; color: var(--grigio); display: block; }

/* DESTRA: Parla con Omar, chiaro come WhatsApp */
.omar { background: var(--wa-fondo); border-left: 2px solid var(--linea); }
.omar .capo { flex: none; background: #cfeedd; color: var(--inchiostro); padding: 8px 13px; font-weight: 800; font-size: 15px; letter-spacing: .3px; border-bottom: 1.5px solid #9fd3b6; overflow-wrap: anywhere; }
.omar .capo small { font-weight: 500; color: var(--grigio); font-size: 13px; letter-spacing: 0; }
.parla { flex: none; padding: 9px 11px; border-bottom: 1.5px solid #9fd3b6; }
.parla .riga { display: flex; gap: 6px; align-items: stretch; margin: 0; }
.parla textarea { flex: 1; font: inherit; font-size: 16px; border: 1.5px solid var(--linea); border-radius: 14px; padding: 8px 12px; min-width: 0; background: #fff; color: var(--inchiostro); resize: none; height: 58px; line-height: 1.3; }
/* discussione aperta: richiudere la scheda è un gesto innocuo e si vede; le azioni che chiudono la domanda chiedono conferma */
.disc .chiudi-scheda { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.disc .chiudi-scheda button { font: inherit; font-size: 13.5px; font-weight: 800; border: 1.5px solid var(--linea); background: #fff; color: var(--inchiostro); border-radius: 20px; padding: 4px 12px; cursor: pointer; }
.disc .chiudi-scheda small { color: var(--grigio); font-size: 12.5px; }
.disc button.armato { background: #000 !important; color: #ffd43b !important; border-color: #000 !important; }
/* «in cantiere oggi:» è l'etichetta; il numero o «nessuno» è la cosa che conta (Greg, 3/10) */
details.scheda > summary .valore { font-weight: 900; font-size: 17px; color: #000; letter-spacing: 0; }
details.scheda.attiva > summary .valore { color: #fff; }
/* la nota sulle presenze */
.nota-pres { margin: 10px 0 2px; padding: 9px 11px; border: 1.5px dashed var(--linea); border-radius: 10px; background: #fffdf3; }
.nota-pres small { display: block; color: var(--grigio); font-size: 12.5px; margin-top: 4px; }
.nota-pres .et { display: block; font-size: 11.5px; letter-spacing: .5px; color: var(--grigio); margin-bottom: 4px; }
.nota-pres textarea { width: 100%; font: inherit; font-size: 15px; border: 1.5px solid var(--linea); border-radius: 10px; padding: 7px 10px; background: #fff; color: var(--inchiostro); resize: vertical; }
.nota-pres .nota-apri { font: inherit; font-size: 14px; font-weight: 800; border: 2px solid #000; background: #ffd43b; color: #000; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.nota-pres .avviso, .nota-pres .errore { margin-top: 7px; }
.parla .mic { flex: none; background: var(--verde); color: #fff; border: 0; border-radius: 14px; padding: 6px 12px; font-size: 14.5px; font-weight: 800; }
.parla .mic.rec { background: var(--rosso); }
.parla .mic:disabled { opacity: .6; }
.parla .manda { flex: none; background: var(--verde-sc); color: #fff; border: 0; border-radius: 14px; padding: 6px 13px; font-size: 14.5px; font-weight: 800; }
.parla .avviso, .parla .errore { margin: 7px 0 0; }
.parla .eco { margin-top: 7px; font-size: 13.5px; background: #fff; border-radius: 10px; padding: 6px 10px 0; border-bottom: 6px solid #fff; line-height: 18px; box-shadow: 0 1px 1px rgba(0,0,0,.12); max-height: 84px; overflow-y: auto; }
.parla .eco b { font-size: 11px; line-height: 18px; letter-spacing: .4px; color: var(--verde-sc); display: block; }
.striscia-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--grigio); margin: 8px 2px 4px; }
.striscia { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid #9fd3b6; border-radius: 10px; background: rgba(255,255,255,.45); -webkit-overflow-scrolling: touch; }
.striscia > * { flex: none; }
.b { max-width: 88%; border-radius: 10px; padding: 6px 9px; line-height: 1.38; font-size: 14.5px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.14); align-self: flex-start; }
.b .chi { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--grigio); }
.b .chi .dove-c { margin: 0 0 0 5px; font-size: 10.5px; padding: 0 7px; }
.b.tu { align-self: flex-end; background: var(--wa-mio); }

.lista { flex: 1; min-height: 0; overflow-y: auto; padding: 9px 10px 12px; -webkit-overflow-scrolling: touch; }
#disc-avviso { position: sticky; top: 0; z-index: 2; }
.lista .tit { display: flex; align-items: center; margin: 0 2px 7px; }
.lista .tit b { font-size: 11.5px; letter-spacing: .6px; color: var(--grigio); }
.disc { border: 1.5px solid var(--linea); border-left: 7px solid var(--grigio); border-radius: 10px; margin-bottom: 7px; background: #fff; }
.disc.te { border-left-color: var(--rosso); }
.disc .testa-d { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.disc b.t { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.disc b.t::before { content: "▸ "; color: var(--grigio); }
.disc.aperta b.t::before { content: "▾ "; }
.disc .testa-d small { display: block; color: var(--grigio); font-size: 12.5px; margin-top: 1px; line-height: 1.3; }
.chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .3px; border-radius: 20px; padding: 1px 8px; margin: 4px 4px 0 0; }
.chip.te { background: var(--rosso); color: #fff; }
.chip.imp { background: #ffd43b; color: #000; }
.chip.chi { background: var(--fondo); color: var(--inchiostro); border: 1px solid var(--linea); }
.disc .corpo { display: none; border-top: 1.5px solid var(--linea-ch); padding: 9px 10px 4px; }
.disc.aperta { border-width: 2.5px; border-left-width: 7px; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.disc.aperta .corpo { display: block; }
.disc .et { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--grigio); margin-bottom: 2px; }
.disc .domanda { font-size: 14.5px; line-height: 1.42; margin-bottom: 9px; }
.disc .contesto { background: var(--fondo); border: 1px solid var(--linea-ch); border-radius: 9px; padding: 6px 9px; font-size: 13.5px; line-height: 1.4; margin-bottom: 9px; }
.az { margin-bottom: 9px; }
.az-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.az label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--grigio); margin-bottom: 3px; }
.az textarea { display: block; width: 100%; font: inherit; font-size: 16px; border: 1.5px solid var(--linea); border-radius: 10px; padding: 7px 10px; resize: vertical; min-height: 58px; margin-bottom: 6px; background: #fff; color: var(--inchiostro); }
.az button { width: 100%; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 14.5px; }
.az button.si { background: var(--verde-sc); border: 2px solid var(--verde-sc); color: #fff; }
.az button.no { background: var(--carta); border: 2px solid var(--rosso); color: var(--rosso); }
.az button.rispondi { background: var(--c-prog); border: 2px solid var(--c-prog); color: #fff; }
.az button.risolto { background: var(--carta); border: 2px solid var(--verde-sc); color: var(--verde-sc); }
.az small { display: block; color: var(--grigio); font-size: 12.5px; line-height: 1.3; margin-top: 3px; }
.chiuse { text-align: center; color: var(--grigio); font-size: 13px; margin-top: 2px; }

/* finestre strette (iPad) e basse (1290×600): si stringono i margini, non si perde niente */
@media (max-width: 1180px) {
  .tre { grid-template-columns: 215px minmax(0, 1fr) 330px; }
  /* colonna di Omar stretta (iPad): il campo per scrivere prende tutta la riga, i due pulsanti stanno sotto */
  .parla .riga { flex-wrap: wrap; }
  .parla textarea { order: -1; flex: 1 1 100%; }
  .parla .mic, .parla .manda { flex: 1 1 0; padding: 8px 12px; }
}
@media (max-width: 900px) {
  .tre { grid-template-columns: 178px minmax(0, 1fr) 280px; }
  .barra span:not(.dx) { display: none; }
  .centro .schede { padding: 9px 8px; }
  details.scheda .dentro { padding: 9px 10px 11px; }
  .due { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 720px) {
  .barra { padding: 4px 16px; }
  .centro .testa { padding: 5px 14px; gap: 6px 10px; }
  .treno a { padding: 2px 10px; }
  .fondo-barra { padding: 5px 10px; gap: 5px; }
  .vai { padding: 5px 9px; }
  .omar .capo { padding: 5px 13px; }
  .parla { padding: 7px 11px; }
  .parla textarea { height: 44px; padding: 5px 12px; }
  .parla .eco { max-height: 66px; }
  .striscia { max-height: 124px; }
}

/* H168: i gesti sulle schede «Da te» (scorri a destra = risolto, a sinistra = archivia) */
.disc { transition: transform .12s ease-out, background .12s; touch-action: pan-y; }
.disc.sw-dx { background: #e6f7ea; border-left-color: #2e7d32; }
.disc.sw-sx { background: #f1f1f1; border-left-color: #777; }
.gesti-nota { display: none; font-size: 11.5px; color: var(--grigio); margin: -4px 2px 8px; }
@media (pointer: coarse) { .gesti-nota { display: block; } }
.disc button.archivia { background: #f1f1f1; }

/* ── FASCICOLO DEL CANTIERE (H169): ogni riga si apre e mostra le sue fonti ── */
.s-fasc { --c: var(--c-fasc); --cch: var(--c-fasc-ch); }
.vai[data-s="fasc"] { --k: var(--c-fasc); }
.s-fasc h4 { margin: 12px 0 5px; font-size: 12.5px; letter-spacing: .6px; color: var(--c-fasc); }
.s-fasc h4 small { font-weight: 600; color: var(--grigio); letter-spacing: 0; }
.s-fasc details.fr, .s-fasc details.tema { border-left: 5px solid var(--linea); padding: 3px 0 3px 10px; margin: 0 0 7px; overflow-wrap: anywhere; }
.s-fasc details.fr > summary, .s-fasc details.tema > summary { cursor: pointer; font-size: 15px; line-height: 1.4; list-style: none; }
.s-fasc details.fr > summary::-webkit-details-marker, .s-fasc details.tema > summary::-webkit-details-marker { display: none; }
.s-fasc details.fr > summary::before, .s-fasc details.tema > summary::before { content: '▸ '; color: var(--c-fasc); font-weight: 800; }
.s-fasc details[open].fr > summary::before, .s-fasc details[open].tema > summary::before { content: '▾ '; }
.s-fasc details.tema > summary { font-weight: 800; }
.s-fasc details.fr.greg { border-left-color: #b7791f; }
.s-fasc details.fr.aperta { border-left-color: var(--rosso); }
.s-fasc .chi-greg { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: #b7791f; border-radius: 10px; padding: 0 7px; }
.s-fasc .palla { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--rosso); border-radius: 10px; padding: 0 7px; }
.s-fasc .nf { font-size: 12px; font-weight: 600; color: var(--grigio); white-space: nowrap; }
.s-fasc .perche { font-size: 12.5px; color: var(--grigio); margin: 6px 0 2px; }
.s-fasc .fatto { margin: 7px 0 9px 4px; padding: 7px 10px; background: var(--c-fasc-ch); border-radius: 8px; }
.s-fasc .fatto.smentito { opacity: .55; }
.s-fasc .fatto.smentito > .testo { text-decoration: line-through; }
.s-fasc .fatto b.et { display: block; font-size: 11.5px; letter-spacing: .4px; color: var(--c-fasc); margin-bottom: 2px; }
.s-fasc .fatto .testo { font-size: 14.5px; }
.s-fasc .cit { font-size: 14px; font-style: italic; margin-top: 4px; padding-left: 8px; border-left: 3px solid var(--c-fasc); }
.s-fasc .orig { margin-top: 6px; padding: 6px 9px; background: #fff; border: 1px solid var(--linea); border-radius: 7px; font-size: 13.5px; }
.s-fasc .orig b { display: block; font-size: 11.5px; color: var(--grigio); letter-spacing: .3px; }
.s-fasc .ver { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 0 8px; }
.s-fasc .ver.da { background: #fff4d6; color: #8a5a00; } .s-fasc .ver.ok { background: #e2f5ea; color: #127a45; } .s-fasc .ver.no { background: #fde2e2; color: var(--rosso); }
.s-fasc small.fonte { display: block; margin-top: 5px; font-size: 11.5px; color: var(--grigio); }
.vai[data-s="vis"] { --k: var(--c-fasc); }
.s-fasc .bott { margin: 4px 0; }

/* ── TELEFONO (H170, Greg 17/10: «il QG deve avere la sua PWA per il telefono», modello approvato) ──
   Sotto i 760 px: una colonna sola, una finestra alla volta — le Stanze (la casa), la stanza scelta, Omar (parla + Da te).
   La finestra la sceglie qg.js con body[data-fin]; il computer e l'iPad largo non cambiano. */
.tel-ind, .tel-omar { display: none; }
@media (max-width: 760px) {
  .tre { grid-template-columns: minmax(0, 1fr); }
  .tre > .stanze, .tre > .centro, .tre > .omar { display: none; }
  body:not([data-fin]) .tre > .stanze, body[data-fin="stanze"] .tre > .stanze,
  body[data-fin="centro"] .tre > .centro, body[data-fin="omar"] .tre > .omar { display: flex; }
  .stanze { border-right: 0; }
  .omar { border-left: 0; }

  .barra { padding: 6px 10px; gap: 8px; }
  /* nella barra del telefono restano solo: ‹ Stanze · gli avvisi · Omar (il nome e la giornata non ci stanno) */
  .barra .casa, .barra > b, .barra > span { display: none; }
  .barra .tel-omar .pall:not([hidden]) { display: inline-block; color: #fff; font-size: 12.5px; }
  .tel-ind, .tel-omar { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 40px; border: 2px solid var(--verde-sc); background: var(--carta); color: var(--verde-sc); font-weight: 800; font-size: 15px; border-radius: 20px; padding: 6px 14px; }
  .tel-omar { margin-left: auto; }
  .tel-omar.su { background: var(--verde-sc); color: #fff; }
  .tel-omar .pall { margin-left: 2px; }
  .avvisi-nota { top: 56px; }

  /* le Stanze: voci grandi per il dito */
  .stanze .scorri { padding: 12px; }
  .st { padding: 12px 12px; margin-bottom: 8px; border-radius: 12px; }
  .st .n b { font-size: 16.5px; }
  .st .n small { font-size: 13.5px; }

  /* la stanza: i pulsanti fermi in basso scorrono di lato invece di andare su tre righe */
  .centro .testa { padding: 8px 12px; }
  .treno { margin-left: 0; }
  .centro .schede { padding: 10px; }
  .fondo-barra { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px; }
  .vai { padding: 10px 12px; font-size: 14.5px; }

  /* Omar: il campo prende tutta la riga, i due pulsanti sotto, alti per il dito */
  .parla .riga { flex-wrap: wrap; }
  .parla textarea { order: -1; flex: 1 1 100%; }
  .parla .mic, .parla .manda { flex: 1 1 0; min-height: 44px; }
  .disc .az button { min-height: 40px; }
}

/* ── LA STANZA PRESENZE (H170, modello approvato da Greg 17/10): una scheda per giornata, linea del tempo 7→21 ── */
.pr-nota { font-size: 14px; color: var(--grigio); margin: 2px 2px 10px; line-height: 1.4; }
.pr-s { background: var(--carta); border: 1.5px solid var(--linea); border-left: 7px solid var(--servizio); border-radius: 12px; padding: 12px 13px; margin-bottom: 10px; display: grid; gap: 10px; }
.pr-s.pr-fatta { background: var(--verde-ch); border-color: var(--verde); }
.pr-esito { font-weight: 700; color: var(--verde-sc); font-size: 15px; }
.pr-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; }
.pr-testa b { font-size: 16.5px; overflow-wrap: anywhere; }
.pr-chip { font-size: 12.5px; border-radius: 20px; padding: 1px 9px; background: var(--fondo); color: var(--grigio); white-space: nowrap; }
.pr-chip.pr-rosso { background: var(--rosso-ch); color: var(--rosso); font-weight: 700; }
.pr-cosa { font-size: 15px; line-height: 1.42; }
.pr-tempo { display: grid; gap: 7px; padding-top: 4px; }
.pr-rg { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.pr-et { font-size: 12.5px; color: var(--grigio); line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
.pr-et small { display: block; font-weight: 700; color: var(--inchiostro); }
.pr-asse { position: relative; height: 15px; }
.pr-asse span { position: absolute; transform: translateX(-50%); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--grigio); }
.pr-pista { position: relative; height: 22px; background: rgba(16, 24, 22, .06); border-radius: 6px; margin-top: 12px; }
.pr-pz { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background-color: #5f7f88; }
.pr-pz.pr-gps { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 4px, transparent 4px 8px); }
.pr-pz.pr-store { background-color: #8a9692; }
.pr-pz.pr-fuori { background-color: var(--rosso); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 3px, transparent 3px 6px); }
.pr-pz.pr-aperto { outline: 2px dashed var(--rosso); outline-offset: 1px; }
.pr-tb { position: absolute; top: -3px; width: 4px; height: 28px; background: var(--inchiostro); border-radius: 2px; transform: translateX(-2px); }
.pr-tb b { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--inchiostro); }
.pr-prop { background: var(--c-fasc-ch); border-radius: 10px; padding: 9px 11px; font-size: 15px; line-height: 1.4; }
.pr-prop b { display: block; font-size: 11.5px; letter-spacing: .6px; color: var(--c-fasc); margin-bottom: 2px; }
.pr-gesti { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-gesti button, .pr-detto button { font-size: 15px; font-weight: 700; border-radius: 12px; padding: 9px 14px; min-height: 42px; border: 1.5px solid var(--linea); background: var(--carta); }
.pr-gesti .pr-si, .pr-detto .pr-si { background: var(--verde-sc); border-color: var(--verde-sc); color: #fff; }
.pr-gesti button.armato { background: #000; border-color: #000; color: #ffd43b; }
.pr-gesti .pr-mic { border-color: var(--servizio); color: var(--servizio); }
.pr-gesti .pr-mic.rec { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.pr-gesti .pr-piano { border-color: transparent; color: var(--grigio); font-weight: 600; }
.pr-detto { display: grid; gap: 7px; }
.pr-detto textarea { font: inherit; font-size: 16px; border: 1.5px solid var(--linea); border-radius: 12px; padding: 8px 11px; resize: vertical; min-width: 0; }
.pr-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--grigio); margin: 4px 2px 10px; }
.pr-legenda i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; background: #5f7f88; }
.pr-legenda i.pr-gps { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.pr-legenda i.pr-tbl { width: 4px; height: 14px; background: var(--inchiostro); }
.pr-legenda i.pr-fuori { background: var(--rosso); }
.pr-pz.pr-breve { background-color: #c9d1ce; }

/* ── LE POSIZIONI DEI CANTIERI (H170) ── */
.pos-bott { border: 2px solid var(--verde-sc); background: var(--verde-ch); color: var(--verde-sc); border-radius: 20px; padding: 4px 12px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.pos-manca { color: var(--rosso); font-weight: 700; font-size: 13px; }
.pos-riga { display: flex; align-items: center; gap: 10px; background: var(--carta); border: 1.5px solid var(--linea); border-left: 7px solid var(--k, var(--verde)); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.pos-riga .pos-n { flex: 1; min-width: 0; }
.pos-riga .pos-n b { font-size: 15px; overflow-wrap: anywhere; }
.pos-riga .pos-n small { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--grigio); }
.pos-riga .pos-bott { min-height: 40px; padding: 6px 13px; }
.velo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .35); }
.foglio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 520px; margin: 0 auto; max-height: 85vh; overflow-y: auto; background: var(--carta); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .25); padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.foglio h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.pos-coord { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pos-coord code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: var(--fondo); border-radius: 8px; padding: 7px 9px; user-select: all; -webkit-user-select: all; }
.pos-coord a, .pos-coord button { font-size: 14.5px; font-weight: 800; border: 1.5px solid var(--linea); background: var(--carta); color: var(--c-prog); border-radius: 12px; padding: 8px 12px; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.pos-tit { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; color: var(--grigio); margin-top: 4px; }
.pos-a { text-align: left; border: 1.5px solid var(--verde-sc); background: var(--verde-ch); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 800; color: var(--inchiostro); min-height: 48px; }
.pos-a small { display: block; font-weight: 500; font-size: 13px; color: var(--grigio); }
.pos-no { color: var(--rosso); }
.pos-chiudi { border: 1.5px solid var(--linea); background: var(--carta); border-radius: 12px; padding: 10px; font-size: 15px; font-weight: 700; }