/* Turni — lo stile di casa (Keepyz/Getaweb): banda scura, carta chiara,
 * arancione come accento, Sora per i titoli e Inter per il resto. */
:root {
  --sfondo: #F6F4EF; --carta: #FFFFFF; --testo: #1A1D1A; --grigio: #4C4F49; --tenue: #8A8D86;
  --linea: #E6E3DB; --linea-forte: #D4D0C6;
  --accento: #F28A2A; --accento-scuro: #C47A35; --accento-tenue: #FFF1E3;
  --banda: #1A1D1A; --banda-ink: #F6F4EF; --banda-soft: #A7A99E;
  --verde: #1E8A4C; --verde-tenue: #E3F3E8; --rosso: #B23A28; --rosso-tenue: #F9E3DF;
  --ombra: 0 1px 2px rgba(26,29,26,.05), 0 6px 18px rgba(26,29,26,.06);
  --raggio: 16px; --raggio-s: 10px;
  --l0: #F28A2A; --l1: #2E7D9A; --l2: #6A4FBF; --l3: #1E8A4C; --l4: #C2474B; --l5: #8A6D1E;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--sfondo); color: var(--testo); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 18px 16px 48px; }
h1, h2, h3 { font-family: Sora, Inter, system-ui, sans-serif; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 26px 0 10px; }
h2:first-child { margin-top: 4px; }
p { margin: 8px 0; }
a { color: var(--accento-scuro); }
small { font-size: .85rem; }
.muto { color: var(--grigio); font-size: .92rem; }
.striscia { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; background: var(--rosso); color: #fff; text-align: center; font: 700 11px/1.2 Inter, system-ui; letter-spacing: .18em; padding: 5px; }

/* la banda in cima */
.banda { background: var(--banda); color: var(--banda-ink); padding: 14px 16px 0; }
.banda .int { max-width: 720px; margin: 0 auto; }
.banda .marca { font-family: Sora, sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accento); }
.banda h1 { font-size: 1.45rem; margin: 4px 0 12px; font-weight: 700; color: #fff; }
.banda .sotto { margin: -8px 0 14px; color: var(--banda-soft); font-size: .92rem; }
nav.schede { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
nav.schede::-webkit-scrollbar { display: none; }
nav.schede a { display: flex; align-items: center; gap: 7px; padding: 10px 13px 12px; color: var(--banda-soft); text-decoration: none; font-weight: 500; font-size: .92rem; white-space: nowrap; border-bottom: 3px solid transparent; }
nav.schede a svg { width: 17px; height: 17px; flex: none; }
nav.schede a:hover { color: #fff; }
nav.schede a.attiva { color: #fff; border-bottom-color: var(--accento); font-weight: 600; }

/* carte e moduli */
.scheda { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 16px; margin: 12px 0; box-shadow: var(--ombra); }
.scheda > :first-child { margin-top: 0; } .scheda > :last-child { margin-bottom: 0; }
.riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.riga > .cresci { flex: 1 1 160px; min-width: 0; }
form.in-riga { display: flex; gap: 8px; flex-wrap: wrap; }
form.in-riga input { flex: 1 1 140px; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--grigio); margin: 10px 0 0; }
label input, label select { margin-top: 4px; font-weight: 400; }
input, select, button, a.bottone { font: inherit; border-radius: var(--raggio-s); padding: 11px 13px; }
input, select { border: 1px solid var(--linea-forte); background: #fff; width: 100%; color: var(--testo); }
input:focus, select:focus { outline: 2px solid var(--accento); outline-offset: 0; border-color: var(--accento); }
input::placeholder { color: var(--tenue); font-weight: 400; }
button, a.bottone { border: 0; background: var(--accento); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s, transform .05s; }
button:hover, a.bottone:hover { background: var(--accento-scuro); }
button:active, a.bottone:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; }
button.secondario, a.secondario { background: #fff; color: var(--testo); border: 1px solid var(--linea-forte); }
button.secondario:hover, a.secondario:hover { background: var(--sfondo); }
button.pericolo { background: #fff; color: var(--rosso); border: 1px solid var(--linea-forte); }
button.pericolo:hover { background: var(--rosso-tenue); }
button.grande { width: 100%; padding: 15px; font-size: 1.05rem; margin-top: 14px; }
button.mini { background: #fff; color: var(--grigio); border: 1px solid var(--linea); font-size: .75rem; padding: 3px 8px; margin-top: 6px; font-weight: 500; }
.codice { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; word-break: break-all; background: var(--sfondo); border: 1px solid var(--linea); padding: 8px 10px; border-radius: var(--raggio-s); margin: 8px 0; }
.avviso { background: var(--accento-tenue); border: 1px solid #F7D0A8; border-radius: var(--raggio-s); padding: 12px 14px; margin: 12px 0; }
.avviso.ok { background: var(--verde-tenue); border-color: #BFE2CB; }
.avviso.scaduto { background: var(--rosso-tenue); border-color: #E6B3AB; }
.avviso ul { margin: 6px 0 0; padding-left: 18px; }
.stato { font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #ECEAE3; color: var(--grigio); white-space: nowrap; }
.stato.approvata { background: var(--verde-tenue); color: var(--verde); }
.stato.rifiutata { background: var(--rosso-tenue); color: var(--rosso); }
.qr { width: 108px; height: 108px; flex: none; border-radius: var(--raggio-s); overflow: hidden; border: 1px solid var(--linea); }
.qr svg { width: 100%; height: 100%; display: block; }

/* l'ingresso */
.eroe { padding: 10px 0 6px; }
.eroe h2 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 10px; }
.punti { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.punti span { background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; color: var(--grigio); }

/* settimana / mese */
.settimana { margin: 2px 0 14px; }
.settimana strong { font-family: Sora, sans-serif; font-size: 1.05rem; }
.settimana a.bottone { padding: 9px 13px; }

/* calendario dei turni */
.scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 6px; }
table.calendario { border-collapse: separate; border-spacing: 0; min-width: 780px; width: 100%; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); box-shadow: var(--ombra); overflow: hidden; }
table.calendario th, table.calendario td { border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); vertical-align: top; padding: 7px; font-size: .88rem; }
table.calendario thead th { text-align: center; font-weight: 600; background: var(--sfondo); color: var(--grigio); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
table.calendario thead th small { display: block; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--testo); font-weight: 700; }
table.calendario tbody th { text-align: left; position: sticky; left: 0; z-index: 1; min-width: 132px; background: #fff; font-weight: 600; }
table.calendario th.oggi, table.calendario td.oggi { background: var(--accento-tenue); }
table.calendario tr:last-child th, table.calendario tr:last-child td { border-bottom: 0; }
table.calendario tr > :last-child { border-right: 0; }
td.cella { min-width: 92px; height: 70px; }
td.cella.sopra { outline: 2px dashed var(--accento); outline-offset: -3px; background: var(--accento-tenue); }
a.turno { display: block; background: var(--l0); color: #fff; border-radius: 8px; padding: 5px 7px; margin: 0 0 5px; text-decoration: none; font-weight: 600; font-size: .85rem; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
a.turno small { display: block; font-weight: 500; opacity: .92; font-size: .72rem; }
a.turno.l-1 { background: var(--l1); } a.turno.l-2 { background: var(--l2); } a.turno.l-3 { background: var(--l3); } a.turno.l-4 { background: var(--l4); } a.turno.l-5 { background: var(--l5); }
a.turno.l-nessuno { background: #5A5E59; }
a.turno.aperto { background: #fff; color: var(--accento-scuro); border: 2px dashed var(--accento); box-shadow: none; }
a.piu { display: block; text-align: center; color: var(--tenue); text-decoration: none; border: 1px dashed var(--linea-forte); border-radius: 8px; padding: 1px; font-size: 1rem; line-height: 1.3; }
a.piu:hover { color: var(--accento); border-color: var(--accento); background: var(--accento-tenue); }
.assenza { display: inline-block; background: #ECEAE3; color: var(--grigio); border-radius: 6px; padding: 2px 7px; margin: 0 0 5px; font-size: .75rem; font-weight: 600; }
.sfora { color: var(--rosso); font-weight: 700; }
tr.riga-aperti th { background: var(--accento-tenue) !important; }
details.storico { margin: 16px 0; background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 10px 16px; }
details.storico summary { cursor: pointer; font-weight: 600; }
details.storico .voce { padding: 8px 0; border-top: 1px solid var(--linea); font-size: .88rem; }
details.storico .voce.annullata { opacity: .5; text-decoration: line-through; }

/* la timbratura */
.timbra { text-align: center; padding: 20px 16px; }
.pillola { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .9rem; background: #ECEAE3; color: var(--grigio); margin-bottom: 14px; }
.pillola::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); }
.pillola.dentro { background: var(--verde-tenue); color: var(--verde); }
.pillola.dentro::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(30,138,76,.18); }
.timbra-btn { width: 100%; font-family: Sora, sans-serif; font-size: 1.2rem; font-weight: 700; padding: 22px 16px; border-radius: 18px; box-shadow: 0 8px 20px rgba(242,138,42,.3); }
.timbra-btn.dentro { background: var(--testo); box-shadow: 0 8px 20px rgba(26,29,26,.25); }
.timbra-btn.dentro:hover { background: #000; }
.timbra video { width: 100%; max-height: 60vh; border-radius: var(--raggio-s); background: #000; margin-top: 10px; }
.timbra [data-msg] { min-height: 1.4em; }
.timbra [data-luoghi] { justify-content: center; }
.contatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.contatori .scheda { margin: 0; padding: 12px 8px; text-align: center; }
.contatori strong { display: block; font-family: Sora, sans-serif; font-size: 1.25rem; }
.contatori small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.scheda.oggi { border-color: var(--accento); box-shadow: 0 0 0 2px var(--accento-tenue), var(--ombra); }
details.cedi summary { cursor: pointer; color: var(--accento-scuro); font-weight: 600; list-style: none; font-size: .88rem; }
details.cedi summary::-webkit-details-marker { display: none; }
details.cedi form { margin-top: 8px; width: 100%; }
details.cedi select, details.cedi input { flex: 1 1 160px; width: auto; }

/* tablet */
.tablet .scheda strong { font-family: Sora, sans-serif; font-size: 1.15rem; }
.tablet button { padding: 15px 20px; font-size: 1.05rem; }

/* ore */
table.ore { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); min-width: 540px; overflow: hidden; box-shadow: var(--ombra); }
table.ore th, table.ore td { padding: 10px; border-bottom: 1px solid var(--linea); text-align: left; font-size: .92rem; }
table.ore thead th { background: var(--sfondo); font-size: .75rem; color: var(--grigio); text-transform: uppercase; letter-spacing: .06em; }
table.ore tr:last-child td, table.ore tr:last-child th { border-bottom: 0; }
table.ore td strong { font-family: Sora, sans-serif; }

@media (max-width: 480px) {
  .contatori strong { font-size: 1.05rem; }
  .banda h1 { font-size: 1.3rem; }
}
@media print {
  body { background: #fff; }
  .banda, .striscia, .no-stampa { display: none !important; }
  .foglio { page-break-inside: avoid; text-align: center; padding: 40px 0; }
  .foglio .qr { width: 70mm; height: 70mm; margin: 0 auto; border: 0; }
  .foglio h1 { font-size: 2rem; }
}