/* ============================================================
   Dashboard Il Marketing — design system v3 (da design/mockup-home.html)
   DESIGN TOKENS: unica fonte di verità. Griglia 4px.
   ============================================================ */
:root{
    --bg:          #F7F8FA;
    --surface:     #FFFFFF;
    --surface-alt: #FBFCFD;
    --surface-2:   #E9EDF4;
    --border:      #E4E7EC;
    --border-strong:#D0D5DD;
    --line:        #E4E7EC;

    --ink:      #101828;
    --ink-mid:  #475467;
    --ink-soft: #5B6472;

    /* Accento unico (blu brand): navigazione e azioni, MAI stato.
       --accent = superfici piene (bottoni), --accent-link = accento usato come testo. */
    --accent:      #1B3A8F;
    --accent-hover:#16307A;
    --accent-link: #1B3A8F;
    --accent-soft: #EEF2FB;

    /* Semantici: SOLO stato di salute */
    --ok:        #067647;
    --ok-bg:     #ECFDF3;
    --ok-border: #ABEFC6;
    --warn:      #B54708;
    --warn-bg:   #FFFAEB;
    --warn-border:#FEDF89;
    --crit:      #B42318;
    --crit-bg:   #FEF3F2;
    --crit-border:#FDA29B;
    --crit-bg-strong:#FBDBD7;
    --idle:    #475467;
    --idle-bg: #F2F4F7;

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --radius:8px;
    --radius-sm:6px;

    /* Scala ombre: da appena percettibile a prominente (card/modal/widget) */
    color-scheme: light;
    --shadow-1: 0 1px 3px rgba(16,24,40,.10);
    --shadow-2: 0 6px 22px rgba(16,24,40,.30);
    --shadow-3: 0 24px 64px rgba(16,24,40,.30);
}

/* Tema scuro: si ridefiniscono solo i token, i componenti non cambiano.
   L'accento resta un blu (navigazione e azioni), i semantici restano solo stato di salute. */
