/* ============================================================
   RAPPORTINO DI CANTIERE - aspetto grafico
   Chiaro di base (si legge meglio all'aperto), scuro se il telefono è impostato così.
   ============================================================ */
:root {
  --sfondo: #eef1f5;
  --carta: #ffffff;
  --testo: #1b2430;
  --testo-tenue: #5d6b7c;
  --bordo: #c9d1db;
  --bordo-forte: #1b2430;
  --primario: #1f3a5f;
  --primario-testo: #ffffff;
  --accento: #8a2d8f;
  --ok: #1e7a46;
  --ok-sfondo: #e3f4ea;
  --pericolo: #b3261e;
  --pericolo-sfondo: #fbe9e7;
  --attenzione-sfondo: #fff4d6;
  --evidenza: #e8eef7;
  --ombra: 0 1px 3px rgba(20, 30, 45, .12), 0 4px 16px rgba(20, 30, 45, .06);
  --raggio: 10px;
  color-scheme: light;
}
/* Tema scuro: automatico (impostazione del telefono/PC) oppure scelto con il tasto ☀/🌙 (data-tema su <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo: #10151c;
    --carta: #1a212b;
    --testo: #e6ebf1;
    --testo-tenue: #9aa7b6;
    --bordo: #334050;
    --bordo-forte: #c9d1db;
    --primario: #4f7fbf;
    --primario-testo: #ffffff;
    --accento: #c77fcc;
    --ok: #5cc98a;
    --ok-sfondo: #17301f;
    --pericolo: #ff8a80;
    --pericolo-sfondo: #3a1d1b;
    --attenzione-sfondo: #3a3118;
    --evidenza: #22303f;
    --ombra: 0 1px 3px rgba(0, 0, 0, .4);
    --gc-blu: #8fb0ee; --gc-rame: #e0a46a;
    color-scheme: dark;  }
}
:root[data-tema="scuro"] {
    --sfondo: #10151c;
    --carta: #1a212b;
    --testo: #e6ebf1;
    --testo-tenue: #9aa7b6;
    --bordo: #334050;
    --bordo-forte: #c9d1db;
    --primario: #4f7fbf;
    --primario-testo: #ffffff;
    --accento: #c77fcc;
    --ok: #5cc98a;
    --ok-sfondo: #17301f;
    --pericolo: #ff8a80;
    --pericolo-sfondo: #3a1d1b;
    --attenzione-sfondo: #3a3118;
    --evidenza: #22303f;
    --ombra: 0 1px 3px rgba(0, 0, 0, .4);
    --gc-blu: #8fb0ee; --gc-rame: #e0a46a;
    color-scheme: dark;}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1 { font-size: 1.4rem; margin: 0 0 .6rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
p { margin: .4rem 0 .8rem; }

/* ---------- schermi ---------- */
.schermo { min-height: 100vh; min-height: 100dvh; }
.centro { display: flex; align-items: center; justify-content: center; padding: 16px; flex-direction: column; gap: 16px; }
.caricamento { color: var(--testo-tenue); }
.scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 20px; box-shadow: var(--ombra);
}
.stretta { width: 100%; max-width: 420px; }
.centro-testo { text-align: center; margin: 24px auto; }
.logo-titolo { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.logo-titolo h1 { margin: 0; }
.sottotitolo { color: var(--testo-tenue); font-size: .9rem; }

/* ---------- campi ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.campo > span { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--testo-tenue); }
.campo.in-linea { flex-direction: row; align-items: center; gap: 10px; }
input, select, textarea {
  font: inherit; color: var(--testo); background: var(--carta);
  border: 1px solid var(--bordo); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px;
}
textarea { resize: vertical; min-height: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }
input[readonly] { background: var(--evidenza); }
.griglia-2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.griglia-4 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 640px) {
  .griglia-2 { grid-template-columns: 1fr 1fr; }
  .griglia-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------- pulsanti ---------- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; min-height: 44px;
  padding: 8px 16px; border: 1px solid var(--bordo); background: var(--carta); color: var(--testo);
}
.btn:hover { border-color: var(--primario); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.primario { background: var(--primario); color: var(--primario-testo); border-color: var(--primario); }
.btn.pericolo { color: var(--pericolo); border-color: var(--pericolo); }
.btn.grande { min-height: 52px; font-size: 1.05rem; padding: 10px 22px; }
.btn.piccolo { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.link { background: none; border: 0; color: var(--primario); font: inherit; cursor: pointer; padding: 8px 0; text-decoration: underline; }
#formLogin .btn.grande, #formSetup .btn.grande { width: 100%; margin-top: 6px; }
.errore { color: var(--pericolo); background: var(--pericolo-sfondo); border-radius: 8px; padding: 8px 12px; }
.aiuto { color: var(--testo-tenue); font-size: .9rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- barra in alto ---------- */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: var(--primario); color: var(--primario-testo); padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
}
.barra-titolo { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.barra-titolo img { border-radius: 6px; background: #fff; }
.barra-nome { font-weight: 700; }
.barra-utente { font-size: .85rem; opacity: .85; }
.barra .btn { background: transparent; color: inherit; border-color: rgba(255, 255, 255, .5); }
.schede { display: flex; gap: 4px; overflow-x: auto; order: 3; width: 100%; }
@media (min-width: 900px) { .schede { order: 0; width: auto; } }
.scheda-btn {
  font: inherit; font-size: .95rem; color: inherit; background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap; opacity: .8;
}
.scheda-btn.attiva { background: rgba(255, 255, 255, .18); opacity: 1; font-weight: 700; }
.conta { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--primario); font-size: .8rem; font-weight: 700; text-align: center; }
.conta.zero { opacity: .5; }

.avviso { background: var(--attenzione-sfondo); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.contenuto { max-width: 1100px; margin: 0 auto; padding: 16px; padding-bottom: 10px; }

/* ---------- foglio (modulo) ---------- */
.foglio {
  background: var(--carta); border: 1.5px solid var(--bordo-forte); border-radius: 4px;
  padding: 16px; margin-bottom: 18px; box-shadow: var(--ombra);
}
.foglio-testata {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  border-bottom: 2px solid var(--bordo-forte); padding-bottom: 8px; margin-bottom: 14px;
}
.foglio-titolo { font-weight: 800; font-size: 1.1rem; letter-spacing: .04em; }
.foglio-mod { font-size: .8rem; color: var(--testo-tenue); }
.sezione-titolo {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  margin: 18px 0 8px; font-weight: 700; text-transform: uppercase; font-size: .9rem;
}
.cerca { max-width: 220px; min-height: 38px; padding: 6px 10px; }
.firma-nota { margin-top: 14px; font-size: .9rem; color: var(--testo-tenue); border-top: 1px dashed var(--bordo); padding-top: 10px; }

.orari { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; display: grid; }
@media (min-width: 640px) { .orari { grid-template-columns: repeat(4, minmax(0, 1fr)); } .orari.due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.orari label { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--testo-tenue); min-width: 0; }
.orari input { min-height: 40px; padding: 6px 8px; }
.orari-tutti { border: 1px dashed var(--bordo); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.orari-tutti-titolo { font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.orari-tutti .btn { margin-top: 8px; }
.nessuno { padding: 16px; color: var(--testo-tenue); text-align: center; }

.spunta-grande { font-size: 3.5rem; color: var(--ok); line-height: 1; margin-bottom: 8px; }

/* ---------- elenchi (rapportini, utenti) ---------- */
.elenco { display: flex; flex-direction: column; gap: 8px; }
.voce {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; text-align: left; font: inherit; color: inherit;
}
button.voce { cursor: pointer; }
button.voce:hover { border-color: var(--primario); }
.voce-princ { flex: 1 1 260px; min-width: 0; }
.voce-titolo { font-weight: 700; }
.voce-sotto { font-size: .88rem; color: var(--testo-tenue); }
.etichetta { font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--evidenza); }
.etichetta.ok { background: var(--ok-sfondo); color: var(--ok); }
.etichetta.no { background: var(--pericolo-sfondo); color: var(--pericolo); }
.nuovo-utente { border-top: 1px solid var(--bordo); margin-top: 16px; }

/* ---------- dettaglio: fronte in sola lettura ---------- */
.dati-fronte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; margin-bottom: 12px; }
.dato span { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--testo-tenue); }
.dato b { font-weight: 600; overflow-wrap: anywhere; }
.tabella-scorri { overflow-x: auto; }
table.tab { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tab th, .tab td { border: 1px solid var(--bordo); padding: 6px 8px; text-align: left; }
.tab th { background: var(--evidenza); font-size: .78rem; text-transform: uppercase; }
.testi-fronte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.testi-fronte .dato b { white-space: pre-wrap; }
.firme { margin-top: 12px; font-size: .9rem; color: var(--testo-tenue); }

/* ---------- blocchi ore (retro) ---------- */
.blocco { border: 1.5px solid var(--bordo-forte); border-radius: 6px; padding: 12px; margin-bottom: 14px; }
.blocco-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 800; }
.blocco-corpo { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .blocco-corpo { grid-template-columns: 1.6fr 1fr; } }
.tab input, .tab select { min-height: 36px; padding: 4px 6px; font-size: .92rem; }
.tab input.ore { width: 70px; text-align: center; }
.tab td.calc { text-align: center; font-weight: 700; background: var(--evidenza); }
.blocco-operai { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bordo); border-radius: 18px;
  padding: 4px 10px; cursor: pointer; font-size: .9rem; user-select: none; min-height: 34px;
}
.chip input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.chip.si { background: var(--evidenza); border-color: var(--primario); font-weight: 600; }
.riepilogo { margin-top: 10px; }
.riepilogo .errore, .riepilogo .ok-box { margin: 6px 0; }
.ok-box { color: var(--ok); background: var(--ok-sfondo); border-radius: 8px; padding: 8px 12px; }

