/* ROTIA v2 — foglio di stile.
   Chiaro, caldo, sobrio, con modalità scura. Niente librerie, niente CDN: il prodotto
   deve funzionare anche senza rete e non deve chiamare nessuno (privacy). */

:root{
  --sfondo:#faf7f2; --carta:#fff; --bordo:#e6ded2; --bordo2:#d8ccbb;
  --testo:#26211c; --tenue:#7a6f62; --debole:#a2968a;
  --accento:#1f7a5a; --accento-morbido:#e7f3ee; --accento-scuro:#155e45;
  --allarme:#b23b2e; --allarme-morbido:#fbecea;
  --attenzione:#a5701a; --attenzione-morbido:#fcf3e3;
  --ok:#1f7a5a; --ok-morbido:#e7f3ee;
  --notte:#3b4a7a; --notte-morbido:#e9ecf7;
  --ombra:0 1px 2px rgba(38,33,28,.06), 0 4px 14px rgba(38,33,28,.05);
  --raggio:10px; --raggio-s:7px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-tema="scuro"]{
  --sfondo:#17150f; --carta:#211e18; --bordo:#332e25; --bordo2:#463f33;
  --testo:#f0eae0; --tenue:#b4a898; --debole:#8b8073;
  --accento:#4cba90; --accento-morbido:#16302a; --accento-scuro:#6fd3ab;
  --allarme:#e77a6c; --allarme-morbido:#3a201d;
  --attenzione:#e0a94a; --attenzione-morbido:#372a15;
  --ok:#4cba90; --ok-morbido:#16302a;
  --notte:#93a4dd; --notte-morbido:#1e2338;
  --ombra:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
button{font:inherit; color:inherit; cursor:pointer}
a{color:var(--accento)}

/* ── testata ── */
.testata{
  position:sticky; top:0; z-index:20; background:var(--carta);
  border-bottom:1px solid var(--bordo); padding:10px 18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.logo{
  width:38px; height:38px; border-radius:9px; background:var(--accento); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none;
}
.titolo{font-size:16px; font-weight:650}
.sottotitolo{font-size:12.5px; color:var(--tenue)}
.spazio{flex:1}
.campo{
  padding:7px 10px; border:1px solid var(--bordo2); border-radius:var(--raggio-s);
  background:var(--carta); color:var(--testo); font-size:13.5px;
}
.bottone{
  padding:8px 14px; border:1px solid var(--bordo2); border-radius:var(--raggio-s);
  background:var(--carta); font-size:13.5px; font-weight:550;
}
.bottone:hover{border-color:var(--accento); color:var(--accento)}
.bottone.primario{background:var(--accento); border-color:var(--accento); color:#fff}
.bottone.primario:hover{background:var(--accento-scuro); color:#fff}
.bottone.primario.sporco{animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 0 5px var(--accento-morbido)}}
.bottone.piccolo{padding:5px 9px; font-size:12.5px}
.bottone:disabled{opacity:.45; cursor:not-allowed}

/* ── schede ── */
.schede{display:flex; gap:3px; padding:0 18px; background:var(--carta); border-bottom:1px solid var(--bordo); overflow-x:auto}
.scheda{
  padding:9px 13px; border:0; background:none; font-size:13.5px; color:var(--tenue);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.scheda:hover{color:var(--testo)}
.scheda.attiva{color:var(--accento); border-bottom-color:var(--accento); font-weight:600}

main{padding:18px; max-width:1440px; margin:0 auto}
.nascosto{display:none !important}

/* ── strisce di stato ── */
.striscia{
  display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:var(--raggio);
  margin-bottom:12px; font-size:13.5px; border:1px solid;
}
.striscia .ic{font-size:16px; line-height:1.2}
.striscia.info{background:var(--accento-morbido); border-color:transparent; color:var(--testo)}
.striscia.avviso{background:var(--attenzione-morbido); border-color:transparent}
.striscia.allarme{background:var(--allarme-morbido); border-color:transparent}

/* ── schede-contenitore ── */
.carta{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); box-shadow:var(--ombra); padding:14px; margin-bottom:14px}
.carta h2{font-size:15px; margin-bottom:3px}
.carta .desc{font-size:12.5px; color:var(--tenue); margin-bottom:11px}

/* ── indicatori ── */
.kpi{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.kpi .k{flex:1; min-width:118px; background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); padding:10px 12px}
.kpi .n{font-size:21px; font-weight:680; letter-spacing:-.02em}
.kpi .e{font-size:11.5px; color:var(--tenue); text-transform:uppercase; letter-spacing:.03em}
.kpi .k.buono .n{color:var(--ok)} .kpi .k.male .n{color:var(--allarme)} .kpi .k.medio .n{color:var(--attenzione)}

/* ── griglia dei turni ── */
.griglia{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); overflow:hidden}
.griglia th,.griglia td{border-bottom:1px solid var(--bordo); border-right:1px solid var(--bordo); padding:5px 6px; vertical-align:top}
.griglia th{background:var(--sfondo); font-size:11.5px; font-weight:620; text-align:left; color:var(--tenue); position:sticky; top:0; z-index:2}
.griglia th.oggi{color:var(--accento)}
.griglia td.persona,.griglia th.persona{position:sticky; left:0; background:var(--carta); z-index:3; min-width:158px; max-width:158px}
.griglia th.persona{z-index:4; background:var(--sfondo)}
.griglia tr:last-child td{border-bottom:0}
.griglia td:last-child,.griglia th:last-child{border-right:0}
.nome{font-weight:600; font-size:12.5px; display:flex; align-items:center; gap:5px}
.ruolo{font-size:11px; color:var(--debole)}
.bollino{width:7px;height:7px;border-radius:50%;background:var(--accento);flex:none}
.bollino.no{background:var(--bordo2)}
.cella{min-height:34px; min-width:96px}
.cella.libero{background:repeating-linear-gradient(135deg,transparent,transparent 5px,var(--sfondo) 5px,var(--sfondo) 10px)}
.cella.trascina{outline:2px dashed var(--accento); outline-offset:-3px}

.turno{
  display:block; padding:3px 6px; border-radius:5px; margin-bottom:3px; font-size:11.5px;
  background:var(--accento-morbido); border-left:3px solid var(--accento); cursor:grab; user-select:none;
}
.turno:active{cursor:grabbing}
.turno .ore{font-weight:620; font-variant-numeric:tabular-nums}
.turno .et{color:var(--tenue); font-size:10.5px}
.turno.notte{background:var(--notte-morbido); border-left-color:var(--notte)}
.turno.proposto{background:var(--attenzione-morbido); border-left-color:var(--attenzione)}
.turno.cucito{background:var(--attenzione-morbido); border-left-color:var(--attenzione); border-left-style:dashed}
.turno.bloccata{box-shadow:inset 0 0 0 1.5px var(--accento)}
.turno .lucchetto{float:right; opacity:.6}
.assenza{display:block; padding:3px 6px; border-radius:5px; font-size:11px; background:var(--allarme-morbido); color:var(--allarme); text-align:center}

/* ── avvisi ── */
.avviso{display:flex; gap:9px; padding:9px 11px; border-radius:var(--raggio-s); margin-bottom:7px; font-size:13px; align-items:flex-start}
.avviso.vietato{background:var(--allarme-morbido); border-left:3px solid var(--allarme)}
.avviso.attenzione{background:var(--attenzione-morbido); border-left:3px solid var(--attenzione)}
.avviso.nota{background:var(--sfondo); border-left:3px solid var(--bordo2)}
.avviso b{font-weight:620}
.etichetta{display:inline-block; font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; padding:1px 6px; border-radius:4px; vertical-align:middle}
.etichetta.vietato{background:var(--allarme); color:#fff}
.etichetta.attenzione{background:var(--attenzione); color:#fff}
.etichetta.nota{background:var(--bordo2); color:var(--testo)}

/* ── stato del piano ── */
.stato-piano{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px}
.stato-piano.bozza{background:var(--attenzione-morbido); color:var(--attenzione)}
.stato-piano.pubblicato{background:var(--ok-morbido); color:var(--ok)}

/* ── tabelle di dettaglio ── */
.tab{width:100%; border-collapse:collapse; font-size:13px}
.tab th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--tenue); padding:6px 8px; border-bottom:1px solid var(--bordo)}
.tab td{padding:6px 8px; border-bottom:1px solid var(--bordo)}
.tab tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums; text-align:right}

/* ── barra di equità ── */
.barra{height:7px; border-radius:4px; background:var(--sfondo); overflow:hidden; min-width:76px}
.barra i{display:block; height:100%; background:var(--accento)}
.barra.tanto i{background:var(--attenzione)}

/* ── organico ── */
.persone{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:12px}
.scheda-p{background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio); padding:12px}
.riga{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px}
.riga label{color:var(--tenue); min-width:112px}
.riga .campo{flex:1; padding:4px 7px; font-size:12.5px}
.disp{display:flex; gap:2px}
.disp button{width:32px; padding:3px 0; border:1px solid var(--bordo); background:var(--carta); font-size:10.5px; border-radius:4px}
.disp button.si{background:var(--carta)} .disp button.preferito{background:var(--ok-morbido); border-color:var(--ok); color:var(--ok)}
.disp button.evita{background:var(--attenzione-morbido); border-color:var(--attenzione); color:var(--attenzione)}
.disp button.no{background:var(--allarme-morbido); border-color:var(--allarme); color:var(--allarme)}