@media (prefers-color-scheme: dark){
    :root{
        --bg:          #0E1219;
        --surface:     #161C26;
        --surface-alt: #1B222E;
        --surface-2:   #263041;
        --border:      #2A3444;
        --border-strong:#3B475C;
        --line:        #2A3444;

        --ink:      #E9EDF5;
        --ink-mid:  #B6C0D0;
        --ink-soft: #97A3B6;

        --accent:      #2E5BD8;
        --accent-hover:#3F6CE8;
        --accent-link: #8FB0FF;
        --accent-soft: #1B2540;

        --ok:        #4FC98A;
        --ok-bg:     #10281C;
        --ok-border: #1F5138;
        --warn:      #EBAE4B;
        --warn-bg:   #2A2011;
        --warn-border:#57411A;
        --crit:      #F58579;
        --crit-bg:   #2C1815;
        --crit-border:#5E2A24;
        --crit-bg-strong:#3E201B;
        --idle:    #9AA5B8;
        --idle-bg: #222B39;

        color-scheme: dark;
        --shadow-1: 0 1px 3px rgba(0,0,0,.45);
        --shadow-2: 0 6px 22px rgba(0,0,0,.55);
        --shadow-3: 0 24px 64px rgba(0,0,0,.65);
    }
    /* le poche superfici che nascono già scure non si invertono */
    .stars{color:#E5B454}
}

*{box-sizing:border-box;margin:0;padding:0}

body{
    background:var(--bg); color:var(--ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

.num, td.num, th.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; text-align:right}

h1{font-size:22px; font-weight:650; letter-spacing:-0.02em}
h2{letter-spacing:-0.01em}
a{color:var(--accent-link)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- Layout ---------- */
.app{display:grid; grid-template-columns:232px 1fr; min-height:100vh}

.side{background:#0F1B3D; color:#fff; padding:var(--s5) var(--s4); display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh}
.brand{font-weight:700; font-size:15px; letter-spacing:-0.01em; line-height:1.25; color:#fff}
.brand span{display:block; font-weight:500; font-size:10px; letter-spacing:0.14em; color:#8A97BD; margin-top:2px}
.nav{margin-top:var(--s6); display:flex; flex-direction:column; gap:2px}
.nav a, .nav .nav-off{
    display:flex; align-items:center; gap:var(--s3);
    padding:9px var(--s3); border-radius:var(--radius-sm);
    color:#C3CBE0; text-decoration:none; font-size:13.5px; font-weight:500;
}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.on{background:rgba(255,255,255,.10); color:#fff}
.nav .nav-off{color:#5C688F; cursor:default}
.nav .nav-off em{font-style:normal; font-size:10px; margin-left:auto; border:1px solid #2A3A66;
    padding:1px 6px; border-radius:20px}
.nav .badge{margin-left:auto; background:var(--crit); color:#fff; font-size:11px; font-weight:600;
    padding:1px 6px; border-radius:20px; line-height:1.5}
/* Il badge della bacheca è rosso solo se fra i messaggi nuovi c'è il tuo nome: il rosso
   deve voler dire «tocca a te», altrimenti smette di volere dire qualcosa. */
.nav .badge.badge-quieto{background:#3A4260; color:#C3CCE6}
/* due badge sulla stessa voce (Commenti): il secondo sta accanto al primo, non spinto a destra */
.nav .badge + .badge{margin-left:4px}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.side-foot{margin-top:auto; padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.08);
    font-size:12px; color:#8A97BD; display:flex; align-items:center; justify-content:space-between;
    gap:var(--s2); overflow-wrap:anywhere}
.side-foot button{background:none; border:1px solid #2A3A66; color:#8A97BD; border-radius:var(--radius-sm);
    padding:3px 9px; font-size:11.5px; cursor:pointer}
.side-foot button:hover{color:#fff; border-color:#8A97BD}
.nav-apri{display:none}

.main{padding:var(--s5) var(--s6) var(--s7); min-width:0}

.topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s5);
    gap:var(--s4); flex-wrap:wrap}
.sub{color:var(--ink-mid); font-size:13px; margin-top:2px}
.sync{display:flex; align-items:center; gap:var(--s3); font-size:12px; color:var(--ink-soft)}
.sync b{color:var(--ink-mid); font-weight:500}

/* ---------- Bottoni ---------- */
.btn-ghost{
    border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-mid);
    padding:6px 12px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:500; cursor:pointer;
    font-family:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn-ghost:hover{background:var(--surface-alt); color:var(--ink)}
.btn{
    background:var(--accent); color:#fff; border:none; padding:7px 14px; border-radius:var(--radius-sm);
    font-size:13px; font-weight:550; cursor:pointer; font-family:inherit; text-decoration:none;
    display:inline-flex; align-items:center; gap:6px; transition:background .15s;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn-block{width:100%; justify-content:center}
.btn-danger{background:var(--crit-bg); color:var(--crit)}
.btn-danger:hover{background:var(--crit-bg-strong)}
.btn-sm{padding:5px 10px; font-size:12.5px}

/* ---------- Form ---------- */
label{display:block; font-weight:500; font-size:12.5px; margin-bottom:var(--s3); color:var(--ink-mid)}
.scelta-cerca input,.mus-q,input[type="email"],input[type="password"],input[type="text"],input[type="number"],input[type="date"],
select,textarea{
    display:block; width:100%; margin-top:var(--s1);
    padding:7px 10px; font:inherit; font-size:13.5px; color:var(--ink);
    border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
    transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical}

/* ---------- Tendine con ricerca (assets/js/scelta.js, sui select[data-cerca]) ---------- */
.scelta-nativa{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
    margin:0 !important; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; opacity:0; pointer-events:none}
.scelta-bottone{display:flex; align-items:center; gap:var(--s2); width:100%; margin-top:var(--s1); min-height:36px;
    padding:7px 10px; font:inherit; font-size:13.5px; color:var(--ink); text-align:left; cursor:pointer;
    border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface);
    transition:border-color .15s, box-shadow .15s}
.scelta-bottone:hover{border-color:var(--accent)}
.scelta-bottone:focus-visible, .scelta-bottone[aria-expanded="true"]{outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft)}
.scelta-bottone:disabled{opacity:.55; cursor:not-allowed}
.scelta-bottone.scelta-errore{border-color:var(--crit); box-shadow:0 0 0 3px var(--crit-bg)}
.scelta-testo{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scelta-vuota .scelta-testo{color:var(--ink-soft)}
.scelta-freccia{flex:none; color:var(--ink-soft); font-size:11px}
.toolbar .scelta-bottone{width:auto; max-width:280px; margin-top:0}
.table .scelta-bottone{margin-top:0; min-width:180px; max-width:320px}
.scelta-pannello{position:absolute; z-index:9101; max-width:min(440px, calc(100vw - 16px)); background:var(--surface);
    border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-3);
    display:flex; flex-direction:column; max-height:min(420px, 70vh); overflow:hidden}
.scelta-cerca{display:flex; gap:var(--s1); padding:var(--s2); border-bottom:1px solid var(--border)}
.scelta-cerca input{margin:0; flex:1; min-width:0}
.scelta-chiudi{flex:none; width:36px; border:0; background:none; color:var(--ink-mid); font-size:16px; cursor:pointer;
    border-radius:var(--radius-sm)}
.scelta-chiudi:hover{background:var(--surface-2)}
.scelta-lista{list-style:none; margin:0; padding:var(--s1) 0; overflow-y:auto; overscroll-behavior:contain}
.scelta-voce{display:flex; flex-direction:column; gap:1px; padding:8px var(--s3); cursor:pointer; font-size:13.5px;
    color:var(--ink); line-height:1.3}
.scelta-voce small{font-size:11.5px; color:var(--ink-soft)}
.scelta-voce.scelta-su, .scelta-voce:hover{background:var(--accent-soft)}
.scelta-voce.scelta-attuale{font-weight:600; color:var(--accent-link)}
.scelta-voce.scelta-nulla{color:var(--ink-mid); border-bottom:1px solid var(--border); margin-bottom:var(--s1)}
.scelta-voce[aria-disabled="true"]{opacity:.45; cursor:not-allowed; background:none}
.scelta-nessuna{margin:0; padding:var(--s3); font-size:13px; color:var(--ink-soft)}
.scelta-fondo{position:fixed; inset:0; z-index:9100; background:rgba(16,24,40,.45)}
.scelta-pannello.scelta-foglio{position:fixed; left:0; right:0; bottom:0; top:auto; max-width:none; max-height:78vh;
    border-radius:14px 14px 0 0; padding-bottom:env(safe-area-inset-bottom, 0px)}
.scelta-foglio .scelta-cerca{padding:var(--s3)}
.scelta-foglio .scelta-voce{padding:12px var(--s4); font-size:15px}
.scelta-bloccata, .scelta-bloccata body{overflow:hidden}
@media (max-width:640px){ .toolbar .scelta-bottone{width:100%; max-width:none} }

.alert-msg{padding:10px var(--s4); border-radius:var(--radius); font-size:13px; margin-bottom:var(--s4)}
.alert-error{background:var(--crit-bg); color:var(--crit)}
.alert-ok{background:var(--ok-bg); color:var(--ok)}
.alert-warn{background:var(--warn-bg); color:var(--warn)}
.alert-info{background:var(--accent-soft); color:var(--accent-link)}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); margin-bottom:var(--s5)}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s4)}
.kpi .label{font-size:11.5px; color:var(--ink-mid); font-weight:500; letter-spacing:.01em}
.kpi .val{font-size:26px; font-weight:650; letter-spacing:-0.03em; margin-top:var(--s2);
    font-variant-numeric:tabular-nums}
.kpi .foot{font-size:11.5px; color:var(--ink-soft); margin-top:2px}
.kpi.alarm{border-color:var(--crit-border); background:var(--crit-bg)}
.kpi.alarm .val,.kpi.alarm .label{color:var(--crit)}

/* ---------- Sezioni ---------- */
section{margin-bottom:var(--s6)}
.sec-head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.sec-head h2{font-size:15px; font-weight:650}
.count{font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.spacer{flex:1}

/* ---------- Anomalie ---------- */
.alerts{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.alert{
    display:grid; grid-template-columns:3px 1fr 186px 170px 96px;
    align-items:center; gap:var(--s4);
    padding:var(--s3) var(--s4) var(--s3) 0;
    border-bottom:1px solid var(--border); cursor:pointer;
    color:inherit; text-decoration:none;
}
.alert:last-child{border-bottom:0}
.alert:hover{background:var(--surface-alt)}
.bar{height:100%; min-height:44px; border-radius:0 2px 2px 0}
.bar.crit{background:var(--crit)} .bar.warn{background:var(--warn)} .bar.idle{background:var(--idle)}

.who{min-width:0}
.who .client{font-size:11.5px; color:var(--ink-soft); font-weight:500; display:flex; align-items:center; gap:5px}
.who .what{font-size:13.5px; font-weight:550; letter-spacing:-0.005em; margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* il nome dell'anomalia può essere lungo: va a capo dentro la sua colonna invece di
   uscirne e finire sopra al dettaglio */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
    padding:3px 8px; border-radius:5px; white-space:normal; line-height:1.25; text-wrap:balance}
.tag .dot{flex:0 0 auto}
.tag.crit{background:var(--crit-bg); color:var(--crit)}
.tag.warn{background:var(--warn-bg); color:var(--warn)}
.tag.idle{background:var(--idle-bg); color:var(--idle)}
.tag .dot{opacity:1}

.detail{font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.detail b{color:var(--ink); font-weight:600}
.detail .crit-txt{color:var(--crit)} .detail .warn-txt{color:var(--warn)} .detail .soft-txt{color:var(--ink-soft)}
.since{font-size:12px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Pacing ---------- */
.pacing{margin-top:5px}
.track{position:relative; height:5px; background:var(--surface-2); border-radius:3px; overflow:visible}
.fill{position:absolute; inset:0 auto 0 0; border-radius:3px}
.fill.crit{background:var(--crit)} .fill.warn{background:var(--warn)} .fill.ok{background:var(--ok)}
.fill.idle{background:var(--idle)}
.today{position:absolute; top:-3px; width:2px; height:11px; background:var(--ink); border-radius:1px}
.today::after{content:""; position:absolute; top:-3px; left:-2px; width:6px; height:3px; background:var(--ink);
    border-radius:1px}
.legend{display:flex; gap:var(--s4); font-size:11px; color:var(--ink-soft); margin-top:var(--s2);
    align-items:center}
.legend i{display:inline-block; width:2px; height:9px; background:var(--ink); vertical-align:-1px; margin-right:5px}

.allgood{background:var(--ok-bg); border:1px solid var(--ok-border); color:var(--ok);
    border-radius:var(--radius); padding:var(--s4); font-size:13px; font-weight:550;
    display:flex; align-items:center; gap:var(--s3)}

/* ---------- Clienti ---------- */
.clients{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.client-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:var(--s4); cursor:pointer; color:inherit; text-decoration:none; display:block}
.client-card:hover{border-color:var(--border-strong)}
.cc-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.cc-name{font-size:13.5px; font-weight:600; letter-spacing:-0.005em}
.cc-meta{font-size:11.5px; color:var(--ink-soft); margin-top:1px}
.pill{font-size:11px; font-weight:600; padding:2px 7px; border-radius:20px; white-space:nowrap}
.pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.idle{background:var(--idle-bg); color:var(--idle)}
.warn-txt{color:var(--warn)} .crit-txt{color:var(--crit)} .ok-txt{color:var(--ok)} .soft-txt{color:var(--ink-soft)}
.callout-warn{display:flex; gap:var(--s2); align-items:flex-start; margin-top:var(--s3);
    padding:10px var(--s3); border-radius:var(--radius-sm); background:var(--warn-bg);
    color:var(--warn); font-size:13px; border:1px solid var(--warn-border)}
.cc-nums{display:flex; justify-content:space-between; align-items:baseline; margin-top:var(--s3);
    font-size:12px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.cc-nums b{color:var(--ink); font-weight:600; font-size:13px}

.note{margin-top:var(--s6); padding:var(--s4); border-left:3px solid var(--accent);
    background:var(--accent-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    font-size:12.5px; color:var(--ink-mid)}
.note b{color:var(--ink)}

/* ---------- Pagine dati (in attesa di redesign dedicato) ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s4)}
.muted{color:var(--ink-soft); font-size:12px}
/* testo secondario che porta uno stato: il semaforo vince sul grigio */
.muted.crit-txt{color:var(--crit)} .muted.warn-txt{color:var(--warn)} .muted.ok-txt{color:var(--ok)}
.nowrap{white-space:nowrap}

.table-wrap{overflow-x:auto; padding:0}
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{padding:9px var(--s4); text-align:left; vertical-align:top; white-space:nowrap}
.table tbody tr{border-top:1px solid var(--border)}
.table tbody tr:hover{background:var(--surface-alt)}
.table td strong{font-weight:600; color:var(--ink)}
.table thead th{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
.table tfoot th{border-top:1px solid var(--border); background:var(--surface-alt)}
.table .num{text-align:right}
.table-compact th,.table-compact td{padding:6px var(--s4)}
.table input[type="text"],.table select{margin-top:0; min-width:150px}
.table select{max-width:250px}
.row-mapped td:first-child{box-shadow:inset 3px 0 0 var(--ok)}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge-in_corso{color:var(--ok)}
.badge-standby{color:var(--warn)}
.badge-conclusa{color:var(--ink-soft)}
.badge-da_attivare{color:var(--accent-link)}
.badge-programmata{color:var(--accent-link)}
.badge-channel{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
    color:var(--ink-mid); background:var(--idle-bg); padding:2px 7px; border-radius:5px}
.badge-channel::before{display:none}
/* il numero delle campagne da sistemare riapre la finestra: se non sembra premibile,
   nessuno lo preme — ed è l'unica porta per rivedere la coda dopo un «Dopo» */
.badge[role="button"]{cursor:pointer}
.badge[role="button"]:hover{text-decoration:underline}
.badge[role="button"]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

.filters{display:flex; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap}
.chip{padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface);
    color:var(--ink-mid); text-decoration:none; font-size:12.5px; font-weight:500}
.chip:hover{border-color:var(--border-strong); color:var(--ink)}
.chip-active{background:var(--accent); color:#fff; border-color:var(--accent)}

.page-head{margin-bottom:var(--s4)}
.page-head p{color:var(--ink-mid); font-size:13px}
.page-head-actions{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s4); flex-wrap:wrap}

.client-block{padding:0; margin-bottom:var(--s4); overflow:hidden}
.client-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
    padding:var(--s3) var(--s4); flex-wrap:wrap}
.client-head h2{font-size:14px; font-weight:650}
.client-stats{display:flex; gap:var(--s4); color:var(--ink-soft); font-size:12px}
.client-stats strong{color:var(--ink)}

.section-title{font-size:14px; font-weight:650; margin:var(--s5) 0 var(--s3);
    display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.section-title .btn-sm{font-weight:500}
.budget-shifts{margin-bottom:var(--s3); padding:var(--s4)}
.shift-chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2)}
.shift-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
    padding:5px 10px; border-radius:999px; border:1px solid var(--border);
    background:var(--surface-alt)}
.shift-chip b{font-variant-numeric:tabular-nums}
.shift-chip.up{border-color:var(--ok-border); background:var(--ok-bg)} .shift-chip.up b{color:var(--ok)}
.shift-chip.down{border-color:var(--warn-border); background:var(--warn-bg)} .shift-chip.down b{color:var(--warn)}
.shift-hint{display:flex; gap:var(--s2); align-items:flex-start; font-size:13px;
    margin-top:var(--s3); color:var(--ink-mid)}
.shift-notes{margin-top:var(--s3); border-top:1px solid var(--border); padding-top:var(--s3)}
.shift-notes-head{font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--ink-soft); font-weight:600; margin-bottom:var(--s2)}
.shift-notes ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.shift-notes li{font-size:13px; color:var(--ink)}
.budget-line{margin-bottom:var(--s2); padding:0; overflow:hidden}
.budget-line>summary{list-style:none; cursor:pointer; display:grid;
    grid-template-columns:minmax(200px,1.4fr) minmax(180px,1fr) auto; gap:var(--s1) var(--s5);
    align-items:center; padding:var(--s3) var(--s4)}
.budget-line>summary::-webkit-details-marker{display:none}
.budget-line>summary:hover{background:var(--surface-alt)}
.budget-line-name{font-weight:600; color:var(--ink); font-size:13.5px; display:flex; align-items:center;
    gap:var(--s2); flex-wrap:wrap}
.budget-line-numbers{font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.budget-line-numbers strong{color:var(--ink)}
/* il semaforo colora il numero, non solo la barra (batte le regole di colore qui sopra) */
.budget-line-numbers .crit-txt, .budget-line-numbers strong.crit-txt{color:var(--crit)}
.budget-line-numbers .warn-txt, .budget-line-numbers strong.warn-txt{color:var(--warn)}
.budget-line-numbers .ok-txt,   .budget-line-numbers strong.ok-txt{color:var(--ok)}
.budget-caret{color:var(--ink-soft); transition:transform .15s; font-size:11px}
.budget-line[open] .budget-caret{transform:rotate(90deg)}
.budget-line .table-wrap{border-top:1px solid var(--border)}
.delta-over{color:var(--crit)}
.delta-under{color:var(--ok)}

/* ---------- Grafici SVG ---------- */
.chart{width:100%;height:auto;display:block;margin-top:var(--s3);overflow:visible}
.chart .cg{stroke:var(--border);stroke-width:1}
.chart .cyl{fill:var(--ink-soft);font-size:10px;text-anchor:end;font-variant-numeric:tabular-nums}
.chart .cxl{fill:var(--ink-soft);font-size:10px;font-variant-numeric:tabular-nums}
.chart-empty{padding:var(--s5);text-align:center;color:var(--ink-soft);font-size:13px}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2);font-size:11.5px;color:var(--ink-mid)}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
.chart-legend i{width:10px;height:3px;border-radius:2px;display:inline-block}

/* ---------- Assistente / chat ---------- */
.chat-wrap{display:flex;flex-direction:column;gap:var(--s3);max-width:820px}
.chat-log{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:var(--s4);min-height:340px;max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3)}
.chat-empty{color:var(--ink-soft);font-size:13.5px}
.chat-empty ul{margin:var(--s2) 0 0 var(--s4)}
.chat-empty li{margin:4px 0}
.chat-msg{display:flex}
.chat-user{justify-content:flex-end}
.chat-bubble{max-width:82%;padding:10px var(--s3);border-radius:12px;font-size:14px;line-height:1.55}
.chat-user .chat-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.chat-bot .chat-bubble{background:var(--surface-alt);border:1px solid var(--border);border-bottom-left-radius:3px}
.chat-form{display:flex;flex-direction:column;gap:var(--s2)}
.chat-controls{display:flex;align-items:center;gap:var(--s2)}
.chat-controls select{width:auto;margin:0}
.chat-input{display:flex;gap:var(--s2);align-items:flex-end}
.chat-input textarea{margin:0;resize:vertical}
.chat-input .btn{white-space:nowrap}

/* ---------- Widget assistente flottante (in basso a destra, ogni pagina) ---------- */
.chatw{position:fixed;right:20px;bottom:20px;z-index:9000;font-size:14px}
.chatw-fab{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;border:none;
    font-size:24px;cursor:pointer;box-shadow:var(--shadow-2);transition:transform .12s}
.chatw-fab:hover{transform:scale(1.05)}
.chatw-panel{display:none;position:absolute;right:0;bottom:66px;width:min(390px,calc(100vw - 32px));
    height:min(580px,72vh);background:var(--surface);border:1px solid var(--border-strong);
    border-radius:14px;box-shadow:var(--shadow-3);flex-direction:column;overflow:hidden}
.chatw[data-open="1"] .chatw-panel{display:flex}
.chatw[data-open="1"] .chatw-fab{display:none}
.chatw-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);
    background:var(--surface-alt)}
