:root {
  --notte: #14213d; --notte-2: #1f3158; --oro: #c9a227; --oro-chiaro: #f3e3a8;
  --fondo: #f4f5f8; --carta: #ffffff; --testo: #172033; --tenue: #5d6678; --linea: #e3e6ee;
  --rosso: #c0392b; --rosso-t: #fdecea; --ambra: #b7791f; --ambra-t: #fdf3e1;
  --verde: #1f8a4c; --verde-t: #e6f5ec; --blu: #2563b0; --blu-t: #e8f0fb; --viola: #6d4bc4; --viola-t: #f0ebfb;
  --grigio-t: #eef0f4;
  font-size: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fondo); color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: 96px; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.testata { position: sticky; top: 0; z-index: 5; background: var(--notte); color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 0; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.testata-riga { display: flex; align-items: center; gap: 10px; }
.testata h1 { font-size: 1.25rem; margin: 0; flex: 1; font-weight: 700; letter-spacing: .01em; }
.testata h1 .indietro { text-decoration: none; margin-right: 6px; }
.icona-btn { background: transparent; border: 0; color: #fff; font-size: 1.4rem; padding: 6px 8px; cursor: pointer; }
.schede { display: flex; gap: 4px; margin-top: 8px; }
.schede a { flex: 1; text-align: center; padding: 10px 0 12px; text-decoration: none; color: #c9cfdd;
  font-weight: 600; border-bottom: 3px solid transparent; }
.schede a.attiva { color: #fff; border-bottom-color: var(--oro); }
.schede .conta { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
  background: var(--rosso); color: #fff; font-size: .75rem; line-height: 20px; }

main { padding: 14px 14px 0; max-width: 640px; margin: 0 auto; }
h2.sezione { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue);
  margin: 20px 4px 8px; display: flex; align-items: center; gap: 8px; }
h2.sezione .pallino { width: 10px; height: 10px; border-radius: 50%; }
.vuoto { color: var(--tenue); text-align: center; padding: 28px 10px; }

.riepilogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.riepilogo div { background: var(--carta); border-radius: 14px; padding: 12px 10px; text-align: center;
  border: 1px solid var(--linea); }
.riepilogo b { display: block; font-size: 1.6rem; line-height: 1.1; }
.riepilogo span { font-size: .78rem; color: var(--tenue); }
.riepilogo .r b { color: var(--rosso); } .riepilogo .a b { color: var(--ambra); } .riepilogo .v b { color: var(--notte-2); }

.avviso { border-radius: 14px; padding: 12px 14px; margin: 10px 0; display: flex; gap: 10px; align-items: center; }
.avviso.giallo { background: var(--ambra-t); color: #6b4a10; }
.avviso.rosso { background: var(--rosso-t); color: #7a2018; }
.avviso button { margin-left: auto; }

.card { display: block; background: var(--carta); border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 10px;
  text-decoration: none; border: 1px solid var(--linea); border-left: 5px solid var(--linea);
  box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.card .r1 { display: flex; align-items: flex-start; gap: 8px; }
.card .nome { font-weight: 700; font-size: 1.05rem; flex: 1; line-height: 1.25; }
.card .sotto { color: var(--tenue); font-size: .88rem; margin-top: 3px; }
.card .ora { font-weight: 700; font-size: .9rem; margin-top: 8px; }
.card .nota { font-size: .88rem; margin-top: 6px; color: #333c50; background: var(--grigio-t); border-radius: 10px;
  padding: 6px 10px; }
.card.tardi { border-left-color: var(--rosso); } .card.tardi .ora { color: var(--rosso); }
.card.oggi { border-left-color: var(--ambra); } .card.oggi .ora { color: var(--ambra); }
.card.poi { border-left-color: var(--blu); } .card.poi .ora { color: var(--blu); }
.card.nuovo { border-left-color: var(--oro); }

.pill { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; }
.s-nuovo { background: var(--oro-chiaro); color: #6e5507; }
.s-da_richiamare { background: var(--blu-t); color: var(--blu); }
.s-non_risponde { background: var(--ambra-t); color: var(--ambra); }
.s-appuntamento { background: var(--viola-t); color: var(--viola); }
.s-in_prova { background: #e2f3f5; color: #0e7490; }
.s-firmato { background: var(--verde-t); color: var(--verde); }
.s-bocciato { background: var(--rosso-t); color: var(--rosso); }
.s-archivio { background: var(--grigio-t); color: var(--tenue); }
.gia { background: #fff4d6; color: #8a5a00; border: 1px solid #f0d58a; }

.cerca { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea); background: #fff;
  margin-bottom: 10px; }
.filtri { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: none; }
.filtri button { border: 1px solid var(--linea); background: #fff; border-radius: 20px; padding: 7px 13px;
  white-space: nowrap; color: var(--testo); font-size: .88rem; }
.filtri button.attivo { background: var(--notte); color: #fff; border-color: var(--notte); }

/* scheda */
.scheda-testa { background: var(--carta); border-radius: 18px; padding: 16px; border: 1px solid var(--linea); }
.scheda-testa h2 { margin: 0 0 4px; font-size: 1.35rem; line-height: 1.2; }
.scheda-testa .sotto { color: var(--tenue); }
.azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.azioni a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; border-radius: 14px;
  text-decoration: none; font-weight: 700; font-size: 1.05rem; color: #fff; }
.azioni .chiama { background: var(--verde); } .azioni .wa { background: #128c7e; }
.azioni .mail { background: var(--notte-2); grid-column: span 2; padding: 11px; font-size: .95rem; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .92rem; margin-top: 12px; }
.info dt { color: var(--tenue); } .info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.blocco { background: var(--carta); border-radius: 18px; padding: 14px 16px; margin-top: 12px; border: 1px solid var(--linea); }
.blocco h3 { margin: 0 0 10px; font-size: 1rem; }
.blocco.giallo { background: #fff8e6; border-color: #f0d58a; }
.blocco.giallo h3 { color: #7a5200; }
.gia-voce { display: block; text-decoration: none; padding: 8px 0; border-top: 1px solid #f0e2b8; font-size: .92rem; }
.gia-voce:first-of-type { border-top: 0; }
.stati { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stati button { border: 2px solid transparent; border-radius: 12px; padding: 11px 8px; font-weight: 700; font-size: .9rem; }
.stati button.scelto { border-color: var(--notte); box-shadow: 0 0 0 2px #fff inset; }
.rapidi { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.rapidi button, .bottone { border: 1px solid var(--linea); background: #fff; border-radius: 10px; padding: 9px 12px;
  font-weight: 600; color: var(--testo); }
.bottone.pieno { background: var(--notte); color: #fff; border-color: var(--notte); }
.bottone.pericolo { color: var(--rosso); }
.richiamo-ora { font-size: 1.05rem; font-weight: 700; }
.riga-input { display: flex; gap: 8px; align-items: center; }
.riga-input input { flex: 1; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=datetime-local], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #cfd4df; background: #fff; color: var(--testo); }
textarea { min-height: 84px; resize: vertical; }
label.campo { display: block; font-size: .85rem; color: var(--tenue); margin: 10px 0 4px; font-weight: 600; }
.storia { list-style: none; margin: 10px 0 0; padding: 0; }
.storia li { padding: 10px 0; border-top: 1px solid var(--linea); font-size: .93rem; }
.storia .quando { font-size: .76rem; color: var(--tenue); display: block; margin-bottom: 2px; }
.storia li.sistema, .storia li.stato, .storia li.richiamo { color: var(--tenue); font-size: .85rem; }
.storia li.stato b { color: var(--testo); }

.fab { position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 18px); width: 60px; height: 60px;
  border-radius: 50%; background: var(--oro); color: var(--notte); font-size: 2.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 6px 18px rgba(20,33,61,.3); z-index: 6; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 90px);
  background: var(--notte); color: #fff; padding: 11px 18px; border-radius: 12px; z-index: 9; max-width: 90vw;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); }

.accesso { max-width: 360px; margin: 12vh auto 0; background: #fff; border-radius: 20px; padding: 24px;
  border: 1px solid var(--linea); text-align: center; }
.accesso img { width: 72px; height: 72px; border-radius: 18px; }
.accesso h2 { margin: 12px 0 16px; }
.accesso .errore { color: var(--rosso); min-height: 1.3em; margin: 8px 0; }
.accesso .bottone { width: 100%; padding: 13px; margin-top: 8px; }