/* dashboard/css/46-marketing.css — estratto da app.css (2026-07, split senza build). */
/* =========================================================
   MARKETING — outcome-first design
   ========================================================= */

/* Bottom-nav: 4 voci + "+" → la label resta a 10px (≥ soglia leggibilità) anche su mobile */
@media (max-width: 480px) { .bottom-nav button span { font-size: 10px; } }

/* Info tip — label sottolineato tratteggiato, popover on hover (no più `?` separato) */
.info-tip { position: relative; cursor: help; text-decoration: underline dashed var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.info-tip:hover, .info-tip:focus-visible { color: var(--brand); text-decoration-color: var(--brand); outline: none; }
.info-popover { position: absolute; top: calc(100% + 8px); left: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; width: 280px; max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(15,20,25,0.14); display: none; z-index: 200; text-align: left; letter-spacing: 0; pointer-events: none; font-family: inherit; white-space: normal; }
.info-tip:hover .info-popover, .info-tip:focus-visible .info-popover { display: block; }
.info-popover::before { content: ''; position: absolute; top: -7px; left: 20px; transform: rotate(45deg); width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.info-popover strong { color: var(--ink); font-weight: 700; }
.info-popover .ex { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-2); font-style: italic; }

/* Wizard avanzato (5 step condensati dai 9 Bloomest) */
.wiz-stepper { display: flex; align-items: center; padding: 0 var(--page-pad-x) 8px; gap: 0; }
@media (min-width: 768px) { .wiz-stepper { padding: 0 var(--page-pad-x) 12px; } }
.wiz-stepper .dot { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--ink-3); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.wiz-stepper .dot.done { background: var(--ok); color: #fff; border-color: var(--ok); }
.wiz-stepper .dot.current { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.wiz-stepper .seg { flex: 1; height: 2px; background: var(--line); }
.wiz-stepper .seg.done { background: var(--ok); }

.wiz-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; margin: 12px var(--page-pad-x); }
@media (min-width: 768px) { .wiz-content { padding: 22px 24px; margin: 14px var(--page-pad-x); } }
.wiz-error { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand); color: var(--brand); font-size: 13px; font-weight: 600; line-height: 1.4; }
.wiz-error .i { flex: 0 0 auto; }
.wiz-content h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
.wiz-content .hint { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
/* Option card radio — componente condiviso (wizard Promo, card bonus).
   La classe nuda .opt e' usata SOLO con questo pattern (verifica 2026-07-05). */
/* position:relative: ancora i radio nascosti (position:absolute) alla lista.
   Senza, il loro containing block e' la pagina: in WebKit si stirano a tutta
   larghezza dal bordo card (+34px oltre il viewport su iPhone) scavalcando
   l'overflow:hidden della card -> shrink-to-fit + auto-zoom al focus. */
.opt-list { display: flex; flex-direction: column; gap: 10px; position: relative; }
.opt { padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; transition: border-color .12s, background .12s; background: var(--surface); }
.opt:hover { border-color: var(--brand); }
.opt.selected,
.opt-list input[type="radio"]:checked + .opt { border-color: var(--brand); background: var(--brand-soft); }
.opt .opt-radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); margin-top: 2px; position: relative; background: var(--surface); }
.opt.selected .opt-radio,
.opt-list input[type="radio"]:checked + .opt .opt-radio { border-color: var(--brand); }
.opt.selected .opt-radio::after,
.opt-list input[type="radio"]:checked + .opt .opt-radio::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.opt-list input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; font-size: 16px; }
.opt .opt-body { flex: 1; }
.opt .opt-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.opt .opt-desc { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
/* .opt dentro un .field (pane Bonus reg./Compleanno): il label eyebrow
   (.field label, piu' specifico) vincerebbe sul componente — display:block
   impila la radio sopra il testo e l'uppercase 11px si eredita su titolo e
   descrizione. Ripristina il componente in quel contesto. */
.field label.opt { display: flex; font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); margin-bottom: 0; }
.wiz-content .sub-field { margin-top: 14px; padding: 14px; background: var(--bg); border-radius: 12px; }
.wiz-content .sub-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.wiz-content .sub-field input[type="number"], .wiz-content .sub-field input[type="text"], .wiz-content .sub-field input[type="date"], .wiz-content .sub-field select, .wiz-content .sub-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: var(--surface); color: var(--ink); }
.wiz-content .sub-field input:focus, .wiz-content .sub-field select:focus, .wiz-content .sub-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wiz-content .sub-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .wiz-content .sub-field-row { grid-template-columns: 1fr; } }
/* Campi data wizard: componente .dt-field condiviso (niente <input type=date> nudo →
   niente calendario nativo su desktop). La regola .sub-field input{width:100%} sopra
   colpirebbe gli input INTERNI del componente (.dt-display testo, .dt-native overlay):
   li riportiamo al loro stile trasparente. Mobile/touch: resta l'overlay nativo (≈1501). */
