/* ============================================================
   IMPOSTAZIONI — la pagina nuova

   Stessa grammatica del Profilo (`.pf-*` in modules.css): la testata di
   sezione a sinistra, i campi a destra, la barra di salvataggio in fondo.
   Qui le classi hanno il loro prefisso `set-` perche' sono un'altra
   pagina e non devono ereditare per sbaglio le misure dell'altra.

   Nessuna tinta scritta a mano: tutto passa dai token, quindi la pagina
   segue il tema scuro senza un secondo foglio.
   ============================================================ */

.set-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:22px;align-items:start;}

/* ---- il menu delle schede: gruppi, icona, link veri ---- */
.set-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:8px;}
.set-nav .grp{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:14px 12px 5px;}
.set-nav .grp:first-child{padding-top:0;}
.set-nav a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--neutral-ink);text-decoration:none;}
.set-nav a svg{width:15px;height:15px;flex-shrink:0;color:var(--dim);}
.set-nav a:hover{background:var(--hover);color:var(--text);}
.set-nav a.active{background:var(--primary-soft);color:var(--primary-dark);}
.set-nav a.active svg{color:var(--primary-dark);}

.set-wrap{display:flex;flex-direction:column;gap:16px;min-width:0;}
.set-head h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px;}
.set-head p{margin:4px 0 0;color:var(--muted);font-size:12.5px;max-width:70ch;line-height:1.55;}

.set-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}

/* ---- sezione a due colonne ---- */
.set-sec{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:22px 20px;border-top:1px solid var(--border);}
.set-card>.set-sec:first-child{border-top:none;}
.set-sec-l h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;}
.set-sec-l h3 .ic{border-radius:8px;background:var(--primary-soft);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:5px;}
.set-sec-l h3 svg{width:15px;height:15px;color:inherit;}
.set-sec-l p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55;}
.set-sec-l .set-link{margin-top:9px;}
.set-sec-r{min-width:0;}
.set-sec-r.narrow{max-width:620px;}

/* Una riga con un'azione e la sua spiegazione accanto: il collegamento a
   Google, dove il pulsante non e' un campo e non sta in una griglia. */
.set-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}

/* ---- campi: stessa resa del profilo, sotto un altro tetto ---- */
.set-wrap .grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 14px;}
.set-wrap .fg{min-width:0;}
.set-wrap .fg.full{grid-column:1/-1;}
.set-wrap .lbl{display:block;font-size:12px;font-weight:600;color:var(--neutral-ink);margin:0 0 5px;}
.set-wrap .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45;}
.set-mail-test-action{padding-top:20px;}
.set-suffix{position:relative;}
.set-suffix .field{padding-right:40px;}
.set-suffix i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--muted);font-weight:600;pointer-events:none;}
.set-link{border:none;background:none;color:var(--primary-dark);font-weight:600;cursor:pointer;padding:0;font-size:12.5px;display:inline-flex;align-items:center;gap:4px;font-family:inherit;}
.set-link svg{width:13px;height:13px;}
.set-link:hover{text-decoration:underline;}

.set-wrap .segfull{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--track);border-radius:10px;padding:3px;max-width:100%;}
.set-wrap .segfull button{border:none;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.set-wrap .segfull button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.set-wrap .segfull button:disabled{opacity:.45;cursor:not-allowed;}

.set-switch{appearance:none;width:34px;height:20px;border-radius:12px;background:var(--dim);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;margin:0;}
.set-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--card);transition:transform .15s;box-shadow:var(--shadow);}
.set-switch:checked{background:var(--primary);}
.set-switch:checked::after{transform:translateX(14px);}
.set-switch:disabled{opacity:.45;cursor:not-allowed;}

/* ---- righe con interruttore ---- */
.set-tog{display:flex;align-items:flex-start;gap:14px;padding:11px 0;border-top:1px solid var(--border);}
.set-tog:first-child{border-top:none;padding-top:0;}
.set-tog .tx{flex:1;min-width:0;}
.set-tog .tx b{font-weight:600;display:block;line-height:1.35;}
.set-tog .tx small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.45;}
.set-tog .set-switch{margin-top:2px;}
.set-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}

/* La riga che compare solo quando l'interruttore di sopra e' acceso. */
.set-sub{margin:10px 0 2px;padding:10px 12px;border-radius:10px;background:var(--field);border:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;}
.set-sub svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;}

