/* Aspetto 2026-11 (grafica rivista, approvata da Marco il 3/11/2026): si carica DOPO lo stile in linea di base.html e lo ritocca.
   Solo presentazione: nessun nome di campo, rotta o testo funzionale cambia. Token e temi (chiaro/scuro) sono quelli di base.html.
   Indice: 1 sistema comune (pulsanti, badge, centesimi) · 2 riquadri in rilievo (dashboard, camp, stato) · 3 Iscritti · 4 scheda iscritto
           5 Ordini Kit e Pagamenti e ricevute · 6 Login e Stato del sistema · 7 Configurazione Camp */

/* ===== 1. Sistema comune ===== */
/* Pulsanti: un solo raggio (10px). Il primario e' gia' l'inchiostro pieno di base.html; qui il secondario (outline/secondary) e il pericolo. */
:root:is([data-theme], :not([data-theme])) { --pico-border-radius: 10px; }
:is(button, [role="button"], input[type="submit"]):is(.outline, .secondary):not(.contrast) { background: var(--superficie); border: 1px solid var(--linea-2); color: var(--testo); }
:is(button, [role="button"], input[type="submit"]):is(.outline, .secondary):not(.contrast):hover { background: var(--superficie-2); border-color: var(--linea-2); color: var(--testo); }
:is(button, [role="button"], input[type="submit"]).contrast.outline { background: transparent; border: 1px solid var(--pericolo-linea); color: var(--bad-fg); }
:is(button, [role="button"], input[type="submit"]).contrast.outline:hover { background: var(--bad-bg); border-color: var(--pericolo-linea); color: var(--bad-fg); }
:is(button, [role="button"], input[type="submit"]).contrast:not(.outline) { background: var(--bad-forte); border-color: var(--bad-forte); color: #fff; }
:is(button, [role="button"], input[type="submit"]).ghost { background: transparent; border: 1px solid transparent; color: var(--testo-2); }
:is(button, [role="button"], input[type="submit"]).ghost:hover { background: var(--superficie-2); color: var(--testo); }
:is(button, [role="button"], input[type="submit"]).ghost.contrast { color: var(--bad-fg); }
:is(button, [role="button"], input[type="submit"]):focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; box-shadow: none; }
/* Badge: rettangoli arrotondati; il punto compare solo sugli stati (ok, attenzione, errore, sito) */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1; vertical-align: middle; }
.badge:is(.ok, .warn, .bad, .web)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.voce .badge { border-radius: 999px; min-width: 22px; justify-content: center; padding: 0 7px; }
.voce .badge::before { display: none; }
/* Importi: i centesimi piu' piccoli (li avvolge static/js/gestionale.js: nessuna modifica ai numeri) */
.cent { font-size: .68em; font-weight: 600; opacity: .72; margin-left: 1px; }
/* Segnaposto per i testi lunghi: niente parole spezzate a meta' nei campi a colonna stretta */

/* Messaggi di errore dei moduli: oggi sono un paragrafo con il solo colore rosso; stesso aspetto degli avvisi, senza toccare i template */
p[style*="--pico-del-color"] { padding: .7rem .9rem; border-radius: 10px; background: var(--bad-bg); border: 1px solid color-mix(in srgb, var(--bad-forte) 35%, transparent); border-left: 4px solid var(--bad-forte); font-weight: 500; }

/* ===== 2. Riquadri in rilievo ===== */
/* RIQUADRI IN RILIEVO (versione scelta: tema chiaro = «Pieni», tema scuro = «Tinte»).
   Da aggiungere in coda al CSS attuale; nessun altro elemento della pagina cambia.
   Ogni riquadro ha un colore: --tono (vivo: bordo, spessore, icona) e --tono-scuro (fondo dei riquadri pieni, contrasto AA col bianco).
   Le variabili --k-* descrivono l'aspetto del riquadro e cambiano col tema: i selettori sotto non distinguono i due casi. */
