/* ============================================================
   INDICE — stile.css (demo C17 «Pratiche e preventivi»)
   SEZIONE 0: COLORI E BASE
   SEZIONE 1: FASCIA DEMO E TESTATA
   SEZIONE 2: NUMERI E FILTRI
   SEZIONE 3: LISTA DELLE PRATICHE E STATI
   SEZIONE 4: SCHEDA DELLA PRATICA
   SEZIONE 5: PREVENTIVO E ANTEPRIMA
   SEZIONE 6: PIEDE, BOTTONI, LINK
   SEZIONE 7: DESKTOP
   SEZIONE 8: HOVER SOLO CON PUNTATORE
   SEZIONE 9: MOVIMENTO RIDOTTO
   ============================================================
   Stile sobrio da strumento di lavoro, carta chiara, un solo accento.
   Nessun font esterno (velocità): i caratteri di sistema. */

/* === SEZIONE 0: COLORI E BASE === */
:root{
  --carta:#F6F5F1;      /* fondo pagina */
  --foglio:#FFFFFF;     /* schede */
  --inchiostro:#1C2128; /* testo */
  --grigio:#5A6270;     /* testo secondario (contrasto AA su carta) */
  --linea:#DAD7CE;
  --accento:#0E5E52;    /* verde petrolio: bottoni e link */
  --verde:#1E7A3C; --verde-fondo:#E5F3E8;
  --arancio:#9A5800; --arancio-fondo:#FBEFD9;
  --rosso:#B3261E; --rosso-fondo:#FBE4E2;
  --raggio:12px;
  --carattere:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--carta); color:var(--inchiostro); font:16px/1.55 var(--carattere)}
.contenitore{max-width:1180px; margin:0 auto; padding:0 16px}
h1{font-size:1.6rem; line-height:1.2; margin:24px 0 16px}
h2{font-size:1.15rem; margin:28px 0 10px}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--accento); outline-offset:2px}