/* ---- regole scritte come frasi ---- */
.set-rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--border);line-height:1.9;font-size:13px;}
.set-rule:first-child{border-top:none;padding-top:0;}
.set-rule .ric{width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.set-rule .ric svg{width:15px;height:15px;}
.set-mini{width:64px;text-align:center;padding:5px 6px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-weight:600;font-family:inherit;color:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.set-mini:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}

/* ---- riquadri di sintesi ---- */
.set-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.set-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;}
.set-kpi .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.set-kpi .top span{font-size:11.5px;color:var(--muted);font-weight:500;}
.set-kpi .ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.set-kpi .ic svg{width:15px;height:15px;}
.set-kpi b{display:block;font-size:21px;font-weight:700;letter-spacing:-.4px;margin-top:8px;font-variant-numeric:tabular-nums;}
.set-kpi small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.4;}
.set-kpi .ic.ok{background:var(--primary-soft);color:var(--primary-dark);}
.set-kpi .ic.neutral{background:var(--track);color:var(--neutral-ink);}
.set-kpi .ic.warn{background:var(--amber-soft);color:var(--amber-dark);}
.set-kpi .ic.bad{background:var(--red-soft);color:var(--red-dark);}

/* ---- la gerarchia di una tariffa, dal caso specifico al generale ---- */
.set-chain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;}
.set-chain .step{flex:1;min-width:150px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--card);}
.set-chain .step.win{border-color:var(--primary);background:var(--primary-soft);}
.set-chain .step span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.set-chain .step.win span{color:var(--primary-dark);}
.set-chain .step b{display:block;font-size:13.5px;font-weight:700;margin-top:4px;}
.set-chain .step small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.set-chain .arr{display:flex;align-items:center;color:var(--dim);}
.set-chain .arr svg{width:15px;height:15px;}

/* ---- tariffa meno costo: il margine, scritto come si farebbe a mano ---- */
.set-calc{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px;border-radius:12px;background:var(--field);border:1px solid var(--border);margin-top:14px;}
.set-calc .cell span{display:block;font-size:11px;color:var(--muted);}
.set-calc .cell b{font-size:16px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;}
.set-calc .op{color:var(--dim);font-size:15px;font-weight:700;}
.set-calc .cell.res b{color:var(--primary-dark);}
.set-calc .grow{flex:1;min-width:120px;}
.set-bar{height:6px;border-radius:4px;background:var(--track);overflow:hidden;width:100%;}
.set-bar i{display:block;height:100%;background:var(--primary);}
.set-bar.neg i{background:var(--red);}

/* ---- tabelle ed elenchi della pagina ---- */
.set-tblwrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;overflow-x:auto;}
.set-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.set-tbl thead th{background:var(--field);border-bottom:1px solid var(--border);}
.set-tbl th.r,.set-tbl td.r{text-align:right;}
.set-tbl tbody tr:hover{background:var(--hover);}
.set-name{display:flex;align-items:center;gap:10px;min-width:0;}
.set-name b{font-weight:600;}
.set-tile{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--track);color:var(--neutral-ink);}
.set-tile svg{width:15px;height:15px;}
.set-cost{width:86px;text-align:right;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-weight:600;font-family:inherit;color:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.set-cost:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.set-use{font-size:12px;color:var(--neutral-ink);white-space:nowrap;}
.set-tag-on{background:var(--primary-soft);color:var(--primary-dark);}
.set-tag-on svg{width:12px;height:12px;}
.set-use.none{color:var(--dim);}
.set-acts{display:flex;gap:6px;justify-content:flex-end;}
.set-acts .icon-btn:hover{background:var(--hover);color:var(--text);}
.set-acts .icon-btn.danger:hover{background:var(--red-soft);color:var(--red-dark);}
.set-acts .icon-btn:disabled{opacity:.35;}

.set-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.set-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);}
.set-item:last-child{border-bottom:none;}
.set-item:hover{background:var(--hover);}
.set-item .ord{display:flex;flex-direction:column;gap:1px;}
.set-item .ord button{width:18px;height:14px;border:none;background:none;color:var(--dim);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.set-item .ord button:hover:not(:disabled){color:var(--text);}
.set-item .ord button:disabled{opacity:.3;cursor:not-allowed;}
.set-item .ord svg{width:12px;height:12px;}
.set-nm{flex:1;min-width:0;font-weight:500;border:1px solid transparent;background:transparent;border-radius:7px;padding:4px 6px;font-family:inherit;color:inherit;font-size:13px;}
.set-nm:hover{border-color:var(--border);}
.set-nm:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);background:var(--card);}
.set-nm[readonly]{color:var(--neutral-ink);}
.set-additem{display:flex;gap:8px;padding:10px 12px;background:var(--field);flex-wrap:wrap;align-items:center;}
.set-additem .field{flex:1;min-width:150px;width:auto;background:var(--card);}
.set-additem .set-pick{flex:0 0 150px;}
.set-additem .set-suffix{flex:0 0 118px;}

/* ---- eliminare qualcosa che e' in uso: prima si dice dove va il lavoro ---- */
.set-confirm{padding:11px 13px;border-radius:11px;background:var(--amber-soft);color:var(--amber-dark);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-top:10px;}
.set-confirm svg{width:15px;height:15px;flex-shrink:0;}
.set-confirm .grow{flex:1;}
.set-confirm .set-pick{min-width:190px;}

