/* L'aspetto dell'applicativo, scelto il 5 ottobre 2026 fra quattro proposte («C · Registro»).
   Un libro mastro: tutto lo schermo ai dati, righe fitte, cifre in carattere a larghezza
   fissa che si incolonnano, una striscia stretta di icone al posto del menu.
   Si carica dopo app.css e ne ridefinisce misure e colori.
   IBM Plex Sans per il testo, IBM Plex Mono per importi, date e numeri di pratica. */

@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --carta: #ffffff;
  --smorzata: #f3f4f7;
  --tratto: #e3e5ea;
  --tratto-marcato: #b7bcc7;
  --inchiostro: #0d1433;
  --inchiostro-chiaro: #222c58;
  --grafite: #596072;
  --grafite-chiara: #8e94a3;
  --blu: #0f5fd1;
  --vuoto: #d3d6de;
  --cifre: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

body { font: 13px/1.45 'IBM Plex Sans', system-ui, sans-serif; }
.num, .importo, .dati dd, .totali b, .riquadro__numero, .storico time, input[type=date], input[type=number] { font-family: var(--cifre); }

/* --- la barra diventa una striscia di icone --- */
.telaio { grid-template-columns: 78px minmax(0, 1fr); }
.barra__dentro { padding: 12px 7px; align-items: stretch; }
.barra__logo { background: none; padding: 6px 0 12px; border-radius: 0; display: grid; place-items: center; }
.barra__logo .logo--blu { display: none; }
.barra__logo .logo--segno { display: block; width: 40px; height: auto; }
.barra__nome { display: none; }
.barra__voce {
  flex-direction: column; justify-content: center; gap: 5px; height: 58px; padding: 0;
  font-size: 10px; letter-spacing: 0.01em; border-radius: 3px; text-align: center;
}
.barra__utente { flex-direction: column; gap: 6px; padding: 10px 0 0; text-align: center; }
.barra__iniziali { border-radius: 3px; width: 32px; height: 32px; }
.barra__chi { display: none; }

.piano { padding: 16px 26px 44px; }

/* --- testata bassa, chiusa da una riga d'inchiostro --- */
.testata { align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--inchiostro); gap: 16px; }
.briciole { margin-bottom: 2px; font-size: 11px; }
.testata h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.testata__sotto { font-size: 13px; margin-top: 1px; }
.occhiello { font-size: 10.5px; letter-spacing: 0.1em; font-weight: 500; }
.sezione { margin-top: 22px; }
.sezione__testa { margin-bottom: 6px; }
.sezione h2, .scheda h2 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; }
.scheda h2 { margin-bottom: 10px; }
.nota { font-size: 11.5px; }

/* --- i riquadri diventano le caselle di una sola striscia --- */
.riquadri, .conto { gap: 0; border: 1px solid var(--tratto-marcato); }
.riquadro { border: 0; border-right: 1px solid var(--tratto); border-radius: 0; padding: 11px 14px 10px; }
.riquadro:last-child { border-right: 0; }
.riquadro__numero { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; margin: 3px 0 1px; }
.conto .riquadro__numero { font-size: 22px; }
.riquadro__nota { font-size: 12px; }
.conto { margin-bottom: 12px; }

.totali { border-radius: 0; border-color: var(--tratto-marcato); margin-bottom: 10px; }
.totali > div { padding: 7px 14px; }
.totali b { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin-top: 0; }
.totali small { font-size: 11px; }