.wiz-content .sub-field .dt-field { width: 100%; }
.wiz-content .sub-field .dt-field .dt-trigger { min-width: 0; width: 100%; }
.wiz-content .sub-field-row > div:last-child .dt-popover { left: auto; right: 0; }
.wiz-content .sub-field .dt-field .dt-display { width: 100%; border: 0; background: transparent; padding: 10px 4px 10px 12px; font-size: 16px; }
.wiz-content .sub-field .dt-field .dt-display:focus { box-shadow: none; }
.wiz-content .sub-field .dt-field .dt-native { width: auto; border: 0; padding: 0; background: transparent; }
/* Wroblewski: la larghezza del campo suggerisce la lunghezza del dato atteso. I campi
   numerici corti (%, conteggi, importi) NON vanno a tutta riga. */
.wiz-content .sub-field .fld-narrow { max-width: 6rem; }
.wiz-content .sub-field .fld-mid { max-width: 9rem; }
/* Checkbox giorni cashback "a giorno": riuso visivo del pattern .chk-row/.chk di
   Happy Hour, scoped a .wiz-content (le regole .happy_hour_form .chk* non si
   applicano fuori dal planner Happy Hour). */
.wiz-content .sub-field .chk-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 4px; }
.wiz-content .sub-field .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.wiz-content .sub-field .chk input { width: auto; margin: 0; accent-color: var(--brand); flex-shrink: 0; }
.wiz-content .notice { padding: 10px 12px; background: var(--brand-soft); border-radius: 8px; font-size: 12px; color: var(--brand); line-height: 1.5; margin-top: 12px; }

/* Nota "Quando premi Attiva" — chiarisce se la cassa applica da sola o serve la cassa. */
.wiz-activate-note { padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.wiz-activate-note strong { color: var(--ink); }

.wiz-summary { display: flex; flex-direction: column; gap: 0; }
.wiz-summary .sum-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.wiz-summary .sum-row:last-child { border-bottom: none; }
.wiz-summary .sum-row .lbl { font-size: 13px; color: var(--ink-2); }
.wiz-summary .sum-row .val { font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) { .wiz-summary .sum-row { grid-template-columns: 1fr; gap: 2px; } }

.wiz-nav { display: flex; gap: 10px; padding: 16px var(--page-pad-x); flex-wrap: wrap; }
@media (min-width: 768px) { .wiz-nav { padding: 14px var(--page-pad-x) 24px; } }
.wiz-nav button { flex: 1; min-width: 140px; }
.wiz-nav button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Modal Marketing: layout grid label-sx + value-sx (override .val display:inline-flex / justify-content:flex-end di linea 551) */
[data-gm="credenziali"] .metric-row,
[data-modal="azioni-stepper"] .metric-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: flex-start; }
[data-gm="credenziali"] .metric-row .lbl,
[data-modal="azioni-stepper"] .metric-row .lbl { padding-top: 1px; }
[data-gm="credenziali"] .metric-row .val,
[data-modal="azioni-stepper"] .metric-row .val { display: block; text-align: left; line-height: 1.4; min-width: 0; justify-content: flex-start; }
/* Credenziali: email lunga senza spazi va a capo invece di essere tagliata da .metric-rows{overflow:hidden} su schermo stretto */
[data-gm="credenziali"] .metric-row .val { overflow-wrap: anywhere; }

