/* ============================================================================
   BUYER24 ASTE web-app — shell (login, sidebar, viste, tema chiaro).
   Si somma a stile.css (brand scuro warm-charcoal): qui SOLO struttura app
   e i token del tema chiaro.
   ============================================================================ */

/* ---------- tema chiaro (stile Apple/Linear: pulito, arioso) ---------- */
html[data-tema="chiaro"]{
  --bg:#f4f3f0; --bg2:#ffffff; --bg3:#f1efeb; --bg4:#e5e2dc;
  --line:#e2dfd8; --line2:#cfcbc2;
  --ink:#1d1c1a; --ink-dim:#5c5952; --ink-faint:#8d897f;
  --blu:#2f6fc4; --blu-chiaro:#2a66b8; --blu-soft:rgba(47,111,196,.10);
  --verde:#2e8f57; --verde-chiaro:#247a49; --verde-soft:rgba(46,143,87,.10);
  --rosso:#c24936; --rosso-chiaro:#b13c2a; --rosso-soft:rgba(194,73,54,.10);
  --giallo:#a97a12; --giallo-soft:rgba(196,144,26,.12);
  --ombra-1:0 1px 2px rgba(40,35,25,.08);
  --ombra-2:0 6px 24px rgba(40,35,25,.10);
  --ombra-3:0 16px 48px rgba(40,35,25,.16);
}
html[data-tema="chiaro"] body{
  background:
    radial-gradient(1100px 480px at 18% -12%, rgba(47,111,196,.06), transparent 62%),
    var(--bg);
}
html[data-tema="chiaro"] header{background:rgba(244,243,240,.82); border-bottom-color:var(--line);}
html[data-tema="chiaro"] #testoLotti{background:var(--bg3);}
html[data-tema="chiaro"] .tettoBig.grigio{background:var(--bg3);}
html[data-tema="chiaro"] .badgeFonte.buyer24{color:#5d4fb3; background:rgba(109,95,205,.10); border-color:rgba(109,95,205,.35);}
html[data-tema="chiaro"] .bandaTrack .fascia{background:rgba(29,28,26,.10);}
html[data-tema="chiaro"] .btn.blu{background:linear-gradient(180deg,#3b7cd4,#2f6fc4); color:#fff;}
html[data-tema="chiaro"] .logoMark{box-shadow:0 2px 10px rgba(47,111,196,.30), inset 0 1px 0 rgba(255,255,255,.35);}

/* ---------- porta d'ingresso (SaaS gate) ---------- */
#vistaLogin{ min-height:100vh; display:grid; place-items:center; padding:clamp(16px,4vw,40px); }
.gate{
  width:min(1040px, 100%);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px);
  align-items:center; animation:cardIn var(--t-med) var(--ease);
}
@media (max-width:840px){
  .gate{ grid-template-columns:1fr; gap:22px; max-width:440px; }
  /* su mobile prima il form (chi rientra accede subito), poi la vetrina */
  .gateAuth{ order:1; }
  .gateHero{ order:2; text-align:center; }
  .gateHero .logo,.gateTrust{ justify-content:center; }
  .gateSub{ margin-inline:auto; }
  .gateBack{ justify-self:center; margin-bottom:6px; }
}

/* colonna vetrina */
.gateBack{
  grid-column:1 / -1; justify-self:start;
  display:inline-flex; align-items:center; gap:6px;
  color:#5b6270; font-weight:700; font-size:.9rem; text-decoration:none;
  margin-bottom:2px; padding:6px 2px; transition:color var(--t-fast,.15s) var(--ease,ease);
}
.gateBack:hover{ color:#0b1220; }
.gateBack span{ font-size:1.1rem; line-height:1; }
.gateHero .logo{ margin-bottom:22px; }
.gateHero .logoTesto b{ font-size:1.28rem; }
.gateTitolo{
  font-size:clamp(1.7rem, 3.3vw, 2.35rem); font-weight:800; line-height:1.13;
  letter-spacing:-.025em; margin-bottom:14px;
}
.gateTitolo em{ font-style:normal; color:var(--blu-chiaro); }
.gateSub{ color:var(--ink-dim); font-size:1rem; line-height:1.6; margin-bottom:22px; max-width:47ch; }
.gateBullet{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; }
.gateBullet li{ position:relative; padding-left:30px; font-size:.94rem; line-height:1.45; text-align:left; }
.gateBullet li::before{
  content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  background:var(--verde-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2363cf8e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.gateTrust{ display:flex; flex-wrap:wrap; gap:7px 16px; }
.gateTrust span{ position:relative; padding-left:17px; font-size:.82rem; font-weight:600; color:var(--ink-dim); }
.gateTrust span::before{ content:"✓"; position:absolute; left:0; color:var(--verde-chiaro); font-weight:800; }

/* colonna accesso */
.gateAuth{ width:100%; }
.gateCard{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px; box-shadow:var(--ombra-3);
}
.segmenti{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--bg); border:1px solid var(--line); border-radius:11px; margin-bottom:20px;
}
.segmento{
  border:none; background:transparent; color:var(--ink-dim); cursor:pointer;
  padding:9px; border-radius:8px; font-size:.9rem; font-weight:700; font-family:inherit;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmento:hover{ color:var(--ink); }
.segmento.attivo{ background:var(--bg3); color:var(--ink); box-shadow:var(--ombra-1); }
.gatePannello .campo{ min-width:0; margin-bottom:13px; }
.gatePannello .campo input{ width:100%; }
.gateDue{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gateDue .campo{ margin-bottom:13px; }
.campo .opz{ text-transform:none; font-weight:500; color:var(--ink-faint); letter-spacing:0; }
.gatePannello .btn{ width:100%; justify-content:center; padding:11px; font-size:.95rem; margin-top:4px; }
.gateProvaIntro{ font-size:.86rem; color:var(--ink-dim); line-height:1.5; margin-bottom:16px; }
.gateProvaIntro b{ color:var(--ink); }
#erroreLogin,#erroreProva{ color:var(--rosso-chiaro); font-size:.83rem; min-height:1.1em; margin-top:9px; text-align:center; }
.gateSwitch{ font-size:.84rem; color:var(--ink-faint); text-align:center; margin-top:14px; }
.gateSwitch a{ color:var(--blu-chiaro); font-weight:600; cursor:pointer; }
.gateSwitch a:hover{ text-decoration:underline; }
.gatePie{ text-align:center; font-size:.76rem; color:var(--ink-faint); margin-top:16px; }

/* conferma prova */
.gateFatto{ text-align:center; padding:14px 6px 8px; }
.gateSpunta{
  width:54px; height:54px; margin:4px auto 15px; border-radius:50%;
  background:linear-gradient(180deg,var(--verde-chiaro),var(--verde));
  display:grid; place-items:center; box-shadow:0 8px 22px var(--verde-soft);
  animation:cardIn var(--t-med) var(--ease);
}
.gateFatto h3{ font-size:1.15rem; font-weight:800; margin-bottom:8px; }
.gateFatto p{ color:var(--ink-dim); font-size:.9rem; line-height:1.55; margin:0 auto 18px; max-width:36ch; }
.gateFatto .btn{ width:auto; padding:9px 18px; }

/* CTA verde (prova) */
.btn.verde{ background:linear-gradient(180deg,var(--verde-chiaro),var(--verde)); border-color:transparent; color:#06301a; }
.btn.verde:hover{ background:linear-gradient(180deg,#72d99b,#47b876); }

/* badge "richieste di prova" nuove (admin) */
.badgeProve{
  display:inline-block; min-width:20px; padding:1px 7px; margin-left:8px;
  font-size:.74rem; font-weight:800; text-align:center; vertical-align:middle;
  color:#fff; background:var(--rosso); border-radius:99px;
}

/* ---------- shell: sidebar + contenuto ---------- */
#app{display:none;}
#app.on{display:block;}
.btnHamburger{
  display:inline-flex; flex-direction:column; gap:4px; justify-content:center;
  width:38px; height:38px; padding:9px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg3);
  transition:background var(--t-fast) var(--ease);
}
.btnHamburger:hover{background:var(--bg4);}
.btnHamburger i{display:block; height:2px; border-radius:1px; background:var(--ink); transition:transform var(--t-med) var(--ease), opacity var(--t-fast);}
body.navAperta .btnHamburger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.navAperta .btnHamburger i:nth-child(2){opacity:0;}
body.navAperta .btnHamburger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

#sidebar{
  position:fixed; top:0; left:0; bottom:0; width:264px; z-index:90;
  background:var(--bg2); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform var(--t-med) var(--ease);
  display:flex; flex-direction:column; padding:14px;
  box-shadow:var(--ombra-3);
}
body.navAperta #sidebar{transform:none;}
#veloNav{position:fixed; inset:0; background:rgba(10,10,10,.45); z-index:80; opacity:0; pointer-events:none; transition:opacity var(--t-med) var(--ease);}
body.navAperta #veloNav{opacity:1; pointer-events:auto;}
#sidebar .testataNav{display:flex; align-items:center; gap:10px; padding:6px 8px 16px;}
#sidebar nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto;}
.vocenav{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:var(--ink-dim); font-weight:600; font-size:.9rem; cursor:pointer;
  border:none; background:none; text-align:left; width:100%;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.vocenav svg{flex:none; opacity:.7;}
.vocenav:hover{background:var(--bg3); color:var(--ink);}
.vocenav.attiva{background:var(--blu-soft); color:var(--blu-chiaro);}
.vocenav.attiva svg{opacity:1;}
.separatoreNav{height:1px; background:var(--line); margin:8px 4px;}
#sidebar .piedeNav{padding:10px 8px 4px; font-size:.72rem; color:var(--ink-faint);}

/* ---------- viste ---------- */
.vista{display:none;}
.vista.on{display:block; animation:cardIn var(--t-med) var(--ease);}
.titoloVista{font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-bottom:4px;}
.sottoVista{color:var(--ink-dim); font-size:.9rem; margin-bottom:20px; max-width:70ch;}
.schedona{
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px; box-shadow:var(--ombra-1); margin-bottom:16px;
}
.schedona h3{font-size:1rem; font-weight:700; margin-bottom:12px;}
.grigliaCampi{display:flex; gap:20px; flex-wrap:wrap;}
.azioniScheda{display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap;}
.esitoSalva{font-size:.85rem; font-weight:600; color:var(--verde-chiaro);}
/* credenziali appena generate: devono saltare all'occhio, non sparire nel grigio */
.credDealer{display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:.4rem; padding:.55rem .8rem; border:1px solid var(--verde-chiaro);
  border-radius:9px; background:var(--verde-soft);}
.credDealer code{font-weight:700; user-select:all; letter-spacing:.02em;}
.credDealer small{flex-basis:100%; font-weight:400; opacity:.8;}

/* blocco opzionale a fisarmonica (es. Trasporto nelle regole) */
.bloccoOpzionale{margin-top:18px; border-top:1px solid var(--line); padding-top:14px;}
.bloccoOpzionale > summary{
  cursor:pointer; font-weight:700; font-size:.95rem; list-style:none;
  display:flex; align-items:center; gap:9px; user-select:none;
}
.bloccoOpzionale > summary::-webkit-details-marker{display:none;}
.bloccoOpzionale > summary::before{
  content:"›"; display:inline-block; font-size:1.1rem; color:var(--ink-dim);
  transition:transform var(--t-fast) var(--ease);
}
.bloccoOpzionale[open] > summary::before{transform:rotate(90deg);}
.bloccoOpzionale > summary + .hint{margin-top:8px;}
.bloccoOpzionale .grigliaCampi{margin-top:12px;}

/* tooltip "?" */
.aiuto{
  display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:var(--bg4); color:var(--ink-dim); font-size:.68rem; font-weight:800;
  cursor:help; margin-left:6px; vertical-align:1px; position:relative; border:none;
}
.aiuto:hover{background:var(--blu); color:#fff;}
.aiuto .fumetto{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  width:240px; background:var(--bg4); border:1px solid var(--line2); border-radius:9px;
  padding:9px 11px; font-size:.75rem; font-weight:500; color:var(--ink); text-align:left;
  opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  box-shadow:var(--ombra-2); z-index:50; line-height:1.45;
}
.aiuto:hover .fumetto, .aiuto:focus .fumetto{opacity:1; transform:translateX(-50%) translateY(0);}

/* tabelle app (profili, admin, CRM) */
table.appTab{width:100%; border-collapse:collapse; font-size:.85rem;}
table.appTab th{text-align:left; padding:9px 10px; color:var(--ink-faint); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line);}
table.appTab td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.appTab tr:last-child td{border-bottom:none;}
table.appTab td.num{text-align:right; font-variant-numeric:tabular-nums;}
table.appTab th.num{text-align:right;}

/* barra progresso "il tuo buyer" */
.barraProgresso{height:8px; border-radius:4px; background:var(--bg4); overflow:hidden; margin:8px 0 4px;}
.barraProgresso i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--blu), var(--verde));
  transition:width .5s var(--ease);}

/* zona input multimodale */
#zonaInput.trascina{border-color:var(--blu); box-shadow:0 0 0 4px var(--blu-soft), var(--ombra-2);}
.pillolaFile{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg3);
  border:1px solid var(--line); border-radius:99px; padding:6px 13px; font-size:.8rem; font-weight:600;
}
.pillolaFile .tipoFile{color:var(--blu-chiaro); text-transform:uppercase; font-size:.68rem; font-weight:800;}
#statoLavoro{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-dim);}
.rotellina{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--bg4);
  border-top-color:var(--blu); animation:gira .8s linear infinite; flex:none;
}
@keyframes gira{to{transform:rotate(360deg);}}

/* skeleton durante i calcoli */
.scheletro{position:relative; overflow:hidden; background:var(--bg3); border-radius:8px; min-height:14px;}
.scheletro::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation:luccica 1.2s infinite;}
@keyframes luccica{from{transform:translateX(-100%);} to{transform:translateX(100%);}}

/* onboarding */
.sceltaPc{display:flex; gap:14px; margin:18px 0;}
.sceltaPc button{
  flex:1; padding:20px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg3); color:var(--ink); font-weight:700; font-size:.95rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sceltaPc button:hover{border-color:var(--blu); background:var(--blu-soft); transform:translateY(-2px);}
.sceltaPc svg{opacity:.8;}

/* stampa: sempre chiara, con logo (regole extra in stile.css @media print) */
#testataStampa{display:none;}
@media print{
  #sidebar, #veloNav, .btnHamburger, .vista:not(#vistaAnalizza){display:none !important;}
  #testataStampa{display:flex !important; align-items:center; gap:14px; margin-bottom:12px;}
  #testataStampa img{max-height:52px; max-width:200px;}
  #testataStampa .dchi{font-size:11pt; font-weight:700; color:#111;}
  #testataStampa .dquando{font-size:9pt; color:#555; margin-left:auto;}
  /* si stampano SOLO le auto selezionate: le escluse spariscono del tutto */
  #tabellaLotti tbody tr.esclusoStampa{display:none !important;}
}
@media(max-width:720px){
  header{padding:10px 12px;}
  .chipBuyer span{display:none;}
  main{padding:14px;}
}

/* selezione lotti: colonna spunte + esclusi non stampati */
td.colSel, th.colSel{width:30px; text-align:center;}
td.colSel input{accent-color:var(--blu); width:15px; height:15px; cursor:pointer;}
tr.esclusoStampa td:not(.colSel){opacity:.38;}
@media print{
  tr.esclusoStampa{display:none !important;}
  td.colSel, th.colSel{display:none !important;}
  .chipBuyer{display:none !important;}
}

/* stima del buyer: GIALLA e dichiarata, mai confondibile col mercato reale */
.badgeFonte.stima_ai{color:var(--giallo); background:var(--giallo-soft); border:1px solid rgba(224,168,61,.4);}

/* ============================================================================
   Rifinitura "luxury": micro-interazioni discrete (rispettano reduced-motion,
   neutralizzate dal blocco @media (prefers-reduced-motion) in stile.css).
   ============================================================================ */
/* entrata a cascata delle schede quando apri una vista */
@keyframes saleDolce{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.vista.on .schedona,
.vista.on .titoloVista,
.vista.on .sottoVista{animation:saleDolce var(--t-med) var(--ease) both;}
.vista.on .titoloVista{animation-delay:.02s;}
.vista.on .sottoVista{animation-delay:.06s;}
.vista.on .schedona:nth-of-type(1){animation-delay:.10s;}
.vista.on .schedona:nth-of-type(2){animation-delay:.16s;}
.vista.on .schedona:nth-of-type(3){animation-delay:.22s;}
.vista.on .schedona:nth-of-type(4){animation-delay:.28s;}
.vista.on .schedona:nth-of-type(n+5){animation-delay:.32s;}

/* le schede reagiscono al passaggio del mouse: micro-sollevamento */
.schedona{transition:box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);}
.schedona:hover{box-shadow:var(--ombra-2); border-color:var(--line2);}

/* voce di menu attiva: barretta d'accento che scorre da sinistra */
.vocenav{position:relative;}
.vocenav::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scaleY(0);
  width:3px; height:60%; border-radius:0 3px 3px 0; background:var(--blu);
  transition:transform var(--t-med) var(--ease);
}
.vocenav.attiva::before{transform:translateY(-50%) scaleY(1);}

/* righe della shortlist: sollevamento morbido al hover */
table.shortlist tbody tr{transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);}
table.shortlist tbody tr:hover{transform:translateX(2px);}