/* ── pannello laterale ── */
.pannello{position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--carta); border-left:1px solid var(--bordo); box-shadow:-8px 0 30px rgba(0,0,0,.10); z-index:40; display:flex; flex-direction:column}
.pannello .capo{padding:14px 16px; border-bottom:1px solid var(--bordo); display:flex; align-items:center; gap:10px}
.pannello .corpo{padding:16px; overflow:auto; flex:1}
.velo{position:fixed; inset:0; background:rgba(38,33,28,.28); z-index:39}
.scelta{border:1px solid var(--bordo); border-radius:var(--raggio-s); padding:10px 12px; margin-bottom:8px; display:flex; gap:10px; align-items:flex-start}
.scelta:hover{border-color:var(--accento)}
.scelta .quanto{font-size:11.5px; color:var(--tenue)}
.scelta.escluso{opacity:.62; border-style:dashed}

/* ── mese ── */
.mese{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.giorno{background:var(--carta); border:1px solid var(--bordo); border-radius:7px; padding:6px; min-height:64px; font-size:11.5px; cursor:pointer}
.giorno:hover{border-color:var(--accento)}
.giorno .d{font-weight:640}
.giorno.fuori{opacity:.38}
.giorno.festivo{background:var(--allarme-morbido)}
.giorno.turno{border-color:var(--notte); background:var(--notte-morbido)}
.pallino{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px}
.pallino.ok{background:var(--ok)} .pallino.medio{background:var(--attenzione)} .pallino.male{background:var(--allarme)}

code,.mono{font-family:var(--mono); font-size:12px}
.piccolo{font-size:12px; color:var(--tenue)}
.destra{text-align:right}
.riga-b{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

@media print{
  .testata,.schede,.bottone,.pannello,.velo{display:none !important}
  body{background:#fff}
  .carta{break-inside:avoid; box-shadow:none}
  @page{size:A4 landscape; margin:10mm}
}
@media (max-width:760px){
  main{padding:12px}
  .griglia{font-size:11.5px}
  .griglia td.persona,.griglia th.persona{min-width:104px; max-width:104px}
}

/* effetto delle proposte in «Come migliorare»: verde se si guadagna, rosso se quella strada peggiora */
.tab td.num.buono{color:var(--ok)}
.tab td.num.male{color:var(--allarme)}