/* Marketing home — Cosa vuoi ottenere? */
.mkt-intro { padding: 0 var(--page-pad-x) 4px; }
/* Titolo sezione: stesso formato di .section-title (piccolo, maiuscolo, grigio)
   invece del titolone bold — coerenza tipografica (review Andrea, riordino W1). */
.mkt-intro h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.mkt-intro p { font-size: 14px; color: var(--ink-2); }
@media (min-width: 768px) { .mkt-intro { padding: 0 var(--page-pad-x) 8px; } }
/* Variante con azione a destra (pane Campagne: "Aggiorna"). */
.mkt-intro-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkt-intro-actions h2 { margin-bottom: 0; }

.mkt-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px var(--page-pad-x); }
@media (min-width: 768px) { .mkt-goals { gap: 16px; padding: 14px var(--page-pad-x); } }
@media (min-width: 1100px) { .mkt-goals { grid-template-columns: repeat(4, 1fr); } }

.goal-card { background: var(--surface); border-radius: var(--radius); padding: 16px 14px 14px; border: 1px solid var(--line); cursor: pointer; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 10px; min-height: 142px; position: relative; overflow: hidden; }
.goal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.goal-card:active { transform: scale(0.98); }
.goal-card .goal-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.goal-card .goal-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.goal-card .goal-stat { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
/* Prova storica reale (Parte 2): riga muted neutra sotto la stat dell'obiettivo,
   resa solo se la card ha history_line (campagne concluse attribuibili). */
.goal-card .goal-proof { font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.goal-card[data-goal="dormienti"] .goal-dot { background: var(--danger); }
.goal-card[data-goal="spendere"] .goal-dot { background: var(--warn); }
.goal-card[data-goal="gratificare"] .goal-dot { background: var(--ok); }
.goal-card[data-goal="frequenza"] .goal-dot { background: var(--info); }
.goal-card[data-goal="ricaricare"] .goal-dot { background: var(--brand); }
.goal-card[data-goal="clienti"] .goal-dot { background: var(--growth); }

/* Obiettivi in formato RIGA (riordino W1): stile lista come "Campagne attive"
   (.mkt-active-row) + icona colorata dell'obiettivo a sinistra. */
.mkt-goal-list { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--page-pad-x); }
.goal-row .goal-dot { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.goal-row .row-top { align-items: center; }
.goal-row .name { line-height: 1.25; }
.goal-row .goal-proof { font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.goal-row[data-goal="dormienti"] .goal-dot, .ghelp-row[data-goal="dormienti"] .goal-dot { background: var(--danger); }
.goal-row[data-goal="spendere"] .goal-dot, .ghelp-row[data-goal="spendere"] .goal-dot { background: var(--warn); }
.goal-row[data-goal="gratificare"] .goal-dot, .ghelp-row[data-goal="gratificare"] .goal-dot { background: var(--ok); }
.goal-row[data-goal="frequenza"] .goal-dot, .ghelp-row[data-goal="frequenza"] .goal-dot { background: var(--info); }
.goal-row[data-goal="ricaricare"] .goal-dot, .ghelp-row[data-goal="ricaricare"] .goal-dot { background: var(--brand); }
.goal-row[data-goal="clienti"] .goal-dot, .ghelp-row[data-goal="clienti"] .goal-dot { background: var(--growth); }
/* Comunica: riga full-width come gli obiettivi ma azione (non obiettivo) → dot
   brand. Su <button> serve il reset (la riga obiettivo nativa e' un <a>). */
.goal-row[data-goal="comunica"] .goal-dot { background: var(--brand); }
.goal-row[data-goal="cassa"] .goal-dot { background: var(--brand); }
button.mkt-active-row { width: 100%; font: inherit; text-align: left; }

/* Mini-guida obiettivi: "?" accanto al titolo + modal (gmodal statico montato).
   Le righe riusano il goal-dot colorato per slug (selettori .ghelp-row sopra). */
.goal-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); cursor: pointer; padding: 0; margin-left: 8px; vertical-align: middle; flex-shrink: 0; }
.goal-help-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.goal-help-btn .i { width: 15px; height: 15px; }
.ghelp-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ghelp-row { display: flex; align-items: flex-start; gap: 12px; }
.ghelp-row .goal-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ghelp-row .goal-dot .i { width: 15px; height: 15px; }
.ghelp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ghelp-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.ghelp-sub { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ghelp-rules { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ghelp-rules li { padding-left: 2px; }
/* "Ritaglio" di esempio: goal-row demo in un riquadro + badge numerati 1/2
   agganciati alla legenda (feedback 22/07: rendere visibile QUALE riga guida). */
.ghelp-example { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ghelp-proof { font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ghelp-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; flex-shrink: 0; margin-right: 6px; }
.ghelp-legend { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ghelp-legend li { display: flex; align-items: flex-start; }
.ghelp-legend .ghelp-num { margin-top: 1px; }

/* Proposte per obiettivo (screen proposals, server-rendered da presets) */
.mkt-proposals-list { display: flex; flex-direction: column; gap: 12px; padding: 12px var(--page-pad-x); }
.proposal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: relative; }
.proposal-card.recommended { border-color: var(--ok); }
.prop-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ok); margin-bottom: 10px; }
.prop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.prop-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-2); }
.prop-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.prop-actions { display: flex; gap: 8px; margin-top: 12px; }
/* "Meccanismo" è una descrizione lunga: nel layout .metric-row il .val (flex-shrink:0)
   non si restringe e schiacciava la label "Meccanismo" a un carattere per riga.
   La impiliamo: label sopra, descrizione sotto a tutta larghezza. */
