/* Aspetto del portale. Sopra Bootstrap: token di colore, struttura con menu laterale, componenti propri.
   Nessuna dipendenza esterna (niente CDN, niente font remoti). Chiaro e scuro seguono il sistema (script in base.html). */

/* ------------------------------------------------------------------ token */
:root {
  --bs-font-sans-serif: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: 1.55;
  --bs-border-radius: 0.55rem;
  --bs-border-radius-lg: 0.9rem;

  --portale-brand: #1d4f82;
  --portale-brand-2: #2f7bc4;
  --portale-brand-ink: #ffffff;
  --portale-canvas: #f2f4f8;
  --portale-surface: #ffffff;
  --portale-surface-2: #f7f9fc;
  --portale-line: #e0e5ed;
  --portale-ink-soft: #5b6676;
  --portale-ok: #137a4b;
  --portale-warn: #8a6100;
  --portale-menu-bg: #0e2740;
  --portale-menu-ink: #c5d3e3;
  --portale-menu-ink-strong: #ffffff;
  --portale-menu-hover: rgba(255, 255, 255, .07);
  --portale-menu-active: rgba(255, 255, 255, .13);
  --portale-menu-accent: #6db3f2;
  --portale-menu-width: 16.5rem;
  --portale-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --portale-shadow-hover: 0 6px 20px rgba(16, 24, 40, .10);
  --portale-ease: cubic-bezier(.2, .7, .2, 1);

  --bs-primary: #1d4f82;
  --bs-primary-rgb: 29, 79, 130;
  --bs-link-color: #1d4f82;
  --bs-link-color-rgb: 29, 79, 130;
  --bs-link-hover-color: #123a63;
  --bs-link-hover-color-rgb: 18, 58, 99;
  --bs-focus-ring-color: rgba(47, 123, 196, .40);
}
[data-bs-theme="dark"] {
  --portale-brand: #7db6ef;
  --portale-brand-2: #5a9fe0;
  --portale-brand-ink: #0a1a2a;
  --portale-canvas: #0f1319;
  --portale-surface: #171d26;
  --portale-surface-2: #1c2330;
  --portale-line: #2a3342;
  --portale-ink-soft: #9aa6b8;
  --portale-ok: #5fd09a;
  --portale-warn: #f0c75e;
  --portale-menu-bg: #0a1522;
  --portale-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --portale-shadow-hover: 0 8px 24px rgba(0, 0, 0, .55);
  --bs-primary: #7db6ef;
  --bs-primary-rgb: 125, 182, 239;
  --bs-link-color: #8fc0f1;
  --bs-link-color-rgb: 143, 192, 241;
  --bs-link-hover-color: #b6d7f6;
  --bs-link-hover-color-rgb: 182, 215, 246;
  --bs-focus-ring-color: rgba(125, 182, 239, .5);
  --bs-body-bg: #0f1319;
  --bs-tertiary-bg: #1c2330;
}

/* ------------------------------------------------------------ base */
body { background: var(--portale-canvas); -webkit-font-smoothing: antialiased; }
h1, .h3 { letter-spacing: -0.02em; font-weight: 700; }
h1.h3 { font-size: 1.6rem; }
h2, .h5 { font-weight: 650; letter-spacing: -0.005em; }
a { text-underline-offset: .18em; }
.icona { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.text-body-secondary { color: var(--portale-ink-soft) !important; }

.salta-al-contenuto { position: absolute; left: .75rem; top: -4rem; z-index: 3000; padding: .55rem .95rem; border-radius: var(--bs-border-radius);
  background: var(--portale-brand); color: var(--portale-brand-ink); text-decoration: none; font-weight: 600; }
.salta-al-contenuto:focus { top: .75rem; color: var(--portale-brand-ink); }
:focus-visible { outline: 3px solid var(--bs-focus-ring-color); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); outline: none; }
main:focus { outline: none; }

/* --------------------------------------------------- struttura con menu */
main { padding: 1.25rem 1rem 3rem; max-width: 1480px; }
body.con-menu main { margin-inline: auto; }
@media (min-width: 992px) {
  body.con-menu main { margin-left: var(--portale-menu-width); margin-right: 0; max-width: none; padding: 2rem 2.25rem 4rem; }
  body.con-menu main > * { max-width: 1320px; }
}