.chatw-head b{font-size:13.5px}
.chatw-ctx{flex:1;margin:0;width:auto;font-size:12px;padding:4px 6px;min-width:0}
.chatw-x{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:16px;line-height:1;padding:2px}
.chatw-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chatw-empty{color:var(--ink-soft);font-size:13px;line-height:1.5}
.chatw-msg{max-width:86%;padding:8px 11px;border-radius:11px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.chatw-u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.chatw-b{align-self:flex-start;background:var(--surface-alt);border:1px solid var(--border);border-bottom-left-radius:3px}
.chatw-typing{opacity:.6}
.chatw-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border)}
.chatw-form textarea{margin:0;resize:none;flex:1;max-height:120px}
.chatw-send{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 15px;cursor:pointer;font-size:16px}
@media(max-width:640px){.chatw{right:12px;bottom:12px}}

/* ---------- Pagina cliente ---------- */
.cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
@media(max-width:900px){.cl-grid{grid-template-columns:1fr}}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
@media(max-width:640px){.fc-grid{grid-template-columns:1fr}}
.fc-box{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3) var(--s4);background:var(--surface-alt)}
.fc-label{font-size:11.5px;color:var(--ink-mid);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.fc-now{font-size:20px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:var(--s1)}
.fc-now span{font-size:13px;font-weight:500;color:var(--ink-soft)}
.fc-proj{font-size:12.5px;margin-top:6px;font-variant-numeric:tabular-nums}
.fc-proj b{font-weight:650}
.fc-ok{color:var(--ok)} .fc-over{color:var(--crit)} .fc-under{color:var(--ink-mid)}
.fc-prog{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s3);padding:10px var(--s3);
    border-radius:var(--radius-sm);background:var(--accent-soft);font-size:12.5px;color:var(--ink)}
.fc-prog b{font-weight:650}
.cl-big{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:var(--s2)}
.cl-big span{font-size:16px;font-weight:500;color:var(--ink-soft)}
.plat-bars{display:flex;flex-direction:column;gap:9px;margin-top:var(--s4)}
.plat-row{display:grid;grid-template-columns:1fr auto;gap:3px var(--s3);align-items:center}
.plat-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.chip .plat-logo{margin-right:2px}
.plat-dot{width:9px;height:9px;border-radius:3px;flex:none}
.plat-val{font-size:12.5px;color:var(--ink-mid);font-variant-numeric:tabular-nums}
.plat-track{grid-column:1/-1;height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.plat-track i{display:block;height:100%;border-radius:4px}
.ok-txt{color:var(--ok)}
.row-click{cursor:pointer}
.row-click:hover{background:var(--surface-2)}

/* Campagne del cliente: una card per campagna (identità + salute + account + budget + azioni) */
.camp-cards{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3)}
.camp-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
    box-shadow:var(--shadow-1); padding:var(--s4)}
.camp-top{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.camp-dot{width:9px; height:9px; border-radius:3px; flex:none}
.camp-name{font-weight:650; font-size:14px}
.camp-detail{margin-top:2px}
.camp-meta{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3)}
.camp-bottom{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4);
    margin-top:var(--s4); flex-wrap:wrap}
.camp-budget{min-width:180px; flex:1}
.camp-budget-label{font-size:11px; color:var(--ink-mid); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.camp-budget-num{font-size:20px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:2px}
.camp-budget-form{display:flex; gap:6px; align-items:center; margin-top:2px}
.camp-budget-form input{width:90px; margin-top:0}
.camp-perf{margin-top:var(--s2)}
.camp-pacing{margin-top:var(--s1); max-width:320px}
.camp-actions{display:flex; gap:var(--s2); align-items:center; flex:none}
@media(max-width:640px){.camp-bottom{flex-direction:column; align-items:stretch}
    .camp-actions{justify-content:flex-end}}

/* ---------- Dettaglio campagna ---------- */
.detail-head{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap}
.kpis-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){ .kpis-6{grid-template-columns:repeat(2,1fr)} }
.kpis-6 .val{font-size:22px}
.legend-inline{font-size:11px; color:var(--ink-soft)}
.legend-inline i{display:inline-block; width:8px; height:8px; border-radius:2px; vertical-align:0; margin:0 3px 0 8px}
.dot-spend{background:var(--accent)} .dot-conv{background:var(--ok)}

/* Barre sorgente: cosa alimenta una voce (campagne piattaforma), stesso schema di .plat-bars */
.src-bars{display:flex; flex-direction:column; gap:9px; margin-top:var(--s3)}
.src-row{display:grid; grid-template-columns:1fr auto; gap:3px var(--s3); align-items:center}
.src-name{font-size:13px; font-weight:600; color:var(--ink-mid); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.src-row.src-top .src-name{color:var(--ink)}
.src-val{font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums; white-space:nowrap}
.src-track{grid-column:1/-1; height:6px; border-radius:4px; background:var(--border); overflow:hidden}
.src-track i{display:block; height:100%; border-radius:4px; background:var(--accent-soft)}
.src-row.src-top .src-track i{background:var(--accent)}

.trend{display:flex; align-items:flex-end; gap:2px; height:160px; margin-top:var(--s3);
    border-bottom:1px solid var(--border); padding-bottom:1px}
.trend-col{flex:1; position:relative; height:100%; display:flex; align-items:flex-end; min-width:2px}
.trend-spend{width:100%; background:var(--accent-soft); border-radius:2px 2px 0 0; position:relative}
.trend-col:hover .trend-spend{background:var(--accent)}
.trend-conv{position:absolute; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%;
    background:var(--ok); border:1px solid var(--surface)}
.trend-axis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin-top:4px}

.kpi-primary{border-color:var(--border-strong); box-shadow:inset 0 2px 0 var(--accent)}
.kpi-cmp{margin-top:6px}
.cmp{font-size:11px; font-weight:600}
.cmp-good{color:var(--ok)} .cmp-bad{color:var(--crit)} .cmp-flat{color:var(--ink-soft)}

.suggest{margin-top:var(--s3)}
.suggest-list{list-style:none; margin:var(--s2) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s2)}
.suggest-list li{display:flex; gap:var(--s2); align-items:flex-start; font-size:13px; color:var(--text)}
.sg-dot{width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; background:var(--ink-soft)}
.sg-crit .sg-dot{background:var(--crit)} .sg-warn .sg-dot{background:var(--warn)} .sg-ok .sg-dot{background:var(--ok)}

.period{display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin-bottom:var(--s4)}
.period a{padding:5px 11px; border-radius:20px; border:1px solid var(--border); background:var(--surface);
    color:var(--ink-mid); text-decoration:none; font-size:12.5px; font-weight:500}
.period a.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.period form{display:flex; gap:4px; align-items:center; margin-left:var(--s2)}
.period input[type=date]{width:auto; margin:0; padding:5px 8px; font-size:12.5px}

.btn-mini{padding:2px 8px; font-size:11px; opacity:0; transition:opacity .12s}
.budget-line>summary:hover .btn-mini, .budget-group-head:hover .btn-mini{opacity:1}
.row-click{cursor:pointer}

/* gruppo di budget: totale concordato multi-canale, canali indentati sotto */
.budget-group-head{display:grid; grid-template-columns:minmax(200px,1.4fr) minmax(180px,1fr); gap:var(--s1) var(--s5);
    align-items:center; padding:var(--s3) var(--s4); margin-bottom:var(--s2);
    background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius)}
.budget-line.grouped{margin-left:var(--s5)}
@media (max-width:1100px){ .budget-group-head{grid-template-columns:1fr} .budget-line.grouped{margin-left:var(--s3)} }

/* ---------- Toolbar filtri ---------- */
.toolbar{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s4); flex-wrap:wrap}
.toolbar select, .toolbar input[type="search"]{width:auto; margin-top:0}
.toolbar-search{min-width:220px}
.toolbar-check{display:flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--ink-mid);
    white-space:nowrap; cursor:pointer}
.toolbar-check input{width:auto; margin:0}

/* ---------- Righe campagna (grammatica della home) ---------- */
.c-group{margin-bottom:var(--s5)}
.c-row{grid-template-columns:3px 1fr 130px 190px 110px}
.bar.none{background:var(--border)}
.bar.ok{background:var(--ok); opacity:.35}
.row-action{display:block; color:var(--accent-link); font-weight:550; font-size:12px;
    opacity:0; transition:opacity .12s; margin-top:2px}
.c-row:hover .row-action{opacity:1}

/* Automazioni: stessa riga delle anomalie, ma con due destinazioni (campagna e Make):
   la riga non è un link unico, quindi niente cursore da riga cliccabile */
.alert.autom-row{grid-template-columns:3px 1fr 150px 1fr 120px; cursor:default}
.autom-row .since a{font-weight:550}

.src-badge{font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:4px; letter-spacing:.02em}
.src-live{background:var(--ok-bg); color:var(--ok)}
.src-seed{background:var(--warn-bg); color:var(--warn)}

/* ---------- Modal ---------- */
.modal{border:none; border-radius:var(--radius); padding:0; width:min(720px,calc(100vw - 2rem));
    background:var(--surface); color:var(--ink);
    box-shadow:var(--shadow-3)}
.modal::backdrop{background:rgba(16,24,40,.45)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:var(--s4);
    border-bottom:1px solid var(--border)}
.modal-head h2{font-size:15px; font-weight:650}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s1) var(--s4); padding:var(--s4);
    max-height:62vh; overflow-y:auto}
.form-grid .span2{grid-column:span 2}
.modal-foot{display:flex; justify-content:space-between; gap:var(--s2); padding:var(--s4);
    border-top:1px solid var(--border); background:var(--surface-alt)}
.modal-foot-right{display:flex; gap:var(--s2)}

.empty-state{text-align:center; padding:var(--s7) var(--s5); color:var(--ink-mid)}
.empty-state .empty-icon{font-size:28px; margin-bottom:var(--s3)}
.empty-state h2{font-size:15px; margin-bottom:var(--s1); color:var(--ink)}

code{background:var(--idle-bg); border:1px solid var(--border); padding:1px 5px; border-radius:4px; font-size:.9em}

/* ---------- Login ---------- */
.auth-body{min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:#0F1B3D; padding:var(--s4)}
.auth-card{background:var(--surface); border-radius:12px; padding:var(--s6); width:100%; max-width:400px;
    box-shadow:0 24px 64px rgba(0,0,0,.4)}
.auth-brand{font-weight:700; font-size:15px; margin-bottom:var(--s5); color:var(--ink)}
.auth-brand span{display:block; font-weight:500; font-size:10px; letter-spacing:.14em; color:var(--accent-link); margin-top:2px}
.auth-card h1{font-size:18px; margin-bottom:2px}
.auth-subtitle{color:var(--ink-mid); font-size:13px; margin-bottom:var(--s5)}
.auth-legale{margin-top:var(--s5); font-size:12px; line-height:1.6; color:var(--ink-mid); text-align:center}
.auth-legale a{color:var(--accent-link)}

@media (max-width:1100px){
    .app{grid-template-columns:1fr}
    .side{position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--s3)}
    .nav{margin-top:0; flex-direction:row; flex-wrap:wrap}
    .nav .badge{margin-left:6px}
    .side-foot{margin:0 0 0 auto; padding:0; border:0}
    .main{padding:var(--s4)}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .clients{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .form-grid .span2{grid-column:span 1}
    .budget-line>summary{grid-template-columns:1fr}

    /* Righe anomalie/campagne: da griglia multi-colonna a blocco impilato.
       Con 5 figli la vecchia griglia "3px 1fr" li schiacciava (testi sovrapposti). */
    .alert, .c-row{display:block; position:relative;
        padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 6px)}
    .alert > .bar{position:absolute; left:0; top:0; bottom:0; width:3px; min-height:0; border-radius:0 2px 2px 0}
    .alert > div{margin-top:var(--s2)}
    .alert > .who{margin-top:0}
    .alert .who .what{white-space:normal}
    .alert .detail, .alert .since{text-align:left}
    .alert .since{color:var(--ink-soft)}
}

