:root{
  /* Palette del marchio QuotExim (derivata dal logo EXIMTRADE) - vedi MARCHIO.md */
  --verde-marchio:#2BB24C; --blu:#16793A; --blu-scuro:#0E5B2B; --blu-chiaro:#EAF7EE;
  --verde:#16793A; --rosso:#ED1846; --ambra:#b7791f;
  --testo:#1A1A1A; --tenue:#6B7280; --bordo:#DCE7E0; --sfondo:#F4F8F5;
  --ombra:0 1px 3px rgba(14,91,43,.10), 0 6px 18px rgba(14,91,43,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--sfondo);color:var(--testo);font-size:14.5px;line-height:1.5}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.25}
h2{font-size:1.35rem}h3{font-size:1.02rem}
p{margin:0 0 .6rem}
a{color:var(--blu)}
.nascosto{display:none !important}
.sub{color:var(--tenue);max-width:80ch;margin-bottom:1rem}
.hint{color:var(--tenue);font-weight:400;font-size:.78rem}

/* ---------- accesso ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem;
  background:linear-gradient(135deg,#0E5B2B,#16793A 55%,#2BB24C)}
.auth-card{background:#fff;border-radius:14px;padding:2rem;width:100%;max-width:430px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.auth-brand{display:flex;gap:.9rem;align-items:center;margin-bottom:1.4rem}
.auth-brand h1{font-size:1.5rem;margin:0}
.auth-brand p{margin:0;color:var(--tenue);font-size:.85rem}
.logo{width:46px;height:46px;border-radius:12px;object-fit:cover;display:block}
.logo.piccolo{width:28px;height:28px;border-radius:8px}
.tabs{display:flex;gap:.4rem;margin-bottom:1.1rem;border-bottom:1px solid var(--bordo)}
.tab{background:none;border:none;padding:.55rem .9rem;cursor:pointer;color:var(--tenue);font-size:.92rem;border-bottom:2px solid transparent}
.tab.attivo{color:var(--blu);border-bottom-color:var(--blu);font-weight:600}
.auth-form{display:flex;flex-direction:column;gap:.75rem}
.auth-nota{margin-top:1rem;font-size:.78rem;color:var(--tenue);text-align:center}

label{display:block;font-size:.82rem;font-weight:600;color:#3c4d5a}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--bordo);border-radius:7px;
  font:inherit;font-size:.9rem;background:#fff;margin-top:.2rem;color:var(--testo)}
input:focus,select:focus{outline:2px solid #9fc6dc;outline-offset:0;border-color:var(--blu)}
label.checkbox{display:flex;gap:.5rem;align-items:flex-start;font-weight:500;margin:.5rem 0}
label.checkbox input{width:auto;margin-top:.15rem}

.btn{background:#fff;border:1px solid var(--bordo);border-radius:8px;padding:.5rem .9rem;
  cursor:pointer;font:inherit;font-size:.88rem;font-weight:600;color:var(--testo);white-space:nowrap}
.btn:hover{background:#f0f5f8}
.btn.primario{background:var(--blu);border-color:var(--blu);color:#fff}
.btn.primario:hover{background:var(--blu-scuro)}
.btn.piccolo{padding:.3rem .6rem;font-size:.8rem}
.btn.grande{padding:.62rem 1.3rem}
.btn.pericolo{color:var(--rosso);border-color:#f0c8c2}
.link{background:none;border:none;color:var(--blu);cursor:pointer;font:inherit;font-size:.85rem;padding:.4rem 0;text-decoration:underline}
.errore{color:var(--rosso);font-size:.86rem;min-height:1rem;margin-top:.6rem}
.errore.blocco{background:#fdf0ee;border:1px solid #f0c8c2;border-radius:8px;padding:.8rem 1rem;margin:1rem 0}

/* ---------- struttura app ---------- */
.topbar{display:flex;align-items:center;gap:1.2rem;background:var(--blu);color:#fff;
  padding:.55rem 1.2rem;position:sticky;top:0;z-index:40;flex-wrap:wrap}
.marchio{font-weight:700;display:flex;align-items:center;gap:.5rem;font-size:.98rem}
#nav{display:flex;gap:.15rem;flex:1;flex-wrap:wrap}
#nav button{background:none;border:none;color:#cfe3ee;padding:.45rem .7rem;border-radius:7px;cursor:pointer;font:inherit;font-size:.86rem}
#nav button:hover{background:rgba(255,255,255,.12);color:#fff}
#nav button.attivo{background:#fff;color:var(--blu);font-weight:700}
.utente{display:flex;align-items:center;gap:.7rem;font-size:.82rem}
.fx{background:rgba(255,255,255,.15);padding:.2rem .5rem;border-radius:20px;font-size:.72rem}
.vista{padding:1.4rem;max-width:1500px;margin:0 auto}
.testa-vista{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---------- quotazione rapida ---------- */
.rapida{background:#fff;border-radius:12px;padding:1.3rem 1.4rem;box-shadow:var(--ombra);margin-bottom:1rem}
.riga-rapida{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}
.campo{position:relative;flex:0 0 150px}
.campo.grande{flex:1 1 330px}
.suggerimenti{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--bordo);
  border-radius:8px;box-shadow:var(--ombra);max-height:300px;overflow:auto;z-index:30;margin-top:2px}
.suggerimenti div{padding:.5rem .7rem;cursor:pointer;font-size:.86rem;border-bottom:1px solid #f0f4f7}
.suggerimenti div:hover{background:var(--blu-chiaro)}
.suggerimenti .cod{font-family:ui-monospace,monospace;color:var(--blu);font-weight:700;margin-right:.5rem}
.suggerimenti .tag{font-size:.7rem;background:var(--blu-chiaro);color:var(--blu);padding:.05rem .4rem;border-radius:10px;margin-left:.4rem}

.pannello{background:#fff;border-radius:12px;padding:1.3rem 1.4rem;box-shadow:var(--ombra);margin-bottom:1rem}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem}
.box h3{padding-bottom:.4rem;border-bottom:2px solid var(--blu-chiaro);margin-bottom:.7rem}
.box label{margin-bottom:.55rem}
.due{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.tre{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
.quattro{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem}
.con-bottone{display:flex;gap:.4rem;align-items:center}
.con-bottone input{flex:1}
details{margin:.5rem 0}
summary{cursor:pointer;font-size:.84rem;color:var(--blu);font-weight:600;padding:.25rem 0}
.azioni-avanzate{display:flex;gap:.6rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--bordo)}
.lista-spese{max-height:230px;overflow:auto;border:1px solid var(--bordo);border-radius:8px;padding:.5rem;margin-top:.4rem}
.lista-spese label{font-weight:400;font-size:.82rem;display:flex;gap:.45rem;align-items:center;padding:.16rem 0}
.lista-spese input{width:auto;margin:0}

.hs-box{border:1px solid var(--bordo);border-radius:8px;max-height:220px;overflow:auto;margin-bottom:.6rem}
.hs-box div{padding:.45rem .6rem;cursor:pointer;font-size:.83rem;border-bottom:1px solid #f0f4f7}
.hs-box div:hover{background:var(--blu-chiaro)}
.hs-info{background:var(--blu-chiaro);border-radius:8px;padding:.6rem .8rem;font-size:.83rem;margin-bottom:.6rem}

/* ---------- risultato ---------- */
.card{background:#fff;border-radius:12px;padding:1.2rem 1.4rem;box-shadow:var(--ombra);margin-bottom:1rem}
.riepilogo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:.3rem}
.kpi{background:linear-gradient(160deg,#fff,#f7fbfd);border:1px solid var(--bordo);border-radius:10px;padding:.85rem 1rem}
.kpi .et{font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--tenue);font-weight:700}
.kpi .val{font-size:1.5rem;font-weight:750;color:var(--blu);margin-top:.15rem;line-height:1.15}
.kpi .nt{font-size:.76rem;color:var(--tenue);margin-top:.15rem}
.kpi.evidenza{background:linear-gradient(160deg,var(--blu),#12607f);border-color:var(--blu)}
.kpi.evidenza .et,.kpi.evidenza .nt{color:#bcd9e8}
.kpi.evidenza .val{color:#fff}

table{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff}
th{text-align:left;padding:.5rem .6rem;background:#eef4f8;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.3px;color:#4a5f6e;border-bottom:1px solid var(--bordo);white-space:nowrap}
td{padding:.45rem .6rem;border-bottom:1px solid #eef2f5;vertical-align:top}
tr:hover td{background:#fafcfd}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab-wrap{overflow-x:auto;border:1px solid var(--bordo);border-radius:10px}
tr.gruppo td{background:#f5f9fb;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.3px;color:#43596a}
tr.totale td{background:var(--blu);color:#fff;font-weight:750;font-size:.95rem}
tr.subtotale td{background:#e8f1f6;font-weight:700}
tr.incluso td{color:var(--tenue)}
.badge{display:inline-block;font-size:.7rem;padding:.1rem .45rem;border-radius:10px;font-weight:700;white-space:nowrap}
.badge.verde{background:#e2f4ec;color:var(--verde)}
.badge.rosso{background:#fdeae7;color:var(--rosso)}
.badge.ambra{background:#fdf3e0;color:var(--ambra)}
.badge.blu{background:var(--blu-chiaro);color:var(--blu)}
.badge.grigio{background:#eef2f5;color:var(--tenue)}
.avviso{background:#fdf6e7;border-left:4px solid var(--ambra);padding:.6rem .9rem;border-radius:0 8px 8px 0;margin-bottom:.5rem;font-size:.85rem}
.nota{background:#eef6fb;border-left:4px solid var(--blu);padding:.6rem .9rem;border-radius:0 8px 8px 0;margin-bottom:.5rem;font-size:.85rem}
.opzione-trasporto{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.55rem .8rem;border:1px solid var(--bordo);border-radius:8px;margin-bottom:.4rem;font-size:.85rem}
.opzione-trasporto.scelta{border-color:var(--verde);background:#f2fbf7;border-width:2px}
.opzione-trasporto.escluso{opacity:.55}
.azioni-risultato{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.barra{height:9px;border-radius:5px;background:#eef2f5;overflow:hidden;display:flex;margin:.5rem 0}
.barra span{display:block;height:100%}

.cerca{max-width:460px;margin-bottom:1rem}
.cerca-hs{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.cerca-hs input{max-width:420px;margin:0}
.cerca-hs select{max-width:230px;margin:0}
.filtri{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.filtri select{max-width:230px;margin:0}

/* ---------- modale ---------- */
.modale{position:fixed;inset:0;background:rgba(9,32,48,.55);display:grid;place-items:center;z-index:100;padding:1rem}
.modale-box{background:#fff;border-radius:12px;max-width:760px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.modale-testa{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;border-bottom:1px solid var(--bordo);position:sticky;top:0;background:#fff}
#modale-corpo{padding:1.3rem}
#modale-corpo .due,#modale-corpo .tre{margin-bottom:.5rem}

.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--blu-scuro);
  color:#fff;padding:.7rem 1.2rem;border-radius:8px;z-index:200;font-size:.88rem;box-shadow:var(--ombra)}
.toast.errore-toast{background:var(--rosso);color:#fff}

@media print{
  .topbar,.rapida,#avanzate,.azioni-risultato,#toggle-avanzate{display:none !important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .vista{padding:0;max-width:none}
}
@media (max-width:720px){
  .due,.tre,.quattro{grid-template-columns:1fr}
  .campo{flex:1 1 100%}
  .topbar{gap:.6rem}
}

/* Pannello email: griglia di configurazione e riga pulsanti */
.griglia-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem;margin:.6rem 0}
.griglia-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;font-weight:600;color:var(--tenue)}
.griglia-form input,.griglia-form select{font:inherit;font-weight:400;color:var(--testo)}
.riga-azioni{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
@media (max-width:760px){.griglia-form{grid-template-columns:1fr}}