.testata-mobile { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--portale-menu-bg); color: var(--portale-menu-ink-strong); }
.testata-mobile .btn-menu { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: var(--bs-border-radius);
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.testata-mobile .btn-menu:hover { background: var(--portale-menu-hover); }

.marca { display: flex; align-items: center; gap: .7rem; color: var(--portale-menu-ink-strong); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.marca small { display: block; font-weight: 500; font-size: .72rem; color: var(--portale-menu-ink); letter-spacing: .02em; margin-top: -.1rem; }
.marchio { width: 2.1rem; height: 2.1rem; border-radius: .6rem; display: inline-grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #3b8be0, #1d4f82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .25); }

.menu-laterale { background: var(--portale-menu-bg); color: var(--portale-menu-ink); border: 0; }
.menu-laterale .offcanvas-header { padding: .85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.menu-laterale .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.menu-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; padding: 1.1rem .8rem .9rem; gap: 1rem; overflow-y: auto; }
@media (min-width: 992px) {
  body.con-menu .menu-laterale { position: fixed !important; inset: 0 auto 0 0; width: var(--portale-menu-width) !important; height: 100vh !important;
    visibility: visible !important; transform: none !important; background: var(--portale-menu-bg) !important; z-index: 1020; display: flex; flex-direction: column; }
  .menu-corpo { padding: 1.4rem .9rem 1rem; }
}
.menu-corpo > nav { flex: 1; }
.menu-laterale .marca { padding: 0 .5rem .6rem; }
.gruppo { margin: 1.15rem .6rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(197, 211, 227, .55); }
.voci { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.voce { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--bs-border-radius);
  color: var(--portale-menu-ink); text-decoration: none; font-weight: 550; transition: background .15s var(--portale-ease), color .15s var(--portale-ease); }
.voce:hover { background: var(--portale-menu-hover); color: var(--portale-menu-ink-strong); }
.voce.attiva { background: var(--portale-menu-active); color: var(--portale-menu-ink-strong); }
.voce.attiva::before { content: ""; position: absolute; left: -.8rem; top: .5rem; bottom: .5rem; width: .22rem; border-radius: 0 .2rem .2rem 0; background: var(--portale-menu-accent); }
.voce:focus-visible { outline-color: var(--portale-menu-accent); }
@media (pointer: coarse) { .voce { min-height: 2.9rem; } }

.profilo { display: flex; align-items: center; gap: .65rem; padding: .7rem; border-radius: var(--bs-border-radius-lg); background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07); }
.avatar { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
  color: #fff; background: linear-gradient(135deg, #3b8be0, #7a5cd6); text-transform: uppercase; }
.profilo-testo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.profilo-testo strong { color: #fff; font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilo-testo small { color: var(--portale-menu-ink); font-size: .72rem; }
.profilo form { margin: 0; }
.btn-esci { background: transparent; border: 0; color: var(--portale-menu-ink); width: 2.25rem; height: 2.25rem; border-radius: var(--bs-border-radius); display: grid; place-items: center; }
.btn-esci:hover { background: var(--portale-menu-hover); color: #fff; }

/* Logo aziendale: sempre su una piastra chiara, perché ha parti blu scuro e grigie che sul menu scuro non si leggerebbero */
.piastra { display: inline-grid; place-items: center; background: #fff; border-radius: .7rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(16, 24, 40, .06); flex: none; }
.piastra img { display: block; width: auto; }
.piastra-s { width: 2.4rem; height: 2.4rem; border-radius: .6rem; }
.piastra-s img { height: 1.9rem; }
.piastra-m { width: 6.4rem; height: 6.4rem; border-radius: .9rem; }
.piastra-m img { height: 5.2rem; }
.piastra-l { width: 100%; height: 5.6rem; }
.piastra-l img { height: 4.5rem; }
.accesso-marca .piastra-l { width: 6.4rem; height: 6.4rem; border-radius: .9rem; }
.accesso-marca .piastra-l img { height: 5.2rem; }
.marca-grande { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; text-decoration: none; padding: 0 .1rem .4rem; }
.marca-grande .nome-app { color: var(--portale-menu-ink-strong); font-weight: 700; letter-spacing: -0.01em; text-align: center; font-size: 1.02rem; }

/* ------------------------------------------------------------- avvisi */
.avviso { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--portale-line); background: var(--portale-surface); box-shadow: var(--portale-shadow); animation: entra .3s var(--portale-ease) both; }
.avviso .icona { margin-top: .12rem; }
.avviso-success { border-color: rgba(25, 135, 84, .35); background: rgba(25, 135, 84, .08); color: var(--portale-ok); }
.avviso-warning { border-color: rgba(255, 193, 7, .5); background: rgba(255, 193, 7, .12); color: var(--portale-warn); }
.avviso-danger, .avviso-error { border-color: rgba(220, 53, 69, .4); background: rgba(220, 53, 69, .08); color: #b02a37; }
.avviso-info, .avviso-debug { border-color: rgba(47, 123, 196, .35); background: rgba(47, 123, 196, .08); color: var(--portale-brand); }
[data-bs-theme="dark"] .avviso-danger, [data-bs-theme="dark"] .avviso-error { color: #ff8e99; }
.avviso span { color: var(--bs-body-color); }
.alert { border-radius: var(--bs-border-radius-lg); box-shadow: var(--portale-shadow); }

/* ----------------------------------------------------- schede e tabelle */
.card { background: var(--portale-surface); border: 1px solid var(--portale-line); border-radius: var(--bs-border-radius-lg); box-shadow: var(--portale-shadow);
  transition: box-shadow .2s var(--portale-ease), transform .2s var(--portale-ease), border-color .2s; }
a.card:hover, .scheda-budget:hover { box-shadow: var(--portale-shadow-hover); border-color: color-mix(in srgb, var(--portale-brand) 30%, var(--portale-line)); }
.table { --bs-table-bg: transparent; font-variant-numeric: tabular-nums; margin-bottom: 0; }
.table > thead > tr > th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--portale-ink-soft); font-weight: 650;
  background: var(--portale-surface-2); border-bottom: 1px solid var(--portale-line); white-space: nowrap; padding-block: .65rem; }
.table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--portale-line); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .05); }
.table-responsive { border: 1px solid var(--portale-line); border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); box-shadow: var(--portale-shadow); }
.table-responsive > .table > :last-child > tr:last-child > * { border-bottom-width: 0; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--portale-surface-2); --bs-table-color: var(--bs-body-color); }
.table-secondary, .table-secondary > th, .table-secondary > td { --bs-table-bg: color-mix(in srgb, var(--portale-brand) 9%, var(--portale-surface)); --bs-table-color: var(--bs-body-color); }
.table-bordered > :not(caption) > * > * { border-color: var(--portale-line); }