/* .prop-mech assorbito dalla variante canonica .metric-row--text
   (42-andamento.css) — decisione Andrea 27/07, un solo layout per le
   righe-frase ovunque. */

/* Campagne attive — lista compatta */
.mkt-active-list { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--page-pad-x); }
@media (min-width: 768px) { .mkt-active-list { padding: 0 var(--page-pad-x); } }
.mkt-active-row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 20px; text-decoration: none; color: inherit; }
/* Mobile: gap/padding desktop rubano spazio al nome (badge costretto a capo) */
@media (max-width: 480px) { .mkt-active-row { gap: 12px; padding: 14px; } }
.mkt-active-row-conclusa { cursor: default; opacity: 0.85; }
.mkt-active-row:hover { border-color: var(--brand); }
.mkt-active-row .row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mkt-active-row .row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mkt-active-row .name { font-size: 14px; font-weight: 700; color: var(--ink); }
/* Status .name (es. "Livello OK/basso" nel Riepilogo Resti): le utility u-c-* da sole
   perdono per specificita' contro ".mkt-active-row .name". Override scoped → vince il colore stato. */
.mkt-active-row .name.u-c-ok { color: var(--ok); }
.mkt-active-row .name.u-c-warn { color: var(--warn); }
/* Badge promo importata da Bloomest (sola lettura) + raggruppamento col nome */
.name-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.name-group .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge/pill accanto al nome: mai schiacciarli, si tronca il nome (design system §13) */
.name-group .pill, .name-group .badge-cassa,
.storico-row-title .pill, .storico-row-title .badge-cassa { flex-shrink: 0; }
.badge-external { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px;
                  border-radius: 999px; background: #EDE9FE; color: #5B21B6; }
.mkt-active-row .days-left { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mkt-active-row > .chev-right,
.create-alt-tile > .chev-right,
.cat-card > .chev-right { flex-shrink: 0; color: var(--ink-3); width: 20px; height: 20px; }
.mkt-active-row:hover > .chev-right,
.create-alt-tile:hover > .chev-right,
.cat-card:hover > .chev-right { color: var(--brand); }
.mkt-active-row .row-meta { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); }
.mkt-active-row .row-meta .lift-up { color: var(--ok); font-weight: 700; }
.mkt-active-row .row-meta .lift-down { color: var(--danger); font-weight: 700; }
.mkt-progress-bar { height: 4px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mkt-progress-bar > div { height: 100%; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%); border-radius: 999px; }

/* === FASE 2 lifecycle — sezioni Campagne (in corso/in pausa/bozze) + Storico === */
.mkt-section { margin-bottom: 8px; }
.mkt-section-h { padding: 10px var(--page-pad-x) 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.pill-paused { background: #FFF3E0; color: var(--warn); }
.pill-draft { background: var(--bg); color: var(--ink-3); }
.pill-measured { background: #E8F8EE; color: var(--ok); }
.pill-pending { background: var(--bg); color: var(--ink-3); }
.mkt-card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row-act { font-size: 13px; font-weight: 600; color: var(--brand); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.row-act:hover { text-decoration: underline; }
.row-act-danger { color: var(--danger); }
.mkt-active-row .row-reactivate { color: var(--brand); font-weight: 600; font-size: 13px; flex-shrink: 0; white-space: nowrap; }
.mkt-summary-strip { margin: 0 var(--page-pad-x) 10px; padding: 10px 14px; background: var(--brand-soft); color: var(--brand); border-radius: 10px; font-size: 13px; font-weight: 700; }
/* Storico: <details> nativo per il drill-down (no JS) */
.storico-row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px 2px; }
.storico-row-head { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; }
.storico-row-head::-webkit-details-marker { display: none; }
.storico-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.storico-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.storico-row-head .name { min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storico-meta { font-size: 12px; color: var(--ink-3); }
.storico-analisi { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--brand); line-height: 1; }
.storico-analisi svg { width: 16px; height: 16px; display: block; transition: transform 150ms ease; }
.storico-row[open] .storico-analisi svg { transform: rotate(45deg); }
.storico-row[open] .storico-row-head { border-bottom: 1px solid var(--line); }

.mkt-cta-free { margin: 18px var(--page-pad-x) 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: transparent; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 14px; width: calc(100% - 36px); }
.mkt-cta-free:hover { border-color: var(--brand); color: var(--brand); }
@media (min-width: 768px) { .mkt-cta-free { margin: 18px var(--page-pad-x) 16px; width: calc(100% - 36px); } }

/* === Gerarchia Promo (2026-06-18) === */
/* L4 · azione di pagina nell'header (visibile desktop+mobile, vs .hdr-action mobile-only) */
.page-action { display: inline-flex; align-items: center; align-self: center; gap: 6px; margin-left: 12px; padding: 6px 14px; border: 1px solid var(--brand); border-radius: 999px; background: transparent; color: var(--brand); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 120ms ease, transform 80ms ease; }
.page-action:hover { background: var(--brand-soft); }
.page-action:active { transform: scale(0.97); }
.page-action svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Variante "link": stesso colore/icona ma senza pillola (bordo+padding), per
   azioni header secondarie come "Comunica" accanto al titolo Promo. */
.page-action.page-action-link { border: 0; padding: 4px 2px; align-self: flex-end; }
.page-action.page-action-link:hover { background: transparent; opacity: 0.7; }

/* L3 · azione testuale a destra del section-title (es. refresh "Aggiorna") */
.section-title button.sec-action,
.mkt-intro button.sec-action { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; transition: opacity 120ms ease; }
.section-title button.sec-action:hover,
.mkt-intro button.sec-action:hover { opacity: 0.7; }
.section-title button.sec-action:active,
.mkt-intro button.sec-action:active { transform: scale(0.96); }
.section-title button.sec-action svg,
.mkt-intro button.sec-action svg { width: 14px; height: 14px; flex-shrink: 0; }

/* L2 · "Altri modi di creare": 2 tile secondarie neutre, distinte da goal-card (colorate) e dal vecchio ghost tratteggiato */
.mkt-create-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 var(--page-pad-x) 8px; }
.create-alt-tile { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; text-align: left; cursor: pointer; transition: border-color 120ms ease, transform 80ms ease; }
.create-alt-tile:hover { border-color: var(--brand); }
.create-alt-tile:active { transform: scale(0.98); }
.create-alt-tile > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-2); transition: color 120ms ease; }
.create-alt-tile:hover > svg { color: var(--brand); }
.create-alt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.create-alt-title { font-size: 14px; font-weight: 700; color: var(--ink); }
/* Descrittore "chi …" su riga propria sotto il titolo (peso normale, attenuato):
   prima era inline nel titolo a 700 e si confondeva col grassetto. */
.create-alt-desc { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.create-alt-sub { font-size: 12px; color: var(--ink-3); }
/* Motivazione "perché" dell'Azione della settimana v2: dato vero (lift
   misurato / da provare / bacino), un filo più marcata del sub. */
.create-alt-why { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 560px) { .mkt-create-alt { grid-template-columns: 1fr; } }

/* Proposals screen */
/* Back link pattern globale — icon-button quadrato + label inline.
   Riutilizzabile in ogni sub-page (Promo proposals/detail/wizard, modali,
   ecc.). Niente underline, hover anima icona + label verso il brand. */
.back-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px var(--page-pad-x) 6px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; background: none; border: none; cursor: pointer; }
.back-link .back-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--ink-2); transition: background 120ms ease, color 120ms ease, transform 120ms ease; flex-shrink: 0; }
.back-link .back-icon .i { width: 18px; height: 18px; stroke-width: 2.2; }
.back-link:hover { color: var(--brand); }
.back-link:hover .back-icon { background: var(--brand-soft); color: var(--brand); transform: translateX(-2px); }
.back-link:focus-visible { outline: none; }
.back-link:focus-visible .back-icon { box-shadow: 0 0 0 3px var(--brand-soft); }
@media (min-width: 768px) { .back-link { padding: 18px var(--page-pad-x) 8px; } .back-link .back-icon { width: 40px; height: 40px; } .back-link .back-icon .i { width: 20px; height: 20px; } }