.set-note{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;background:var(--field);border:1px solid var(--border);font-size:12.5px;line-height:1.5;}
.set-note svg{width:15px;height:15px;color:var(--primary-dark);flex-shrink:0;margin-top:1px;}
.set-note.warn{background:var(--amber-soft);border-color:transparent;color:var(--amber-dark);}
.set-note.warn svg{color:var(--amber-dark);}
.set-note.top{margin-top:12px;}

/* ---- anteprime dell'aspetto ---- */
.set-themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,195px));gap:12px;justify-content:start;}
.set-theme{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card);cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
.set-theme:hover{background:var(--hover);}
.set-theme.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.set-prev{border-radius:9px;overflow:hidden;border:1px solid var(--border);display:flex;height:74px;}
.set-prev .side{width:28%;padding:6px;display:flex;flex-direction:column;gap:4px;}
.set-prev .main{flex:1;padding:7px;display:flex;flex-direction:column;gap:5px;}
.set-prev .ln{height:5px;border-radius:3px;}
.set-prev .blk{height:20px;border-radius:5px;}
.set-theme .cap{display:flex;align-items:center;gap:7px;margin-top:9px;font-weight:600;font-size:13px;}
.set-theme .cap svg{width:14px;height:14px;color:var(--muted);}
.set-theme.on .cap svg{color:var(--primary-dark);}

/* Le miniature dei temi sono l'unico posto dell'app che nomina le due
   palette per esteso: un'anteprima deve far vedere il tema che NON stai
   guardando, e i token veri dicono sempre e solo quello corrente. */
.set-prev.light{background:var(--lt-bg);}
.set-prev.light .side{background:var(--lt-card);}
.set-prev.light .ln{background:var(--lt-dim);}
.set-prev.light .ln.ink{background:var(--lt-text);}
.set-prev.light .blk{background:var(--lt-card);border:1px solid var(--lt-border);}
.set-prev.dark{background:var(--dk-bg);}
.set-prev.dark .side{background:var(--dk-card);}
.set-prev.dark .ln{background:var(--dk-border);}
.set-prev.dark .ln.ink{background:var(--dk-text);}
.set-prev.dark .blk{background:var(--dk-card);border:1px solid var(--dk-border);}
.set-prev.sys{background:linear-gradient(105deg,var(--lt-bg) 0 50%,var(--dk-bg) 50% 100%);}
.set-prev.sys .side{background:transparent;}
.set-prev.sys .ln{background:var(--lt-dim);}
.set-prev.sys .main .ln{background:var(--dk-text);}
.set-prev.sys .blk{background:var(--dk-card);}
.set-prev .ln.brand{background:var(--primary);}

/* L'anteprima del caricamento e' il caricamento vero, in piccolo. */
.set-prev.load{background:var(--card);}
.set-prev.load .side{background:var(--field);}
.set-prev.mid{align-items:center;justify-content:center;background:var(--field);}
.set-prev .ld-bar{height:7px;}
.set-prev .ld-bar.block{height:22px;border-radius:6px;}

@media (max-width:1100px){
  .set-sec{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:980px){
  .set-layout{grid-template-columns:1fr;}
  .set-nav{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;}
  .set-nav a{white-space:nowrap;}
  .set-nav .grp{display:none;}
}
@media (max-width:560px){
  .set-wrap .grid2{grid-template-columns:1fr;}
  .set-mail-test-action{padding-top:0;}
}
.pf-avatar{background:var(--tint,var(--primary));}
.pf-sw{background:var(--tint,var(--primary));}
.pf-swhint{font-size:11.5px;margin-left:6px;}

.pf-strength i.st-weak{background:var(--red);}
.pf-strength i.st-mid{background:var(--amber);}
.pf-strength i.st-ok{background:var(--primary);}
.pf-2fa{margin-top:12px;}
.pf-2fa-img{max-width:280px;}
.pf-rowtop{align-items:flex-start;}

/* Il codice QR della verifica in due passaggi. Il fondo bianco sta dentro
   all'SVG e non si tocca: un QR su fondo scuro molti lettori non lo
   agganciano, e di notte il riquadro deve restare chiaro lo stesso. Il
   bordo e' nostro e serve solo a staccarlo dalla scheda. */
.pf-qr{display:inline-flex;padding:10px;margin:12px 0 4px;background:#fff;
  border:1px solid var(--border);border-radius:12px;}
.pf-qr svg{display:block;}

/* Un valore deciso, che non si scrive piu'. Ha l'aria di un campo perche'
   sta in mezzo a dei campi, ma non lo e': si legge e basta, e accanto c'e'
   il lucchetto che dice perche'. */
.set-fixed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  background:var(--field);border:1px solid var(--border);border-radius:10px;}
.set-fixed code{font-size:13px;color:var(--text);background:none;padding:0;word-break:break-all;}
.set-lock{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0;
  font-size:11.5px;font-weight:600;color:var(--muted);}
.set-lock svg{width:13px;height:13px;}