/* Stato dei budget: colore + testo + punto (mai il solo colore) */
.badge { font-weight: 600; }
.badge.stato { letter-spacing: .01em; border: 1px solid transparent; padding: .38em .7em; border-radius: 999px; }
.badge.stato::before { content: ""; display: inline-block; width: .48rem; height: .48rem; border-radius: 50%; margin-right: .4rem; background: currentColor; }
.badge.stato[data-stato="GENERATO"] { background: var(--bs-tertiary-bg); color: var(--portale-ink-soft); border-color: var(--portale-line); }
.badge.stato[data-stato="RILASCIATO"] { background: rgba(13, 110, 253, .12); color: #0b5ed7; border-color: rgba(13, 110, 253, .3); }
.badge.stato[data-stato="CHIUSO"], .badge.stato[data-stato="CERTIFICATO"] { background: rgba(25, 135, 84, .12); color: #146c43; border-color: rgba(25, 135, 84, .3); }
.badge.stato[data-stato="RIAPERTO"] { background: rgba(255, 193, 7, .18); color: #8a6500; border-color: rgba(255, 193, 7, .45); }
.badge.stato[data-stato="TRASFERITO"] { background: rgba(111, 66, 193, .12); color: #59359a; border-color: rgba(111, 66, 193, .3); }
.badge.stato[data-stato="APERTA"] { background: rgba(25, 135, 84, .12); color: #146c43; border-color: rgba(25, 135, 84, .3); }
.badge.stato[data-stato="IN_ESTRAZIONE"], .badge.stato[data-stato="DA_CONFERMARE"] { background: rgba(255, 193, 7, .18); color: #8a6500; border-color: rgba(255, 193, 7, .45); }
.badge.stato[data-stato="ERRORE"] { background: rgba(220, 53, 69, .1); color: #b02a37; border-color: rgba(220, 53, 69, .35); }
[data-bs-theme="dark"] .badge.stato[data-stato="APERTA"] { color: #75d0a1; }
[data-bs-theme="dark"] .badge.stato[data-stato="IN_ESTRAZIONE"], [data-bs-theme="dark"] .badge.stato[data-stato="DA_CONFERMARE"] { color: #f2cf6b; }
[data-bs-theme="dark"] .badge.stato[data-stato="ERRORE"] { color: #ff8e99; }
[data-bs-theme="dark"] .badge.stato[data-stato="RILASCIATO"] { color: #8ab8ff; }
[data-bs-theme="dark"] .badge.stato[data-stato="CHIUSO"], [data-bs-theme="dark"] .badge.stato[data-stato="CERTIFICATO"] { color: #75d0a1; }
[data-bs-theme="dark"] .badge.stato[data-stato="RIAPERTO"] { color: #f2cf6b; }
[data-bs-theme="dark"] .badge.stato[data-stato="TRASFERITO"] { color: #c3a6f0; }

/* ----------------------------------------------- cruscotto: KPI, percorso */
.testata-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.testata-pagina h1 { margin: 0; }
.testata-pagina .sotto { color: var(--portale-ink-soft); margin: .2rem 0 0; }
.kpi-griglia { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 1.25rem; }
.kpi { padding: 1rem 1.15rem; border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); border: 1px solid var(--portale-line); box-shadow: var(--portale-shadow);
  animation: entra .4s var(--portale-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 60ms); }
.kpi .etichetta { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; color: var(--portale-ink-soft); }
.kpi .valore { font-size: 1.85rem; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.kpi .valore small { font-size: .9rem; font-weight: 600; color: var(--portale-ink-soft); letter-spacing: 0; margin-left: .2rem; }
.kpi .nota { font-size: .8rem; color: var(--portale-ink-soft); margin-top: .1rem; }
.delta { display: inline-flex; align-items: center; gap: .25rem; font-weight: 650; font-size: .85rem; padding: .15rem .55rem; border-radius: 999px; }
.delta.su { background: rgba(25, 135, 84, .12); color: var(--portale-ok); }
.delta.giu { background: rgba(220, 53, 69, .1); color: #b02a37; }
.delta.zero { background: var(--bs-tertiary-bg); color: var(--portale-ink-soft); }
[data-bs-theme="dark"] .delta.giu { color: #ff8e99; }

.percorso { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; padding: 0; list-style: none; }
.percorso li { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px; background: var(--portale-surface);
  border: 1px solid var(--portale-line); font-size: .85rem; color: var(--portale-ink-soft); }
.percorso li strong { color: var(--bs-body-color); font-size: .95rem; font-variant-numeric: tabular-nums; }
.percorso li.vuoto-stato { opacity: .55; }

.barra-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .7rem .9rem; margin-bottom: 1rem; border-radius: var(--bs-border-radius-lg);
  background: rgba(var(--bs-primary-rgb), .07); border: 1px solid rgba(var(--bs-primary-rgb), .18); }

/* scheda budget */
.scheda-budget .card-body { padding: 1.1rem 1.2rem; }
.scheda-budget .agente { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.scheda-budget .codice { font-size: .8rem; color: var(--portale-ink-soft); }
.confronto { display: grid; gap: .45rem; margin: 1rem 0 .6rem; }
.confronto .riga-barra { display: grid; grid-template-columns: 5.6rem 1fr auto; align-items: center; gap: .6rem; font-size: .82rem; }
.confronto .riga-barra span:first-child { color: var(--portale-ink-soft); }
.confronto .riga-barra b { font-variant-numeric: tabular-nums; font-weight: 650; }
.traccia { height: .5rem; border-radius: 999px; background: var(--bs-tertiary-bg); overflow: hidden; }
.traccia > i { display: block; height: 100%; border-radius: 999px; width: var(--w, 0%); transition: width .6s var(--portale-ease); }
.traccia .cons { background: #8d9ab0; }
.traccia .prev { background: linear-gradient(90deg, var(--portale-brand-2), var(--portale-brand)); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--portale-ink-soft); margin-top: .5rem; }
.meta b { color: var(--bs-body-color); font-weight: 650; }
.scheda-budget .card-footer { background: transparent; border: 0; padding: 0 1.2rem 1.1rem; }

/* ------------------------------------------------------------- moduli */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--portale-line); background-color: var(--portale-surface); min-height: 2.6rem; border-radius: var(--bs-border-radius); }
.form-control:focus, .form-select:focus { border-color: var(--portale-brand-2); }
.form-text { color: var(--portale-ink-soft); }
.btn { font-weight: 600; border-radius: var(--bs-border-radius); min-height: 2.4rem; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.05rem; }
.btn-primary { --bs-btn-bg: var(--portale-brand); --bs-btn-border-color: var(--portale-brand); --bs-btn-color: var(--portale-brand-ink);
  --bs-btn-hover-bg: #153e68; --bs-btn-hover-border-color: #153e68; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #102f50; --bs-btn-active-border-color: #102f50; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--portale-brand); --bs-btn-disabled-border-color: var(--portale-brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-hover-bg: #a3cdf4; --bs-btn-hover-border-color: #a3cdf4; --bs-btn-hover-color: #0a1a2a;
  --bs-btn-active-bg: #c2defa; --bs-btn-active-border-color: #c2defa; --bs-btn-active-color: #0a1a2a; }
.btn-outline-primary { --bs-btn-color: var(--portale-brand); --bs-btn-border-color: color-mix(in srgb, var(--portale-brand) 55%, transparent);
  --bs-btn-hover-bg: var(--portale-brand); --bs-btn-hover-border-color: var(--portale-brand); --bs-btn-hover-color: var(--portale-brand-ink);
  --bs-btn-active-bg: var(--portale-brand); --bs-btn-active-border-color: var(--portale-brand); --bs-btn-active-color: var(--portale-brand-ink); }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--portale-line); --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--portale-ink-soft); }
.btn-outline-secondary { --bs-btn-border-color: color-mix(in srgb, var(--portale-ink-soft) 45%, var(--portale-line)); }
@media (pointer: coarse) { .btn, .form-control, .form-select { min-height: 2.8rem; } .btn-sm { min-height: 2.6rem; } }

/* ------------------------------------------------------------ accesso */
body.senza-menu main { max-width: none; padding: 0; min-height: 100vh; display: grid; align-items: center; }
body.senza-menu main > .avviso { max-width: 28rem; margin: 1rem auto 0; width: calc(100% - 2rem); }
.accesso { display: grid; grid-template-columns: 1fr; min-height: 100vh; width: 100%; }
@media (min-width: 900px) { .accesso { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.accesso-marca { display: none; position: relative; overflow: hidden; color: #fff; padding: 3.5rem;
  background: radial-gradient(120% 90% at 0% 0%, #2c6cae 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #5b3fa8 0%, transparent 60%), #0e2740; }
@media (min-width: 900px) { .accesso-marca { display: flex; flex-direction: column; justify-content: space-between; } }
.accesso-marca::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 3rem 3rem;
  mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 30% 30%, #000, transparent); }
.accesso-marca > * { position: relative; z-index: 1; }
.accesso-marca h2 { font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 750; max-width: 22rem; }
.accesso-marca p { color: rgba(255, 255, 255, .78); max-width: 24rem; }
.accesso-marca .piede { font-size: .8rem; color: rgba(255, 255, 255, .55); }
.accesso-form { display: grid; align-content: center; justify-items: center; padding: 2rem 1.25rem; }
.accesso-form .contenitore { width: 100%; max-width: 24rem; }
.accesso-form .marchio-piccolo { display: inline-grid; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .accesso-form .marchio-piccolo { display: none; } }
.separatore { display: flex; align-items: center; gap: .75rem; color: var(--portale-ink-soft); font-size: .8rem; margin: 1.1rem 0; }
.separatore::before, .separatore::after { content: ""; flex: 1; height: 1px; background: var(--portale-line); }

/* ----------------------------------------------------------- stati vuoti */
.vuoto { text-align: center; padding: 3rem 1rem; color: var(--portale-ink-soft); background: var(--portale-surface);
  border: 1px dashed var(--portale-line); border-radius: var(--bs-border-radius-lg); }

/* ------------------------------------------------------------- movimento */
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entra { animation: entra .4s var(--portale-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 45ms); }
.min-w-0 { min-width: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------ tabella del budget */
.indietro { margin-bottom: .6rem; }
.indietro a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; color: var(--portale-ink-soft); }
.indietro a:hover { color: var(--portale-brand); }
.guida-lettura { color: var(--portale-ink-soft); font-size: .88rem; margin: -.25rem 0 1rem; max-width: 60rem; }
.guida-compilazione { padding: .85rem 1.1rem; margin-bottom: 1rem; border-radius: var(--bs-border-radius-lg); font-size: .9rem; max-width: 62rem;
  background: rgba(var(--bs-primary-rgb), .07); border: 1px solid rgba(var(--bs-primary-rgb), .2); }
.tabella-budget { max-height: 78vh; overflow: auto; }
.tabella-compila { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; min-width: 62rem; }
.tabella-compila th, .tabella-compila td { vertical-align: middle; border-bottom: 1px solid var(--portale-line); padding: .45rem .7rem; }
.tabella-compila thead th { position: sticky; top: 0; z-index: 3; background: var(--portale-surface-2); text-align: right; border-bottom: 2px solid var(--portale-line); line-height: 1.2; }
.tabella-compila thead th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.tabella-compila thead th.col-cliente { text-align: left; vertical-align: bottom; }
.tabella-compila .col-cliente { position: sticky; left: 0; z-index: 2; min-width: 14rem; max-width: 18rem; background: var(--portale-surface); text-align: left; font-weight: 500; }
.tabella-compila thead .col-cliente { z-index: 4; background: var(--portale-surface-2); }
.tabella-compila .col-num { text-align: right; min-width: 7.2rem; white-space: nowrap; }
.tabella-compila .col-totale { background: color-mix(in srgb, var(--portale-brand) 6%, var(--portale-surface)); border-left: 1px solid var(--portale-line); border-right: 1px solid var(--portale-line); }
.tabella-compila thead .col-totale { background: color-mix(in srgb, var(--portale-brand) 10%, var(--portale-surface-2)); }
.tabella-compila .col-ditutto { padding-left: 1rem; }
.tabella-compila .col-azione { min-width: 4rem; text-align: right; }
.tabella-compila .val { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.tabella-compila .cons { display: block; font-size: .72rem; color: var(--portale-ink-soft); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .1rem; }
.tabella-compila .nome { font-weight: 600; }
.tabella-compila .codice { font-size: .75rem; color: var(--portale-ink-soft); margin-left: .25rem; }
.etichetta-origine { margin-left: .4rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--portale-brand); }
.tabella-compila .riga-societa th { position: sticky; left: 0; background: color-mix(in srgb, var(--portale-brand) 12%, var(--portale-surface)); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 0; }
.tabella-compila .riga-zona th { position: sticky; left: 0; background: var(--portale-surface-2); font-size: .78rem; color: var(--portale-ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.tabella-compila .riga-cliente:hover > * { background-color: color-mix(in srgb, var(--portale-brand) 4%, var(--portale-surface)); }
.tabella-compila .riga-cliente:hover > .col-totale { background-color: color-mix(in srgb, var(--portale-brand) 9%, var(--portale-surface)); }
.tabella-compila .riga-subtotale > *, .tabella-compila .riga-totale-societa > * { background: var(--portale-surface-2); font-weight: 600; }
.tabella-compila .riga-totale-societa > * { background: color-mix(in srgb, var(--portale-brand) 8%, var(--portale-surface)); font-weight: 700; }
.tabella-compila tfoot td, .tabella-compila tfoot th { position: sticky; bottom: 0; z-index: 3; background: color-mix(in srgb, var(--portale-brand) 12%, var(--portale-surface)); font-weight: 700; border-top: 2px solid var(--portale-line); }
.tabella-compila tfoot th.col-cliente { z-index: 4; }

/* campi di compilazione */
.campo-prev, .campo-nome { width: 100%; border: 1px solid var(--portale-line); border-radius: .45rem; background: var(--portale-surface); color: inherit;
  padding: .3rem .5rem; font-variant-numeric: tabular-nums; min-height: 2.2rem; transition: border-color .15s, box-shadow .15s, background-color .3s; }
.campo-prev { text-align: right; font-weight: 650; }
.campo-nome { font-weight: 600; }
.campo-prev:hover, .campo-nome:hover { border-color: color-mix(in srgb, var(--portale-brand) 45%, var(--portale-line)); }
.campo-prev:focus, .campo-nome:focus { outline: none; border-color: var(--portale-brand-2); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.campo-prev.sporco, .campo-nome.sporco { background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .7); }
.campo-prev.appena-salvato, .campo-nome.appena-salvato { background: rgba(25, 135, 84, .12); border-color: rgba(25, 135, 84, .5); }
.campo-prev.non-valido, .campo-nome.non-valido { background: rgba(220, 53, 69, .1); border-color: #dc3545; }
.campo-prev:disabled, .campo-nome:disabled { opacity: .6; }

/* barra con i totali e lo stato del salvataggio */
.barra-compilazione { position: sticky; top: 0; z-index: 1010; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem;
  padding: .7rem 1rem; margin-bottom: 1rem; border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); border: 1px solid var(--portale-line); box-shadow: var(--portale-shadow-hover); }
@media (max-width: 991.98px) { .barra-compilazione { top: 3.75rem; } }
.barra-compilazione .riepilogo { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.barra-compilazione .etichetta { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--portale-ink-soft); font-weight: 650; }
.barra-compilazione strong { font-size: 1.35rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.barra-compilazione strong.soft { color: var(--portale-ink-soft); font-size: 1.1rem; }
.barra-compilazione small { color: var(--portale-ink-soft); }
.barra-compilazione .azioni { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.stato-salvataggio { font-size: .85rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--portale-ink-soft); }
.stato-salvataggio.ok { background: rgba(25, 135, 84, .12); color: var(--portale-ok); }
.stato-salvataggio.attesa { background: rgba(255, 193, 7, .18); color: var(--portale-warn); }
.stato-salvataggio.errore { background: rgba(220, 53, 69, .12); color: #b02a37; }
[data-bs-theme="dark"] .stato-salvataggio.errore { color: #ff8e99; }

.aggiungi > summary { cursor: pointer; font-weight: 650; padding: .55rem .9rem; border: 1px dashed var(--portale-line); border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); width: fit-content; }
.aggiungi[open] > summary { border-style: solid; }
.riepilogo-chiusura th small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Su telefono ogni cliente diventa una scheda: nome in alto, poi le voci a coppie */
@media (max-width: 767.98px) {
  .tabella-budget { max-height: none; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .tabella-compila { min-width: 0; display: block; }
  .tabella-compila thead { display: none; }
  .tabella-compila tbody, .tabella-compila tfoot { display: block; }
  .tabella-compila tr { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; }
  .tabella-compila tr.riga-cliente, .tabella-compila tr.riga-subtotale, .tabella-compila tr.riga-totale-societa, .tabella-compila tr.riga-generale {
    background: var(--portale-surface); border: 1px solid var(--portale-line); border-radius: var(--bs-border-radius-lg); padding: .75rem .85rem; margin-bottom: .7rem; box-shadow: var(--portale-shadow); }
  .tabella-compila tr.riga-societa, .tabella-compila tr.riga-zona { display: block; margin: 1rem 0 .5rem; }
  .tabella-compila tr.riga-societa th, .tabella-compila tr.riga-zona th { display: block; position: static; border: 0; border-radius: .5rem; }
  .tabella-compila td, .tabella-compila th.col-cliente { display: block; border: 0; padding: .25rem 0; background: transparent !important; position: static; text-align: left; min-width: 0; max-width: none; }
  .tabella-compila th.col-cliente { grid-column: 1 / -1; font-size: 1.02rem; padding-bottom: .4rem; }
  .tabella-compila td::before { content: attr(data-label); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--portale-ink-soft); font-weight: 650; margin-bottom: .15rem; }
  .tabella-compila td.col-azione { grid-column: 1 / -1; text-align: right; }
  .tabella-compila td.col-azione::before { content: none; }
  .tabella-compila .col-totale { border: 0; }
  .tabella-compila td.col-num { text-align: left; min-width: 0; }
  .tabella-compila .val, .tabella-compila .cons { text-align: left; }
  .barra-compilazione { padding: .55rem .8rem; gap: .5rem 1rem; }
  .barra-compilazione .riepilogo > div:nth-child(n+2) { display: none; }
  .barra-compilazione strong { font-size: 1.15rem; }
  .barra-compilazione .azioni { gap: .5rem; }
  .barra-compilazione .btn { white-space: nowrap; padding-inline: .7rem; }
  .stato-salvataggio { font-size: .75rem; max-width: 8.5rem; text-align: center; line-height: 1.2; }
  .campo-prev { text-align: left; min-height: 2.75rem; font-size: 1rem; }
  .tabella-compila tfoot td, .tabella-compila tfoot th { position: static; border-top: 0; }
}

/* ------------------------------------------- riapertura e ritardi */
.tabella-compila td.modificata { box-shadow: inset 3px 0 0 #e0a800; background-image: linear-gradient(rgba(255, 193, 7, .14), rgba(255, 193, 7, .14)); }
.campione-modificata { display: inline-block; width: .8rem; height: .8rem; margin-right: .5rem; vertical-align: -0.1rem; border-radius: .2rem; background: rgba(255, 193, 7, .35); box-shadow: inset 3px 0 0 #e0a800; }
.etichetta-origine.nuova-riapertura { color: #8a6500; }
[data-bs-theme="dark"] .etichetta-origine.nuova-riapertura { color: #f2cf6b; }
.in-ritardo { color: #b02a37; font-weight: 650; }
[data-bs-theme="dark"] .in-ritardo { color: #ff8e99; }
.percorso li.in-ritardo-chip { border-color: rgba(220, 53, 69, .45); background: rgba(220, 53, 69, .08); color: #b02a37; }
[data-bs-theme="dark"] .percorso li.in-ritardo-chip { color: #ff8e99; }

/* ------------------------------------- ricerca, filtri, aggiunta clienti, variazione */
[hidden] { display: none !important; }
.filtri-tabella, .filtri-anagrafica { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.filtri-tabella { padding: .6rem .75rem; border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); border: 1px solid var(--portale-line); box-shadow: var(--portale-shadow); }
.filtri-tabella .form-select, .filtri-anagrafica .form-select { width: auto; flex: 0 1 auto; min-width: 9rem; }
.campo-ricerca { position: relative; flex: 1 1 16rem; min-width: 12rem; }
.campo-ricerca .icona { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--portale-ink-soft); pointer-events: none; }
.campo-ricerca .form-control { padding-left: 2.4rem; }
.conteggio-clienti { margin-left: auto; font-size: .85rem; font-weight: 600; color: var(--portale-ink-soft); font-variant-numeric: tabular-nums; }
kbd { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--portale-line); border-bottom-width: 2px; border-radius: .3rem; padding: .05rem .4rem; font-size: .8em; }

.variazione { margin-bottom: .75rem; }
.variazione > summary { cursor: pointer; font-weight: 650; padding: .45rem .8rem; border: 1px dashed var(--portale-line); border-radius: var(--bs-border-radius-lg); background: var(--portale-surface); width: fit-content; }
.variazione[open] > summary { border-style: solid; }

.risultati-anagrafica { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow: auto; border: 1px solid var(--portale-line); border-radius: var(--bs-border-radius); }
.risultati-anagrafica:empty { display: none; }
.risultati-anagrafica li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border-bottom: 1px solid var(--portale-line); }
.risultati-anagrafica li:last-child { border-bottom: 0; }
.risultati-anagrafica li:hover { background: color-mix(in srgb, var(--portale-brand) 5%, var(--portale-surface)); }
.risultati-anagrafica small { display: block; color: var(--portale-ink-soft); }

@keyframes lampeggia { 0%, 100% { box-shadow: inset 4px 0 0 var(--portale-brand-2); } 50% { box-shadow: inset 4px 0 0 var(--portale-brand-2), 0 0 0 3px var(--bs-focus-ring-color); } }
.tabella-compila tr.appena-aggiunta > * { background-color: color-mix(in srgb, var(--portale-brand-2) 14%, var(--portale-surface)) !important; }
.tabella-compila tr.appena-aggiunta { animation: lampeggia 1.2s ease-in-out 2; }
.tabella-compila .riga-cliente { scroll-margin-top: 9rem; }

/* ------------------------------------------------- menu laterale compresso o espanso */
.menu-toggle { place-items: center; width: 2.1rem; height: 2.1rem; margin: 0 0 -.4rem auto; border-radius: var(--bs-border-radius); background: transparent; border: 1px solid rgba(255, 255, 255, .15);
  color: var(--portale-menu-ink); transition: background-color .15s; }
.menu-toggle:hover { background: var(--portale-menu-hover); color: #fff; }
.menu-toggle .icona { transition: transform .2s var(--portale-ease); }
.menu-toggle[aria-expanded="true"] .icona { transform: rotate(180deg); }
@media (min-width: 992px) {
  html[data-menu="compatto"] { --portale-menu-width: 4.9rem; }
  body.con-menu main, body.con-menu .menu-laterale { transition: margin-left .2s var(--portale-ease), width .2s var(--portale-ease); }
  html[data-menu="compatto"] .menu-corpo { padding-inline: .6rem; align-items: stretch; }
  html[data-menu="compatto"] .menu-toggle { margin: 0 auto -.4rem; }
  html[data-menu="compatto"] .voce { justify-content: center; padding-inline: 0; gap: 0; }
  html[data-menu="compatto"] .voce span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }   /* resta per chi usa un lettore di schermo */
  html[data-menu="compatto"] .voce.attiva::before { left: -.6rem; }
  html[data-menu="compatto"] .gruppo { height: 1px; margin: .7rem .4rem; padding: 0; font-size: 0; background: rgba(255, 255, 255, .12); overflow: hidden; }
  html[data-menu="compatto"] .marca-grande { align-items: center; }
  html[data-menu="compatto"] .piastra-l { width: 2.9rem; height: 2.9rem; border-radius: .7rem; }
  html[data-menu="compatto"] .piastra-l img { height: 2.3rem; }
  html[data-menu="compatto"] .marca-grande .nome-app { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  html[data-menu="compatto"] .profilo { flex-direction: column; padding: .55rem .25rem; gap: .35rem; }
  html[data-menu="compatto"] .profilo-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
}

/* ------------------------------------------ cruscotto: incidenza, euro accorpati */
.radice-cruscotto .solo-separato { display: none; }
.radice-cruscotto.vista-separata .solo-separato { display: block; }
.radice-cruscotto.vista-separata .riga-euro.solo-separato { display: grid; }
.kpi .nota .delta { margin-left: .35rem; font-size: .75rem; padding: .05rem .45rem; }
.kpi .nota.solo-separato { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--portale-line); }
.filtri-cruscotto .form-select { min-width: 10rem; }
.incidenza { margin: .9rem 0 .2rem; }
.riga-incidenza { display: flex; align-items: baseline; gap: .5rem; font-size: .82rem; margin-bottom: .3rem; }
.riga-incidenza span { color: var(--portale-ink-soft); }
.riga-incidenza b { font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.riga-incidenza small { margin-left: auto; color: var(--portale-ink-soft); }
.euro-accorpati { margin: .7rem 0 .2rem; padding: .55rem .7rem; border-radius: var(--bs-border-radius); background: var(--portale-surface-2); border: 1px solid var(--portale-line); }
.riga-euro { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; align-items: baseline; font-size: .82rem; }
.riga-euro span { color: var(--portale-ink-soft); }
.riga-euro b { font-variant-numeric: tabular-nums; }
.riga-euro small { grid-column: 1 / -1; color: var(--portale-ink-soft); font-size: .72rem; }
.riga-euro.solo-separato { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--portale-line); }

/* ------------------------------ confronto Kg ed euro, frecce di aumento e diminuzione */
.scheda-budget { container-type: inline-size; }
.confronto-doppio { display: grid; gap: .45rem; margin: .8rem 0 .4rem; }
/* Per ogni gruppo: etichetta centrata a sinistra, poi la colonna delle barre (Kg sopra, euro sotto), quella dei valori e quella delle frecce.
   Le righe si dispongono nella griglia del gruppo (display: contents), cosi' barre, valori e frecce restano allineati. */
.gruppo-conf { display: grid; grid-template-columns: 4.4rem minmax(3rem, 1fr) auto auto; grid-auto-rows: minmax(1.25rem, auto); align-items: center; column-gap: .65rem; row-gap: .2rem; }
.gruppo-conf + .gruppo-conf { padding-top: .45rem; border-top: 1px dashed var(--portale-line); }
.gruppo-conf .et { grid-column: 1; grid-row: span 2; align-self: center; font-size: .78rem; font-weight: 650; color: var(--portale-ink-soft); }
.radice-cruscotto.vista-separata .gruppo-conf .et { grid-row: span 3; }
.gruppo-conf .riga-barra { display: contents; }
.gruppo-conf .valore-riga { text-align: right; font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gruppo-conf .delta-riga { display: flex; justify-content: flex-end; min-width: 3.4rem; }
.gruppo-conf .traccia { height: .45rem; }
@container (max-width: 25rem) {
  .gruppo-conf { grid-template-columns: minmax(2.5rem, 1fr) auto auto; }
  .gruppo-conf .et { grid-column: 1 / -1; grid-row: auto; }
  .radice-cruscotto.vista-separata .gruppo-conf .et { grid-row: auto; }
}
.traccia .cons-eur { background: #a8b9a3; }
.traccia .prev-eur { background: linear-gradient(90deg, #2e9d7a, #1d7a5f); }
[data-bs-theme="dark"] .traccia .cons-eur { background: #6f8a72; }
[data-bs-theme="dark"] .traccia .prev-eur { background: linear-gradient(90deg, #3fbf96, #2e9d7a); }
.radice-cruscotto.vista-separata .accorpati { display: none; }
.radice-cruscotto .gruppo-conf .riga-barra.separati { display: none; }
.radice-cruscotto.vista-separata .gruppo-conf .riga-barra.separati { display: contents; }

.var { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.var.su { background: rgba(25, 135, 84, .13); color: var(--portale-ok); }
.var.giu { background: rgba(220, 53, 69, .11); color: #b02a37; }
.var.zero { background: var(--bs-tertiary-bg); color: var(--portale-ink-soft); }
[data-bs-theme="dark"] .var.giu { color: #ff8e99; }
.kpi .nota .var { margin-left: .35rem; }

.freccia { display: inline-block; min-width: .8rem; font-size: .68rem; font-weight: 700; vertical-align: .05rem; }
.freccia.su { color: var(--portale-ok); }
.freccia.giu { color: #b02a37; }
[data-bs-theme="dark"] .freccia.giu { color: #ff8e99; }

.scheda-budget .codice b { color: var(--bs-body-color); font-weight: 650; }
.scheda-budget .incidenza { margin: .55rem 0 .1rem; }