.mkt-proposal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 12px var(--page-pad-x); display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .mkt-proposal { margin: 14px var(--page-pad-x); padding: 20px; } }
.mkt-proposal .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mkt-proposal .head h3 { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.mkt-proposal .mech { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.mkt-proposal .kpi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 12px; background: var(--bg); border-radius: 12px; }
.mkt-proposal .kpi { display: flex; flex-direction: column; gap: 2px; }
.mkt-proposal .kpi .lbl { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.mkt-proposal .kpi .val { font-size: 15px; font-weight: 700; color: var(--ink); }
.mkt-proposal .kpi.lift .val { color: var(--ok); }
.mkt-proposal .needs { background: #FEF3C7; border-left: 3px solid var(--warn); padding: 10px 12px; border-radius: 6px; font-size: 12px; color: #78350F; }
.mkt-proposal .actions { display: flex; gap: 8px; }
.mkt-proposal .actions > * { flex: 1; }
/* Testata wizard Promo (promo_wizard_shell.html). */
.mkt-detail-head { padding: 16px var(--page-pad-x); }
@media (min-width: 768px) { .mkt-detail-head { padding: 18px var(--page-pad-x); } }
.mkt-detail-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.mkt-detail-head .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }

/* Dettaglio campagna / Happy Hour: intestazione = schema del dettaglio Gruppi
   (.cat-detail-head + .cat-detail-actions, definiti in 40-clienti.css); qui
   solo le aggiunte promo: pill di stato nel sub, variante danger dei pill
   azione, corpo full-width a card bianche. Il grigio --bg resta per le
   .mkt-measured DENTRO le row bianche dello storico (contrasto voluto). */
.mkt-detail { padding: 8px var(--page-pad-x) 0; }
.mkt-detail .mkt-measured { background: var(--surface); }
.cat-detail-head .status-pill { background: var(--ok); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.cat-detail-head .status-pill.done { background: var(--ink-3); }
.cat-detail-actions .danger { color: var(--danger); border-color: var(--danger); }

/* ===== Modal Macchina (gear → cambio stato) ===== */
.modal-machine-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.modal-machine-head h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.modal-machine-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; padding-top: 12px; }
.modal-machine-actions .btn-primary,
.modal-machine-actions .btn-secondary { width: 100%; }

/* Backdrop: assicura overlay full-screen centrato (era modal-overlay) */
.modal-backdrop { position: fixed; inset: 0; }
.modal-backdrop.open { z-index: 100; }

/* ========== Happy Hour — badge cassa, heatmap, ROI ========== */
.badge-cassa { background: #fde68a; color: #78350f; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 600; }

/* Schermata dettaglio ROI: intestazione cat-detail-head + corpo .mkt-detail
   come il dettaglio campagna (wrapper .hh-detail dismesso). */

/* Ogni sezione (heatmap, verdetto, guida) è una card, come il resto della dashboard. */
.hh-heatmap, .hh-after, .hh-guide { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 12px; }
.hh-heatmap { overflow-x: auto; }
.hh-heatmap h4, .hh-after h4, .hh-guide h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.hh-suggest { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }

/* Heatmap grid */
.hh-grid { border-collapse: collapse; font-size: 10px; }
.hh-grid th, .hh-grid td { border: 1px solid var(--line, #e5e7eb); width: 18px; height: 18px; text-align: center; }
.hh-grid td[data-v="0"] { background: #f8fafc; color: #cbd5e1; }
.hh-grid td { background: #dbeafe; }

/* Verdetto "Sta funzionando?" — card standard, senza accento colorato:
   lo stato è già nel testo ("Funziona" / "Troppo presto per dirlo"…). */
.hh-after p { font-size: 14px; color: var(--ink-2); margin: 0; }
.hh-after ul { margin: 10px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.hh-after ul li { margin: 4px 0; }

/* Guida cassa */
.hh-guide { font-size: 13px; color: var(--ink-2); }
.hh-guide ol { margin: 0; padding-left: 20px; }
.hh-guide li { margin: 6px 0; line-height: 1.5; }

.hh-roi-link { font-size: 13px; color: var(--brand); font-weight: 600; text-decoration: none; }
.hh-roi-link:hover { text-decoration: underline; }

/* Happy Hour 1-tap — sheet attiva-e-annuncia. Colori via token. */
.hh-move-muted { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.hh-reach { font-size: 13px; }
.hh-warn { font-weight: 600; margin-top: 10px; }

/* Blocco "Risultati (misurato)" — dettaglio campagna (Task 4) */
.mkt-measured { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mkt-measured-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mkt-measured-head h3 { font-size: 15px; margin: 0; }
.mkt-measured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mkt-measured-grid .mm-cell { display: flex; flex-direction: column; gap: 2px; }
.mkt-measured-grid .mm-val { font-size: 20px; font-weight: 700; }
.mkt-measured-grid .mm-val.up { color: #157a3c; }
.mkt-measured-grid .mm-pct { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mkt-measured-grid .mm-lbl { font-size: 12px; color: var(--ink-2); }
.mkt-measured-estimate { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.mkt-measured-estimate .mm-est { font-weight: 600; }
.mkt-measured-estimate .mm-est.lift-up { color: var(--ok); }
.mkt-measured-estimate .mm-est.lift-down { color: var(--danger); }
.mkt-measured-empty { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }

/* ========== Volantino A5 (W5/F2) — modal form ridisegnato ========== */
/* Testo descrittivo sotto section-title dentro .sheet */
.mkt-intro-sub { font-size: 13px; color: var(--ink-2); margin: -4px 0 12px; line-height: 1.5; padding: 0 var(--page-pad-x); }
/* Checkbox + label inline (es. "Includi QR") */
.check-inline { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); margin-bottom: 12px; cursor: pointer; }
.check-inline input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
/* Blocco AI: sfondo tenue per distinguerlo visivamente */
.flyer-ai { background: var(--bg); border-radius: 12px; padding: 0 0 4px; margin: 0 0 14px; }
.flyer-ai .section-title { padding-left: 0; padding-right: 0; }
.flyer-ai .mkt-intro-sub { padding-left: 0; padding-right: 0; }
.flyer-ai .field { margin-bottom: 10px; }
/* Chip riga occasione dentro il form volantino — usa .chip globale già esistente */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
/* Sub-field-row scoped al form volantino (analoga alla versione .wiz-content) */
.flyer-form .sub-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .flyer-form .sub-field-row { grid-template-columns: 1fr; } }
/* Photo picker: griglia 2 colonne con radio nascosto */
.photo-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.photo-opt { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); transition: border-color 120ms ease; }
.photo-opt input[type="radio"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.photo-opt img { display: block; width: 100%; height: 80px; object-fit: cover; pointer-events: none; }
.photo-opt:has(input:checked) { border-color: var(--brand); }
.photo-opt .cap { display: block; padding: 4px 8px; font-size: 12px; color: var(--ink-2); text-align: center; }
.photo-opt:has(input:checked) .cap { color: var(--brand); font-weight: 700; }
/* Template picker: mini-thumbnail fronte/retro + stato selezionato del tile */
.flyer-tpl-tile { gap: 10px; }
.flyer-tpl-tile.selected { border-color: var(--brand); background: var(--brand-soft); }
.flyer-tile-thumbs { display: flex; gap: 4px; flex: 0 0 auto; }
.flyer-tile-thumbs img { width: 44px; height: auto; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
/* Preview live fronte/retro dentro il form Personalizza */
.flyer-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.flyer-preview img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
/* Azioni in fondo: Anteprima + Scarica PDF affiancate */
.flyer-actions { display: flex; gap: 8px; margin-top: 18px; }
.flyer-actions .btn-secondary,
.flyer-actions .btn-primary { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* htmx indicator — includeIndicatorStyles:false nel meta htmx-config: lo
   <style> che htmx inietterebbe non ha nonce e la CSP lo bloccherebbe al
   flip in enforcing. Regole identiche al default htmx. */
.htmx-indicator{opacity:0}
.htmx-request .htmx-indicator{opacity:1; transition: opacity 200ms ease-in;}
.htmx-request.htmx-indicator{opacity:1; transition: opacity 200ms ease-in;}

/* Banner riarmo notifiche push: barra in cima, mostrata da push.js quando
   l'intent server è attivo ma il permesso/subscription manca (tipico dopo la
   reinstallazione della PWA su iOS). Nascosto di default via attributo hidden. */
.push-rearm { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--brand-soft); border-bottom: 1px solid #F3D6DC; color: var(--brand); font-size: 13px; font-weight: 700; }
.push-rearm[hidden] { display: none; }
.push-rearm__ico { color: var(--brand); flex-shrink: 0; }
.push-rearm__txt { flex: 1; }
.push-rearm__cta { padding: 7px 14px; background: var(--brand); color: #fff; border: 0; border-radius: 999px; font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
.push-rearm__cta:active { background: var(--brand-hover); }
.push-rearm__cta:disabled { opacity: 0.6; }
.push-rearm__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 0; color: var(--brand); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }