/* =========================================================
   SolutionHotel — Gestionale consulenti
   Tema "Mare aperto": abisso, laguna e oro d'ape
   ========================================================= */
:root{
  --abisso:#07202C;
  --notte:#0A2A3A;
  --sea:#124559;
  --sea-2:#237390;
  --laguna:#3FA3B8;
  --schiuma:#DDF0F3;
  --paper:#EDF2F3;
  --surface:#FFFFFF;
  --surface-2:#F4F8F9;
  --ink:#0F2230;
  --muted:#587080;
  --line:#DCE5E9;
  --line-2:#C9D6DC;
  --gold:#A0680F;
  --oro:#E0A63A;
  --green:#277A55;
  --red:#A63E33;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 1px 1px rgba(10,42,58,.04), 0 10px 30px -18px rgba(10,42,58,.35);
  --shadow-up:0 2px 4px rgba(10,42,58,.06), 0 22px 44px -22px rgba(10,42,58,.45);
  --display:'Sora','Instrument Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(63,163,184,.16), transparent 60%),
    radial-gradient(900px 480px at 20% 110%, rgba(224,166,58,.07), transparent 60%),
    var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(63,163,184,.28)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-s);padding:10px 12px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:hover,select:hover,textarea:hover{border-color:#B5C6CE}
input:focus,select:focus,textarea:focus{border-color:var(--sea-2);box-shadow:0 0 0 4px rgba(35,115,144,.14)}
textarea{resize:vertical;min-height:80px;line-height:1.55}
label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:500}
a{color:var(--sea-2)}
h1,h2,h3{font-family:var(--display)}
.num,.metric .v{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--laguna);outline-offset:2px}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(180deg,#17536A,var(--sea));color:#fff;border:1px solid #0E3B4C;
  border-radius:11px;padding:10px 16px;cursor:pointer;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px -10px rgba(10,42,58,.8);
  transition:transform .12s, box-shadow .15s, background .15s;
}
.btn:hover{background:linear-gradient(180deg,#1A5D77,#0F3C4E)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:var(--surface);color:var(--sea);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:#B5C6CE}
.btn.danger{background:var(--red);border-color:#8A3229}
.btn.small{padding:6px 12px;font-size:13.5px;border-radius:9px}
.btn.block{width:100%}

/* ---------- struttura ---------- */
.shell{display:flex;min-height:100vh}
.rail{
  width:232px;flex:0 0 232px;color:#D3E6EC;
  padding:22px 14px 16px;display:flex;flex-direction:column;gap:3px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='260' viewBox='0 0 216 260'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Cpath stroke-opacity='.10' d='M-10 60 C40 40 80 80 130 60 S190 40 230 60'/%3E%3Cpath stroke-opacity='.08' d='M-10 100 C40 80 80 120 130 100 S190 80 230 100'/%3E%3Cpath stroke-opacity='.06' d='M-10 140 C40 120 80 160 130 140 S190 120 230 140'/%3E%3C/g%3E%3Cpath fill='%23ffffff' fill-opacity='.04' d='M0 190 C50 170 100 210 150 190 S200 175 216 185 V260 H0Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.04' d='M0 215 C60 200 110 235 160 215 S205 205 216 210 V260 H0Z'/%3E%3C/svg%3E") bottom center / 100% auto no-repeat,
    radial-gradient(320px 260px at 0% 0%, rgba(63,163,184,.28), transparent 70%),
    linear-gradient(185deg, var(--sea) 0%, var(--notte) 55%, var(--abisso) 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
}
.brand{padding:0 4px 22px}
.brand img{
  display:block;width:100%;max-width:184px;background:#fff;padding:9px 11px;border-radius:14px;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6);
}
.brand small{display:block;margin-top:10px;padding-left:4px;font-size:12px;color:#8DB6C3;letter-spacing:.2px}
.rail a,.rail button.navitem{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  background:none;border:0;color:#BBD4DC;cursor:pointer;text-align:left;width:100%;
  transition:background .15s,color .15s;
}
.rail button.navitem svg{opacity:.8}
.rail button.navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.rail button.navitem.on{
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.rail button.navitem.on svg{opacity:1;color:var(--oro)}
.rail button.navitem.on::before{
  content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--oro);
}
.rail .spacer{flex:1;min-height:20px}
.railfoot{
  padding:12px;margin-top:6px;border-radius:12px;font-size:12.5px;color:#A9C9D3;
  background:rgba(4,20,28,.35);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.08);
}
.railfoot .navitem{padding:7px 8px!important}

.main{flex:1;min-width:0;padding:22px 34px 90px;max-width:1320px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.head h1{font-size:29px;margin:0;letter-spacing:-.8px;font-weight:600;line-height:1.15}
.head p{margin:5px 0 0;color:var(--muted);font-size:14px}

/* ---------- intestazione di Oggi ---------- */
.head.hero{
  position:relative;overflow:hidden;align-items:flex-start;
  margin-bottom:0;padding:34px 34px 74px;border-radius:22px;color:#fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Cpath stroke-opacity='.16' stroke-width='1.2' d='M0 70 C150 40 300 100 450 70 S750 40 900 70 S1100 100 1200 70'/%3E%3Cpath stroke-opacity='.11' stroke-width='1.2' d='M0 110 C160 80 320 140 480 110 S800 80 960 110 S1120 140 1200 110'/%3E%3Cpath stroke-opacity='.08' stroke-width='1.2' d='M0 150 C170 120 340 180 510 150 S850 120 1020 150 S1140 170 1200 150'/%3E%3C/g%3E%3Cpath fill='%23ffffff' fill-opacity='.05' d='M0 180 C200 150 400 210 600 180 S1000 150 1200 180 V220 H0Z'/%3E%3C/svg%3E") bottom center / 100% 150px no-repeat,
    radial-gradient(420px 260px at 88% 10%, rgba(224,166,58,.34), transparent 65%),
    radial-gradient(600px 300px at 10% 120%, rgba(63,163,184,.45), transparent 70%),
    linear-gradient(120deg, var(--notte) 0%, var(--sea) 55%, #1B6680 100%);
  box-shadow:0 30px 60px -36px rgba(7,32,44,.9);
}
.head.hero::after{
  content:"";position:absolute;right:48px;top:26px;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle, #FFE9B8 0%, #F2C265 38%, rgba(224,166,58,.35) 56%, rgba(224,166,58,0) 72%);
  opacity:.9;
}
.head.hero h1{font-size:40px;letter-spacing:-1.2px;color:#fff;position:relative;z-index:1}
.head.hero p{color:#B9D8E1;font-size:15px;position:relative;z-index:1}
.head.hero p::first-letter{text-transform:uppercase}
.hero-metrics{position:relative;z-index:2;margin:-46px 22px 0}
.hero-metrics .metric{box-shadow:var(--shadow-up)}

/* ---------- superfici ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 14px;font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ---------- metriche ---------- */
.metric{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px 15px;box-shadow:var(--shadow);
}
.metric::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--sea-2),var(--laguna));
}
.metric.money::before{background:linear-gradient(90deg,#C0841F,var(--oro))}
.metric.win::before{background:linear-gradient(90deg,var(--green),#4FA67D)}
.metric .k{font-size:13px;color:var(--muted)}
.metric .v{font-family:var(--display);font-size:31px;font-weight:600;letter-spacing:-1px;margin-top:4px;line-height:1.1}
.metric.money .v{color:var(--gold)}
.metric.win .v{color:var(--green)}

/* ---------- liste ---------- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card .list{box-shadow:none;border-radius:var(--radius-s)}
.item{
  position:relative;display:flex;gap:13px;align-items:center;padding:13px 16px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;
}
.item:last-child{border-bottom:0}
.item::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;
  background:var(--oro);transform:scaleY(0);transition:transform .18s;
}
.item:hover{background:linear-gradient(90deg,#F1F8FA,#FFFFFF 70%)}
.item:hover::before{transform:scaleY(1)}
.item .grow{flex:1;min-width:0}
.item .t{font-weight:600;letter-spacing:-.1px}
.item .s{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}

.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);white-space:nowrap;
}
.dot{width:9px;height:9px;border-radius:99px;background:var(--muted);flex:0 0 auto;box-shadow:0 0 0 3px rgba(88,112,128,.12)}
.f-Nuovo{background:#94A9B4;box-shadow:0 0 0 3px rgba(148,169,180,.18)}
.f-Contattato{background:#5A8EA6;box-shadow:0 0 0 3px rgba(90,142,166,.18)}
.f-Interessato{background:#2A8AA6;box-shadow:0 0 0 3px rgba(42,138,166,.18)}
.f-Demoinviata{background:#5E7CB8;box-shadow:0 0 0 3px rgba(94,124,184,.18)}
.f-Trattativa{background:#C28A1C;box-shadow:0 0 0 3px rgba(194,138,28,.2)}
.f-Firmato{background:#277A55;box-shadow:0 0 0 3px rgba(39,122,85,.2)}
.f-Perso{background:#A63E33;box-shadow:0 0 0 3px rgba(166,62,51,.18)}
.hot{color:var(--red);border-color:#EDCBC6;background:#FCF0EE}

.badge{
  margin-left:auto;background:linear-gradient(180deg,#C24B3F,var(--red));color:#fff;font-size:11.5px;font-weight:600;
  min-width:20px;height:20px;border-radius:99px;padding:0 6px;display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(7,32,44,.5);
}
.badge.mini{position:absolute;top:-6px;right:-10px;margin:0;font-size:10px;min-width:16px;height:16px;padding:0 4px}

.empty{padding:38px 18px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);margin-bottom:5px;font-weight:600;font-family:var(--display);font-size:16px}
.card.empty{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23237390'%3E%3Cpath stroke-opacity='.10' stroke-width='1.2' d='M0 70 C150 40 300 100 450 70 S750 40 900 70 S1100 100 1200 70'/%3E%3Cpath stroke-opacity='.07' stroke-width='1.2' d='M0 110 C160 80 320 140 480 110 S800 80 960 110 S1120 140 1200 110'/%3E%3Cpath stroke-opacity='.05' stroke-width='1.2' d='M0 150 C170 120 340 180 510 150 S850 120 1020 150 S1140 170 1200 150'/%3E%3C/g%3E%3Cpath fill='%23237390' fill-opacity='.05' d='M0 180 C200 150 400 210 600 180 S1000 150 1200 180 V220 H0Z'/%3E%3C/svg%3E") bottom center / 100% 90px no-repeat,
    var(--surface);
}

/* ---------- filtri ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:6px 14px;
  cursor:pointer;font-size:13.5px;transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--sea-2);color:var(--sea)}
.chip.on{background:var(--notte);color:#fff;border-color:var(--notte);box-shadow:0 6px 14px -10px rgba(7,32,44,.9)}
.chip:disabled{opacity:.5;cursor:not-allowed}

/* ---------- pannello laterale ---------- */
.overlay{
  position:fixed;inset:0;display:flex;justify-content:flex-end;z-index:50;
  background:rgba(7,32,44,.46);backdrop-filter:blur(1.5px);
  animation:velo .2s ease-out;
}
.panel{
  position:relative;background:var(--paper);width:min(580px,100%);height:100%;overflow-y:auto;
  padding:0 24px 28px;box-shadow:-30px 0 60px -30px rgba(7,32,44,.7);
  animation:entra .26s cubic-bezier(.2,.8,.2,1);
}
.panel > .spread:first-child{
  position:sticky;top:0;z-index:5;margin:0 -24px 18px!important;padding:20px 24px 16px;
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(224,166,58,.28), transparent 70%),
    linear-gradient(120deg,var(--notte),var(--sea));
  color:#fff;
}
.panel > .spread:first-child h2{color:#fff}
.panel > .spread:first-child div div{color:#A9CBD6!important}
.panel > .spread:first-child .btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.panel > .spread:first-child .btn.ghost:hover{background:rgba(255,255,255,.2)}
.panel h2{margin:0 0 2px;font-size:22px;letter-spacing:-.5px;font-weight:600}
.panel .close{position:sticky;top:0}
.stack{display:flex;flex-direction:column;gap:14px}
@keyframes velo{from{opacity:0}to{opacity:1}}
@keyframes entra{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- checklist ---------- */
.check{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.check:last-child{border-bottom:0}
.check:hover span{color:var(--sea)}
.box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);flex:0 0 auto;
  display:grid;place-items:center;background:var(--surface);transition:background .15s,border-color .15s;
}
.box.on{background:var(--green);border-color:var(--green);color:#fff}
.check.done span{color:var(--muted);text-decoration:line-through}

/* ---------- tabella ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:12.5px;color:var(--muted);font-weight:500;padding:11px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
td{padding:11px 12px;border-bottom:1px solid var(--line)}
tbody tr:hover td{background:#F7FBFC}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}

/* ---------- assistente ---------- */
.chat{
  display:flex;flex-direction:column;height:calc(100vh - 200px);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;
}
.msgs{
  flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(63,163,184,.08), transparent 70%),
    var(--surface);
}
.msg{max-width:78%;padding:12px 15px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;line-height:1.55}
.msg.me{
  align-self:flex-end;color:#fff;border-bottom-right-radius:4px;
  background:linear-gradient(135deg,var(--sea-2),var(--sea));box-shadow:0 10px 20px -14px rgba(10,42,58,.9);
}
.msg.ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg img{max-width:190px;border-radius:10px;display:block;margin-bottom:8px}
.composer{border-top:1px solid var(--line);padding:12px;display:flex;gap:9px;align-items:flex-end;background:var(--surface-2)}
.composer textarea{min-height:46px;max-height:150px}
.thinking{display:inline-flex;gap:4px}
.thinking i{width:6px;height:6px;background:var(--sea-2);border-radius:99px;animation:blink 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.2s}
.thinking i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- accesso ---------- */
.login{
  position:relative;overflow:hidden;min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(520px 360px at 82% 18%, rgba(224,166,58,.35), transparent 65%),
    radial-gradient(700px 500px at 0% 100%, rgba(63,163,184,.35), transparent 70%),
    linear-gradient(160deg, var(--sea) 0%, var(--notte) 55%, var(--abisso) 100%);
}
.login::before,.login::after{
  content:"";position:absolute;left:-50%;right:-50%;height:260px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Cpath stroke-opacity='.16' stroke-width='1.2' d='M0 70 C150 40 300 100 450 70 S750 40 900 70 S1100 100 1200 70'/%3E%3Cpath stroke-opacity='.11' stroke-width='1.2' d='M0 110 C160 80 320 140 480 110 S800 80 960 110 S1120 140 1200 110'/%3E%3Cpath stroke-opacity='.08' stroke-width='1.2' d='M0 150 C170 120 340 180 510 150 S850 120 1020 150 S1140 170 1200 150'/%3E%3C/g%3E%3Cpath fill='%23ffffff' fill-opacity='.05' d='M0 180 C200 150 400 210 600 180 S1000 150 1200 180 V220 H0Z'/%3E%3C/svg%3E") center / 50% 100% repeat-x;
}
.login::before{bottom:-30px;opacity:.9;animation:deriva 38s linear infinite}
.login::after{bottom:90px;opacity:.5;animation:deriva 60s linear infinite reverse;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Cpath stroke-opacity='.16' stroke-width='1.2' d='M0 70 C150 40 300 100 450 70 S750 40 900 70 S1100 100 1200 70'/%3E%3Cpath stroke-opacity='.11' stroke-width='1.2' d='M0 110 C160 80 320 140 480 110 S800 80 960 110 S1120 140 1200 110'/%3E%3Cpath stroke-opacity='.08' stroke-width='1.2' d='M0 150 C170 120 340 180 510 150 S850 120 1020 150 S1140 170 1200 150'/%3E%3C/g%3E%3C/svg%3E")}
@keyframes deriva{from{transform:translateX(0)}to{transform:translateX(50%)}}
.loginbox{
  position:relative;z-index:1;background:rgba(255,255,255,.97);border-radius:22px;padding:34px 32px 30px;
  width:min(410px,100%);box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.4);
}
.loginbox::before{
  content:"";position:absolute;left:32px;right:32px;top:0;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--laguna),var(--oro));
}
.logo-login{display:block;width:200px;max-width:72%;margin:0 0 12px}
.loginbox p.sub{margin:0 0 24px;color:var(--muted);font-size:15px;font-family:var(--display);font-weight:500}
.alert{background:#FCF0EE;border:1px solid #EDCBC6;color:var(--red);padding:11px 13px;border-radius:var(--radius-s);font-size:13.5px}
.ok{background:#ECF6F1;border-color:#C3E1D2;color:var(--green)}

/* ---------- mobile ---------- */
.mobilenav{display:none}
@media (max-width:1100px){
  .main{padding:20px 24px 90px}
  .head.hero{padding:28px 26px 70px}
  .head.hero h1{font-size:34px}
}
@media (max-width:860px){
  .rail{display:none}
  .main{padding:18px 15px 100px}
  .g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:12px}
  .head h1{font-size:24px}
  .head.hero{padding:24px 20px 64px;border-radius:18px}
  .head.hero h1{font-size:29px}
  .head.hero::after{width:54px;height:54px;right:22px;top:20px}
  .hero-metrics{margin:-42px 10px 0}
  .metric{padding:13px 14px}
  .metric .v{font-size:25px}
  .panel{width:100%;padding:0 16px 24px}
  .panel > .spread:first-child{margin:0 -16px 16px!important;padding:16px}
  .msg{max-width:88%}
  .chat{height:calc(100vh - 250px)}
  .mobilenav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(10,42,58,.94),rgba(7,32,44,.98));
    backdrop-filter:blur(10px);box-shadow:0 -12px 30px -18px rgba(7,32,44,.9);
  }
  .mobilenav button{
    flex:1;background:none;border:0;color:#93B7C3;font-size:11px;padding:7px 2px;
    display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  }
  .mobilenav button.on{color:#fff}
  .mobilenav button.on svg{color:var(--oro)}
}
@media (max-width:520px){
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:1fr}
  .hero-metrics.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- video di formazione ---------- */
.video{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:var(--abisso)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mobilenav{overflow-x:auto}
.mobilenav button{min-width:62px}

/* ---------- barra superiore (solo schermi stretti) ---------- */
.topbar{display:none}
@media (max-width:860px){
  .topbar{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;
    padding:10px 15px;margin:-18px -15px 16px;
    background:linear-gradient(180deg,rgba(10,42,58,.96),rgba(18,69,89,.94));
    backdrop-filter:blur(10px);box-shadow:0 10px 24px -18px rgba(7,32,44,.9);
  }
  .topbar img{height:30px;background:#fff;padding:4px 8px;border-radius:9px}
  .topbar span{flex:1;text-align:right;color:#9FC0CC;font-size:12.5px}
  .topbar button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12.5px;
    padding:5px 12px;border-radius:99px;cursor:pointer}
}

/* ---------- barra in alto e accesso operativo ---------- */
.deskbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 18px;font-size:13px;color:var(--muted)}
.accesso{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
  background:linear-gradient(180deg,#EDB54C,#C98D24);color:#2A1A02;border:1px solid #B07A1B;border-radius:99px;
  padding:8px 16px;font-size:13.5px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -12px rgba(160,104,15,.9);
  transition:transform .12s, box-shadow .15s;
}
.accesso:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -12px rgba(160,104,15,.95)}
.accesso:focus-visible{outline:2px solid var(--sea-2);outline-offset:2px}
.accesso.vuoto{background:transparent;color:var(--gold);border:1px dashed var(--gold);box-shadow:none}
.docnum{
  display:inline-block;margin-right:9px;padding:1px 8px;border-radius:6px;font-size:12.5px;font-weight:600;
  font-family:var(--display);color:var(--sea);background:var(--schiuma);border:1px solid #C3E2E8;
}
@media (max-width:860px){
  .deskbar{display:none}
  .topbar .accesso{padding:5px 12px;font-size:12.5px}
  .topbar .accesso.vuoto{color:#F2D29B;border-color:#F2D29B}
}
@media (max-width:420px){
  .topbar span{display:none}
  .topbar .accesso{margin-left:auto}
}
.check.scelto span{color:var(--ink);font-weight:600}