/* ═══════════════════════════════════════════════════════════════
   area-pipeline.css — Pipeline (#pan-pipeline: kanban, card, KPI,
   filtri, drag & drop) e Libro Mastro (#pan-lista: toolbar, filtri
   avanzati, preset, tabella, bulk bar, paginazione, card da telefono).
   PR 4 del nuovo design. Caricato dopo area-home.css e PRIMA di
   area-shell.css (che chiude la cascata col blocco prefers-reduced-motion:
   i selettori animati di qui stanno anche là). Solo token: niente hex,
   niente !important, niente font-family, niente rem. Testo mai sotto
   gli 11 px. Il markup lo generano js/modules/pipeline.js e lista.js;
   i valori che vengono dai dati arrivano come data-level e classi di
   segno, mai come colore scritto nel JavaScript.
   Le stesse classi .pipeline/.pipe-col/.op-card/.kpi-* le usa il kanban di
   Investitori (investitori.js): eredita questo aspetto; il resto di
   Investitori sta in area-minori.css (PR 13c).
   ═══════════════════════════════════════════════════════════════ */

/* ── KPI in testa alla Pipeline (e a Investitori) ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.kpi-card{padding:var(--sp-3) var(--sp-4);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r);text-align:center}
.kpi-val{font-size:20px;font-weight:700;line-height:1.1;letter-spacing:-.3px;color:var(--fc-accent);font-variant-numeric:tabular-nums}
.kpi-val[data-level="ok"]{color:var(--fc-ok)}
.kpi-val[data-level="warn"]{color:var(--fc-warn)}
.kpi-sub{font-size:13px;color:var(--fc-label2)}
.kpi-lbl{margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)}

/* ── Filtri della Pipeline (tre tendine .lm-sel + Reset .btn) ── */
.pipe-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.pipe-filters .lm-sel{min-width:140px}

/* ── Lavagna: scorre in orizzontale, colonne larghe (decisione 1) ── */
.pipeline{display:flex;gap:var(--sp-2);padding-bottom:var(--sp-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;min-height:calc(100vh - 200px);min-height:calc(100dvh - 200px)}
.pipe-col{flex:0 0 220px;min-width:0;display:flex;flex-direction:column;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--r);scroll-snap-align:start}
.pipe-col-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--fc-sep)}
.pipe-col-head-l{display:flex;align-items:center;gap:var(--sp-1);min-width:0}
.pipe-col-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pipe-col-count{flex:none;min-width:22px;padding:2px 7px;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.pipe-col-body{flex:1;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2);overflow-y:auto}
.pipe-col-empty{padding:var(--sp-5) var(--sp-2);color:var(--fc-label2);font-size:13px;text-align:center}

/* ── Card operazione (decisione 2): tono, non ombra; prezzo su una riga; scala ── */
.op-card{position:relative;padding:var(--sp-3);background:var(--fc-bg);border:1px solid var(--fc-sep);border-radius:var(--rs);cursor:pointer;transition:border-color .15s,background .15s}
.op-card:focus-visible{outline:2px solid var(--fc-accent);outline-offset:1px}
/* Codice sulla prima riga accanto a pallino e badge, città a capo su tutta la larghezza (giro visivo
   28-set-2026): sulla stessa riga, nelle colonne da 220 px, alla città restavano 29 px ("VE…"). */
