/* Personalizzazioni sopra Pico.css (mobile-first) */
:root {
  --pico-font-size: 100%;
  --colore-si: #2e7d32;
  --colore-forse: #c77800;
  --colore-no: #c62828;
  --colore-neutro: #6b7280;
}

header.container nav { padding-block: 0.25rem; }
main.container { padding-top: 0.5rem; }

form.logout { margin: 0; }
form.logout button { width: 100%; margin: 0; }

article.login { max-width: 26rem; margin: 2rem auto; }

.errore, .errorlist { color: var(--pico-del-color); }
.errorlist { list-style: none; padding: 0; margin: 0 0 0.25rem; font-size: 0.875rem; }
.errorlist li { list-style: none; }
.helptext { display: block; font-size: 0.8rem; color: var(--pico-muted-color); margin-top: -0.5rem; margin-bottom: 0.75rem; }

article.messaggio { padding: 0.75rem 1rem; }
article.messaggio.success { border-left: 4px solid var(--pico-ins-color); }
article.messaggio.error { border-left: 4px solid var(--pico-del-color); }

/* Titolo con azione a destra */
.titolo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.titolo h1 { margin: 0; }
.titolo [role="button"] { padding: 0.4rem 0.9rem; }

/* Filtri */
form.filtri { margin-block: 1rem 0.5rem; }
form.filtri input[type="search"] { margin-bottom: 0.5rem; }
form.filtri details { margin-bottom: 0; }
form.filtri summary { font-size: 0.95rem; }
.griglia-filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0 0.5rem; }
.griglia-filtri select { margin-bottom: 0.5rem; padding-block: 0.45rem; font-size: 0.9rem; }
.conteggio { color: var(--pico-muted-color); font-size: 0.9rem; margin-bottom: 0.5rem; }

/* Scheda contatto */
article.contatto { padding: 0.75rem 0.9rem; margin-bottom: 0.75rem; }
.contatto-testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.contatto-nome { font-weight: 600; text-decoration: none; }
.telefono { white-space: nowrap; }
.contatto-info { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0.2rem 0 0.4rem; }
.azione { font-size: 0.85rem; margin: 0 0 0.5rem; }
.azione.scaduta { color: var(--colore-no); font-weight: 600; }

.pulsanti { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.3rem; }
.pulsanti + .pulsanti { margin-top: 0.3rem; }
.pulsanti button {
  margin: 0; padding: 0.45rem 0.2rem; font-size: 0.85rem; line-height: 1.1;
  background: transparent; color: var(--colore-btn, var(--colore-neutro));
  border: 1px solid var(--colore-btn, var(--colore-neutro));
}
.pulsanti button[aria-pressed="true"] { background: var(--colore-btn, var(--colore-neutro)); color: #fff; }
.pulsanti button.htmx-request { opacity: 0.6; }
.stato-si { --colore-btn: var(--colore-si); }
.stato-forse { --colore-btn: var(--colore-forse); }
.stato-no { --colore-btn: var(--colore-no); }
.fiducie button { --colore-btn: var(--colore-si); font-size: 0.8rem; padding-block: 0.3rem; }

.altri { text-align: center; margin-block: 1rem; }

/* Form contatto: la fiducia ha senso solo con stato Sì */
.form-contatto fieldset { margin-bottom: 0.5rem; }
.campo-fiducia { display: none; }
.form-contatto:has(select[name="stato"] option[value="SI"]:checked) .campo-fiducia { display: block; }

article.avviso { border-left: 4px solid var(--colore-forse); }
article.avviso ul { margin-bottom: 0.75rem; }

.storico ul { padding-left: 1rem; }
.storico li { margin-bottom: 0.5rem; }

a.pericolo { color: var(--colore-no); }
button.pericolo { background: var(--colore-no); border-color: var(--colore-no); }

/* Navigazione: barra in basso su smartphone, voci in alto su desktop */
.nav-desktop { display: none; }
.barra-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--pico-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-mobile a {
  padding: 0.8rem 0.25rem; text-align: center; font-size: 0.85rem;
  text-decoration: none; color: var(--pico-muted-color);
}
.barra-mobile a[aria-current="page"] { color: var(--pico-primary); font-weight: 600; }
body.con-barra { padding-bottom: 4rem; }
@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .nav-desktop a[aria-current="page"] { font-weight: 600; }
  .barra-mobile { display: none; }
  body.con-barra { padding-bottom: 0; }
}
.badge-richiami {
  display: inline-block; min-width: 1.3em; padding: 0 0.35em; border-radius: 1em;
  background: var(--colore-no); color: #fff; font-size: 0.75em; font-weight: 600; line-height: 1.4;
}
.badge-richiami:empty { display: none; }

