:root {
  --verde: #1E6B3A; --verde-scuro: #123821; --lime: #C5E86C; --fondo: #F3F5EF;
  --testo: #13251A; --grigio: #4F5E54; --bordo: #DDE3D8; --tinta: #E5EFDF;
  --giallo: #FFF4D1; --giallo-forte: #FFE3A3; --giallo-bordo: #F0D27A; --giallo-testo: #3D2900; --giallo-medio: #5C3D00; --giallo-scuro: #7A5200;
  --rosso-testo: #8A1C1C; --rosso-fondo: #FDECEC;
  --nav-h: 68px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--fondo); color: var(--testo);
  font-family: Manrope, 'Segoe UI', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
a { color: var(--verde); }
[hidden] { display: none !important; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; }
p { margin: 0; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(30,107,58,.35); outline-offset: 2px; }

/* ---------------- Accesso ---------------- */
.testata { position: relative; background: var(--verde-scuro); color: #fff;
  padding: calc(40px + env(safe-area-inset-top)) 20px 72px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; }
.testata::before, .eroe::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 48px, rgba(255,255,255,0) 48px 96px); }
.logo { position: relative; width: 60px; height: 60px; border-radius: 18px; background: #fff; color: var(--verde);
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
.marchio { position: relative; font-size: 22px; font-weight: 800; }
.sottomarchio { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
main.accesso { max-width: 440px; margin: -44px auto 40px; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); position: relative; }
.scheda { background: #fff; border-radius: 24px; padding: 24px 20px; box-shadow: 0 10px 30px rgba(18,56,33,.12);
  display: flex; flex-direction: column; gap: 16px; }
.scheda h1 { font-size: 22px; font-weight: 800; }
.utente-ricordato { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  border: 2px solid var(--verde); background: var(--tinta); }
.nome-ricordato { flex: 1; font-weight: 800; }
#blocco-ricordato { display: flex; flex-direction: column; gap: 6px; }
.iniziali { width: 44px; height: 44px; border-radius: 50%; background: var(--verde); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.regole { margin: 0; padding-left: 18px; font-size: 14px; color: var(--grigio); line-height: 1.6; }
.regole li.ok { color: var(--verde); font-weight: 700; }
.versione { text-align: center; font-size: 12px; color: var(--grigio); margin-top: 16px; }

/* ---------------- Testi ---------------- */
.piccolo { font-size: 14px; color: var(--grigio); line-height: 1.4; }
.maiuscolo { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; }
.verde { color: var(--verde); }
.attenzione { color: var(--giallo-scuro); font-weight: 700; }
.testo-lungo { white-space: pre-wrap; line-height: 1.5; }
.testo-breve { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sezione-titolo, label, .etichetta-campo { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.spazio-sopra { margin-top: 14px; }
.meta { text-align: center; }

/* ---------------- Campi ---------------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
input, select, textarea { border: 1.5px solid var(--bordo); border-radius: 14px; background: #fff; width: 100%; font-size: 16px; }
input, select { height: 56px; padding: 0 16px; font-weight: 600; }
input[type="time"], input[type="date"] { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 0; }
input[type="time"] { height: 52px; padding: 0 10px; font-size: 17px; }
textarea { padding: 14px 16px; line-height: 1.45; resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(30,107,58,.25); border-color: var(--verde); }
input.pin { letter-spacing: .4em; font-size: 22px; }
.select-avvolto { position: relative; }
.select-avvolto select { appearance: none; -webkit-appearance: none; padding-right: 44px; font-weight: 700; }
.select-avvolto::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.4px solid var(--grigio); border-bottom: 2.4px solid var(--grigio); transform: rotate(45deg); pointer-events: none; }
.select-avvolto.piccola select { height: 44px; font-size: 14px; border-radius: 22px; padding-left: 14px; }
.select-avvolto.piccola { flex: 1 1 160px; min-width: 0; }
.griglia-orari { display: grid; grid-template-columns: 96px minmax(0,1fr) minmax(0,1fr); gap: 8px 10px; align-items: center; }
.nome-fascia { font-size: 15px; font-weight: 800; }
.totale-ore { font-weight: 800; color: var(--verde); }
.totale-ore:empty { display: none; }
.due-colonne { display: grid; grid-template-columns: 1fr; gap: 16px; }
.comune-prov { display: grid; grid-template-columns: minmax(0,1fr) 88px; gap: 10px; }
@media (min-width: 560px) { .due-colonne { grid-template-columns: 1fr 1fr; } }

/* ---------------- Pulsanti ---------------- */
.primario, .secondario, .secondario-verde, .pericolo, .btn-scuro, .btn-chiaro {
  min-height: 56px; border-radius: 16px; font-size: 16px; font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none; padding: 0 18px; border: 0; text-align: center; }
.primario { background: var(--verde); color: #fff; }
.primario.grande { min-height: 64px; font-size: 18px; border-radius: 18px; box-shadow: 0 8px 20px rgba(30,107,58,.25); }
.secondario { background: #fff; color: var(--testo); border: 1.5px solid var(--bordo); min-height: 48px; }
.secondario-verde { background: var(--tinta); color: var(--verde); }
.pericolo { background: #A12A2A; color: #fff; }
.btn-scuro { background: var(--verde-scuro); color: #fff; cursor: pointer; min-height: 52px; font-size: 15px; }
.btn-chiaro { background: #fff; color: var(--testo); border: 1.5px solid var(--bordo); cursor: pointer; min-height: 52px; font-size: 15px; }
button:disabled { opacity: .55; cursor: default; }
.link { min-height: 44px; border: 0; background: none; color: var(--verde); font-weight: 800; font-size: 14px; padding: 0; align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.pericolo-link { color: #A12A2A; }
.piccolo-btn { min-height: 36px; font-size: 13px; }
.link-piccolo { font-size: 14px; font-weight: 800; color: var(--verde); text-decoration: none; }
.riga-pulsanti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riga-pulsanti.tre { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.riga-pulsanti > * { min-height: 48px; font-size: 15px; }

.chips, .chips-statiche { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--bordo); background: #fff;
  color: var(--testo); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
label.chip, label.btn-scuro, label.btn-chiaro { text-transform: none; letter-spacing: 0; }
label.chip { font-size: 14px; color: var(--testo); }
label.btn-scuro { font-size: 15px; color: #fff; }
label.btn-chiaro { font-size: 15px; color: var(--testo); }
.chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; padding-left: 10px; }
#b-problema[aria-pressed="true"] { background: var(--giallo-scuro); border-color: var(--giallo-scuro); }
.chip-statico { padding: 6px 12px; border-radius: 16px; background: var(--tinta); color: var(--verde-scuro); font-size: 13px; font-weight: 700; }
.filtri, .segmenti { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filtro { flex-shrink: 0; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--bordo); background: #fff; font-size: 14px; font-weight: 700; }
.filtro[aria-pressed="true"] { background: var(--verde-scuro); color: #fff; border-color: var(--verde-scuro); }
.segmenti { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1.5px solid var(--bordo); border-radius: 16px; padding: 4px; gap: 4px; }
.segmento { min-height: 48px; border: 0; border-radius: 12px; background: none; font-size: 14px; font-weight: 800; }
.segmento[aria-pressed="true"] { background: var(--verde); color: #fff; }

.interruttore { width: 56px; height: 34px; flex-shrink: 0; border-radius: 17px; border: 0; background: #C9D2C4; padding: 3px; display: flex; justify-content: flex-start; }
.interruttore span { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.interruttore[aria-checked="true"] { background: var(--giallo-scuro); justify-content: flex-end; }
.interruttore.verde[aria-checked="true"] { background: var(--verde); }

/* ---------------- Avvisi ---------------- */
.avviso { border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.45; }
.avviso ul { margin: 0; padding-left: 18px; }
.avviso.errore { background: var(--rosso-fondo); color: var(--rosso-testo); }
.avviso.info { background: var(--giallo); color: var(--giallo-testo); }
.avviso.ok { background: var(--tinta); color: var(--verde-scuro); }
.avviso-veloce { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  background: var(--verde-scuro); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 60; max-width: calc(100% - 32px); }
.avviso-veloce.errore { background: #8A1C1C; }
.senza-nav .avviso-veloce, .vista:has(.pulsanti-fondo) ~ .avviso-veloce { bottom: calc(100px + env(safe-area-inset-bottom)); }
.vuoto { text-align: center; padding: 22px 16px; color: var(--grigio); font-size: 15px; background: #fff; border-radius: 18px; border: 1.5px dashed var(--bordo); line-height: 1.5; }
.caricamento { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 28px; color: var(--grigio); font-weight: 700; }
.rotella { width: 20px; height: 20px; border: 3px solid var(--tinta); border-top-color: var(--verde); border-radius: 50%; animation: gira .8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------------- Struttura dell'app ---------------- */
.pagina { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); outline: none; }
.senza-nav .pagina { padding-bottom: 0; }
.senza-nav .navigazione { display: none; }
.barra { position: sticky; top: 0; z-index: 20; min-height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  background: #fff; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.barra h1 { font-size: 17px; font-weight: 800; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-btn { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--testo);
  border: 0; background: none; border-radius: 12px; text-decoration: none; padding: 0; }
.pagina-corpo { max-width: 720px; margin: 0 auto; padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.vista:has(.pulsanti-fondo) .pagina-corpo { padding-bottom: 110px; }
.pagina-corpo.modulo { gap: 24px; }
.sezione { display: flex; flex-direction: column; gap: 10px; }
.sezione-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conteggio { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--verde-scuro); color: #fff; display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; }

.navigazione { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--bordo);
  display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.navigazione a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--grigio); text-decoration: none; font-size: 11.5px; font-weight: 700; border-radius: 12px; }
.navigazione a.attiva { color: var(--verde); }
.navigazione a.attiva svg { background: var(--tinta); border-radius: 12px; padding: 3px 12px; width: 48px; height: 28px; }
.nav-marchio { display: none; }

.pulsanti-fondo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--bordo);
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.pulsanti-fondo > * { flex: 1; }
.pulsanti-fondo > .secondario-verde:first-child:not(:last-child) { flex: 0 0 40%; }
body:not(.senza-nav) .pulsanti-fondo { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: 12px; }
body:not(.senza-nav) .vista:has(.pulsanti-fondo) .pagina-corpo { padding-bottom: 100px; }

/* ---------------- Oggi ---------------- */
.eroe { position: relative; overflow: hidden; background: var(--verde-scuro); color: #fff; padding: calc(26px + env(safe-area-inset-top)) 20px 64px; }
.eroe-riga { position: relative; max-width: 688px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eroe-data { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.eroe h1 { font-size: 28px; font-weight: 800; margin-top: 4px; }
.eroe-profilo { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--verde); display: flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; flex-shrink: 0; }
.sopra-eroe { margin-top: -46px; position: relative; }

/* ---------------- Schede, elenchi ---------------- */
.card { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(18,56,33,.06); border: 1px solid #E8ECE4; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.card-corso { border: 2px solid var(--verde); box-shadow: 0 10px 30px rgba(18,56,33,.12); }
.card-corso h3 { font-size: 20px; font-weight: 800; }
.riga-alto { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.riga-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riga-dati > div { background: var(--fondo); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.riga-dati b { font-size: 20px; }
.avatar-fila { display: flex; }
.avatar-fila .avatar + .avatar { margin-left: -6px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--verde); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0; }
.avatar.piccolo { width: 30px; height: 30px; font-size: 11px; border: 2px solid #fff; color: #fff; }
.avatar.chiaro { background: var(--tinta); color: var(--verde); }
.avatar.quadrato { border-radius: 12px; background: var(--tinta); color: var(--verde-scuro); }
.avatar.grande { width: 56px; height: 56px; font-size: 18px; }
.elenco { background: #fff; border-radius: 18px; border: 1px solid #E8ECE4; overflow: hidden; }
.voce { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; min-height: 64px; }
.voce + .voce { border-top: 1px solid #EDF0EA; }
.voce > svg { color: #A9B4A4; flex-shrink: 0; }
.voce-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.voce-testo b { font-size: 15.5px; }
.badge { flex-shrink: 0; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.badge.corso { background: var(--giallo); color: var(--giallo-scuro); }
.badge.inviato { background: var(--tinta); color: var(--verde); }
.badge.problema { background: var(--giallo-forte); color: var(--giallo-testo); font-size: 11px; padding: 2px 8px; vertical-align: 2px; }
.icona-tonda { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--fondo); color: var(--grigio); display: flex; align-items: center; justify-content: center; }
.icona-tonda.giallo, .problema-box.acceso .icona-tonda, .problema-card .icona-tonda, .controllo.problema .icona-tonda { background: var(--giallo-forte); color: var(--giallo-scuro); }
.avviso-card { flex-direction: row; align-items: flex-start; gap: 12px; background: var(--giallo); border-color: var(--giallo-forte); }
.sintesi { gap: 12px; }
.sintesi-titolo { display: flex; justify-content: space-between; align-items: center; color: var(--verde); }
.stat-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-griglia > div { background: var(--fondo); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.stat-griglia b { font-size: 26px; font-weight: 800; }
.stat-griglia span { font-size: 12.5px; color: var(--grigio); font-weight: 700; line-height: 1.25; }
.stat-griglia .da-guardare { background: var(--giallo); }
.stat-griglia .da-guardare b { color: var(--giallo-scuro); }
.stat-griglia.card { display: grid; }

/* ---------------- Modulo intervento ---------------- */
.foto-scelta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.miniature { display: flex; flex-wrap: wrap; gap: 10px; }
.miniature:empty { display: none; }
.miniatura { position: relative; width: 88px; height: 88px; border-radius: 14px; background: #2F6B3F; color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.miniatura .rotella { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.miniatura-togli { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.miniatura-togli svg { width: 14px; height: 14px; stroke-width: 3; }
.problema-box { background: #fff; border: 1.5px solid var(--bordo); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.problema-box.acceso { background: var(--giallo); border-color: var(--giallo-forte); }
.problema-box.acceso b { color: var(--giallo-testo); }
.problema-box textarea { border-color: var(--giallo-bordo); }
.problema-riga { display: flex; align-items: center; gap: 12px; }
#f-problema-testo-box { display: flex; flex-direction: column; gap: 8px; }

/* ---------------- Riepilogo ---------------- */
.cliente-testa { flex-direction: row; align-items: center; gap: 12px; }
.avatar.quadrato.grande { border-radius: 16px; }
.titolo-card { font-size: 18px; font-weight: 800; }
.dl { margin: 0; gap: 0; padding: 4px 16px; }
.dl-riga { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; }
.dl-riga + .dl-riga { border-top: 1px solid #EDF0EA; }
.dl dt { color: var(--grigio); font-weight: 700; font-size: 14px; }
.dl dd { margin: 0; text-align: right; font-weight: 700; }
.problema-card { flex-direction: row; gap: 12px; background: var(--giallo); border-color: var(--giallo-forte); color: var(--giallo-testo); }
.problema-card > div { display: flex; flex-direction: column; gap: 4px; }

/* ---------------- Clienti ---------------- */
.cerca-box input { padding-left: 46px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F5E54' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat 16px center; }
.scheda-testa { gap: 8px; }
.titolo-scheda { font-size: 24px; font-weight: 800; line-height: 1.2; }
.scheda-testa .riga-pulsanti { margin-top: 6px; }
.note-squadra { background: var(--giallo); border-color: var(--giallo-forte); color: var(--giallo-testo); }
.note-squadra .sezione-titolo { color: var(--giallo-scuro); }
.giorno-box { width: 48px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; background: var(--fondo); border-radius: 12px; padding: 6px 0; }
.giorno-box b { font-size: 19px; line-height: 1.1; }
.giorno-box span { font-size: 10.5px; font-weight: 800; color: var(--grigio); }

/* ---------------- Bacheca ---------------- */
.scrivi { gap: 12px; }
.riga-scrivi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.messaggio.con-problema { border-left: 5px solid var(--giallo-scuro); }
.messaggio-testa { display: flex; align-items: center; gap: 12px; }
.messaggio-piede { display: flex; justify-content: space-between; align-items: center; min-height: 0; }
.messaggio-piede:has(> span:only-child) { display: none; }

/* ---------------- Report ---------------- */
.naviga-giorno { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 18px; padding: 6px; border: 1px solid #E8ECE4; }
.naviga-giorno-testo { flex: 1; text-align: center; display: flex; flex-direction: column; }
.naviga-giorno-testo b { font-size: 17px; }
.controlli { gap: 0; padding: 4px 14px; }
.controllo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.controllo + .controllo { border-top: 1px solid #EDF0EA; }
.intervento-report { gap: 6px; }
.tabella { border-collapse: separate; border-spacing: 0; width: 100%; padding: 4px 14px; display: table; }
.tabella th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grigio); padding: 10px 6px; }
.tabella td { padding: 10px 6px; border-top: 1px solid #EDF0EA; }
.tabella th:not(:first-child), .tabella td:not(:first-child) { text-align: right; }
#r-data { height: 48px; }
#r-corpo { display: flex; flex-direction: column; gap: 16px; }

/* ---------------- Profilo ---------------- */
.profilo-testa { flex-direction: row; align-items: center; gap: 14px; }

/* ---------------- Finestre ---------------- */
.modale-fondo { position: fixed; inset: 0; background: rgba(10,25,15,.5); z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.modale { background: #fff; border-radius: 22px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.modale p { font-size: 17px; font-weight: 700; }
.modale-pulsanti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 600px) { .modale-fondo { align-items: center; } }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox-chiudi { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ---------------- Computer ---------------- */
@media (min-width: 900px) {
  :root { --nav-h: 0px; }
  .navigazione { top: 0; bottom: 0; right: auto; width: 232px; flex-direction: column; border-top: 0; border-right: 1px solid var(--bordo); padding: 20px 14px; gap: 4px; }
  .nav-marchio { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; padding: 6px 8px 22px; color: var(--verde-scuro); }
  .logo-mini { width: 36px; height: 36px; border-radius: 11px; background: var(--verde-scuro); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
  .navigazione a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; font-size: 15px; }
  .navigazione a.attiva { background: var(--tinta); }
  .navigazione a.attiva svg { background: none; padding: 0; width: 22px; height: 22px; }
  .pagina { padding-left: 232px; padding-bottom: 0; }
  .senza-nav .pagina { padding-left: 0; }
  .pulsanti-fondo, body:not(.senza-nav) .pulsanti-fondo { bottom: 0; padding-bottom: 14px; }
  body:not(.senza-nav) .pulsanti-fondo { left: 232px; }
  .pulsanti-fondo { justify-content: center; }
  .pulsanti-fondo > *, .pulsanti-fondo > .secondario-verde:first-child:not(:last-child) { flex: 0 1 300px; }
  .avviso-veloce { bottom: 24px; }
}

/* ---------------- Stampa (report in PDF) ---------------- */
@media print {
  .navigazione, .barra-btn, .pulsanti-fondo, #r-data, .avviso-veloce { display: none !important; }
  .pagina { padding: 0 !important; }
  body, .card, .elenco { background: #fff !important; box-shadow: none !important; }
  .barra { position: static; border: 0; }
  .card { break-inside: avoid; border: 1px solid #ccc; }
  a { color: inherit; text-decoration: none; }
}

/* ================= Versione 0.3: calendario, timbrature, ferie, ore, profili ================= */
.solo-computer { display: none !important; }
.forte { font-weight: 800; }
.due-colonne.fisse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.due-colonne > .campo, .comune-prov > .campo { min-width: 0; }
#o-timbra, #o-resto, #k-corpo, #t-scheda, #t-corpo, #o-corpo, #b-elenco, #sc-interventi, #s-elenco, #c-elenco { display: flex; flex-direction: column; gap: 16px; }
#o-timbra:empty { display: none; }
a.filtro { text-decoration: none; color: var(--testo); display: inline-flex; align-items: center; }
a.filtro[aria-pressed="true"] { color: #fff; }
.segmenti.due { grid-template-columns: 1fr 1fr; }
.pagina-corpo.largo { max-width: 1040px; }
.badge.stato-da-fare { background: #EEF1EB; color: var(--grigio); }
.badge.stato-corso { background: var(--giallo); color: var(--giallo-scuro); }
.badge.stato-fatto { background: var(--tinta); color: var(--verde); }
.badge.stato-fermi, .badge.spento { background: #ECEFEA; color: #6B776F; }
.badge.rifiutata { background: var(--rosso-fondo); color: var(--rosso-testo); }
.icona-tonda.verde { background: var(--tinta); color: var(--verde); }

/* Calendario */
.giorni-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.giorno-pill.domenica:not(.scelto) { background: #F6F7F4; }
.giorno-pill.domenica:not(.scelto) > span:first-child { color: #A12A2A; }
.giorno-pill { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 16px; background: #fff; border: 1.5px solid var(--bordo);
  text-decoration: none; color: var(--testo); font-size: 12px; font-weight: 700; min-height: 72px; justify-content: center; }
.giorno-pill b { font-size: 18px; }
.giorno-pill .conta { font-size: 12px; color: var(--grigio); display: flex; height: 16px; align-items: center; }
.giorno-pill .conta svg { width: 16px; height: 16px; }
.giorno-pill.oggi { border-color: var(--verde); }
.giorno-pill.scelto { background: var(--verde-scuro); border-color: var(--verde-scuro); color: #fff; }
.giorno-pill.scelto .conta { color: var(--lime); }
.attivita { gap: 6px; }
.titolo-attivita { font-size: 17px; display: flex; align-items: center; gap: 6px; }
.squadra-nomi { font-size: 13.5px; font-weight: 700; color: var(--verde-scuro); }
.pill-pioggia { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 12px; background: #EEF1EB; color: var(--grigio); font-size: 13px; font-weight: 800; }
.pill-pioggia svg { width: 16px; height: 16px; }
.pill-pioggia.attivo { background: var(--giallo-forte); color: var(--giallo-testo); }
.pioggia-card { flex-direction: row; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.pioggia-card { border: 1.5px dashed #B9C4B2; background: #fff; }
.pioggia-card.attivo { background: var(--giallo); border: 1px solid var(--giallo-forte); cursor: default; }
.pioggia-card.attivo .icona-tonda { background: var(--giallo-forte); color: var(--giallo-scuro); }
.chip.occupato { border-style: dashed; color: #7A867E; background: #F6F7F4; }
.chip-nota { font-weight: 600; font-size: 12px; opacity: .85; }
.chip[aria-pressed="true"] .chip-nota { opacity: .9; }

/* Oggi: attività assegnate */
.assegnata { border: 2px solid var(--verde); gap: 8px; }
.assegnata h3 { font-size: 20px; font-weight: 800; }
.assegnata.riposo { border-color: var(--giallo-forte); background: #FFFBEF; }
.istruzioni { background: var(--fondo); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }

/* Timbrature */
.timbra-card { gap: 12px; }
.timbra-card.in-servizio { border: 2px solid var(--lime); }
.totale-grande { font-size: 24px; font-weight: 800; color: var(--verde); }
.swipe { position: relative; height: 64px; border-radius: 32px; background: var(--lime); display: flex; align-items: center; padding: 4px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.swipe.uscita { background: var(--giallo-forte); }
.swipe-testo { position: absolute; left: 72px; right: 16px; text-align: center; font-weight: 800; font-size: 15px; color: var(--testo); pointer-events: none; }
.swipe.uscita .swipe-testo { color: var(--giallo-testo); }
.swipe-pomello { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--verde-scuro); color: #fff; display: flex; align-items: center; justify-content: center; touch-action: none; position: relative; z-index: 1; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.swipe.uscita .swipe-pomello { background: var(--giallo-scuro); }
.swipe.in-corso { opacity: .7; }
.voce.spenta { opacity: .55; }
.voce.spenta b { text-decoration: line-through; }
.voce.compatta { min-height: 48px; justify-content: space-between; }
.voce.totale { background: var(--fondo); }
.ora-grande { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
details.dimenticato summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
details.dimenticato summary::-webkit-details-marker { display: none; }
details.dimenticato[open] summary { margin-bottom: 8px; }
details.dimenticato > *:not(summary) { margin-top: 12px; }

/* Ferie e permessi */
.richiesta { gap: 8px; }
.avatar.piccolo-chiaro { width: 36px; height: 36px; font-size: 12px; background: var(--tinta); color: var(--verde); }
.nuova-richiesta { gap: 14px; }

/* Ore e presenze */
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 20px; }
.tabella.ore th, .tabella.ore td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella tbody th { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--testo); text-align: left; }
.tabella.ore th[scope="row"] a { color: var(--testo); font-weight: 800; }
.tabella tr.riga-attenzione td, .tabella tr.riga-attenzione th { background: var(--giallo); }
.cella-nota { font-size: 12px; font-weight: 800; color: var(--grigio); }
.cella-nota.giallo { color: var(--giallo-scuro); }
.cella-vuota { color: #A9B4A4; }
.riga-pulsanti.stretta { margin-top: 6px; }
.riga-pulsanti.stretta > * { min-height: 40px; font-size: 14px; }

/* Profili */
.persona .etichette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.modifica-persona { margin: 0 12px 12px; gap: 12px; }
.permessi td:not(:first-child), .permessi th:not(:first-child) { text-align: center !important; }
.permessi .si { color: var(--verde); font-weight: 800; }
.permessi .no { color: #A9B4A4; }

@media (min-width: 900px) {
  .solo-computer { display: flex !important; }
  .solo-telefono { display: none !important; }
  .navigazione { overflow-y: auto; }
}
@media print { .tabella-scorre { overflow: visible; } }

/* ---------------- v0.4 · Trasferte ---------------- */
:root { --blu: #1F4E79; --blu-fondo: #E4EDF6; --blu-bordo: #B9CDE3; }
.trasferta-box { display: flex; flex-direction: column; gap: 10px; }
.chip-trasferta { align-self: flex-start; min-height: 44px; padding: 0 16px 0 12px; border-radius: 22px; border: 1.5px solid var(--bordo);
  background: #fff; color: var(--testo); font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.chip-trasferta svg { color: var(--blu); flex: none; }
.chip-trasferta[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff; }
.chip-trasferta[aria-pressed="true"] svg { color: #fff; }
.chip-trasferta:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.trasferta-box.acceso .trasf-campi { background: var(--blu-fondo); border: 1px solid var(--blu-bordo); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; }
.trasf-campi .campo { margin: 0; }
.trasf-campi select, .trasf-campi input { width: 100%; max-width: 100%; box-sizing: border-box; }
.trasferta-riga { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--blu); background: var(--blu-fondo);
  border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.trasferta-riga svg { flex: none; }
.trasf-testo { color: var(--blu); font-weight: 600; }
.badge-trasf { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: var(--blu-fondo); color: var(--blu);
  border: 1px solid var(--blu-bordo); font-size: 11px; font-weight: 700; vertical-align: middle; cursor: help; text-transform: none; letter-spacing: 0; }
.icona-tonda.trasf { background: var(--blu-fondo); color: var(--blu); }
.dimenticato .trasferta-box { margin: 4px 0 6px; }

/* ---------------- v0.5 · Cantieri temporanei ---------------- */
.segmenti.quattro { grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .segmenti.quattro { grid-template-columns: repeat(4, 1fr); } }
.campi-cantiere { display: flex; flex-direction: column; gap: 12px; background: var(--blu-fondo); border: 1px solid var(--blu-bordo); border-radius: 14px; padding: 12px; }
.campi-cantiere[hidden] { display: none; }
.campi-cantiere .campo { margin: 0; }
.campi-cantiere > .piccolo { margin: 0; color: var(--blu); }
.badge.cantiere { background: var(--blu-fondo); color: var(--blu); border: 1px solid var(--blu-bordo); }