/* Dispositivi touch: rendi sempre visibili i controlli che su desktop appaiono all'hover */
@media (hover:none){
    .btn-mini{opacity:1}
    .row-action{opacity:1}
}

/* Telefoni: impilamento e tap-target pieni */
@media (max-width:640px){
    h1{font-size:19px}
    .main{padding:var(--s3)}
    .topbar{margin-bottom:var(--s4)}
    .side{padding:var(--s3) var(--s4); justify-content:space-between}
    .nav-apri{display:inline-flex; align-items:center; gap:var(--s2); background:none; color:#fff; font:inherit;
        font-size:14px; font-weight:600; border:1px solid #2A3A66; border-radius:var(--radius-sm);
        padding:8px 14px; cursor:pointer}
    .nav-apri-avviso{width:8px; height:8px; border-radius:50%; background:var(--crit)}
    .side:not(.aperta) .nav, .side:not(.aperta) .side-foot{display:none}
    .side.aperta .nav{width:100%; display:grid; grid-template-columns:1fr 1fr}
    .nav a{padding:11px var(--s3)}
    .side-foot{width:100%; margin:var(--s2) 0 0; justify-content:space-between}
    .toolbar{gap:var(--s2)}
    .toolbar select, .toolbar input[type="search"], .toolbar-search{width:100%; min-width:0}
    .toolbar-check{width:100%}
    .toolbar .btn{width:100%; justify-content:center}
    .modal-foot{flex-wrap:wrap; row-gap:var(--s2)}
    .modal-foot-right{margin-left:auto}
    .legend{flex-wrap:wrap; gap:var(--s2)}
    .period form{margin-left:0; flex-wrap:wrap}
    .detail-head{gap:var(--s1) var(--s2)}
    .cl-big{font-size:26px}
}

/* ---- Google Business (recensioni + chiusure) ---- */
.gbp-tabs{display:flex; gap:var(--s2); margin-bottom:var(--s5); border-bottom:1px solid var(--border)}
.gbp-tab{padding:var(--s3) var(--s4); color:var(--ink-mid); text-decoration:none; font-weight:600;
    border-bottom:2px solid transparent; margin-bottom:-1px}
.gbp-tab:hover{color:var(--ink)}
.gbp-tab.on{color:var(--accent-link); border-bottom-color:var(--accent-link)}
.gbp-tab .badge{margin-left:var(--s2); background:var(--crit); color:#fff; border-radius:999px;
    padding:1px 7px; font-size:11px; font-weight:600}
.gbp-tab .badge::before{display:none}
.gbp-form-grid .card-heading,.card>.card-heading{font-weight:700; font-size:15px; margin-bottom:var(--s2)}
.card-heading{font-weight:700; font-size:15px}
.card-sub{color:var(--ink-soft); font-size:12.5px; margin-top:2px; margin-bottom:var(--s3)}
.review{display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s4)}
.review-head{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.review-head .who{font-weight:600}
.review-head .where{color:var(--ink-soft); font-size:14px}
.review-head .when{color:var(--ink-soft); font-size:13px; margin-left:auto}
.stars{color:#E0A83B; letter-spacing:2px}
.stars .off{color:var(--border-strong)}
.review-text{color:var(--ink-mid); white-space:pre-wrap}
.review-empty-text{color:var(--ink-soft); font-style:italic}
.review-draft label{display:block; font-size:13px; color:var(--ink-mid); margin-bottom:var(--s1)}
.review-draft textarea{width:100%; min-height:88px}
.review-actions{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap}
.review-actions .spacer{flex:1}
.gbp-status{font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px}
.gbp-status.pending{background:var(--accent-soft); color:var(--accent-link)}
.gbp-status.publishing{background:var(--warn-bg); color:var(--warn)}
.gbp-status.published{background:var(--ok-bg); color:var(--ok)}
.gbp-status.rejected{background:var(--surface-alt); color:var(--ink-soft)}
.gbp-status.error,.gbp-status.scheduled{background:var(--warn-bg); color:var(--warn)}
.gbp-status.closed_applied{background:var(--crit-bg); color:var(--crit)}
.gbp-status.reopened{background:var(--ok-bg); color:var(--ok)}
.gbp-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4)}
.gbp-form-grid .full{grid-column:1 / -1}
.gbp-loc-list{max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.gbp-loc-list label{display:flex; gap:var(--s2); align-items:center; font-weight:500}
@media(max-width:720px){.gbp-form-grid{grid-template-columns:1fr}}

/* Loghi delle piattaforme: riconoscimento immediato, allineati al testo */
.plat-logo{flex:none; vertical-align:-.18em}
.plat-tag{display:inline-flex; align-items:center; gap:5px}

/* Pubblico che segue il cliente */
.seguito{margin-bottom:var(--s4)}
.seguito-righe{display:flex; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s3)}
.seguito-voce{display:flex; align-items:center; gap:var(--s3)}
.seguito-num{font-size:22px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
    line-height:1.1}
.seguito-dettaglio{display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3);
    padding-top:var(--s3); border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-mid)}
.seguito-pagina{display:inline-flex; align-items:center; gap:5px}
.seguito-pagina b{color:var(--ink); font-variant-numeric:tabular-nums}

/* ---- Inserzioni di una campagna: cosa vede il pubblico + giudizio di Meta ---- */
.ads-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s3);
    margin-top:var(--s3)}
.ad-card{display:flex; gap:var(--s3); border:1px solid var(--border); border-radius:var(--radius);
    padding:var(--s3); background:var(--surface-alt); min-width:0}
.ad-thumb{width:72px; height:72px; object-fit:cover; border-radius:var(--radius-sm); flex:none;
    background:var(--surface-2)}
.ad-thumb-vuota{display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:10px; color:var(--ink-soft); padding:4px}
/* L'anteprima apre la creatività vera: si deve vedere che è cliccabile prima di provarci. */
.ad-apri{position:relative; display:block; flex:none; line-height:0; border-radius:var(--radius-sm)}
.ad-apri .ad-thumb{transition:opacity .12s ease}
.ad-apri:hover .ad-thumb, .ad-apri:focus-visible .ad-thumb{opacity:.82}
.ad-apri:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ad-apri-segno{position:absolute; right:4px; bottom:4px; width:16px; height:16px; border-radius:4px;
    display:flex; align-items:center; justify-content:center; font-size:10px; line-height:1;
    background:var(--surface); color:var(--ink-mid); border:1px solid var(--border)}
.ad-apri:hover .ad-apri-segno{color:var(--accent); border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.ad-apri .ad-thumb{transition:none}}
.ad-corpo{min-width:0; flex:1}
.ad-nome{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ad-testo{margin-top:2px; overflow-wrap:anywhere}
/* «In onda» è uno stato di erogazione, non di salute: verde solo perché sta girando. */
.ad-onda{font-size:11.5px; font-weight:600; color:var(--ok); margin-top:2px}
.ad-spenta{font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-top:2px}
.ad-numeri{font-size:12.5px; color:var(--ink-mid); margin-top:var(--s2); font-variant-numeric:tabular-nums}
.ad-numeri b{color:var(--ink)}
.ad-giudizi{display:flex; flex-wrap:wrap; gap:4px; margin-top:var(--s2)}
.ad-giudizi .pill{font-size:10.5px; padding:2px 6px}

/* Campagne collegate a una voce del registro */
.collegate summary{cursor:pointer; font-size:12.5px; color:var(--ink-mid)}
.collegate[open] summary{margin-bottom:var(--s2)}
.collegata{display:flex; align-items:center; gap:var(--s2); padding:3px 0; font-size:12.5px;
    border-top:1px solid var(--border)}
.collegata .pill{font-size:10.5px; padding:1px 6px}

/* ---- Monitoraggio commenti ---- */
/* Un riquadro per post o inserzione: il contesto si legge una volta, i commenti stanno
   sotto in colonna e le risposte rientrano, come una conversazione. */
.cmt-post{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:var(--s3); overflow:hidden}
.cmt-post-head{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
    padding:var(--s3) var(--s4); background:var(--surface-alt); border-bottom:1px solid var(--border);
    font-size:12.5px; color:var(--ink-mid)}
.cmt-dove{min-width:0; overflow-wrap:anywhere}
.cmt-dove b{color:var(--ink); font-weight:600}

.cmt{padding:var(--s3) var(--s4); border-bottom:1px solid var(--border)}
.cmt:last-child{border-bottom:0}
.cmt-nuovo{box-shadow:inset 3px 0 0 var(--accent)}
.cmt-fatto{background:var(--surface-alt)}
.cmt-fatto .cmt-testo{color:var(--ink-mid)}

.cmt-riga{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.cmt-testo{flex:1; min-width:220px; font-size:14.5px; line-height:1.55; white-space:pre-wrap;
    overflow-wrap:anywhere; margin:0}
.cmt-quando{font-size:12px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums}

/* la risposta rientra sotto il commento a cui appartiene, con un filo che la lega */
.cmt-risposta{margin:var(--s2) 0 0 var(--s5); padding:8px var(--s3);
    border-left:2px solid var(--border); font-size:13.5px; line-height:1.5;
    white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-mid)}
.cmt-risposta.cmt-nostra{border-left-color:var(--ok); background:var(--ok-bg); color:var(--ink);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.cmt-chi{display:block; font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ink-soft); margin-bottom:2px}
.cmt-nostra .cmt-chi{color:var(--ok)}

.cmt-azioni{margin:var(--s3) 0 0 var(--s5)}
.cmt-azioni textarea{width:100%; margin:0; resize:vertical}
.cmt-bottoni{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); flex-wrap:wrap}
.cmt-link{background:none; border:none; padding:0; font:inherit; font-size:12px; cursor:pointer;
    color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px}
.cmt-link:hover{color:var(--ink)}
.cmt-link-crit:hover{color:var(--crit)}
.cmt-nota{margin-top:var(--s2)}
@media (max-width:640px){
    .cmt-risposta, .cmt-azioni{margin-left:var(--s3)}
    .cmt-bottoni{gap:var(--s3)}
}

/* ---- Commenti: clienti a sinistra, pagina a destra ---- */
.cm-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--s4); align-items:start}
.cm-clienti{position:sticky; top:var(--s3); max-height:calc(100vh - 2*var(--s4)); overflow:auto;
    border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:var(--s2)}
.cm-clienti .toolbar-search{display:block; width:100%; min-width:0; margin:0; padding:7px 10px; font:inherit; font-size:13.5px;
    color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface)}
.cm-clienti .toolbar-search:focus{outline:2px solid var(--accent-link); outline-offset:1px; border-color:var(--accent-link)}
.cm-clienti ul{list-style:none; margin:var(--s2) 0 0; padding:0}
.cm-clienti a{display:flex; justify-content:space-between; align-items:center; gap:var(--s2); padding:6px 8px;
    border-radius:var(--radius-sm); color:var(--ink); text-decoration:none; font-size:13.5px}
