/* Estrattore Bollette — portale web. Nessuna risorsa esterna (font di sistema). */

:root {
  --sfondo: #f4f6f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --bordo: #dde3ea;
  --bordo-forte: #c5ced9;
  --testo: #1b2430;
  --testo-2: #56606d;
  --testo-3: #7b8591;
  --primario: #1f6fd1;
  --primario-scuro: #1759a8;
  --primario-tenue: #e7f0fc;
  --ok: #1d7a46;
  --ok-tenue: #e6f4ec;
  --attenzione: #9a5b00;
  --attenzione-tenue: #fff4df;
  --errore: #b3261e;
  --errore-tenue: #fdecea;
  --ombra: 0 1px 2px rgba(20, 30, 45, .06), 0 4px 16px rgba(20, 30, 45, .05);
  --raggio: 12px;
  --raggio-piccolo: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0f1318;
    --superficie: #171c23;
    --superficie-2: #1c222a;
    --bordo: #2a323c;
    --bordo-forte: #38424e;
    --testo: #e6eaef;
    --testo-2: #a9b2bd;
    --testo-3: #86909b;
    --primario: #5b9df0;
    --primario-scuro: #7fb2f4;
    --primario-tenue: #1a2a3e;
    --ok: #5cc48a;
    --ok-tenue: #15291e;
    --attenzione: #e0a64a;
    --attenzione-tenue: #2c2414;
    --errore: #f2837b;
    --errore-tenue: #2e1817;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--primario); text-underline-offset: 2px; }
a:hover { color: var(--primario-scuro); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
small { color: var(--testo-3); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primario) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

.salta { position: absolute; left: -999px; top: 0; }
.salta:focus { left: 1rem; top: .5rem; z-index: 10; background: var(--superficie); padding: .4rem .8rem; border-radius: 6px; }

/* ---------- Testata ---------- */
.testata { background: var(--superficie); border-bottom: 1px solid var(--bordo); }
.testata__interno {
  max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.marchio { display: flex; align-items: center; gap: .55rem; color: var(--testo); text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.marchio:hover { color: var(--testo); }
.menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.menu a {
  color: var(--testo-2); text-decoration: none; padding: .4rem .7rem; border-radius: var(--raggio-piccolo); font-weight: 500;
}
.menu a:hover { background: var(--superficie-2); color: var(--testo); }
.menu a[aria-current="page"] { color: var(--primario); background: var(--primario-tenue); }
.menu__esci { margin: 0; }
.menu__nome { color: var(--testo-3); font-weight: 400; }

/* ---------- Pagina ---------- */
.pagina { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.pagina--stretta { max-width: 460px; }
.pagina--media { max-width: 760px; }
.intestazione-pagina { margin-bottom: 1.25rem; }
.sottotitolo { color: var(--testo-2); margin: 0 0 1rem; }
.nota { color: var(--testo-3); font-size: .9rem; margin: .75rem 0 0; }
.nota-centrata { text-align: center; color: var(--testo-2); margin: 1.25rem 0 0; }
.vuoto { color: var(--testo-3); text-align: center; padding: 1.5rem 0; margin: 0; }

.piede {
  max-width: 1100px; width: 100%; margin: 0 auto; padding: 1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--testo-3); font-size: .85rem; border-top: 1px solid var(--bordo);
}

/* ---------- Schede ---------- */
.scheda {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 1.35rem 1.5rem; margin-bottom: 1.25rem;
}
.scheda__titolo { font-size: 1.05rem; margin-bottom: 1rem; }
.scheda--accesso { padding: 2rem 1.75rem; margin-top: 1.5rem; }
.scheda--accesso h1 { text-align: center; }
.scheda--accesso .sottotitolo { text-align: center; }

/* ---------- Moduli ---------- */
.modulo { display: grid; gap: 1rem; }
.modulo--riga { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; margin-bottom: 1rem; }
.campo { display: grid; gap: .3rem; }
.campo > span { font-weight: 550; font-size: .92rem; }
.campo em { font-weight: 400; font-style: normal; color: var(--testo-3); }
.campo--largo { grid-column: span 2; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input:not([type]) {
  width: 100%; font: inherit; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-piccolo); padding: .6rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-tenue); }
.spunta { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--testo-2); }
.spunta input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--primario); flex: none; }

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raggio-piccolo); padding: .62rem 1.1rem;
  transition: background .15s, border-color .15s, color .15s;
}
.bottone:disabled { opacity: .55; cursor: not-allowed; }
.bottone--primario { background: var(--primario); color: #fff; }
.bottone--primario:hover:not(:disabled) { background: var(--primario-scuro); color: #fff; }
@media (prefers-color-scheme: dark) { .bottone--primario, .bottone--primario:hover:not(:disabled) { color: #0b1420; } }
.bottone--secondario { background: var(--superficie); color: var(--testo); border-color: var(--bordo-forte); }
.bottone--secondario:hover { background: var(--superficie-2); color: var(--testo); }
.bottone--testo { background: none; color: var(--testo-2); padding: .45rem .6rem; font-weight: 500; }
.bottone--testo:hover { color: var(--testo); background: var(--superficie-2); }
.bottone--link { background: none; border: 0; padding: 0; color: var(--primario); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bottone--pericolo { color: var(--errore); }
.bottone--pericolo:not(.bottone--testo) { background: var(--errore); color: #fff; }
.bottone--largo { width: 100%; padding: .75rem; }
.bottone--piccolo { padding: .3rem .6rem; font-size: .85rem; }

/* ---------- Avvisi ed etichette ---------- */
.avviso { border-radius: var(--raggio-piccolo); padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid transparent; }
.avviso--errore { background: var(--errore-tenue); color: var(--errore); border-color: color-mix(in srgb, var(--errore) 25%, transparent); }
.avviso--ok { background: var(--ok-tenue); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.avviso--attenzione { background: var(--attenzione-tenue); color: var(--attenzione); }
.avviso--info { background: var(--primario-tenue); color: var(--testo); }

.etichetta {
  display: inline-block; font-size: .75rem; font-weight: 650; letter-spacing: .02em; line-height: 1;
  padding: .3rem .5rem; border-radius: 999px; background: var(--superficie-2); color: var(--testo-2);
  border: 1px solid var(--bordo); white-space: nowrap; vertical-align: middle;
}
.etichetta--beta { background: var(--attenzione-tenue); color: var(--attenzione); border-color: transparent; text-transform: uppercase; }
.etichetta--in_coda { background: var(--superficie-2); color: var(--testo-2); }
.etichetta--in_corso { background: var(--primario-tenue); color: var(--primario); border-color: transparent; }
.etichetta--completato, .etichetta--attivo { background: var(--ok-tenue); color: var(--ok); border-color: transparent; }
.etichetta--fallito, .etichetta--disattivato { background: var(--errore-tenue); color: var(--errore); border-color: transparent; }
.etichetta--in_attesa { background: var(--attenzione-tenue); color: var(--attenzione); border-color: transparent; }
.etichetta--annullato, .etichetta--scaduto { color: var(--testo-3); }

/* ---------- Zona di trascinamento ---------- */
.zona {
  border: 2px dashed var(--bordo-forte); border-radius: var(--raggio); background: var(--superficie-2);
  padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.zona:hover { border-color: var(--primario); }
.zona--sopra { border-color: var(--primario); background: var(--primario-tenue); }
.zona__icona { width: 48px; height: 48px; color: var(--primario); }
.zona__titolo { font-size: 1.1rem; font-weight: 650; margin: .5rem 0 .25rem; }
.zona__aiuto { margin: 0; color: var(--testo-2); }
.zona__limiti { margin: .6rem 0 0; font-size: .82rem; color: var(--testo-3); }

.selezione { margin-top: 1rem; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; }
.selezione__testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.selezione__elenco {
  list-style: none; margin: 0 0 .75rem; padding: 0; max-height: 220px; overflow: auto;
  border-top: 1px solid var(--bordo);
}
.selezione__elenco li {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .35rem .25rem; border-bottom: 1px solid var(--bordo); font-size: .9rem;
}
.selezione__elenco .nome-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selezione__elenco .dim-file { color: var(--testo-3); flex: none; font-variant-numeric: tabular-nums; }
.selezione__elenco button { flex: none; }
.selezione__invio { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.selezione__invio .campo { flex: 1 1 240px; }
.stato-invio { margin: .5rem 0 0; font-size: .9rem; color: var(--testo-2); min-height: 1.2em; }

/* ---------- Barre di avanzamento (elemento <progress> nativo) ---------- */
progress.barra {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px;
  border: 0; border-radius: 999px; background: var(--bordo); overflow: hidden; margin: .6rem 0 .3rem; color: var(--primario);
}
progress.barra::-webkit-progress-bar { background: var(--bordo); border-radius: 999px; }
progress.barra::-webkit-progress-value { background: var(--primario); border-radius: 999px; transition: width .4s; }
progress.barra::-moz-progress-bar { background: var(--primario); border-radius: 999px; }

/* ---------- Elenco elaborazioni ---------- */
.lavori { list-style: none; margin: 0; padding: 0; }
.lavoro {
  display: flex; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 1rem 0; border-top: 1px solid var(--bordo);
}
.lavoro:first-child { border-top: 0; padding-top: 0; }
.lavoro__principale { flex: 1; min-width: 0; }
.lavoro__titolo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.lavoro__nome { font-weight: 650; overflow-wrap: anywhere; }
.lavoro__dettagli { color: var(--testo-3); font-size: .87rem; margin-top: .15rem; }
.lavoro__messaggio { color: var(--testo-2); font-size: .9rem; margin-top: .25rem; }
.lavoro--fallito .lavoro__messaggio { color: var(--errore); }
.lavoro__scadenza { color: var(--attenzione); font-size: .85rem; margin-top: .25rem; }
.lavoro__azioni { display: flex; gap: .5rem; align-items: center; flex: none; }
.lavoro__azioni form { margin: 0; }

/* ---------- Tabelle (amministrazione) ---------- */
.griglia-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.25rem; }
.griglia-admin > .scheda { margin-bottom: 0; }
.griglia-admin + .scheda { margin-top: 1.25rem; }
.tabella { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabella th { text-align: left; font-weight: 600; color: var(--testo-2); border-bottom: 1px solid var(--bordo-forte); padding: .5rem; white-space: nowrap; }
.tabella td { border-bottom: 1px solid var(--bordo); padding: .55rem .5rem; vertical-align: top; }
.tabella--compatta td, .tabella--compatta th { padding: .35rem .5rem; font-size: .84rem; }
.tabella tr.spento td { color: var(--testo-3); text-decoration: line-through; }
.tabella tr.evidenza td { background: var(--errore-tenue); }
.cella-lunga { max-width: 340px; overflow-wrap: anywhere; }
.azioni-riga { display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.azioni-riga form { margin: 0; }
.scorrimento-orizzontale { overflow-x: auto; }
.scorrimento-verticale { max-height: 420px; overflow-y: auto; }
.codice-invito { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.codice { font-size: 1.35rem; font-weight: 700; letter-spacing: .08em; background: var(--superficie); color: var(--testo); padding: .4rem .8rem; border-radius: 8px; border: 1px solid var(--bordo); user-select: all; }

/* ---------- Varie ---------- */
.riquadro-consenso { border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: .9rem 1rem; margin: 1rem 0; background: var(--superficie-2); }
.riquadro-consenso h3 { font-size: .98rem; margin-bottom: .4rem; }
.riquadro-consenso p { margin: 0 0 .75rem; font-size: .93rem; color: var(--testo-2); }
.riquadro-consenso form { margin: 0; }
.spunta em { font-style: normal; color: var(--testo-3); }
.zona-pericolo { border: 1px solid color-mix(in srgb, var(--errore) 35%, var(--bordo)); border-radius: var(--raggio-piccolo); padding: .75rem 1rem; margin-top: 1rem; }
.zona-pericolo summary { cursor: pointer; color: var(--errore); font-weight: 600; }
.zona-pericolo .modulo { margin-top: 1rem; }
.testo-lungo h2 { margin-top: 1.75rem; scroll-margin-top: 1rem; }
.testo-lungo p, .testo-lungo li { color: var(--testo); }
.indice-informativa { background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: .6rem 1rem; margin: 1rem 0; }
.indice-informativa ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; font-size: .92rem; }
.tabella--informativa { margin: .5rem 0 1rem; table-layout: fixed; }
.tabella--informativa td, .tabella--informativa th { overflow-wrap: anywhere; white-space: normal; }
.tabella--informativa td:first-child { font-weight: 600; width: 28%; }
@media (max-width: 760px) { .indice-informativa ol { columns: 1; } .tabella--informativa td:first-child { width: auto; } }
.testo-lungo li { margin-bottom: .35rem; }

@media (max-width: 760px) {
  h1 { font-size: 1.35rem; }
  .scheda { padding: 1.1rem; }
  .scheda--accesso { padding: 1.5rem 1.1rem; margin-top: .5rem; }
  .griglia-admin { grid-template-columns: 1fr; }
  .campo--largo { grid-column: auto; }
  .lavoro { flex-direction: column; align-items: stretch; }
  .lavoro__azioni { justify-content: flex-start; }
  .menu__nome { display: none; }
}

/* Ver1.2.0 - pagina Analizza una bolletta: elenco dei dati estratti */
.dati-bolletta { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; }
.dati-bolletta dt { color: var(--testo-tenue, #555); text-transform: capitalize; }
.dati-bolletta dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .dati-bolletta { grid-template-columns: 1fr; } }

/* ---------- «Analizza bollette» e «Le mie bollette» (Ver1.2.2) ---------- */
.intestazione-pagina--azione { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.indietro { margin: 0 0 .75rem; font-size: .92rem; }
.passi { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.passo { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.passo__numero { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--primario-tenue); color: var(--primario); font-weight: 700; display: grid; place-items: center; }
.passo strong { display: block; }
.passo div > span { display: block; color: var(--testo-2); font-size: .88rem; }
.riepilogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.riepilogo__voce { background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: .7rem .9rem; }
.riepilogo dt { color: var(--testo-3); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.riepilogo dd { margin: .1rem 0 0; font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.riepilogo__voce--attenzione dd { color: var(--attenzione); }
.vuoto-guidato { text-align: center; padding: 1rem 0 .5rem; }
a.lavoro__nome { color: var(--testo); text-decoration: none; }
a.lavoro__nome:hover { color: var(--primario); text-decoration: underline; }
.lavoro__esito { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.esito { font-size: .78rem; font-weight: 650; padding: .2rem .55rem; border-radius: 999px; }
.esito--ok { background: var(--ok-tenue); color: var(--ok); }
.esito--attenzione { background: var(--attenzione-tenue); color: var(--attenzione); }
.esito--errore { background: var(--errore-tenue); color: var(--errore); }
details.scheda > summary.scheda__titolo { cursor: pointer; margin: 0; }
details.scheda[open] > summary.scheda__titolo { margin-bottom: 1rem; }
@media (max-width: 640px) { .lavoro { flex-direction: column; align-items: stretch; } .lavoro__azioni { flex-wrap: wrap; } }

/* ---------- Tabella dei risultati (Ver1.2.2) ---------- */
.filtri { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.filtro { font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--superficie); color: var(--testo-2); cursor: pointer; }
.filtro:hover { background: var(--superficie-2); color: var(--testo); }
.filtro[aria-pressed="true"] { background: var(--primario-tenue); color: var(--primario); border-color: var(--primario); }
.tabella--risultati td.num, .tabella--risultati th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ordina { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ordina:hover { color: var(--testo); }
th[aria-sort="ascending"] .ordina::after { content: " \25B2"; font-size: .7em; }
th[aria-sort="descending"] .ordina::after { content: " \25BC"; font-size: .7em; }
.riga-bolletta td { vertical-align: middle; }
.riga-bolletta:hover td { background: var(--superficie-2); }
.riga--attenzione td:first-child { box-shadow: inset 3px 0 0 var(--attenzione); }
.riga--errore td:first-child { box-shadow: inset 3px 0 0 var(--errore); }
.nome-file { display: block; text-align: left; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-dettaglio td { background: var(--superficie-2); padding: .9rem 1rem; }
.tabella--risultati tfoot th, .tabella--risultati tfoot td { border-top: 2px solid var(--bordo-forte); border-bottom: 0; font-weight: 700; }
.tabella--risultati tfoot th { text-align: left; }
.dettaglio-bolletta .selezione__elenco { max-height: none; }

/* ---------- Visore della bolletta originale accanto ai dati (Ver1.2.2) ---------- */
.pagina--larga { max-width: 1500px; }
.risultati-griglia--con-visore { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.risultati-principale { min-width: 0; }
.visore { position: sticky; top: .75rem; display: flex; flex-direction: column; gap: .5rem; height: calc(100vh - 1.5rem); min-height: 420px;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); box-shadow: var(--ombra); padding: .75rem; }
.visore__testa { display: flex; align-items: center; gap: .35rem; }
.visore__titolo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visore__note { display: grid; gap: .35rem; max-height: 9rem; overflow: auto; }
.visore__note .avviso { margin: 0; padding: .45rem .7rem; font-size: .88rem; }
.visore__pdf { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); background: #fff; }
.visore__dati { max-height: 30%; overflow: auto; font-size: .88rem; }
.visore__dati summary { cursor: pointer; font-weight: 600; color: var(--testo-2); }
.risultati-griglia--con-visore .col-sec { display: none; }
.tabella--risultati td.periodo { white-space: nowrap; }
.risultati-griglia--con-visore .nome-file { max-width: 22ch; }
.risultati-griglia--con-visore .nota-riga { display: none; }   /* la nota intera sta già nel visore */
.riga--selezionata td { background: var(--primario-tenue) !important; }
.nota-riga { margin-top: .25rem; max-width: 34ch; font-size: .78rem; color: var(--attenzione); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga--errore .nota-riga { color: var(--errore); }
@media (max-width: 1000px) {
  .risultati-griglia--con-visore { display: block; }
  .visore { position: fixed; inset: .5rem; z-index: 30; height: auto; }
}

/* ---------- Amministrazione (Ver1.3.0) ---------- */
/* Controlli che il resto del portale non usava: stessa veste dei campi di testo */
select, textarea, input[type="search"], input[type="date"] {
  width: 100%; font: inherit; color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-piccolo); padding: .6rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
select:focus, textarea:focus, input[type="search"]:focus, input[type="date"]:focus {
  outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-tenue);
}
.campo small { font-size: .82rem; }

/* menu delle sezioni */
.sottomenu {
  display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: .3rem;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra);
}
.sottomenu a { color: var(--testo-2); text-decoration: none; padding: .45rem .9rem; border-radius: var(--raggio-piccolo); font-weight: 550; }
.sottomenu a:hover { background: var(--superficie-2); color: var(--testo); }
.sottomenu a[aria-current="page"] { background: var(--primario-tenue); color: var(--primario); }

/* pannello iniziale: una carta per sezione */
.pannello { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.pannello__carta {
  display: block; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 1.1rem 1.25rem; color: var(--testo); text-decoration: none; transition: border-color .15s;
}
.pannello__carta:hover { border-color: var(--primario); color: var(--testo); }
.pannello__carta h2 { font-size: .85rem; color: var(--testo-2); margin: 0 0 .25rem; text-transform: uppercase; letter-spacing: .04em; }
.pannello__numero { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pannello__numero--testo { font-size: 1.3rem; text-transform: capitalize; }
.pannello__testo { margin: .4rem 0 0; color: var(--testo-3); font-size: .85rem; }

/* elenchi, filtri, azioni */
.elenco-semplice { list-style: none; margin: 0; padding: 0; }
.elenco-semplice li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding: .5rem 0; border-top: 1px solid var(--bordo); }
.elenco-semplice li:first-child { border-top: 0; padding-top: 0; }
.elenco-semplice li.evidenza > span { color: var(--errore); font-weight: 600; }
.filtri-modulo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 0 0 1rem; }
.filtri-modulo .campo { flex: 1 1 150px; min-width: 0; }
.filtri-modulo .campo--largo { flex: 2 1 260px; grid-column: auto; }
.azioni-intestazione { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.azioni-colonna { display: grid; gap: .6rem; justify-items: start; }
.azioni-colonna form { margin: 0; }
.paginazione { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.paginazione__testo { color: var(--testo-3); font-size: .88rem; }
.separatore { border: 0; border-top: 1px solid var(--bordo); margin: 1.25rem 0; }
.scheda--stretta { max-width: 640px; }
.sottotitolo-inline { font-size: .9rem; font-weight: 400; margin-left: .4rem; }
.testo-attenzione { color: var(--attenzione); font-weight: 600; }
.testo-errore { color: var(--errore); font-weight: 600; }
.spento { color: var(--testo-3); }
.tabella th.num, .tabella td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
progress.barra--cella { display: inline-block; width: 7rem; margin: 0 .4rem 0 0; vertical-align: middle; }

/* caselle dei permessi */
.permessi { border: 1px solid var(--bordo); border-radius: var(--raggio-piccolo); padding: .75rem 1rem; margin: 0; display: grid; gap: .6rem; min-width: 0; }
.permessi legend { padding: 0 .4rem; font-weight: 600; font-size: .92rem; }

/* una bolletta: PDF originale a sinistra, dati da correggere a destra */
.bolletta-griglia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.bolletta-griglia > .scheda { margin-bottom: 0; }
.bolletta-griglia__pdf { position: sticky; top: .75rem; }
.visore__pdf--alto { display: block; flex: none; height: calc(100vh - 13rem); min-height: 480px; }
.titolo-file { overflow-wrap: anywhere; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1rem; }
.campo--corretto input, .campo--corretto select { border-color: var(--attenzione); }
.suggerimento { color: var(--attenzione); }
.altri-dati { margin-top: 1rem; }
.altri-dati summary { cursor: pointer; font-weight: 600; color: var(--testo-2); }
.testo-tecnico {
  margin: .5rem 0 0; padding: .75rem 1rem; background: var(--superficie-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo); font: .82rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto;
}
.testo-tecnico--alto { max-height: 75vh; }
@media (max-width: 1000px) {
  .bolletta-griglia { grid-template-columns: 1fr; }
  .bolletta-griglia__pdf { position: static; }
  .visore__pdf--alto { height: 70vh; min-height: 360px; }
}

/* impostazioni */
.impostazione { padding: .9rem 0; border-top: 1px solid var(--bordo); }
.impostazione:first-child { border-top: 0; padding-top: 0; }
.impostazione .campo { max-width: 360px; }
.impostazione .nota { margin: .3rem 0 0; }
.impostazione--cambiata { box-shadow: inset 3px 0 0 var(--primario); padding-left: .9rem; }
.gruppo-configurazione { border-top: 1px solid var(--bordo); padding: .6rem 0; }
.gruppo-configurazione summary { cursor: pointer; font-weight: 600; }
.gruppo-configurazione .dati-bolletta { margin: .75rem 0 0; }