/* pillole verdetto: pulsazione UNA volta quando diventano verdi (VAI) */
@keyframes battito{0%{transform:scale(1);}40%{transform:scale(1.08);}100%{transform:scale(1);}}
.pillSem.verde .dot{animation:battito 1.1s var(--ease) 1;}

/* bottone primario: brillio sottile di conferma al passaggio */
.btn.blu{position:relative; overflow:hidden;}
.btn.blu::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.btn.blu:hover::after{transform:translateX(120%);}

/* ============================ Il mio salone (dealer) ============================ */
.grigliaAbb{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start;}
.abbStato{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 14px; border-radius:999px; align-self:flex-start;
}
.abbStato.abbAttivo{background:var(--verde-soft); color:var(--verde-chiaro); border:1px solid rgba(52,168,110,.4);}
.abbStato.abbProva{background:var(--blu-soft); color:var(--blu-chiaro); border:1px solid rgba(59,125,216,.4);}
.abbStato.abbSospeso,.abbStato.abbScaduto{background:var(--giallo-soft); color:var(--giallo); border:1px solid rgba(224,168,61,.4);}
.abbGriglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 26px; flex:1; min-width:220px;}
.abbVoce{display:flex; flex-direction:column; gap:2px;}
.abbVoce span{font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
.abbVoce b{font-size:.95rem; color:var(--ink);}
tr.invVenduta td:not(:last-child){opacity:.55;}
.tagOpz{
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; vertical-align:middle;
  color:var(--ink-dim); background:var(--bg4); border:1px solid var(--line); border-radius:999px; padding:2px 9px; margin-left:8px;
}

/* dettaglio dealer (admin) */
.ddGriglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:12px 0 4px;}
.ddGriglia b{font-size:.9rem;}
#ddCorpo{overflow-y:auto; max-height:calc(88vh - 90px); padding-right:4px;}
#ddCorpo h4{font-size:.95rem; font-weight:700; margin:20px 0 8px; padding-top:14px; border-top:1px solid var(--line);}
table.ddTab{font-size:.8rem;}
table.ddTab .hint{color:var(--ink-faint);}

/* ------------------- ponte prezzi: badge fonte + freschezza ------------------- */
/* PREZZO TARATO: la fonte più affidabile (verde pieno, si distingue dal mercato) */
.badgeFonte.prezzo_tarato{color:var(--verde-chiaro); background:var(--verde-soft); border:1px solid rgba(63,174,107,.45);}
html[data-tema="chiaro"] .badgeFonte.prezzo_tarato{color:#217a48; background:rgba(63,174,107,.12); border-color:rgba(33,122,72,.4);}
/* STIMA DA VERIFICARE: gialla come tutte le stime */
.badgeFonte.stima_ponte{color:var(--giallo); background:var(--giallo-soft); border:1px solid rgba(224,168,61,.4);}
/* freschezza del prezzo: "aggiornato N giorni fa" accanto al badge */
.freschezza{
  font-size:.64rem; font-weight:600; letter-spacing:.02em; vertical-align:middle;
  color:var(--ink-faint); margin-left:6px; white-space:nowrap;
}
.freschezza.da_rinfrescare{color:var(--giallo);}
.freschezza.vecchio{color:var(--rosso-chiaro);}