.op-card-city{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sp-2);min-width:0;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)}
.op-card-city-txt{order:1;flex-basis:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* senza codice (bozza appena creata) la città resta sulla prima riga, sotto pallino e badge */
.op-card-city-txt:only-child{margin-right:var(--sp-5)}
.op-card-code{flex:none;padding:1px 6px;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:11px;letter-spacing:.04em;line-height:16px}
.op-card-addr{margin-bottom:var(--sp-1);font-size:13px;font-weight:600;line-height:18px;color:var(--fc-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-card-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-1)}
/* .op-tag-agenzia ha l'aspetto di base di .op-tag: selettori uniti invece di ripetere le due
   dichiarazioni (la classe resta nel markup come aggancio). Raggi dai token (--rs, 8 px): i 4 px
   scritti a mano erano gli unici fuori scala insieme a .mob-op-tag e .tag-source. */
.op-tag,.op-tag-agenzia{padding:1px 6px;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:600;line-height:16px}
.op-tag-tipo{background:var(--fc-accent-soft);color:var(--fc-accent)}
.op-tag-agente{background:var(--fc-info-soft);color:var(--fc-info)}
.op-card-price{font-size:15px;font-weight:700;color:var(--fc-label);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-card-metrics{display:flex;gap:var(--sp-2);margin-top:2px}
.op-metric{font-size:11px;font-weight:600;color:var(--fc-label2)}
.op-metric span{color:var(--fc-accent);font-weight:700}
.op-card .scala{display:flex;max-width:none;margin-top:var(--sp-2)}
/* giorni a sinistra, badge a destra: era inline prima della PR 4 (justify-content:space-between) */
.op-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-1);margin-top:var(--sp-1)}
.op-card-foot:empty{display:none}
.op-card-age{font-size:11px;font-weight:700;color:var(--fc-label2)}
.op-card-age[data-level="warn"]{color:var(--fc-warn)}
.op-card-age[data-level="danger"]{color:var(--fc-danger)}
.op-card-badge{padding:1px 6px;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;line-height:16px}
.op-card-badge[data-level="ok"]{background:var(--fc-accent-soft);color:var(--fc-accent)}
.op-card-badge[data-level="info"]{background:var(--fc-info-soft);color:var(--fc-info)}
.op-card-badge[data-level="warn"]{background:var(--fc-warn-soft);color:var(--fc-warn)}
.op-card-badge[data-level="danger"]{background:var(--fc-danger-soft);color:var(--fc-danger)}
.op-card-score{position:absolute;top:var(--sp-2);right:calc(var(--sp-3) + 14px);display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:700;line-height:14px}
.op-card-score[data-level="ok"]{background:var(--fc-accent-soft);color:var(--fc-accent)}
.op-card-score[data-level="warn"]{background:var(--fc-warn-soft);color:var(--fc-warn)}
.op-card-score[data-level="danger"]{background:var(--fc-danger-soft);color:var(--fc-danger)}
/* has-score la mette pipeline.js al render: con :has() Safari sotto 15.4 perdeva la regola e il badge copriva il codice.
   Il codice (52 px) non arriva mai al badge; resta da fare spazio solo alla città quando è sola sulla prima riga. */
.op-card.has-score .op-card-city-txt:only-child{margin-right:calc(var(--sp-5) + 48px)}
/* .op-card-risk la usa solo la card della Pipeline (dalla PR 6b la Decisione mostra il rischio con .semaforo). Rispetto alla regola che stava in style.css cambia:
   pallino da 10 a 8 px, offset dai token al posto di .6rem, e un colore di riposo
   (--fc-rail) che prima non c'era. I tre .risk-* passano ai token e perdono l'alone. */
.op-card-risk{position:absolute;top:var(--sp-3);right:var(--sp-3);width:8px;height:8px;border-radius:50%;background:var(--fc-rail)}
.risk-green{background:var(--fc-ok)}
.risk-yellow{background:var(--fc-warn-fill)}
.risk-red{background:var(--fc-danger)}

/* ── Drag & drop: il "Rilascia qui" non sposta il layout (inset, non border) ── */
.op-card[draggable="true"]{cursor:grab}
.op-card.dragging{opacity:.35;transform:scale(.92)}
/* Viva: pipeline.js (dndStart) e investitori.js (invDndStart, dalla PR 13c) mettono la classe sul
   fantasma del trascinamento. */
