:root {
  --sfondo: #f6f4ef; --carta: #ffffff; --testo: #1c2422; --tenue: #5c6a66; --bordo: #dcd8cd;
  --accento: #0f6b57; --accento-scuro: #0a4e40; --accento-chiaro: #e3efe9; --errore: #a33a22;
  --su-accento: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #141a18; --carta: #1c2422; --testo: #e9eeeb; --tenue: #9aa8a3; --bordo: #33403c;
    --accento: #4fb89c; --accento-scuro: #7fd0b9; --accento-chiaro: #1f332d; --errore: #f0937c;
    --su-accento: #0d1513;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: var(--accento); }
.pagina { max-width: 980px; margin: 0 auto; padding: 0 20px 64px; }

/* testata e piede */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.marchio { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--testo); text-decoration: none; }
.marchio span { color: var(--accento); }
.testata nav { display: flex; gap: 18px; font-size: .95rem; }
.testata nav a { color: var(--tenue); text-decoration: none; }
.testata nav a:hover { color: var(--accento); }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--bordo); color: var(--tenue); font-size: .88rem; }
footer p { margin: 0 0 6px; }

/* pagina dello strumento */
h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: -.025em; margin: 28px 0 14px; max-width: 18ch; }
.sotto { font-size: 1.12rem; color: var(--tenue); max-width: 62ch; margin: 0 0 28px; }
.zona {
  background: var(--carta); border: 2px dashed var(--bordo); border-radius: 14px;
  padding: 38px 24px; text-align: center; transition: border-color .15s, background .15s;
}
.zona.sopra { border-color: var(--accento); background: var(--accento-chiaro); }
.zona p { margin: 0 0 16px; }
.zona .formati { color: var(--tenue); font-size: .92rem; margin: 14px 0 0; }
button { font: inherit; cursor: pointer; border-radius: 9px; }
.primario, a.primario {
  display: inline-block; background: var(--accento); color: var(--su-accento); border: 0;
  padding: 12px 22px; font-weight: 600; border-radius: 9px; text-decoration: none;
}
.primario:hover { background: var(--accento-scuro); }
.primario:disabled { opacity: .5; cursor: default; }
.secondario { background: transparent; color: var(--accento); border: 1px solid var(--bordo); padding: 11px 18px; }
.secondario:hover { border-color: var(--accento); }
.testuale { background: none; border: 0; color: var(--accento); text-decoration: underline; padding: 0; }
.occupato .zona { opacity: .6; pointer-events: none; }
#stato { min-height: 1.6em; margin: 14px 2px 0; color: var(--tenue); }
.esito { background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px; padding: 22px; margin-top: 16px; }
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.numero { background: var(--accento-chiaro); border-radius: 10px; padding: 12px 14px; }
.numero strong { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.numero span { color: var(--tenue); font-size: .88rem; }
.avvisi { margin: 16px 0 0; padding-left: 20px; color: var(--tenue); font-size: .94rem; }
.avvisi .errore { color: var(--errore); }
.scorri { overflow-x: auto; margin-top: 16px; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bordo); }
.esito th, .esito td { white-space: nowrap; }
th { color: var(--tenue); font-weight: 600; }
td.dx, th.dx { text-align: right; font-variant-numeric: tabular-nums; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.azioni small { color: var(--tenue); }
h2 { font-size: 1.45rem; letter-spacing: -.015em; margin: 56px 0 16px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 16px 18px; }
.scheda h3 { margin: 0 0 6px; font-size: 1.02rem; }
.scheda p { margin: 0; color: var(--tenue); font-size: .94rem; }
a.scheda { display: block; text-decoration: none; color: inherit; }
a.scheda:hover { border-color: var(--accento); }
.riservato { background: var(--accento-chiaro); border-radius: 14px; padding: 22px 24px; margin-top: 56px; }
.riservato h2 { margin-top: 0; }
.riservato p { margin: 0; max-width: 70ch; }
details { background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 2px; color: var(--tenue); }
[hidden] { display: none !important; }

/* guide e pagine di testo */
.articolo { max-width: 72ch; }
.articolo h1 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); max-width: none; }
.articolo h2 { font-size: 1.3rem; margin: 40px 0 10px; }
.articolo h3 { font-size: 1.05rem; margin: 26px 0 6px; }
.articolo p, .articolo li { color: var(--testo); }
.articolo .attacco { font-size: 1.1rem; color: var(--tenue); }
.articolo li { margin-bottom: 6px; }
.articolo code { background: var(--accento-chiaro); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.articolo table { margin: 14px 0; }
.articolo td, .articolo th { vertical-align: top; }
.briciole { font-size: .9rem; color: var(--tenue); margin: 6px 0 0; }
.briciole a { color: var(--tenue); }
.nota { border-left: 3px solid var(--accento); background: var(--carta); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 18px 0; }
.nota p { margin: 0; }
.invito { background: var(--accento-chiaro); border-radius: 14px; padding: 22px 24px; margin: 40px 0 0; }
.invito h2 { margin: 0 0 8px; }
.invito p { margin: 0 0 14px; }

/* elenco delle fatture e vista leggibile */
.testata nav { flex-wrap: wrap; justify-content: flex-end; }
.suggerimento { color: var(--tenue); font-size: .9rem; margin: 10px 0 0; }
.elenco { max-height: 300px; overflow: auto; }
.elenco thead th { position: sticky; top: 0; background: var(--carta); }
.elenco tr.scelta td { background: var(--accento-chiaro); }
.vista { margin-top: 16px; }
.fattura { background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px; padding: 26px 28px; font-size: .92rem; }
.f-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--accento); }
.f-testa p { margin: 0; }
.f-tipo, .f-numero { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.f-estremi { text-align: right; }
.f-sotto { color: var(--tenue); font-size: .88rem; }
.f-parti { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.f-parte { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 14px; }
.f-parte h3 { margin: 0 0 6px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.f-parte p { margin: 0; overflow-wrap: anywhere; }
.f-parte .f-nome { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.fattura h4 { margin: 20px 0 6px; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.fattura .scorri { margin-top: 0; }
.fattura table { font-size: .88rem; }
.fattura th, .fattura td { white-space: normal; padding: 6px 8px; vertical-align: top; }
.fattura td.dx, .fattura th.dx { white-space: nowrap; }
.f-rif { margin: 0; padding: 0; list-style: none; }
.f-rif li { margin: 0 0 3px; overflow-wrap: anywhere; }
.f-totali { margin: 16px 0 0 auto; width: min(100%, 330px); font-variant-numeric: tabular-nums; }
.f-totali div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px; }
.f-totali .f-totale { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--accento); margin-top: 4px; padding-top: 8px; }
.f-nota { color: var(--tenue); font-size: .8rem; margin: 22px 0 0; }
#stampa { display: none; }
@media (max-width: 640px) {
  .f-parti { grid-template-columns: 1fr; }
  .fattura { padding: 18px 16px; }
}

/* stampa: con una fattura pronta si stampa solo quella, in bianco e nero su A4 */
@media print {
  :root { --sfondo: #fff; --carta: #fff; --testo: #000; --tenue: #444; --bordo: #bbb; --accento: #0f6b57; --accento-chiaro: #eef3f1; --su-accento: #fff; }
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff; }
  body.con-stampa .pagina { display: none; }
  body.con-stampa #stampa { display: block; }
  #stampa .fattura { border: 0; border-radius: 0; padding: 0; font-size: 9.5pt; break-after: page; }
  #stampa .fattura:last-child { break-after: auto; }
  #stampa .fattura table { font-size: 9pt; }
  #stampa .f-parti { grid-template-columns: 1fr 1fr; }
  #stampa .scorri { overflow: visible; }
  #stampa tr, #stampa .f-totali, #stampa .f-parte, #stampa .f-testa { break-inside: avoid; }
  #stampa thead { display: table-header-group; }
}