.cm-clienti a:hover{background:var(--surface-alt)}
.cm-clienti li.attivo a{background:var(--accent-soft); color:var(--accent-link); font-weight:600}
.cm-clienti .badge{background:var(--crit); color:var(--surface); border-radius:999px; padding:0 7px; font-size:11px; font-weight:600}
.cm-clienti .badge::before{display:none}
.cm-vuoto{margin:var(--s2) 0 0; padding:0 8px; font-size:12.5px; color:var(--ink-soft)}
.cm-main{min-width:0}
.cm-indietro{display:none; margin-bottom:var(--s3); font-size:13px; color:var(--accent-link); text-decoration:none}
.cm-avviso{margin:0 0 var(--s3)}

.cm-schede{display:flex; flex-wrap:wrap; gap:var(--s1); border-bottom:1px solid var(--border); margin-bottom:var(--s3)}
.cm-schede a{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:2px solid transparent;
    color:var(--ink-mid); text-decoration:none; font-size:13.5px; overflow-wrap:anywhere}
.cm-schede a:hover{color:var(--ink)}
.cm-schede a.attiva{border-bottom-color:var(--accent); color:var(--ink); font-weight:600}
.cm-schede small{color:var(--ink-soft); font-weight:400}
.cm-schede .badge{background:var(--crit); color:var(--surface); border-radius:999px; padding:0 7px; font-size:11px; font-weight:600}
.cm-schede .badge::before{display:none}

/* interruttori del bot */
.cm-bot{margin-bottom:var(--s3)}
.cm-interr,.cm-sotto{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4)}
.cm-sotto{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--border)}
.cm-sotto-nome{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink)}
.cm-sw{margin:0}
.cm-sw-btn{display:inline-flex; align-items:center; gap:var(--s2); padding:4px 0; border:0; background:none;
    font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer}
.cm-sw-btn:disabled{cursor:not-allowed; color:var(--ink-soft)}
.cm-sw-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm)}
.cm-sw-pista{position:relative; flex:none; width:36px; height:20px; border-radius:10px; background:var(--ink-soft);
    transition:background .15s}
.cm-sw-pista::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
    background:var(--surface); box-shadow:var(--shadow-1); transition:transform .15s}
.cm-sw-btn.on .cm-sw-pista{background:var(--accent)}
.cm-sw-btn.on .cm-sw-pista::after{transform:translateX(16px)}
.cm-sw-btn:disabled .cm-sw-pista{opacity:.5}
@media (prefers-reduced-motion:reduce){ .cm-sw-pista, .cm-sw-pista::after{transition:none} }
.cm-dal{font-size:12.5px; color:var(--ink-mid); font-variant-numeric:tabular-nums}
.cm-nota{margin:var(--s1) 0 0; font-size:12px; color:var(--ink-soft)}
.cm-motivo{flex-basis:100%; margin:0; font-size:12.5px; color:var(--warn)}

/* scheda del cliente */
.cm-scheda{margin-bottom:var(--s3); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:var(--s2) var(--s3)}
.cm-scheda summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-mid)}
.cm-scheda[open] summary{margin-bottom:var(--s2)}
.cm-scheda textarea{width:100%; margin:0}

/* filtri */
.cm-filtri{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-bottom:var(--s3)}
.cm-filtro-gruppo{display:inline-flex; flex-wrap:wrap; gap:var(--s1)}
.cm-filtro-gruppo a{padding:4px 10px; border-radius:999px; font-size:12.5px; color:var(--ink-mid); text-decoration:none;
    border:1px solid var(--border)}
.cm-filtro-gruppo a:hover{color:var(--ink); background:var(--surface-alt)}
.cm-filtro-gruppo a.on{background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent-link); font-weight:600}
.cm-nota-troncato{margin:0 0 var(--s3); font-size:12.5px; color:var(--warn)}

/* un riquadro per post */
.cm-post{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin-bottom:var(--s3); overflow:hidden}
.cm-post > header{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; padding:8px var(--s3);
    background:var(--surface-alt); border-bottom:1px solid var(--border); font-size:13px; color:var(--ink-mid)}
.cm-quando{font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.cm-ad{font-size:12px; font-weight:600; color:var(--accent-link)}
.cm-anteprima{flex:1; min-width:160px; overflow-wrap:anywhere}
.cm-autore{color:var(--ink)}
.cm-bot-et{margin:var(--s1) 0 0}

/* assegnazioni e aggiornamento */
.cm-assegna{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:var(--s2) 0}
.cm-assegna select{width:auto; min-width:200px; margin-top:0}
.cm-assegna-nome{min-width:180px}
.cm-assegna-elenco{margin-top:var(--s5)}
.cm-sync{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s5)}

@media (max-width:760px){
    .cm-layout{grid-template-columns:minmax(0,1fr)}
    .cm-clienti{position:static; max-height:none}
    .cm-schede{overflow-x:auto; flex-wrap:nowrap}
    .cm-schede a{white-space:nowrap}
    /* sul telefono la colonna clienti è l'elenco da cui si entra: scelto un cliente resta solo la sua pagina */
    .cm-layout:not(.cm-dentro) .cm-main{display:none}
    .cm-dentro .cm-clienti{display:none}
    .cm-indietro{display:inline-block}
    .cm-sw-btn{padding:8px 0}
}

/* /commenti: viste Ultime risposte e Segnalazioni */
.cm-viste{display:flex; flex-wrap:wrap; gap:var(--s1); margin:0 0 var(--s4); border-bottom:1px solid var(--border)}
.cm-viste a{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; text-decoration:none; color:var(--ink-mid);
    border-bottom:2px solid transparent; font-weight:600; font-size:13.5px}
