/* Pratiche finanziarie: struttura, misure e componenti di base.
   L'aspetto (caratteri, densità, segni di stato) è in registro.css, caricato subito dopo.
   Piatto: bordi da 1px, nessuna sfumatura, un solo accento, il blu di Progetto Acque. */

:root {
  --carta: #fbfaf7;
  --superficie: #ffffff;
  --smorzata: #f4f2ed;
  --tratto: #e3e1db;
  --tratto-marcato: #cfccc3;
  --inchiostro: #010c46;
  --inchiostro-chiaro: #17246a;
  --grafite: #56607a;
  --grafite-chiara: #8b93a3;
  --blu: #1670df;
  /* I quattro segni chiesti dal brief, piu' il grigio di cio' che non e' ancora partito. */
  --incassata: #2f7d4f;
  --liquidata: #1670df;
  --attesa: #c58a17;
  --anomalia: #c23b2b;
  --ocra-testo: #7a4f12;
  --ocra-fondo: #fbf3e6;
  --ocra-bordo: #ecd6ae;
}

* { box-sizing: border-box; }
/* Un elemento nascosto resta nascosto anche se una classe gli da' un suo display. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--inchiostro);
  background: var(--carta);
}
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

.barra__logo .logo--segno { display: none; }

/* ------------------------------------------------------------ telaio */