.dnd-ghost{position:absolute;top:-9999px;width:180px;opacity:.85;transform:rotate(2deg);pointer-events:none}
.pipe-col-body.drag-over{position:relative;background:var(--fc-accent-soft);border-radius:var(--rs);box-shadow:inset 0 0 0 2px var(--fc-accent)}
.pipe-col-body.drag-over::before{content:"Rilascia qui";position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-accent);opacity:.7;pointer-events:none}
.pipe-col.drag-source .pipe-col-head{opacity:.5}
.op-card.just-dropped{animation:fcDropPulse .5s ease}
@keyframes fcDropPulse{0%{transform:scale(.9)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* ═══ Libro Mastro (#pan-lista) ═══ */

/* ── Toolbar: ricerca, tendine, Avanzati, Salva filtro, Reset (decisione 8) ── */
.lm-toolbar{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.lm-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.lm-search-wrap{position:relative;flex:1;min-width:200px;display:flex;align-items:center}
.lm-search-icon{position:absolute;left:var(--sp-3);font-size:14px;opacity:.5;pointer-events:none}
.lm-search{width:100%;min-height:36px;padding:0 var(--sp-6);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;outline:none}
.lm-search:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
.lm-search-clear{position:absolute;right:var(--sp-2);display:none;padding:var(--sp-1);border:0;border-radius:50%;background:none;color:var(--fc-label2);font-size:12px;line-height:1;cursor:pointer}
.lm-search-clear.visible{display:block}
.lm-sel{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;cursor:pointer;outline:none}
/* :focus, non :focus-visible, per coerenza coi campi di base.css (.fg select:focus) e con
   .lm-search e .lm-range-in qui sopra e sotto: il bordo verde dice "stai scegliendo qui" anche
   col mouse o col dito. Chrome 152 accende :focus-visible anche su un <select> cliccato (provato
   nel Browser pane), quindi lì non cambia niente; un browser che lo tiene solo per la tastiera
   lasciava la tendina senza segno, perché .lm-sel ha outline:none (design-04b). */
.lm-sel:focus{border-color:var(--fc-accent);box-shadow:0 0 0 3px var(--fc-accent-soft)}
.lm-sel.active{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent);font-weight:600}
.lm-adv-toggle{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label2);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.lm-adv-toggle.on{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)}
.lm-reset-btn{min-height:36px;padding:0 var(--sp-3);border:1px solid var(--fc-danger);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-danger);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.lm-adv{padding:var(--sp-3);background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--rs)}
.lm-adv-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-4)}
.lm-range-group{display:flex;flex-direction:column;gap:var(--sp-1)}
.lm-range-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)}
.lm-range-inputs{display:flex;align-items:center;gap:var(--sp-1)}
.lm-range-in{width:80px;min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;outline:none}
.lm-range-in:focus{border-color:var(--fc-accent)}
.lm-range-in.active{border-color:var(--fc-accent);background:var(--fc-accent-soft)}
.lm-range-sep{font-size:13px;color:var(--fc-label2)}
.lm-chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:2px}
.lm-chip-check{position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);min-height:28px;padding:0 var(--sp-3);border:1px solid var(--fc-sep);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-label);font-size:12px;font-weight:600;cursor:pointer}
/* active la mette lista.js al render (era :has(input:checked): Safari sotto 15.4 non mostrava la spunta) */
.lm-chip-check.active{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)}
/* La casella resta nel Tab (Spazio la spunta, lo screen reader la annuncia col testo della label)
   e copre tutta la chip, trasparente: appearance:none non disegna niente, e un clic sulla chip è
   un clic sulla casella, una volta sola. L'anello è della casella e solo su :focus-visible, cioè
   da tastiera: con :focus-within sulla label si accendeva anche al clic col mouse (review #354).
   Niente opacity:0, che spegnerebbe anche l'anello; top/left e non inset per Safari sotto 14.1.
   label. sull'anello no: in analytics.js .lm-chip-check è un <button> senza casella. */
.lm-chip-check input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.lm-chip-check input:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
/* Colori forzati (contrasto elevato): il sistema sostituisce sfondi e bordi, la chip spuntata e
   quella no diventavano uguali. Solo lì la casella torna quella di sistema, in flusso prima del
   testo: la spunta la disegna il sistema coi suoi colori, senza dipendere da .active né da un
   glifo aggiunto; il clic sulla chip passa dalla label come in ogni checkbox (terza review #354). */
@media (forced-colors:active){
  .lm-chip-check input{position:static;width:auto;height:auto;margin:0;-webkit-appearance:auto;appearance:auto}
}
/* preset dei filtri salvati (tools.js renderFilterPresets): la pillola contiene due <button>,
   il nome (carica) e la ✕ (cancella), così Tab li raggiunge (design-04b). I bottoni riempiono
   la pillola in altezza: il click sul bordo del nome carica come prima. */