.cm-viste a:hover{color:var(--ink)}
.cm-viste a.on{color:var(--accent-link); border-bottom-color:var(--accent)}
.cm-viste .badge{background:var(--crit); color:var(--surface); border-radius:999px; padding:0 7px; font-size:11px; font-weight:600}
.cm-viste .badge::before{display:none}
.cm-viste .badge.badge-quieto{background:var(--idle-bg); color:var(--idle)}
.cmr-lista{list-style:none; margin:0; padding:0}
.cmr-riga{padding:var(--s3) 0; border-bottom:1px solid var(--border)}
.cmr-testa{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); font-size:13px}
.cmr-commento{margin:6px 0 2px; overflow-wrap:anywhere}
.cmr-risposta{margin:0; color:var(--ink-mid); overflow-wrap:anywhere}
.cmr-post{margin:var(--s2) 0 0; overflow-wrap:anywhere}
.cmr-seg{margin-bottom:var(--s4)}
.cmr-seg p{overflow-wrap:anywhere}
.cmr-form{display:grid; gap:var(--s2); margin-top:var(--s3)}
.cmr-form label{display:grid; gap:var(--s1); font-size:13px}
.cmr-form textarea,.cmr-form input[type=text]{width:100%; margin:0}
.cmr-form .btn{justify-self:start}
.cmr-rifiuta{grid-template-columns:minmax(0,1fr) auto; align-items:center}
.cmr-seg{transition:opacity .2s, max-height .25s}
.cmr-seg-in-corso{opacity:.55; pointer-events:none}
.cmr-seg-fatta{opacity:0}
.cmr-toast{position:fixed; left:50%; bottom:var(--s5); transform:translateX(-50%); z-index:50; max-width:min(92vw,560px); padding:var(--s2) var(--s4); border-radius:var(--r-md,8px); background:#101828; color:#fff; font-size:14px; box-shadow:0 4px 16px rgba(0,0,0,.25)}
.cmr-toast[hidden]{display:none}
.cmr-toast-err{background:#9b1c1c}
@media (max-width:760px){
    .cm-viste a{padding:8px 10px; font-size:13px}
    /* qui «Tutti i clienti» è già una scelta: la colonna dei clienti sta sopra, corta, e la lista sotto resta visibile */
    .cm-layout.cmr:not(.cm-dentro) .cm-main{display:block}
    .cmr .cm-clienti{max-height:168px; overflow:auto}
    .cmr-rifiuta{grid-template-columns:minmax(0,1fr)}
    .cmr-form .btn{justify-self:stretch; justify-content:center}
}

/* Google Business — editor orari speciali */
.gbp-hours-tools { display:flex; gap:8px; margin:8px 0; }
.gbp-day { border:1px solid var(--line,#e0e0e0); border-radius:6px; padding:8px 12px; margin-bottom:8px; }
.gbp-day-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gbp-range { display:flex; align-items:center; gap:6px; margin-top:6px; }
.gbp-range input[type=time] { width:110px; }

/* ---- Bacheca: messaggi fra chi usa la dashboard ---------------------------------------
   Il rosso qui è l'unica eccezione alla regola «i semantici sono solo stato di salute»:
   un messaggio che ti nomina è lavoro che aspetta te, e la barra rossa dice esattamente
   quello. Tutto il resto resta grigio, altrimenti la distinzione sparisce. */
.bacheca-scrivi textarea{width:100%; resize:vertical; font:inherit; padding:var(--s3);
    border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface);
    color:var(--ink)}
.bacheca-scrivi textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.bacheca-azioni{display:flex; gap:var(--s3); align-items:flex-start; justify-content:space-between;
    margin-top:var(--s2); flex-wrap:wrap}
.bacheca-nomi{display:flex; gap:var(--s2); flex-wrap:wrap; min-width:0}
.chip-nome{font:inherit; font-size:12.5px; padding:3px 10px; border-radius:20px; cursor:pointer;
    border:1px solid var(--border-strong); background:var(--surface); color:var(--accent-link)}
.chip-nome:hover{border-color:var(--accent); background:var(--accent-soft)}
.chip-tutti{font-weight:600}

/* Il menu dei nomi che si apre battendo @: sta sotto al campo, dove lo sguardo è già. */
.campo-con-nomi{position:relative}
.tag-menu{position:absolute; left:0; right:0; top:100%; z-index:20; margin:2px 0 0; padding:4px;
    list-style:none; max-height:220px; overflow-y:auto; background:var(--surface);
    border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-lg,
    0 12px 28px -12px rgba(16,24,40,.28))}
.tag-menu li{padding:6px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:14px}
.tag-menu li.attivo, .tag-menu li:hover{background:var(--accent-soft); color:var(--accent-link)}

.msg-testa{display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; font-size:13.5px}
.msg-corpo{margin-top:var(--s2); overflow-wrap:anywhere}
.menzione{color:var(--accent-link)}
.msg-tag{font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px;
    background:var(--surface-2); color:var(--ink-mid)}
.msg-tag-per-te{background:var(--crit-bg); color:var(--crit)}
.msg-nuovo{border-left:3px solid var(--border-strong)}
.msg-per-te{border-left:3px solid var(--crit)}
.msg-risposta{margin-top:var(--s3); padding-left:var(--s3); border-left:2px solid var(--border)}
.msg-rispondi{margin-top:var(--s3)}
.msg-rispondi summary{cursor:pointer; font-size:13px; color:var(--accent-link); width:max-content}
.msg-rispondi textarea{width:100%; resize:vertical; font:inherit; margin:var(--s2) 0;
    padding:var(--s2); border:1px solid var(--border-strong); border-radius:var(--radius);
    background:var(--surface); color:var(--ink)}

/* La finestra delle campagne appena arrivate: prima il fatto, poi la proposta, poi le scelte. */
.coda-nuove { max-width: 560px; border: 0; border-radius: 12px; padding: 24px; }
.coda-nuove h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.coda-nuove .fatto { margin: 0 0 12px; line-height: 1.5; }
.coda-nuove .fatto b, .coda-nuove .proposta b { font-variant-numeric: tabular-nums; }
.coda-nuove .proposta {
    margin: 0 0 16px; padding: 12px; border-radius: 8px;
    background: var(--accent-soft, #EEF2FB); line-height: 1.5;
}
.coda-nuove .fonte { display: block; margin-top: 4px; font-size: 12px; opacity: .7; }
.coda-nuove label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.coda-nuove label select, .coda-nuove label input[type=number] {
    display: block; width: 100%; margin-top: 4px; padding: 8px;
    font-size: 14px; font-weight: 400;
}
.coda-nuove label input[type=number] { font-variant-numeric: tabular-nums; }
.coda-nuove .spunta { font-weight: 400; }
.coda-nuove .dalla-piattaforma { margin: 12px 0; font-size: 12px; opacity: .7; }
.coda-nuove .azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.coda-nuove .azioni button { padding: 8px 16px; border-radius: 8px; cursor: pointer; }
/* accento blu = azione, come in tutto il resto della dashboard */
.coda-nuove .azioni .primario { background: var(--accent, #1B3A8F); color: #fff; border: 0; }
/* il rosso qui non è uno stato di salute: è l'unica azione che toglie soldi dai conti */
.coda-nuove .azioni .pericolo { background: transparent; color: var(--crit, #B42318);
    border: 1px solid currentColor; }
.coda-nuove .azioni .quieto { background: transparent; opacity: .7; border: 1px solid var(--border-strong); }
.coda-nuove .restano { margin: 12px 0 0; font-size: 12px; opacity: .7; }
@media (max-width: 600px) { .coda-nuove { max-width: 100%; padding: 16px; } }

/* Pubblicazioni: miniature dei media e riquadro di modifica */
.pub-media{display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3)}
.pub-media img{width:96px; height:120px; object-fit:cover; border-radius:var(--radius-sm);
    border:1px solid var(--border); display:block}
.pub-post .cmt-azioni{display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s3) 0 0}
.pub-modifica{margin-top:var(--s3); font-size:13px}
.pub-modifica summary{cursor:pointer; color:var(--accent-link); font-weight:600}
.pub-modifica form{display:grid; gap:var(--s3); margin-top:var(--s3); max-width:720px}
.pub-modifica label{display:grid; gap:var(--s1); color:var(--ink-mid)}
.pub-modifica textarea{width:100%; resize:vertical}
.pub-modifica .btn{justify-self:start}
.pub-tiktok{margin-top:var(--s3); padding:var(--s3); border:1px solid var(--warn-border); border-radius:var(--radius-sm);
    background:var(--warn-bg); font-size:13px; display:grid; gap:var(--s2); max-width:720px}
.pub-tiktok p{margin:0}
.pub-tiktok textarea{width:100%; resize:vertical; font-size:12px}
.pub-tiktok form{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.pub-tiktok input[type=url]{min-width:0; flex:1 1 220px}
.pub-media video{width:160px; height:200px; border-radius:var(--radius-sm); background:#000}
/* nuovo post */
.pub-nuovo{margin-bottom:var(--s5)}
.pub-nuovo > summary{display:inline-flex; list-style:none; cursor:pointer}
.pub-nuovo > summary::-webkit-details-marker{display:none}
.ped-pallino{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:var(--s2); vertical-align:middle; background:var(--crit)}
.ped-pallino.si{background:var(--ok)}
.ped{margin-bottom:var(--s5); display:grid; gap:var(--s3)}
.ped-testa{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap}
.ped-testa h2{margin:0; font-size:16px}
.ped-piano > summary{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); cursor:pointer}
.ped-letto{margin-left:auto; font-size:12px}
.ped-post{list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s1)}
.ped-post li{display:grid; grid-template-columns:28px 1fr auto; gap:var(--s2); align-items:baseline; padding:var(--s1) 0; border-top:1px solid var(--line)}
.ped-n{font-variant-numeric:tabular-nums; font-weight:600; text-align:right}
.ped-titolo .muted{font-size:12px}
.ped-form{display:grid; gap:var(--s3)}
.ped-form label{display:grid; gap:var(--s1)}
.ped-form textarea{width:100%; resize:vertical}
.ped-form .btn{justify-self:start}
.ped-regola{font-size:12.5px; margin:0}
.ped-chat{display:grid; gap:var(--s2)}
/* la conversazione si comprime e, aperta, scorre dentro un riquadro alto al massimo mezza finestra */
.ped-conv{border:1px solid var(--border); border-radius:10px; padding:var(--s2) var(--s3)}
.ped-conv > summary{cursor:pointer; font-weight:600; font-size:14px}
.ped-conv[open] > summary{margin-bottom:var(--s2)}
.ped-conv .ped-chat{max-height:min(50vh, 420px); overflow-y:auto; padding-right:var(--s1)}
.ped-chat:empty{display:none}
.ped-msg{padding:var(--s2) var(--s3); border-radius:10px; font-size:13.5px; line-height:1.45; max-width:88%; white-space:normal}
.ped-msg .muted{display:block; font-size:11.5px}
.ped-msg.tu{justify-self:end; background:var(--accent-soft); border:1px solid var(--border)}
.ped-msg.agente{justify-self:start; border:1px solid var(--border)}
.ped-msg.agente.attesa{color:var(--warn); border-style:dashed}
.ped-msg.agente.errore{background:var(--crit-bg); color:var(--crit); border-color:var(--crit-border)}
@media (max-width:640px){ .ped-post li{grid-template-columns:24px 1fr} .ped-post li .pill{grid-column:2; justify-self:start} }
.pub-nuovo[open] > summary{margin-bottom:var(--s4)}
.pub-form{display:grid; gap:var(--s3); max-width:720px}
.pub-form [hidden]{display:none !important}
.pub-form label{margin-bottom:0}
.pub-form input[type=datetime-local], .pub-form input[type=file]{display:block; margin-top:var(--s1); font:inherit; color:var(--ink)}
.pub-scelte{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4)}
.pub-scelte legend{font-weight:500; font-size:12.5px; color:var(--ink-mid); margin-bottom:var(--s1); padding:0}
.pub-scelte label{display:inline-flex; align-items:center; gap:var(--s1); color:var(--ink); font-size:13.5px}
.pub-scelte input{width:auto; margin:0}
.pub-aiuto{display:block; font-size:12px; margin:var(--s1) 0 0}
.pub-bottoni{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2)}
/* elenco delle pagine: da qui si entra nel calendario di una */
.pub-indice-testa{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.pub-indice-testa .toolbar-search{flex:1; min-width:220px; max-width:520px; margin:0; display:block; padding:9px 12px;
    font:inherit; font-size:14px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--ink)}
.pub-pagine{list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden}
.pub-pagine > li + li{border-top:1px solid var(--border)}
.pub-pagine > li[hidden]{display:none}
.pub-pagina{display:grid; grid-template-columns:minmax(0, 1.4fr) auto minmax(0, 1fr) 16px; align-items:center;
    gap:var(--s3); padding:12px var(--s4); text-decoration:none; color:var(--ink)}
.pub-pagina:hover, .pub-pagina:focus-visible{background:var(--accent-soft)}
.pub-pagina-nome{display:flex; flex-direction:column; min-width:0}
.pub-pagina-nome b{font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pub-pagina-nome .muted{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pub-pagina-reti{display:inline-flex; gap:6px; align-items:center}
.pub-pagina-stato{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; font-size:12.5px}
.pub-prossimo{color:var(--ink-mid); font-variant-numeric:tabular-nums}
.pub-pagina-vai{color:var(--ink-soft); font-size:20px; line-height:1}
.pub-contesto{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3);
    padding:var(--s3) var(--s4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.pub-contesto-nome{display:flex; flex-direction:column; min-width:0}
.pub-contesto-nome b{font-size:16px; font-weight:700; color:var(--ink)}
.pub-contesto-nome .muted{font-size:12.5px}
@media (max-width:760px){
    .pub-pagina{grid-template-columns:minmax(0, 1fr) 16px; gap:4px var(--s2); padding:12px var(--s3)}
    .pub-pagina-nome{grid-column:1; grid-row:1}
    .pub-pagina-vai{grid-column:2; grid-row:1 / span 3}
    .pub-pagina-reti{grid-column:1; grid-row:2}
    .pub-pagina-stato{grid-column:1; grid-row:3; justify-content:flex-start}
    .pub-indice-testa .toolbar-search{max-width:none; width:100%}
}

/* calendario della pagina */
.cal-testa{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s2)}
.cal-testa h2{font-size:17px; font-weight:700; min-width:10ch; text-align:center}
.cal-quante{font-size:12.5px}
.cal-pagina{padding:var(--s4); margin-bottom:var(--s4)}
.cal-pagina-testa{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-bottom:var(--s3)}
.cal-pagina-nome{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 var(--s2); min-width:0}
.cal-pagina-nome h3{margin:0; font-size:16px; font-weight:700; color:var(--ink); overflow-wrap:anywhere}
.cal-pagina-nome .muted{font-size:12.5px}
.cal-pagina-reti{display:inline-flex; gap:6px; align-items:center}
.cal{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.cal-gs{background:var(--surface-2); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-soft); padding:6px var(--s2)}
.cal-vuoto{background:var(--surface-alt)}
.cal-g{background:var(--surface); min-height:76px; padding:6px; display:flex; flex-direction:column; gap:3px; min-width:0}
.cal-g.passato{background:var(--surface-alt)}
.cal-g.oggi .cal-num{background:var(--accent); color:#fff; border-radius:999px; padding:0 7px}
.cal-n{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600;
    color:var(--ink-mid); font-variant-numeric:tabular-nums}
.cal-posts{display:flex; flex-direction:column; gap:3px; min-width:0}
.cal-punti{display:none}
.cal-piu{color:var(--accent-link); text-decoration:none; font-weight:700; font-size:16px; line-height:1;
    padding:0 6px; border-radius:var(--radius-sm); opacity:.35}
.cal-g:hover .cal-piu, .cal-piu:focus{opacity:1; background:var(--accent-soft)}
.cal-post{display:flex; align-items:center; gap:4px; font-size:11.5px; line-height:1.3; padding:2px 5px;
    border-radius:4px; text-decoration:none; color:var(--ink); background:var(--accent-soft);
    border-left:3px solid var(--accent); min-width:0; font-variant-numeric:tabular-nums}
.cal-post span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-post svg{flex:none}
.cal-post.st-bozza{background:var(--surface-2); border-left:3px dashed var(--border-strong); color:var(--ink-mid)}
.cal-post.st-pubblicato{background:var(--ok-bg); border-left-color:var(--ok)}
.cal-post.st-errore{background:var(--crit-bg); border-left-color:var(--crit)}
/* trascinamento: si prende un post da approvare o programmato e si lascia su un giorno non passato */
.cal-post[draggable="true"]{cursor:grab}
.cal-post.in-volo{opacity:.45}
.cal-g.drop-su{outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-soft)}
.cal-post.spostato{box-shadow:0 0 0 2px var(--accent)}
.cal-spostato{margin:8px 0 0; font-size:13px}
.cal-spostato.errore{color:var(--crit)}
/* finestrella del post nel calendario: orario ed Elimina senza cambiare pagina */
.cal-pop{border:1px solid var(--border); border-radius:var(--radius, 8px); padding:0; max-width:min(420px, calc(100vw - 32px));
    background:var(--surface); color:var(--ink); box-shadow:0 12px 32px -12px rgba(16,24,40,.35)}
.cal-pop::backdrop{background:rgba(16,24,40,.35)}
.cal-pop-corpo{display:flex; flex-direction:column; gap:12px; padding:16px}
.cal-pop-corpo label{display:flex; flex-direction:column; gap:4px}
.cal-pop-corpo label.cal-pop-insieme{flex-direction:row; align-items:center; gap:8px}
.cal-pop-titolo{margin:0}
.cal-pop-errore{margin:0; color:var(--crit)}
.pub-orario{display:inline-flex; gap:4px; align-items:center}
.pub-elimina{color:var(--crit)}
.cal-legenda{display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s4); font-size:12px}
.cal-legenda .cal-post{display:inline-flex}
/* post letti da Meta (PostMeta): etichetta piccola e neutra, il colore resta quello dello stato */
.pill.pub-da-meta{font-size:10px; padding:0 5px; flex:none}
.pub-fonte-meta{font-size:12px; margin:0 0 var(--s3)}
/* reel programmati su Meta senza ora: una fascia sopra la griglia, finché non escono */
.cal-in-arrivo{margin:0 0 var(--s4); padding:0 0 var(--s3); border-bottom:1px solid var(--border)}
.cal-in-arrivo h3{margin:0; font-size:14px; font-weight:700}
.cal-in-arrivo p{margin:2px 0 var(--s2); font-size:12px}
.cal-in-arrivo-lista{display:flex; flex-wrap:wrap; gap:var(--s2)}
.cal-in-arrivo-lista > .cal-post{width:180px}
.cal-giorno{margin-top:var(--s3); display:grid; gap:var(--s2)}
.cal-giorno[hidden]{display:none}
.cal-giorno h4{margin:0; font-size:14px; font-weight:700; color:var(--ink)}
.cal-giorno .cal-post{font-size:14px; padding:10px 12px; gap:8px}
.cal-giorno .btn{justify-self:start}
@media (max-width:760px){
    /* sul telefono: il mese intero a quadretti con i pallini, i post del giorno toccato sotto */
    .cal-pagina{padding:var(--s3)}
    .cal-gs{padding:4px 0; text-align:center; font-size:10px; letter-spacing:0}
    .cal-g{min-height:46px; padding:4px 2px; align-items:center; gap:4px; cursor:pointer;
        -webkit-tap-highlight-color:transparent}
    .cal-n{justify-content:center}
    .cal-posts, .cal-piu{display:none}
    .cal-punti{display:flex; gap:3px; justify-content:center; flex-wrap:wrap}
    .cal-punti i{width:6px; height:6px; border-radius:50%; background:var(--accent)}
    .cal-punti i.st-bozza{background:var(--border-strong)}
    .cal-punti i.st-pubblicato{background:var(--ok)}
    .cal-punti i.st-errore{background:var(--crit)}
    .cal-g.scelto{box-shadow:inset 0 0 0 2px var(--accent)}
    .cal-testa h2{min-width:0; flex:1}
    .cal-quante{width:100%}
}
/* con cinque schede, sul telefono si scorrono invece di uscire dallo schermo */
@media (max-width:760px){
    .gbp-tabs{overflow-x:auto; overflow-y:hidden}
    .gbp-tab{white-space:nowrap; margin-bottom:0}
}
/* scheda Notion */
.pub-notion-testa{margin-bottom:var(--s5); display:grid; gap:var(--s3)}
.pub-notion-testa p{margin:0; max-width:760px; font-size:13.5px; color:var(--ink-mid)}
.pub-notion-tab .scelta-bottone{min-width:260px}
.pub-notion-tab input{min-width:150px; margin:0}
.pub-notion-tab td{vertical-align:middle}
.pub-scollegato td:first-child{color:var(--warn); font-weight:600}
@media (max-width:760px){
    /* la tabella dei collegamenti diventa una scheda per calendario */
    .pub-notion-tab thead{display:none}
    .pub-notion-tab, .pub-notion-tab tbody, .pub-notion-tab tr, .pub-notion-tab td{display:block; width:100%}
    .pub-notion-tab tr{padding:var(--s3); border-bottom:1px solid var(--border)}
    .pub-notion-tab td{padding:4px 0; border:0; white-space:normal}
    .pub-notion-tab td[data-etichetta]::before{content:attr(data-etichetta); display:block; font-size:11.5px;
        font-weight:500; color:var(--ink-mid); margin-bottom:2px}
    .pub-notion-nome{font-weight:600; font-size:14px}
    .pub-notion-tab .scelta-bottone, .pub-notion-tab input{min-width:0; max-width:none; width:100%}
}
/* musica dei reel */
.pub-musica{border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--s3); margin:0;
    display:grid; gap:var(--s2); min-width:0}
.pub-musica legend{font-weight:500; font-size:12.5px; color:var(--ink-mid); padding:0 var(--s1)}
.pub-musica [hidden]{display:none !important}
.pub-musica .toolbar-check{margin:0}
/* campi dei video YouTube e dei pin Pinterest */
.pub-youtube,.pub-pinterest{border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--s3); margin:0;
    display:grid; gap:var(--s2); min-width:0}
.pub-youtube[hidden],.pub-pinterest[hidden]{display:none}
.pub-youtube legend,.pub-pinterest legend{font-weight:500; font-size:12.5px; color:var(--ink-mid); padding:0 var(--s1)}
.mus-cerca{display:flex; gap:var(--s2)}
.mus-cerca input{margin:0; flex:1; min-width:0}
.mus-scelta, .mus-risultati li{display:flex; align-items:center; gap:var(--s2); min-width:0}
.mus-scelta{padding:var(--s2); background:var(--accent-soft); border-radius:var(--radius-sm)}
.mus-nome{flex:1; min-width:0; display:flex; flex-direction:column; font-size:13px; line-height:1.3}
.mus-nome b, .mus-nome span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mus-icona{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:4px;
    background:var(--surface-2); color:var(--ink-mid)}
.mus-risultati{list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:320px; overflow-y:auto;
    border:1px solid var(--border); border-radius:var(--radius-sm)}
.mus-risultati li{padding:6px var(--s2)}
.mus-risultati li + li{border-top:1px solid var(--border)}
.mus-risultati img{width:36px; height:36px; object-fit:cover; border-radius:4px; flex:none}
.pub-brano{font-size:12px; color:var(--ink-mid); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ordine dei file nel modulo: si esce nell'ordine della lista */
.pub-ordine{list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; gap:var(--s1)}
.pub-ordine li{display:flex; align-items:center; gap:var(--s2); padding:var(--s1); border:1px solid var(--border);
    border-radius:var(--radius-sm); background:var(--surface-2); min-width:0}
.pub-ordine img, .pub-ordine video, .pub-ordine li > span:first-child{width:44px; height:44px; object-fit:cover; border-radius:4px;
    flex:none; display:grid; place-items:center}
.pub-ordine-nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px;
    font-variant-numeric:tabular-nums}
.pub-pdf{display:inline-flex; align-items:center; padding:var(--s2) var(--s3); border:1px solid var(--border);
    border-radius:var(--radius-sm); text-decoration:none; font-size:13px}
/* lead di prova (Automazioni) */
.lp-scelta{max-width:480px; margin-bottom:var(--s5)}
.lp-scelta select{margin:0}
.lp-moduli{display:grid; gap:var(--s3)}
.lp-testa{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s3)}
.lp-scenari{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s2) 0 var(--s3)}
.lp-scenari a.pill{text-decoration:none}
.lp-modulo details > summary{display:inline-flex; list-style:none; cursor:pointer}
.lp-modulo details > summary::-webkit-details-marker{display:none}
.lp-modulo details[open] > summary{margin-bottom:var(--s3)}
.lp-form{display:grid; gap:var(--s2); max-width:520px}
.lp-form label{margin:var(--s1) 0 0}
.lp-form input, .lp-form select{margin:0}
.lp-form .btn{justify-self:start; margin-top:var(--s2)}
/* pagina cliente: spostamenti e riduzioni del mese */
.mosse{list-style:none; margin:var(--s1) 0 0; padding:0; display:grid; gap:var(--s1)}
.mosse li{display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; color:var(--ink-mid)}
.mosse .tnum{font-variant-numeric:tabular-nums; font-weight:600; min-width:84px; color:var(--ink)}
.mosse .tnum.warn-txt{color:var(--warn)}
.mosse .muted{font-size:inherit}

/* Campagne: la ricerca immediata nasconde righe e gruppi (.alert è una griglia, [hidden] da solo non basta) */
.c-row[hidden], .c-group[hidden], #nessuna-campagna[hidden]{display:none !important}

/* Contenuti creati */
.cnt-lista{display:flex; flex-direction:column; gap:var(--s2)}
.cnt-riga{display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3); color:inherit; text-decoration:none}
.cnt-riga:hover{border-color:var(--border-strong)}
.cnt-riga img,.cnt-segnaposto{width:56px; height:70px; object-fit:cover; border-radius:var(--radius-sm); flex:none; background:var(--surface-2)}
.cnt-segnaposto{display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-mid)}
.cnt-riga-testo{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.cnt-riga-testo b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cnt-striscia{display:flex; gap:var(--s2); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--s2)}
.cnt-striscia img{height:360px; width:auto; max-width:85vw; border-radius:var(--radius-sm); scroll-snap-align:start; flex:none}
.cnt-video{max-height:520px; max-width:100%; border-radius:var(--radius-sm); background:#000}
.cnt-anteprima{max-width:240px; border-radius:var(--radius-sm)}
.cnt-blog{white-space:pre-wrap; font-size:14px; line-height:1.6; max-height:600px; overflow:auto}
.cnt-testi{display:flex; flex-direction:column; gap:var(--s3)}
.cnt-rete{display:flex; flex-direction:column; gap:var(--s2)}
.cnt-rete label{display:flex; flex-direction:column; gap:var(--s1)}
.cnt-rete textarea,.cnt-rete input{width:100%}
.cnt-conta{align-self:flex-end; font-variant-numeric:tabular-nums}
.cnt-azioni{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s3)}
.cnt-azioni form{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start}
.cnt-azioni label{display:flex; flex-direction:column; gap:var(--s1); width:100%}
.cnt-post{list-style:none; padding:0; margin:0 0 var(--s2)}
.cnt-post li{padding:var(--s1) 0; border-bottom:1px solid var(--line)}

