/* Sezione Sito del CRM: Pagine, Test A/B, Pulsanti (solo Stefano). Usa i colori e i tempi di index.html (:root).
   Impianto del test preso dallo split test di ClickFunnels (originale e variante affiancate, cursore in mezzo). */
.ab-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.ab-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 16px}
.ab-results-head h3{font-size:16px}
.ab-results-head>p{margin:0;max-width:720px;font-size:13px}

/* Un test */
.ab-test{padding:22px 24px;margin-bottom:22px}
.ab-test-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.ab-test-title{min-width:0}
.ab-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0;font-size:13px}
.ab-pill{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:#EFEBE5;color:#4D514E;font-size:12px;font-weight:600}
.ab-pill.ab-on{background:var(--salvia-soft);color:var(--salvia-dark)}
.ab-change{margin:8px 0 0;font-size:13px}

.ab-urlbar{display:flex;align-items:stretch;min-height:40px;margin-bottom:18px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.ab-urlbar-btn{display:grid;place-items:center;width:44px;flex:none;border:0;background:#FAF8F5;color:var(--magenta-dark);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.ab-urlbar-btn:first-child{border-right:1px solid var(--line)}
.ab-urlbar-btn:last-child{border-left:1px solid var(--line)}
.ab-urlbar-btn:hover{background:var(--cipria-soft)}
.ab-urlbar-btn svg,.ab-icon svg{width:18px;height:18px}
.ab-url{flex:1;min-width:0;align-self:center;padding:0 14px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ab-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(240px,1fr) minmax(220px,300px);gap:24px;align-items:start}
.ab-grid-empty{grid-template-columns:minmax(220px,300px) minmax(240px,340px)}

/* Scheda di una pagina: anteprima del telefono */
.ab-page{border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:0 1px 2px rgba(46,58,54,.06)}
.ab-page-head{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#FAF8F5;border-bottom:1px solid var(--line);font-weight:600}
.ab-page-head svg{width:16px;height:16px;color:var(--ink);flex:none}
.ab-page-head code{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ab-shot{position:relative;display:block;height:300px;overflow:hidden;background:var(--crema)}
.ab-shot img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;opacity:0;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.ab-shot-ok img{opacity:1}
.ab-shot-wait{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:13px;color:var(--muted);text-decoration:none}
.ab-shot-ok .ab-shot-wait{display:none}
.ab-shot-ko .ab-shot-wait{font-size:0}
.ab-shot-ko .ab-shot-wait::after{content:"Anteprima non disponibile: apri la pagina";font-size:13px}
.ab-shot:hover img{transform:translateY(-3%)}
.ab-page-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.ab-edit{flex:1;min-width:0}
.ab-icon{width:40px;padding:0;flex:none}

/* In mezzo: niente variante */
.ab-start{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;text-align:center;border:1px dashed var(--line-strong);border-radius:12px;background:#FCFAF8}
.ab-start-icon{display:block;width:56px;height:56px;color:#C9C0B4;margin-bottom:6px}
.ab-start h3{font-family:var(--serif);font-size:20px;font-weight:500}
.ab-start p{margin:0 0 10px;color:var(--muted);max-width:240px}

/* In mezzo: cursore della divisione */
.ab-split{padding-top:36px}
.ab-range{--pos:50%;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ab-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0 var(--pos),var(--magenta) var(--pos) 100%)}
.ab-range::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--ink) 0 var(--pos),var(--magenta) var(--pos) 100%)}
.ab-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);box-shadow:0 1px 4px rgba(46,58,54,.25);transition:transform var(--dur-fast) var(--ease-out)}
.ab-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);box-shadow:0 1px 4px rgba(46,58,54,.25)}
.ab-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.ab-range:focus-visible{outline:2px solid var(--magenta);outline-offset:4px;border-radius:8px}
.ab-split-labels{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:13px;color:var(--muted)}
.ab-split-labels strong{color:var(--ink);font-size:15px}
.ab-split-labels span:last-child strong{color:var(--magenta-dark)}
.ab-split-note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.ab-apply{margin-top:18px;padding:18px;border:1px solid #E8D9B5;border-radius:12px;background:#F7F0DE;text-align:center;animation:ab-in var(--dur-base) var(--ease-out)}
.ab-apply h3{font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:6px}
.ab-apply p{margin:0 0 14px;font-size:13px;line-height:1.55}
.ab-apply .btn{width:100%;margin-bottom:8px}
@keyframes ab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Risultati di un test */
.ab-results{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.ab-verdict{padding:16px 18px;margin-bottom:16px;border:1px solid var(--line-strong);border-radius:12px;background:#FAF8F5}
.ab-verdict p{margin:0}.ab-verdict p+p{margin-top:6px;font-size:13px}
.ab-verdict-title{font-family:var(--serif);font-size:20px}
.ab-v-in-corso{background:#F7F0DE;border-color:#E8D9B5}
.ab-v-pari{background:var(--surface)}
.ab-v-vince-A{background:var(--ink);border-color:var(--ink);color:#fff}
.ab-v-vince-B{background:var(--magenta);border-color:var(--magenta);color:#fff}
.ab-table{min-width:0;max-width:640px;margin-bottom:18px}
.ab-table th,.ab-table td{padding:10px 12px}
.ab-table thead th{position:static}
.ab-table tbody th{font-weight:500;text-align:left;border-bottom:1px solid #EFEAE4;background:transparent;color:var(--ink);font-size:13px}
.ab-table td strong{font-size:15px}
.ab-table td small{margin-left:8px;color:var(--muted)}
.ab-table em{font-style:normal;font-size:11px;color:var(--magenta-dark);font-weight:600;margin-left:6px}
.ab-main th,.ab-main td{background:var(--cipria-soft)}
.ab-chart{margin:0;max-width:680px}
.ab-chart figcaption{font-size:13px;color:var(--muted);margin-bottom:6px}
.ab-chart svg{display:block;width:100%;height:auto;font-size:11px;fill:var(--muted)}
.ab-axis{stroke:var(--line-strong)}.ab-gridline{stroke:var(--line);stroke-dasharray:3 4}
.ab-line-a,.ab-line-b{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ab-line-a{stroke:var(--ink)}.ab-line-b{stroke:var(--magenta)}
.ab-legend{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:12px;color:var(--muted)}
.ab-key-a,.ab-key-b{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--ink)}
.ab-key-b{background:var(--magenta);margin-left:10px}

.ab-test-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ab-danger{color:var(--red)}
.ab-danger:hover{background:var(--red-soft);border-color:#E9B7B2}
.ab-danger-solid{background:var(--red);border-color:var(--red);color:#fff}
.ab-danger-solid:hover{background:#912018;border-color:#912018}

/* Finestre */
.ab-form{display:grid;gap:14px}
.ab-form code,.small-dialog .dialog-head p code{font-size:12px;background:var(--crema);padding:1px 5px;border-radius:5px}
.ab-hint{margin:-6px 0 0;font-size:12px}
.ab-check{display:flex;align-items:center;gap:8px;font-size:13px}
.ab-check input{accent-color:var(--red)}
.ab-form-error{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--red-soft);color:var(--red);font-size:13px}

/* Pagine */
.ab-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.ab-tops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.ab-top{padding:16px;border:1px solid var(--line);border-left:4px solid var(--magenta);border-radius:var(--radius);background:var(--surface)}
.ab-top:nth-child(3){border-left-color:var(--salvia)}
.ab-top>span{display:block;font-size:12px;color:var(--muted)}
.ab-top strong{display:block;margin:8px 0 4px;font-size:16px}
.ab-top strong code{font-family:var(--sans);font-size:16px}
.ab-top p{margin:0;font-size:13px}
.ab-top small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.ab-stats{min-width:900px}
.ab-stats tbody th{font-weight:500;text-align:left;background:transparent;color:var(--ink);font-size:14px;position:static;border-bottom:1px solid #EFEAE4}
.ab-stats code{font-size:13px}
.ab-stats td:nth-child(n+2){font-variant-numeric:tabular-nums}
.ab-stats tfoot th,.ab-stats tfoot td{padding:12px 14px;border-top:1px solid var(--line-strong);font-weight:600;background:#FAF8F5}
.ab-badge{display:inline-flex;align-items:center;min-height:20px;margin-left:8px;padding:0 8px;border-radius:999px;background:var(--cipria);color:#8E2450;font-size:11px;font-weight:600;white-space:nowrap}
.ab-badge-sale{background:var(--salvia-soft);color:var(--salvia-dark)}
.ab-bar{display:inline-block;vertical-align:middle;width:calc(var(--w) * .6);max-width:60%;height:6px;margin-right:8px;border-radius:999px;background:var(--magenta);opacity:.75}
.ab-note{margin:12px 0 0;font-size:12px;line-height:1.6;max-width:900px}

/* Pulsanti */
.ab-btn-table{min-width:760px}
.ab-auto td{color:var(--muted)}

@media (max-width:1100px){
  .ab-grid{grid-template-columns:1fr 1fr}
  .ab-split{grid-column:1/-1;grid-row:2;padding-top:4px}
  .ab-grid-empty{grid-template-columns:1fr 1fr}
  .ab-grid-empty .ab-start{grid-column:auto;grid-row:auto}
  .ab-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .ab-test{padding:16px}
  .ab-test-head{flex-direction:column}
  .ab-grid,.ab-grid-empty{grid-template-columns:1fr}
  .ab-tops,.ab-kpis{grid-template-columns:1fr 1fr}
  .ab-head-actions{justify-content:flex-start}
}