.telaio { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.barra { background: var(--inchiostro); color: #fff; }
.barra__dentro {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.barra__logo { display: block; background: #fff; border-radius: 10px; padding: 14px 14px 12px; }
.barra__logo img { display: block; width: 100%; height: auto; }
.barra__nome {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #aab3d6; margin: 14px 8px 18px;
}
.barra__voci { display: grid; gap: 2px; }
.barra__voce {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 12px; border-radius: 6px;
  color: #dfe3f3; font-size: 14px;
}
.barra__voce:hover { background: var(--inchiostro-chiaro); text-decoration: none; }
.barra__voce--attiva { background: var(--inchiostro-chiaro); color: #fff; font-weight: 600; }
.barra__voce svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.barra__utente {
  margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid #1f2c6e;
  display: flex; align-items: center; gap: 10px;
}
.barra__iniziali {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blu);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
}
.barra__chi { color: #fff; font-size: 13px; font-weight: 600; display: block; line-height: 1.3; }
.barra__esci {
  background: none; border: 0; padding: 0; color: #aab3d6;
  font: inherit; font-size: 12px; cursor: pointer;
}
.barra__esci:hover { color: #fff; text-decoration: underline; }

.piano { padding: 26px 40px 60px; min-width: 0; }

/* ------------------------------------------------------------ testata */

.testata {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.briciole { font-size: 12px; color: var(--grafite); margin-bottom: 6px; }
.briciole a { color: var(--grafite); }
.testata h1 { font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.testata__sotto { font-size: 16px; color: var(--grafite); margin-top: 8px; }
.testata__azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.occhiello {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grafite);
}
.sezione { margin-top: 30px; }
.sezione__testa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.sezione h2 { font-size: 16px; font-weight: 600; }
.nota { font-size: 12px; color: var(--grafite); }
.vuoto { padding: 26px; text-align: center; color: var(--grafite); }

/* ------------------------------------------------------------ pulsanti */

.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 6px;
  border: 1px solid var(--tratto-marcato); background: var(--superficie); color: var(--inchiostro);
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pulsante:hover { border-color: var(--inchiostro); text-decoration: none; }
.pulsante--primario { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.pulsante--primario:hover { background: var(--inchiostro-chiaro); }
.pulsante--piccolo { height: 34px; padding: 0 12px; font-size: 13px; }
.pulsante--pericolo { color: var(--anomalia); }
.pulsante--pericolo:hover { border-color: var(--anomalia); }
.come-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--blu); cursor: pointer;
}
.come-link:hover { text-decoration: underline; }
.come-link--pericolo { color: var(--anomalia); }

/* ------------------------------------------------------------ avvisi */

.avviso {
  background: var(--superficie); border: 1px solid var(--tratto-marcato); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; font-weight: 600;
}
.avviso::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--incassata);
}
.avviso--errore::before { background: var(--anomalia); }
.avviso--avviso::before { background: var(--attesa); }

/* ------------------------------------------------------------ segni di stato
   Un quadratino pieno davanti al testo, senza fondo ne' bordo. Si riempie
   man mano che la pratica avanza: vuoto, ocra, blu, mezzo verde, verde. */

.stato { white-space: nowrap; }
.stato::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  background: var(--grafite-chiara);
}
.stato--da_inviare::before { background: none; box-shadow: inset 0 0 0 1.5px var(--grafite-chiara); }
.stato--attesa::before { background: var(--attesa); }
.stato--liquidata::before { background: var(--liquidata); }
.stato--parziale::before { background: none; box-shadow: inset 4.5px 0 0 var(--incassata), inset 0 0 0 1.5px var(--incassata); }
.stato--incassata::before { background: var(--incassata); }
.stato--annullata { color: var(--grafite-chiara); text-decoration: line-through; }
.stato--annullata::before { background: none; box-shadow: inset 0 0 0 1.5px var(--tratto-marcato); }
.stato--b-riconciliato::before { background: var(--incassata); }
.stato--b-chiuso::before { background: none; box-shadow: inset 0 0 0 1.5px var(--incassata); }
.stato--b-da_abbinare::before { background: var(--attesa); }
/* Una distinta non ha tappe: inviata (quadratino pieno) oppure no (vuoto). */
.stato--b-vuoto::before { background: none; box-shadow: inset 0 0 0 1.5px var(--grafite-chiara); }
.stato--b-anomalia::before { background: var(--anomalia); }

.segno { display: block; position: relative; padding-left: 17px; }
.segno::before {
  content: ''; position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; background: var(--anomalia);
}

/* ------------------------------------------------------------ riquadri dei numeri */

.riquadri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.riquadro {
  display: block; background: var(--superficie); border: 1px solid var(--tratto); border-radius: 8px;
  padding: 18px 20px 16px; color: inherit;
}
a.riquadro:hover { border-color: var(--inchiostro); text-decoration: none; }
.riquadro__numero {
  font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 8px 0 4px;
}
.riquadro__nota { font-size: 13px; color: var(--grafite); }
.riquadro .stato::before { margin-right: 8px; }
.riquadro--verifica { background: var(--ocra-fondo); border-color: var(--ocra-bordo); }
.riquadro--verifica .occhiello, .riquadro--verifica .riquadro__nota { color: var(--ocra-testo); }

/* Riga di totali sopra un elenco. */
.totali {
  display: flex; flex-wrap: wrap; gap: 0;
  background: var(--superficie); border: 1px solid var(--tratto); border-radius: 8px; margin-bottom: 14px;
}
.totali > div { padding: 14px 20px; border-right: 1px solid var(--tratto); flex: 1 1 auto; }
.totali > div:last-child { border-right: 0; }
.totali b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; white-space: nowrap; }
.totali small { font-size: 12px; color: var(--grafite); }

/* ------------------------------------------------------------ schede e tabelle */

.scheda { background: var(--superficie); border: 1px solid var(--tratto); border-radius: 8px; }
.scheda--spazio { padding: 20px 22px; }
.scheda + .scheda { margin-top: 14px; }
.scheda h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.scorre { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th {
  text-align: left; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--grafite); padding: 12px 14px; border-bottom: 1px solid var(--tratto-marcato); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--tratto); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--carta); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.forte, .forte { font-weight: 600; }
.sotto { display: block; font-size: 12px; color: var(--grafite); white-space: nowrap; }
tfoot td { border-top: 1px solid var(--tratto-marcato); border-bottom: 0; font-weight: 600; background: var(--carta); }
tr.barrata td { color: var(--grafite-chiara); text-decoration: line-through; }
td.stretta, th.stretta { width: 1%; white-space: nowrap; }

/* ------------------------------------------------------------ filtri */

.filtri {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  background: var(--smorzata); border: 1px solid var(--tratto); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 14px;
}
.filtro { display: grid; gap: 4px; font-size: 12px; color: var(--grafite); }
.filtro--largo { flex: 1 1 180px; }
.spunta { display: flex; align-items: center; gap: 8px; height: 44px; font-size: 14px; color: var(--inchiostro); }
.scorciatoie { display: flex; gap: 14px; align-items: center; height: 44px; font-size: 13px; }
.scorciatoie a[aria-current] { color: var(--inchiostro); font-weight: 600; }

input, select, textarea {
  font: inherit; color: var(--inchiostro); background: var(--superficie);
  border: 1px solid var(--tratto-marcato); border-radius: 3px; height: 44px; padding: 0 12px; min-width: 0;
}
textarea { height: auto; padding: 10px 12px; width: 100%; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--inchiostro); }
input:hover, select:hover, textarea:hover { border-color: var(--grafite); }
.importo { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
td input, td select { height: 36px; }
td input.largo { width: 240px; }

/* ------------------------------------------------------------ moduli */

.modulo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; }
.campo { display: grid; gap: 6px; grid-column: span 2; align-content: start; }
.campo--3 { grid-column: span 3; }
.campo--6 { grid-column: span 6; }
.campo__nome { font-size: 13px; font-weight: 600; }
.campo__nome small { font-weight: 400; color: var(--grafite-chiara); font-size: 12px; margin-left: 4px; }
.campo input, .campo select { width: 100%; }
.campo__aiuto { font-size: 12px; color: var(--grafite); }
.campo__errore { font-size: 12px; color: var(--anomalia); font-weight: 600; }
.campo--errore input, .campo--errore select { border-color: var(--anomalia); }
.modulo__titolo {
  grid-column: 1 / -1; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grafite);
  border-bottom: 1px solid var(--tratto); padding-bottom: 8px; margin-top: 10px;
}
.modulo__titolo:first-child { margin-top: 0; }
.modulo__fine { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.in-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.in-riga .filtro { color: var(--grafite); }

details > summary { cursor: pointer; color: var(--blu); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { text-decoration: underline; }
details[open] > summary { margin-bottom: 10px; color: var(--inchiostro); font-weight: 600; }

/* ------------------------------------------------------------ scheda della pratica */

.due-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }

/* Il percorso: quattro tappe una sotto l'altra, unite da un filo. */
.percorso { list-style: none; margin: 0; padding: 0; }
.tappa { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 0 16px; padding-bottom: 22px; position: relative; }
.tappa:last-child { padding-bottom: 0; }
.tappa::before {
  content: ''; width: 9px; height: 9px; margin-top: 6px;
  box-shadow: inset 0 0 0 1.5px var(--grafite-chiara);
}
.tappa::after {
  content: ''; position: absolute; left: 4px; top: 21px; bottom: 0; width: 1px; background: var(--tratto-marcato);
}
.tappa:last-child::after { display: none; }
.tappa--fatta::before { background: var(--inchiostro); box-shadow: none; }
.tappa--prossima::before { background: var(--attesa); box-shadow: none; }
.tappa__nome { font-weight: 600; }
.tappa__dati { color: var(--grafite); font-size: 13px; }
.tappa form, .tappa details { margin-top: 10px; }

.dati { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 13px; }
.dati dt { color: var(--grafite); }
.dati dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.richiamo {
  background: var(--ocra-fondo); border: 1px solid var(--ocra-bordo); border-radius: 8px;
  padding: 16px 20px; margin-bottom: 14px;
}
.richiamo h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; color: var(--ocra-testo); margin-bottom: 8px; }
.richiamo .segno { font-weight: 600; margin-bottom: 4px; }
.richiamo form, .richiamo details { margin-top: 8px; }