/* === SEZIONE 1: FASCIA DEMO E TESTATA === */
.fascia-demo{background:#22272F; color:#F3F1EA; font-size:.85rem; text-align:center; padding:8px 16px}
.testata{background:var(--foglio); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:5}
.testata-riga{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding-block:10px}
.studio{margin:0; display:flex; flex-direction:column}
.studio-nome{font-weight:700}
.studio-oggi{font-size:.85rem; color:var(--grigio)}
.menu{display:flex; gap:4px; overflow-x:auto}
.menu-voce{font:inherit; font-size:.95rem; border:0; background:none; color:var(--grigio); padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap}
.menu-voce[aria-current="page"]{background:var(--accento); color:#fff}

/* === SEZIONE 2: NUMERI E FILTRI === */
/* Telefono: un riquadro per riga, numero a sinistra e scritta accanto (28/10); tre colonne da 768 */
.numeri{display:grid; grid-template-columns:1fr; gap:8px}
.numero{background:var(--foglio); border:1px solid var(--linea); border-radius:var(--raggio); padding:10px 14px; display:flex; align-items:center; gap:14px}
.numero b{display:block; font-size:2rem; line-height:1.1; min-width:2.2ch}
.numero span{font-size:.9rem; color:var(--grigio)}
.filtri{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; max-width:28rem}
.filtri select{min-width:0; width:100%}
.filtri label,.form-preventivo label{display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--grigio)}
/* 16px: sotto questa misura l'iPhone ingrandisce la pagina quando si tocca il campo (28/10) */
select,input[type=number]{font:inherit; font-size:1rem; color:var(--inchiostro); background:var(--foglio); border:1px solid var(--linea); border-radius:8px; padding:8px 10px; min-width:10rem; max-width:100%}

/* === SEZIONE 3: LISTA DELLE PRATICHE E STATI === */
.lista-pratiche{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.riga-pratica{width:100%; text-align:left; font:inherit; color:inherit; background:var(--foglio); border:1px solid var(--linea); border-radius:var(--raggio); padding:12px 14px; cursor:pointer; display:grid; gap:4px}
.riga-pratica .quando{font-size:.85rem; color:var(--grigio)}
.riga-pratica .cosa{font-weight:600}
.riga-pratica .manca{font-size:.9rem}
.riga-pratica .manca b{color:var(--arancio)}
.riga-pratica .chi{font-size:.9rem; color:var(--grigio)}
.stato{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; padding:2px 10px; border-radius:999px; width:max-content}
.stato::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.stato-regola{color:var(--verde); background:var(--verde-fondo)}
.stato-manca{color:var(--arancio); background:var(--arancio-fondo)}
.stato-ritardo{color:var(--rosso); background:var(--rosso-fondo)}
.vuoto{color:var(--grigio)}
.riga-esempio{margin:28px 0; color:var(--grigio); font-size:.9rem; border-left:3px solid var(--accento); padding-left:12px}

/* === SEZIONE 4: SCHEDA DELLA PRATICA === */
.scheda-testa{background:var(--foglio); border:1px solid var(--linea); border-radius:var(--raggio); padding:14px; display:grid; gap:6px}
.scheda-testa dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:.95rem}
.scheda-testa dt{color:var(--grigio)}
.scheda-testa dd{margin:0}
.carte{list-style:none; padding:0; margin:0; display:grid; gap:6px}
/* La nota («C'è», «Chiesto il…») sta sempre sotto il nome, allineata al testo (28/10) */
.carta{background:var(--foglio); border:1px solid var(--linea); border-radius:10px; padding:10px 12px; display:grid; gap:4px}
.carta > .dettaglio{padding-left:30px}
.carta label{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.carta input{flex:0 0 20px; width:20px; height:20px; margin:2px 0 0; accent-color:var(--verde)}
.carta .dettaglio{font-size:.8rem; color:var(--grigio)}
.messaggio{background:var(--foglio); border:1px dashed var(--accento); border-radius:var(--raggio); padding:12px; white-space:pre-wrap; font-size:.95rem}
.fasi{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px}
.fasi li{font-size:.85rem; padding:4px 10px; border-radius:999px; border:1px solid var(--linea); color:var(--grigio); background:var(--foglio)}
.fasi li.fatta{color:var(--verde); border-color:var(--verde)}
.fasi li.adesso{color:#fff; background:var(--accento); border-color:var(--accento)}

/* === SEZIONE 5: PREVENTIVO E ANTEPRIMA === */
.avviso-importi{background:var(--arancio-fondo); border-radius:var(--raggio); padding:10px 14px; font-size:.95rem}
.form-preventivo{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.form-preventivo .spunta{flex-direction:row; align-items:center; gap:8px; color:var(--inchiostro); font-size:.95rem; padding-bottom:8px}
.preventivo{margin-top:18px; background:var(--foglio); border:1px solid var(--linea); border-radius:var(--raggio); padding:14px; overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.95rem}
td,th{padding:6px 4px; border-bottom:1px solid var(--linea); text-align:left; vertical-align:top}
td.cifra,th.cifra{text-align:right; white-space:nowrap}
tr.totale td{font-weight:700; border-bottom:0; font-size:1.05rem}
.anteprima{margin-top:12px}
.foglio{background:#fff; color:#111; max-width:720px; padding:28px 24px; border:1px solid #CFCAC0; box-shadow:0 10px 30px rgba(0,0,0,.08); font-family:Georgia,"Times New Roman",serif; font-size:.95rem}
.foglio h3{font-family:var(--carattere); font-size:1.05rem; margin:0 0 4px}
.foglio .piccolo{font-size:.8rem; color:#555}

/* === SEZIONE 6: PIEDE, BOTTONI, LINK === */
.bottone{display:inline-block; font:inherit; font-weight:600; background:var(--accento); color:#fff; border:0; border-radius:999px; padding:10px 18px; cursor:pointer; text-decoration:none}
.bottone.secondario{background:none; color:var(--accento); border:1px solid var(--accento)}
.link{font:inherit; background:none; border:0; color:var(--accento); text-decoration:underline; cursor:pointer; padding:0}
.indietro{margin:16px 0 0}
.piede{background:var(--foglio); border-top:1px solid var(--linea); margin-top:40px; padding:24px 0 32px; font-size:.95rem}
.contatto{display:flex; flex-wrap:wrap; align-items:center; gap:12px}

/* === SEZIONE 7: DESKTOP === */
@media (min-width:768px){
  h1{font-size:2rem}
  .numeri{grid-template-columns:repeat(3,1fr); gap:10px}
  .numero{display:block; padding:12px}
  .riga-pratica{grid-template-columns:9rem 1fr auto; align-items:center; gap:4px 18px}
  .riga-pratica .manca,.riga-pratica .chi{grid-column:2}
  .riga-pratica .stato{grid-column:3; grid-row:1 / span 3}
}
@media (min-width:1024px){
  .griglia-scheda{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start}
}

/* === SEZIONE 8: HOVER SOLO CON PUNTATORE === */
@media (hover:hover) and (pointer:fine){
  .riga-pratica:hover{border-color:var(--accento)}
  .menu-voce:not([aria-current="page"]):hover{color:var(--inchiostro); background:var(--carta)}
  .bottone:hover{filter:brightness(1.12)}
}

/* === SEZIONE 9: MOVIMENTO RIDOTTO === */
/* La demo non ha animazioni; la regola resta per chi aggiunge transizioni. */
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important} }