/* ============================================================
   FlowXPay — BNI Milano Sud Ovest · Senza Confini S.r.l.
   Design system "Verde Primaticcio": acquerello editoriale su carta,
   verdi profondi, rosso BNI usato solo come sigillo.
   Font: Source Serif 4 (titoli) · Inter (testo). Mobile-first, CSS puro.
   Sezioni: TOKEN · BASE · LAYOUT PUBBLICO · WIZARD · ESITO · FEEDBACK ·
            ADMIN · UTILITÀ · RESPONSIVE · PRINT
   ============================================================ */

/* ============================================================
   TOKEN
   ============================================================ */
:root {
  color-scheme: light;
  /* verdi */
  --verde-050:#F1F7F2; --verde-100:#DCEBDD; --verde-200:#B9D8BE; --verde-300:#8FC19A;
  --verde-400:#5FA372; --verde-600:#2F7A4B; --verde-700:#23603B; --verde-800:#17452A; --verde-900:#0F2E1C;
  /* superfici e inchiostri */
  --carta:#F4F6F5; --bianco:#FFFFFF; --ink:#1E2A23; --ink-2:#3D4B43; --ink-3:#5F6E66; --placeholder:#65746C;
  --line:#C9D3CC; --line-forte:#75897F; --grey-200:#E3E9E5; --grey-100:#F4F7F5;
  /* rosso BNI (sigillo) */
  --bni-600:#C8102E; --bni-700:#A50D26; --bni-050:#FCEEF0;
  /* semantici */
  --ok-600:#2F7A4B; --ok-050:#F1F7F2; --ok-testo:#17452A;
  --warn-700:#8A5A0B; --warn-500:#B7791F; --warn-050:#FBF3E0; --warn-line:#E4CB8E;
  --errore-700:#A61B1B; --errore-050:#FBEDEC; --errore-line:#F0C4C0;
  --info-700:#1F5A85; --info-050:#EAF2F8;
  --wa:#128C7E;
  /* alias di compatibilità (markup esistente) */
  --red-600:var(--bni-600); --red-700:var(--bni-700); --red-050:var(--bni-050);
  --line-soft:var(--line); --danger-600:var(--errore-700); --danger-050:var(--errore-050);
  --grey-700:var(--ink-2); --grey-600:var(--ink-3); --grey-400:#8A948E; --white:var(--bianco);
  /* forma, ombre, movimento */
  --radius:16px; --radius-sm:10px; --radius-xs:8px;
  --ombra-1:0 1px 2px rgba(23,69,42,.08), 0 8px 24px rgba(23,69,42,.08);
  --ombra-2:0 2px 6px rgba(23,69,42,.14), 0 14px 36px rgba(23,69,42,.16);
  --ring:0 0 0 3px rgba(47,122,75,.18);
  --font-display:'Source Serif 4', 'Serif Fallback', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono:ui-monospace, Consolas, 'Cascadia Mono', monospace;
  --speed:180ms; --ease:cubic-bezier(.2,.7,.3,1);
  /* misure condivise */
  --topbar-h:60px; --bottomnav-h:56px; --gutter:clamp(1rem, 4vw, 1.75rem);
}
/* Fallback metrico per Source Serif 4: Georgia leggermente ridotta, così il testo non "salta" al caricamento */
@font-face {
  font-family: 'Serif Fallback';
  src: local('Georgia'), local('Georgia Bold');
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink);
  background: var(--carta); position: relative; isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
/* Acquerello: due livelli fissi dietro tutto — macchie (before) e grana di carta (after) */
body::before, body::after {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none;
}
body::before {
  z-index: -2;
  background:
    radial-gradient(58vw 40vw at 92% -8%, rgba(95,163,114,.30) 0%, rgba(95,163,114,.14) 40%, rgba(95,163,114,0) 64%),
    radial-gradient(58vw 40vw at 92% -8%, rgba(0,0,0,0) 57%, rgba(35,96,59,.11) 61%, rgba(0,0,0,0) 65%),
    radial-gradient(46vw 32vw at -10% 42%, rgba(143,193,154,.32) 0%, rgba(143,193,154,.12) 46%, rgba(143,193,154,0) 70%),
    radial-gradient(46vw 32vw at -10% 42%, rgba(0,0,0,0) 59%, rgba(47,122,75,.09) 63%, rgba(0,0,0,0) 67%),
    radial-gradient(75vw 28vw at 60% 110%, rgba(185,216,190,.35) 0%, rgba(185,216,190,0) 66%);
  background-blend-mode: multiply;
}
body::after {
  z-index: -1; opacity: .05; mix-blend-mode: multiply;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>") 0 0 / 240px 240px;
}
/* Admin e login: sfondo piatto, niente acquerello né grana (grafica "definita") */
body::before, body::after { display: none; } /* struttura "definita": niente macchie né grana, sfondo piatto ovunque */

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; color: var(--ink); }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.45rem + 2vw, 2.7rem); line-height: 1.12; }
h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.55rem); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--verde-700); text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: var(--verde-900); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; font-size: max(16px, 1rem); color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--placeholder); opacity: 1; }
table { border-collapse: collapse; }
ul, ol { padding-left: 1.2rem; }
strong, b { font-weight: 700; }
details > summary { cursor: pointer; }

/* Focus sempre visibile: anello verde con sottile bordo bianco */
:focus-visible { outline: 3px solid var(--verde-800); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.admin-topbar :focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--verde-900); }

/* Salta al contenuto: visibile solo a focus */
.salta {
  position: absolute; left: .5rem; top: -100px; z-index: 100;
  background: #fff; color: var(--verde-900); padding: .6rem 1rem; border-radius: 10px;
  font-weight: 700; box-shadow: var(--ombra-2); text-decoration: none;
}
.salta:focus { top: .5rem; }

/* ============================================================
   LAYOUT PUBBLICO
   ============================================================ */