/* Da richiamare */
.gruppo-richiami h2 { font-size: 1.1rem; margin-block: 1rem 0.5rem; }
.gruppo-richiami:not(:has(article.contatto)) { display: none; }
.azioni-richiamo { margin-top: 0.5rem !important; padding-top: 0.5rem; border-top: 1px dashed var(--pico-muted-border-color); }
.azioni-richiamo button { --colore-btn: var(--pico-primary); }
.azioni-richiamo button.fatto { background: var(--pico-primary); color: var(--pico-primary-inverse); }

/* Giorno del voto */
.spunte { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.spunte label { font-size: 0.9rem; }
.contatori { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; text-align: center; margin-top: 0.5rem; }
.contatore strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.contatore small { color: var(--pico-muted-color); font-size: 0.8rem; }
.contatore.votato strong { color: var(--colore-si); }
.contatore.da-votare strong { color: var(--colore-forse); }
#contatori-voto progress { margin-block: 0.5rem 0; }
.sezione-voto h2 {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.1rem; margin-block: 1.25rem 0.25rem;
  position: sticky; top: 0; background: var(--pico-background-color); padding-block: 0.4rem; z-index: 1;
}
.sezione-voto h2 small { font-weight: normal; color: var(--pico-muted-color); font-size: 0.85rem; }
.voto-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--pico-muted-border-color);
}
.voto-info { min-width: 0; }
.voto-info small { display: block; color: var(--pico-muted-color); font-size: 0.8rem; }
.voto-riga.votato .voto-info strong { color: var(--pico-muted-color); }
.voto-toggle {
  flex: none; margin: 0; min-width: 7.5rem; padding: 0.65rem 0.5rem; font-size: 0.95rem;
  background: transparent; color: var(--colore-forse); border: 2px solid var(--colore-forse);
}
.voto-toggle[aria-pressed="true"] { background: var(--colore-si); border-color: var(--colore-si); color: #fff; }
.voto-toggle.htmx-request { opacity: 0.6; }

/* --- Dashboard ------------------------------------------------------------ */
/* Colori dei grafici, validati per daltonismo su superficie chiara e scura */
:root {
  --viz-da-contattare: #898781;
  --viz-si: #008300;
  --viz-forse: #eda100;
  --viz-no: #e34948;
  --viz-stima: #2a78d6;
  --viz-reali: #eb6834;
  --viz-griglia: #e1e0d9;
  --viz-asse: #c3c2b7;
  --viz-muto: #6f6d68;
  --viz-inchiostro: #0b0b0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-si: #0b7a3a;
    --viz-forse: #c98500;
    --viz-no: #d03b3b;
    --viz-stima: #3987e5;
    --viz-reali: #d95926;
    --viz-griglia: #2a2f3a;
    --viz-asse: #3d4350;
    --viz-muto: #9a9890;
    --viz-inchiostro: #f0efec;
  }
}
:root[data-theme="dark"] {
  --viz-si: #0b7a3a;
  --viz-forse: #c98500;
  --viz-no: #d03b3b;
  --viz-stima: #3987e5;
  --viz-reali: #d95926;
  --viz-griglia: #2a2f3a;
  --viz-asse: #3d4350;
  --viz-muto: #9a9890;
  --viz-inchiostro: #f0efec;
}

