/* ============================================================
   Estratto — foglio di stile
   Autonomo: nessun file condiviso, nessun carattere da scaricare,
   nessuna richiesta a domini esterni.

   Il terzo tema di fila, e i tre non si somigliano di proposito:

     17labs.it   inchiostro scuro e ottone, lineare, largo
     Norma       carta calda e amaranto, graziato, colonna stretta
     Estratto    ardesia fredda e verde contabile, tabulare

   Qui il contenuto sono numeri in colonna, quindi il foglio e'
   costruito attorno a quelli: cifre monospaziate e allineate a
   destra, filetti orizzontali come su un registro, niente
   graziato da nessuna parte. Un importo che non si incolonna e'
   un importo che non si confronta.

   Ordine:  1 token · 2 base · 3 testata · 4 deposito
            5 documento · 6 tabelle · 7 controlli · 8 stampa
   ============================================================ */

/* ====================== 1 — TOKEN ========================== */
:root {
  --largo: 1080px;

  --testo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cifre: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --p1: 8px; --p2: 14px; --p3: 22px; --p4: 34px; --p5: 54px;
  --curva: cubic-bezier(.22, .61, .36, 1);
}

html[data-tema="chiaro"] {
  --fondo:      #f4f6f8;
  --fondo-2:    #e9edf1;
  --piano:      #ffffff;
  --filo:       #dde3e9;
  --filo-2:     #aab6c2;
  --testo-1:    #10151b;
  --testo-2:    #47535f;
  --testo-3:    #5a6774;   /* scurito: a #64717e la fascia d'intestazione dava 4.24:1 */
  --accento:    #1a6b4a;
  --su-accento: #ffffff;
  --accento-velo: rgba(26, 107, 74, .08);
  --allarme:    #a3251c;
  --allarme-velo: rgba(163, 37, 28, .08);
  --nota:       #8a5a00;
  --nota-velo:  rgba(138, 90, 0, .09);
  color-scheme: light;
}

html[data-tema="scuro"] {
  --fondo:      #0e1216;
  --fondo-2:    #151b21;
  --piano:      #1a2129;
  --filo:       #26303a;
  --filo-2:     #3d4a57;
  --testo-1:    #e6ecf1;
  --testo-2:    #a7b4c0;
  --testo-3:    #7f8d9a;
  --accento:    #4ec99a;
  --su-accento: #0e1216;
  --accento-velo: rgba(78, 201, 154, .12);
  --allarme:    #ef8078;
  --allarme-velo: rgba(239, 128, 120, .12);
  --nota:       #e0b062;
  --nota-velo:  rgba(224, 176, 98, .12);
  color-scheme: dark;
}

/* ====================== 2 — BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo-1);
  font-family: var(--testo);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0 0 var(--p2); }
p:last-child { margin-bottom: 0; }
a { color: var(--accento); }
::selection { background: var(--accento); color: var(--su-accento); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.largo { width: 100%; max-width: var(--largo); margin: 0 auto; padding-inline: clamp(18px, 4vw, 36px); }

.nascosto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tutte le cifre della pagina passano di qui: stessa larghezza per
   ogni carattere, cosi' le colonne di importi si leggono in verticale. */
.n {
  font-family: var(--cifre);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.targhetta {
  font-family: var(--cifre);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-3);
}

/* ====================== 3 — TESTATA ======================== */
.testata { padding-block: var(--p4) var(--p3); }
.testata__riga { display: flex; align-items: center; gap: var(--p2); }

.firma {
  margin-right: auto; text-decoration: none;
  font-family: var(--cifre); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--testo-3);
}
.firma:hover { color: var(--accento); }

.interruttore {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--filo-2); border-radius: 3px;
  background: transparent; color: var(--testo-2); cursor: pointer; padding: 0;
  transition: border-color .2s var(--curva), color .2s var(--curva);
}
.interruttore:hover { border-color: var(--accento); color: var(--accento); }
.interruttore svg { width: 16px; height: 16px; }
html[data-tema="scuro"] .icona-sole { display: block; }
html[data-tema="scuro"] .icona-luna { display: none; }
html[data-tema="chiaro"] .icona-sole { display: none; }
html[data-tema="chiaro"] .icona-luna { display: block; }

.titolo { margin-top: var(--p4); font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -0.03em; }
.titolo b { color: var(--accento); font-weight: 600; }
.sommario { margin-top: var(--p2); max-width: 62ch; color: var(--testo-2); }

/* ====================== 4 — DEPOSITO ======================= */
.deposito {
  margin-top: var(--p3);
  border: 2px dashed var(--filo-2);
  border-radius: 6px;
  background: var(--piano);
  padding: var(--p5) var(--p3);
  text-align: center;
  transition: border-color .18s var(--curva), background-color .18s var(--curva);
}
.deposito.sopra { border-color: var(--accento); background: var(--accento-velo); }
.deposito__icona { width: 34px; height: 34px; color: var(--testo-3); margin: 0 auto var(--p2); }
.deposito.sopra .deposito__icona { color: var(--accento); }
.deposito h2 { font-size: 18px; margin-bottom: 6px; }
.deposito p { color: var(--testo-3); font-size: 14px; }

.bottone {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--p2); padding: 11px 20px;
  border: 1px solid var(--accento); border-radius: 3px;
  background: var(--accento); color: var(--su-accento);
  font-family: var(--cifre); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
  transition: filter .2s var(--curva);
}
.bottone:hover { filter: brightness(1.08); }
.bottone--vuoto {
  background: transparent; color: var(--testo-1); border-color: var(--filo-2);
}
.bottone--vuoto:hover { border-color: var(--accento); color: var(--accento); filter: none; }
.bottone svg { width: 15px; height: 15px; }