.storico { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.storico li { padding: 9px 0; border-bottom: 1px solid var(--tratto); }
.storico li:last-child { border-bottom: 0; padding-bottom: 0; }
.storico time { display: block; font-size: 12px; color: var(--grafite); }

/* Il conto di un bonifico: ricevuto, abbinato, differenza. */
.conto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.conto .riquadro__numero { font-size: 30px; }
.conto__male { color: var(--anomalia); }
.conto__bene { color: var(--incassata); }

/* ------------------------------------------------------------ guida e tutorial */

.guida__indice { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 14px; font-size: 13px; }
.guida__capitolo { scroll-margin-top: 16px; }
.guida__capitolo > * { max-width: 78ch; }
.guida__capitolo h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.guida__capitolo p { margin: 10px 0; }
.guida__capitolo ol, .guida__capitolo ul { margin: 10px 0; padding-left: 22px; display: grid; gap: 6px; }
.guida__quando, .guida__dopo { color: var(--grafite); }
.guida__avvia { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; }
.guida__stati { width: auto; max-width: 100%; margin: 10px 0; }
.guida__stati td, .guida__stati th { padding-left: 0; padding-right: 24px; }
.guida__ruoli { max-width: 900px; }
.guida__ruoli th:not(:first-child), .guida__ruoli td:not(:first-child) { width: 1%; white-space: nowrap; }
.guida__capitolo > .scorre { max-width: none; }
.guida__domande { margin: 0; display: grid; gap: 4px; }
.guida__domande dt { font-weight: 600; margin-top: 12px; }
.guida__domande dd { margin: 0; }

/* «Guidami»: sempre nello stesso angolo, avvia il tutorial della pagina aperta. */
.guidami {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 6px;
  background: var(--superficie); color: var(--inchiostro); border: 1px solid var(--inchiostro);
  font-size: 13px; font-weight: 600;
}
.guidami::before {
  content: '?'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px;
  background: var(--inchiostro); color: #fff; font-size: 12px; font-weight: 700;
}
.guidami:hover { background: var(--inchiostro); color: #fff; text-decoration: none; }
.guidami:hover::before { background: #fff; color: var(--inchiostro); }
.in-tutorial .guidami { display: none; }

/* Il tutorial: un riquadro attorno all'elemento spiegato, il resto della pagina in ombra,
   e un cartellino con il testo e i comandi. */
.tutorial__anello {
  position: absolute; z-index: 50; pointer-events: none;
  border: 2px solid var(--blu); border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(1, 12, 70, 0.42);
}
.tutorial__scheda {
  position: absolute; z-index: 51; width: min(400px, calc(100vw - 24px));
  background: var(--superficie); color: var(--inchiostro);
  border: 1px solid var(--inchiostro); border-radius: 6px; padding: 16px 18px 14px;
  box-shadow: 0 6px 18px rgba(1, 12, 70, 0.18);
}
.tutorial__scheda--centro { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tutorial__scheda--fissa { position: fixed; right: 18px; bottom: 18px; }
.tutorial__scheda h2 { font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.tutorial__scheda p { font-size: 14px; line-height: 1.5; }
.tutorial__conto { font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grafite); }
.tutorial__nota { margin-top: 8px; font-weight: 600; }
.tutorial__comandi { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.tutorial__comandi .come-link { margin-right: auto; font-size: 13px; color: var(--grafite); }

@media (max-width: 700px) {
  .tutorial__scheda--fissa { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .guidami { right: 12px; bottom: 12px; }
}
@media print {
  .barra, .guidami, .tutorial__anello, .tutorial__scheda, .testata__azioni, .guida__avvia, .guida__indice { display: none !important; }
  .telaio { display: block; }
  .piano { padding: 0; }
  body { background: #fff; }
  .scheda { break-inside: avoid; }
}

/* ------------------------------------------------------------ accesso */

.accesso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.accesso__foglio { width: 100%; max-width: 380px; }
.accesso__logo { display: block; width: 220px; height: auto; margin-bottom: 28px; }
.accesso h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 22px; }
.accesso form { display: grid; gap: 16px; }
.accesso .campo { grid-column: auto; }

/* ------------------------------------------------------------ schermi stretti */

@media (max-width: 1100px) {
  .riquadri, .conto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .due-colonne { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .telaio { grid-template-columns: minmax(0, 1fr); }
  .barra__dentro { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .barra__logo { padding: 8px 10px; width: 132px; }
  .barra__nome { display: none; }
  .barra__voci { display: flex; flex-wrap: wrap; order: 3; width: 100%; }
  .barra__voce { height: 38px; padding: 0 10px; gap: 8px; font-size: 13px; }
  .barra__utente { margin: 0 0 0 auto; border: 0; padding: 0; }
  .piano { padding: 18px 16px 48px; }
  .testata h1 { font-size: 30px; }
  .modulo { grid-template-columns: minmax(0, 1fr); }
  .campo, .campo--3, .campo--6 { grid-column: auto; }
  .riquadro__numero { font-size: 32px; }
}
@media (max-width: 520px) {
  .riquadri, .conto { grid-template-columns: minmax(0, 1fr); }
}