.filtri-dashboard select { max-width: 22rem; }
.viz article { padding: 1rem; margin-bottom: 1rem; }
.viz h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.viz h3 { font-size: 0.95rem; font-weight: 600; color: var(--pico-muted-color); margin: 0.75rem 0 0.25rem; }

.hero { text-align: center; }
.hero-etichetta { margin: 0; color: var(--pico-muted-color); }
.hero-valore { margin: 0; font-size: 3.5rem; font-weight: 700; line-height: 1.1; }
.hero-nota { margin: 0.25rem 0 0.5rem; color: var(--pico-muted-color); font-size: 0.9rem; }
.come-si-calcola { margin: 0; text-align: left; font-size: 0.85rem; }
.come-si-calcola summary { font-size: 0.85rem; }

.kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .kpi { grid-template-columns: repeat(4, 1fr); } }
.kpi .kpi-tile { margin: 0; padding: 0.75rem; }
.kpi-etichetta { margin: 0; font-size: 0.85rem; color: var(--pico-muted-color); }
.kpi-valore { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.kpi-nota { margin: 0; font-size: 0.75rem; color: var(--pico-muted-color); }

.chiave-colore {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px;
  margin-right: 0.35rem; vertical-align: baseline; background: var(--viz-colore);
}
.stato-da_contattare { --viz-colore: var(--viz-da-contattare); }
.stato-si { --viz-colore: var(--viz-si); }
.stato-forse { --viz-colore: var(--viz-forse); }
.stato-no { --viz-colore: var(--viz-no); }
.viz-stima { --viz-colore: var(--viz-stima); }
.viz-reali { --viz-colore: var(--viz-reali); }

.barra-stati { display: flex; gap: 2px; height: 20px; }
.barra-stati .segmento { background: var(--viz-colore); min-width: 4px; }
.barra-stati .segmento:first-child { border-radius: 4px 0 0 4px; }
.barra-stati .segmento:last-child { border-radius: 0 4px 4px 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; margin: 0.75rem 0 0.5rem; font-size: 0.85rem; }
.legenda li { list-style: none; margin: 0; }

.grafico { position: relative; width: 100%; }

.schede { display: flex; gap: 0.25rem; overflow-x: auto; margin-bottom: 0.75rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.schede button {
  margin: 0; padding: 0.4rem 0.75rem; font-size: 0.9rem; border: 0; border-radius: 0;
  background: transparent; color: var(--pico-muted-color); border-bottom: 2px solid transparent;
}
.schede button[aria-selected="true"] { color: var(--pico-color); border-bottom-color: var(--pico-primary); font-weight: 600; }

.tabella-scroll { overflow-x: auto; }
.tabella-numeri { font-size: 0.85rem; margin-bottom: 0; }
.tabella-numeri td { font-variant-numeric: tabular-nums; text-align: right; }
.tabella-numeri th[scope="col"]:not(:first-child) { text-align: right; }

/* --- Accessi: verifica in due passaggi, password ------------------------- */
article.passo-accesso { max-width: 32rem; margin: 1.5rem auto; }
.passo-accesso h2 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.esci-passo { margin-top: 1rem; }
.esci-passo button { width: auto; }
.qr { background: #fff; padding: 0.5rem; border-radius: 0.5rem; width: max-content; margin-bottom: 1rem; }
.qr svg { display: block; width: 12rem; height: auto; }
.chiave code { font-size: 1.05rem; letter-spacing: 0.05em; word-break: break-all; }
.codici { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.codici li { list-style: none; margin: 0; }
.codici code { display: block; text-align: center; font-size: 1.05rem; padding: 0.5rem; }
/* Il link otpauth:// funziona solo dove c'è l'app: su desktop resta il QR */
@media (min-width: 768px) { .solo-telefono { display: none; } }