/* ---------- finestra di dialogo ---------- */
.finestra { position: fixed; inset: 0; background: rgba(10, 15, 25, .55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.finestra-box { background: var(--carta); border-radius: var(--raggio); padding: 20px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: var(--ombra); }
.finestra-box ul { padding-left: 20px; }

/* ---------- avvisi a comparsa ---------- */
.avvisi { position: fixed; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.avviso-pop { background: var(--testo); color: var(--carta); padding: 10px 16px; border-radius: 8px; max-width: 520px; box-shadow: var(--ombra); }
.avviso-pop.errore { background: var(--pericolo); color: #fff; }
.avviso-pop.ok { background: var(--ok); color: #fff; }
.versione { text-align: center; color: var(--testo-tenue); font-size: .8rem; margin-top: 24px; }

@media print {
  .barra, .avviso, .azioni, #btnTornaElenco, .avvisi { display: none !important; }
  body { background: #fff; }
}

/* ============================================================
   MODULO CARTACEO (Mod. 22.03): carta bianca e inchiostro blu anche con il tema scuro
   ============================================================ */
.modulo {
  --carta: #ffffff; --testo: #111111; --testo-tenue: #555b63; --bordo: #9aa3ad; --bordo-forte: #111111;
  --evidenza: #eef2f8; --inchiostro: #1a3fa0; --fascia: #e4e4e4;
  /* colori chiari anche con il tema scuro: il modulo è un foglio bianco (messaggi e tasti leggibili) */
  --primario: #1f3a5f; --ok: #1e7a46; --ok-sfondo: #e3f4ea;
  --pericolo: #b3261e; --pericolo-sfondo: #fbe9e7; --attenzione-sfondo: #fff4d6;
  color-scheme: light;
  background: #fff; color: #111; border: 1px solid #111; padding: 12px; margin: 0 auto 18px; max-width: 920px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-family: Arial, Helvetica, sans-serif;
}
.modulo input, .modulo select, .modulo textarea { background: #fff; color: var(--inchiostro); }
.serif { font-family: "Times New Roman", Times, Georgia, serif; }

/* intestazione */
.testata { border: 1px solid #111; margin-bottom: 12px; }
.t-alto { display: grid; grid-template-columns: 46% 54%; border-bottom: 1px solid #111; }
.t-logo { padding: 6px 10px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #111; }
.t-logo img { width: 100%; max-width: 330px; height: auto; display: block; }
.t-sede { font-style: italic; font-size: .62rem; line-height: 1.55; padding: 6px 10px; display: flex; flex-direction: column; justify-content: center; }
.t-titolo { font-weight: 800; font-style: italic; text-align: center; padding: 6px 8px; font-size: clamp(.68rem, 2.4vw, 1.12rem); border-bottom: 1px solid #111; letter-spacing: .01em; }
.t-sotto { font-weight: 700; text-align: center; font-size: .78rem; padding: 2px; border-bottom: 1px solid #111; }
.t-griglia { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .56rem; text-align: center; }
.t-griglia div { padding: 2px 3px; border-right: 1px solid #111; border-bottom: 1px solid #111; }
.t-griglia div:nth-child(4n) { border-right: 0; }
.t-griglia div:nth-child(n+5) { border-bottom: 0; }
@media (min-width: 640px) { .t-sede { font-size: .8rem; } .t-griglia { font-size: .78rem; } .t-sotto { font-size: .9rem; } }
/* intestazione grafica 2025 (Edizione 02) */
.t2 .t2-alto { display: grid; grid-template-columns: 30% 70%; border-bottom: 1px solid #111; }
.t2 .t-logo img { max-width: 260px; }
.t2-dati { display: flex; flex-direction: column; font-size: .56rem; line-height: 1.35; text-align: center; }
.t2-rs { font-weight: 700; font-size: .78rem; padding: 3px 4px; border-bottom: 1px solid #111; }
.t2-sedi { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #111; }
.t2-sedi div { padding: 2px 4px; }
.t2-sedi div:first-child { border-right: 1px solid #111; }
.t2-fisc { padding: 2px 4px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.t2 .t-titolo { text-transform: none; }
.t2-id, .t2-norme { display: grid; font-size: .56rem; text-align: center; }
.t2-id { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); border-bottom: 1px solid #111; }
.t2-norme { grid-template-columns: repeat(4, minmax(0, 3fr)); }
.t2-id div, .t2-norme div { padding: 2px 3px; border-right: 1px solid #111; }
.t2-id div:last-child, .t2-norme div:last-child { border-right: 0; }
@media (min-width: 640px) { .t2-dati { font-size: .78rem; } .t2-rs { font-size: 1rem; } .t2-id, .t2-norme { font-size: .78rem; } }

/* riquadri con etichette in corsivo come sulla carta */
.riquadro { border: 2px solid #111; margin-top: 10px; }
.r-riga { display: flex; border-bottom: 1px solid #111; }
.r-riga:last-child { border-bottom: 0; }
.r-cella { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin: 0; }
.r-cella + .r-cella { border-left: 1px solid #111; }
.r-cella.largo { flex-grow: 1.6; }
.r-cella:has(textarea), .r-cella:has(.testo) { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.r-et { font-family: "Times New Roman", Times, Georgia, serif; font-style: italic; font-weight: 700; white-space: nowrap; font-size: 1.02rem; }
.r-et.grande { font-size: 1.15rem; }
.r-et.normale { font-weight: 400; }
.r-et.fascia { display: block; background: var(--fascia); text-align: center; padding: 3px 8px; border-bottom: 1px solid #111; }
.r-et.fascia.sinistra { text-align: left; }
.r-cella:has(textarea) > .r-et:not(.fascia), .r-cella:has(.testo) > .r-et:not(.fascia) { padding: 4px 8px 0; }
.riquadro input, .riquadro select {
  border: 0; border-bottom: 1.5px dotted #777; border-radius: 0; min-height: 40px; padding: 4px 2px; flex: 1; min-width: 0;
  font-size: 1.05rem; font-weight: 600;
}
.riquadro input[readonly] { background: transparent; }
.riquadro textarea {
  border: 0; border-radius: 0; padding: 2px 8px; font-size: 1rem; line-height: 1.8em; min-height: 3.6em;
  background: repeating-linear-gradient(#fff 0, #fff calc(1.8em - 1px), #bfc5cc calc(1.8em - 1px), #bfc5cc 1.8em);
  background-attachment: local;
}
.riquadro :focus { outline: 2px solid var(--inchiostro); outline-offset: -2px; }
.r-valore { flex: 1; color: var(--inchiostro); font-weight: 600; border-bottom: 1.5px dotted #777; min-height: 1.6em; padding: 2px; overflow-wrap: anywhere; }
.r-valore.testo { border: 0; padding: 4px 8px; white-space: pre-wrap; min-height: 2.4em; font-weight: 500; }
.dalle-alle { display: flex; align-items: center; gap: 6px; flex: 1; font-style: italic; }
.dalle-alle input { max-width: 120px; min-width: 0; flex: 1 1 0; }
.r-cella:has(.dalle-alle) { flex-wrap: wrap; }
.r-cella:has(.dalle-alle) .dalle-alle { min-width: 220px; }
.dalle-alle b { color: var(--inchiostro); }
.firma { font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive; color: var(--inchiostro); font-size: 1rem; }
.tenue { color: var(--testo-tenue); font-family: Arial, sans-serif; font-style: italic; font-size: .85rem; }
/* pagina 2 come sul retro: tabella del turno sopra, riquadro ore sotto a destra */
.modulo .blocco-corpo { grid-template-columns: 1fr; }
.modulo .blocco-corpo > .tabella-scorri:last-child { justify-self: end; width: 100%; max-width: 420px; }
@media (max-width: 560px) {
  .r-riga { flex-direction: column; }
  .r-cella { flex-wrap: wrap; }
  .riquadro .r-cella > input, .riquadro .r-cella > select { flex-basis: 150px; }
  .r-cella + .r-cella { border-left: 0; border-top: 1px solid #111; }
  .r-et { font-size: .95rem; }
}

/* tabella operai: COGNOME E NOME | P | partenza | Dalle/Alle | rientro */
.aiuti-operai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 14px 0 6px; font-size: .9rem; }
.tab-operai { border: 2px solid #111; margin-top: 6px; }
.operaio { display: grid; grid-template-columns: 1fr 48px; border-bottom: 1px solid #111; }
.operaio:last-child { border-bottom: 0; }
.operaio.testa { background: var(--fascia); font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 700; }
.operaio.testa .o-nome { font-size: 1.05rem; cursor: default; }
.operaio.testa .o-p { font-size: 1.2rem; }
.o-nome {
  display: flex; align-items: center; gap: .45em; padding: 4px 8px; min-height: 46px; cursor: pointer;
  font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.02rem; text-transform: uppercase;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.o-num { min-width: 1.6em; }
.o-p { border: 0; border-left: 1px solid #111; border-radius: 0; background: none; display: grid; place-items: center; padding: 0; font: inherit; color: inherit; }
button.o-p { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.casella-p::after { content: ""; font: 800 1.7rem/1 Arial, sans-serif; color: var(--inchiostro); }
.operaio.presente .casella-p::after { content: "✕"; }
.operaio.presente:not(.testa) { background: #f1f5ff; }
.o-ora { display: none; }
.o-et { font-size: .72rem; color: var(--testo-tenue); font-style: italic; }
.o-ora input { border: 0; border-bottom: 1.5px dotted #777; border-radius: 0; min-height: 36px; padding: 2px; background: transparent; font-weight: 600; width: 100%; }
.o-ora b { color: var(--inchiostro); }
/* telefono in verticale: tabella come sul foglio, tutta su una riga; SOLO la tabella scorre a destra e a sinistra
   e il nome con la casella P restano fermi a sinistra */
@media (max-width: 759px) {
  .tab-operai { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tab-operai .operaio { width: max-content; min-width: 100%; grid-template-columns: 150px 44px 112px 240px 112px; background: #fff; }
  .tab-operai .operaio.testa { background: var(--fascia); }
  .tab-operai .o-nome { position: sticky; left: 0; z-index: 2; background: inherit; font-size: .92rem; padding-right: 4px; }
  .tab-operai .o-p { position: sticky; left: 150px; z-index: 2; background: inherit; border-right: 1px solid #111; box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .25); }
  .o-ora { display: flex; align-items: center; justify-content: center; gap: 4px; border-left: 1px solid #111; padding: 2px 5px; }
  .operaio.testa .o-ora { font-size: .62rem; text-align: center; line-height: 1.15; }
  .o-partenza .o-et, .o-rientro .o-et { display: none; }
  .o-cantiere .o-et { font-size: .85rem; color: #111; font-family: "Times New Roman", serif; }
  .o-ora input { flex: 1 1 0; min-width: 0; }
  .operaio:not(.presente) .o-ora > * { display: none; }
  .operaio:not(.presente):not(.testa) .o-cantiere::before { content: "Dalle …… Alle ……"; font-family: "Times New Roman", serif; font-style: italic; color: #333; white-space: nowrap; }
  .aiuti-operai::after { content: "↔ scorri la tabella per gli orari"; width: 100%; font-size: .78rem; color: var(--testo-tenue); }
}
@media print {
  .stampa .tab-operai { overflow: visible !important; }
  .stampa .tab-operai .operaio { width: auto !important; min-width: 0 !important; }
  .stampa .tab-operai .o-nome, .stampa .tab-operai .o-p { position: static !important; box-shadow: none !important; }
  .stampa .aiuti-operai::after { content: none; }
}
/* PC e tablet: tabella completa come sulla carta */
@media (min-width: 760px) {
  .operaio { grid-template-columns: minmax(200px, 2.2fr) 48px 1fr 2.1fr 1fr; }
  .o-ora { display: flex; align-items: center; justify-content: center; gap: 6px; border-left: 1px solid #111; padding: 2px 8px; }
  .operaio.testa .o-ora { font-size: .72rem; text-align: center; line-height: 1.2; }
  .o-partenza .o-et, .o-rientro .o-et { display: none; }
  .o-cantiere .o-et { font-size: .95rem; color: #111; font-family: "Times New Roman", serif; }
  .operaio:not(.presente) .o-ora > * { display: none; }
  .operaio:not(.presente):not(.testa) .o-cantiere::before { content: "Dalle ………… Alle …………"; font-family: "Times New Roman", serif; font-style: italic; color: #333; }
}

/* automezzi a spunta */
.r-cella.colonna { flex-direction: column; align-items: stretch; }
.scelta-mezzi { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.scelta-mezzi .chip { color: #111; border-color: #9aa3ad; background: #fff; min-height: 40px; font-size: .95rem; }
.scelta-mezzi .chip.si { background: #e8eeff; border-color: var(--inchiostro); color: var(--inchiostro); font-weight: 700; }
.riga-aggiungi { display: flex; gap: 8px; margin-top: 12px; }
.riga-aggiungi input { flex: 1; min-width: 0; }
.scelta-mezzi { flex-direction: column; align-items: stretch; }
.scelta-mezzi select { border: 0; border-bottom: 1.5px dotted #777; border-radius: 0; min-height: 42px; font-size: 1rem; font-weight: 600; color: var(--inchiostro); background: #fff; }
.mezzi-scelti { display: flex; flex-wrap: wrap; gap: 6px; }
.mezzi-scelti:empty { display: none; }
.togli-mezzo { border: 0; background: none; color: var(--inchiostro); font-size: 1.1rem; font-weight: 800; cursor: pointer; padding: 0 2px 0 6px; min-width: 32px; min-height: 32px; }

/* intestazione modificabile */
.anteprima-intestazione { padding: 8px; margin-bottom: 12px; box-shadow: none; }
.anteprima-intestazione .testata { margin-bottom: 0; }
.riga-logo { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.riga-logo label.btn { display: inline-flex; align-items: center; }
.finestra-box .modulo { padding: 6px; box-shadow: none; }

/* rapportino aperto dal responsabile: pagina 1 e pagina 2 una accanto all'altra (PC),
   ognuna scorre per conto suo; su schermi stretti restano una sotto l'altra */
.contenuto.largo { max-width: none; }
@media (min-width: 1100px) {
  .affiancati { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .affiancati > .modulo {
    max-width: none; margin: 0; position: sticky; top: 64px;
    max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px); overflow: auto; overscroll-behavior: contain;
  }
  /* metà schermo: la tabella operai della pagina 1 in forma compatta come sul telefono, ma con gli orari in riga */
  .affiancati .tab-operai .operaio { grid-template-columns: minmax(150px, 2fr) 40px minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
  .affiancati .t-sede { font-size: .68rem; }
  .affiancati .t-titolo { font-size: .9rem; }
  .affiancati .t-griglia { font-size: .64rem; }
  .affiancati .t2-dati, .affiancati .t2-id, .affiancati .t2-norme { font-size: .64rem; } .affiancati .t2-rs { font-size: .85rem; }
  .affiancati .o-nome { font-size: .92rem; min-height: 38px; }
  .affiancati .operaio.testa .o-ora { font-size: .62rem; }
  /* pagina 2 compatta: caselle ore più piccole */
  .affiancati .pagina-ore .tab input.ore { width: 58px; }
  .affiancati .pagina-ore .tab th, .affiancati .pagina-ore .tab td { padding: 4px 5px; }
}

/* pagina 2: box "Operai di questo blocco" nello spazio accanto al riquadro ore */
.blocco-sotto { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 640px) { .blocco-sotto { grid-template-columns: minmax(0, 1fr) auto; } }
.box-operai { border: 1.5px dashed #9aa3ad; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.box-operai-titolo { font-weight: 800; font-size: .8rem; letter-spacing: .03em; }
.box-operai .blocco-operai { margin-top: 0; }
.box-operai select { min-height: 40px; font-size: .92rem; color: var(--inchiostro); font-weight: 600; }
.chip.aggiunto { border-style: dashed; border-width: 2px; }
.chip .togli-mezzo { min-width: 24px; min-height: 24px; padding: 0 0 0 4px; font-size: .95rem; }

/* dove sono stati scritti i dati in Excel */
.percorso { border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: var(--evidenza); }
.percorso > div { display: flex; gap: 10px; padding: 2px 0; }
.percorso > div span { min-width: 64px; color: var(--testo-tenue); font-size: .85rem; }
.percorso b { overflow-wrap: anywhere; }
.percorso details { margin-top: 6px; }
.percorso summary { cursor: pointer; color: var(--primario); font-weight: 600; }
.percorso table { margin-top: 6px; }

/* pagina 1 del responsabile: correzioni agli operai */
.sola-lettura .o-nome { flex-wrap: wrap; row-gap: 0; }
.operaio.tolto { background: #f6f6f6 !important; }
.operaio.tolto .o-testo { text-decoration: line-through; text-decoration-thickness: 2px; color: #888; }
.operaio.tolto .casella-p::after { color: #bbb; }
.operaio.tolto .o-ora b { color: #aaa; text-decoration: line-through; }
.operaio.aggiunto { background: #fff8e6 !important; }
.nota-corr { font-family: Arial, sans-serif; font-style: normal; font-size: .68rem; text-transform: none; color: #8a5a00; background: #fdebc0; border-radius: 8px; padding: 0 6px; }
.corr { margin-left: auto; font: 600 .72rem Arial, sans-serif; text-transform: none; color: var(--primario); background: none; border: 1px solid #c9d1db; border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.corr:hover { border-color: var(--primario); }
@media print { .corr, .correggi-operai { display: none !important; } }
.correggi-operai { margin-top: 6px; }
.correggi-operai select { border: 1.5px dashed #9aa3ad; border-radius: 6px; min-height: 40px; font-weight: 600; color: var(--inchiostro); }

/* barra "versione nuova disponibile" */
.barra-aggiorna {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 560px; margin: 0 auto; padding: 10px 14px; border-radius: 10px;
  background: #1f3a5f; color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.barra-aggiorna .btn.primario { background: #fff; color: #1f3a5f; border-color: #fff; }

/* pagina 1 del responsabile: vista "tutti gli operai" */
.vista-operai { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; }
.operaio.assente .o-testo { color: #666; }
.operaio.assente .o-ora b { color: #bbb; }
@media print { .vista-operai { display: none !important; } }
.sola-lettura .operaio.assente .o-cantiere::before { content: "Dalle … Alle …"; white-space: nowrap; }
.sola-lettura .operaio.assente .o-nome { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
.sola-lettura .operaio.assente .corr { padding: 1px 6px; }

/* sotto "Convalida": dove scriverà l'app */
.info-scrittura { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--evidenza); font-size: .88rem; text-align: right; }

/* elenco convalidati: spunta "scritto in Excel" */
.voce.scritta { border-left: 5px solid var(--ok); }
.spunta-excel { margin-top: 4px; font-size: .85rem; font-weight: 600; color: var(--ok); display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.spunta-excel .spunta { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .8rem; flex: none; }
.spunta-excel.no { color: var(--pericolo); }

/* Convalidati: anno -> mese -> settimana */
.riga-anno { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.riga-anno select { width: auto; min-width: 110px; }
.periodi { display: flex; flex-direction: column; gap: 10px; }
.periodo-mese { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.periodo-mese > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none;
  padding: 12px 16px; font-weight: 800; font-size: 1.05rem;
}
.periodo-mese > summary::-webkit-details-marker { display: none; }
.periodo-mese > summary::before { content: "▸"; color: var(--testo-tenue); margin-right: 4px; transition: transform .15s; }
.periodo-mese[open] > summary::before { transform: rotate(90deg); }
.periodo-nome { flex: 1; }
.periodo-conta { font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; background: var(--evidenza); color: var(--testo-tenue); white-space: nowrap; }
.periodo-settimana { padding: 4px 14px 14px; }
.settimana-titolo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0 6px; border-top: 1px dashed var(--bordo); font-size: .92rem; }
.settimana-titolo span:not(.periodo-conta) { color: var(--testo-tenue); flex: 1; }

/* ============================================================
   STAMPA: fronte e retro su due fogli A4, come il modulo cartaceo
   ============================================================ */
.stampa { display: none; }
.retro-blocco { border: 2px solid #111; padding: 8px; margin-top: 10px; break-inside: avoid; }
.retro-tab { border-collapse: collapse; width: 100%; font-size: .85rem; }
.retro-tab th, .retro-tab td { border: 1px solid #111; padding: 4px 6px; text-align: center; height: 26px; }
.retro-tab th { background: #e4e4e4; font-family: "Times New Roman", serif; font-style: italic; font-weight: 700; }
.retro-tab td { color: var(--inchiostro, #1a3fa0); font-weight: 600; }
.retro-turno caption { font-weight: 800; padding: 4px; background: #e4e4e4; border: 1px solid #111; border-bottom: 0; }
.retro-tot { font-size: 1.1rem; }
.retro-sotto { display: grid; grid-template-columns: 1fr 52%; gap: 12px; margin-top: 10px; align-items: start; }
.retro-operai { font-size: .82rem; color: #111; padding-top: 4px; }
.retro-ore th { text-align: right; }
.retro-ore thead th { text-align: center; }
.retro-totale th, .retro-totale td { background: #e4e4e4; }
.retro-firma { width: 52%; margin: 10px 0 0 auto; }
.retro-firma th { width: 34%; text-align: right; }

@media print {
  @page { size: A4 portrait; margin: 8mm; }
  html, body { background: #fff !important; }
  body > *:not(#stampa) { display: none !important; }
  #stampa { display: block !important; font-size: 11px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stampa-pagina { break-after: page; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .stampa-pagina:last-child { break-after: auto; }
  .stampa .vista-operai, .stampa .corr, .stampa .correggi-operai, .stampa .nota-corr + .corr { display: none !important; }
  /* tabella operai sempre completa come sul foglio (anche se la pagina di stampa è "stretta") */
  .stampa .tab-operai .operaio { grid-template-columns: 2.3fr 34px 1fr 1.9fr 1fr !important; }
  .stampa .tab-operai .operaio .o-ora { display: flex !important; grid-column: auto !important; align-items: center; justify-content: center;
    gap: 4px; border-left: 1px solid #111; padding: 1px 4px !important; }
  .stampa .tab-operai .operaio.testa .o-ora { display: flex !important; font-size: 7px; text-align: center; line-height: 1.15; }
  .stampa .o-partenza .o-et, .stampa .o-rientro .o-et { display: none !important; }
  .stampa .o-cantiere .o-et { font-size: 10px; color: #111; }
  .stampa .o-nome { min-height: 22px !important; padding: 1px 6px !important; font-size: 11px; }
  .stampa .casella-p::after { font-size: 15px; }
  .stampa .t-sede { font-size: 8px; } .stampa .t-titolo { font-size: 11px; } .stampa .t-griglia { font-size: 8px; }
  .stampa .t2-dati, .stampa .t2-id, .stampa .t2-norme { font-size: 8px; } .stampa .t2-rs { font-size: 11px; }
  .stampa .t-logo img { max-width: 220px; }
  .stampa .r-et { font-size: 12px; } .stampa .riquadro input, .stampa .r-valore { font-size: 11px; }
  .stampa .riquadro { margin-top: 6px; }
}

/* ============================================================
   TELEFONO GIRATO IN ORIZZONTALE: tabella completa come sul foglio, barra in alto sottile e non fissa
   ============================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  .barra { position: static; padding-top: 4px; padding-bottom: 4px; }
  .barra-titolo img { width: 24px; height: 24px; }
  .barra-utente { display: none; }
  .schede { order: 0; width: auto; }
  .scheda-btn { padding: 6px 10px; }
  .contenuto { padding: 8px 12px 10px; }
  .modulo { padding: 8px; }
  /* righe della tabella più basse: entrano più operai nello schermo */
  .o-nome { min-height: 40px; }
  .o-ora input { min-height: 34px; }
}

/* ============================================================
   BRAND GC-CodeLab (firma dello sviluppatore): blu del marchio e motto
   ============================================================ */
:root { --gc-blu: #163470; --gc-rame: #b87333; }
.firma-brand { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--gc-blu); }
.firma-brand img { width: 64px; height: auto; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .firma-brand img, :root:not([data-tema="chiaro"]) .brand-piccolo img { filter: brightness(1.9) saturate(.7); } }
:root[data-tema="scuro"] .firma-brand img, :root[data-tema="scuro"] .brand-piccolo img { filter: brightness(1.9) saturate(.7); }
.brand-nome { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; line-height: 1.1; }
.brand-motto { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-rame); }
.brand-autore { font-size: .8rem; color: var(--testo-tenue); }
.firma-brand.piccola { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bordo); }
.firma-brand.piccola img { width: 52px; }
.piede { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: center; margin-top: 10px; font-size: .8rem; line-height: 1.4; color: var(--testo-tenue); }
.piede #versioneApp { font-size: .8rem; line-height: 1.5; }
.brand-piccolo { display: inline-flex; align-items: center; gap: 6px; }
.brand-piccolo b { color: var(--gc-blu); }
.brand-piccolo img { width: 26px; height: auto; }
.piede .link { font-size: .8rem; color: var(--testo-tenue); }

/* tasto tema ☀/🌙 */
.btn-tema { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; min-height: 36px; min-width: 40px; padding: 2px 8px; font-size: 1rem; cursor: pointer; }
.tema-accesso { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; z-index: 5; color: var(--testo); border-color: var(--bordo); background: var(--carta); }.brand-piccolo { display: inline-block; text-align: center; line-height: 1.5; }
.brand-piccolo img { vertical-align: middle; margin-right: 4px; }
.brand-piccolo b { white-space: nowrap; }

/* telefono in verticale: più spazio per gli orari */
@media (max-width: 759px) {
  .contenuto { padding-left: 6px; padding-right: 6px; }
  .modulo { padding: 6px; }
  .tab-operai .operaio { grid-template-columns: 128px 40px 108px 236px 108px; }
  .tab-operai .o-nome { font-size: .84rem; gap: .3em; padding-left: 5px; white-space: nowrap; overflow: hidden; }
  .tab-operai .o-nome .o-testo, .tab-operai .o-nome:not(:has(.o-testo)) { overflow: hidden; text-overflow: ellipsis; }
  .tab-operai .o-num { min-width: 1.3em; }
  .tab-operai .o-p { left: 128px; }
}
@media (max-width: 759px) {
  /* intestazione "COGNOME E NOME" intera, su due righe se serve */
  .tab-operai .operaio.testa .o-nome { white-space: normal; overflow: visible; font-size: .8rem; line-height: 1.15; padding: 4px 5px; }
  .tab-operai .operaio.testa .o-p { font-size: 1rem; }
}

/* area sviluppatore: campo PIN e simbolo GC cliccabile */
.campo-pin { width: 100%; font-size: 1.4rem; letter-spacing: .4em; text-align: center; padding: 10px; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); color: var(--testo); }
#marchioGC, #marchioAccesso { cursor: default; -webkit-tap-highlight-color: transparent; user-select: none; padding: 4px 0; box-sizing: content-box; }
.piccolo-link { font-size: .8rem; padding: 0 0 6px; color: var(--testo-tenue); }
/* riga PIN degli utenti (area sviluppatore) */
.voce-pin { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 8px; border-top: 1px dashed var(--bordo); }
.pin-attuale { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; letter-spacing: .15em; min-width: 7.5em; }
.pin-attuale i { font-family: inherit; letter-spacing: 0; font-size: .82rem; color: var(--testo-tenue); }
.pin-nuovo { width: 8.5em; padding: 6px 8px; font-family: ui-monospace, Consolas, monospace; letter-spacing: .15em; border: 1px solid var(--bordo); border-radius: 8px; background: var(--carta); color: var(--testo); }
.btn.whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.tab td.totale-turni { font-weight: 800; font-size: 1.05rem; vertical-align: middle; }