.tono-blu    { --tono: #4263EB; --tono-scuro: #3B5BDB; }
.tono-arancio{ --tono: #F08C00; --tono-scuro: #B4540A; }
.tono-teal   { --tono: #12B886; --tono-scuro: #0B7A6E; }
.tono-viola  { --tono: #7950F2; --tono-scuro: #6741D9; }
.tono-verde  { --tono: #40C057; --tono-scuro: #1F7A34; }
.tono-rosa   { --tono: #E64980; --tono-scuro: #C2255C; }

/* tema chiaro: riquadri pieni, testo bianco */
.kpi-grid .stat-card, .indicatori .stat-card, .griglia-economico .stat-card.piatta, .totali-saldi .stat-card, a.scheda-report, .tassello {
  --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono-scuro) 86%, #fff) 0%, var(--tono-scuro) 100%);
  --k-bordo: color-mix(in srgb, var(--tono-scuro) 80%, #000);
  --k-spessore: color-mix(in srgb, var(--tono-scuro) 62%, #000);
  --k-luce: rgba(255, 255, 255, .32); --k-caduta: rgba(18, 28, 45, .26);
  --k-valore: #fff; --k-link: #fff; --k-link-linea: underline; --k-warn: #fff;
  --k-etichetta: rgba(255, 255, 255, .92); --k-secondario: rgba(255, 255, 255, .92);
  --k-chip: rgba(255, 255, 255, .2); --k-icona: #fff; --k-var-fondo: rgba(255, 255, 255, .92);
}
/* tema scuro: riquadri «tinte», fondo sfumato col colore, testo come oggi */
:root[data-theme="dark"] .kpi-grid .stat-card, :root[data-theme="dark"] .indicatori .stat-card, :root[data-theme="dark"] .griglia-economico .stat-card.piatta, :root[data-theme="dark"] .totali-saldi .stat-card, :root[data-theme="dark"] a.scheda-report, :root[data-theme="dark"] .tassello {
  --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono) 20%, var(--superficie)) 0%, color-mix(in srgb, var(--tono) 6%, var(--superficie)) 100%);
  --k-bordo: color-mix(in srgb, var(--tono) 30%, var(--linea));
  --k-spessore: color-mix(in srgb, var(--tono) 30%, #000);
  --k-luce: rgba(255, 255, 255, .09); --k-caduta: rgba(0, 0, 0, .6);
  --k-valore: var(--testo); --k-link: var(--accento); --k-link-linea: none; --k-warn: var(--warn-fg);
  --k-etichetta: color-mix(in srgb, var(--tono) 70%, #fff); --k-secondario: color-mix(in srgb, var(--muted) 70%, var(--testo));
  --k-chip: color-mix(in srgb, var(--tono) 16%, transparent); --k-icona: color-mix(in srgb, var(--tono) 75%, #fff); --k-var-fondo: var(--ok-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi-grid .stat-card, :root:not([data-theme="light"]) .indicatori .stat-card, :root:not([data-theme="light"]) .griglia-economico .stat-card.piatta, :root:not([data-theme="light"]) .totali-saldi .stat-card, :root:not([data-theme="light"]) a.scheda-report, :root:not([data-theme="light"]) .tassello {
    --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono) 20%, var(--superficie)) 0%, color-mix(in srgb, var(--tono) 6%, var(--superficie)) 100%);
    --k-bordo: color-mix(in srgb, var(--tono) 30%, var(--linea));
    --k-spessore: color-mix(in srgb, var(--tono) 30%, #000);
    --k-luce: rgba(255, 255, 255, .09); --k-caduta: rgba(0, 0, 0, .6);
    --k-valore: var(--testo); --k-link: var(--accento); --k-link-linea: none; --k-warn: var(--warn-fg);
    --k-etichetta: color-mix(in srgb, var(--tono) 70%, #fff); --k-secondario: color-mix(in srgb, var(--muted) 70%, var(--testo));
    --k-chip: color-mix(in srgb, var(--tono) 16%, transparent); --k-icona: color-mix(in srgb, var(--tono) 75%, #fff); --k-var-fondo: var(--ok-bg);
  }
}

/* aspetto comune: il rilievo = luce sul bordo alto + spessore pieno sotto (il «bordo» del tassello) + ombra morbida che stacca dalla pagina */
.kpi-grid .stat-card, .indicatori .stat-card, .griglia-economico .stat-card.piatta, .totali-saldi .stat-card, a.scheda-report, .tassello {
  position: relative; border-radius: 16px; margin-bottom: 4px; background: var(--k-fondo); border: 1px solid var(--k-bordo);
  box-shadow: inset 0 1px 0 var(--k-luce), 0 4px 0 var(--k-spessore), 0 14px 22px -10px var(--k-caduta);
}
.stat-card .stat-etichetta { color: var(--k-etichetta); padding-right: 46px; }
.stat-card .kpi-periodo, .stat-card .kpi-sotto, .stat-card .testo-tenue { color: var(--k-secondario); }
.stat-card .stat-valore, .stat-card .kpi-num { color: var(--k-valore); }
.stat-card .valore-warn { color: var(--k-warn); }
.stat-card .kpi-sotto a, .stat-card .elenco-da-fare a { color: var(--k-link); text-decoration: var(--k-link-linea); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--k-link) 55%, transparent); }
.stat-card .var-su, .stat-card .var-giu, .stat-card .var-neutra { background: var(--k-var-fondo); }
.stat-card .var-su { color: var(--ok-fg); } .stat-card .var-giu { color: var(--bad-fg); } .stat-card .var-neutra { color: var(--muted); }
:root[data-theme="dark"] .stat-card .var-su { color: var(--ok-fg); }

/* icona del riquadro: tassello + simbolo, disegnati solo in CSS (nessun markup in piu' a parte la classe del riquadro) */
.kpi-grid .stat-card::before, .indicatori .stat-card::before, .griglia-economico .stat-card::before, .totali-saldi .stat-card::before {
  content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--k-chip);
}
.kpi-grid .stat-card::after, .indicatori .stat-card::after, .griglia-economico .stat-card::after, .totali-saldi .stat-card::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: var(--k-icona);
  -webkit-mask: var(--icona) center / 19px 19px no-repeat; mask: var(--icona) center / 19px 19px no-repeat;
}

/* Telefono e testi lunghi: la griglia non deve allargarsi oltre lo schermo (1fr -> minmax(0,1fr)); i riquadri piu' ricchi di testo occupano tutta la riga */
.kpi-grid-alta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-alta > .stat-card, .indicatori > .stat-card { min-width: 0; }
@media (max-width: 900px) { .kpi-grid-alta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi-grid-alta > .ico-nuove, .kpi-grid-alta > .ico-soldi, .kpi-grid-alta > .ico-partenza { grid-column: span 2; } }

/* Report, Elenchi e riquadri senza colore proprio: stessa famiglia dei riquadri della dashboard.
   I nomi dei toni delle schede report (ok, warn, bad, web) esistevano gia' nei template: qui prendono i colori dei riquadri. */
.tono-ok  { --tono: #12B886; --tono-scuro: #0B7A6E; }
.tono-warn{ --tono: #F08C00; --tono-scuro: #B4540A; }
.tono-bad { --tono: #E5484D; --tono-scuro: #B42323; }
.tono-web { --tono: #4263EB; --tono-scuro: #3B5BDB; }
.tono-rosso { --tono: #E5484D; --tono-scuro: #B42323; }
/* tono di partenza per i riquadri che non ne dichiarano uno (specificita' zero: qualunque «tono-*» lo batte) */
:where(.stat-card, a.scheda-report, .tassello) { --tono: #4263EB; --tono-scuro: #3B5BDB; }
/* senza icona (classe «ico-*») niente tassello */
:is(.kpi-grid, .indicatori, .totali-saldi, .griglia-economico) .stat-card:not([class*="ico-"])::before,
:is(.kpi-grid, .indicatori, .totali-saldi, .griglia-economico) .stat-card:not([class*="ico-"])::after { content: none; }
:is(.kpi-grid, .indicatori, .totali-saldi, .griglia-economico) .stat-card:not([class*="ico-"]) .stat-etichetta { padding-right: 0; }

/* schede dei report e degli elenchi: cliccabili, si sollevano al passaggio e si abbassano al clic */
a.scheda-report { position: relative; min-height: 132px; transition: transform .12s ease, box-shadow .12s ease; }
a.scheda-report:hover { transform: translateY(-2px); text-decoration: none; box-shadow: inset 0 1px 0 var(--k-luce), 0 6px 0 var(--k-spessore), 0 18px 26px -10px var(--k-caduta); }
a.scheda-report:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--k-luce), 0 2px 0 var(--k-spessore), 0 8px 14px -8px var(--k-caduta); }
a.scheda-report strong { color: var(--k-valore); }
a.scheda-report > span:not(.etichetta-report):not(.vai) { color: var(--k-secondario); }
a.scheda-report .etichetta-report { color: var(--k-etichetta); }
a.scheda-report .vai { color: var(--k-link); text-decoration: var(--k-link-linea); text-underline-offset: 3px; }

/* schede di Impostazioni e di Account: riquadri colorati, il pulsante «Apri» resta chiaro */
.tassello h2, .tassello h3 { color: var(--k-valore); }
.tassello p { color: var(--k-secondario); }
.tassello { padding: 1.25rem 1.4rem; }
.griglia-schede > .tassello { margin-bottom: 4px; }
.tassello { padding: 1.1rem 1.15rem; }
.tassello p { overflow-wrap: break-word; }

.ico-nuove { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM19 8v6M22 11h-6'/%3E%3C/svg%3E"); }
.ico-fare { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.ico-attive { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 20v-2a4 4 0 0 0-3-3.9M16 2.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.ico-occupazione { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
.ico-soldi { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V8H6a2 2 0 0 1 0-4h12v4M4 6v12a2 2 0 0 0 2 2h14v-4M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E"); }
.ico-partenza { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/%3E%3C/svg%3E"); }
.ico-riconferme { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 1l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.ico-sconto { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8zM7 7h.01'/%3E%3C/svg%3E"); }
.ico-incassato { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ico-daincassare { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2'/%3E%3C/svg%3E"); }
.ico-pratiche { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6'/%3E%3C/svg%3E"); }

.ico-cpu { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM9 9h6v6H9z'/%3E%3C/svg%3E"); }
.ico-ram { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM7 11v2M11 11v2M15 11v2M19 11v2M6 17v3M10 17v3M14 17v3M18 17v3'/%3E%3C/svg%3E"); }
.ico-disco { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12H2M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01'/%3E%3C/svg%3E"); }
.ico-db { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8c4.97 0 9-1.34 9-3s-4.03-3-9-3-9 1.34-9 3 4.03 3 9 3zM21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E"); }

/* ===== 3. Iscritti ===== */
/* ===== Iscritti: filtri senza testo troncato, riepilogo, scorciatoie, riquadri dei camp ===== */
.filtri-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; margin: 0 0 14px; }
.filtri-griglia select { margin: 0; text-overflow: ellipsis; }
.riepilogo-landing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin: 4px 0 14px; }
.riepilogo-landing .voce-num { display: flex; align-items: baseline; gap: 8px; color: var(--muted); }
.riepilogo-landing .voce-num strong { font-size: 1.9rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--testo); }
.riepilogo-landing .stagione-nota { color: var(--muted); font-size: var(--testo-piccolo); }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.scorciatoie a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--linea-2); border-radius: 999px; background: var(--superficie); color: var(--testo-2); font-weight: 600; font-size: 13.5px; }
.scorciatoie a:hover { background: var(--superficie-2); text-decoration: none; color: var(--testo); }
.titolo-camp-sezione { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.titolo-camp-sezione h2 { margin: 0; }
.titolo-camp-sezione span { color: var(--muted); font-size: var(--testo-piccolo); }

/* riquadri dei camp: stesso linguaggio dei riquadri della dashboard (tono + rilievo), cliccabili */
.schede-camp { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 16px; margin: 0 0 1.5rem; }
.schede-camp .scheda-camp {
  --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono-scuro) 86%, #fff) 0%, var(--tono-scuro) 100%);
  --k-bordo: color-mix(in srgb, var(--tono-scuro) 80%, #000); --k-spessore: color-mix(in srgb, var(--tono-scuro) 62%, #000);
  --k-luce: rgba(255, 255, 255, .32); --k-caduta: rgba(18, 28, 45, .26);
  --k-valore: #fff; --k-secondario: rgba(255, 255, 255, .92); --k-chip: rgba(255, 255, 255, .2); --k-icona: #fff;
  --k-traccia: rgba(255, 255, 255, .28); --k-riempi: #fff; --k-etichetta-bg: rgba(255, 255, 255, .92); --k-etichetta-fg: var(--tono-scuro);
}
:root[data-theme="dark"] .schede-camp .scheda-camp {
  --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono) 20%, var(--superficie)) 0%, color-mix(in srgb, var(--tono) 6%, var(--superficie)) 100%);
  --k-bordo: color-mix(in srgb, var(--tono) 30%, var(--linea)); --k-spessore: color-mix(in srgb, var(--tono) 30%, #000);
  --k-luce: rgba(255, 255, 255, .09); --k-caduta: rgba(0, 0, 0, .6);
  --k-valore: var(--testo); --k-secondario: color-mix(in srgb, var(--muted) 70%, var(--testo)); --k-chip: color-mix(in srgb, var(--tono) 16%, transparent); --k-icona: color-mix(in srgb, var(--tono) 75%, #fff);
  --k-traccia: color-mix(in srgb, var(--tono) 18%, transparent); --k-riempi: var(--tono); --k-etichetta-bg: color-mix(in srgb, var(--tono) 18%, transparent); --k-etichetta-fg: color-mix(in srgb, var(--tono) 70%, #fff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .schede-camp .scheda-camp {
    --k-fondo: linear-gradient(160deg, color-mix(in srgb, var(--tono) 20%, var(--superficie)) 0%, color-mix(in srgb, var(--tono) 6%, var(--superficie)) 100%);
    --k-bordo: color-mix(in srgb, var(--tono) 30%, var(--linea)); --k-spessore: color-mix(in srgb, var(--tono) 30%, #000);
    --k-luce: rgba(255, 255, 255, .09); --k-caduta: rgba(0, 0, 0, .6);
    --k-valore: var(--testo); --k-secondario: color-mix(in srgb, var(--muted) 70%, var(--testo)); --k-chip: color-mix(in srgb, var(--tono) 16%, transparent); --k-icona: color-mix(in srgb, var(--tono) 75%, #fff);
    --k-traccia: color-mix(in srgb, var(--tono) 18%, transparent); --k-riempi: var(--tono); --k-etichetta-bg: color-mix(in srgb, var(--tono) 18%, transparent); --k-etichetta-fg: color-mix(in srgb, var(--tono) 70%, #fff);
  }
}
.schede-camp .scheda-camp {
  --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 142px; padding: 18px 20px 18px; border-radius: 16px; margin-bottom: 4px;
  background: var(--k-fondo); border: 1px solid var(--k-bordo); color: var(--k-valore); text-decoration: none;
  box-shadow: inset 0 1px 0 var(--k-luce), 0 4px 0 var(--k-spessore), 0 14px 22px -10px var(--k-caduta);
  transition: transform .12s ease, box-shadow .12s ease;
}
.schede-camp .scheda-camp:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--k-luce), 0 6px 0 var(--k-spessore), 0 18px 26px -10px var(--k-caduta); text-decoration: none; background: var(--k-fondo); }
.schede-camp .scheda-camp:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--k-luce), 0 2px 0 var(--k-spessore), 0 8px 14px -8px var(--k-caduta); }
.schede-camp .scheda-camp::before { content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; background: var(--k-chip); }
.schede-camp .scheda-camp::after { content: ""; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: var(--k-icona); -webkit-mask: var(--icona) center / 20px 20px no-repeat; mask: var(--icona) center / 20px 20px no-repeat; }
.schede-camp .scheda-camp strong { color: var(--k-valore); font-size: 1.05rem; padding-right: 44px; line-height: 1.3; }
.schede-camp .scheda-camp .n-iscritti { display: flex; align-items: baseline; gap: 7px; color: var(--k-secondario); font-size: var(--testo-piccolo); }
.schede-camp .scheda-camp .n-iscritti b { font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--k-valore); }
.schede-camp .scheda-camp .barretta { margin: 8px 0 0; background: var(--k-traccia); height: 8px; }
.schede-camp .scheda-camp .barretta span { background: var(--k-riempi); }
.schede-camp .scheda-camp small { color: var(--k-secondario); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.schede-camp .scheda-camp .stato-posti { padding: 1px 8px; border-radius: 6px; background: var(--k-etichetta-bg); color: var(--k-etichetta-fg); font-weight: 700; font-size: 12px; }
.schede-camp .scheda-camp.senza-posti { min-height: 112px; }

/* ===== Elenco: barra degli strumenti e tabella nella scheda ===== */
.elenco-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.elenco-testa .conteggio { color: var(--muted); font-size: var(--testo-piccolo); }
.elenco-testa .gruppo-azioni { margin: 0; }
.tabella-card table.striped td, .tabella-card table.striped th { padding: .75rem 1rem; }
.tabella-card table.striped tbody tr:hover td { background: var(--superficie-2); }
.tabella-card .piede-tabella { padding: 12px 16px; border-top: 1px solid var(--linea); color: var(--muted); font-size: var(--testo-piccolo); }
.link-azzera { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; font-size: 13.5px; font-weight: 600; }

@media (max-width: 600px) { .filtri-griglia { grid-template-columns: 1fr 1fr; gap: 8px; } .filtri-griglia select { font-size: 14px; padding-left: .6rem; } }

/* ===== 4. Scheda iscritto ===== */
/* Tutto sotto .scheda-n (la scheda iscritto): nessun'altra pagina cambia. */
.scheda-n { --superficie-3: color-mix(in srgb, var(--superficie-2) 45%, var(--superficie)); }
.scheda-n .testata-scheda { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin: 0 0 22px; }
.scheda-n .persona { display: flex; gap: 18px; align-items: center; min-width: 0; }
.scheda-n .persona .avatar { width: 64px; height: 64px; font-size: 20px; background: color-mix(in srgb, var(--accento) 14%, var(--superficie)); color: var(--accento); }
.scheda-n .persona h1 { margin: 0 0 4px; }
.scheda-n .persona .nota { margin: 0 0 8px; color: var(--muted); font-size: var(--testo-piccolo); }
.scheda-n .badge-riga { display: flex; flex-wrap: wrap; gap: 8px; }
.scheda-n .azioni-scheda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scheda-n .azioni-scheda > *, .scheda-n .azioni-scheda form { margin: 0; }
.scheda-n .azioni-scheda details.azione-archivia[open] { flex-basis: 100%; }
.scheda-n .filtro-stagione-scheda label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--testo-2); }
.scheda-n .filtro-stagione-scheda select { margin: 0; width: auto; min-width: 160px; }

/* due colonne: iscrizioni e salute a sinistra, anagrafica, kit e consensi a destra */
.scheda-n .griglia-sc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.scheda-n .colonna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.scheda-n article { margin: 0; padding: 1.25rem 1.4rem 1.3rem; border-radius: 14px; box-shadow: none; }
.scheda-n article > h2 { margin: 0 0 14px; font-size: 17px; }
.scheda-n article > h3 { margin: 18px 0 10px; font-size: 15px; }
.scheda-n > article { margin-bottom: 18px; }

/* anagrafica: ogni gruppo e' una scheda a se' (l'HTML resta quello di prima: lo leggono i test) */
.scheda-n .dati-anagrafici { display: contents; }
.scheda-n .gruppo-dati { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 1.1rem 1.4rem .5rem; margin: 0; }
.scheda-n .gruppo-dati:first-child { padding-top: 1.1rem; border-top: 1px solid var(--linea); }
.scheda-n .gruppo-dati h3 { margin: 0 0 8px; font-size: 17px; }
.scheda-n .gruppo-dati > div { padding: 9px 0; border-top: 1px solid var(--linea); overflow-wrap: break-word; font-weight: 500; }
.scheda-n .gruppo-dati > h3 + div { border-top: 0; padding-top: 2px; }
.scheda-n .dati-anagrafici small { display: inline-block; margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.scheda-n .colonna > .dati-anagrafici > .gruppo-dati:nth-last-child(2) { order: 4; }
.scheda-n .colonna > article { order: 5; }
.scheda-n .colonna > .dati-anagrafici > .gruppo-dati:last-child { order: 6; }
.scheda-n .colonna > p.testo-tenue { order: 7; margin: 0; }

/* iscrizioni ai camp: cifre con i filetti e barra delle azioni in fondo */
.scheda-n .elenco-iscrizioni { gap: 14px; margin-bottom: 1rem; }
.scheda-n .riga-iscrizione { padding: 0; gap: 0; overflow: hidden; border-radius: 12px; }
.scheda-n .iscr-testa { padding: 18px 20px 16px; }
.scheda-n .iscr-nome strong { font-size: 17px; }
.scheda-n .iscr-cifre { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; align-content: flex-start; }
.scheda-n .iscr-cifre > div { padding: 0 22px; border-left: 1px solid var(--linea); gap: 2px; }
.scheda-n .iscr-cifre > div:first-child { border-left: 0; padding-left: 0; }
.scheda-n .iscr-cifre dt { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.scheda-n .iscr-cifre dd { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.scheda-n .iscr-cifre .num { font-family: inherit; }
.scheda-n .iscr-azioni { margin: 0; padding: 12px 20px; background: var(--superficie-3); border-top: 1px solid var(--linea); }
.scheda-n .iscr-azioni .gruppo-azioni { align-items: center; }

/* salute: filo rosa in alto, frase di sintesi e righe «Sì» evidenziate */
.scheda-n article.salute-iscritto { border-top: 4px solid #E64980; }
.scheda-n .sintesi-salute { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-weight: 600; background: var(--warn-bg); color: var(--warn-fg); border: 1px solid color-mix(in srgb, var(--warn-forte) 35%, transparent); border-left: 4px solid var(--warn-forte); }
.scheda-n .sintesi-salute svg { flex: none; }
.scheda-n .salute-iscritto table tr.riga-si td { background: color-mix(in srgb, var(--warn-bg) 55%, var(--superficie)); }
.scheda-n .salute-iscritto table tr.riga-si td.scheda-titolo { color: var(--warn-fg); font-weight: 700; }

@media (max-width: 1100px) { .scheda-n .griglia-sc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .scheda-n .persona .avatar { width: 48px; height: 48px; font-size: 16px; }
  .scheda-n .iscr-cifre { width: 100%; } .scheda-n .iscr-cifre > div { padding: 0 12px; flex: 1; } .scheda-n .iscr-cifre dd { font-size: 16px; }
}

/* ===== 5. Ordini Kit e Pagamenti e ricevute ===== */
/* Ordini Kit e Pagamenti e ricevute: solo cio' che serve oltre al sistema comune. */
/* --- Ordini Kit --- */
.filtri-kit { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-top: 1rem; }
.filtri-kit label { flex: 1 1 150px; font-weight: 600; font-size: 13.5px; color: var(--testo-2); }
.filtri-kit input, .filtri-kit select { font-weight: 400; }
.conteggio-kit { margin: 0 0 12px; color: var(--muted); font-size: var(--testo-piccolo); }
.conteggio-kit a { margin-left: 4px; font-weight: 600; }
table.kit td, table.kit th { vertical-align: middle; padding: 0.55rem 0.6rem; }
table.kit td[data-label="Camp"] { min-width: 10.5rem; }
table.kit td[data-label="Note kit"] { min-width: 8rem; }
table.kit td[data-eta] { white-space: nowrap; }
table.kit form { margin: 0; }
table.kit button { margin: 0; min-width: 4rem; }
.campo-nota { position: relative; display: block; }
.campo-nota input { margin: 0; min-width: 7rem; padding-right: 2rem; height: 38px; }
table.kit tr[data-riga-camp] td:first-child { padding-left: 1.5rem; color: var(--muted); }
table.kit tr[data-riga-ragazzo]:has(+ tr[data-riga-camp]) td { background: color-mix(in srgb, var(--superficie-2) 55%, var(--superficie)); }
/* Ordinato / Processato: «Sì» e' verde con la spunta (colore + segno + parola), «No» resta neutro */
table.kit td[data-label="Ordinato"] button:not(.outline):not(.secondary):not(.contrast), table.kit td[data-label="Processato"] button:not(.outline):not(.secondary):not(.contrast) { background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok-forte) 40%, transparent); color: var(--ok-fg); }
table.kit td[data-label="Ordinato"] button:not(.outline):not(.secondary):not(.contrast):hover, table.kit td[data-label="Processato"] button:not(.outline):not(.secondary):not(.contrast):hover { background: color-mix(in srgb, var(--ok-bg) 70%, var(--ok-forte)); color: var(--ok-fg); border-color: var(--ok-forte); }
table.kit td button:not(.outline)::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
table.kit td[data-label="Peso"], table.kit td[data-label="Altezza"] { white-space: nowrap; }
table.kit .non-indicato { color: var(--muted); }

/* --- Pagamenti e ricevute --- */
.tabella-ricevute .num { font-weight: 700; }
.tabella-ricevute td.importo { text-align: right; white-space: nowrap; font-weight: 700; font-size: 1.02rem; }
.tabella-ricevute th.importo { text-align: right; }
.tabella-ricevute .stato-invio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tabella-ricevute .stato-invio small { color: var(--muted); }
.tabella-ricevute .gruppo-azioni button, .tabella-ricevute .gruppo-azioni [role="button"] { min-height: 34px; }
.barra-strumenti-r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 1.25rem; }
.barra-strumenti-r > * { margin: 0; }
.ricerca-tabella input[type="search"] { height: 40px; }
@media (max-width: 760px) { table.kit .solo-telefono { display: block; font-weight: 700; } }

/* ---- tabella piu' compatta: a 1280 px deve stare tutta nella scheda (a 1024 scorre di lato dentro la scheda) ---- */
table.kit td, table.kit th { padding: 0.55rem 0.5rem; }
table.kit th { white-space: nowrap; }
table.kit td[data-label="Camp"] { min-width: 8.5rem; }
table.kit td[data-label="Note kit"] { min-width: 6.5rem; }
.campo-nota input { min-width: 6rem; }
table.kit button { min-width: 3.4rem; padding: 0 .6rem; }
@media (min-width: 761px) { table.kit td:first-child, table.kit th:first-child { padding-left: 1rem; } table.kit td:last-child, table.kit th:last-child { padding-right: 1rem; } }
table.kit td[data-label="Camp"] { min-width: 8rem; }
.campo-nota input { min-width: 5.5rem; }

/* stato dell'invio: il testo di sempre, in un'etichetta (verde inviata, rossa non riuscita, grigia non ancora inviata) */
.stato-invio-testo { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 1.25; background: var(--superficie-2); color: var(--testo-2); width: fit-content; }
.stato-invio-testo.ok { background: var(--ok-bg); color: var(--ok-fg); }
.stato-invio-testo.bad { background: var(--bad-bg); color: var(--bad-fg); }
.stato-invio-testo.ok::before, .stato-invio-testo.bad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }

/* i pulsanti Si'/No delle tabelle: Pico li rimpicciolisce dentro le tabelle (26px); qui tornano a 36px, leggibili e facili da toccare */
table.kit button { min-height: 36px; padding: 0 .8rem; font-size: 14px; }

/* ===== 6. Login e Stato del sistema ===== */
/* ===== Login ===== */
.pagina-anonima { justify-content: flex-start; padding-top: 12vh; }
.pagina-anonima .marchio-logo { width: 44px; height: 44px; font-size: 14px; border-radius: 12px; }
.pagina-anonima .marchio-testo strong { font-size: 17px; }
.pagina-anonima .marchio { margin-bottom: 26px; }
.accesso { width: 100%; padding: 28px 28px 24px; border-radius: 16px; border-top: 4px solid var(--accento); }
.accesso h1 { margin: 0 0 18px; font-size: 1.65rem; }
.accesso label { font-weight: 600; font-size: 14px; color: var(--testo-2); }
.accesso input { margin-bottom: 1rem; }
.accesso button[type="submit"] { width: 100%; margin: .4rem 0 0; min-height: 44px; font-size: 15.5px; }
.accesso .aiuto-link { margin: 18px 0 0; text-align: center; font-size: 14px; }
.accesso .campo-password { margin-bottom: 1rem; }
.accesso .campo-password input { margin-bottom: 0; }
.accesso .avviso { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; border: 1px solid; border-left-width: 4px; margin: 0 0 18px; font-size: 14px; }
.accesso .avviso svg { flex: none; margin-top: 2px; }
.accesso .avviso.errore { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad-forte) 35%, transparent); border-left-color: var(--bad-forte); color: var(--bad-fg); }
.accesso .avviso.info { background: var(--superficie-2); border-color: var(--linea); border-left-color: var(--accento); color: var(--testo-2); }
.accesso input[aria-invalid="true"] { border-color: var(--bad-forte); }

/* ===== Stato del sistema ===== */
.tono-rosso { --tono: #E5484D; --tono-scuro: #B42323; }
.stato-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; margin: 0 0 18px; border-radius: 14px; border: 1px solid; border-left-width: 5px; }
.stato-banner.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok-forte) 38%, transparent); border-left-color: var(--ok-forte); color: var(--ok-fg); }
.stato-banner.bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad-forte) 38%, transparent); border-left-color: var(--bad-forte); color: var(--bad-fg); }
.stato-banner strong { font-size: 1.1rem; }
.stato-banner span { color: inherit; opacity: .9; font-size: var(--testo-piccolo); }
.stato-banner svg { flex: none; }
.azioni-testata { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.azioni-testata > * { margin: 0; }

/* i quattro riquadri delle risorse: il colore e' lo STATO (verde ok, arancio attenzione, rosso problema), sempre con la parola */
.stat-grid.stato-tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stato-tessere .stat-card { min-width: 0; }
.stato-tessere .stat-valore { line-height: 1.1; }
.stato-tessere .parola { font-size: 12.5px; font-weight: 700; padding: 1px 9px; border-radius: 6px; width: fit-content; background: var(--k-etichetta-bg, rgba(255,255,255,.92)); color: var(--k-etichetta-fg, var(--tono-scuro)); }
.stato-tessere .stat-card { --k-traccia: rgba(255, 255, 255, .3); --k-riempi: #fff; --k-etichetta-bg: rgba(255, 255, 255, .92); --k-etichetta-fg: var(--tono-scuro); }
:root[data-theme="dark"] .stato-tessere .stat-card { --k-traccia: color-mix(in srgb, var(--tono) 18%, transparent); --k-riempi: var(--tono); --k-etichetta-bg: color-mix(in srgb, var(--tono) 18%, transparent); --k-etichetta-fg: color-mix(in srgb, var(--tono) 70%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stato-tessere .stat-card { --k-traccia: color-mix(in srgb, var(--tono) 18%, transparent); --k-riempi: var(--tono); --k-etichetta-bg: color-mix(in srgb, var(--tono) 18%, transparent); --k-etichetta-fg: color-mix(in srgb, var(--tono) 70%, #fff); } }
.barra-tessera { height: 8px; border-radius: 4px; background: var(--k-traccia); overflow: hidden; margin: 6px 0 2px; }
.barra-tessera i { display: block; height: 100%; border-radius: 4px; background: var(--k-riempi); }

.stato-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.righe-stato { list-style: none; margin: 0; padding: 0; }
.righe-stato li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--linea); margin: 0; }
.righe-stato li:first-child { border-top: 0; padding-top: 2px; }
.righe-stato .et { color: var(--muted); }
.righe-stato .val { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 600; }
.righe-stato .val small { color: var(--muted); font-weight: 400; font-size: var(--testo-piccolo); }
.nota-pannello { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--muted); font-size: var(--testo-piccolo); }
.pannello .corpo-pannello .nota-pannello:first-child { margin-top: 0; }

/* barra delle email: la barra nativa <progress> ripulita (verde, gialla dall'80%, rossa al limite) */
progress { appearance: none; -webkit-appearance: none; width: 100%; max-width: 220px; height: 10px; border: 0; border-radius: 5px; background: var(--superficie-2); overflow: hidden; vertical-align: middle; margin: 0; }
progress::-webkit-progress-bar { background: var(--superficie-2); border-radius: 5px; }
progress::-webkit-progress-value { border-radius: 5px; background: var(--ok-forte); }
progress::-moz-progress-bar { border-radius: 5px; background: var(--ok-forte); }
progress.barra-warn::-webkit-progress-value { background: var(--warn-forte); } progress.barra-warn::-moz-progress-bar { background: var(--warn-forte); }
progress.barra-bad::-webkit-progress-value { background: var(--bad-forte); } progress.barra-bad::-moz-progress-bar { background: var(--bad-forte); }

.conteggi-doc { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.conteggi-doc .badge { font-weight: 600; }
.tabella-card.piena { margin: 0; }
.costi th, .costi td { white-space: nowrap; }
.costi td.imp, .costi th.imp { text-align: right; }
/* 4/11/2026: la colonna «Mese in corso» si distingue da «Mese scorso» (Marco l'aveva scambiata): grassetto e un velo di sfondo */
.costi th.mese-corrente, .costi td.mese-corrente { font-weight: 700; background: color-mix(in srgb, currentColor 7%, transparent); }
.costi tr.costo-servizio td { font-size: .9em; color: var(--muted); }
.costi tr.costo-servizio td:first-child { padding-left: 1.6rem; }
@media (max-width: 1100px) { .stat-grid.stato-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stato-griglia { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .righe-stato li { grid-template-columns: minmax(0, 1fr); } .accesso { padding: 22px 20px 20px; } .pagina-anonima { padding-top: 8vh; } }


.nota-sotto-tessere { margin: -4px 0 18px; padding: 0; border: 0; }
.titolo-bloccati { margin: 18px 0 8px; font-size: 15px; }
.righe-stato li.riga-intera .val { grid-column: 1 / -1; }

/* ===== 7. Configurazione Camp ===== */
/* CONFIGURAZIONE CAMP - solo cio' che serve oltre al sistema comune. */

/* sottomenu a schede: la scheda attiva ha la linea blu sotto, il resto resta com'e' */
nav.subnav-config { margin: 0 0 1.4rem; padding-bottom: 0; border-bottom: 1px solid var(--linea); }
nav.subnav-config ul { gap: 2px; }
nav.subnav-config a { position: relative; min-height: 42px; border-radius: 8px 8px 0 0; padding: 0 16px; font-size: 14px; }
nav.subnav-config a.attivo { background: none; color: var(--testo); font-weight: 700; }
nav.subnav-config a.attivo::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accento); }

/* intestazione unica per tutte le pagine dell'area: «Configurazione Camp» sopra, titolo, stagione a destra */
.intestazione-pagina .filtro-stagione { margin: 0; }
.barra-config { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.1rem; }
.barra-config > * { margin: 0; }
.barra-config .spazio { margin-left: auto; }

/* tabelle di gestione */
.tabella-card table.striped td, .tabella-card table.striped th { padding: .75rem 1rem; }
.tabella-card table.striped td.destra, .tabella-card table.striped th.destra { text-align: right; }
.tabella-card table.striped td.azioni { white-space: nowrap; }
.tabella-card table.striped td.azioni .gruppo-azioni { justify-content: flex-end; flex-wrap: nowrap; }
.tabella-card table.striped td.nome-riga { font-weight: 700; }
.tabella-card table.striped tbody tr:hover td { background: var(--superficie-2); }
.camp-sotto { display: block; color: var(--muted); font-size: var(--testo-piccolo); font-weight: 400; margin-top: 2px; }
.camp-sotto.avviso { color: var(--warn-fg); }
.codice-sito { font-family: var(--mono); font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; color: var(--testo-2); background: var(--superficie-2); padding: 2px 7px; border-radius: 6px; }
.codice-promo { font-family: var(--mono); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; background: var(--superficie-2); padding: 3px 9px; border-radius: 6px; }
.periodo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.periodo .freccia { color: var(--tenue); }
.periodo .durata { color: var(--muted); font-size: var(--testo-piccolo); }
td .barretta-promo { width: 110px; height: 7px; margin: 5px 0 0; }

/* introduzioni e riquadro «come nasce l'id» */
.introduzione { margin: 0 0 1.1rem; }
details.sezione-apribile { margin: 0 0 1.25rem; }
details.sezione-apribile > summary { padding: 14px 20px; }
details.sezione-apribile > summary strong { font-size: 15px; }

/* sconto fratelli: un pannello con il modulo su una riga */
.sconto-fratelli { margin: 0 0 1.4rem; padding: 1.25rem 1.4rem 1.2rem; }
.sconto-fratelli h2 { margin: 0 0 2px; font-size: 17px; }
.sconto-fratelli > p { margin: 0 0 14px; color: var(--muted); font-size: var(--testo-piccolo); max-width: 70ch; }
.sconto-fratelli form { margin: 0; }
.riga-sconto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.riga-sconto > * { margin: 0; }
.riga-sconto label { font-weight: 600; font-size: 13.5px; color: var(--testo-2); min-width: 160px; }
.riga-sconto label input, .riga-sconto label select { margin: 6px 0 0; }
.riga-sconto fieldset.segmentato { margin: 0; align-self: flex-end; }
.riga-sconto .segmentato legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sconto-fratelli .esempio { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); color: var(--muted); font-size: var(--testo-piccolo); }
.sconto-fratelli .esempio strong { color: var(--testo); }

/* modulo del camp */
main.container > form[method="post"][style*="max-width"], main.container > form.modulo-largo { padding: 1.5rem 1.6rem 1.3rem; margin: 0 0 1.25rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; }
main.container > form[method="post"] > label, main.container > form[method="post"] .grid label { font-weight: 600; font-size: 14px; color: var(--testo-2); }


main.container > form[method="post"] .campo-bloccato select, main.container > form[method="post"] .campo-bloccato input { background: var(--superficie-2); color: var(--muted); }
main.container > form[method="post"] .pulsanti-modulo { margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
.badge-riga-campo { display: inline-flex; margin-left: 6px; vertical-align: middle; }

@media (max-width: 760px) {
  .tabella-card table.striped td.azioni .gruppo-azioni { flex-wrap: wrap; justify-content: flex-start; }
  .periodo .freccia { display: none; }
}

/* ---- correzioni dopo il primo controllo ---- */
.tabella-card table.striped td, .tabella-card table.striped th { padding: .75rem .7rem; }
.tabella-card table.striped td:first-child, .tabella-card table.striped th:first-child { padding-left: 1rem; }
.tabella-card table.striped td:last-child, .tabella-card table.striped th:last-child { padding-right: 1rem; }
.codice-sito { overflow-wrap: normal; word-break: normal; display: inline-block; max-width: 12.5rem; }
.tabella-offerte td[data-label="Id sul sito"] { min-width: 11rem; }
.tabella-offerte td[data-label="Sessione"] { min-width: 7.5rem; }
.tabella-promo td[data-label="Dove vale"] { min-width: 10rem; }
.tabella-promo td[data-label="Scadenza"] { white-space: normal; max-width: 6.5rem; }
.riga-sconto label { flex: 0 0 150px; min-width: 0; }
.riga-sconto label:has(select) { flex-basis: 230px; }
.riga-sconto button { align-self: flex-end; }
.tabella-offerte td[data-label="Id sul sito"] { min-width: 10rem; }
.tabella-offerte .codice-sito { max-width: 11.5rem; font-size: 12px; }
.tabella-promo td[data-label="Scadenza"] { max-width: 8rem; min-width: 6.5rem; }
@media (max-width: 760px) { .tabella-card table.striped td.destra { text-align: left; } .tabella-promo td[data-label="Scadenza"] { max-width: none; } }

/* avviso «gia' pubblicato sul sito» del form del camp */
.avviso-blocco { display: block; padding: 12px 16px; margin: 0 0 1.25rem; border: 1px solid var(--linea); border-left: 4px solid var(--accento); border-radius: 10px; background: var(--superficie); color: var(--testo-2); max-width: 760px; font-size: 14.5px; }

/* pulsanti d'azione di riga, piccoli (anche dove il template non porta la classe «piccolo») */
.tabella-card td.actions :is(button, [role="button"]) { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; margin: 0; }
.tabella-card td.actions { white-space: nowrap; }
.tabella-card td.actions form { margin: 0; }

/* Codici sconto: i due pulsanti d'azione stanno in fila alla loro larghezza (la base li metteva in due colonne fisse di 17rem, troppo larghe per la scheda) */
@media (min-width: 761px) { .azioni-promo { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; } .azioni-promo [role="button"], .azioni-promo button { width: auto; } }

/* ===== Pagamenti da sollecitare: email di oggi e promemoria (10/11/2026) ===== */
.cifre-email { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0 0 14px; }
.cifre-email .cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie-2); min-width: 0; }
.cifre-email .numero { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.cifre-email .numero small { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.cifre-email .etichetta { color: var(--muted); font-size: var(--testo-piccolo); }
.cifre-email .cifra-evidenza { border-color: var(--ok-forte); }
.pannello-email-oggi progress { max-width: none; }
.scelta-promemoria { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; white-space: nowrap; }
.scelta-promemoria input { margin: 0; }
.barra-promemoria { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); box-shadow: var(--ombra); }
.barra-promemoria > * { margin: 0; }
.barra-promemoria .messaggio-selezione { flex: 1 1 260px; color: var(--warn-fg); font-size: var(--testo-piccolo); }
.barra-promemoria .messaggio-selezione[hidden] { display: none; }
.barra-promemoria button { margin-left: auto; }
@media (max-width: 1023px) { .barra-promemoria { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }       /* sopra la barra delle schede in basso */