/* --- tabelle da bordo a bordo, righe fitte e alternate --- */
.scheda { border-radius: 0; border-color: var(--tratto-marcato); }
.scheda--spazio { padding: 14px 16px; }
.scheda + .scheda { margin-top: 10px; }
table { font-size: 12.5px; }
th { padding: 6px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; background: var(--smorzata); color: var(--inchiostro); }
td { padding: 5px 10px; }
tbody tr:nth-child(even) td { background: #fafbfc; }
tbody tr:hover td { background: #eef3fb; }
tfoot td { background: var(--smorzata); }
.sotto { font-size: 11px; }
td .sotto { display: inline; margin-left: 8px; }
.num .sotto { display: block; margin-left: 0; }

/* --- comandi bassi: qui conta quante righe stanno nello schermo --- */
.filtri { border-radius: 0; padding: 9px 12px; gap: 8px 10px; margin-bottom: 10px; }
.filtro { font-size: 11px; gap: 2px; }
.pulsante, input, select { height: 36px; }
.pulsante { border-radius: 2px; padding: 0 13px; font-size: 12.5px; }
.pulsante--piccolo { height: 30px; }
input, select, textarea { border-radius: 2px; padding: 0 9px; font-size: 12.5px; }
td input, td select { height: 30px; }
.spunta, .scorciatoie { height: 36px; font-size: 12.5px; }
input[type=checkbox] { width: 15px; height: 15px; }
.importo { width: 116px; }
.modulo { gap: 12px 14px; }
.campo__nome { font-size: 12px; }
.avviso, .richiamo { border-radius: 0; padding: 9px 12px; margin-bottom: 10px; }
.due-colonne, .riquadri { margin-bottom: 0; }
.dati { font-size: 12.5px; gap: 5px 16px; }
.storico { font-size: 12.5px; }
.storico li { padding: 6px 0; }
.tappa { padding-bottom: 14px; }

/* --- cio' che va controllato: niente crema. Un rosso molto chiaro, lo stesso rosso del segno
   di anomalia schiarito; il numero resta in rosso pieno. --- */
:root { --allerta-fondo: #fbeeec; --allerta-bordo: #efcfca; }
.riquadro--verifica { background: var(--allerta-fondo); }
.riquadro--verifica .occhiello, .riquadro--verifica .riquadro__nota { color: var(--inchiostro); }
.riquadro--verifica .riquadro__numero { color: var(--anomalia); }
.richiamo { background: var(--allerta-fondo); border: 1px solid var(--allerta-bordo); border-top: 2px solid var(--anomalia); }
.richiamo h2 { color: var(--anomalia); font-weight: 600; }

/* --- stato: quattro tacche che si riempiono, una per tappa del percorso --- */
.stato::before {
  width: 4px; height: 10px; margin-right: 26px; background: var(--inchiostro);
  box-shadow: 6px 0 0 var(--vuoto), 12px 0 0 var(--vuoto), 18px 0 0 var(--vuoto);
}
.stato--da_inviare::before { background: var(--inchiostro); box-shadow: 6px 0 0 var(--vuoto), 12px 0 0 var(--vuoto), 18px 0 0 var(--vuoto); }
.stato--attesa::before { background: var(--attesa); box-shadow: 6px 0 0 var(--attesa), 12px 0 0 var(--vuoto), 18px 0 0 var(--vuoto); }
.stato--liquidata::before { background: var(--liquidata); box-shadow: 6px 0 0 var(--liquidata), 12px 0 0 var(--liquidata), 18px 0 0 var(--vuoto); }
.stato--parziale::before { background: var(--incassata); box-shadow: 6px 0 0 var(--incassata), 12px 0 0 var(--incassata), 18px 0 0 var(--vuoto), inset 0 0 0 0 transparent; }
.stato--incassata::before { background: var(--incassata); box-shadow: 6px 0 0 var(--incassata), 12px 0 0 var(--incassata), 18px 0 0 var(--incassata); }
.stato--annullata::before { background: var(--vuoto); box-shadow: 6px 0 0 var(--vuoto), 12px 0 0 var(--vuoto), 18px 0 0 var(--vuoto); }
.riquadro .stato::before { margin-right: 26px; }
/* I bonifici non hanno tappe: per loro resta il quadratino. */
.stato[class*='stato--b-']::before, .riquadro .stato[class*='stato--b-']::before { width: 9px; margin-right: 8px; box-shadow: none; }
.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, .stato--b-incompleto::before { background: var(--attesa); }
.stato.stato--b-vuoto::before { background: none; box-shadow: inset 0 0 0 1.5px var(--grafite-chiara); }
.stato--b-anomalia::before { background: var(--anomalia); }

.accesso h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.accesso__foglio { max-width: 340px; border-top: 2px solid var(--inchiostro); padding-top: 22px; }

@media (max-width: 820px) {
  .telaio { grid-template-columns: minmax(0, 1fr); }
  .barra__dentro { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 6px 8px; gap: 6px; }
  .barra__logo { padding: 0 6px 0 2px; width: auto; }
  .barra__voci { display: flex; flex-wrap: nowrap; order: 0; width: auto; flex: 1 1 auto; overflow-x: auto; }
  .barra__voce { height: 48px; min-width: 62px; font-size: 9.5px; }
  .barra__utente { margin: 0; flex-direction: row; padding: 0; }
  .barra__utente > div form { display: block; }
  .piano { padding: 12px 12px 40px; }
  .riquadro { border-right: 0; border-bottom: 1px solid var(--tratto); }
  td .sotto { display: block; margin-left: 0; }
}

/* --- guida e tutorial --- */
.guida__capitolo h2 { font-size: 15px; text-transform: none; letter-spacing: -0.01em; }
.guida__capitolo { font-size: 13.5px; }
.guidami { height: 34px; border-radius: 2px; font-size: 12.5px; }
.tutorial__scheda { border-radius: 2px; }
.tutorial__scheda h2 { font-size: 15px; text-transform: none; letter-spacing: 0; }
.tutorial__scheda p { font-size: 13.5px; }
.tutorial__anello { border-radius: 0; }