/* Esempi pronti: senza, chi apre la pagina senza una fattura
   sottomano non puo' provare niente, e se ne va. */
.esempi {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: var(--p2);
}
.esempi > span { margin-right: 4px; }
.esempi button {
  font-family: var(--testo); font-size: 13px; color: var(--testo-2);
  background: var(--fondo-2); border: 1px solid var(--filo);
  border-radius: 100px; padding: 5px 12px; cursor: pointer;
  transition: border-color .2s var(--curva), color .2s var(--curva);
}
.esempi button:hover { border-color: var(--accento); color: var(--accento); }

.barra-azioni {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: var(--p3); padding-bottom: var(--p2);
  border-bottom: 1px solid var(--filo);
}
.barra-azioni .conteggio { margin-right: auto; }

/* ====================== 5 — DOCUMENTO ====================== */
.documento {
  margin-top: var(--p3);
  background: var(--piano);
  border: 1px solid var(--filo);
  border-radius: 5px;
  overflow: hidden;
}

.doc__testa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px var(--p3);
  padding: var(--p2) var(--p3);
  background: var(--fondo-2);
  border-bottom: 1px solid var(--filo);
}
.doc__tipo {
  font-family: var(--cifre); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--su-accento); background: var(--accento);
  border-radius: 3px; padding: 3px 8px;
}
.doc__numero { font-weight: 600; font-size: 16px; }
.doc__data { color: var(--testo-3); font-size: 13.5px; }
.doc__totale { margin-left: auto; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.doc__file {
  width: 100%; font-family: var(--cifre); font-size: 10.5px;
  color: var(--testo-3); word-break: break-all;
}

.parti {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--filo); border-bottom: 1px solid var(--filo);
}
.parte { background: var(--piano); padding: var(--p2) var(--p3); }
.parte h3 { font-size: 15px; margin: 4px 0; }
.parte .dettaglio { color: var(--testo-3); font-size: 13px; line-height: 1.55; }
.parte .dettaglio .n { font-size: 12.5px; }

.sezione { padding: var(--p3); border-bottom: 1px solid var(--filo); }
.sezione:last-child { border-bottom: 0; }
.sezione > .targhetta { display: block; margin-bottom: var(--p2); }

/* ====================== 6 — TABELLE ======================== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: 6px 10px 8px;
  border-bottom: 1px solid var(--filo-2);
  font-family: var(--cifre); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3);
  white-space: nowrap;
}
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--filo); color: var(--testo-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.destra, th.destra { text-align: right; }
td.destra { color: var(--testo-1); }
tfoot td {
  padding: 10px; border-top: 2px solid var(--filo-2);
  font-weight: 600; color: var(--testo-1);
}
.descrizione { color: var(--testo-1); }
.scroll-x { overflow-x: auto; }

.pillola {
  display: inline-block; font-family: var(--cifre); font-size: 10px;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 3px;
  background: var(--fondo-2); color: var(--testo-3); white-space: nowrap;
}

/* ====================== 7 — CONTROLLI ====================== */
.controlli { display: grid; gap: 8px; }
.controllo {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 4px; font-size: 13.5px; line-height: 1.55;
  border-left: 3px solid;
}
.controllo b {
  font-family: var(--cifre); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; flex: none; padding-top: 2px; min-width: 52px;
}
.controllo--ok      { background: var(--accento-velo); border-color: var(--accento); color: var(--testo-2); }
.controllo--ok b    { color: var(--accento); }
.controllo--nota    { background: var(--nota-velo); border-color: var(--nota); color: var(--testo-2); }
.controllo--nota b  { color: var(--nota); }
.controllo--allarme { background: var(--allarme-velo); border-color: var(--allarme); color: var(--testo-2); }
.controllo--allarme b { color: var(--allarme); }

.guasto {
  margin-top: var(--p3); padding: var(--p3);
  border: 1px solid var(--allarme); border-left-width: 3px; border-radius: 4px;
  background: var(--allarme-velo); font-size: 14px; color: var(--testo-2);
}
.guasto b { display: block; color: var(--testo-1); margin-bottom: 4px; }

/* ====================== 8 — PIEGHE E STAMPA ================ */
.pieghe { margin-top: var(--p5); padding-bottom: var(--p5); }
.cifre-chiave {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--p3) var(--p2); margin-top: var(--p3);
  padding-top: var(--p3); border-top: 1px solid var(--filo);
}
.cifre-chiave b {
  display: block; font-family: var(--cifre); font-size: 26px; font-weight: 500;
  color: var(--accento); letter-spacing: -0.02em;
}
.cifre-chiave span { display: block; margin-top: 4px; font-size: 13px; color: var(--testo-2); line-height: 1.5; }
.chiosa { margin-top: var(--p3); font-size: 14px; line-height: 1.7; color: var(--testo-3); max-width: 74ch; }
.chiosa strong { color: var(--testo-2); font-weight: 600; }

.piede {
  border-top: 1px solid var(--filo); padding-block: var(--p3);
  font-size: 13px; color: var(--testo-3);
}
.piede a { color: var(--accento); }

@media (max-width: 700px) {
  .parti { grid-template-columns: 1fr; }
  .doc__totale { margin-left: 0; width: 100%; }
  .deposito { padding: var(--p4) var(--p2); }
}

@media print {
  .deposito, .barra-azioni, .interruttore, .pieghe, .controllo--ok { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .documento { break-inside: avoid; border-color: #999; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}