/* CRM Voilàp — identità visiva Voilàp (riferimento voilapholding.com, 12/9/2026).
   Superfici nero/bianco, accento fucsia solo per selezione, hover, indicatori e barre.
   Colori semantici separati (verde/ambra/rosso/grigio) sempre accompagnati da testo. Un solo foglio, nessuna libreria. */
@font-face { font-family:"Montserrat"; src:url("/static/fonts/montserrat-latin.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
:root {
  --brand-black:#000000; --brand-white:#ffffff; --brand-primary:#f50780; --brand-logo-accent:#e6007d; --brand-pattern-accent:#f41b89;
  --neutral-200:#e5e5e5; --neutral-400:#a3a3a3; --neutral-500:#737373; --surface-subtle:#f5f5f5;
  --font-brand:"Montserrat", Arial, Helvetica, sans-serif;
  --radius-panel:8px; --header-height:56px;
  /* scala tipografica (titolo pagina > sezione > riquadro > testo > metadati) e spaziature: una sola fonte di verità */
  --t-pagina:28px; --t-sezione:20px; --t-riquadro:16px; --t-testo:15px; --t-meta:13px;
  --peso-titolo:700; --peso-sezione:600; --peso-riquadro:600; --peso-forte:600;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --tocco:44px;
  --ease-brand:cubic-bezier(0.4, 0, 0.2, 1); --duration-hover:200ms; --duration-reveal:300ms; --duration-panel:400ms;
  /* semantica (mai fucsia): */
  --ok:#137a3a; --ok-bg:#e9f7ee; --warn:#9a5b00; --warn-bg:#fff4dc; --bad:#b3261e; --bad-bg:#fdecea; --neutral-bg:#f0f0f0;
  /* superfici e testo: cambiano con il tema del sistema */
  --bg:#ffffff; --card:#ffffff; --ink:#000000; --ink-2:#262626; --muted:#737373; --line:#e5e5e5; --line-forte:#000000;
  --subtle:#f5f5f5; --input-bg:#ffffff; --input-border:#a3a3a3;
  --btn-bg:#000000; --btn-fg:#ffffff; --btn-border:#000000;
  --side-border:transparent; --side-attiva:#171717; --tab-bg:#000000; --tab-border:#000000;
  --pill-bg:#ffffff; --pill-fg:#000000; --fase-nuova-bg:#000000; --fase-nuova-fg:#ffffff; --avatar-bg:#000000; --avatar-fg:#ffffff;
  --side:236px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#000000; --card:#111111; --ink:#ffffff; --ink-2:#e5e5e5; --muted:#a3a3a3; --line:#2a2a2a; --line-forte:#ffffff;
    --subtle:#1a1a1a; --input-bg:#111111; --input-border:#4a4a4a; --neutral-bg:#262626;
    --btn-bg:#ffffff; --btn-fg:#000000; --btn-border:#ffffff;
    --side-border:#2a2a2a; --side-attiva:#1f1f1f; --tab-bg:#000000; --tab-border:#2a2a2a;
    --pill-bg:#ffffff; --pill-fg:#000000; --fase-nuova-bg:#ffffff; --fase-nuova-fg:#000000; --avatar-bg:#ffffff; --avatar-fg:#000000;
    --ok:#5fd38d; --ok-bg:#0f2a1a; --warn:#f2b84b; --warn-bg:#2b2008; --bad:#ff7b72; --bad-bg:#3a1512;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink-2); color-scheme:light dark; font:var(--t-testo)/1.55 var(--font-brand); }
b, strong { font-weight:var(--peso-forte); color:var(--ink); }
::placeholder { color:var(--muted); opacity:1; }
a { color:var(--ink); text-decoration:none; }
h1 { font-size:var(--t-pagina); line-height:1.2; margin:0; font-weight:var(--peso-titolo); letter-spacing:-.01em; color:var(--ink); }
h2 { font-size:var(--t-sezione); margin:0 0 10px; font-weight:var(--peso-sezione); letter-spacing:-.005em; color:var(--ink); }
h3 { font-size:var(--t-riquadro); margin:0 0 6px; font-weight:var(--peso-riquadro); color:var(--ink); }
h4 { font-size:14px; margin:0 0 6px; font-weight:600; color:var(--ink-2); }
.meta { color:var(--muted); font-size:var(--t-meta); }
.muto { color:var(--muted); }
.piccolo { font-size:13px; }
:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }
.salta { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--brand-black); color:var(--brand-white); padding:8px 12px; border-radius:var(--radius-panel); }
.salta:focus { left:8px; }
th a.ordina { color:var(--muted); font-weight:700; }
th a.ordina:hover, th a.ordina.attivo { color:var(--ink); border-bottom:2px solid var(--brand-primary); }

/* ---- struttura: menu laterale nero + contenuto bianco ---- */
.app { display:grid; grid-template-columns:var(--side) minmax(0, 1fr); min-height:100vh; transition:grid-template-columns 200ms var(--ease-brand); }
.pagina { min-width:0; }   /* la colonna del contenuto non si allarga mai oltre lo schermo: le tabelle larghe scorrono dentro .scorri */
.side { background:var(--brand-black); color:var(--brand-white); border-right:1px solid var(--side-border); padding:20px 16px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:4px; }
.side .logo { display:block; width:96px; color:var(--brand-white); margin:2px 8px 6px; }
.side .logo svg { display:block; width:96px; height:auto; }
.side .barra-brand { width:96px; height:4px; background:var(--brand-primary); margin:10px 8px 22px; }
.side a.voce, .side button.voce { position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--radius-panel); color:var(--brand-white); font-size:16px; font-weight:500; line-height:1.3; transition:background var(--duration-hover) var(--ease-brand); }
.side button.voce { width:100%; background:none; border:0; text-align:left; cursor:pointer; margin-top:8px; color:var(--neutral-400); font:inherit; font-size:14px; }
.side button.voce:hover { background:var(--side-attiva); color:var(--brand-white); }
.side button.voce .ic svg { display:block; transition:transform 200ms var(--ease-brand); }
.side a.voce .eti { position:relative; }
.side a.voce .eti::after { content:""; position:absolute; left:50%; right:50%; bottom:-3px; height:2px; background:var(--brand-primary); transition:left var(--duration-reveal) var(--ease-brand), right var(--duration-reveal) var(--ease-brand); }
.side a.voce:hover .eti::after { left:0; right:0; }
.side a.voce.attiva { background:var(--side-attiva); font-weight:700; }
.side a.voce.attiva::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; background:var(--brand-primary); border-radius:2px; }
.side a.voce .ic, .side button.voce .ic { width:22px; text-align:center; font-size:18px; display:inline-flex; justify-content:center; }
.prova-punto { display:none; }
.side .cerca-menu { margin:0 0 6px; }
.side .cerca-menu input { width:100%; background:#111; border:1px solid #2a2a2a; color:#fff; font-size:14px; padding:8px 10px; border-radius:var(--radius-panel); }
.side .cerca-menu input::placeholder { color:#8a8a8a; }
.side .cerca-menu input:focus { outline:2px solid var(--brand-primary); outline-offset:1px; }
.side a.cerca-icona { display:none; }
html.menu-ridotto .side .cerca-menu { display:none; }
html.menu-ridotto .side a.cerca-icona { display:flex; }
/* menu ridotto: solo icone (stato in localStorage, classe su <html> prima del disegno) */
html.menu-ridotto .app { grid-template-columns:76px minmax(0, 1fr); }
html.menu-ridotto .side { padding:20px 10px; align-items:center; }
html.menu-ridotto .side .logo { width:44px; margin:2px auto 4px; } html.menu-ridotto .side .logo svg { width:44px; }
html.menu-ridotto .side .barra-brand { width:44px; margin:8px auto 18px; }
html.menu-ridotto .side a.voce, html.menu-ridotto .side button.voce { width:56px; justify-content:center; padding:11px 0; gap:0; }
html.menu-ridotto .side .eti, html.menu-ridotto .side .fondo { display:none; }
html.menu-ridotto .side button.voce .ic svg { transform:rotate(180deg); }
html.menu-ridotto .prova-punto { display:block; width:10px; height:10px; border-radius:50%; background:var(--brand-primary); margin:10px auto 0; cursor:help; }
.side .fondo { margin-top:auto; font-size:12px; color:var(--neutral-400); padding:0 8px; line-height:1.5; }
.side .fondo .payoff { color:var(--brand-white); font-weight:700; font-size:14px; display:block; margin-bottom:6px; }
.side .esci { margin-top:10px; color:#a3a3a3; font-size:12px; }
.side .esci button.link { background:none; border:0; padding:0; color:#fff; font-size:12px; font-weight:700; text-decoration:underline; text-decoration-color:var(--brand-primary); text-underline-offset:3px; }
.side .esci button.link:hover { color:var(--brand-primary); background:none; }
.prova-pill { display:inline-block; background:var(--pill-bg); color:var(--pill-fg); padding:3px 10px; font-size:12px; font-weight:700; border-radius:4px; }
.pagina { padding:28px 40px 90px; max-width:1280px; width:100%; animation:entra var(--duration-reveal) var(--ease-brand) both; }
.testata { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.testata .sotto { color:var(--ink-2); font-size:15px; line-height:1.5; margin-top:6px; max-width:72ch; }
.testata .sotto .muto { color:var(--muted); }
.testata .sotto .aiuto { margin-left:4px; }
.testata .destra { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@keyframes entra { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
/* Transizioni native: tra pagine (dove il browser le supporta) e per gli spostamenti nella stessa pagina. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:160ms; animation-timing-function:var(--ease-brand); }
::view-transition-group(*) { animation-duration:220ms; animation-timing-function:var(--ease-brand); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ---- barra in basso sul telefono (nera) ---- */
.tab { display:none; }
@media (max-width: 860px) {
  .app { grid-template-columns:1fr; }
  .side { display:none; }
  .pagina { padding:16px 16px 88px; }
  .tab { display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--tab-bg); border-top:1px solid var(--tab-border); z-index:20; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab a { flex:1; text-align:center; color:var(--neutral-400); font-size:11px; font-weight:500; padding:6px 2px 2px; border-top:2px solid transparent; }
  .tab a .ic { display:block; font-size:20px; line-height:1.2; }
  .tab a.attiva { color:var(--brand-white); border-top-color:var(--brand-primary); font-weight:700; }
}
@media (max-width: 640px) { h1 { font-size:24px; } h2 { font-size:18px; } }

/* ---- componenti ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); padding:16px 18px; }
@media (max-width:640px) { .card { padding:14px; } }
.card.click { transition:border-color var(--duration-hover) var(--ease-brand); }
.card.click:hover { border-color:var(--line-forte); }
.griglia { display:grid; gap:14px; }
.griglia.kpi { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.griglia.due { grid-template-columns:1fr 1fr; }
.griglia.tre { grid-template-columns:repeat(3, 1fr); }
.griglia.scheda { grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); }
.griglia.messaggi { grid-template-columns:minmax(0, 1fr) 300px; align-items:start; }
.griglia > * { min-width:0; }
/* break-word (non "anywhere"): spezza solo una parola che da sola non entra nella riga e NON cambia la larghezza
   minima di tabelle e colonne; con "anywhere" le celle si restringevano fino a spezzare "Prodotto" in "Prod/otto". */
.pagina { overflow-wrap:break-word; }
@media (max-width: 1000px) { .griglia.due, .griglia.tre, .griglia.scheda, .griglia.messaggi { grid-template-columns:1fr; } }
.kpi { border-top:3px solid var(--line-forte); }
.kpi .num { font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .eti { color:var(--muted); font-size:13px; margin-top:4px; }
.kpi.primario { border-top-color:var(--brand-primary); }
.kpi.ok { border-top-color:var(--ok); } .kpi.ok .num { color:var(--ok); }
.kpi.warn { border-top-color:var(--warn); } .kpi.warn .num { color:var(--warn); }
.kpi.bad { border-top-color:var(--bad); } .kpi.bad .num { color:var(--bad); }
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:600; white-space:nowrap; line-height:1.5; }
.b-info_mancanti, .b-nuova { background:var(--bad-bg); color:var(--bad); }
.b-in_attesa_invio { background:var(--fase-nuova-bg); color:var(--fase-nuova-fg); }
.b-da_assegnare, .b-da_chiamare, .b-warn { background:var(--warn-bg); color:var(--warn); }
.b-messaggio_1, .b-messaggio_2, .b-messaggio_3, .b-info { background:var(--neutral-bg); color:var(--ink-2); }
.b-ha_risposto, .b-ok { background:var(--ok-bg); color:var(--ok); }
.b-non_rispondente, .b-persa, .b-storica, .b-grigio { background:var(--neutral-bg); color:var(--muted); }
.b-bad { background:var(--bad-bg); color:var(--bad); }
.b-prova { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.avviso { border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--radius-panel); padding:10px 14px; margin-bottom:14px; animation:entra var(--duration-reveal) var(--ease-brand) both; }
.avviso.warn { border-left-color:var(--warn); }
.nota { color:var(--muted); font-size:13px; margin:4px 0 10px; max-width:75ch; }
button, .btn { font:inherit; font-size:14px; font-weight:600; padding:9px 16px; line-height:1.3; border-radius:var(--radius-panel); border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background var(--duration-hover) var(--ease-brand), color var(--duration-hover) var(--ease-brand), border-color var(--duration-hover) var(--ease-brand); }
button:hover, .btn:hover { background:var(--brand-primary); border-color:var(--brand-primary); color:var(--brand-black); }
button.secondario, .btn.secondario { background:transparent; color:var(--ink); border-color:var(--ink); }
button.secondario:hover, .btn.secondario:hover { background:var(--btn-bg); color:var(--btn-fg); }
button.pericolo { background:transparent; color:var(--bad); border-color:var(--bad); }
button.pericolo:hover { background:var(--bad); color:var(--brand-white); border-color:var(--bad); }
button.piccolo, .btn.piccolo { padding:6px 11px; font-size:13px; white-space:nowrap; flex:none; }   /* etichette corte: mai spezzate ("o" sopra "k") */
button.lungo { white-space:normal; text-align:left; }
.campo-riga { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.campo-riga input { flex:1 1 140px; min-width:0; }
.campo-riga button { flex:0 0 auto; white-space:nowrap; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:disabled:hover { background:var(--btn-bg); color:var(--btn-fg); }
input[type=text], input[type=tel], input[type=search], input[type=number], select, textarea { font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--input-border); border-radius:var(--radius-panel); background:var(--input-bg); color:var(--ink); max-width:100%; transition:border-color var(--duration-hover) var(--ease-brand); }
input:hover, select:hover, textarea:hover { border-color:var(--line-forte); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand-primary); outline-offset:1px; border-color:var(--line-forte); }
textarea { width:100%; min-height:96px; resize:vertical; line-height:1.55; }
select.inline { padding:4px 8px; font-size:13px; }
label.check { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
input[type=checkbox] { accent-color:var(--brand-primary); width:16px; height:16px; }
.campi { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:12px 0; }
.campi label, .campo label { display:block; font-size:12px; font-weight:500; color:var(--muted); margin-bottom:5px; }
.campi label .aiuto, .campo label .aiuto { margin-left:4px; }
.campi input[type=text], .campi input[type=tel], .campi select, .campo select { width:100%; }
@media (max-width:760px) { .campi { grid-template-columns:1fr; } }
.azioni { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
@media (max-width:640px) { .azioni > button:not(.piccolo):not(.link), .azioni > .btn:not(.piccolo), .azioni > form > button:not(.piccolo):not(.link) { flex:1 1 auto; justify-content:center; text-align:center; } }
form.riga { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---- filtri ---- */
.filtri { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filtri input[type=search] { min-width:240px; flex:1; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--radius-panel); border:1px solid var(--input-border); background:var(--card); color:var(--ink); font-size:13px; font-weight:500; transition:border-color var(--duration-hover) var(--ease-brand), background var(--duration-hover) var(--ease-brand), color var(--duration-hover) var(--ease-brand); }
.chip:hover { border-color:var(--line-forte); }
.chip.attiva { background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border); }

.chips-fasi { display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 14px; }
.chips-fasi .chip b { font-weight:700; }
.chips-fasi .chip:not(.attiva) b { color:var(--muted); }
.chips-fasi .chip.attiva b { color:var(--brand-primary); }

/* ---- tabelle ---- */
.scorri { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scorri table.t { min-width:880px; }
.t td.nome a { white-space:nowrap; }
.t td .muto.piccolo, .t td .meta { max-width:280px; overflow-wrap:anywhere; }   /* email lunghe: si spezzano qui, non allargano la tabella */
table.t { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); overflow:hidden; }
.t th, .t td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.t th { font-size:12px; font-weight:600; color:var(--muted); background:var(--subtle); white-space:nowrap; }
.t td { overflow-wrap:normal; }   /* le parole nelle celle restano intere: la tabella scorre in orizzontale se serve */
.t td.num, .t th.num { text-align:right; font-variant-numeric:tabular-nums; }
.t tbody tr { transition:background var(--duration-hover) var(--ease-brand); }
.t tbody tr:hover { background:var(--subtle); }
.t tr:last-child td { border-bottom:0; }
.t td.nome a { color:var(--ink); font-weight:700; border-bottom:2px solid transparent; transition:border-color var(--duration-hover) var(--ease-brand); }
.t td.nome a:hover { border-bottom-color:var(--brand-primary); }
@media (max-width:860px) {
  .scorri { overflow:visible; } .scorri table.t { min-width:0; }
  .t td.nome a { white-space:normal; } .t td .muto.piccolo, .t td .meta { max-width:none; }
  table.t, .t tbody, .t tr, .t td { display:block; width:100%; }
  .t thead { display:none; }
  table.t { background:transparent; border:0; }
  .t tr { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); margin-bottom:10px; padding:6px 0; }
  .t td { border:0; padding:6px 14px; }
  .t td::before { content:attr(data-etichetta); display:block; font-size:11px; font-weight:500; color:var(--muted); }
  .t td.nome { font-size:17px; } .t td.nome::before, .t td.senza::before { display:none; }
}

/* ---- coda unica "Da fare adesso": una riga per lead, colore a sinistra = motivo ---- */
.coda { display:flex; flex-direction:column; gap:8px; }
.riga-coda { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--radius-panel); background:var(--card); }
.riga-coda.col-ok { border-left-color:var(--ok); } .riga-coda.col-warn { border-left-color:var(--warn); } .riga-coda.col-bad { border-left-color:var(--bad); } .riga-coda.col-info { border-left-color:var(--muted); }
.riga-coda.col-att.liv-alta { border-left-color:var(--att-alta); } .riga-coda.col-att.liv-oggi { border-left-color:var(--att-oggi); } .riga-coda.col-att.liv-pianificare { border-left-color:var(--att-neutro); } .riga-coda.col-att.liv-programmata { border-left-color:var(--att-prog); }
.riga-coda .chi { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.riga-coda .chi > b { font-size:15px; }
.riga-coda .chi b a { color:var(--ink); }
.riga-coda .passo { font-size:13px; color:var(--ink-2); }
.riga-coda .passo .pallino { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--att-neutro); vertical-align:middle; margin-right:2px; }
.riga-coda .passo .pallino.liv-alta { background:var(--att-alta); } .riga-coda .passo .pallino.liv-oggi { background:var(--att-oggi); } .riga-coda .passo .pallino.liv-programmata { background:var(--att-prog); }
.riga-coda .azioni-rapide { display:flex; gap:6px; align-items:center; flex:none; flex-wrap:wrap; margin:0; }
.riga-coda .quando { color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.senza-passo { color:var(--att-oggi); font-weight:600; font-size:12px; }
a.senza-passo:hover { text-decoration:underline; }
.kcard .badge.mini { font-size:11px; padding:1px 6px; }
.b-in_attesa { background:var(--neutral-bg); color:var(--ink-2); } .b-chiuse { background:var(--neutral-bg); color:var(--muted); }
@media (max-width:640px) { .riga-coda { flex-wrap:wrap; } .riga-coda .chi { flex-basis:100%; } .riga-coda .quando { margin-left:auto; } }

/* ---- liste "da fare" ---- */
.lista { display:flex; flex-direction:column; gap:8px; }
.riga-lead { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--card); border-left:3px solid var(--line); transition:border-color var(--duration-hover) var(--ease-brand), background var(--duration-hover) var(--ease-brand); }
.riga-lead:hover { background:var(--subtle); border-left-color:var(--brand-primary); }
.riga-lead .chi { flex:1; min-width:0; }
.riga-lead .chi b { display:block; color:var(--ink); font-size:15px; }
.riga-lead .chi span { color:var(--muted); font-size:13px; }
.riga-lead .quando { color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width: 520px) { .riga-lead { flex-wrap:wrap; } .riga-lead .chi { flex-basis:100%; } .riga-lead .quando { margin-left:auto; } }
.vuoto { color:var(--muted); padding:18px; text-align:center; border:1px dashed var(--input-border); border-radius:var(--radius-panel); }
.barre { display:flex; flex-direction:column; gap:8px; }
.barra { display:grid; grid-template-columns:120px 1fr 36px; gap:10px; align-items:center; font-size:13px; }
.barra b { text-align:right; font-variant-numeric:tabular-nums; }
.barra .fill { height:6px; background:var(--neutral-bg); overflow:hidden; }
.barra .fill i { display:block; height:100%; background:var(--brand-primary); transition:width var(--duration-panel) var(--ease-brand); }

/* ---- scheda lead ---- */
.scheda-testa { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.scheda-testa .avatar { width:52px; height:52px; border-radius:var(--radius-panel); background:var(--avatar-bg); color:var(--avatar-fg); font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; flex:none; }
.scheda-testa .dati { flex:1; min-width:220px; }
.scheda-testa .dati .contatti { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline li { position:relative; padding:0 0 14px 26px; }
.timeline li::before { content:""; position:absolute; left:5px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--muted); }
.timeline li::after { content:""; position:absolute; left:9px; top:18px; bottom:0; width:2px; background:var(--line); }
.timeline li:last-child::after { display:none; }
.timeline li.ok::before { background:var(--ok); } .timeline li.info::before { background:var(--ink); } .timeline li.warn::before { background:var(--warn); } .timeline li.bad::before { background:var(--bad); }
.timeline .q { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.timeline .testo { background:var(--subtle); border-left:3px solid var(--brand-primary); padding:8px 10px; margin-top:4px; white-space:pre-wrap; font-size:14px; }

/* ---- pipeline ---- */
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 1fr); gap:12px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; scroll-padding:0 16px; }
@media (max-width:640px) { .board { grid-auto-columns:84vw; margin:0 -16px; padding:0 16px 10px; } }
.col { background:var(--subtle); border-radius:var(--radius-panel); padding:10px; min-height:200px; scroll-snap-align:start; border-top:3px solid var(--line-forte); }
.col h3 { display:flex; align-items:center; gap:8px; padding:4px 6px 10px; }
.col h3 .n { margin-left:auto; color:var(--muted); font-weight:500; font-size:13px; }
.col.over { outline:2px dashed var(--brand-primary); outline-offset:-2px; }
.kcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); padding:10px 12px; margin-bottom:8px; cursor:grab; transition:border-color var(--duration-hover) var(--ease-brand); }
.kcard:hover { border-color:var(--line-forte); }
.kcard.dragging { opacity:.5; }
.kcard b a { color:var(--ink); font-size:14px; }
.kcard .sub { color:var(--muted); font-size:12px; margin-top:2px; }

/* ---- grafico (una serie sola: fucsia) ---- */
.grafico { width:100%; height:auto; max-height:160px; display:block; overflow:visible; }
.grafico .asse { stroke:var(--line); stroke-width:1; }
.grafico .barra-f { fill:var(--brand-primary); transition:opacity var(--duration-hover) var(--ease-brand); }
.grafico .barra-g:hover .barra-f, .grafico .barra-g:focus-visible .barra-f { opacity:.75; }
.grafico .barra-g:focus-visible { outline:none; }
.grafico .valore { font-size:11px; font-weight:700; fill:var(--ink); }
.grafico .giorno { font-size:10px; fill:var(--muted); }
/* spostamento dalla pipeline senza trascinare: solo dove il trascinamento è scomodo */
.kcard .sposta { display:none; margin-top:6px; }
@media (hover: none), (max-width: 860px) { .kcard .sposta { display:block; } .kcard .sposta select { width:100%; } }

/* ---- attività: indicatore sulle card e liste ---- */
:root { --att-alta:#f97316; --att-oggi:#eab308; --att-prog:#22c55e; --att-neutro:#a3a3a3; }
@media (prefers-color-scheme: dark) { :root { --att-alta:#fb923c; --att-oggi:#facc15; --att-prog:#4ade80; --att-neutro:#a3a3a3; } }
.kcard .riga-fondo { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.att-ind { display:inline-flex; align-items:center; gap:3px; min-width:28px; min-height:28px; padding:2px 6px; margin:-4px -6px -4px 0; border-radius:6px; color:var(--att-neutro); font-size:12px; font-weight:700; line-height:1; transition:background var(--duration-hover) var(--ease-brand); }
.att-ind:hover, .att-ind:focus-visible { background:var(--subtle); }
.att-ind.liv-alta { color:var(--att-alta); } .att-ind.liv-oggi { color:var(--att-oggi); } .att-ind.liv-programmata { color:var(--att-prog); } .att-ind.liv-pianificare { color:var(--att-neutro); }
.att-ind svg { display:block; }
.tip { white-space:pre-line; }
ul.attivita { list-style:none; margin:0 0 10px; padding:0; }
.att { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.att:last-child { border-bottom:0; }
.att .pallino { width:10px; height:10px; border-radius:50%; flex:none; background:var(--att-neutro); }
.att.liv-alta .pallino { background:var(--att-alta); } .att.liv-oggi .pallino { background:var(--att-oggi); } .att.liv-programmata .pallino { background:var(--att-prog); }
.att .cosa { flex:1; min-width:0; display:flex; flex-direction:column; }
.att .cosa b a { color:var(--ink); }
.att form.riga { gap:6px; }
.att form.riga input[type=date] { padding:4px 6px; font-size:13px; }
#prossima:target .att.principale { background:var(--subtle); outline:2px solid var(--brand-primary); outline-offset:2px; border-radius:var(--radius-panel); padding:8px; }
.nuova-att { margin-top:8px; }
.nuova-att input[type=text] { flex:1; min-width:180px; }
@media (max-width:640px) { .att { flex-wrap:wrap; } .att .cosa { flex-basis:calc(100% - 20px); } .att form.riga { padding-left:20px; } }

/* ---- riassunto e prossimo passo ---- */
.griglia.riassunto-passo { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); align-items:start; }
@media (max-width:1000px) { .griglia.riassunto-passo { grid-template-columns:1fr; } }
ul.sintesi { margin:4px 0 10px; padding-left:20px; }
ul.sintesi li { margin:3px 0; }
ul.sintesi.suggerito li::marker { color:var(--brand-primary); }
ul.sintesi.chiarire li::marker { color:var(--att-oggi); }
ul.sintesi.mancanti li { color:var(--muted); }
details.fonti summary { cursor:pointer; margin-top:6px; }
details.fonti ul { padding-left:18px; }
.riassunto-azioni { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.riassunto-azioni form { margin:0; }
.riassunto-azioni button.pericolo-link { margin-left:auto; }
ul.attivita.compatta .att { padding:6px 0; }
.att.principale { background:var(--subtle); border:1px solid var(--line); border-radius:var(--radius-panel); padding:10px 12px; }
.att.principale.liv-alta { border-left:3px solid var(--att-alta); } .att.principale.liv-oggi { border-left:3px solid var(--att-oggi); } .att.principale.liv-programmata { border-left:3px solid var(--att-prog); }
details.dettagli-att summary { cursor:pointer; }
ul.registro-note { list-style:none; margin:14px 0 0; padding:0; }
ul.registro-note li { border-top:1px solid var(--line); padding:10px 0; }
.testo-nota { white-space:pre-wrap; margin:4px 0; line-height:1.5; }
details.correggi summary { cursor:pointer; }
details.correggi textarea { min-height:72px; margin-top:6px; }

/* ---- messaggi ---- */
.blocco { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); padding:18px 20px; margin:0 0 16px; }
.blocco h3 { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:16px; }
.passo { border-top:1px solid var(--line); padding:14px 0 6px; }
.passo .testa { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.quando { display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-size:14px; }
.quando input { width:60px; }
.stato { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:700; }
.stato-bozza { background:var(--neutral-bg); color:var(--ink-2); }
.stato-in_approvazione { background:var(--warn-bg); color:var(--warn); }
.stato-approvato { background:var(--ok-bg); color:var(--ok); }
.stato-rifiutato { background:var(--bad-bg); color:var(--bad); }
.anteprima { background:var(--subtle); border-left:3px solid var(--brand-primary); padding:8px 10px; margin-top:8px; font-size:14px; white-space:pre-wrap; }
.legenda code { background:var(--subtle); padding:1px 5px; border-radius:4px; }
.ripetuta { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:700; background:var(--bad-bg); color:var(--bad); }
.momenti { margin:4px 0 0; padding:0; list-style:none; font-size:13px; color:var(--muted); }
.momenti li::before { content:"· "; }
form.chiamato { display:flex; gap:4px; align-items:center; margin-top:4px; font-size:13px; font-weight:normal; }
form.chiamato input[type=text] { width:120px; padding:4px 8px; font-size:13px; }
form.chiamato input.manca, input.manca { border-color:var(--bad); background:var(--bad-bg); }
a.tel, a.wa { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:var(--radius-panel); border:1px solid var(--ink); color:var(--ink); font-size:13px; font-weight:700; white-space:nowrap; transition:background var(--duration-hover) var(--ease-brand), color var(--duration-hover) var(--ease-brand); }
a.tel:hover, a.wa:hover { background:var(--btn-bg); color:var(--btn-fg); }

/* ---- pagina messaggi: sequenza ---- */
.sequenza { list-style:none; margin:0; padding:0; }
.passo-seq { position:relative; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--card); margin-bottom:10px; transition:border-color var(--duration-hover) var(--ease-brand); }
.passo-seq.aperto { border-color:var(--line-forte); }
.passo-seq + .passo-seq::before { content:""; position:absolute; left:27px; top:-11px; height:11px; width:2px; background:var(--line); }
.testa-seq { width:100%; display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:none; border:0; color:var(--ink); text-align:left; font-weight:400; font-size:14px; cursor:pointer; border-radius:var(--radius-panel); }
.testa-seq:hover { background:var(--subtle); }
.testa-seq .num { flex:none; width:28px; height:28px; border-radius:50%; background:var(--btn-bg); color:var(--btn-fg); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; }
.testa-seq .titolo { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.testa-seq .titolo .muto { font-size:13px; }
.testa-seq .estratto { color:var(--ink-2); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.testa-seq .freccia { color:var(--muted); font-size:20px; line-height:1; transition:transform var(--duration-reveal) var(--ease-brand); }
.passo-seq.aperto .testa-seq .freccia { transform:rotate(90deg); }
.corpo-seq { padding:0 14px 14px 54px; animation:entra 220ms var(--ease-brand) both; }
.editor .colonne, .corpo-seq .colonne { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; }
/* barra delle variabili: una riga ordinata (etichetta corta, pulsanti a 12 px, contatore a destra); sugli schermi
   stretti l'etichetta e il contatore prendono una riga propria, i pulsanti restano insieme */
.editor .strumenti { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.editor .strumenti .eti-var { font-size:12px; color:var(--muted); flex:none; margin-right:2px; cursor:help; }
.editor .strumenti button.var { font-size:12px; padding:4px 9px; white-space:nowrap; flex:none; min-height:0; }
.editor .strumenti .contatore { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (pointer: coarse) { .editor .strumenti button.var { min-height:36px; } }
@media (max-width:480px) { .editor .strumenti .eti-var { flex-basis:100%; margin:0; } .editor .strumenti .contatore { flex-basis:100%; text-align:right; margin-left:0; } }
.editor .quando { margin-top:10px; flex-wrap:wrap; }
.telefono { background:var(--subtle); border-radius:var(--radius-panel); padding:12px; display:flex; flex-direction:column; gap:6px; }
.anteprima-lato { background:var(--subtle); border-radius:var(--radius-panel); padding:12px; display:flex; flex-direction:column; gap:6px; align-self:start; position:sticky; top:16px; }
.bolla { background:var(--card); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--brand-primary); border-radius:2px 10px 10px 10px; padding:10px 12px; font-size:15px; line-height:1.5; white-space:pre-wrap; transition:opacity 160ms var(--ease-brand); }
.bolla.in-uso { border-left-color:var(--muted); color:var(--ink-2); font-size:14px; }
.riga-prodotto { margin:-4px 0 12px; font-size:15px; }
.h-seq { margin:0; font-size:inherit; font-weight:inherit; }
.eti-testo { display:block; font-size:13px; color:var(--muted); margin:6px 0 6px; }
.editor textarea { font-size:16px; line-height:1.55; min-height:150px; }
.campi.pianifica { grid-template-columns:200px 120px; margin:0 0 8px; }
.campi.pianifica input { width:100%; }
.azioni.salva { align-items:center; }
.non-salvato { color:var(--warn); font-size:13px; font-weight:700; }
button.link { background:none; border:0; padding:0; color:var(--ink); font-size:inherit; font-weight:700; text-decoration:underline; text-decoration-color:var(--brand-primary); text-underline-offset:3px; cursor:pointer; }
button.link:hover { background:none; color:var(--brand-primary); }
button.pericolo-link { color:var(--bad); text-decoration-color:var(--bad); margin-left:auto; font-size:13px; }
button.pericolo-link:hover { color:var(--bad); }
.approvazione { border-top:1px solid var(--line); margin-top:14px; padding-top:10px; }
.tappe .ultima { margin-left:auto; }
@media (max-width:1100px) { .corpo-seq .colonne { grid-template-columns:1fr; } .anteprima-lato { position:static; } }
.tappe { display:flex; align-items:center; gap:8px; margin:14px 0 4px; font-size:12px; color:var(--muted); }
.tappe .tappa { padding:2px 8px; border-radius:4px; border:1px solid var(--line); }
.tappe .tappa.fatta { border-color:var(--brand-primary); color:var(--ink); font-weight:700; }
.tappe .tappa.errore { border-color:var(--bad); color:var(--bad); }
.tappe i { flex:1; height:2px; background:var(--line); max-width:40px; }
.azioni.meta { margin-top:8px; }
details.dettagli { padding:0; }
details.dettagli summary { cursor:pointer; padding:14px 18px; list-style:none; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
details.dettagli summary::-webkit-details-marker { display:none; }
details.dettagli summary::before { content:"›"; color:var(--muted); font-size:18px; line-height:1; transition:transform var(--duration-reveal) var(--ease-brand); }
details.dettagli[open] summary::before { transform:rotate(90deg); }
details.dettagli > form, details.dettagli > p { padding:0 18px 14px; animation:entra var(--duration-reveal) var(--ease-brand) both; }
.campi.uno { grid-template-columns:1fr; }
@media (max-width:860px) { .corpo-seq { padding:0 12px 12px; } .passo-seq + .passo-seq::before { display:none; } .chips-fasi { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } .chips-fasi .chip { flex:none; } .campi.pianifica { grid-template-columns:1fr 1fr; } }

/* ---- tooltip condiviso ---- */
.tip { position:absolute; z-index:60; max-width:280px; padding:10px 12px; border-radius:8px; background:#1a1a1a; color:#fff; border:1px solid #3a3a3a; font-size:13px; line-height:1.45; font-weight:400; box-shadow:0 6px 20px rgba(0,0,0,.35); opacity:0; transform:translateY(4px); transition:opacity 180ms var(--ease-brand), transform 180ms var(--ease-brand); pointer-events:auto; }
.tip[data-dove="sotto"] { transform:translateY(-4px); }
.tip.visibile { opacity:1; transform:none; transition:opacity 180ms var(--ease-brand), transform 180ms var(--ease-brand); }
.tip:not(.visibile) { transition-duration:120ms; }
.tip::before { content:""; position:absolute; left:50%; margin-left:-5px; border:5px solid transparent; }
.tip[data-dove="sopra"]::before { top:100%; border-top-color:#3a3a3a; }
.tip[data-dove="sotto"]::before { bottom:100%; border-bottom-color:#3a3a3a; }
.tip[data-dove="lato"]::before { display:none; }
@media (prefers-color-scheme: dark) { .tip { background:#262626; border-color:#4a4a4a; } .tip[data-dove="sopra"]::before { border-top-color:#4a4a4a; } .tip[data-dove="sotto"]::before { border-bottom-color:#4a4a4a; } }
.aiuto { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0; border-radius:50%; border:1px solid var(--muted); background:transparent; color:var(--muted); font-size:12px; font-weight:700; line-height:1; vertical-align:middle; margin-left:6px; cursor:help; }
.aiuto:hover, .aiuto:focus-visible { border-color:var(--brand-primary); color:var(--brand-primary); background:transparent; }

/* ---- tocco: aree comode dove si usa il dito ---- */
@media (pointer: coarse) {
  button:not(.aiuto):not(.link):not(.sezione-toggle), .btn, a.tel, a.wa, .chip, .att-ind { min-height:var(--tocco); }
  button.piccolo, .btn.piccolo { min-height:var(--tocco); }
  .aiuto { width:28px; height:28px; font-size:13px; }
  .tab a { min-height:var(--tocco); }
  .t td.nome a, .riga-lead { min-height:var(--tocco); }
}

/* ---- guida ---- */
.guida { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px; align-items:start; }
.guida .indice { position:sticky; top:16px; }
.guida .indice a { display:block; padding:6px 10px; border-radius:6px; color:var(--ink); font-size:14px; border-left:2px solid transparent; }
.guida .indice a:hover { background:var(--subtle); }
.guida .indice a.attiva { border-left-color:var(--brand-primary); font-weight:700; }
.guida section.sezione { scroll-margin-top:16px; margin-bottom:10px; }
.guida section h3 { font-size:15px; margin:14px 0 4px; }
.guida .serve { color:var(--muted); margin:0 0 8px; }
.guida ol, .guida ul { margin:6px 0 10px; padding-left:22px; }
.guida li { margin:4px 0; }
.guida .termine { border-bottom:2px solid var(--brand-primary); font-weight:700; }
.guida .risultato { background:var(--subtle); border-left:3px solid var(--ok); padding:8px 12px; border-radius:0 8px 8px 0; margin:8px 0; }
.guida .problema { background:var(--subtle); border-left:3px solid var(--warn); padding:8px 12px; border-radius:0 8px 8px 0; margin:8px 0; }
.guida mark { background:var(--brand-primary); color:#000; padding:0 2px; border-radius:2px; }
.guida .nessuno { color:var(--muted); padding:20px 0; }
@media (max-width:1000px) { .guida { grid-template-columns:1fr; } .guida .indice { position:static; display:flex; gap:4px; flex-wrap:wrap; } .guida .indice a { border-left:0; border:1px solid var(--line); } .guida .indice a.attiva { border-color:var(--brand-primary); } }

/* ---- sezione espandibile con riepilogo (componente condiviso) ----
   <section class="sezione" data-aperta="0|1"> testa (h2/h3 > button.sezione-toggle) + sintesi sempre visibile + corpo animato. */
.sezione { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); }
.sezione + .sezione, .griglia > .sezione { margin-top:0; }
.sezione-testa { display:flex; align-items:center; gap:8px; padding:12px 16px; min-height:48px; }
.sezione-testa .h-sez { margin:0; flex:1; min-width:0; font-size:inherit; font-weight:inherit; }
.sezione-toggle { width:100%; display:flex; align-items:center; gap:10px; min-width:0; min-height:32px; margin:-6px 0; padding:6px 0; background:none; border:0; border-radius:6px; color:var(--ink); text-align:left; font:inherit; cursor:pointer; transition:none; }
.sezione-toggle:hover { background:none; color:var(--ink); border-color:transparent; }
.sezione-toggle:hover .sezione-titolo { text-decoration:underline; text-decoration-color:var(--brand-primary); text-underline-offset:4px; }
.sezione-toggle .chevron { flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); }
.sezione-toggle .chevron::before { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 200ms var(--ease-brand); }
.sezione[data-aperta="1"] .sezione-toggle .chevron::before { transform:translateY(2px) rotate(225deg); }
.sezione-titolo { font-size:var(--t-sezione); font-weight:var(--peso-sezione); letter-spacing:-.005em; color:var(--ink); min-width:0; }
.sezione.riquadro .sezione-titolo { font-size:var(--t-riquadro); font-weight:var(--peso-riquadro); letter-spacing:0; }
.sezione.riquadro .sezione-testa { padding:10px 16px; min-height:44px; }
.sezione-testa .badge { flex:none; }
.sezione-n { background:var(--neutral-bg); color:var(--muted); }
.sezione-azioni { display:flex; align-items:center; gap:6px; flex:none; }
.sezione-sintesi { padding:0 16px 12px 48px; color:var(--ink-2); font-size:14px; line-height:1.5; }
.sezione-sintesi .meta, .sezione-sintesi .muto { color:var(--muted); }
.sezione-sintesi .att { border-bottom:0; padding:6px 0 0; }
.sezione[data-aperta="1"] .sezione-sintesi.solo-chiusa { display:none; }
.sezione-corpo { display:grid; grid-template-rows:0fr; transition:grid-template-rows 200ms var(--ease-brand); }
.sezione[data-aperta="1"] .sezione-corpo { grid-template-rows:1fr; }
.sezione-corpo[hidden] { display:none; }
.sezione-interno { min-height:0; overflow:hidden; padding:0 16px 16px; }
.sezione.ferma .sezione-interno { overflow:visible; }
.sezione-interno > :first-child { margin-top:0; }
.sezione.leggera { background:transparent; border:0; }
.sezione.leggera .sezione-testa, .sezione.leggera .sezione-interno { padding-left:0; padding-right:0; }
.sezione.leggera .sezione-sintesi { padding-left:32px; }
@media (max-width:640px) { .sezione-testa { padding:10px 14px; } .sezione-sintesi { padding:0 14px 12px 14px; } .sezione-interno { padding:0 14px 14px; } .sezione.leggera .sezione-sintesi { padding-left:0; } }
@media (prefers-reduced-motion: reduce) { .sezione-corpo { transition:none; } }
.gruppo-titolo { display:flex; align-items:center; gap:8px; margin:14px 0 6px; font-size:14px; font-weight:600; color:var(--ink-2); }
.gruppo-titolo:first-child { margin-top:0; }
.gruppo-titolo .badge { font-weight:600; }

/* ---- toast ---- */
/* ---- conferma (al posto della finestra grigia del browser) ---- */
dialog.conferma { border:1px solid var(--line); border-left:4px solid var(--bad); border-radius:var(--radius-panel); background:var(--card); color:var(--ink); padding:18px 20px; width:min(440px, 92vw); box-shadow:0 16px 48px rgba(0,0,0,.35); font:inherit; }
dialog.conferma::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
dialog.conferma[open] { animation:entra var(--duration-reveal) var(--ease-brand); }
dialog.conferma h2 { margin:0 0 6px; font-size:17px; }
dialog.conferma p { margin:0 0 16px; color:var(--ink-2); line-height:1.5; }
dialog.conferma .azioni { display:flex; gap:8px; justify-content:flex-end; margin:0; }
.toast.errore { border-left-color:var(--bad); }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--btn-bg); color:var(--btn-fg); border-left:4px solid var(--brand-primary); padding:10px 16px; border-radius:var(--radius-panel); font-size:14px; z-index:50; animation:toast 4s var(--ease-brand) both; max-width:92vw; }
@keyframes toast { 0% { opacity:0; transform:translate(-50%, 8px);} 8% { opacity:1; transform:translate(-50%, 0);} 85% { opacity:1;} 100% { opacity:0; transform:translate(-50%, 6px);} }
@media (max-width:860px) { .toast { bottom:80px; } }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }