/* Portale del cliente (segnalante): tema del cliente da Personalizzazione, modulo in passaggi, rientro con codice, anteprima. */
.tenant,.pv{--p:#1d67f0;--p2:#32c6ff;--pbg:#071426;--pfg:#f7fbff;--r:12px;--pf:'IBM Plex Sans',system-ui,sans-serif;
  --tl:color-mix(in srgb,var(--pfg) 14%,transparent);--tm:color-mix(in srgb,var(--pfg) 68%,transparent);--ts:color-mix(in srgb,var(--pfg) 7%,var(--pbg));
  background:var(--pbg);color:var(--pfg);font-family:var(--pf)}
.tenant{border-color:var(--tl)}
.tenant .bar{background:var(--ts);border-color:var(--tl)}.tenant .bar span{color:var(--tm)}.tenant .bar i{background:var(--tl)}
.tenant h2,.tenant h3{font-family:var(--pf);font-weight:700}
.tenant p,.tenant .hint,.tenant .steps,.tenant .sla small,.tenant .msg small,.tenant .muted{color:var(--tm)}
.tenant a{color:var(--p2)}
.tenant :focus-visible{outline-color:var(--p2)}
.tenant input,.tenant textarea,.tenant select{background:var(--ts);color:var(--pfg);border-color:var(--tl);border-radius:var(--r)}
.tenant input[type=checkbox],.tenant input[type=radio],.tenant input[type=range]{accent-color:var(--p)}
.tenant .btn{background:transparent;color:var(--pfg);border-color:var(--tl);border-radius:999px}
.tenant .btn.pri{background:var(--p);border-color:var(--p);color:#fff}
.tenant .err{color:#ff8b7e}
.tenant details{border-color:var(--tl)}
.tenant .pill.p-ok{background:color-mix(in srgb,#6fd08f 18%,var(--pbg));color:#6fd08f}
.tenant .warnbox{background:color-mix(in srgb,#f0b14a 16%,var(--pbg));color:#f0b14a;border-radius:var(--r)}
.tenant .warnbox small,.tenant .warnbox span{color:inherit}
.tenant-foot{padding:12px 28px;font-size:12px;border-top:1px solid var(--tl);color:var(--tm);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.tenant-foot a{color:var(--tm)}
/* uscita rapida: sempre nello stesso punto, ben visibile */
.tenant .bar .esci{margin-inline-start:auto;flex:none;background:#c62828;border-color:#c62828;color:#fff;border-radius:6px;font-size:12.5px;padding:4px 12px}
.disp{border:1px solid var(--tl);border-radius:var(--r);padding:10px 12px;font-size:13px;color:var(--tm)}
.disp b{color:var(--pfg)}
.tenant[dir=rtl]{font-family:var(--pf),'Noto Sans Arabic',Tahoma,sans-serif}
.tenant[dir=rtl] .steps li::before{content:counter(st, arabic-indic) ". "}
.tenant[dir=rtl] .code-in,.tenant[dir=rtl] .code{direction:ltr;text-align:center}

.brandline{display:flex;align-items:center;gap:12px}
.brandline img{height:44px;max-width:160px;object-fit:contain}
.brandline .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tm)}
.logo{width:44px;height:44px;border-radius:var(--r);background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;display:grid;place-items:center;font:700 18px var(--pf);flex:none}
.lang{display:inline-flex;border:1px solid var(--tl);border-radius:999px;overflow:hidden;align-self:flex-start}
.lang button{font:500 12.5px var(--pf);background:transparent;color:var(--tm);border:0;padding:5px 12px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--ts);color:var(--pfg);font-weight:600}

/* portale */
.portal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.portal aside{padding:28px;background:var(--ts);border-inline-end:1px solid var(--tl);display:flex;flex-direction:column;gap:16px}
.portal aside p{margin:0}
.guar{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.guar li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.guar svg{margin-top:2px;color:var(--p2)}
.portal .form{padding:28px;display:grid;gap:18px;min-width:0;align-content:start}
.steps{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{counter-increment:st}.steps li::before{content:counter(st) ". "}
.tenant .steps [aria-current]{color:var(--pfg);font-weight:600}
.tenant .steps .done{color:var(--p2)}.steps .done::before{content:"✓ "}
.wstep{display:grid;gap:18px}
.wnav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tenant .choice label{border-color:var(--tl);border-radius:var(--r)}
.tenant .choice label:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 22%,var(--pbg))}
.drop{display:block;font-weight:400;border:1.5px dashed var(--tl);border-radius:var(--r);padding:16px;text-align:center;color:var(--tm);cursor:pointer;margin:0}
.drop:focus-within{outline:2px solid var(--p2);outline-offset:2px}
.drop.over{border-style:solid;border-color:var(--p2)}
.tenant .file{border-color:var(--tl);border-radius:var(--r)}
.rec{border:1px solid var(--tl);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.rec audio{width:100%}
.tenant dl dt{color:var(--tm)}
.tenant dd{overflow-wrap:anywhere}

/* rientro con codice */
.center{padding:28px;display:grid;gap:20px;max-width:760px;margin:auto}
.code{font:500 26px var(--font-m);letter-spacing:.08em;padding:16px;border:1px solid var(--tl);border-radius:var(--r);background:var(--ts);color:var(--p2);text-align:center;overflow-wrap:anywhere;user-select:all}
.code-in{font-family:var(--font-m);letter-spacing:.08em;text-transform:uppercase;max-width:320px}
.warnbox{background:var(--warn-soft);color:var(--warn);padding:12px 14px;border-radius:8px}
.chat{display:grid;gap:10px}
.msg{max-width:78%;padding:10px 13px;border-radius:10px;border:1px solid var(--line);white-space:pre-line}
.msg.me{justify-self:end;background:var(--accent-soft);border-color:transparent}
.msg small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px;white-space:normal}
.tenant .msg{border-color:var(--tl);border-radius:var(--r)}
.tenant .msg.me{background:color-mix(in srgb,var(--p) 28%,var(--pbg))}
.sla{display:flex;flex-wrap:wrap;gap:8px}
.sla span{flex:1 1 200px;border:1px solid var(--tl);border-radius:var(--r);padding:10px 12px}
.sla b,.sla small{display:block}

/* anteprima in Personalizzazione */
.pv{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-inline:auto;width:100%;transition:max-width .2s}
.pv.mob{max-width:340px}
.pv-hero{min-height:130px;background:linear-gradient(135deg,var(--p),var(--p2)) center/cover;display:flex;align-items:flex-end;padding:16px;color:#fff;position:relative}
.pv-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.pv-hero>*{position:relative}
.pv-logo{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--pfg) 15%,transparent)}
.pv-logo img{height:34px;max-width:140px;object-fit:contain}
.pv-logo .lg{width:34px;height:34px;border-radius:var(--r);background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;display:grid;place-items:center;font-weight:700}
.pv-body{padding:16px;display:grid;gap:12px}
.pv h4{margin:0;font-size:20px;line-height:1.2}
.pv p{margin:0;color:var(--tm)}
.pv .pv-field{border:1px solid color-mix(in srgb,var(--pfg) 25%,transparent);border-radius:var(--r);padding:9px 11px;color:var(--tm)}
.pv .pv-btn{background:var(--p);color:#fff;border:0;border-radius:var(--r);padding:10px 16px;font:600 14px var(--pf);justify-self:start}
.pv .pv-link{color:var(--p2);font-weight:600}
.pv-foot{padding:10px 16px;font-size:12px;color:var(--tm);border-top:1px solid color-mix(in srgb,var(--pfg) 15%,transparent)}

@media (max-width:820px){
  .portal{grid-template-columns:minmax(0,1fr)}
  .portal aside{border-inline-end:0;border-bottom:1px solid var(--tl)}
  .portal aside,.portal .form,.center{padding:20px}
  .msg{max-width:95%}
}