.lm-presets{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-2)}
.lm-preset{display:inline-flex;align-items:stretch;min-height:28px;border:1px solid var(--fc-accent);border-radius:var(--r-pill);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:12px}
.lm-preset-load,.lm-preset-x{display:inline-flex;align-items:center;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.lm-preset-load{padding:0 var(--sp-1) 0 var(--sp-3);border-radius:var(--r-pill) 0 0 var(--r-pill)}
.lm-preset-x{padding:0 var(--sp-3) 0 var(--sp-1);border-radius:0 var(--r-pill) var(--r-pill) 0;color:var(--fc-danger)}
.lm-preset-load:focus-visible,.lm-preset-x:focus-visible{outline:2px solid var(--fc-accent);outline-offset:-2px}
.lm-table-header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0}
.lm-count{flex:1;font-size:13px;font-weight:600;color:var(--fc-label2)}
.lm-sort-pills{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.lm-sort-lbl{font-size:12px;font-weight:600;color:var(--fc-label2)}
.lm-sort-pill{display:inline-flex;align-items:center;gap:2px;min-height:28px;padding:0 var(--sp-2);border:1px solid var(--fc-accent);border-radius:var(--r-pill);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.lm-sort-pill .pill-x{margin-left:2px;opacity:.7}

/* ── Tabella ── */
.lm-table-card{overflow:hidden;background:var(--fc-card);border:1px solid var(--fc-sep);color:var(--fc-label)}
.lm-scroll{overflow-x:auto}
#listaTable{width:100%;border-collapse:collapse}
#listaTable thead{background:var(--fc-card)}
.lm-th{position:sticky;top:0;z-index:1;padding:var(--sp-2) var(--sp-3);background:var(--fc-card);border-bottom:1px solid var(--fc-rail);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2);white-space:nowrap}
.lm-th-sort{cursor:pointer;user-select:none}
.lm-th-sort.sorted{color:var(--fc-accent)}
.lm-th-num{text-align:right}
.lm-th-chk,.lm-th-act{width:30px}
.lm-th-chk{padding:0 var(--sp-1)}
.lm-sort-icon{display:inline-block;width:12px;font-size:11px;text-align:center;opacity:.4}
.lm-th-sort.sorted .lm-sort-icon{opacity:1}
#listaTable tbody tr{border-bottom:1px solid var(--fc-sep);cursor:pointer}
#listaTable tbody tr.from-storico{opacity:.85}
#listaTable td{padding:var(--sp-2) var(--sp-3);font-size:13px;vertical-align:middle;color:var(--fc-label)}
/* celle numeriche su una riga: la tabella scorre dentro .lm-scroll (consegna #279) */
#listaTable td.td-num,#listaTable td.price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#listaTable td.price{font-weight:700}
/* Le regole di cella portano il prefisso #listaTable td: la regola generica sopra è (1,0,1) e
   batterebbe una classe nuda (0,1,0). .lm-num.is-* esiste anche nuda per gli <span> delle card mobile. */
#listaTable td.lm-td-chk{padding:0 var(--sp-1)}
#listaTable td.lm-td-id{font-size:12px;font-weight:700;color:var(--fc-accent);white-space:nowrap}
#listaTable td .lm-td-st{font-size:12px;font-weight:600}
#listaTable td.lm-td-addr{max-width:200px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#listaTable td.lm-td-date{font-size:12px;color:var(--fc-label2)}
#listaTable td.lm-td-act{padding-right:var(--sp-2);text-align:right}
#listaTable td.lm-td-act .btn{min-height:28px;padding:0 var(--sp-2);font-size:12px}
.lm-num.is-pos,#listaTable td.lm-num.is-pos{font-weight:700;color:var(--fc-ok)}
.lm-num.is-neg,#listaTable td.lm-num.is-neg{font-weight:700;color:var(--fc-danger)}
.lm-num.is-zero,#listaTable td.lm-num.is-zero{color:var(--fc-label2)}
.tag-source{margin-left:var(--sp-1);padding:0 4px;border-radius:var(--rs);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tag-source-s{background:var(--fc-accent-soft);color:var(--fc-accent)}
.tag-source-p{background:var(--fc-warn-soft);color:var(--fc-warn)}
#listaTable td.lm-empty{padding:var(--sp-6);color:var(--fc-label2);text-align:center}
.lm-empty-ico{margin-bottom:var(--sp-1);font-size:24px}
.lm-empty-t{font-weight:600;color:var(--fc-label)}
.lm-empty-a{margin-top:var(--sp-1);font-size:13px}
.lm-empty-a a{color:var(--fc-accent)}

/* ── Bulk bar chiara (decisione 7) ── */
.bulk-bar{display:none;color:var(--fc-label);flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--fc-accent-soft);border:1px solid var(--fc-accent);border-radius:var(--r);animation:fcBulkIn .2s ease}
.bulk-bar.visible{display:flex}
.bulk-count{font-size:13px;font-weight:700;color:var(--fc-accent)}
.bulk-btn{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--fc-accent);border-radius:var(--r-pill);background:var(--fc-card);color:var(--fc-accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.bulk-btn-danger{border-color:var(--fc-danger);color:var(--fc-danger)}
.bulk-pdf{position:relative;display:inline-block}
.bulk-pdf>summary{list-style:none;display:inline-flex;align-items:center}
.bulk-pdf>summary::-webkit-details-marker{display:none}
.bulk-pdf-menu{position:absolute;left:0;z-index:50;min-width:140px;margin-top:2px;overflow:hidden;background:var(--fc-card);border:1px solid var(--fc-sep);border-radius:var(--rs);box-shadow:var(--fc-shadow)}
.bulk-pdf-voce{display:block;width:100%;padding:var(--sp-2) var(--sp-3);border:0;background:transparent;color:var(--fc-label);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.bulk-sel{min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-accent);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:12px;outline:none}
.lm-chk{width:16px;height:16px;accent-color:var(--fc-accent);cursor:pointer}
@keyframes fcBulkIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ── Paginazione ── */
.pag{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-1);padding:var(--sp-3);border-top:1px solid var(--fc-sep)}
.pag-info{margin-right:var(--sp-2);font-size:12px;color:var(--fc-label2);font-variant-numeric:tabular-nums}
.pag-gap{padding:0 var(--sp-1);color:var(--fc-label2)}
.pg-btn{min-width:32px;min-height:32px;padding:0 var(--sp-2);border:1px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pg-btn.active{border-color:var(--fc-accent-fill);background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.pg-btn:disabled{opacity:.3;cursor:default}

/* ── Card da telefono (decisione 9): righe separate, stato = pallino più parola ── */
#mobileListaCards{display:none}
.mob-op-card{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--fc-sep);background:var(--fc-card);cursor:pointer}
.mob-op-card:active{background:var(--fc-bg)}
.mob-op-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3)}
.mob-op-addr{flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-op-price{flex:none;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.mob-op-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);font-size:13px;color:var(--fc-label2)}
.mob-op-st{display:inline-flex;align-items:center;font-weight:600;color:var(--fc-label)}
.mob-op-tag{padding:1px 6px;border-radius:var(--rs);background:var(--fc-fill);color:var(--fc-label);font-size:11px;font-weight:600}

