/* =====================================================================
   HOWAR Dashboard — Design system condiviso (stile "admin")
   Leggero e su misura. Riusato da tutte le dashboard di piattaforma.
   Palette e token derivati dalla dashboard amministratore HOWAR.
   ===================================================================== */

:root{
    --howar-green:#57A035;
    --howar-green-light:#57A03526;      /* ~15% */
    --howar-green-vlight:#57A0350A;      /* ~4%  */
    --howar-blue:#223B57;
    --howar-blue-dark:#1c3350;
    --bg:#E6E6E6;
    --surface:#ffffff;
    --text:#1f2933;
    --text-muted:#5f6b7a;
    --text-dim:#8a96a3;
    --border:#cfd4d9;
    --radius:10px;
    --shadow:0 1px 2px rgba(31,41,51,.06),0 1px 3px rgba(31,41,51,.04);
    --shadow-hover:0 4px 12px rgba(31,41,51,.10);
    --sidebar-w:240px;
    --topbar-h:56px;
    --ok-bg:#e7f4dd; --ok-fg:#2e5a14; --ok-bd:#c6e3ad;
    --warn-bg:#fff4d6; --warn-fg:#7a5a0e; --warn-bd:#f0d68a;
    --err-bg:#fdecea; --err-fg:#8a1c14; --err-bd:#f5c2bd;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    font-family:var(--font);
    color:var(--text);
    background:var(--bg);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- Topbar ---------- */
.topbar{
    position:sticky;top:0;z-index:50;
    height:var(--topbar-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 20px;
    background:var(--howar-blue);
    border-bottom:3px solid var(--howar-green);
    color:#fff;
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-logo{height:26px;width:auto;display:block;}
.brand-suffix{
    font-weight:600;font-size:.95rem;color:#cfd8e3;
    padding-left:12px;border-left:1px solid #3a5170;
}
.topbar-right{display:flex;align-items:center;gap:16px;}
.user-chip{display:flex;flex-direction:column;line-height:1.15;text-align:right;}
.user-chip-name{font-weight:700;font-size:.9rem;}
.user-chip-role{font-size:.75rem;color:#9fb0c4;}

/* Toggle mobile (nascosto su desktop) */
.sidebar-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px;}
.sidebar-toggle span{width:20px;height:2px;background:#fff;display:block;}

/* ---------- Bottoni ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    font-family:inherit;font-size:.88rem;font-weight:600;line-height:1;
    padding:9px 16px;border-radius:8px;border:1px solid transparent;
    cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.btn-sm{padding:7px 12px;font-size:.82rem;}
.btn-success{background:var(--howar-green);color:#fff;border-color:var(--howar-green);}
.btn-success:hover{background:#4a8c2d;border-color:#4a8c2d;}
.btn-secondary{background:#fff;color:var(--howar-blue);border-color:var(--border);}
.btn-secondary:hover{border-color:var(--howar-blue);background:#f6f8fa;}
.btn-ghost{background:transparent;color:var(--howar-blue);border-color:var(--border);}
.btn-ghost:hover{background:#f6f8fa;}
.topbar .btn-ghost{color:#fff;border-color:#556f8e;}
.topbar .btn-ghost:hover{background:#ffffff1a;}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:calc(100vh - var(--topbar-h));}
.sidebar{
    width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;justify-content:space-between;
    position:sticky;top:var(--topbar-h);align-self:flex-start;
    height:calc(100vh - var(--topbar-h));
}
.sidebar nav{display:flex;flex-direction:column;padding:14px 10px;gap:2px;overflow-y:auto;}
.sidebar-link{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:8px;
    color:var(--text);font-weight:500;font-size:.92rem;
    border-left:3px solid transparent;
    transition:background .12s,color .12s,border-color .12s;
}
.sidebar-link:hover{background:#f4f6f8;}
.sidebar-link.is-active{
    background:var(--howar-green-light);
    color:var(--howar-green);font-weight:700;
    border-left-color:var(--howar-green);
}
.sidebar-badge{
    margin-left:auto;min-width:20px;height:20px;padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    /* Verde: il badge con un numero indica un dato POSITIVO (es. competenze
       selezionate). Il rosso/ambra è riservato al solo stato di warning
       (.sidebar-badge-warn), cioè quando manca qualcosa di bloccante. */
    background:var(--howar-green);color:#fff;border-radius:10px;font-size:.72rem;font-weight:700;
}
.sidebar-link.is-disabled{color:var(--text-dim);cursor:default;opacity:.6;}
.sidebar-link.is-disabled:hover{background:transparent;}
.page-back{margin-bottom:16px;}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);}
.sidebar-footer small{color:var(--text-dim);font-size:.75rem;word-break:break-all;}

.main{flex:1 1 auto;min-width:0;padding:26px 30px 60px;position:relative;}

/* ---------- Testi di pagina ---------- */
.page-title{margin:0 0 4px;font-size:1.6rem;font-weight:800;color:var(--howar-blue);letter-spacing:-.01em;}
.page-sub{margin:0 0 24px;color:var(--text-muted);font-size:.98rem;}
.section-title{margin:34px 0 4px;font-size:1.15rem;font-weight:700;color:var(--howar-blue);}
.section-sub{margin:0 0 16px;color:var(--text-muted);font-size:.9rem;}

/* ---------- KPI ---------- */
/* Stessa griglia di .card-grid (auto-fill, colonne da 320px) così le due card
   Panoramica hanno la stessa larghezza delle card di navigazione sotto, invece
   di stirarsi a metà pagina ciascuna. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.kpi-card{
    background:var(--surface);border:1px solid var(--border);
    border-left:4px solid var(--howar-green);
    border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);
}
.kpi-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.kpi-value{margin-top:8px;font-size:2rem;font-weight:800;color:var(--howar-blue);display:flex;align-items:baseline;gap:10px;}
.kpi-value small,.kpi-value .kpi-unit{font-size:1rem;color:var(--text-dim);font-weight:600;}
.kpi-delta-wrap{display:inline-flex;align-items:baseline;gap:5px;font-size:.8rem;font-weight:600;}
.kpi-delta{color:var(--text-dim);}
.kpi-delta.is-positive{color:var(--howar-green);}
.kpi-delta.is-negative{color:#c0392b;}
.kpi-delta-period{font-size:.72rem;color:var(--text-dim);font-weight:500;}

/* ---------- Griglia card ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}

.nav-card{
    display:block;background:var(--surface);border:1px solid var(--border);
    border-top:3px solid var(--howar-green);border-radius:var(--radius);
    padding:20px 22px;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s;
}
a.nav-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.nav-card-icon{font-size:1.5rem;margin-bottom:8px;}
.nav-card-title{font-weight:700;color:var(--howar-blue);margin-bottom:4px;}
.nav-card-desc{color:var(--text-muted);font-size:.88rem;}

/* ---------- Catalogo modelli ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;}
.cat-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--howar-green);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);}
.cat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.cat-icon{font-size:1.6rem;line-height:1;}
.cat-title{margin:0;font-size:1.1rem;font-weight:800;color:var(--howar-blue);}
.cat-desc{margin:0 0 16px;color:var(--text-muted);font-size:.9rem;line-height:1.5;}
.cat-block{margin-bottom:12px;}
.cat-block-title{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--howar-green);font-weight:700;margin-bottom:4px;}
.cat-block-text{font-size:.86rem;color:var(--text);line-height:1.45;}
.cat-footer{margin-top:auto;padding-top:16px;}
/* Nota "bonus" del catalogo: usata solo dalle card che non si acquistano. */
.cat-bonus{display:flex;flex-direction:column;gap:6px;background:var(--howar-green-light,#eef7ee);border:1px solid var(--howar-green);border-radius:8px;padding:10px 12px;margin-bottom:14px;}
.cat-bonus .badge{align-self:flex-start;}
/* Catalogo B2B dentro l'area consumer (aziende.php). La griglia e le schede
   sono le .cat-* qui sopra, gia' nella palette: qui c'e' solo cio' che serve
   alla versione consumer, cioe' il pulsante e la nota in fondo. */
.cat-cta{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:10px 18px; border-radius:9px; font-size:.92rem; font-weight:600; text-decoration:none;
  border:1.5px solid var(--howar-green,#57A035); color:var(--howar-green,#57A035); background:#fff;
  transition:background .15s, color .15s; }
.cat-cta:hover{ background:var(--howar-green,#57A035); color:#fff; }
.cat-nota{ margin:22px 0 0; padding:12px 16px; font-size:.88rem; line-height:1.55;
  color:var(--text-muted,#5f6b7a); background:#f7f9fa; border-left:3px solid var(--border,#cfd4d9);
  border-radius:0 8px 8px 0; }

.cat-bonus-txt{font-size:.82rem;line-height:1.45;color:var(--text);}

/* Il banner di aziende.php verso la piattaforma professionale (22/09/2026):
   stesso verde scuro del regalo MATRIX sulla pagina di registrazione. */
.az-banner{display:flex;align-items:center;gap:20px;margin:0 0 24px;padding:20px 24px;border-radius:12px;
  background:linear-gradient(135deg,#0f3d3e,#1f6f5c);color:#fff;}
.az-banner h2{margin:0 0 6px;font-size:1.1rem;font-weight:800;color:#fff;}
.az-banner p{margin:0;font-size:.9rem;line-height:1.5;opacity:.95;}
.az-banner-btn{flex:0 0 auto;display:inline-block;padding:11px 20px;border-radius:8px;background:#fff;color:#1f6f5c;
  font-weight:700;text-decoration:none;white-space:nowrap;}
.az-banner-btn:hover{background:#e7f4dd;}
@media (max-width:720px){
  .az-banner{flex-direction:column;align-items:stretch;padding:18px;}
  .az-banner-btn{text-align:center;white-space:normal;}
}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.02em;}
.badge-ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-bd);}
.badge-warn{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-bd);}
.badge-info{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-bd);}
.badge-err{background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-bd);}
.badge-muted{background:#eef1f4;color:var(--text-muted);border:1px solid var(--border);}

/* ---------- Card modello (Libreria test) ---------- */
.model-card{display:flex;flex-direction:column;gap:14px;}
.model-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.model-card-title{font-weight:700;letter-spacing:.02em;color:var(--text);font-size:1.02rem;}
.model-stats{
    display:grid;grid-template-columns:repeat(3,1fr);
    background:var(--howar-green-vlight);border:1px solid var(--howar-green-light);
    border-radius:10px;overflow:hidden;
}
.model-stat{padding:12px 8px;text-align:center;}
.model-stat + .model-stat{border-left:1px solid var(--howar-green-light);}
.model-stat-label{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;}
.model-stat-value{font-size:1.35rem;font-weight:700;color:var(--howar-blue);}
.model-actions{display:flex;gap:8px;flex-wrap:wrap;}
.model-actions .btn{flex:1 1 auto;}
.btn-start-locked{opacity:.75;}

/* ---------- Avvisi / Da fare (Home) ---------- */
/* "Da fare": stessa griglia e stesso formato delle altre card della homepage,
   invece di barre a tutta larghezza. Card in colonna con il pulsante in fondo,
   così restano allineate anche con testi di lunghezza diversa. */
.todo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.todo{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
      background:var(--surface);border:1px solid var(--border);
      border-top:3px solid var(--howar-blue);border-radius:var(--radius);
      padding:20px 22px;box-shadow:var(--shadow);}
.todo-warn{border-top-color:#e0a800;background:#fffdf5;}
.todo-ico{font-size:1.5rem;line-height:1;}
.todo-txt{flex:1 1 auto;font-size:.88rem;color:var(--text-muted);line-height:1.5;}
.todo-txt strong{color:var(--howar-blue);}
.todo .btn{flex:0 0 auto;margin-top:auto;}

/* ---------- Selettore Competenze ---------- */
.comp-intro{background:var(--howar-green-vlight);border:1px solid var(--howar-green-light);border-radius:10px;padding:14px 18px;font-size:.9rem;color:var(--text);margin-bottom:18px;line-height:1.5;}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:16px 0;}
.comp-item{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px 14px 44px;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;}
.comp-item:hover{border-color:var(--howar-green);}
.comp-item.selected{border-color:var(--howar-green);background:var(--howar-green-vlight);box-shadow:inset 0 0 0 1px var(--howar-green-light);}
.comp-num{position:absolute;top:12px;right:14px;font-size:.7rem;font-weight:700;color:var(--text-dim);}
.comp-check{position:absolute;left:16px;top:16px;width:18px;height:18px;accent-color:var(--howar-green);cursor:pointer;}
.comp-nome{font-weight:600;color:var(--howar-blue);font-size:.92rem;margin-bottom:3px;padding-right:28px;}
.comp-skills{font-size:.76rem;color:var(--text-muted);line-height:1.35;}
.comp-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg);padding:14px 0;border-top:1px solid var(--border);margin-top:8px;}
.comp-counter{font-size:.95rem;color:var(--text);}
.comp-counter strong{color:var(--howar-blue);font-size:1.1rem;}
.comp-feedback{font-size:.85rem;font-weight:600;}
.comp-feedback.ok{color:var(--howar-green);}
.comp-feedback.err{color:#c0392b;}

/* ---------- Copertura e alleanze ---------- */
.cov-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:24px;box-shadow:var(--shadow);}
.cov-head{text-align:center;border-bottom:2px solid var(--howar-green);padding-bottom:14px;margin-bottom:20px;}
.cov-head h2{margin:0 0 4px;color:var(--howar-blue);font-size:1.3rem;}
.cov-head p{margin:0;color:var(--text-muted);font-size:.9rem;}
.cov-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.cov-stat{background:#f6f8fa;border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;}
.cov-stat-value{font-size:1.7rem;font-weight:800;}
.cov-stat-label{font-size:.8rem;color:var(--text-muted);}
.cov-level-desc{font-size:.82rem;color:var(--text-muted);margin-top:6px;line-height:1.4;}
.cov-bar{height:28px;background:#e9ecef;border-radius:14px;overflow:hidden;position:relative;margin:6px 0 22px;}
.cov-bar-fill{height:100%;border-radius:14px;transition:width .4s,background .3s;}
.cov-bar-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;font-size:.85rem;}
.cov-sec{margin-bottom:22px;}
.cov-sec h3{color:var(--howar-blue);border-bottom:1px solid var(--border);padding-bottom:6px;margin:0 0 12px;font-size:1.05rem;}
.cov-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cov-chip{background:var(--howar-green-vlight);border:1px solid var(--howar-green-light);border-left:3px solid var(--howar-green);border-radius:6px;padding:6px 10px;font-size:.82rem;}
.cov-partner{border:1px solid var(--border);border-left:4px solid var(--howar-green);border-radius:10px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:background .15s,border-color .15s;}
.cov-partner:hover{background:var(--howar-green-vlight);}
.cov-partner.selected{background:var(--howar-green-light);}
.cov-partner-name{font-weight:700;color:var(--howar-blue);margin-bottom:4px;}
.cov-partner-add{color:var(--ok-fg);font-size:.85rem;margin-bottom:3px;line-height:1.4;}
.cov-partner-have{color:var(--warn-fg);font-size:.8rem;font-style:italic;}
.cov-partner-hint{color:var(--howar-green);font-size:.78rem;font-style:italic;margin-top:4px;}
.cov-improve{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-fg);border-radius:8px;padding:14px;margin-top:12px;font-size:.9rem;}
.cov-none{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-fg);border-radius:8px;padding:18px;text-align:center;}
.cov-tips{background:var(--howar-green-vlight);border-left:4px solid var(--howar-green);border-radius:8px;padding:16px;}
.cov-tips h4{margin:0 0 8px;color:var(--howar-blue);}
.cov-tips ol{margin:0;padding-left:20px;}
.cov-tips li{margin-bottom:4px;font-size:.9rem;}
.cov-disclaimer{margin-top:18px;padding:12px 14px;background:#f6f8fa;border-left:4px solid var(--text-dim);border-radius:8px;font-size:.75rem;color:var(--text-muted);line-height:1.4;}
@media print{ .topbar,.sidebar,.comp-intro,.comp-grid,.comp-footer,.alert,.page-sub{display:none!important;} .main{padding:0!important;} .layout{display:block!important;} .cov-panel{border:none;box-shadow:none;margin:0;} }

/* ---------- Elenco test (tabella + tab + azioni) ---------- */

.table-filter-box{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.table-filter{width:100%;max-width:340px;padding:9px 14px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.9rem;background:#fff;color:var(--text);}
.table-filter:focus{outline:none;border-color:var(--howar-green);box-shadow:0 0 0 3px var(--howar-green-light);}
.table-filter-count{font-size:.82rem;color:var(--text-dim);}
.table-size{font-size:.82rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.table-size select{padding:6px 8px;border:1px solid var(--border);border-radius:7px;font-family:inherit;font-size:.85rem;background:#fff;color:var(--text);cursor:pointer;}
.table-pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap;}
.pager-info{font-size:.82rem;color:var(--text-muted);margin-right:auto;}
.pager-page{font-size:.85rem;color:var(--text);font-weight:600;}
.pager-btn{width:34px;height:34px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--howar-blue);}
.pager-btn:hover:not(:disabled){border-color:var(--howar-blue);background:#f6f8fa;}
.pager-btn:disabled{opacity:.4;cursor:default;}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.data-table th{text-align:left;padding:12px 16px;background:#f6f8fa;color:var(--text-dim);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap;}
.data-table th.sortable{cursor:pointer;user-select:none;}
.data-table th.sortable:hover{color:var(--howar-blue);}
.data-table th.sortable::after{content:' ⇅';opacity:.35;}
.data-table th.sorted-asc::after{content:' ↑';opacity:1;color:var(--howar-green);}
.data-table th.sorted-desc::after{content:' ↓';opacity:1;color:var(--howar-green);}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--howar-green-vlight);}
.data-table .col-test{font-weight:600;color:var(--howar-blue);}
.data-table tr.filter-row th{background:#fff;padding:8px 12px;border-bottom:1px solid var(--border);}
.col-filter{width:100%;min-width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-family:inherit;font-size:.82rem;background:#fff;color:var(--text);}
.col-filter:focus{outline:none;border-color:var(--howar-green);}
.role-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:20px;background:var(--howar-green-light);color:var(--howar-green);margin-left:6px;vertical-align:middle;}
.test-actions{display:flex;gap:6px;flex-wrap:wrap;}
.test-action-btn{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:6px 11px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--howar-blue);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;}
.test-action-btn:hover{border-color:var(--howar-blue);background:#f6f8fa;}
.test-action-btn.btn-generate{background:var(--howar-blue);color:#fff;border-color:var(--howar-blue);}
.test-action-btn.btn-generate:hover{background:#1b3350;}
/* Stato "generazione in corso": da blu a GIALLO CHIARO, con testo scuro leggibile.
   Movimento garantito: rotellina (animazione CSS propria, non dipende da FontAwesome)
   + puntini che avanzano dopo il testo. Il cursore diventa progress. */
.test-action-btn.btn-generate.is-generating,
.test-action-btn.btn-generate.is-generating:hover{background:#ffd21f;border-color:#e6b800;color:#5a4200;cursor:progress;}
/* Rotellina: anima sempre, anche se la classe fa-spin di FontAwesome non fosse attiva. */
.test-action-btn.btn-generate.is-generating .howar-spin{animation:howar-spin .8s linear infinite;}
@keyframes howar-spin{to{transform:rotate(360deg);}}
/* Puntini che avanzano: . → .. → ... → ripete. */
.gen-dots::after{content:'';animation:howar-dots 1.4s steps(1,end) infinite;}
@keyframes howar-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}
/* Riprendi / Inizia: ROSSO — segnala un test aperto che richiede un'azione. */
.test-action-btn.btn-continue{background:#c0392b;color:#fff;border-color:#c0392b;}
.test-action-btn.btn-continue:hover{background:#a13125;border-color:#a13125;}
/* Visualizza report / summary: VERDE — l'esito e' pronto da consultare. */
.test-action-btn.btn-report{background:var(--howar-green);color:#fff;border-color:var(--howar-green);}
.test-action-btn.btn-report:hover{background:#4a8c2d;border-color:#4a8c2d;}
.test-action-btn.btn-delete{color:#c0392b;border-color:#f0c9c4;}
.test-action-btn.btn-delete:hover{background:#fdecea;border-color:#c0392b;}
.da-completare-label{font-size:.78rem;font-weight:700;color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-bd);padding:4px 10px;border-radius:20px;}
.user-cell{display:flex;align-items:center;gap:12px;}
.user-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--howar-green-light);color:var(--howar-green);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;text-transform:uppercase;}
.user-cell-name{font-weight:700;color:var(--howar-blue);}
.user-cell-email{font-size:.82rem;color:var(--text-muted);}
.test-action-btn.btn-warn{color:#e0a800;border-color:#f0d68a;}
.test-action-btn.btn-warn:hover{background:#fffdf5;border-color:#e0a800;}
.test-action-btn.btn-key{color:var(--howar-blue);border-color:var(--border);}
.text-muted{color:var(--text-dim);font-size:.85rem;}

/* ---------- Tools: Insights Assessment ---------- */
.tool-intro{background:var(--howar-green-vlight);border:1px solid var(--howar-green-light);border-radius:var(--radius);padding:16px 20px;font-size:.9rem;color:var(--text);line-height:1.55;margin-bottom:16px;}
.mandatory-notice{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-fg);border-radius:8px;padding:10px 16px;font-size:.85rem;font-weight:700;text-align:center;margin-bottom:20px;}
.tool-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;}
.tool-section>h2{margin:0 0 16px;font-size:1.1rem;color:var(--howar-blue);border-bottom:1px solid var(--border);padding-bottom:10px;}
.question-group{margin-bottom:20px;}
.question-group:last-child{margin-bottom:0;}
.question-label{display:block;font-weight:700;color:var(--howar-blue);margin-bottom:6px;font-size:.95rem;}
.question-group select{width:100%;max-width:480px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.92rem;background:#fff;color:var(--text);}
.radio-group{display:flex;flex-direction:column;gap:8px;}
.radio-option{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s;font-size:.9rem;}
.radio-option:hover{border-color:var(--howar-green);}
.radio-option.selected{border-color:var(--howar-green);background:var(--howar-green-vlight);box-shadow:inset 0 0 0 1px var(--howar-green-light);}
.radio-option input{accent-color:var(--howar-green);flex:0 0 auto;}
.calculate-btn{display:block;width:100%;max-width:480px;margin:8px auto 0;padding:14px;border-radius:10px;border:0;background:var(--howar-green);color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;}
.calculate-btn:disabled{opacity:.45;cursor:not-allowed;}
.calculate-btn:not(:disabled):hover{background:#4a8c2d;}
.results-section{display:none;margin-top:26px;}
.results-section.show{display:block;}
.score-display{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center;margin-bottom:16px;}
.score-label{font-weight:700;color:var(--howar-blue);}
.score-gauge{position:relative;height:30px;background:#e9ecef;border-radius:15px;overflow:hidden;margin:14px 0;}
.score-gauge-fill{height:100%;border-radius:15px;transition:width .5s;background:var(--howar-green);}
.score-gauge-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;color:#fff;font-size:.9rem;}
.recommendation-box{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--howar-green);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;}
.recommendation-box h3{margin:0 0 8px;color:var(--howar-blue);}
.recommendation-box.rec-critical{border-left-color:#c0392b;}
.recommendation-box.rec-high{border-left-color:#e67e22;}
.recommendation-box.rec-medium{border-left-color:#e0a800;}
.recommendation-box.rec-low,.recommendation-box.rec-optimal{border-left-color:var(--howar-green);}
.key-findings-box,.analysis-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;}
.key-findings-box h3,.analysis-section h3{margin:0 0 12px;color:var(--howar-blue);}
.key-findings-list{margin:0;padding-left:20px;}
.key-findings-list li{margin-bottom:8px;font-size:.9rem;line-height:1.5;}
.analysis-intro{font-size:.88rem;color:var(--text-muted);margin-bottom:14px;line-height:1.5;}
.justification-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.justification-table th{text-align:left;padding:10px;background:#f6f8fa;color:var(--text-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
.justification-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.45;}
.table-row-contributes{background:var(--howar-green-vlight);}
.factor-name{font-weight:700;color:var(--howar-blue);}
.impact-high{color:#c0392b;font-weight:700;}
.impact-medium{color:#e0a800;font-weight:700;}
.impact-low{color:var(--howar-green);font-weight:700;}
.action-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.action-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--border);background:#fff;font-family:inherit;font-weight:600;cursor:pointer;color:var(--howar-blue);}
.action-btn:hover{border-color:var(--howar-blue);background:#f6f8fa;}
.tool-disclaimer{margin-top:22px;font-size:.78rem;color:var(--text-muted);line-height:1.5;}
.tool-disclaimer h3{font-size:.85rem;color:var(--text);margin:0 0 4px;}
@media print{.calculate-btn,.action-buttons,.mandatory-notice{display:none!important;}}

/* ---------- Placeholder sezione ---------- */
.section-placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
      padding:40px;text-align:center;color:var(--text-muted);}

/* ---------- Profilo ---------- */
.profile-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;}
.profile-section h2{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:1.05rem;color:var(--howar-blue);border-bottom:1px solid var(--border);padding-bottom:10px;}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;}
.profile-item{display:flex;flex-direction:column;gap:3px;}
.profile-item label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.profile-item span{font-size:.98rem;color:var(--text);font-weight:500;word-break:break-word;}
.profile-note{background:var(--howar-green-vlight);border:1px solid var(--howar-green-light);border-radius:8px;padding:12px 16px;font-size:.88rem;color:var(--text-muted);}
@media(max-width:640px){.profile-grid{grid-template-columns:1fr;}}

/* ---------- FAQ / Assistenza (albero a decisioni) ---------- */
.faq-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.82rem;color:var(--text-muted);margin-bottom:14px;}
.faq-breadcrumb .sep{color:var(--text-dim);}
.faq-connector{height:18px;display:flex;justify-content:center;align-items:center;}
.faq-connector-line{width:2px;height:100%;background:var(--howar-green-light);}
.faq-connector-head{display:none;}
.faq-node{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:760px;}
.faq-node-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.faq-node-icon{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;font-size:1.55rem;background:var(--howar-green-light);border-radius:50%;}
.faq-node-title{font-size:1.15rem;font-weight:700;color:var(--howar-blue);}
.faq-node-subtitle{font-size:.85rem;color:var(--text-muted);margin-top:2px;}
.faq-options{display:flex;flex-direction:column;gap:8px;}
.faq-option-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-family:inherit;font-size:.92rem;color:var(--text);cursor:pointer;transition:border-color .12s,background .12s,transform .12s;}
.faq-option-btn:hover{border-color:var(--howar-green);background:var(--howar-green-vlight);transform:translateX(3px);}
.faq-option-btn .opt-icon{font-size:1.2rem;}
.faq-option-btn .opt-arrow{margin-left:auto;color:var(--howar-green);font-size:1.25rem;font-weight:700;}
.faq-answer{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--howar-green);border-radius:var(--radius);box-shadow:var(--shadow);max-width:760px;overflow:hidden;}
.faq-answer-header{display:flex;align-items:center;gap:10px;background:var(--howar-green-vlight);padding:16px 20px;font-weight:700;color:var(--howar-blue);border-bottom:1px solid var(--howar-green-light);}
.faq-answer-body{padding:20px;}
.faq-answer-text{font-size:.92rem;line-height:1.6;color:var(--text);}
.faq-answer-text a{color:var(--howar-green);}
.faq-answer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.faq-btn-back{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--howar-blue);cursor:pointer;}
.faq-btn-back:hover{border-color:var(--howar-blue);background:#f6f8fa;}

/* ---------- Tutorial (guida interattiva) ---------- */
.tut-nav{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap;}
.nav-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:8px;border:1px solid var(--border);background:#fff;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--howar-blue);cursor:pointer;}
.nav-btn-home:hover{border-color:var(--howar-blue);background:#f6f8fa;}
.nav-btn-current{background:var(--howar-green-light);border-color:var(--howar-green-light);color:var(--howar-green);cursor:default;}
.nav-separator{color:var(--text-dim);}
.initial-question-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:34px;text-align:center;max-width:900px;margin:0 auto;}
.initial-question-title{font-size:1.6rem;font-weight:800;color:var(--howar-blue);margin:0 0 6px;}
.initial-question-prompt{color:var(--text-muted);font-size:1rem;margin-bottom:24px;}
.initial-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.choice-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:#fff;border:1px solid var(--border);border-top:3px solid var(--howar-green);border-radius:var(--radius);padding:26px 22px;cursor:pointer;transition:box-shadow .15s,transform .15s;font-family:inherit;}
.choice-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);}
.choice-icon{font-size:2.2rem;}
.choice-title{font-size:1.1rem;font-weight:700;color:var(--howar-blue);margin:0;}
.choice-description{font-size:.88rem;color:var(--text-muted);margin:0;}
.choice-arrow{color:var(--howar-green);font-size:1.3rem;margin-top:4px;}
.section-intro-card{text-align:center;max-width:760px;margin:0 auto 26px;}
.section-intro-icon{font-size:2.4rem;}
.section-intro-title{font-size:1.5rem;font-weight:800;color:var(--howar-blue);margin:8px 0 6px;}
.section-intro-description{color:var(--text-muted);}
.flowchart-container{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.flow-step-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;}
.flow-question-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center;}
.flow-icon{font-size:2rem;}
.flow-title{font-size:1.2rem;font-weight:700;color:var(--howar-blue);margin:8px 0 4px;}
.flow-description{color:var(--text-muted);font-size:.9rem;margin:0 0 18px;}
.flow-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.flow-btn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:10px;border:1px solid var(--border);background:#fff;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .12s,background .12s;}
.flow-btn-yes:hover{border-color:var(--howar-green);background:var(--howar-green-vlight);}
.flow-btn-no:hover{border-color:#e0a800;background:#fffdf5;}
.flow-arrow{height:26px;display:flex;flex-direction:column;align-items:center;}
.arrow-line{width:2px;flex:1;}
.arrow-line-green{background:var(--howar-green);}
.arrow-line-orange{background:#e0a800;}
.arrow-line-blue{background:#2563EB;}
.arrow-head{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--howar-green);}
.arrow-head-orange{border-top-color:#e0a800;}
.arrow-head-blue{border-top-color:#2563EB;}
.flow-answer-card{width:100%;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:8px;}
.flow-answer-header{display:flex;align-items:center;gap:10px;padding:14px 20px;color:#fff;font-weight:700;}
.flow-answer-body{padding:20px;background:var(--surface);}
.flow-answer-text{color:var(--text);font-size:.95rem;}
.flow-answer-steps{display:flex;flex-direction:column;gap:14px;}
.flow-answer-step{display:flex;gap:14px;align-items:flex-start;}
.step-number{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--howar-green);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.step-content strong{color:var(--howar-blue);}
.step-content p{margin:2px 0 0;color:var(--text-muted);font-size:.88rem;}
.flow-answer-action{margin-top:18px;}
.flow-divider{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0;}
.divider-line{width:2px;height:14px;background:var(--howar-green-light);}
.divider-icon{color:var(--howar-green);}

/* ---------- Alert ---------- */
.alert{padding:10px 16px;border-radius:8px;font-size:.88rem;margin-bottom:18px;}
.alert-warning{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-bd);}
.alert-danger,.alert-error{background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-bd);}
.alert-success{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-bd);}
.alert-info{background:var(--howar-green-vlight);color:var(--text);border:1px solid var(--howar-green-light);}

/* ---------- Form (registrazione, ecc.) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:.82rem;font-weight:600;color:var(--text);}
.form-field .req{color:var(--err-fg);}
.form-field input,.form-field select,.form-field textarea{
    padding:10px 12px;border:1px solid var(--border);border-radius:8px;
    font-size:.92rem;color:var(--text);background:var(--surface);font-family:inherit;
    transition:border-color .12s,box-shadow .12s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
    outline:none;border-color:var(--howar-green);box-shadow:0 0 0 3px var(--howar-green-vlight);
}
.field-hint{font-size:.78rem;min-height:1em;}
.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }

/* ---------- Istruzioni: banner in cima + modale ---------- */
.help-banner{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
    border:1px solid var(--border);border-left:4px solid var(--howar-green);
    border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;box-shadow:var(--shadow);}
.help-banner-icon{font-size:1.2rem;line-height:1.4;flex:0 0 auto;}
.help-banner-body{font-size:.9rem;color:var(--text);line-height:1.5;}
.help-banner-title{display:block;margin-bottom:4px;color:var(--text);font-weight:700;}
/* Gli <strong> DENTRO il testo restano inline: non devono spezzare la frase. */
.help-banner-body strong{font-weight:700;}
.help-banner-body ul{margin:6px 0 0;padding-left:20px;}
.help-banner-body li{margin-bottom:4px;}
.help-banner-body p{margin:0 0 8px;}
.help-banner-body p:last-child{margin-bottom:0;}
/* Nota privacy: staccata dal resto, per darle il rilievo che merita. */
.help-privacy{margin-top:10px!important;padding-top:10px;border-top:1px solid var(--border);
    font-size:.86rem;color:var(--text-muted);}

/* Pulsante "Istruzioni".
   Comportamento predefinito: ancorato in alto a destra della pagina, allineato
   al padding di .main (26px 30px) così non tocca il bordo. */
.help-btn{position:absolute;top:26px;right:30px;display:inline-flex;align-items:center;gap:6px;z-index:5;}
@media (max-width:700px){
    .help-btn{position:static;margin-bottom:16px;}
}

/* Riga di intestazione pagina: titolo (+ badge) a sinistra, azioni a destra.
   Quando il pulsante Istruzioni sta QUI dentro torna nel flusso normale, così
   resta accanto al titolo dentro l'area dei contenuti invece di finire
   staccato nell'angolo della pagina. */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.page-head-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.page-head-right{display:flex;align-items:center;gap:10px;}
.page-head .help-btn{position:static;top:auto;right:auto;margin:0;}
.modal-open{overflow:hidden;}
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    background:rgba(31,41,51,.55);padding:24px;}
.modal-overlay[hidden]{display:none;}
.modal{background:var(--surface);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.28);
    width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
    animation:modal-in .16s ease-out;}
@keyframes modal-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 22px;border-bottom:1px solid var(--border);}
.modal-title{margin:0;font-size:1.1rem;color:var(--text);}
.modal-close{background:transparent;border:none;font-size:1.1rem;color:var(--text-muted);cursor:pointer;
    width:32px;height:32px;border-radius:8px;line-height:1;}
.modal-close:hover{background:var(--bg);color:var(--text);}
.modal-body{padding:20px 22px;overflow-y:auto;font-size:.92rem;color:var(--text);line-height:1.55;}
.modal-body h3{font-size:.95rem;margin:16px 0 6px;color:var(--text);}
.modal-body h3:first-child{margin-top:0;}
.modal-body ul{margin:6px 0 12px;padding-left:20px;}
.modal-body li{margin-bottom:6px;}
.modal-body .help-tag{display:inline-block;padding:1px 7px;border-radius:6px;font-size:.82rem;font-weight:600;
    background:var(--bg);border:1px solid var(--border);margin-right:2px;}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;}
.sidebar-badge-warn{background:var(--warn-fg)!important;color:#fff!important;font-weight:800;}

/* ---------- BONUS TOOL (card sempre visibile in "I miei test") ---------- */
.bonus-block{margin-bottom:24px;}
/* Card BONUS: stesse dimensioni delle card dei modelli (sta nella .card-grid),
   si distingue solo per l'accento ambra e il badge, non per la larghezza. */
.bonus-card{display:block;border-top:3px solid var(--warn-bd)!important;
    background:linear-gradient(180deg,var(--warn-bg) 0%,var(--surface) 46%);}
.bonus-cta{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--howar-green);}
.bonus-card:hover .bonus-cta{text-decoration:underline;}
/* "HOWAR MATRIX™" su UNA riga: il titolo non va a capo; se il badge non ci sta
   accanto, è lui a scendere sotto (la head può andare a capo). */
.bonus-card .model-card-head{flex-wrap:wrap;}
.bonus-card .model-card-title{white-space:nowrap;}
/* Badge "N disponibili": sempre su UNA riga, qualunque sia il numero. Non si
   comprime: se il titolo è lungo (es. INSIGHTS FOR TRAINING) va a capo il titolo,
   non il badge. */
.model-card-head .badge{white-space:nowrap;flex-shrink:0;}

.cred-link{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;
    font-size:.82rem;word-break:break-all;color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;}
.modal-body code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.85rem;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
    .sidebar-toggle{display:flex;}
    .sidebar{
        position:fixed;top:var(--topbar-h);left:0;z-index:40;
        transform:translateX(-100%);transition:transform .2s;height:calc(100vh - var(--topbar-h));
    }
    .sidebar.is-open{transform:translateX(0);}
    .main{padding:20px 16px 48px;}
    .user-chip{display:none;}
}

/* Filtro data per intervallo (Dal / Al) nelle colonne di tipo data */
.col-filter-range{display:flex;gap:6px;align-items:center;}
.col-filter-date{flex:1 1 auto;min-width:0;font-size:.78rem;padding:5px 6px;}
.col-filter-date::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;}
@media (max-width:900px){ .col-filter-range{flex-direction:column;gap:4px;} }

/* Card KPI cliccabili: portano all'elenco test filtrato. Il feedback al passaggio
   del mouse e' lo stesso delle nav-card, così si capisce che sono navigabili. */
.kpi-card-link{display:block;transition:box-shadow .15s,transform .15s,border-color .15s;}
.kpi-card-link:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.kpi-cta{margin-top:10px;font-size:.82rem;font-weight:700;color:var(--howar-green);}
.kpi-card-link:hover .kpi-cta{text-decoration:underline;}

/* ---------- Zona banner di avviso in cima alla Home ---------- */
.home-warnings{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;}
.home-warning{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:0;}
.home-warning-ico{font-size:1.2rem;line-height:1;flex:0 0 auto;}
.home-warning-txt{flex:1 1 260px;line-height:1.5;}
.home-warning-cta{flex:0 0 auto;margin-left:auto;}
@media (max-width:640px){ .home-warning-cta{margin-left:0;} }

/* ============================================================
   HOWAR MIRROR — extra consumer (login + empty state test)
   Appeso a dashboard.css riusato da ecosystem.
   ============================================================ */
.mirror-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f4f6f9; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.08); padding: 32px 28px; }
.auth-card h1 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: .5px; }
.auth-sub { margin: 0 0 20px; color: #6b7280; font-size: .95rem; }
.auth-card label { display: block; font-size: .85rem; color: #374151; margin-bottom: 14px; }
.auth-card input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #d1d5db; border-radius: 9px; font-size: 1rem; box-sizing: border-box; }
.auth-card input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.btn-primary { width: 100%; padding: 12px; border: 0; border-radius: 9px; background: #2563eb; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: #1d4ed8; }
.auth-info { background: #eff6ff; color: #1e40af; padding: 10px 12px; border-radius: 8px; font-size: .9rem; margin: 0 0 16px; }
.auth-error { background: #fef2f2; color: #b91c1c; padding: 10px 12px; border-radius: 8px; font-size: .9rem; margin: 0 0 16px; }
.auth-links { text-align: center; margin: 18px 0 0; font-size: .9rem; }
.auth-links a { color: #2563eb; text-decoration: none; }

/* Stato vuoto "I miei test" */
.mirror-empty { text-align: center; padding: 48px 20px; color: #6b7280; }
.mirror-empty .btn-primary { display: inline-block; width: auto; padding: 12px 22px; text-decoration: none; margin-top: 14px; }
/* Card di un test/campagna */
.test-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 20px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.test-card h3 { margin:0 0 4px; font-size:1.05rem; }
.test-state { font-size:.8rem; padding:3px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; white-space:nowrap; }

/* ============================================================
   HOWAR MIRROR — questionario (auto-valutazione)
   ============================================================ */
.quiz-wrap { max-width: 680px; margin: 0 auto; padding: 24px 16px 80px; }
.quiz-head { text-align:center; margin-bottom: 8px; }
.quiz-head h1 { margin:0 0 6px; font-size:1.4rem; }
.quiz-head p { color:#6b7280; margin:0; }
.quiz-progress { position:sticky; top:0; background:#f4f6f9; padding:12px 0; z-index:5; }
.quiz-progress .bar { height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.quiz-progress .bar > i { display:block; height:100%; width:0; background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:999px; transition:width .3s ease; }
.quiz-progress .lbl { font-size:.8rem; color:#6b7280; text-align:center; margin-top:6px; }
.q-card { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:20px; margin:14px 0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
/* La scheda della domanda e' un <fieldset> con <legend>: serve a chi usa uno
   screen reader, che cosi' sente la domanda insieme alle quattro risposte.
   Qui si annullano gli stili nativi dei due elementi (il fieldset ha un padding
   proprio e non si restringe sotto il contenuto; la legend nasce in linea e
   ritagliata nel bordo) perche' l'aspetto resti quello di prima. */
fieldset.q-card { min-width:0; min-inline-size:0; }
/* La legend nasce APPOGGIATA sul bordo del fieldset, fuori dal riquadro: la
   domanda finiva sopra la scheda bianca invece che dentro. Il rimedio che
   funziona ovunque e' farla galleggiare a tutta larghezza e far ripartire da
   capo il contenuto che segue. */
.q-card > .q-legend { float:left; width:100%; padding:0; margin:0; }
.q-card > .q-legend + * { clear:both; }
.q-card .q-num, .q-card .q-text { display:block; }
.q-card .q-num { font-size:.75rem; color:#9ca3af; letter-spacing:.5px; }
.q-card .q-text { font-size:1.08rem; font-weight:600; margin:4px 0 16px; line-height:1.4; }
/* segmented control 4 valori */
.seg { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label { text-align:center; padding:10px 6px; border:1.5px solid #e5e7eb; border-radius:10px; cursor:pointer; font-size:.85rem; color:#4b5563; transition:all .15s ease; user-select:none; }
.seg label:hover { border-color:#c7d2fe; }
.seg input:checked + label { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); transform:translateY(-1px); }
.quiz-submit { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid #e5e7eb; padding:14px 16px; text-align:center; }
.quiz-submit button { max-width:680px; }
.quiz-submit button:disabled { opacity:.5; cursor:not-allowed; }

/* ============================================================
   HOWAR MIRROR — wizard campagna (5 step) + pannello link
   ============================================================ */
.wiz { max-width: 760px; margin: 0 auto; }
.wiz h1 { margin: 0 0 4px; font-size: 1.4rem; }
.wiz .sub { color:#6b7280; margin:0 0 22px; }
.wstep { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:20px 22px; margin:14px 0; box-shadow:0 1px 3px rgba(0,0,0,.04); position:relative; }
.wstep .wnum { position:absolute; left:-14px; top:20px; width:30px; height:30px; border-radius:50%; background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; box-shadow:0 0 0 4px #f4f6f9; }
.wstep.done  .wnum { background:#16a34a; color:#fff; }
.wstep.active .wnum { background:#2563eb; color:#fff; }
.wstep.locked { opacity:.55; }
.wstep h3 { margin:0 0 6px; font-size:1.1rem; }
.wstep p.desc { color:#6b7280; margin:0 0 14px; font-size:.95rem; }
.wstep.locked .actions { display:none; }
.pill-done { font-size:.8rem; color:#16a34a; font-weight:600; }

/* contatore N/10 */
.counter { display:flex; align-items:baseline; gap:8px; margin:8px 0 16px; }
.counter .big { font-size:2rem; font-weight:800; color:#2563eb; }
.counter .of { color:#9ca3af; }

/* righe link invito */
.link-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #eef0f4; border-radius:10px; margin:8px 0; flex-wrap:wrap; }
.link-row .pg { width:26px; height:26px; border-radius:50%; background:#eef2ff; color:#3730a3; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex:0 0 auto; }
.link-row .st { font-size:.72rem; padding:2px 8px; border-radius:999px; background:#f3f4f6; color:#4b5563; }
.link-row .st.completato { background:#dcfce7; color:#166534; }
.link-row .st.aperto { background:#fef9c3; color:#854d0e; }
.link-row .grow { flex:1 1 120px; font-size:.8rem; color:#9ca3af; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-row .mini { border:1px solid #d1d5db; background:#fff; border-radius:8px; padding:6px 10px; font-size:.8rem; cursor:pointer; text-decoration:none; color:#374151; }
.link-row .mini:hover { border-color:#2563eb; color:#2563eb; }
.link-row.sent { background:#f0fdf4; border-color:#bbf7d0; }
.priv-note { font-size:.8rem; color:#6b7280; background:#f9fafb; border-left:3px solid #d1d5db; padding:8px 12px; border-radius:6px; margin:10px 0; }

/* Copia link: stato "già copiato" persistente (verde) */
.link-row .mini.copy-link.used { background:#dcfce7; border-color:#16a34a; color:#166534; font-weight:600; }
.link-row .mini.copy-link.used::before { content:'✓ '; }

/* ============================================================
   HOWAR MIRROR — REPORT (radar + dumbbell, palette dataviz validata)
   ============================================================ */
.report-wrap { max-width: 820px; margin: 0 auto;
  --r-surface:#fcfcfb; --r-ink:#0b0b0b; --r-ink2:#3a3936; --r-muted:#6b6963;
  --r-grid:#e1e0d9; --r-axis:#c3c2b7;
  --r-tu:#2a78d6; --r-altri:#eb6834;           /* serie: tu / gli altri */
  --r-serious:#ec835a; --r-critical:#d03b3b;   /* status punto cieco */
}
.report-head { text-align:center; margin-bottom:6px; }
.report-head h1 { margin:0 0 4px; font-size:1.5rem; color:var(--r-ink); }
.report-head .who { color:var(--r-ink2); margin:0; }
.report-lead { background:#f9fafb; border:1px solid #eef0f4; border-radius:12px; padding:16px 18px; margin:18px 0; font-size:1.02rem; line-height:1.5; color:var(--r-ink); }
.report-lead .hl { font-weight:700; }
.viz-card { background:var(--r-surface); border:1px solid #eef0f4; border-radius:16px; padding:22px; margin:18px 0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.viz-card h2 { margin:0 0 4px; font-size:1.15rem; color:var(--r-ink); }
.viz-card .cap { color:var(--r-muted); font-size:.85rem; margin:0 0 14px; }
.viz-legend { display:flex; gap:18px; justify-content:center; margin-top:8px; font-size:.85rem; color:var(--r-ink2); }
.viz-legend .k { display:inline-flex; align-items:center; gap:7px; }
.viz-legend .dot { width:12px; height:12px; border-radius:50%; }
.gap-badge { font-size:.78rem; font-weight:700; padding:2px 9px; border-radius:999px; font-variant-numeric:tabular-nums; }
.gap-badge.aligned { background:#eef2f7; color:#52514e; }
.gap-badge.blind { background:#fdece4; color:#b23c17; }
.sugg-card { background:#fff; border:1px solid #eef0f4; border-left:4px solid var(--r-serious); border-radius:10px; padding:14px 16px; margin:10px 0; }
.sugg-card h3 { margin:0 0 6px; font-size:1rem; color:var(--r-ink); display:flex; align-items:center; gap:8px; }
.sugg-card p { margin:0; color:var(--r-ink2); font-size:.95rem; line-height:1.5; }
.report-actions { text-align:center; margin:24px 0; }
.report-note { font-size:.85rem; color:var(--r-muted); text-align:center; margin-top:20px; }

@media print {
  .topbar, .sidebar, .report-actions, .noprint { display:none !important; }
  .layout { display:block !important; }
  .main { padding:0 !important; }
  body { background:#fff; }
  .viz-card, .sugg-card { box-shadow:none; break-inside:avoid; }
}

/* ============================================================
   HOWAR MIRROR — card "I miei test" (ridisegnate, distinguibili)
   ============================================================ */
.tcard { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px 20px; margin-bottom:14px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.tcard-main { flex:1; min-width:0; }
.tcard-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tcard-top h3 { margin:0; font-size:1.08rem; }
.tcard-date { font-size:.82rem; color:#9ca3af; }
.tcard-badge { font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.tcard-badge.s-acquistata, .tcard-badge.s-autovalutazione { background:#fef3c7; color:#92400e; }
.tcard-badge.s-raccolta { background:#dbeafe; color:#1e40af; }
.tcard-badge.s-in_generazione { background:#ede9fe; color:#5b21b6; }
.tcard-badge.s-completata { background:#dcfce7; color:#166534; }
.tcard-badge.s-scaduta, .tcard-badge.s-annullata { background:#f3f4f6; color:#6b7280; }
.tcard-detail { font-size:.9rem; color:#6b7280; margin-top:6px; }
/* mini stepper 3 tappe */
.tsteps { display:flex; align-items:center; gap:6px; margin-top:12px; }
.tstep { display:flex; align-items:center; gap:6px; font-size:.72rem; color:#9ca3af; }
.tstep .d { width:16px; height:16px; border-radius:50%; background:#e5e7eb; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; }
.tstep.on .d { background:#57A035; } .tstep.on { color:#374151; font-weight:600; }
.tstep .bar { width:26px; height:2px; background:#e5e7eb; }
.tstep.on .bar { background:#57A035; }

/* step ③ — link "inviato": TUTTI i pulsanti di invio diventano verdi (persistente) */
.link-row.used { background:#f0fdf4; border-color:#bbf7d0; }
.link-row.used .mini.send-action { background:#dcfce7; border-color:#86efac; color:#166534; font-weight:600; }
.sent-chip { display:none; font-size:.72rem; font-weight:700; color:#166534; background:#dcfce7; padding:2px 9px; border-radius:999px; }
.link-row.used .sent-chip { display:inline-block; }
.wiz-help { background:#eff6ff; border:1px solid #dbeafe; color:#1e40af; border-radius:10px; padding:12px 15px; font-size:.9rem; line-height:1.55; margin:0 0 14px; }
.wiz-help b { color:#1e3a8a; }

/* card "I miei test" — intera card cliccabile + griglia info */
a.tcard { text-decoration:none; color:inherit; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; cursor:pointer; }
a.tcard:hover { box-shadow:0 8px 22px rgba(0,0,0,.09); transform:translateY(-2px); border-color:#c7d2fe; }
.tcard-grid { display:flex; gap:28px; flex-wrap:wrap; margin:14px 0 6px; }
.tcard-grid > div { display:flex; flex-direction:column; gap:2px; }
.tcard-grid .k { font-size:.68rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.tcard-grid .v { font-size:.98rem; font-weight:700; color:#111827; }
.tcard-cta { color:#2563eb; font-weight:700; white-space:nowrap; align-self:center; font-size:1rem; }
.tcard-badge.macro-aperto { background:#dbeafe; color:#1e40af; }
.tcard-badge.macro-concluso { background:#dcfce7; color:#166534; }
.tcard-badge.macro-scaduto, .tcard-badge.macro-annullato { background:#f3f4f6; color:#6b7280; }

/* I miei test — griglia a DUE colonne */
.tcards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:start; }
.tcards-grid .tcard { margin-bottom:0; }
.tsteps { flex-wrap:wrap; row-gap:4px; }
@media (max-width:900px) { .tcards-grid { grid-template-columns:1fr; } }

/* step ③ — pulsante Invita + modal anteprima messaggio */
.mini.btn-invita { background:#2563eb; color:#fff; border-color:#2563eb; font-weight:600; }
.mini.btn-invita:hover { background:#1d4ed8; }
.link-row.used .mini.btn-invita { background:#16a34a; border-color:#16a34a; }
.mir-modal-overlay { position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.mir-modal-overlay.open { display:flex; }
.mir-modal { background:#fff; border-radius:16px; max-width:460px; width:100%; padding:22px 24px; box-shadow:0 20px 50px rgba(0,0,0,.28); }
.mir-modal h3 { margin:0 0 4px; font-size:1.15rem; }
.mir-modal .im-sub { color:#6b7280; font-size:.85rem; margin:0; }
/* Nota sui limiti di WhatsApp Web da desktop (accesso richiesto + testo che si perde). */
.mir-modal .im-nota {
  margin:14px 0 0; padding:10px 12px; background:#f7f9fa; border-left:3px solid #cbd5e1;
  border-radius:0 8px 8px 0; color:#5b6472; font-size:.8rem; line-height:1.5;
}
/* Il messaggio di invito e' un textarea, non piu' un blocco di sola lettura:
   si modifica prima di mandarlo. Restano l'aspetto e le misure di prima, con
   l'aggiunta del focus e del ridimensionamento verticale. */
.mir-modal .msg { display:block; width:100%; box-sizing:border-box; white-space:pre-wrap; background:#f9fafb; border:1px solid #eef0f4; border-radius:10px; padding:14px; font-family:inherit; font-size:.9rem; line-height:1.5; color:#374151; max-height:230px; overflow:auto; margin:12px 0 10px; resize:vertical; }
.mir-modal .msg:focus { outline:none; border-color:#57A035; background:#fff; box-shadow:0 0 0 3px rgba(87,160,53,.12); }
/* Avviso: il link e' stato cancellato dal testo. Finche' resta, i pulsanti di
   invio sono spenti - un invito senza link non serve a niente. */
.mir-modal .im-warn { margin:0 0 14px; padding:10px 12px; background:#fef3c7; border:1px solid #fde68a; border-radius:8px; font-size:.82rem; line-height:1.45; color:#92400e; }
.mir-modal .m-btn-off { opacity:.45; pointer-events:none; }
/* Chiusura in fondo al modal degli inviti: la ✕ in alto e' piccola e non dice
   cosa succede. Questa chiude E segna il contatto come invitato, quindi va
   staccata dai quattro pulsanti di invio da una riga. */
.mir-modal-foot { margin-top:16px; padding-top:14px; border-top:1px solid #eef0f4; text-align:center; }
.mir-modal-foot .m-btn-ok { display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 26px; border-radius:10px; border:1.5px solid #57A035; background:#57A035; color:#fff;
    cursor:pointer; font-size:.92rem; font-weight:700; }
.mir-modal-foot .m-btn-ok:hover { background:#4a8c2d; border-color:#4a8c2d; }
.mir-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mir-modal-actions .m-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:10px; border:1.5px solid #e5e7eb; background:#fff; cursor:pointer; font-size:.9rem; font-weight:600; color:#374151; text-decoration:none; }
.mir-modal-actions .m-btn.wa { background:#25d366; border-color:#25d366; color:#fff; }
.mir-modal-actions .m-btn.mail { background:#2563eb; border-color:#2563eb; color:#fff; }
.mir-modal-close { float:right; background:none; border:none; font-size:1.2rem; line-height:1; cursor:pointer; color:#9ca3af; }

/* riga contatto: done=verde (ha risposto); pulsante Invita(blu)→Reinvia(arancio) */
.link-row.done { background:#f0fdf4; border-color:#bbf7d0; }
.mini.btn-invita.resend { background:#f59e0b; border-color:#f59e0b; color:#fff; }
.mini.btn-invita.resend:hover { background:#d97706; }

/* step ③ input nome contatto */
.link-row .contact-name { border:1px solid #d1d5db; border-radius:8px; padding:7px 11px; font-size:.85rem; width:180px; max-width:42vw; }
.link-row .contact-name:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
/* step ④ barra avanzamento risposte */
.prog { margin:4px 0 6px; }
.prog-bar { height:11px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.prog-bar > i { display:block; height:100%; background:linear-gradient(90deg,#2563eb,#16a34a); border-radius:999px; transition:width .4s ease; }
.prog-lbl { font-size:.92rem; color:#374151; margin:9px 0 0; }
.gen-report { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:12px; padding:14px 16px; margin:14px 0 2px; }
.gen-report p { margin:0 0 10px; color:#065f46; font-size:.95rem; line-height:1.5; }
.gen-hint { font-size:.9rem; color:#6b7280; margin:12px 0 2px; }

/* ====== BOX ISTRUZIONI (non è uno step) ====== */
.wiz-intro { background:#F8F9FB; border:1px solid #E9ECF3; border-radius:14px; padding:16px 20px; margin:0 0 22px; }
.wiz-intro h3 { margin:0 0 6px; font-size:1.05rem; color:#2E3A59; }
.wiz-intro p { margin:0; color:#4b5563; font-size:.95rem; line-height:1.55; }

/* ====== PALETTE UNIFICATA (stile ecosystem: verde #57A035 + navy #2E3A59 + neutri) ====== */
.btn-primary { background:#57A035; border-color:#57A035; }
.btn-primary:hover { background:#468729; }
.mini.btn-invita { background:#57A035; border-color:#57A035; color:#fff; }
.mini.btn-invita:hover { background:#468729; }
.mini.btn-invita.resend { background:#fff; border-color:#57A035; color:#468729; }
.mini.btn-invita.resend:hover { background:#f1f7ec; }
.wiz h1, .wstep h3, .report-head h1, .viz-card h2, .q-card .q-text { color:#2E3A59; }
.wiz-help { background:#F8F9FB; border-color:#E9ECF3; color:#2E3A59; }
.wiz-help b { color:#2E3A59; }
.prog-bar > i { background:#57A035; }
.gen-report { background:#f1f7ec; border-color:#cfe3c2; }
.gen-report p { color:#2E3A59; }
.mir-modal-actions .m-btn.mail { background:#2E3A59; border-color:#2E3A59; color:#fff; }
.tcard-cta { color:#57A035; }
a.tcard:hover { border-color:#bcdcae; }
.tcard-badge.macro-aperto { background:#eaf3e4; color:#3f6b28; }
.seg input:checked + label { background:#57A035; border-color:#57A035; box-shadow:0 4px 12px rgba(87,160,53,.25); }
.seg label:hover { border-color:#bcdcae; }
.quiz-progress .bar > i { background:#57A035; }
.form-control:focus, .contact-name:focus, .auth-card input:focus { border-color:#57A035; box-shadow:0 0 0 3px rgba(87,160,53,.15); }
.auth-info { background:#f1f7ec; color:#3f6b28; }
.pill-done { color:#468729; font-weight:600; }
/* numeri step → verde uniforme */
.wstep.done .wnum, .wstep.active .wnum { background:#57A035; }
/* campo nome: si allarga per mostrare tutto il placeholder */
.link-row .contact-name { flex:1 1 auto; min-width:240px; width:auto; max-width:none; }
/* "Completata ✓" come badge verde */
.pill-done { display:inline-block; background:#eaf3e4; color:#3f6b28; font-weight:700; font-size:.92rem; padding:6px 15px; border-radius:999px; }
/* titolo HOWAR MIRROR in verde */
.wiz h1 { color:#57A035; }

/* --- Note informative wizard (generazione + retention report) --- */
.gen-report .gen-note{
    font-size:.86rem; line-height:1.55; color:#5b6472;
    margin:8px 0 14px; padding-left:0;
}
.wiz-retention{
    font-size:.84rem; line-height:1.55; color:#6b7280;
    background:#f6f8f5; border:1px solid #e5eae0; border-radius:8px;
    padding:10px 14px; margin-top:14px;
}

/* --- Elenco puntato nel box istruzioni "Coinvolgi i tuoi contatti" --- */
.wiz-help p{ margin:0 0 10px; }
.wiz-help .wiz-list{ margin:0; padding-left:20px; list-style:disc; }
.wiz-help .wiz-list li{ margin:6px 0; line-height:1.55; }

/* --- FAQ "Tempi e regole" (accordion nativo <details>) --- */
.wiz-faq{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 20px; margin-bottom:22px; }
.wiz-faq h3{ margin:0 0 6px; color:#2E3A59; font-size:1.05rem; }
.wiz-faq details{ border-top:1px solid #eef0f2; }
.wiz-faq details:first-of-type{ border-top:none; }
.wiz-faq summary{ cursor:pointer; padding:11px 26px 11px 0; font-weight:600; color:#374151; list-style:none; position:relative; line-height:1.4; }
.wiz-faq summary::-webkit-details-marker{ display:none; }
.wiz-faq summary::after{ content:"+"; position:absolute; right:2px; top:8px; font-size:1.25rem; color:#57A035; font-weight:700; }
.wiz-faq details[open] summary::after{ content:"\2212"; }
.wiz-faq details p{ margin:0 0 12px; color:#5b6472; font-size:.9rem; line-height:1.6; }

/* Il blocco intero e' a sua volta un <details>, chiuso di partenza. Il suo
   <summary> sta dentro .wiz-faq, quindi eredita le regole qui sopra: queste lo
   rimettono a fare il titolo invece che una domanda come le altre. */
details.wiz-faq{ padding:0; }
.wiz-faq > summary.wiz-faq-titolo{ padding:14px 34px 14px 20px; margin:0;
  color:#2E3A59; font-size:1.05rem; font-weight:700; }
.wiz-faq > summary.wiz-faq-titolo::after{ right:16px; top:12px; }
details.wiz-faq[open] > summary.wiz-faq-titolo::after{ content:"\2212"; }
details.wiz-faq[open] > summary.wiz-faq-titolo{ border-bottom:1px solid #eef0f2; }
.wiz-faq > details{ margin:0 20px; }
.wiz-faq > details:first-of-type{ margin-top:4px; }
.wiz-faq > details:last-of-type{ margin-bottom:8px; }

/* --- Mobile: scala di risposta a 2x2 su schermi stretti (evita strizzatura etichette) --- */
@media (max-width:480px){
    .seg{ grid-template-columns:repeat(2,1fr); }
    .seg label{ padding:12px 6px; font-size:.9rem; }
}

/* ---------- Profilo consumer ---------- */
.pf-wrap{ max-width:620px; }
.pf-card{ background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.pf-card h2{ font-size:1.05rem; margin:0 0 4px; color:#2E3A59; }
.pf-card .pf-sub{ font-size:.85rem; color:#6b7280; margin:0 0 14px; }
.pf-row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid #f1f3f5; }
.pf-row:last-of-type{ border-bottom:0; }
.pf-row .k{ color:#6b7280; font-size:.9rem; }
.pf-row .v{ font-weight:600; color:#111827; text-align:right; word-break:break-word; }
.pf-field{ margin-bottom:14px; }
.pf-field label{ display:block; font-size:.8rem; font-weight:600; color:#374151; margin-bottom:5px; }
.pf-field input{ width:100%; padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.9rem; color:#111827; }
.pf-field input:focus{ outline:none; border-color:#57A035; box-shadow:0 0 0 3px rgba(87,160,53,.15); }
.pf-row2{ display:flex; gap:12px; } .pf-row2 .pf-field{ flex:1; }
.pf-note{ font-size:.8rem; color:#9ca3af; margin:6px 0 0; }
.pf-flash{ padding:10px 14px; border-radius:8px; font-size:.85rem; margin-bottom:14px; }
.pf-flash.success{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.pf-flash.danger{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.pf-btn{ background:#57A035; color:#fff; border:0; border-radius:8px; padding:10px 20px; font-weight:600; font-size:.9rem; cursor:pointer; transition:background .15s; }
.pf-btn:hover{ background:#468729; }
@media (max-width:560px){ .pf-row2{ flex-direction:column; gap:0; } }

/* ============ REPORT — fascicolo a capitoli ============ */
.report-doc { max-width: 760px; }
.rep-chapter { margin-bottom: 30px; }
.rep-fattore { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:22px 24px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.fattore-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.fattore-head h2 { margin:0; font-size:1.25rem; color:#1f2937; }
.cat-badge { font-size:.8rem; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.cat-cieco    { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.cat-nascosta { background:#cffafe; color:#155e75; border:1px solid #67e8f9; }
.cat-forza    { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.cat-crescita { background:#ffedd5; color:#9a3412; border:1px solid #fdba74; }
.cat-allineato{ background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; }
.fattore-scores { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid #f1f3f5; }
.fattore-scores .sc { display:flex; flex-direction:column; }
.fattore-scores .sc .lab { font-size:.72rem; color:#374151; text-transform:uppercase; letter-spacing:.4px; }
.fattore-scores .sc .val { font-size:1.35rem; font-weight:700; color:#111827; line-height:1.1; }
.fattore-scores .sc-tu .val { color:#2a78d6; }
.fattore-scores .sc-altri .val { color:#eb6834; }
.fattore-scores .sc-gap .val { color:#374151; }
.fattore-scores .mini { margin-left:auto; }
.fattore-nota { font-size:.9rem; color:#374151; line-height:1.55; }
.restituzione { font-size:.95rem; line-height:1.65; color:#374151; white-space:normal; margin:4px 0 6px; }
/* "Come utilizzarlo": il blocco che dice al lettore cosa farsene. Distinto per
   CAMBIO DI VOCE, non per enfasi: fondo appena piu' chiaro, nessuna icona,
   nessun bordo colorato. Se sembrasse un pannello di istruzioni smentirebbe i
   testi, che dicono "e' un'opportunita', non un'urgenza". */
/* =====================================================================
   "COME UTILIZZARLO" — la parte che dice al lettore cosa farsene
   =====================================================================
   Era il terzo paragrafo di un testo unico: stesso corpo, stesso colore,
   riconoscibile solo dal grassetto iniziale. Sfogliando non si trovava, ed
   e' la parte che un lettore ha segnalato come la piu' utile.

   NAVY, il colore della copertina. Non e' un riquadro d'avviso: e' il
   momento in cui parla HOWAR, e usa la stessa voce con cui il documento si
   presenta in prima pagina. Un fondo giallo o un bordo arancione avrebbero
   detto "attenzione", un'icona avrebbe detto "istruzioni": tutte e due
   smentirebbero i testi, che dicono "se vuoi, e' un'opportunita'".

   Il titolo e' un'ETICHETTA sopra il blocco, non un grassetto dentro la
   riga: e' quello che lo rende riconoscibile a colpo d'occhio.

   Una banda di cinque righe per competenza, sei in tutto il fascicolo:
   danno un ritmo alla lettura senza pesare in stampa.
   ===================================================================== */
.uso{
  background:#22354F; border-radius:12px;
  padding:16px 20px 18px; margin:14px 0 8px;
}
.uso-tit{
  display:block; margin-bottom:7px;
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8FD05F;
}
.uso .uso-testo{
  color:#E8EDF3; font-size:.93rem; line-height:1.62; margin:0;
}
.uso .uso-testo strong{ color:#fff; }

/* "Come allenarlo / valorizzarlo": la stessa idea di .uso, un gradino sotto.
   Dentro la scheda del comportamento la banda navy e' gia' comparsa piu' su:
   ripeterla qui la svuoterebbe. Basta un filetto verde e l'etichetta, che
   danno l'aggancio all'occhio senza rifare il colpo di scena. */
.azione{
  margin:8px 0 2px; padding:2px 0 2px 12px;
  border-left:2px solid var(--howar-green, #57A035);
}
.azione-tit{
  display:block; margin-bottom:3px;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#468729;
}
.critica .azione .azione-testo{ margin:0; }

/* I due capi del rimando fra la scheda della competenza e il piano d'azione.
   Sono raccordi, non contenuti: corpo piccolo, grigio, nessun riquadro. */
.fattore-rimando{
  margin:14px 0 0; padding-top:10px; border-top:1px solid #eef0f4;
  font-size:.85rem; color:#6b7280; line-height:1.5;
}
.fattore-rimando strong{ color:#2E3A59; }
.p-rimando{
  margin:8px 0 0; font-size:.83rem; color:#6b7280; line-height:1.5;
}
.p-rimando strong{ color:#2E3A59; }
.p-rimando em{ font-style:normal; font-weight:600; color:#468729; }

/* "Che cos'e' questo documento": apre pagina 2. Un filetto verde e nient'altro:
   e' la prima cosa che si legge e non deve sembrare un avviso legale, che e'
   proprio il motivo per cui e' stata portata via dall'ultima pagina. */
.intro-cos-e{
  margin:0 0 16px; padding:2px 0 2px 14px;
  border-left:3px solid var(--howar-green, #57A035);
}

/* Ragione sociale in chiusura della quarta: e' il piede di un documento, non
   un contenuto. Piccolo, spaziato, sotto una riga sottile. */
.bc-legal{
  /* La filigrana del radar arriva fin qui, in basso a sinistra, e sotto un
     testo di 11px le sue linee lo rendevano illeggibile. Il piede si stacca
     dal fondo con un velo scuro, che spegne la filigrana solo dove serve
     senza toglierla dalla pagina. */
  position:relative; z-index:1;
  margin:14px -10px 0; padding:12px 10px 4px;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(to bottom, rgba(27,46,71,.86), rgba(27,46,71,.94));
  font-size:.72rem; line-height:1.6; color:#9DB0C6;
}
.bc-legal strong{ color:#D3DFEC; font-weight:700; }
.critiche { margin-top:16px; }
.critiche h3 { font-size:.95rem; color:#2E3A59; margin:0 0 10px; }
.critica { border-left:3px solid #cbd5e1; padding:8px 0 8px 14px; margin-bottom:12px; }
.critica.is-migliora { border-left-color:#f59e0b; }
.critica.is-valorizza { border-left-color:#16a34a; }
.critica .comportamento { margin:0 0 6px; font-weight:600; color:#1f2937; font-size:.92rem; }
.critica .comportamento .q-num { display:inline-block; font-weight:500; color:#374151; font-size:.8rem; margin-left:4px; }
.critica .coaching { font-size:.9rem; line-height:1.6; color:#374151; }
.fattore-cta { margin:14px 0 0; }
.cta-badge { font-size:.85rem; font-weight:600; padding:6px 14px; border-radius:8px; }
.scale-legend { margin-top:10px; text-align:center; }
.scale-legend .cap { display:block; margin:0 auto 4px; max-width:520px; }
.scale-legend .levels { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:6px; font-size:.78rem; color:#374151; }
.scale-legend .levels b { color:#374151; }
/* Sul telefono le quattro voci non stanno in una riga: con "piu' no che si'" e
   "piu' si' che no" (04/09/2026) ne entravano tre e la quarta finiva sola sotto.
   Due colonne fisse: le voci si leggono a coppie, 1-2 sopra e 3-4 sotto, che e'
   anche l'ordine della scala. */
@media (max-width:640px){
  .scale-legend .levels{ display:grid; grid-template-columns:repeat(2,max-content); gap:4px 22px; justify-content:center; }
}
.disclaimer { margin-top:18px; font-size:.82rem; line-height:1.6; color:#374151; background:#f8fafc; border:1px solid #e5e9f0; border-radius:10px; padding:14px 16px; }
.disclaimer strong { color:#475569; }

@media print {
  .topbar, .sidebar, .noprint, .report-actions { display:none !important; }
  .main, .layout { padding:0 !important; display:block !important; }
  .report-doc { max-width:100%; }
  .rep-chapter { break-inside:avoid; page-break-inside:avoid; }
  .rep-fattore { break-before:page; page-break-before:always; box-shadow:none; border:1px solid #ddd; }
  .rep-sintesi { break-before:auto; page-break-before:auto; }
}

/* ============ REPORT — cover / intro / back cover ============ */
.page-title { font-size:1.35rem; color:#1f2937; margin:0 0 16px; }

/* ============ COVER (navy + radar in filigrana + logo bianco) ============ */
.rep-cover{
  position:relative; overflow:hidden; border-radius:18px; border:0;
  min-height:82vh; padding:52px 46px;
  display:flex; flex-direction:column; justify-content:space-between; text-align:left;
  color:#fff; background:#1B2E47;
  background-image:
    radial-gradient(circle at 88% 8%,  rgba(87,160,53,.38), transparent 46%),
    radial-gradient(circle at 6% 96%,  rgba(87,160,53,.20), transparent 44%),
    linear-gradient(160deg,#22405F 0%,#1B2E47 55%,#16253A 100%);
  box-shadow:0 18px 40px rgba(27,46,71,.28);
}
/* filigrana radar */
.rep-cover .cover-ghost{
  position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:560px; height:auto; pointer-events:none;
  /* NIENTE opacity sul contenitore: smorzava allo stesso modo la griglia e le due
     serie di dati, e le figure diventavano indistinguibili. Ora ogni elemento ha
     la sua trasparenza, e le due serie possono restare piene. */
}
/* La griglia sta su fondo navy e deve restare una filigrana: e' lo sfondo, non
   il contenuto. Va tenuta bassa proprio perche' le due serie sopra sono piene. */
.rep-cover .cover-ghost polygon[stroke="var(--r-grid)"],
.rep-cover .cover-ghost line{ stroke:rgba(255,255,255,.20) !important; stroke-width:1.1 !important; }
/* LE DUE SERIE. Sul fondo scuro devono leggersi come due figure distinte, non
   come un'unica macchia: una bianca e una verde, entrambe piene, con il tratto
   spesso il doppio della griglia. E' l'unico punto del documento in cui il
   lettore vede che i dati sono DUE, sovrapposti. */
/* IL RADAR DI COPERTINA NEL REPORT.
   Il disegno e i colori sono gli stessi della pagina di esempio: cambia il
   foglio sotto. La pagina di esempio e' un riquadro largo e basso, il report
   e' un A4 stretto e alto, e con la stessa misura (560px, sporgente di 70) sul
   report il radar finiva mezzo fuori dal foglio e mezzo sotto il titolo.
   Qui si rimpicciolisce e si rientra, cosi' sull'A4 si vede intero e alla
   stessa distanza dal titolo che ha nell'esempio. Solo il report: `.report-doc`
   non c'e' sui fogli della demo. */
.report-doc .rep-cover .cover-ghost{ right:12px; width:370px; }

.cover-ghost .serie-tu{
  fill:#ffffff; fill-opacity:.10;
  stroke:#ffffff; stroke-opacity:1; stroke-width:2.6; stroke-linejoin:round;
}
.cover-ghost .serie-altri{
  fill:#7CC24E; fill-opacity:.22;
  stroke:#8FE05A; stroke-opacity:1; stroke-width:2.6; stroke-linejoin:round;
}
.rep-cover > *:not(.cover-ghost){ position:relative; z-index:2; }

/* top: logo + prodotto */
.rep-cover .cover-top, .rep-backcover .cover-top{ display:flex; align-items:center; gap:14px; }
.rep-cover .cover-logo, .rep-backcover .cover-logo{ height:34px; width:auto; display:block; }
.rep-cover .cover-prod, .rep-backcover .cover-prod{
  font-size:2.125rem; font-weight:800; letter-spacing:4px; color:#57A035;
  line-height:34px; padding-left:4px;
}
.rep-cover .cover-prod sup, .rep-backcover .cover-prod sup{
  font-size:.42em; letter-spacing:0; vertical-align:super; margin-left:1px; font-weight:700;
}

/* centro */
.rep-cover .cover-mid{ padding:26px 0; max-width:560px; }
.rep-cover .cover-eyebrow{
  font-size:.76rem; font-weight:600; letter-spacing:2.4px; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin:0 0 16px;
}
.rep-cover .cover-mid h1{
  font-size:3.5rem; line-height:1.06; margin:0 0 20px; font-weight:800;
  letter-spacing:-1px; color:#fff;
}
.rep-cover .cover-mid h1 em{ font-style:normal; color:#57A035; }
/* Titolo pieno di copertina: tre parole lunghe, quindi corpo piu' contenuto e
   spaziatura fra le lettere, che a questa dimensione tiene insieme le righe
   invece di farle sembrare tre titoli. Bicolore come prima: bianco quello che
   il documento FA, verde di marca quello di cui PARLA. */
.rep-cover .cover-mid h1.cover-titolo{
  /* max-width: la filigrana del radar entra da destra e "COMPETENZE" ci finiva
     sopra. Il titolo si tiene nella meta' sinistra, come il sottotitolo. */
  font-size:2.75rem; line-height:1.1; letter-spacing:.5px; margin:0 0 22px;
  max-width:420px; text-transform:uppercase; font-weight:800;
}
.rep-cover .cover-sub{ font-size:1.06rem; line-height:1.55; color:#c3d2e2; margin:0; max-width:420px; }

/* bottom: nome + meta */
.rep-cover .cover-rule{ width:56px; height:3px; background:#57A035; border-radius:2px; margin-bottom:16px; }
.rep-cover .cover-name{ font-size:1.65rem; font-weight:700; color:#fff; letter-spacing:-.3px; }
.rep-cover .cover-meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:.86rem; color:#93a7bd; margin-top:6px; }

@media (max-width:640px){
  .rep-cover{ padding:36px 26px; min-height:auto; }
  .rep-cover .cover-mid h1{ font-size:2.4rem; }
  .rep-cover .cover-mid h1.cover-titolo{ font-size:2rem; letter-spacing:.3px; }
  .rep-cover .cover-ghost{ width:400px; right:-140px; opacity:.32; }
}

/* INTRO */
.rep-intro { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rep-intro p { font-size:.98rem; line-height:1.65; color:#374151; margin:0 0 14px; }
.rep-intro h3 { font-size:1.05rem; color:#2E3A59; margin:20px 0 10px; }
.aree-list { list-style:none; margin:0; padding:0; }
.aree-list li { display:flex; gap:14px; align-items:baseline; padding:9px 0; border-bottom:1px solid #f1f3f5; }
.aree-list li:last-child { border-bottom:0; }
.aree-list .a-nome { flex:0 0 170px; font-weight:700; color:#1f2937; }
.aree-list .a-desc { flex:1; color:#374151; font-size:.92rem; line-height:1.5; }

/* RADAR page */
.rep-radar { background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:22px 24px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rep-radar .viz-card { border:0; box-shadow:none; padding:0; background:transparent; }

/* ============ STAMPA — un capitolo per pagina ============ */
@media print {
  .topbar, .sidebar, .noprint, .report-actions { display:none !important; }
  .main, .layout { padding:0 !important; margin:0 !important; display:block !important; }
  .report-wrap, .report-doc { max-width:100% !important; margin:0 !important; }
  /* NIENTE break-inside:avoid sul capitolo. Con quella regola un capitolo piu'
     alto della pagina non entra mai nello spazio che resta sotto l'intestazione
     e viene spinto tutto avanti: l'intestazione rimane sola su una pagina
     bianca. Succedeva su Safari per la sintesi, Gestione dei conflitti e
     Affidabilita'. Il capitolo ora scorre, e sono i BLOCCHI INTERI a non
     doversi spezzare (regole qui sotto). */
  .rep-chapter { break-inside:auto; page-break-inside:auto; box-shadow:none !important; border-radius:0 !important; }
  .critica, .passi-card, .piano-extra li, .aree-list li, .legenda-cat li,
  .viz-card, .fattore-head, .fattore-scores, .items-tab tr, .sintesi-tab tr {
    break-inside:avoid; page-break-inside:avoid;
  }
  /* Il badge di chiusura non deve mai aprire una pagina da solo. */
  .fattore-cta, .cta-badge { break-before:avoid; page-break-before:avoid; }
  .rep-intro, .rep-radar, .rep-sintesi-tab, .rep-fattore, .rep-backcover { break-before:page; page-break-before:always; }
  .rep-cover { break-before:auto; page-break-before:auto; min-height:94vh; }
  .rep-cover, .rep-backcover, .cat-badge, .cta-badge, .critica, .disclaimer, .bc-thank,
  .viz-legend, .viz-legend .dot, .scale-legend, .scale-legend .levels span, .cover-ghost,
  .mini-scale, .cap-band, .sintesi-tab, .sintesi-tab .cat-pill, .passi-card, .uso, .bc-legal {
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
  /* Legenda: sempre visibile in stampa (pallini con bordo come fallback se il fill viene ignorato) */
  .viz-legend { display:flex !important; visibility:visible !important; }
  /* .scale-legend impila didascalia + livelli: NON deve diventare flex-row */
  .scale-legend { display:block !important; visibility:visible !important; }
  .scale-legend .levels { display:flex !important; justify-content:center; }
  .viz-legend .dot { border:1px solid rgba(0,0,0,.35); }
}

/* ============ BACK COVER (stile front cover) ============ */
.rep-backcover{
  position:relative; overflow:hidden; border-radius:18px; border:0; color:#fff;
  padding:52px 46px; min-height:82vh;
  background:#1B2E47;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(87,160,53,.34), transparent 46%),
    radial-gradient(circle at 94% 92%, rgba(87,160,53,.18), transparent 44%),
    linear-gradient(200deg,#22405F 0%,#1B2E47 55%,#16253A 100%);
  box-shadow:0 18px 40px rgba(27,46,71,.28);
}
/* colonna che riempie la pagina: top / centro / fondo */
.rep-backcover .bc-inner{
  position:relative; z-index:2; min-height:calc(82vh - 104px);
  display:flex; flex-direction:column; justify-content:space-between;
}
.rep-backcover .bc-mid{ padding:18px 0; max-width:620px; }
.rep-backcover h2{ text-align:left; font-size:2.4rem; color:#fff; margin:0 0 14px; font-weight:800; letter-spacing:-.5px; }
.rep-backcover .cover-rule{ width:56px; height:3px; background:#57A035; border-radius:2px; margin-bottom:20px; }
.rep-backcover .bc-lead{ font-size:1.12rem; line-height:1.68; color:#dbe6f2; text-align:left; margin:0 0 24px; }
.rep-backcover .bc-lead strong{ color:#fff; }
/* box "ringrazia" con icona */
.rep-backcover .bc-thank{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(87,160,53,.16); border:1px solid rgba(87,160,53,.45); border-radius:14px;
  padding:20px 22px; margin:0;
}
.rep-backcover .bc-thank .bc-icon{ font-size:1.6rem; line-height:1.2; flex:0 0 auto; }
.rep-backcover .bc-thank strong{ display:block; color:#fff; font-size:1.02rem; margin-bottom:6px; }
.rep-backcover .bc-thank p{ margin:0; font-size:.96rem; line-height:1.62; color:#e6eef7; }
/* fondo pagina */
.rep-backcover .bc-bottom{ margin-top:28px; }
.rep-backcover .disclaimer{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:18px 20px; color:#d7e2ee; font-size:.85rem; line-height:1.65;
}
.rep-backcover .disclaimer strong{ color:#fff; }
.rep-backcover .bc-foot{ text-align:center; font-size:.78rem; color:#8ba1b8; margin:16px 0 0; }
/* Periodo della raccolta: sta sopra la riga di servizio, piu' piccolo del testo
   ma piu' leggibile del piede, perche' e' un dato del report e non un'etichetta. */
.rep-backcover .bc-raccolta{ text-align:center; font-size:.82rem; color:#a9bdd2; margin:14px 0 0; }

@media (max-width:640px){
  .rep-backcover{ padding:34px 24px; min-height:auto; }
  .rep-backcover .bc-inner{ min-height:auto; }
  .rep-backcover h2{ font-size:1.9rem; }
}

/* ============ SINTESI ORDINATA (piano d'azione) ============ */
.rep-sintesi-tab{ background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.sintesi-intro{ font-size:.95rem; line-height:1.6; color:#374151; margin:0 0 18px; }
.sintesi-tab{ width:100%; border-collapse:collapse; font-size:.92rem; }
.sintesi-tab thead th{
  text-align:left; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase; color:#5b6472;
  border-bottom:2px solid #eef0f4; padding:0 10px 8px;
}
.sintesi-tab thead th:nth-child(2), .sintesi-tab thead th:nth-child(3), .sintesi-tab thead th:nth-child(4){ text-align:center; }
.sintesi-tab tbody td{ padding:11px 10px; border-bottom:1px solid #f3f5f7; vertical-align:middle; }
.sintesi-tab tbody tr:last-child td{ border-bottom:0; }
.sintesi-tab .s-nome{ font-weight:700; color:#1f2937; }
.sintesi-tab .s-num{ text-align:center; color:#374151; font-variant-numeric:tabular-nums; }
.sintesi-tab .s-gap{ text-align:center; font-weight:800; font-variant-numeric:tabular-nums; color:#374151; }
.sintesi-tab .s-gap.gap-pos{ color:#b23c17; }
.sintesi-tab .s-gap.gap-neg{ color:#2f7d32; }
/* --- Report senza confronto: blocchi propri (migration 021/022) ------------ */
/* Numero di posizione nella classifica: la pagina 2 ha appena spiegato che
   l'ordine e' l'informazione, quindi va visto prima del nome. */
.sintesi-tab .s-pos{
  text-align:center; width:34px; font-weight:800; color:#9aa3b0;
  font-variant-numeric:tabular-nums;
}
/* Didascalia sotto il radar. */
.viz-nota{
  margin:14px 0 0; padding-top:12px; border-top:1px solid #f0f2f5;
  font-size:.82rem; line-height:1.55; color:#6b7280;
}
/* I quattro comportamenti con il punteggio che l'utente si e' dato. */
.solo-items{ margin:22px 0 4px; }
.solo-items h3{ font-size:.95rem; color:#2E3A59; margin:0 0 10px; }
.items-tab{ width:100%; border-collapse:collapse; font-size:.88rem; }
.items-tab td{ padding:9px 10px; border-bottom:1px solid #f3f5f7; vertical-align:middle; }
.items-tab tr:last-child td{ border-bottom:0; }
.items-tab .i-testo{ color:#374151; line-height:1.45; }
.items-tab .i-val{
  text-align:right; white-space:nowrap; color:#6b7280; font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.items-tab .i-val b{ color:#1f2937; font-size:.95rem; margin-right:4px; }
/* Quattro punteggi pieni: nessun coaching, una riflessione. */
.solo-pieno{ margin:0; font-size:.9rem; line-height:1.65; color:#4b5563; }

/* Pagina "Il passo che manca". Nome per esteso: `.rep-passi` (il piano d'azione)
   esiste gia' e differirebbe di una sola lettera. */
.rep-passo-manca{ background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.rep-passo-manca h3{ font-size:1rem; color:#2E3A59; margin:22px 0 10px; }
.rep-passo-manca p{ line-height:1.7; color:#374151; }
.passo-nota{
  background:#eef4fd; border:1px solid #bcd2f0; border-left:4px solid #2563eb;
  border-radius:0 10px 10px 0; padding:14px 18px; margin:22px 0;
}
.passo-nota h3{ margin:0 0 8px; color:#1e3f73; }
.passo-nota p{ margin:0; color:#1e3f73; font-size:.92rem; }
.passo-tre{ margin:0; padding-left:20px; }
.passo-tre li{ margin:0 0 12px; line-height:1.65; color:#374151; }
.passo-chiusa{
  margin-top:26px; padding-top:16px; border-top:1px solid #eef0f4;
  font-size:.95rem; color:#4b5563;
}

.cat-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.76rem; font-weight:700; white-space:nowrap; }
.cat-pill.cat-cieco{ background:#fdece4; color:#b23c17; }
.cat-pill.cat-nascosta{ background:#e6f0fb; color:#1c5a9e; }
.cat-pill.cat-forza{ background:#e7f5e6; color:#2f7d32; }
.cat-pill.cat-crescita{ background:#fdf3d9; color:#8a6414; }
.cat-pill.cat-allineato{ background:#eef0f4; color:#374151; }
.sintesi-nota{ font-size:.83rem; color:#374151; margin-top:14px; }

/* Intro — legenda delle 5 categorie */
.leg-intro{ font-size:.95rem; line-height:1.6; color:#374151; margin:0 0 14px; }
.legenda-cat{ list-style:none; margin:0; padding:0; }
.legenda-cat li{ display:flex; gap:14px; align-items:flex-start; padding:9px 0; border-bottom:1px solid #f1f3f5; }
.legenda-cat li:last-child{ border-bottom:0; }
.legenda-cat .cat-pill{ flex:0 0 auto; min-width:150px; text-align:center; }
.legenda-cat .l-desc{ flex:1; font-size:.9rem; line-height:1.55; color:#374151; }
.leg-nota{ font-size:.83rem; color:#374151; margin-top:12px; }

/* ============ Bande colorate per categoria (capitoli) ============ */
.rep-fattore{ border-top:5px solid #cbd5e1; }
.rep-fattore.band-punto_cieco{ border-top-color:#e07a4f; }
.rep-fattore.band-forza_nascosta{ border-top-color:#2D6FB8; }
.rep-fattore.band-punto_forza{ border-top-color:#57A035; }
.rep-fattore.band-area_crescita{ border-top-color:#d9a441; }
.rep-fattore.band-allineato{ border-top-color:#5b6472; }

/* ============ Piè di pagina (numerazione fascicolo) ============ */
.pg-head{
  display:none; margin:0 0 10px; padding:0 2px 8px; border-bottom:1px solid #e3e7ec;
  font-size:.74rem; color:#5b6472; justify-content:space-between; align-items:center;
}

/* ============ I TUOI 3 PASSI ============ */
.rep-passi{ background:#fff; border:1px solid #eef0f4; border-radius:14px; padding:24px 26px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.passi-intro{ font-size:.95rem; line-height:1.6; color:#374151; margin:0 0 20px; }
.passi-card{
  border:1px solid #eef0f4; border-left:5px solid #cbd5e1; border-radius:12px;
  padding:16px 18px; margin-bottom:14px; background:#fcfdfe;
}
.passi-card.band-punto_cieco{ border-left-color:#e07a4f; }
.passi-card.band-forza_nascosta{ border-left-color:#2D6FB8; }
.passi-card.band-punto_forza{ border-left-color:#57A035; }
.passi-card.band-area_crescita{ border-left-color:#d9a441; }
.passi-card.band-allineato{ border-left-color:#5b6472; }
.passi-card .p-head{ display:flex; gap:14px; align-items:flex-start; }
.passi-card .p-num{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#1B2E47; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem;
}
.passi-card h3{ margin:0 0 6px; font-size:1.1rem; color:#1f2937; }
.passi-card .p-scores{ font-size:.82rem; color:#5b6472; margin-left:10px; font-variant-numeric:tabular-nums; }
.passi-card .p-azione{ font-size:.92rem; line-height:1.6; color:#374151; margin:12px 0 0; }
.passi-nota{ font-size:.83rem; color:#374151; margin-top:14px; }

/* ============ STAMPA: footer visibile + salto pagina 3 passi ============ */
@media print{
  .pg-head{ display:flex !important; }
  .rep-passi, .rep-passo-manca{ break-before:page; page-break-before:always; }
  .rep-fattore, .passi-card, .rep-passi, .rep-passo-manca, .passo-nota, .items-tab{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* ============ STAMPA: cover e back cover riempiono la pagina ============ */
@media print{
  @page { margin: 12mm; }
  .rep-cover, .rep-backcover{
    min-height: 252mm;                 /* vedi nota sull'altezza piu' sotto */
    border-radius:0 !important; box-shadow:none !important;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .rep-backcover .bc-inner{ min-height: 220mm; }
  .rep-backcover .bc-mid{ padding: 10mm 0; }
}

/* Piano d'azione — sezione opzionale "Se vuoi spingerti oltre" */
.piano-extra{ margin-top:22px; padding-top:18px; border-top:1px solid #eef0f4; }
.piano-extra h3{ font-size:1rem; color:#2E3A59; margin:0 0 8px; }
.piano-extra p{ font-size:.9rem; line-height:1.6; color:#374151; margin:0 0 12px; }
.piano-extra ul{ list-style:none; margin:0; padding:0; }
.piano-extra li{ padding:8px 12px; background:#f7f9fa; border-left:3px solid #5b6472; border-radius:6px;
  margin-bottom:8px; font-size:.92rem; color:#374151; }
.piano-extra .pe-scores{ font-size:.82rem; color:#5b6472; margin-left:10px; font-variant-numeric:tabular-nums; }

/* ============ STAMPA: cover piene + intro compattata in 1 pagina ============ */
@media print{
  /* ALTEZZA. 262mm erano l'area utile teorica (297 - 24 di margini), ma il
     browser stampa anche la sua intestazione e il suo pie' di pagina DENTRO
     quel margine, e quando non ci stanno lo allarga. Su Safari la copertina
     sforava di pochi millimetri e ne nasceva una pagina in piu' con una
     striscia nera.

     252mm sono un compromesso deliberato, perche' l'altezza utile dipende da
     un'impostazione di CHI STAMPA e noi non la conosciamo:
       intestazioni disattivate → utile ~273mm, restano ~21mm di bianco sotto
       intestazioni attive      → utile ~253mm, ci sta per un pelo
     Meglio un margine bianco in fondo, che sembra voluto, di una pagina in
     piu' con una striscia nera, che sembra un guasto. Per una copertina che
     riempie la pagina sempre e comunque servirebbe generare il PDF sul
     server (wkhtmltopdf, che sull'hosting c'e'). */
  .rep-cover{ min-height:252mm; }
  .rep-backcover{ min-height:240mm; }
  .rep-backcover .bc-inner{ min-height:220mm; }

  /* COLORI. Safari, esportando in PDF, perde la trasparenza dei gradienti
     radiali: `rgba(87,160,53,.38)` diventa verde pieno e `transparent`
     diventa un bordo netto. Risultato: un cerchio verde opaco che copriva
     meta' copertina, e la parola "relazionale" (verde su verde) spariva.
     In stampa si usa il solo fondo pieno: nessuna trasparenza da perdere. */
  .rep-cover, .rep-backcover{
    background-image:none !important;
    background-color:#1B2E47 !important;
  }
  /* Sul fondo pieno la parola in verde deve staccare: il verde del marchio su
     navy e' leggibile, ma in stampa perde un poco di brillantezza. */
  .rep-cover .cover-mid h1 em{ color:#7CC24E !important; }

  /* La filigrana del radar ha lo stesso problema: `rgba(255,255,255,.45)`
     diventa bianco pieno e le linee attraversano il testo del disclaimer.
     In stampa si usa un colore SOLIDO appena piu' chiaro del fondo, che non
     ha trasparenza da perdere e resta una filigrana. */
  .rep-cover .cover-ghost{ opacity:1 !important; }
  /* Solo la GRIGLIA: prendere tutti i polygon spegnerebbe anche le due serie,
     che sono l'unica cosa che rende leggibile il radar. */
  .rep-cover .cover-ghost polygon[stroke="var(--r-grid)"], .rep-cover .cover-ghost line{
    stroke:#2C4667 !important; stroke-width:1 !important; fill:none !important;
  }



  /* INTRO: compatta per stare in una sola pagina */
  .rep-intro{ padding:18px 22px; }
  .rep-intro .page-title{ font-size:1.2rem; margin:0 0 10px; }
  .rep-intro p{ font-size:.86rem; line-height:1.5; margin:0 0 9px; }
  .rep-intro h3{ font-size:.95rem; margin:14px 0 7px; }
  .rep-intro .aree-list li{ padding:4px 0; }
  .rep-intro .aree-list .a-nome{ flex-basis:150px; font-size:.86rem; }
  .rep-intro .aree-list .a-desc{ font-size:.82rem; line-height:1.4; }
  .rep-intro .leg-intro{ font-size:.84rem; line-height:1.45; margin-bottom:8px; }
  .rep-intro .legenda-cat li{ padding:5px 0; gap:10px; }
  .rep-intro .legenda-cat .cat-pill{ min-width:132px; font-size:.7rem; padding:2px 8px; }
  .rep-intro .legenda-cat .l-desc{ font-size:.8rem; line-height:1.42; }
  .rep-intro .leg-nota{ font-size:.78rem; margin-top:8px; }
  .rep-intro .pg-head{ margin-bottom:8px; padding-bottom:6px; }
}

/* ============ STAMPA: footer ancorato a fondo pagina + numero leggibile ============ */
@media print{
  /* intestazione di pagina: in cima, sopra la banda colorata della sezione */
  .pg-head{ display:flex !important; break-after:avoid; page-break-after:avoid; }
  .pg-head span:last-child{ font-weight:700; color:#2E3A59; font-size:.84rem; }
  .pg-head span:last-child::before{ content:"pag. "; font-weight:400; color:#374151; }
  /* l'intestazione apre la pagina: il salto va prima di lei, non della sezione */
  .pg-head{ break-before:page; page-break-before:always; }
  .rep-intro, .rep-radar, .rep-sintesi-tab, .rep-fattore, .rep-passi{
    break-before:auto !important; page-break-before:auto !important;
  }
}

/* Raccordo tra livello strategico (scheda) e livello operativo (comportamenti) */
.critiche .crit-sub{ font-size:.86rem; color:#5b6472; margin:-4px 0 12px; font-style:italic; }

/* ============ Pagina unificata: radar + tabella risultati ============ */
.rep-radar.rep-sintesi-tab .viz-card{ margin-bottom:6px; }
.rep-radar.rep-sintesi-tab svg{ max-width:440px !important; }
.sub-title{ font-size:1.1rem; color:#2E3A59; margin:14px 0 6px; padding-top:14px; border-top:1px solid #eef0f4; }
.rep-radar.rep-sintesi-tab .sintesi-intro{ font-size:.88rem; margin:0 0 10px; }
.rep-radar.rep-sintesi-tab .sintesi-tab{ font-size:.88rem; }
.rep-radar.rep-sintesi-tab .sintesi-tab tbody td{ padding:8px 10px; }
@media print{
  .rep-radar.rep-sintesi-tab .report-lead{ font-size:.9rem; padding:12px 14px; margin-bottom:10px; }
  /* Il radar e' la figura che il cliente guarda per prima: a 320px i nomi
     delle competenze erano al limite del leggibile su carta. 350px e' il
     massimo che la pagina della sintesi regge: i ~7mm che il grafico si
     prende in piu' vengono restituiti dalle regole qui sotto, altrimenti
     tornerebbe la coda di pagina che abbiamo appena chiuso.
     Le etichette crescono anche per conto loro: dentro il disegno sono
     passate da 10,5 a 12,5, quindi guadagnano due volte. */
  .rep-radar.rep-sintesi-tab svg{ max-width:350px !important; }
  .rep-radar.rep-sintesi-tab .viz-legend{ margin-top:4px; font-size:.8rem; }
  .rep-radar.rep-sintesi-tab .scale-legend{ margin-top:6px; }
  .rep-radar.rep-sintesi-tab .sub-title{ margin:10px 0 4px; padding-top:10px; }
  .rep-radar.rep-sintesi-tab .sintesi-tab{ font-size:.82rem; }
  .rep-radar.rep-sintesi-tab .sintesi-tab tbody td{ padding:6px 8px; }
}

/* Domande critiche: risposte in chiaro (etichette + distribuzione) */
.q-risposte{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:2px 0 10px; font-size:.88rem; color:#374151; }
.q-risposte b{ color:#5b6472; font-weight:600; }
.q-risposte .r-tu{ white-space:nowrap; }
.q-risposte .r-divisi{ font-size:.8rem; color:#b23c17; font-style:italic; }
.q-risposte .r-divisi::before{ content:"⚠ "; }

/* Separatore tra "Tu" e "Gli altri" nelle risposte */
.q-risposte .r-sep{ color:#b6bcc4; }

/* ============ STAMPA: una scheda fattore = una pagina ============ */
@media print{
  .rep-fattore{ padding:16px 20px 14px; }
  .rep-fattore .fattore-head h2{ font-size:1.25rem; }
  .rep-fattore .fattore-scores{ margin-bottom:10px; }
  .rep-fattore .restituzione{ font-size:.85rem; line-height:1.5; }
  .rep-fattore .restituzione br + br{ line-height:.5; }
  .rep-fattore .critiche{ margin-top:10px; }
  .rep-fattore .critiche h3{ font-size:.95rem; margin:0 0 2px; }
  .rep-fattore .crit-sub{ font-size:.78rem; margin:0 0 8px; }
  .rep-fattore .critica{ padding:8px 12px; margin-bottom:8px; }
  .rep-fattore .comportamento{ font-size:.88rem; margin:0 0 3px; }
  .rep-fattore .q-risposte{ font-size:.8rem; margin:0 0 6px; gap:4px 12px; }
  .rep-fattore .coaching{ font-size:.8rem; line-height:1.45; }
  .rep-fattore .fattore-cta{ margin:8px 0 0; }
  .rep-fattore .cta-badge{ font-size:.78rem; padding:3px 10px; }
  /* la mini-scala accanto ai punteggi si stringe */
  .rep-fattore .mini svg{ max-width:280px; }
}

/* Intro — nota "non si valuta la persona" */
.rep-intro .intro-nota{
  background:rgba(87,160,53,.08); border:1px solid rgba(87,160,53,.28); border-left:4px solid #57A035;
  border-radius:0 10px 10px 0; padding:14px 18px; margin:0 0 16px; font-size:.93rem; line-height:1.6; color:#374151;
}
@media print{ .rep-intro .intro-nota{ font-size:.84rem; padding:10px 14px; margin-bottom:10px; } }

/* STAMPA: intro con la nota "non si valuta la persona" deve stare in 1 pagina */
@media print{
  .rep-intro{ padding:14px 20px; }
  .rep-intro .page-title{ font-size:1.12rem; margin:0 0 8px; }
  .rep-intro .intro-nota{ font-size:.79rem; line-height:1.45; padding:8px 12px; margin-bottom:8px; }
  .rep-intro p{ font-size:.81rem; line-height:1.42; margin:0 0 7px; }
  .rep-intro h3{ font-size:.9rem; margin:10px 0 5px; }
  .rep-intro .aree-list li{ padding:3px 0; }
  .rep-intro .aree-list .a-nome{ font-size:.82rem; flex-basis:145px; }
  .rep-intro .aree-list .a-desc{ font-size:.78rem; line-height:1.35; }
  .rep-intro .leg-intro{ font-size:.79rem; line-height:1.4; margin-bottom:6px; }
  .rep-intro .legenda-cat li{ padding:4px 0; gap:9px; }
  .rep-intro .legenda-cat .cat-pill{ min-width:124px; font-size:.66rem; padding:2px 7px; }
  .rep-intro .legenda-cat .l-desc{ font-size:.76rem; line-height:1.36; }
  .rep-intro .leg-nota{ font-size:.74rem; margin-top:6px; }
}

/* Piano d'azione — elenco dei comportamenti su cui agire */
.passi-card .p-comportamenti{ list-style:none; margin:6px 0 0; padding:0; }
.passi-card .p-comportamenti li{
  position:relative; padding:3px 0 3px 16px; font-size:.92rem; line-height:1.5; color:#374151;
}
.passi-card .p-comportamenti li::before{
  content:"›"; position:absolute; left:2px; top:3px; color:#8b95a3; font-weight:700;
}

/* ============ STAMPA: formato carta e recupero degli sfori ============ */
@media print{
  /* Il layout è costruito in millimetri su A4 (min-height in mm più sopra).
     Senza questa riga Chrome stampa in Letter (279mm invece di 297) e ogni
     capitolo sfora, mandando il badge di chiusura su una pagina vuota. */
  @page { size: A4; margin: 12mm; }

  /* Ascolto ed Empatia sforavano di una riga: le domande contestualizzate sono
     più lunghe delle vecchie e la 2.1 va a capo. Recupero ~9mm senza toccare
     i corpi del testo, solo interlinee e spaziature. */
  .rep-fattore .restituzione{ line-height:1.45; }
  .rep-fattore .critiche{ margin-top:8px; }
  .rep-fattore .crit-sub{ margin:0 0 6px; }
  .rep-fattore .critica{ padding:7px 12px; margin-bottom:7px; }
  .rep-fattore .q-risposte{ margin:0 0 5px; }
  .rep-fattore .coaching{ line-height:1.4; }
  .rep-fattore .fattore-cta{ margin:6px 0 0; }

  /* Il piano d'azione non aveva regole di stampa proprie: da quando riporta
     tutti i comportamenti di ogni competenza, e non solo il primo, non entra
     più in una pagina. */
  .rep-passi{ padding:16px 20px; }
  .rep-passi .page-title{ font-size:1.2rem; margin:0 0 8px; }
  .passi-intro{ font-size:.85rem; line-height:1.45; margin:0 0 12px; }
  .passi-card{ padding:11px 14px; margin-bottom:10px; break-inside:avoid; page-break-inside:avoid; }
  .passi-card .p-num{ width:28px; height:28px; font-size:.9rem; }
  .passi-card .p-head{ gap:11px; }
  .passi-card h3{ font-size:1rem; margin:0 0 4px; }
  .passi-card .p-comportamenti{ margin:4px 0 0; }
  .passi-card .p-comportamenti li{ padding:2px 0 2px 16px; font-size:.85rem; line-height:1.42; }
  .piano-extra{ margin-top:14px; padding-top:12px; }
  .piano-extra p{ font-size:.83rem; line-height:1.45; margin:0 0 9px; }
  .piano-extra li{ padding:6px 12px; margin-bottom:6px; font-size:.85rem; }
  .passi-nota{ font-size:.78rem; margin-top:10px; }
}

/* Alternativa alla chiusura: inviti e giorni ancora disponibili, dentro il box "genera report". */
.gen-report .gen-scelta{
  background:rgba(255,255,255,.65); border:1px dashed #a7c79a; border-radius:10px;
  padding:10px 14px; margin:0 0 12px;
}
.gen-report .gen-scelta p{ margin:0; font-size:.92rem; line-height:1.55; }

/* ============ I MIEI ACQUISTI + recesso online (art. 54-bis) ============ */
.ord-list{ display:flex; flex-direction:column; gap:12px; }
.ord-row{
  display:flex; align-items:center; gap:18px; background:#fff; border:1px solid #eef0f4;
  border-radius:12px; padding:16px 20px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ord-row.is-recesso{ background:#fbfbfc; border-color:#e5e7eb; }
.ord-main{ flex:1 1 auto; min-width:0; }
.ord-titolo{ font-weight:700; color:#1f2937; margin-bottom:4px; }
.ord-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.88rem; color:#5b6472; }
.ord-meta b{ color:#374151; font-weight:600; }
/* I dati dell'ordine incolonnati come nell'elenco dei test: stessa grammatica,
   stesso movimento dell'occhio fra le due pagine dell'area. */
.ord-dati{ display:grid; grid-template-columns:repeat(3, minmax(120px, 200px)); gap:10px 26px; margin-top:8px; }
.ord-dati > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ord-dati .k{ font-size:.66rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.ord-dati .v{ font-size:.95rem; font-weight:700; color:#111827; }
.ord-nota, .ord-stato-recesso{ margin:8px 0 0; font-size:.85rem; line-height:1.5; color:#6b7280; }
.ord-stato-recesso{ color:#8a5a00; }
.ord-azioni{ flex:0 0 auto; text-align:right; }
.ord-azioni-hint{ display:block; margin-top:5px; font-size:.76rem; color:#8b95a3; }

/* Il pulsante è deliberatamente sobrio: è un diritto, non una call to action. */
.btn-recesso{
  border:1px solid #cbd5e1; background:#fff; color:#5b6472; border-radius:8px;
  padding:9px 16px; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.btn-recesso:hover{ background:#fef6f6; border-color:#e0a3a3; color:#b23c17; }
/* L'asterisco rimanda alla nota in fondo alla pagina: sta in alto e non
   ingrossa il pulsante, come una chiamata di nota tipografica. */
.btn-nota{ font-size:.8em; vertical-align:super; line-height:0; margin-left:1px; }

/* NOTA LEGALE — un riquadro a tutta larghezza, non un pie' di pagina.
   Era un paragrafo grigio buttato sotto le righe, con l'aria della scritta in
   piccolo che nessuno legge: e' invece la spiegazione di un diritto, e chi la
   cerca la cerca proprio nel momento in cui sta per rinunciare a qualcosa.
   Titolo, fondo chiaro e larghezza piena; il testo resta entro 78 caratteri per
   riga perche' oltre si perde il segno tornando a capo. */
.ord-box-legale{
  margin:26px 0 0; padding:20px 24px; background:#F8F9FB;
  border:1px solid #E9ECF3; border-left:4px solid var(--howar-green, #57A035);
  border-radius:12px;
}
.ord-box-titolo{ margin:0 0 10px; font-size:1rem; color:#2E3A59; font-weight:700; }
.ord-box-legale p{ margin:0; font-size:.86rem; line-height:1.7; color:#5b6472; max-width:78ch; }
.ord-box-legale strong{ color:#374151; }
.ord-box-legale a{ color:var(--howar-green, #57A035); font-weight:600; }

/* Sotto i 700px le tre colonne dei dati diventano due e la riga si impila. */
@media (max-width:700px){
  .ord-row{ flex-direction:column; align-items:stretch; }
  .ord-dati{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ord-azioni{ text-align:left; }
}

.rec-modal{ max-width:520px; }
.rec-modal h3{ margin:0 0 8px; color:#1B2E47; }
.rec-intro{ margin:0 0 16px; font-size:.92rem; line-height:1.6; color:#5b6472; }
.rec-form label{ display:block; margin:0 0 12px; font-size:.85rem; font-weight:600; color:#374151; }
.rec-form input[type=text], .rec-form input[type=email]{
  display:block; width:100%; margin-top:5px; padding:10px 12px; font-size:.95rem; font-weight:400;
  border:1px solid #d5dae1; border-radius:8px; box-sizing:border-box;
}
/* Avviso sulle risposte che si stanno per perdere: piu' forte del riquadro
   sottostante, perche' e' l'unica cosa che riguarda il lavoro di altri. */
.rec-perdita{
  background:#fdecec; border:1px solid #e8b4b4; border-left:4px solid #c0392b;
  border-radius:0 8px 8px 0; padding:12px 14px; margin:4px 0 12px;
}
.rec-perdita p{ margin:0; font-size:.88rem; line-height:1.55; color:#8a2b1e; }

/* Alternativa al recesso dentro il modal: e' un'offerta, non un allarme, e
   deve leggersi come la via d'uscita positiva. Sta sopra i due riquadri di
   avvertimento, prima che l'utente arrivi alla conferma. */
.rec-alternativa{
  background:#f2f9f2; border:1px solid #cbe5c8; border-left:4px solid #2f7d32;
  border-radius:0 8px 8px 0; padding:14px 16px; margin:4px 0 14px;
}
.rec-alternativa p{ margin:0 0 10px; font-size:.88rem; line-height:1.55; color:#245c27; }
.btn-genera-ora{
  border:1px solid #2f7d32; background:#2f7d32; color:#fff; border-radius:8px;
  padding:10px 18px; font-size:.9rem; font-weight:700; cursor:pointer;
}
.btn-genera-ora:hover{ background:#256427; border-color:#256427; }
.rec-alt-nota{ margin:10px 0 0 !important; font-size:.78rem !important; color:#4a6b4c !important; }
.rec-alt-nota a{ color:#245c27; }
.rec-oppure{
  margin:0 0 14px; text-align:center; font-size:.82rem; color:#9aa3b0;
  text-transform:lowercase;
}

/* Sotto la soglia non c'e' niente da perdere ancora: il tono e' un invito ad
   aspettare, non un allarme, e il colore lo dice prima delle parole. */
.rec-attesa{
  background:#eef4fd; border:1px solid #bcd2f0; border-left:4px solid #2563eb;
  border-radius:0 8px 8px 0; padding:12px 14px; margin:4px 0 12px;
}
.rec-attesa p{ margin:0; font-size:.88rem; line-height:1.55; color:#1e3f73; }

.rec-avviso{
  background:#fff8f5; border:1px solid #f0c9b8; border-left:4px solid #e07a4f;
  border-radius:0 8px 8px 0; padding:12px 14px; margin:4px 0 18px;
}
.rec-avviso p{ margin:0 0 8px; font-size:.85rem; line-height:1.55; color:#7a3f22; }
.rec-avviso p:last-child{ margin-bottom:0; }
.rec-azioni{ display:flex; gap:10px; justify-content:flex-end; }
.btn-annulla{
  border:1px solid #cbd5e1; background:#fff; color:#5b6472; border-radius:8px;
  padding:11px 20px; font-size:.92rem; font-weight:600; cursor:pointer;
}
.btn-conferma-recesso{
  border:none; background:#c0392b; color:#fff; border-radius:8px;
  padding:11px 22px; font-size:.92rem; font-weight:700; cursor:pointer;
}
.btn-conferma-recesso:hover{ background:#a93226; }
@media (max-width:620px){
  .ord-row{ flex-direction:column; align-items:stretch; }
  .ord-azioni{ text-align:left; }
  .rec-azioni{ flex-direction:column-reverse; }
}

/* =====================================================================
   TABELLA DI SINTESI SUL TELEFONO
   =====================================================================
   Cinque colonne, e l'ultima e' un badge lungo ("Ti ci riconosci
   abbastanza") che non va a capo: sotto i 620px la tabella sbordava di
   lato e il badge finiva fuori dallo schermo.

   Qui ogni riga diventa un blocchetto: nome sopra, i numeri in fila
   sotto con il nome della colonna davanti (l'intestazione sparisce,
   quindi senza quell'etichetta i numeri non si capirebbero piu'), e il
   badge da solo in fondo, libero di andare a capo.

   `screen and`: senza, la regola scatterebbe anche in stampa quando la
   pagina e' stretta, e il fascicolo stampato perderebbe la tabella.

   Vale per tutte e tre le tabelle `.sintesi-tab`: le due del report
   (con e senza confronto) e quella della pagina di esempio, che usa
   `t-*` invece di `s-*` per le stesse colonne. */
@media screen and (max-width:620px){
  .sintesi-tab, .sintesi-tab tbody{ display:block; }
  .sintesi-tab thead{ display:none; }

  .sintesi-tab tr{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px;
    padding:12px 0; border-bottom:1px solid #f0f2f5;
  }
  .sintesi-tab tbody tr:last-child{ border-bottom:0; }
  .sintesi-tab tbody td{ display:block; padding:0; border:0; }

  /* Il nome prende tutta la prima riga: cosi' i numeri vanno a capo
     insieme, invece di lasciare il primo appeso accanto al titolo. */
  .sintesi-tab .s-nome, .sintesi-tab .t-nome{
    flex:1 0 100%; font-weight:700; font-size:1rem; color:#2E3A59;
  }
  /* Tabella senza confronto: davanti al nome c'e' il numero di posizione.
     Li' il nome NON prende tutta la riga, altrimenti il numero resterebbe
     da solo sopra; stanno insieme, e accanto ci sta anche il punteggio. */
  .sintesi-tab .s-pos{ flex:0 0 auto; font-weight:800; color:#8a96a3; }
  .sintesi-tab .s-pos + .s-nome{ flex:0 1 auto; min-width:0; }

  /* Numeri in fila, ciascuno con la sua etichetta di colonna davanti. */
  .sintesi-tab .s-num, .sintesi-tab .t-num,
  .sintesi-tab .s-gap, .sintesi-tab .t-gap{
    flex:0 0 auto; text-align:left; font-weight:700; font-variant-numeric:tabular-nums;
  }
  .sintesi-tab td[data-lab]::before{
    content:attr(data-lab); display:block;
    font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    color:#8a96a3; margin-bottom:1px;
  }
  /* Lo scarto tiene i suoi colori anche qui: sono l'unico segno di
     direzione rimasto una volta tolta l'intestazione. */
  .sintesi-tab .t-gap.up{ color:#b23c17; }
  .sintesi-tab .t-gap.dn{ color:#2f7d32; }

  /* Il badge: riga sua, e puo' andare a capo. */
  .sintesi-tab tbody td:last-child{ flex:1 0 100%; margin-top:2px; }
  .sintesi-tab .cat-pill{ white-space:normal; display:inline-block; line-height:1.35; }
}

/* Avviso sul profilo: i dati sono condivisi con la piattaforma professionale. */
.prof-avviso{
  margin:0 0 16px; padding:11px 14px; font-size:.85rem; line-height:1.55;
  color:#1e3f73; background:#eef4fd; border:1px solid #bcd2f0;
  border-left:4px solid #2563eb; border-radius:0 8px 8px 0;
}

/* Card di una campagna scaduta: non e' piu' cliccabile, quindi non deve nemmeno
   sembrarlo. Nessun cursore a mano, nessun sollevamento al passaggio del mouse. */
.tcard.is-spenta{ cursor:default; opacity:.85; }
.tcard.is-spenta:hover{ transform:none; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.tcard-spenta{
  margin:14px 0 0; padding-top:12px; border-top:1px solid #f0f2f5;
  font-size:.85rem; line-height:1.6; color:#6b7280;
}

/* =====================================================================
   STAMPA · COMPATTAZIONE FINALE — QUESTO BLOCCO DEVE RESTARE L'ULTIMO
   =====================================================================
   Nel foglio ci sono TRE serie di regole di stampa per `.rep-fattore`,
   scritte in momenti diversi, che dichiarano le stesse proprieta'. A
   parita' di specificita' vince l'ultima scritta: mettere valori nuovi
   piu' in alto non serve a niente, vengono riscritti piu' sotto. E' gia'
   successo, e il sintomo era ingannevole (sembrava che il browser non
   ricaricasse il foglio).

   Qui stanno i valori DEFINITIVI. Se servono altre correzioni di stampa,
   vanno aggiunte QUI, non altrove.

   A cosa servono: cinque capitoli sforavano di poco e trascinavano una
   pagina quasi vuota. La sintesi e il piano d'azione di 3-4mm, Ascolto
   del solo badge di chiusura, Empatia e Gestione dei conflitti di un
   blocco comportamento (misurati ~10mm mancanti). Nessun corpo del testo
   cambia: si stringono interlinee e spazi fra i blocchi.
   ===================================================================== */
@media print{

  /* Il margine sotto il capitolo: 30px, quasi 8mm che in stampa non servono,
     perche' ogni capitolo apre comunque una pagina nuova. */
  .rep-chapter{ margin-bottom:0 !important; }

  /* La pagina di chiusura aveva DUE altezze minime annidate: 252mm sulla
     sezione e 220mm sul riquadro interno, piu' le imbottiture. Sommate
     possono superare l'altezza utile, e un blocco che non entra nella sua
     pagina e' proprio il caso in cui Safari si comporta in modo imprevisto.
     Il vincolo interno non serve: l'altezza la impone gia' la sezione. */
  .rep-backcover .bc-inner{ min-height:auto !important; }


  /* Scheda competenza. */
  .rep-fattore .fattore-head h2{ font-size:1.18rem; }
  .rep-fattore .fattore-scores{ margin-bottom:8px; }
  .rep-fattore .restituzione{ line-height:1.34; }
  /* Lo stacco fra "Il suo valore", "Il risultato del test" e "Come
     utilizzarlo": sono paragrafi separati da due <br>, e l'interlinea del
     secondo e' tutta l'aria che c'e' fra un blocco e l'altro. Da .35 a .18:
     restano distinti a colpo d'occhio, ma smettono di sprecare mezza riga
     ciascuno. Sono ~5mm su una scheda con tre paragrafi. */
  .rep-fattore .restituzione br + br{ line-height:.18; }
  .rep-fattore .critiche{ margin-top:6px; }
  .rep-fattore .crit-sub{ margin:0 0 5px; line-height:1.3; }
  .rep-fattore .critica{ padding:5px 10px; margin-bottom:5px; }
  .rep-fattore .comportamento{ margin:0 0 2px; }
  .rep-fattore .q-risposte{ margin:0 0 4px; }
  .rep-fattore .coaching{ line-height:1.32; margin-top:4px; }

  /* Sintesi: radar + tabella. Sforava del solo bordo inferiore della scheda,
     3-4mm: bastano i fianchi della scheda e un filo di tabella. A questi si
     aggiungono i ~7mm che il radar ingrandito si prende: vengono da riquadro
     introduttivo, legende e righe della tabella, senza toccare i corpi. */
  .rep-radar.rep-sintesi-tab .report-lead{ font-size:.88rem; padding:10px 12px; margin-bottom:8px; }
  .rep-radar.rep-sintesi-tab .viz-legend{ margin-top:2px; }
  .rep-radar.rep-sintesi-tab .scale-legend{ margin-top:4px; }
  .rep-radar.rep-sintesi-tab .sintesi-intro{ margin:0 0 6px; }
  .rep-radar{ padding:16px 18px 14px; }
  .rep-radar.rep-sintesi-tab .viz-card{ margin-bottom:0; }
  .rep-radar.rep-sintesi-tab .viz-nota{ margin-top:6px; padding-top:6px; }
  .rep-radar.rep-sintesi-tab .sintesi-tab tbody td{ padding:3px 8px; }
  /* Titolo "I tuoi risultati" + spiegazione + tabella: un blocco solo.
     Nei report normali non cambia niente, perche' la sintesi sta in una pagina
     e non c'e' nessun salto da spostare. Sui profili estremi, dove la lettura
     sistemica aggiunge ~35mm e la sintesi diventa due pagine, evita che il
     titolo resti su una pagina e i numeri comincino sull'altra senza dire cosa
     sono. */
  .gruppo-tabella{ break-inside:avoid; page-break-inside:avoid; }
  .rep-radar.rep-sintesi-tab .sub-title{ margin:8px 0 3px; padding-top:8px; }

  /* Il badge di chiusura di "Gestione dei conflitti" restava fuori per una
     dozzina di millimetri: sono due comportamenti con il coaching lungo.
     Recupero distribuito, cosi' nessun blocco si accorge di essere stretto. */
  .rep-fattore{ padding:12px 16px 10px; }
  .rep-fattore .critiche h3{ font-size:.88rem; line-height:1.3; }
  .rep-fattore .critica:last-of-type{ margin-bottom:3px; }
  .rep-fattore .fattore-cta{ margin:3px 0 0; }
  .rep-fattore .cta-badge{ padding:2px 9px; }
  .rep-fattore .nota-divario{ font-size:.8rem; line-height:1.4; margin:8px 0 0; padding:7px 11px; }
  /* L'annotazione non si spezza fra due pagine, e il titolo della sezione
     comportamenti non resta orfano in fondo alla pagina: se il primo
     comportamento non ci sta, scendono insieme. */
  .nota-divario{ break-inside:avoid; page-break-inside:avoid; }
  .critiche h3{ break-after:avoid; page-break-after:avoid; }
  /* "Come utilizzarlo": in stampa il fondo resta (e' il segnale del cambio di
     voce) ma i margini si stringono come tutto il resto, e il riquadro non si
     spezza fra due pagine. */
  .uso{ padding:11px 14px 12px; margin:9px 0 5px; border-radius:9px;
        break-inside:avoid; page-break-inside:avoid; }
  .azione{ margin:5px 0 1px; padding-left:10px; break-inside:avoid; page-break-inside:avoid; }
  .fattore-rimando{ margin:9px 0 0; padding-top:7px; font-size:.78rem; }
  .p-rimando{ margin:5px 0 0; font-size:.76rem; }
  .azione-tit{ font-size:.62rem; margin-bottom:2px; }
  .uso-tit{ font-size:.66rem; margin-bottom:5px; }
  .rep-fattore .uso .uso-testo{ font-size:.83rem; line-height:1.45; }
  /* "su 4" accanto ai punteggi: deve ricordare la scala senza rubare la scena
     al numero, che e' la cosa che si legge per prima. */
  .fattore-scores .val .su{ font-size:.5em; font-weight:500; color:#8b95a3; margin-left:3px; letter-spacing:0; }

  /* ---- MARGINE DI SICUREZZA SUL CAPITOLO PIU' LUNGO ----
     "Gestione dei conflitti" chiudeva ESATTAMENTE sul bordo della pagina.
     Un capitolo al limite e' peggio di uno che sfora: l'anteprima lo fa
     stare, il salvataggio no, e la pagina in piu' che servirebbe non viene
     scritta, cosi' cade l'ULTIMA del documento, cioe' la chiusura. Sparivano
     insieme per questo.
     Qui i due blocchi di testo lungo perdono il 2% di corpo: circa 8mm su
     un capitolo pieno, invisibili sulla singola riga, decisivi sul totale. */
  .rep-fattore .restituzione{ font-size:.83rem; }
  .rep-fattore .coaching{ font-size:.78rem; }
  .rep-fattore .q-risposte{ font-size:.78rem; margin:0 0 3px; }

  /* Piano d'azione. Stesso trattamento delle schede competenza, e per la
     stessa ragione: chiudeva sul bordo della pagina. Un capitolo al limite
     apre una coda, e la coda spinge fuori dal documento l'ULTIMA pagina,
     cioe' la chiusura. Qui il margine e' di ~10mm, non di un capello. */
  .rep-passi{ padding:12px 16px 10px; }
  .rep-passi .page-title{ font-size:1.12rem; margin:0 0 6px; }
  .passi-intro{ font-size:.83rem; line-height:1.4; margin:0 0 8px; }
  .passi-card{ padding:9px 12px; margin-bottom:6px; }
  .passi-card h3{ margin:0 0 3px; }
  .passi-card .p-comportamenti li{ line-height:1.35; padding:2px 0 2px 16px; }
  .piano-extra{ margin-top:9px; padding-top:8px; }
  .piano-extra p{ font-size:.81rem; line-height:1.4; margin:0 0 7px; }
  .piano-extra li{ padding:5px 10px; margin-bottom:4px; font-size:.83rem; }
  .passi-nota{ font-size:.76rem; margin-top:7px; }
}

/* Testa della dashboard: titolo a sinistra, azione a destra. Su schermo stretto
   il pulsante scende sotto invece di stringere il titolo. */
.dash-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.dash-head-cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:10px 18px; border-radius:9px; font-size:.92rem; font-weight:600; text-decoration:none;
  border:1.5px solid var(--howar-green, #57A035); color:var(--howar-green, #57A035); background:#fff;
  transition:background .15s, color .15s;
}
.dash-head-cta:hover{ background:var(--howar-green, #57A035); color:#fff; }

/* Nota sul divario sotto soglia: sta fra i punteggi e la restituzione, e deve
   leggersi come un'annotazione a margine, non come un allarme. Grigia, non
   arancione: non e' un punto cieco, e il testo lo dice. */
.nota-divario{
  margin:12px 0 0; padding:9px 14px; background:#f7f9fa; border-left:3px solid #b6bcc4;
  border-radius:0 8px 8px 0; font-size:.86rem; line-height:1.55; color:#4b5563;
}
.nota-divario strong{ color:#2E3A59; }
/* Quando sta dentro la restituzione (fra "Cosa dice il risultato" e "Come
   utilizzarlo") serve aria anche sotto, verso il testo che riprende. */
.nota-divario.nota-inline{ margin:10px 0 12px; }

/* Contatore dei rispondenti sotto la soglia dei 3: il numero non si mostra,
   per non far capire CHI ha risposto (vedi il commento in campagna.php). Qui
   il testo che lo sostituisce, che non deve sembrare un dato mancante. */
.prog-lbl.prog-anonimo{ color:#5f6b7a; font-size:.92rem; line-height:1.55;
  background:#f7f9fa; border-left:3px solid var(--howar-green,#57A035);
  border-radius:0 8px 8px 0; padding:10px 14px; margin:4px 0 0; }
.trow-dati .v-attesa{ color:#8a96a3; font-weight:600; }

/* ============ Card "rimisurati" (ultima cella di I miei test) ============
   Non e' un test: e' un invito. Bordo tratteggiato, fondo appena tinto e
   nessun badge di stato, cosi' non viene scambiata per una campagna che il
   cliente non ricorda di aver comprato. Compare solo quando non c'e' niente
   in corso e l'ultimo report ha piu' di tre mesi: vedi dashboard.php. */
.tcard-rimisura{
  background:#f7fbf6; border:1.5px dashed #b9d6a9; box-shadow:none;
  text-decoration:none; color:inherit; align-items:flex-start;
}
.tcard-rimisura:hover{ background:#f1f8ee; border-color:var(--howar-green, #57A035); }
.tcard-rimisura h3{ margin:0 0 6px; font-size:1.02rem; color:#2E3A59; }
.tcard-rimisura p{ margin:0; font-size:.9rem; line-height:1.55; color:#5b6472; max-width:62ch; }
.tcard-rimisura .tcard-cta{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  color:var(--howar-green, #57A035); font-weight:700; font-size:.92rem;
}
@media(max-width:640px){
  .tcard-rimisura{ flex-direction:column; align-items:stretch; }
  .tcard-rimisura .tcard-cta{ align-self:flex-start; margin-top:10px; }
}

/* ============ Lettura sistemica (pag. 3, casi limite) ============
   Compare quando lo scarto va tutto dalla stessa parte su almeno 5 competenze
   su 6. Non e' un avviso ed evita il rosso: e' una chiave di lettura, e deve
   pesare quanto il resto della pagina, non di piu'. La banda laterale e'
   l'unica differenza rispetto al riquadro normale. */
.lead-sistemico{ border-left:4px solid #94a3b8; border-radius:0 12px 12px 0; }
.lead-sistemico.lead-sotto{ border-left-color:#57A035; background:#f7fbf6; }
.lead-sistemico.lead-sopra{ border-left-color:#e0a83c; background:#fdfaf3; }
.lead-sistemico strong{ color:#2E3A59; }
/* Nota sul pannello piccolo: piu' piccola, sotto il riquadro, perche' e' una
   cautela metodologica e non parte del messaggio. */
.lead-nota-panel{
  margin:10px 2px 0; font-size:.84rem; line-height:1.55; color:#6b7280;
}
/* Nota del piano d'azione tagliato a tre. */
.passi-nota-taglio{
  margin:14px 0 0; padding-top:12px; border-top:1px solid #eef0f4;
  font-size:.88rem; line-height:1.6; color:#5b6472;
}
@media print{
  .lead-sistemico{ font-size:.88rem; padding:11px 14px; }
  .lead-nota-panel{ font-size:.78rem; margin-top:7px; }
  .passi-nota-taglio{ font-size:.8rem; margin-top:10px; padding-top:9px; }
}

/* Avviso "salvataggio non riuscito" nel wizard inviti: deve farsi notare, perche'
   segnala che quello che si sta facendo non sta venendo registrato. */
.persist-warn{ margin:0 0 14px; padding:12px 14px; border-radius:10px; font-size:.9rem; line-height:1.5;
  background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }
.persist-warn[hidden]{ display:none; }
.persist-warn a{ color:#7f1d1d; font-weight:700; text-decoration:underline; }

/* Elenco dei quattro passaggi nel box "Come funziona": stessi colore e corpo del
   paragrafo che sostituisce, numeri allineati al testo e non appesi fuori. */
.wiz-intro-steps{ margin:10px 0 0; padding-left:22px; color:#4b5563; font-size:.95rem; line-height:1.55; }
.wiz-intro-steps li{ margin-bottom:7px; }
.wiz-intro-steps li:last-child{ margin-bottom:0; }
.wiz-intro-steps li::marker{ color:#2E3A59; font-weight:700; }
.wiz-intro-steps b{ color:#2E3A59; }

/* Riquadro invito: i due pulsanti in fondo sono due risposte alla stessa domanda,
   quindi stanno sulla stessa riga e hanno lo stesso peso visivo. Il secondo e'
   piu' spento perche' non scrive niente, non perche' conti meno. */
/* La finestra non deve mai superare lo schermo: intestazione ferma, corpo che
   scorre, piede inchiodato in fondo. Senza questo, su un portatile i due
   pulsanti della decisione finiscono sotto il bordo e restano irraggiungibili. */
.mir-modal{ display:flex; flex-direction:column; max-height:calc(100vh - 40px); }
.mir-modal-body{ overflow-y:auto; margin:14px -4px 0; padding:0 4px; }
.mir-modal .msg{ max-height:34vh; }

.mir-modal-foot{ flex:0 0 auto; margin-top:14px; padding-top:12px; border-top:1px solid #eef0f4; text-align:left; }
.im-dichiara{ margin:0 0 10px; font-size:.84rem; line-height:1.45; color:#6b7280; }
.im-scelte{ display:flex; gap:10px; align-items:stretch; }
/* `hidden` da solo non basta: una regola di classe con display:flex vince
   sulla regola del browser per [hidden], e l'elemento resta a schermo. */
.im-scelte[hidden]{ display:none; }
/* Stessa altezza e stesso peso: sono due risposte alla stessa domanda. Il
   secondo e' piu' spento perche' non scrive niente, non perche' conti meno. */
.im-scelte .m-btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 14px; border-radius:10px; font-size:.92rem; font-weight:700; cursor:pointer; line-height:1.25; }
.im-scelte .m-btn-ok{ border:1.5px solid #57A035; background:#57A035; color:#fff; }
.im-scelte .m-btn-ok:hover{ background:#4a8c2d; border-color:#4a8c2d; }
.im-scelte .m-btn-annulla{ background:#fff; border:1.5px solid #d1d5db; color:#4b5563; flex-direction:column; gap:1px; }
.im-scelte .m-btn-annulla:hover{ border-color:#9ca3af; color:#374151; }
.im-scelte .m-btn-annulla span{ font-weight:400; font-size:.76rem; opacity:.75; }
/* La nota su WhatsApp Web e' utile ma lunga: piu' compatta, cosi' non spinge
   giu' tutto il resto. */
.mir-modal .im-nota{ margin-top:12px; padding:9px 11px; font-size:.76rem; line-height:1.45; }
@media (max-width:520px){ .im-scelte{ flex-direction:column; } }

/* La conferma prende il posto della domanda normale, dentro lo stesso piede:
   non e' una seconda finestra sopra la prima, e' la stessa che fa un passo. */
.im-conferma[hidden]{ display:none; }
.im-conferma p{ margin:0 0 10px; padding:10px 12px; background:#fef3c7; border:1px solid #fde68a;
  border-radius:8px; font-size:.84rem; line-height:1.5; color:#92400e; }

/* ---------------------------------------------------------------------------
   Conferma della chiusura raccolta (campagna.php).
   E' l'unico comando irreversibile del percorso: la finestra elenca cosa
   succede e il tasto resta spento finche' non si spunta la casella. Riusa la
   struttura del riquadro invito (.mir-modal), cambia solo il contenuto.
   --------------------------------------------------------------------------- */
.gm-lista { margin:0; padding-left:20px; font-size:.9rem; line-height:1.55; color:#374151; }
.gm-lista li { margin-bottom:8px; }
.gm-conferma { display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px;
  background:#fef3c7; border:1px solid #fde68a; border-radius:8px; cursor:pointer;
  font-size:.88rem; line-height:1.5; color:#92400e; }
.gm-conferma input { margin-top:2px; width:18px; height:18px; flex:0 0 auto; cursor:pointer; }
/* Il tasto spento deve SEMBRARE spento: senza questo resta verde e invitante,
   e chi lo preme crede che il sito non risponda. */
.im-scelte .m-btn-ok:disabled { background:#d1d5db; border-color:#d1d5db; color:#6b7280; cursor:not-allowed; }

/* Il numero del test accanto al titolo: deve distinguere le schede senza
   diventare il titolo. Grigio, piu' piccolo, tabellare — si legge quando lo si
   cerca e sparisce quando non serve. */
.tcard-num { font-weight:600; font-size:.82em; color:#9ca3af; font-variant-numeric:tabular-nums; }
.wiz h1 .tcard-num { font-size:.6em; vertical-align:middle; }

/* Azione secondaria accanto a un pulsante pieno (scheda del report a test
   finito): stessa forma, contorno invece di fondo. Dice "si può fare anche
   questo" senza contendere il clic al pulsante principale. Finora
   `.btn-secondario` non aveva nessuna regola e in pagina restava testo nudo. */
.btn-secondario{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:9px; font-size:.95rem; font-weight:600; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--howar-green, #57A035); color:var(--howar-green, #57A035); background:#fff;
  transition:background .15s, color .15s; }
.btn-secondario:hover{ background:var(--howar-green, #57A035); color:#fff; }
/* I due pulsanti del report stanno in riga e vanno a capo sullo stretto. */
.wstep .actions-report{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Testa del report: il ritorno al test a sinistra, la stampa a destra. Erano
   allineati entrambi a destra e il link di ritorno finiva appiccicato al
   pulsante, dove si legge come una sua etichetta. */
.report-actions-top{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:10px; text-align:left; }
.report-actions-fondo{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:22px 0 8px; text-align:left; }
/* Le due mete di ritorno stanno vicine fra loro e lontane dalla stampa: una
   torna indietro, l'altra agisce. */
.report-nav{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.report-back{ text-decoration:none; font-size:.95rem; font-weight:600;
  color:var(--howar-blue, #2E3A59); opacity:.85; }
.report-back:hover{ opacity:1; text-decoration:underline; }

/* ---------------------------------------------------------------------------
   ELENCO DEI TEST — una riga per test (sostituisce la griglia di schede).
   Le schede affiancate reggevano con uno o due test; con cinque diventano un
   muro di riquadri uguali. In riga i dati stanno incolonnati e si scorrono.
   Struttura: corpo a sinistra (titolo, dati, passi), azione a destra.
   --------------------------------------------------------------------------- */
.tlist { display:flex; flex-direction:column; gap:12px; }
.trow { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid #e5e7eb;
  border-radius:14px; padding:16px 20px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
a.trow { text-decoration:none; color:inherit; cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
a.trow:hover { box-shadow:0 8px 22px rgba(0,0,0,.09); transform:translateY(-1px); border-color:#bcdcae; }
.trow.is-spenta { opacity:.75; }
.trow-corpo { flex:1; min-width:0; }
.trow-testa { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.trow-testa h3 { margin:0; font-size:1.05rem; color:#2E3A59; }
.trow-cta { color:var(--howar-green, #57A035); font-weight:700; white-space:nowrap; font-size:.98rem; }

/* Le quattro coppie etichetta/valore: colonne di larghezza fissa, cosi' le righe
   si leggono in verticale come una tabella anche senza essere una tabella. */
.trow-dati { display:grid; grid-template-columns:repeat(4, minmax(110px, 160px));
  gap:10px 26px; margin:10px 0 4px; }
.trow-dati > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.trow-dati .k { font-size:.66rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.trow-dati .v { font-size:.95rem; font-weight:700; color:#111827; }

.trow .tsteps { margin-top:10px; }
.trow-rimisura { border-style:dashed; background:#fbfdfa; }
.trow-rimisura h3 { margin:0 0 6px; }
.trow-rimisura p { margin:0; font-size:.9rem; color:#4b5563; line-height:1.5; }

/* Sotto i 760px la riga diventa un blocco: l'azione va in fondo, larga, dove il
   pollice la trova. Le colonne dei dati scendono a due. */
@media (max-width:760px) {
  .trow { flex-direction:column; align-items:stretch; gap:12px; }
  .trow-dati { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .trow-cta { text-align:right; }
}

/* Badge "Omaggio": neutro, non festoso. Dice una condizione dell'ordine, non
   una promozione — e spiega perché quella riga non ha il pulsante del recesso. */
.ord-badge-omaggio{ display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  background:#eef2f7; color:#5b6472; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; vertical-align:middle; }

/* Uscita dopo gli inviti (17/09/2026): in fondo all'elenco dei contatti, dice
   che non serve fare altro e porta all'area personale. Il pulsante pieno qui e'
   l'azione sicura; «Chiudi la raccolta» nel monitoraggio e' secondario. */
.fine-inviti { margin: 18px 0 4px; padding: 16px 18px; border-radius: 12px;
  background: #f1f7ec; border: 1px solid #cfe3c2; }
.fine-inviti p { margin: 0 0 10px; color: #2E3A59; font-size: .95rem; line-height: 1.55; }
.fine-inviti .fine-inviti-t { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.fine-inviti .fine-inviti-btn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  text-decoration: none; padding: 12px 16px; line-height: 1.3; margin-top: 4px; }
@media (min-width: 640px) { .fine-inviti .fine-inviti-btn { display: inline-block; width: auto; } }