/* Creatività: il copione da leggere (gobbo) e il registratore della voce dei reel */
.gobbo{font-size:clamp(20px,2.6vw,30px); line-height:1.55; padding:var(--s5); max-width:46ch}
.gobbo p{margin:0 0 var(--s3)}
.gobbo strong{font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.gobbo-pausa{color:var(--accent-link); font-weight:700; padding:0 2px}
.reg-barra{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4)}
.reg-stato{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.reg-punto{width:12px; height:12px; border-radius:50%; background:var(--border-strong); flex:none}
.reg[data-stato="registra"] .reg-punto{background:var(--crit); animation:reg-pulsa 1.2s ease-in-out infinite}
@keyframes reg-pulsa{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .reg[data-stato="registra"] .reg-punto{animation:none} }
.reg-timer{font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; min-width:4ch}
.reg-livello{flex:1; min-width:80px; max-width:240px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.reg-livello span{display:block; height:100%; width:0; background:var(--accent)}
.reg-msg{margin:0}
.reg-audio{width:100%; max-width:480px}
.reg-tasti{display:flex; gap:var(--s2); flex-wrap:wrap}
.reg-tasti button{min-height:44px; min-width:110px; justify-content:center}
.reg-file{margin-top:var(--s3)}
.reg-file summary{cursor:pointer; color:var(--accent-link); padding:var(--s2) 0}
.reg-file form{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; margin-top:var(--s2)}
.reg-file label{display:flex; flex-direction:column; gap:var(--s1)}
.reg-scene img{height:240px}
.reg-testo{margin:var(--s2) 0 0; white-space:normal}
/* sul telefono i tasti restano a portata di pollice mentre si legge */
@media (max-width:640px){
    .gobbo{padding:var(--s4)}
    .reg-barra{position:sticky; bottom:0; z-index:5; box-shadow:var(--shadow-2)}
}

/* ---- Organici (solo token: il tema scuro li ridefinisce) ---- */
.org-filtri { flex-wrap: wrap; }
.org-periodo { margin: 0 0 var(--s3); }
.org-avviso { margin: calc(-1 * var(--s2)) 0 var(--s3); }
.org-delta { font-variant-numeric: tabular-nums; font-weight: 600; }
.org-su { color: var(--accent-link); }
.org-giu { color: var(--ink-soft); }
.org-insight ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s2); }
.org-insight li { line-height: 1.45; }
.org-tono-su::marker { color: var(--accent-link); }
.org-post-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); }
.org-post { display: grid; gap: var(--s1); color: inherit; text-decoration: none; }
.org-post img, .org-post-vuota { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); display: block; }
.org-post-meta { font-size: 12px; color: var(--ink-soft); }
.org-post-num { font-weight: 700; font-variant-numeric: tabular-nums; display: grid; }
.org-post-num span { font-weight: 500; font-size: 12px; }
.org-post-testo { font-size: 12px; color: var(--ink-mid); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.org-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); }
.org-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.org-tabella th, .org-tabella td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.org-tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-scorre { overflow-x: auto; }
.org-riga-testo { font-size: 12px; max-width: 360px; }
.org-griglia { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.org-griglia th { font-weight: 500; color: var(--ink-soft); padding: 2px 6px; }
.org-griglia td { width: 56px; height: 30px; text-align: center; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--accent) calc(var(--i) * 85%), var(--surface-2)); color: var(--ink); }
.org-griglia td.org-scuro { color: #fff; }
.org-versioni { display: grid; gap: var(--s2); }
.org-versione { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }

/* BOOST POST: caselle nel calendario e stato del boost sul post (verde/ambra/rosso solo per stato) */
.boost-casella{flex-direction:column; align-items:stretch; gap:var(--s1); padding:var(--s1); position:relative; cursor:pointer}
.boost-casella:has(input:checked){box-shadow:0 0 0 2px var(--accent)}
.boost-casella.boost-no{opacity:.5; cursor:not-allowed}
.boost-stati{display:flex; flex-direction:column; gap:var(--s1); width:100%}
/* .cal-post span taglia il testo su una riga: lo stato del boost va letto per intero */
.boost-casella .boost-stati, .boost-casella .boost-stato{overflow:visible; white-space:normal}
.boost-stato{font-size:11px; display:inline-flex; align-items:center; gap:4px}
.boost-stato.boost-ok{color:var(--ok)}
.boost-stato.boost-warn{color:var(--warn)}
.boost-stato.boost-crit{color:var(--crit)}
.boost-stato.boost-quieto{color:var(--ink-soft)}
/* anteprima del post (Boost e calendario di Pubblicazioni): miniatura quadrata a misura fissa (niente salti di layout), il testo in due righe al massimo */
.boost-casella input[type="checkbox"]{position:absolute; top:var(--s2); left:var(--s2); z-index:1; width:18px; height:18px; margin:0;
    accent-color:var(--accent); cursor:inherit;
    background:var(--surface); border-radius:var(--radius-sm); box-shadow:0 0 0 2px var(--surface)}
.post-anteprima{position:relative; display:block; width:72px; max-width:100%; aspect-ratio:1; border-radius:var(--radius-sm);
    overflow:hidden; background:var(--surface-2)}
.post-anteprima img{display:block; width:100%; height:100%; object-fit:cover}
.post-senza-img{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--ink-soft); font-size:20px}
.post-formato{position:absolute; right:var(--s1); bottom:var(--s1); padding:0 var(--s1); border-radius:var(--radius-sm);
    background:rgba(16,24,40,.72); color:#fff; font-size:10.5px; line-height:16px; font-weight:600}
.post-riga{display:flex; align-items:center; gap:var(--s1)}
.cal-post .post-testo{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal;
    color:var(--ink-mid); font-size:11px; line-height:1.3; overflow-wrap:anywhere}
.boost-zona, .boost-suggerimenti{list-style:none; padding:0; margin:var(--s1) 0; display:flex; flex-direction:column; gap:var(--s1)}
.boost-zona input{width:64px; font-variant-numeric:tabular-nums}
.boost-ferma{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2)}
.cal-pop-corpo fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s1)}
.cal-pop-corpo fieldset[hidden], .cal-pop-corpo details[hidden]{display:none} /* il display:flex sopra batteva hidden: si vedevano le sezioni di tutti e due i modi */
.cal-pop-corpo fieldset label{flex-direction:row; align-items:center; gap:var(--s2)}
/* BOOST in una campagna che c'è già: i blocchi della scelta «dove» e l'elenco delle inserzioni da spegnere */
.cal-pop-corpo fieldset.boost-modo{gap:12px}
.cal-pop-corpo fieldset.boost-modo > label{flex-direction:column; align-items:stretch; gap:4px}
.cal-pop-corpo fieldset.boost-modo > label.boost-riga, .cal-pop-corpo label.boost-riga{flex-direction:row; align-items:center; gap:var(--s2)}
.boost-zona-modo{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.boost-zona-precisa{display:flex; flex-direction:column; gap:var(--s2)}
.boost-zona-precisa[hidden]{display:none}
.cal-pop-corpo .boost-zona-precisa > label{flex-direction:column; align-items:stretch; gap:4px}
.boost-zona li{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.boost-zona li > span:first-child{flex:1 1 100%}
.cal-pop-corpo .boost-zona li input{width:72px; flex:none}
.boost-suggerimenti button{text-align:left}
.boost-pubblico{display:flex; flex-direction:column; gap:var(--s2); border-top:1px solid var(--border); padding-top:var(--s3)}
.boost-pubblico p{margin:0}
.boost-consiglio:empty{display:none}
.boost-eta{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.boost-eta[hidden]{display:none}
.cal-pop-corpo .boost-eta input{width:72px; font-variant-numeric:tabular-nums}
.boost-interessi{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s1)}
.boost-interessi li{display:flex; align-items:center; justify-content:space-between; gap:var(--s2)}
.cal-pop-corpo .boost-pubblico > label{flex-direction:column; align-items:stretch; gap:4px}
.boost-es-testa{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin:0}
/* finestra BOOST: scelte a scheda (titolo + riga di spiegazione), passi numerati */
.cal-pop-corpo fieldset legend{margin-bottom:var(--s1)}
.cal-pop-corpo fieldset label.boost-scelta{align-items:flex-start; padding:8px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer}
.cal-pop-corpo fieldset label.boost-scelta:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.cal-pop-corpo fieldset label.boost-scelta input{margin-top:3px}
.boost-scelta > span{display:flex; flex-direction:column; gap:2px}
details.boost-es{border-top:1px solid var(--border); padding-top:var(--s2)}
details.boost-es summary{cursor:pointer}
.boost-inserzioni{list-style:none; padding:0; margin:var(--s1) 0 0; max-height:240px; overflow:auto; display:flex; flex-direction:column; gap:var(--s1)}
.cal-pop-corpo .boost-inserzioni label{flex-direction:row; align-items:center; gap:var(--s2)}
.boost-inserzioni img{width:40px; height:40px; object-fit:cover; border-radius:var(--radius-sm); flex:none; background:var(--surface-2)}
.boost-inserzioni span{display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere}
.boost-inserzioni .boost-es-sezione{font-weight:600; font-size:13px; margin-top:var(--s2)}
.boost-inserzioni .boost-es-sezione:first-child{margin-top:0}
@media (max-width:760px){
    /* sul telefono il mese non è una griglia di pallini: i giorni con post si impilano, ognuno con le sue caselle
       (area di tocco da 44px), e il pulsante BOOST resta fisso in basso finché c'è qualcosa di spuntato */
    .boost-cal .cal{display:block; border:0; background:none}
    .boost-cal .cal-gs, .boost-cal .cal-vuoto, .boost-cal .cal-g:not(.ha-post), .boost-cal .cal-n{display:none}
    .boost-cal .cal-g.ha-post{display:block; min-height:0; padding:var(--s3) 0; border-bottom:1px solid var(--border); cursor:default}
    .boost-cal .cal-g.ha-post::before{content:attr(data-etichetta); display:block; margin-bottom:var(--s2);
        font-size:13px; font-weight:600; color:var(--ink-mid)}
    .boost-cal .cal-posts{display:flex; gap:var(--s1)}
    .boost-casella{min-height:44px; padding:var(--s2) var(--s3); font-size:14px; gap:var(--s2)}
    .boost-casella input[type="checkbox"]{top:var(--s3); left:var(--s4); width:24px; height:24px}
    .boost-cal .post-anteprima{width:100%; aspect-ratio:auto; height:min(100vw - 56px, 220px)}
    .boost-casella .post-testo{font-size:13px}
    .boost-cal{margin-bottom:72px}
    .boost-apri{position:fixed; left:var(--s4); right:var(--s4); bottom:var(--s4); z-index:20; justify-content:center;
        min-height:44px; box-shadow:var(--shadow-2)}
    .boost-apri:disabled{display:none}
}

/* calendario di Pubblicazioni: il post con la sua anteprima, come nel Boost (miniatura, riga di rete/ora/formato, testo breve) */
.cal-con-anteprima{flex-direction:column; align-items:stretch; gap:var(--s1); padding:var(--s1)}
.cal-con-anteprima .post-riga{min-width:0}
/* il post del giorno toccato sul telefono: miniatura a sinistra, riga e testo a destra */
.cal-giorno .cal-con-anteprima{display:grid; grid-template-columns:72px minmax(0, 1fr); column-gap:var(--s3); row-gap:var(--s1);
    align-items:start; padding:var(--s2) var(--s3)}
.cal-giorno .cal-con-anteprima .post-anteprima{grid-row:1 / span 2}
.cal-giorno .cal-con-anteprima .post-riga{align-self:center}
.cal-giorno .cal-con-anteprima .post-testo{font-size:13px}

/* Search: campagne e parole chiave */
.search-scorre { overflow-x: auto; }
.search-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.search-testa .card-heading, .search-testa .card-sub { margin: 0; }
.search-barra { display: inline-block; height: 8px; min-width: 2px; max-width: 120px; background: var(--accent); border-radius: 4px; vertical-align: middle; }
.search-url { max-width: 260px; overflow-wrap: anywhere; font-size: 12px; }
.search-sotto { font-size: 15px; margin: var(--s5) 0 var(--s2); }
.search-diagnosi { padding-left: var(--s5); display: grid; gap: var(--s2); }
.search-consigli td:nth-child(4) { min-width: 260px; }
.search-consigli form { margin: 0; }
.search-campi { margin: 0 0 var(--s4); }
.search-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--border); color: var(--ink); font-size: 11px; text-align: center; }
.chip-active .search-n { background: #fff; color: var(--accent); }
.search-sintesi { font-size: 15px; line-height: 1.55; max-width: 75ch; }
.search-piu { margin: var(--s3) 0; }
.search-piu > summary { cursor: pointer; color: var(--accent); }
.search-mostra { margin-top: var(--s2); }
.search-azioni-tutte { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0; }
.search-tutto { margin: 0; }
.search-voci { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.search-voci > li { border: 1px solid var(--border); border-radius: 8px; padding: var(--s3); }
.search-voce-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.search-voce-azione { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.search-voce-azione form { margin: 0; }
.search-perche { margin: var(--s1) 0 0; color: var(--ink-mid); max-width: 75ch; }
.search-dett { margin-top: var(--s1); font-size: 13px; }
.search-dett > summary { cursor: pointer; color: var(--ink-mid); }
.search-dett dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; }
.search-dett dt { color: var(--ink-mid); }
.search-dett dd { margin: 0; }
@media (max-width: 640px) { .search-voce-testa { flex-direction: column; } }
.search-attenzione { margin: var(--s1) 0 0; padding: var(--s1) var(--s2); border-left: 3px solid var(--warn-border); background: var(--warn-bg); font-size: 13px; max-width: 75ch; }