/* ── Puntatore: hover solo dove esiste ── */
@media (hover:hover){
  .bulk-pdf-voce:hover{background:var(--fc-accent-soft)}
  .op-card:hover{border-color:var(--fc-accent);background:var(--fc-card)}
  .lm-th-sort:hover{background:var(--fc-bg);color:var(--fc-accent)}
  .lm-th-sort:hover .lm-sort-icon{opacity:1}
  #listaTable tbody tr:not(.fc-bulk-focus):hover{background:var(--fc-bg)}
  .lm-adv-toggle:hover,.lm-chip-check:hover{border-color:var(--fc-accent)}
  .lm-reset-btn:hover{background:var(--fc-danger-soft)}
  .lm-sort-pill:hover,.bulk-btn:hover{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
  .bulk-btn-danger:hover{background:var(--fc-danger-soft);color:var(--fc-danger)}
  .pg-btn:not(:disabled):hover{border-color:var(--fc-accent);color:var(--fc-accent)}
  .lm-search-clear:hover,.lm-preset-x:hover{color:var(--fc-label)}
}

/* ── Touch: bersagli a 44 px come .btn di base.css ── */
@media (hover:none){
  .lm-sel,.lm-search,.lm-adv-toggle,.lm-reset-btn,.bulk-btn,.bulk-sel,.pg-btn{min-height:44px}
  #listaTable td.lm-td-act .btn{min-height:36px}
}

/* ── Telefono ──
   Spariti di proposito con la PR 4 (tests/area-pipeline.test.js li nomina): l'ombra al passaggio
   sulle .kpi-card (il nuovo design non mette ombre sulle card) e il gradino a 480 px che stava in style.css
   (colonna singola, indirizzo, prezzo e KPI rimpiccioliti sotto gli 11 px). Da telefono la lavagna
   scorre di lato con colonne a 85vw e i KPI stanno su due colonne, qui sotto. */
@media screen and (max-width:768px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-val{font-size:17px}
  .pipe-filters{flex-direction:column;align-items:stretch}
  .pipe-filters .lm-sel{min-width:0;width:100%}
  /* 240 = testata su due righe + KPI + filtri (era in mobile.css:218-228, con la nota sul dvh) */
  .pipeline{min-height:calc(100vh - 240px);min-height:calc(100dvh - 240px)}
  .pipe-col{flex-basis:min(280px,85vw);max-height:calc(100vh - 240px);max-height:calc(100dvh - 240px)}
  #listaTable{display:none}
  #mobileListaCards{display:block}
  .lm-toolbar-row{flex-direction:column;align-items:stretch}
  .lm-search-wrap{min-width:0}
  .lm-sel,.lm-adv-toggle,.lm-reset-btn{width:100%}
}