.site-header {
  background: #fff; border-bottom: 1px solid #B9C5BE; position: relative; z-index: 5;
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .site-header { background: #fff; }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.header-note { display: none; text-align: right; font-size: .82rem; line-height: 1.35; color: var(--ink-3); }

/* Marchio: goccia verde vuota + chip rosso BNI (sigillo) */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand-mark {
  width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; position: relative;
  color: #fff; font: 700 1.05rem/1 var(--font-display); letter-spacing: -.02em;
  background: linear-gradient(135deg, #5FA372, #23603B);
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  box-shadow: 0 2px 6px rgba(23,69,42,.25);
}
.brand-mark::after { content: none; }
.brand-mark::before {
  content: ""; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bni-600); box-shadow: 0 0 0 2px #fff;
}
.brand-text { line-height: 1.15; display: grid; }
.brand-text strong { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-text small { font-size: .8rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: .35em; margin-top: .1rem; }
.chip-bni {
  display: inline-block; background: var(--bni-600); color: #fff; border-radius: 3px; padding: .1em .45em;
  font: 800 .68rem/1.25 var(--font-body); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}
.chip-bni-sm { font-size: .6rem; padding: .08em .35em; }

/* Hero: su carta, macchia grande a destra, pennellata rossa traslucida sotto la parola chiave */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(1rem, 2.6vw, 1.7rem) 0;
  background:
    radial-gradient(60% 140% at 90% 0%, rgba(143,193,154,.55), rgba(143,193,154,0) 62%),
    linear-gradient(100deg, var(--verde-900), var(--verde-700));
}
.hero h1 { max-width: none; margin: 0; color: #fff; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); line-height: 1.15; }
.hero p { display: none; max-width: 62ch; font-size: 1.02rem; color: #DCEBDD; margin: .4rem 0 0; }
.pennellata { position: relative; white-space: nowrap; z-index: 0; }
.pennellata::after {
  content: ""; position: absolute; z-index: -1; left: -.06em; right: -.06em; bottom: -.06em; height: .3em;
  transform: rotate(-.6deg);
  background: linear-gradient(90deg, rgba(200,16,46,.16), rgba(200,16,46,.34) 30%, rgba(200,16,46,.26) 70%, rgba(200,16,46,.12));
  border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%;
}

.site-footer { border-top: 1px solid #B9C5BE; background: #fff; margin-top: 1.5rem; padding: .9rem 0; }
.site-footer .container { display: grid; gap: .5rem; font-size: .875rem; color: var(--ink-3); }
.site-footer strong { color: var(--ink-2); }

/* Assistenza WhatsApp: cerchio su telefono, pillola con etichetta da 641px */
.whatsapp-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 56px; height: 56px; border-radius: 999px; padding: 0;
  background: var(--wa); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(18,140,126,.35);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.whatsapp-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,140,126,.4); }
.whatsapp-fab svg { width: 28px; height: 28px; flex: none; }
.whatsapp-label { display: none; }
.wizard ~ .whatsapp-fab, body:has(.azioni-step) .whatsapp-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }

/* ============================================================
   WIZARD
   ============================================================ */
.wizard, .container.wizard { max-width: 1080px; padding-block: clamp(.7rem, 2vw, 1.1rem) 5.5rem; }

/* Avanzamento: tre riquadri bordati in fila (struttura "definita"); sotto 641 solo numeri + etichetta del passo attivo */
.steps { display: flex; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .3rem .5rem;
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink-3);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-forte); color: var(--ink-2);
  font: 700 .85rem/1 var(--font-body);
}
.steps li > span { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps li.attivo { flex: 2.6 1 0; border-color: var(--verde-600); color: var(--ink); }
.steps li.attivo > span { display: inline; }
.steps li.attivo::before { background: var(--verde-600); border-color: var(--verde-600); color: #fff; }
.steps li.fatto { color: var(--ink-2); border-color: var(--verde-200); }
.steps li.fatto::before { content: "✓"; background: var(--verde-100); border-color: var(--verde-100); color: var(--verde-700); }

.step-panel { display: none; }
.step-panel.attivo { display: block; }

.card {
  --pad: clamp(1.1rem, 3vw, 1.6rem);
  background: #fff; border: 1px solid #B9C5BE; border-radius: 14px; box-shadow: 0 1px 2px rgba(23,69,42,.06);
  padding: var(--pad);
}
.card-tinta { background: var(--verde-050); box-shadow: none; }
.card + .card, .card + details, details + .card { margin-top: 1rem; }
details.card > summary { font-weight: 700; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "+"; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--verde-100); color: var(--verde-800); font-weight: 700; flex: none; }
details.card[open] > summary { margin-bottom: 1rem; }
details.card[open] > summary::before { content: "–"; }
.sottotitolo { color: var(--ink-3); margin: -.2rem 0 1.1rem; }

/* Gruppi di scelta (fieldset) con etichetta eyebrow e tag */
.scelte-gruppo { border: 0; margin: 0 0 .8rem; padding: 0; min-width: 0; }
.scelte-titolo, .tipo, th, .kpi-label, dt, .eyebrow {
  font: 700 .74rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
}
.scelte-titolo { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; padding: 0; }
.tag { display: inline-block; border-radius: 999px; padding: .2em .7em; font-size: .68rem; letter-spacing: .08em; }
.tag-bni { background: var(--bni-050); color: #A50D26; }
.tag-flowx { background: var(--verde-100); color: var(--verde-800); }

/* Card di scelta prodotto */
.scelte { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.scelta { position: relative; }
.scelta input, .metodo input, .periodo input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.scelta label {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; min-height: 52px; height: 100%; cursor: pointer;
  background: #fff; border: 2px solid var(--line-forte); border-radius: 14px;
  padding: .6rem 2.8rem .6rem .9rem;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease), background var(--speed) var(--ease);
}
.scelta label::after, .metodo label::after {
  content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-forte); background: #fff; color: #fff;
  display: inline-grid; place-items: center; font: 700 .9rem/1 var(--font-body);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.scelta label::after { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); }
.scelta input:checked + label, .metodo input:checked + label {
  border-color: var(--verde-600);
  background: radial-gradient(120% 90% at 100% 0%, rgba(143,193,154,.22), rgba(143,193,154,0) 60%), var(--verde-050);
  box-shadow: var(--ring), var(--ombra-1);
}
.scelta input:checked + label::after, .metodo input:checked + label::after { content: "✓"; border-color: var(--verde-600); background: var(--verde-600); }
.scelta input:checked + label .sotto-nome { color: var(--ink-2); }
.scelta input:focus-visible + label, .metodo input:focus-visible + label, .periodo input:focus-visible + label { outline: 3px solid var(--verde-800); outline-offset: 2px; }
.scelta .tipo { display: block; flex: 1 1 auto; color: var(--verde-700); margin: 0; }
.scelta .nome { display: block; flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.1; white-space: normal; color: var(--ink); }
.scelta .sotto-nome { display: block; flex: 1 1 100%; font-size: .875rem; color: var(--ink-3); margin: 0; }
.scelta-full { grid-column: 1 / -1; }
.scelta-flowx label { background: linear-gradient(180deg, #fff, var(--verde-050)); }

/* Periodo FlowX: controllo segmentato */
.periodi { margin-top: 1rem; }
.periodi-titolo { font-weight: 600; margin: 0 0 .5rem; }
.segmenti { display: flex; gap: 4px; padding: 4px; background: var(--verde-050); border: 1px solid var(--verde-100); border-radius: 999px; }
.periodo { position: relative; flex: 1 1 0; }
.periodo label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .5rem;
  border-radius: 999px; border: 2px solid transparent; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.periodo input:checked + label { background: #fff; border-color: var(--verde-600); color: var(--verde-800); box-shadow: 0 1px 3px rgba(23,69,42,.12); }
.periodi .aiuto { display: block; margin: .6rem 0 0; }

/* Avviso inline (errori di passo) */
.avviso-inline {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: var(--errore-050); color: var(--errore-700); border: 1px solid var(--errore-line); font-weight: 600;
}
.avviso-inline:focus { outline: none; }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.campo-full { grid-column: 1 / -1; }
.campo > label, .campo-label { font-weight: 600; font-size: .95rem; }
.req { color: var(--bni-600); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: .6rem .85rem; color: var(--ink); background: #fff;
  border: 2px solid var(--line-forte); border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4B43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 18px; }
.campo select:disabled { color: var(--ink-3); background-color: var(--grey-100); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde-600); box-shadow: var(--ring); }
.campo .errore, .errore { display: none; font-size: .875rem; color: var(--errore-700); font-weight: 600; }
.campo.invalid input, .campo.invalid select { border-color: var(--errore-700); background-color: #FFFBFB; }
.campo.invalid .errore { display: block; }
.aiuto, .small, .kpi-sub, .nota-uniforme { font-size: .875rem; color: var(--ink-3); }
.campo .aiuto { display: block; }
.campo .aiuto:empty { display: none; }
[data-blocco-nome] { min-width: 0; }

/* Chip del capitolo scelto (giorno · orario · sede · fascia) */
.chip-gruppo {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; max-width: 100%;
  margin-top: .45rem; padding: .35rem .85rem; border-radius: 999px;
  background: var(--verde-100); color: var(--ink); font-size: .875rem; font-weight: 500; line-height: 1.35;
}
.chip-gruppo-icona { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--verde-600) center / contain no-repeat; }
.chip-gruppo-icona.sole { border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7791F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='%23B7791F'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.chip-gruppo-icona.luna { border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.8A9 9 0 0 1 9.2 3.5 9 9 0 1 0 20.5 14.8z' fill='%231F5A85'/%3E%3C/svg%3E") center / contain no-repeat; }
.nota-copertura { color: var(--verde-800); font-weight: 500; }

/* Riepilogo + metodi */
.riepilogo-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
.riepilogo table { width: 100%; }
.riepilogo td { padding: .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.riepilogo td:first-child { color: var(--ink-2); padding-right: .8rem; }
.riepilogo td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.riepilogo tr.tot td { border-bottom: 0; border-top: 2px solid var(--ink); padding-top: .8rem; font-weight: 700; }
.riepilogo tr.tot td:last-child { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; line-height: 1.1; white-space: nowrap; }
#r-riga-penale td:first-child { color: var(--errore-700); font-weight: 600; }
.nota-uniforme {
  margin: .9rem 0 0; padding: .65rem .85rem; background: var(--verde-050);
  border-left: 3px solid var(--verde-400); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.riepilogo .small { margin: .7rem 0 0; }

.metodi-box h3 { margin-bottom: .7rem; }
.metodi { display: flex; flex-direction: column; gap: .65rem; }
.metodo { position: relative; }
.metodo label {
  display: flex; align-items: center; gap: .8rem; cursor: pointer; min-height: 60px;
  padding: .6rem .9rem; background: #fff; border: 2px solid var(--line-forte); border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.metodo .icona { width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: 10px; background: var(--verde-050); color: var(--verde-700); }
.metodo .icona svg { width: 22px; height: 22px; }
.metodo .testo { flex: 1; min-width: 0; }
.metodo .testo strong { display: block; font-size: .97rem; }
.metodo .testo small { display: block; font-size: .875rem; color: var(--ink-3); }
.badge-demo {
  display: inline-block; vertical-align: middle; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn-700); background: var(--warn-050); border: 1px solid var(--warn-line);
}

/* Pulsanti: un solo rosso per schermata (primario); il resto verde */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .7rem 1.5rem; border-radius: 12px; border: 2px solid transparent;
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease), color var(--speed) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--bni-600); color: #fff; box-shadow: 0 2px 8px rgba(23,69,42,.18); }
.btn-primario:hover { background: var(--bni-700); color: #fff; }
.btn-primario:focus-visible { outline: 3px solid var(--verde-800); outline-offset: 2px; box-shadow: 0 0 0 7px var(--bni-050); }
.btn-secondario { background: #fff; color: var(--verde-800); border-color: var(--line-forte); }
.btn-secondario:hover { border-color: var(--verde-700); background: var(--verde-050); color: var(--verde-900); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-blocco { width: 100%; }
.btn-copia, .btn-elimina, .btn-mostra {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 40px; padding: .4rem .85rem; border-radius: var(--radius-xs); white-space: nowrap;
  background: #fff; border: 1.5px solid var(--line-forte); color: var(--verde-700);
  font: 600 .875rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.btn-copia::before, .btn-elimina::before, .btn-mostra::before { content: ""; position: absolute; inset: -3px 0; }
.btn-copia:hover, .btn-mostra:hover { border-color: var(--verde-600); background: var(--verde-050); }
.btn-elimina { color: var(--errore-700); }
.btn-elimina:hover { border-color: var(--errore-700); background: var(--errore-050); }

/* Azioni del passo: sticky in basso sul telefono, in riga da 641px */
.azioni-step {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-direction: row; align-items: center; gap: .6rem;
  margin: 1.2rem calc(var(--pad, 1.2rem) * -1) calc(var(--pad, 1.2rem) * -1);
  padding: .75rem var(--pad, 1.2rem) calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
}
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .azioni-step { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.azioni-step .btn { flex: 1 1 auto; width: auto; }
.azioni-step .btn-secondario { flex: 0 0 auto; min-width: 34%; }
.azioni-step > span:empty { display: none; }

/* ============================================================
   ESITO (bonifico, pagamento demo, ritorno gateway)
   ============================================================ */
.esito { max-width: 640px; margin-inline: auto; }
.esito h1 { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.esito .sotto { text-align: center; color: var(--ink-2); font-size: 1.05rem; margin-bottom: 1.4rem; }
.esito-icona {
  width: 72px; height: 72px; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
}
.esito-icona svg { width: 36px; height: 36px; }
.esito-icona.ok { background: linear-gradient(135deg, #5FA372, #23603B); color: #fff; box-shadow: 0 4px 14px rgba(23,69,42,.25); }
.esito-icona.ok svg path { stroke-dasharray: 24; animation: spunta 400ms var(--ease) 150ms both; }
@keyframes spunta { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.esito-icona.attesa { background: var(--warn-050); border: 2px solid var(--warn-line); color: var(--warn-700); }
.esito dl { margin: 0 0 1rem; }
.esito dl:not(.box-bonifico dl) { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: baseline; }
.esito dl:not(.box-bonifico dl) dd { margin: 0; font-weight: 600; }
.box-bonifico { background: var(--verde-050); border: 1px solid var(--verde-100); border-radius: 12px; padding: 1rem 1.1rem; margin: 1rem 0; }
.box-bonifico dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem .85rem; align-items: center; }
.box-bonifico dt { grid-column: 1 / -1; margin-top: .5rem; }
.box-bonifico dt:first-child { margin-top: 0; }
.box-bonifico dd { margin: 0; min-width: 0; }
.box-bonifico dd.mono { font-weight: 600; color: var(--ink); }
.box-bonifico dd.azione { justify-self: end; }
.esito .btn { margin-top: .5rem; }

/* ============================================================
   FEEDBACK — badge, avvisi
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: .4em; vertical-align: middle;
  font-size: .78rem; font-weight: 600; line-height: 1.3; border-radius: 999px; padding: .2em .7em .2em .55em;
  white-space: nowrap; background: var(--grey-200); color: var(--ink-2);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge-ok { background: var(--ok-050); color: var(--ok-testo); }
.badge-ok::before { background: var(--ok-600); }
.badge-warn { background: var(--warn-050); color: var(--warn-700); }
.badge-warn::before { background: var(--warn-500); }
.badge-danger { background: var(--errore-050); color: var(--errore-700); }
.badge-danger::before { background: var(--bni-600); }
.badge-muted { background: #EEF1EF; color: var(--ink-3); }
.badge-muted::before { background: var(--line-forte); }
.badge-bni { background: var(--bni-050); color: #A50D26; }
.badge-bni::before { background: #A50D26; }
.badge-flowx { background: var(--verde-100); color: var(--verde-800); }
.badge-flowx::before { background: var(--verde-600); }
.badge-fascia { background: var(--grey-200); color: var(--ink-2); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; padding-left: .6em; }
.badge-fascia::before { display: none; }
.badge-fascia svg { width: 12px; height: 12px; flex: none; }
.badge-fascia-am svg { color: var(--warn-500); }
.badge-fascia-pm svg { color: var(--info-700); }

.avviso-ok, .avviso-errore, .avviso-info {
  position: relative; margin: 0 0 1rem; padding: .8rem 3rem .8rem 1rem; border-radius: 12px; border-left: 4px solid;
  font-weight: 500; line-height: 1.45;
}
.avviso-ok { background: var(--ok-050); color: var(--ok-testo); border-color: var(--ok-600); }
.avviso-errore { background: var(--errore-050); color: var(--errore-700); border-color: var(--errore-700); }
.avviso-info { background: var(--info-050); color: var(--info-700); border-color: var(--info-700); }
.avviso-errore ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.avviso-chiudi {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: inherit; text-decoration: none; font-size: 1.4rem; line-height: 1; opacity: .75;
}
.avviso-chiudi:hover { opacity: 1; background: rgba(0,0,0,.06); }
.avviso-demo {
  margin: 0; padding: .45rem 1rem; border-radius: 0; border-left: 0; border-bottom: 1px solid #C9DCEA;
  text-align: center; font-size: .875rem; font-weight: 500;
}

/* ============================================================
   ADMIN
   ============================================================ */
/* Token solo admin: bordi più scuri di --line, ombra minima, sfondo neutro */
.admin-body, body:has(> .login-wrap) { --line-admin:#A9B7AE; --ombra-admin:0 1px 2px rgba(30,42,35,.08); background: #F2F4F3; }
/* Font: niente serif nell'admin, titoli e cifre in Inter 700 */
.admin-body h1, .admin-body h2, .admin-body h3, .admin-body .kpi-valore, .admin-body .contatore, .admin-body .brand-text strong, .admin-body .brand-mark,
.login-card h1, .login-card .brand-text strong, .login-card .brand-mark { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
.admin-body h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
.admin-body h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }
.admin-body .card, .login-card { border-color: var(--line-admin); box-shadow: var(--ombra-admin); }
.admin-body .card-tinta { background: var(--grey-100); border-color: var(--line-admin); box-shadow: none; }
.admin-body details.card > summary::before { background: var(--verde-700); color: #fff; }
.admin-body .campo input, .admin-body .campo select, .admin-body .campo textarea { border-color: var(--line-forte); }
.admin-body .badge, .login-card .badge { box-shadow: inset 0 0 0 1px rgba(30,42,35,.12); }
.admin-body .esempi-grid > div { border-color: var(--line-admin); }
.admin-body .tabella-calcolo td, .admin-body .tabella-calcolo th { border-bottom-color: var(--line-admin); }
.admin-body .avviso-info { border-width: 1.5px; }
.admin-topbar { position: sticky; top: 0; z-index: 50; background: var(--verde-900); color: #fff; box-shadow: 0 2px 10px rgba(15,46,28,.25); }
.admin-topbar-inner { max-width: 1440px; margin: 0 auto; padding-inline: clamp(1rem, 3vw, 1.8rem); display: flex; align-items: center; gap: .8rem; min-height: var(--topbar-h); }
.admin-topbar .brand-text strong { color: #fff; }
.admin-topbar .brand-text small { color: #CFE0D4; }
.admin-topbar .brand-mark::before { box-shadow: 0 0 0 2px var(--verde-900); }
.admin-nav { display: none; flex: 1 1 auto; flex-wrap: wrap; gap: .15rem; margin-left: .5rem; }
.admin-nav a, .nav-esci {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .8rem; border-radius: 999px;
  color: #CFE0D4; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.admin-nav a:hover, .nav-esci:hover { background: rgba(255,255,255,.1); color: #fff; }
.admin-nav a[aria-current="page"] { background: #fff; color: var(--verde-900); }
.nav-ico { width: 20px; height: 20px; flex: none; }
.nav-esci { margin-left: auto; }
.nav-esci .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bni-600); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
}

/* Navigazione in basso (telefono) */
.admin-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(23,69,42,.08);
}
.admin-bottomnav > a, .nav-altro summary {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--bottomnav-h); padding: 4px 2px; color: var(--ink-2); text-decoration: none;
  font-size: .68rem; font-weight: 600; line-height: 1.1; list-style: none;
}
.nav-altro summary::-webkit-details-marker { display: none; }
.admin-bottomnav > a .nav-ico, .nav-altro summary .nav-ico { width: 22px; height: 22px; }
.admin-bottomnav > a[aria-current="page"], .nav-altro[open] summary { color: var(--verde-800); }
.admin-bottomnav > a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: var(--verde-600); }
.admin-bottomnav .nav-badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: .66rem; }
.nav-altro { position: relative; }
.nav-altro-menu {
  position: absolute; right: .5rem; bottom: calc(100% + 6px); min-width: 210px; padding: .35rem; display: grid;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--ombra-2);
}
.nav-altro-menu a {
  display: flex; align-items: center; min-height: 48px; padding: 0 1rem; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.nav-altro-menu a:hover { background: var(--verde-050); color: var(--verde-900); }
.nav-altro-menu a:last-child { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: .25rem; }

.admin-main {
  max-width: 1440px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.8rem);
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
.admin-main .avviso-ok, .admin-main .avviso-errore { position: sticky; top: calc(var(--topbar-h) + .5rem); z-index: 30; box-shadow: var(--ombra-1); }
.admin-footer { text-align: center; font-size: .8rem; color: var(--ink-3); padding: 1rem 1rem calc(1rem + var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

/* Testata di pagina */
.pagina-testata { margin-bottom: 1.2rem; }
.pagina-testata h1, .admin-main > h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .25rem; }
.contatore {
  display: inline-grid; place-items: center; min-width: 2em; padding: .15em .6em; border-radius: 999px;
  background: var(--verde-100); color: var(--ink); font: 700 .9rem/1.3 var(--font-body); letter-spacing: 0;
}
.pagina-testata .sottotitolo { margin: 0; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.kpi {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.1rem; min-height: 112px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line-admin);
  box-shadow: var(--ombra-admin); color: inherit; text-decoration: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
a.kpi:hover { border-color: var(--verde-700); box-shadow: 0 2px 8px rgba(30,42,35,.14); color: inherit; }
.kpi-label { display: block; font-size: .9rem; color: var(--ink-2); }
.kpi-valore { display: block; font-family: var(--font-body); font-weight: 700; font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: .15rem; }
.kpi-sub { display: block; margin-top: auto; padding-top: .2rem; font-size: .85rem; color: var(--ink-3); }
.kpi-evidenza, .kpi.rosso { background: var(--verde-900); border-color: var(--verde-900); color: #fff; }
.kpi-evidenza .kpi-label, .kpi.rosso .kpi-label { color: #CFE0D4; }
.kpi-evidenza .kpi-sub, .kpi.rosso .kpi-sub { color: #DCEBDD; }
.kpi-attenzione { border-left: 4px solid var(--warn-500); }
.kpi-attenzione .kpi-valore { color: var(--warn-700); }
.kpi-allarme { border-left: 4px solid var(--errore-700); }
.kpi-allarme .kpi-valore { color: var(--errore-700); }

/* Tabelle */
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
.tabella-wrap { background: #fff; border: 1px solid var(--line-admin); border-radius: var(--radius-sm); box-shadow: var(--ombra-admin); padding: 1rem 1.25rem 1.1rem; margin-bottom: 1.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella-wrap h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.tabella-note { margin: 0 0 .8rem; }
table.admin { width: 100%; font-size: .9rem; border: 1px solid var(--line-admin); }
table.admin th { background: var(--grey-100); padding: .5rem .6rem; text-align: left; border-bottom: 2px solid var(--line-forte); white-space: nowrap; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
table.admin td { padding: .5rem .6rem; border-bottom: 1px solid var(--line-admin); vertical-align: top; }
table.admin tbody tr:nth-child(even) td { background: #F1F4F2; }
table.admin tbody tr:hover td { background: var(--verde-050); }
table.admin tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num .small { white-space: normal; }
table.admin td[data-label="Quota"] { white-space: nowrap; }
table.admin th.num { text-align: right; }
table.admin td:has(> .campo-nome) { width: 30%; }
td.wrap { white-space: normal; min-width: 14rem; overflow-wrap: anywhere; }
/* Pagamenti: spazio alla voce, causale compatta; niente <br> (.small è già a blocco) */
table.admin td[data-label="Voce"] { min-width: 15rem; }
table.admin td.wrap.mono { font-size: .8rem; min-width: 12rem; }
table.admin td br { display: none; }
td.vuoto { text-align: center; color: var(--ink-3); padding: 1.6rem 1rem; }
td.td-titolo { font-weight: 600; }
td.azioni { white-space: nowrap; }
td.azioni form { display: inline-block; margin: 0; }
table.admin tbody tr.riga-attesa td { background: #FDFAF3; }
table.admin tbody tr.riga-attesa:hover td { background: #FAF3DF; }
table.admin .badge { margin-top: .15rem; }
table.admin .small { display: block; margin-top: .1rem; }
table.admin td .mono.small { white-space: nowrap; overflow-wrap: normal; font-size: .8rem; }
.log-diff s { color: var(--ink-3); text-decoration-color: var(--errore-700); }
.log-diff b { color: var(--verde-800); }
.esempi-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: .8rem; }
.esempi-grid > div { background: #fff; border: 1px solid var(--verde-100); border-radius: 12px; padding: .9rem 1rem; }
.esempi-grid h3, .tabella-calcolo caption { margin: 0 0 .5rem; text-align: left; font-weight: 700; font-size: 1rem; }
.tabella-calcolo { width: 100%; font-size: .95rem; }
.tabella-calcolo td, .tabella-calcolo th { padding: .35rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.tabella-calcolo td:last-child, .tabella-calcolo th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella-calcolo tr:last-child td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }
.tabella-calcolo tr.tot td { font-weight: 700; }

/* Filtri */
.filtri {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .7rem; align-items: end;
  padding: .8rem .9rem; margin-bottom: 1.1rem; background: #fff; border: 1px solid var(--line-admin); border-radius: var(--radius-sm); box-shadow: var(--ombra-admin);
}
.filtri .campo { gap: .2rem; }
.filtri .campo > label { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.filtri .campo input, .filtri .campo select { min-height: 46px; padding: .35rem .7rem; }
.filtri .btn { grid-column: 1 / -1; min-height: 46px; }
.filtri-azzera { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .75rem; text-align: center; font-size: .875rem; font-weight: 600; }

/* Form inline nelle tabelle (scadenza, FlowX, listino) e switch */
.form-scadenza, .form-flowx { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; }
.form-scadenza input[type="date"], .campo-listino, .campo-listino[type="time"] {
  min-height: 40px; padding: .3rem .55rem; border: 2px solid var(--line-forte); border-radius: var(--radius-xs); background: #fff; color: var(--ink);
}
.form-scadenza input[type="date"] { width: 10.2rem; max-width: 100%; }
.form-scadenza input:focus, .campo-listino:focus { outline: none; border-color: var(--verde-600); box-shadow: var(--ring); }
.campo-listino { width: 100%; }
.campo-nome { width: 100%; min-width: 11rem; }
.campo-importo { width: 6rem; min-width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Pulsanti inline dell'admin ben delineati (non "fantasma") */
.admin-body .btn-copia { border-color: var(--verde-700); color: var(--verde-800); font-weight: 700; }
.admin-body .btn-copia:hover { background: var(--verde-050); border-color: var(--verde-800); color: var(--verde-900); }
.admin-body .btn-elimina { border-color: var(--errore-700); font-weight: 700; }
.admin-body .btn-elimina:hover { background: var(--errore-050); }
select.campo-listino { min-width: 8rem; }
.switch-attiva { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; min-height: 44px; font-weight: 500; user-select: none; }
.switch-attiva input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; cursor: pointer;
  width: 44px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: var(--line-forte);
  transition: background var(--speed) var(--ease);
}
.switch-attiva input:focus { box-shadow: none; }
.switch-attiva input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--speed) var(--ease);
}
.switch-attiva input:checked { background: var(--verde-600); }
.switch-attiva input:checked::before { transform: translateX(20px); }
.switch-attiva input:focus-visible { outline: 3px solid var(--verde-800); outline-offset: 2px; }

/* Login */
.login-wrap { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--gutter); }
.login-card { position: relative; isolation: isolate; overflow: hidden; width: min(400px, 100%); }
.login-card .brand { margin-bottom: 1.2rem; }
.login-card h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.login-card .campo { margin: 1.1rem 0; }
.campo-password { position: relative; }
.campo-password input { padding-right: 5.6rem; }
.btn-mostra { position: absolute; right: 6px; bottom: 6px; min-height: 40px; border-color: transparent; background: var(--verde-050); }
.campo-password .errore ~ .btn-mostra, .campo-password .aiuto ~ .btn-mostra { bottom: auto; top: calc(1.45rem + 6px); }

.impostazioni-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
.impostazioni-grid h2, .impostazioni-grid h3 { margin-top: 1.2rem; }
.impostazioni-grid h2:first-child, .impostazioni-grid h3:first-child { margin-top: 0; }
.impostazioni-grid .switch-attiva { margin-bottom: .5rem; }
.impostazioni-grid .btn-primario { margin-top: 1.2rem; }

/* ============================================================
   UTILITÀ
   ============================================================ */
.container { max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.mono { font-family: var(--font-mono); font-size: .95rem; overflow-wrap: anywhere; }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.max-640 { max-width: 640px; margin-inline: auto; }
.eyebrow { display: block; margin-bottom: .3rem; }
[hidden] { display: none !important; }

/* ============================================================
   RESPONSIVE (mobile-first)
   ============================================================ */
/* Telefoni stretti */
@media (max-width: 399px) {
  .segmenti { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .periodo label { border-radius: 12px; }
  .kpi-grid { grid-template-columns: 1fr; }
}
/* Sfondo: sotto 1025 solo le due macchie principali */
@media (max-width: 1024px) {
  body::before {
    background:
      radial-gradient(58vw 40vw at 92% -8%, rgba(95,163,114,.30) 0%, rgba(95,163,114,.14) 40%, rgba(95,163,114,0) 64%),
      radial-gradient(58vw 40vw at 92% -8%, rgba(0,0,0,0) 57%, rgba(35,96,59,.11) 61%, rgba(0,0,0,0) 65%),
      radial-gradient(46vw 32vw at -10% 42%, rgba(143,193,154,.32) 0%, rgba(143,193,154,.12) 46%, rgba(143,193,154,0) 70%),
      radial-gradient(46vw 32vw at -10% 42%, rgba(0,0,0,0) 59%, rgba(47,122,75,.09) 63%, rgba(0,0,0,0) 67%);
  }
  body::after { opacity: .035; }
}
/* Telefono orizzontale: niente barra sticky */
@media (orientation: landscape) and (max-height: 500px) {
  .azioni-step { position: static; }
}

@media (min-width: 641px) {
  .header-note { display: block; }
  .steps li > span { display: inline; }
  .steps li, .steps li.attivo { flex: 1 1 0; justify-content: flex-start; padding: .5rem 1rem; gap: .6rem; }
  .hero p { display: block; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .scelta label { display: block; padding: .8rem 3rem .75rem 1rem; }
  .scelta .tipo { margin-bottom: .15rem; }
  .scelta .nome { font-size: 1.35rem; }
  .scelta .sotto-nome { margin-top: .15rem; }
  .azioni-step {
    position: static; flex-direction: row; justify-content: space-between; align-items: center;
    margin: 1.3rem 0 0; padding: 0; background: none; border: 0; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .azioni-step .btn { flex: 0 0 auto; width: auto; }
  .azioni-step .btn-primario { min-width: 46%; }
  .azioni-step > span:empty { display: block; }
  .whatsapp-fab { width: auto; height: 52px; padding: 0 1.15rem 0 .85rem; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .whatsapp-label { display: inline; }
  .wizard ~ .whatsapp-fab, body:has(.azioni-step) .whatsapp-fab { bottom: 18px; }
  .wizard, .container.wizard { padding-bottom: 3rem; }
  .site-footer .container { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer .container > :last-child { text-align: right; }
  .box-bonifico dl { grid-template-columns: auto 1fr auto; gap: .55rem 1rem; }
  .box-bonifico dt { grid-column: auto; margin-top: 0; }
  .filtri { display: flex; flex-wrap: wrap; }
  .filtri .campo { flex: 1 1 10rem; }
  .filtri .campo-q, .filtri .campo:first-child { flex: 2 1 14rem; }
  .filtri .btn, .filtri-azzera { grid-column: auto; flex: 0 0 auto; }
  .filtri-azzera { align-self: center; padding: 0 .75rem; }
  .esempi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .kpi-valore { font-size: 1.85rem; }
}

@media (min-width: 768px) {
  .admin-nav { display: flex; }
  .nav-esci .nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .admin-bottomnav { display: none; }
  .admin-main { padding-bottom: clamp(1rem, 3vw, 1.8rem); }
  .admin-footer { padding-bottom: 1.5rem; }
  table.admin { min-width: 720px; }
  table.admin th:first-child, table.admin td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  table.admin th:first-child { background: var(--grey-100); }
  table.admin tbody tr:nth-child(even) td:first-child { background: #F1F4F2; }
  table.admin tbody tr:hover td:first-child { background: var(--verde-050); }
  table.admin tbody tr.riga-attesa td:first-child { background: #FDFAF3; }
  table.admin tbody tr.riga-attesa:hover td:first-child { background: #FAF3DF; }
}
/* Tablet: nel topbar solo le icone, etichetta visibile sulla voce attiva */
@media (min-width: 768px) and (max-width: 1100px) {
  .admin-nav { gap: 0; margin-left: .25rem; }
  .admin-nav a, .nav-esci { padding: 0 .5rem; }
  .admin-topbar .brand-text small { font-size: .72rem; }
  .admin-nav a:not([aria-current="page"]) .nav-label, .nav-esci .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 901px) {
  .riepilogo-grid { grid-template-columns: 1.1fr .9fr; gap: 1.6rem; }
  .riepilogo { position: sticky; top: 1rem; }
  .impostazioni-grid { grid-template-columns: 1.15fr .85fr; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid > .tabella-wrap { margin-bottom: 0; }
  .dashboard-grid > .tabella-wrap:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1025px) {
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (min-width: 1200px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid table.admin { min-width: 0; }
}

/* Capacità del dispositivo */
@media (pointer: coarse) {
  .btn-copia, .btn-elimina, .btn-mostra, .form-scadenza input[type="date"], .campo-listino, .switch-attiva, details.card > summary { min-height: 44px; }
  .btn-copia::before, .btn-elimina::before, .btn-mostra::before { inset: 0; }
  .avviso-chiudi { width: 44px; height: 44px; }
}
@media (hover: hover) {
  .scelta label:hover { border-color: var(--verde-700); transform: translateY(-2px); box-shadow: var(--ombra-1); }
  .scelta label:hover::after, .metodo label:hover::after { border-color: var(--verde-700); }
  .metodo label:hover { border-color: var(--verde-700); }
  .periodo label:hover { background: rgba(255,255,255,.7); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .scelta label:hover, a.kpi:hover, .whatsapp-fab:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--line-forte); }
  .badge, .chip-gruppo, .tag { outline: 1px solid currentColor; outline-offset: -1px; }
}

/* Vista a schede sotto 768: ogni riga è una card, ogni cella "etichetta: valore" */
@media (max-width: 767px) {
  .tabella-schede { display: block; min-width: 0; }
  .tabella-schede thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabella-schede tbody { display: block; }
  table.tabella-schede { border: 0; }
  .tabella-schede tr { display: block; position: relative; background: #fff; border: 1px solid var(--line-admin); border-radius: var(--radius-xs); margin: 0 0 .5rem; padding: .3rem .7rem .4rem; }
  .tabella-schede tbody tr:last-child { margin-bottom: 0; }
  .tabella-schede tr.riga-attesa { border-color: var(--warn-500); }
  /* Cella "etichetta: valore": etichetta assoluta a sinistra, così ogni contenuto della cella
     (testo, badge, form, righe .small) resta nella colonna del valore qualunque sia il numero di figli. */
  table.tabella-schede td { /* specificità > table.admin td */
    display: block; position: relative; line-height: 1.4;
    white-space: normal; border: 0; padding: .25rem 0 .25rem 6.5rem; min-height: 1.6rem; min-width: 0; background: transparent; overflow-wrap: anywhere;
  }
  table.tabella-schede tbody tr:nth-child(even) td, table.tabella-schede tbody tr:hover td { background: transparent; } /* niente zebra/hover nelle schede */
  .tabella-schede td .badge { white-space: normal; margin-top: 0; }
  .tabella-schede td select, .tabella-schede td input[type="time"] { width: 100%; min-width: 0; min-height: 44px; }
  .tabella-schede td::before { content: attr(data-label); position: absolute; left: 0; top: .4rem; width: 6rem; font: 700 .7rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); overflow-wrap: normal; }
  .tabella-schede td.td-titolo { font-weight: 700; font-size: 1rem; line-height: 1.3; padding: .3rem 0 .35rem; border-bottom: 1px solid var(--line-admin); margin-bottom: .15rem; }
  .tabella-schede td.td-titolo .small { margin-top: 0; font-size: .8rem; }
  .tabella-schede td.td-titolo::before, .tabella-schede td.azioni::before, .tabella-schede td.vuoto::before, .tabella-schede td[data-label=""]::before { display: none; }
  .tabella-schede td[data-label=""] { padding-left: 0; }
  .tabella-schede td.azioni { display: flex; justify-content: flex-end; gap: .4rem; padding: .35rem 0 0; margin-top: .25rem; border-top: 1px solid var(--line-admin); }
  .tabella-schede td.azioni-vuote { display: none; }
  .tabella-schede td.azioni form { display: block; width: auto; }
  .tabella-schede td.azioni .btn-copia { min-height: 44px; min-width: 9rem; }
  .tabella-schede td.azioni .btn-elimina { min-height: 36px; padding: .25rem .75rem; font-size: .8rem; }
  /* Membri: Elimina piccolo in alto a destra (senza :has resta in fondo) */
  .tabella-schede td.azioni:has(> form > .btn-elimina) { position: absolute; top: .3rem; right: .6rem; width: auto; margin: 0; padding: 0; border: 0; min-height: 0; }
  .tabella-schede tr:has(td.azioni > form > .btn-elimina) td.td-titolo { padding-right: 5.2rem; }
  .tabella-schede td.num { text-align: left; }
  .tabella-schede td.vuoto { padding-left: 0; text-align: center; }
  /* Data e Salva sulla stessa riga, badge di stato sotto */
  .tabella-schede .form-scadenza, .tabella-schede .form-flowx { flex-wrap: nowrap; gap: .35rem; margin: 0 0 .25rem; }
  .tabella-schede .form-scadenza input[type="date"] { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; padding-inline: .45rem; }
  .tabella-schede .form-scadenza .btn-copia { flex: 0 0 auto; width: auto; min-height: 44px; padding-inline: .75rem; }
  .tabella-schede .campo-listino { flex: 1 1 100%; width: 100%; min-height: 44px; }
  .tabella-schede .campo-importo { width: 100%; }
  .tabella-schede .campo-nome { min-width: 0; }
  /* Listino: etichetta "Nome" sopra il campo, che usa tutta la scheda */
  table.tabella-schede td:has(> .campo-nome) { width: auto; padding-left: 0; }
  .tabella-schede td:has(> .campo-nome)::before { position: static; display: block; width: auto; margin-bottom: .2rem; }
  /* Listino: Prezzo e Quota gestione affiancati (etichetta sopra il campo), Rate e Attiva sulla stessa riga */
  .tabella-schede tr:has(> td > .switch-attiva) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .6rem; }
  .tabella-schede tr:has(> td > .switch-attiva) > td { grid-column: 1 / -1; }
  .tabella-schede tr:has(> td > .switch-attiva) > td:has(> .campo-importo), .tabella-schede tr:has(> td > .switch-attiva) > td:has(> .switch-attiva) { grid-column: auto; padding-left: 0; }
  .tabella-schede tr:has(> td > .switch-attiva) > td:has(> .campo-importo)::before { position: static; display: block; width: auto; margin-bottom: .2rem; }
  .tabella-schede tr:has(> td > .switch-attiva) > td:has(> .switch-attiva)::before { display: none; }
  .tabella-schede td:has(> .campo-importo) .small { display: inline; margin-left: .3rem; }
  .tabella-schede td.wrap { min-width: 0; }
  /* Pagamenti: senza descrizione voce (la causale la ripete); Stato e Riconcilia sulla stessa riga */
  .tabella-schede td[data-label="Voce"] .small { display: none; }
  .tabella-schede td.wrap.mono { font-family: var(--font-body); font-size: .85rem; overflow-wrap: normal; }
  .tabella-schede tr:has(> td[data-label="Stato"] + td.azioni) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: center; }
  .tabella-schede tr:has(> td[data-label="Stato"] + td.azioni) > td { grid-column: 1 / -1; }
  .tabella-schede tr:has(> td[data-label="Stato"] + td.azioni) > td[data-label="Stato"] { grid-column: 1; }
  .tabella-schede tr:has(> td[data-label="Stato"] + td.azioni) > td.azioni { grid-column: 2; margin: 0; padding: 0; border: 0; }
  .tabella-schede tr:has(> td[data-label="Stato"] + td.azioni) > td.azioni .btn-copia { min-width: 0; padding-inline: .9rem; }
  /* Membri: contatti senza etichetta sotto il nome; badge di stato su una riga sotto data e Salva */
  .tabella-schede td[data-label="Contatti"] { padding: 0 0 .15rem; font-size: .85rem; }
  .tabella-schede td[data-label="Contatti"]::before { display: none; }
  .tabella-schede td[data-label="Contatti"] .small { display: inline; margin-left: .5rem; }
  .tabella-schede td:has(> .form-scadenza) { padding-top: .15rem; padding-bottom: .15rem; }
  .tabella-schede td:has(> .form-scadenza) > .form-scadenza { margin-bottom: .15rem; }
  .tabella-schede td:has(> .form-scadenza) > .badge { font-size: .75rem; line-height: 1.2; padding: .1em .6em .1em .5em; white-space: nowrap; }
  .tabella-schede td:has(> .form-flowx)::before { content: "FlowX"; }
  /* Membri: Gruppo e Quota sulla stessa riga */
  .tabella-schede tr:has(> td[data-label="Quota"]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; }
  .tabella-schede tr:has(> td[data-label="Quota"]) > td { grid-column: 1 / -1; }
  .tabella-schede td[data-label="Gruppo"]:has(+ td[data-label="Quota"]) { grid-column: 1; }
  .tabella-schede tr:has(> td[data-label="Quota"]) > td[data-label="Quota"] { grid-column: 2; padding-left: 0; white-space: nowrap; }
  .tabella-schede tr:has(> td[data-label="Quota"]) > td[data-label="Quota"]::before { position: static; display: inline; width: auto; margin-right: .35rem; }
  .tabella-wrap { padding-inline: .7rem; }
  /* Sul telefono la cornice bianca intorno alle schede è superflua: le schede stanno direttamente sullo sfondo */
  .tabella-wrap:has(> .tabella-schede) { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body::before, body::after, .whatsapp-fab, .site-header, .admin-topbar, .admin-bottomnav, .azioni-step, .salta, .avviso-demo { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .tabella-wrap, .kpi { box-shadow: none; border-color: #999; }
  .step-panel { display: block; }
  a { color: inherit; text-decoration: none; }
  .riepilogo { position: static; }
}

/* ============================================================
   PASSO 1 · blocchi Rinnovo / Nuova iscrizione ben distinti
   ============================================================ */
.scelte-blocchi { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.scelte-blocco { border: 1px solid var(--line); border-radius: 14px; padding: .55rem .6rem .6rem; background: #fff; }
.blocco-rinnovo { background: var(--verde-050); border-color: var(--verde-200); }
.blocco-iscrizione { background: #fff; border-color: var(--line-forte); }
.blocco-titolo { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .45rem; margin: 0 0 .45rem; font-size: .95rem; color: var(--ink-2); }
.blocco-titolo strong { color: var(--ink); font-size: 1rem; }
.blocco-desc { font-size: .85rem; color: var(--ink-3); }
.blocco-icona { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--verde-600); flex: none; }
.blocco-icona::before { content: ""; width: 14px; height: 14px; background: no-repeat center / contain; }
.blocco-rinnovo .blocco-icona::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><path d='M21 4v5h-5'/></svg>"); }
.blocco-iscrizione .blocco-icona { background: var(--ink); }
.blocco-iscrizione .blocco-icona::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
.scelte-blocco .scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.scelte-blocco .scelta label { display: flex; align-items: center; min-height: 48px; padding: .55rem 2.7rem .55rem .85rem; }
.scelte-blocco .scelta .nome { font-size: 1.15rem; }
@media (min-width: 641px) {
  .scelte-blocchi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .scelte-blocco { padding: .7rem .75rem .75rem; }
}

/* Telefono: il pulsante WhatsApp sta in alto a destra (nell'area dell'header), così non copre mai la barra dei pulsanti del wizard */
@media (max-width: 640px) {
  .whatsapp-fab, .wizard ~ .whatsapp-fab, body:has(.azioni-step) .whatsapp-fab {
    top: 12px; bottom: auto; right: 12px; width: 44px; height: 44px; padding: 0;
    box-shadow: 0 2px 8px rgba(23,69,42,.25);
  }
  .whatsapp-fab svg { width: 22px; height: 22px; }
}