/* ═══════════════════════════════════════════════════════════════════
   CecchinatoHR - Fringe Benefit Veicoli (struttura)
   Token, pulsanti e componenti comuni: chr-brand.css
═══════════════════════════════════════════════════════════════════ */

#chr-fringe-calc .chrfb-card{ padding:20px; background:var(--soft); box-shadow:none; overflow:visible; }
@media (max-width:640px){ #chr-fringe-calc .chrfb-card{ padding:12px; } }

/* ── Stepper ── */
#chr-fringe-calc .chrfb-stepper{
  display:flex; gap:6px; flex-wrap:wrap; list-style:none; margin:0 0 16px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
}
#chr-fringe-calc .chrfb-stepper li{
  display:flex; align-items:center; gap:10px; margin:0; padding:8px 18px 8px 8px;
  border:1px solid transparent; border-radius:var(--pill); color:var(--muted);
  transition:background-color .2s, border-color .2s, color .2s;
}
#chr-fringe-calc .chrfb-stepper li span{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; background:var(--tint); color:var(--azure);
}
#chr-fringe-calc .chrfb-stepper li b{ font-size:.95rem; font-weight:600; }
#chr-fringe-calc .chrfb-stepper li span i{ font-style:normal; }
#chr-fringe-calc .chrfb-stepper li{ list-style:none; }
#chr-fringe-calc .chrfb-stepper li.is-on{ color:var(--navy); background:var(--tint); border-color:var(--line-3); }
#chr-fringe-calc .chrfb-stepper li.is-on span{ background:var(--azure); color:#fff; }
#chr-fringe-calc .chrfb-stepper li.is-done span{ background:var(--navy); color:#fff; }
#chr-fringe-calc .chrfb-stepper li.is-done span::before{ content:"\2713"; }
#chr-fringe-calc .chrfb-stepper li.is-done span i{ display:none; }

/* ── Layout fasi ── */
#chr-fringe-calc .chrfb-stage[hidden]{ display:none; }
#chr-fringe-calc .chrfb-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:16px; align-items:start; }
@media (max-width:900px){ #chr-fringe-calc .chrfb-grid{ grid-template-columns:minmax(0,1fr); } }
#chr-fringe-calc .chrfb-panel{ padding:22px; }
@media (max-width:640px){ #chr-fringe-calc .chrfb-panel{ padding:18px 16px; } }
#chr-fringe-calc .chrfb-panel h3{ margin:0 0 14px; font-size:1.2rem; }
#chr-fringe-calc .chrfb-field{ margin:0 0 14px; position:relative; min-width:0; }
#chr-fringe-calc .chrfb-field[hidden]{ display:none; }
#chr-fringe-calc .chrfb-row-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:560px){ #chr-fringe-calc .chrfb-row-2{ grid-template-columns:minmax(0,1fr); gap:0; } }

/* ── Autocompletamento marca / modello ── */
#chr-fringe-calc .chrfb-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  max-height:300px; overflow:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:0 20px 50px rgba(19,31,63,.16);
}
#chr-fringe-calc .chrfb-suggest[hidden]{ display:none; }
#chr-fringe-calc .chrfb-field.chrfb-ac small.hint{ display:none; }
#chr-fringe-calc .chrfb-suggest .it{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--line); color:var(--text); font-size:.93rem; cursor:pointer;
}
#chr-fringe-calc .chrfb-suggest .it:last-child{ border-bottom:0; }
#chr-fringe-calc .chrfb-suggest .it mark{ background:transparent; color:var(--azure); font-weight:600; }
#chr-fringe-calc .chrfb-suggest .it:hover, #chr-fringe-calc .chrfb-suggest .it.is-active{ background:var(--tint); color:var(--navy); }
#chr-fringe-calc .chrfb-suggest .it .tag{ flex-shrink:0; font-size:.72rem; font-weight:600; color:var(--azure); background:var(--tint); border:1px solid var(--line-3); border-radius:var(--pill); padding:2px 8px; white-space:nowrap; }
#chr-fringe-calc .chrfb-suggest .empty{ padding:12px 14px; color:var(--muted); font-size:.88rem; }
#chr-fringe-calc .chrfb-suggest .more{ padding:8px 14px; color:var(--muted2); font-size:.78rem; border-top:1px solid var(--line); }

/* ── Riepilogo ── */
#chr-fringe-calc .chrfb-summary{ display:grid; margin:0 0 12px; padding:4px 16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
#chr-fringe-calc .chrfb-summary div{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
#chr-fringe-calc .chrfb-summary div:last-child{ border-bottom:0; }
#chr-fringe-calc .chrfb-summary dt{ color:var(--muted); font-size:.88rem; font-weight:500; margin:0; }
#chr-fringe-calc .chrfb-summary dd{ color:var(--navy); font-weight:600; text-align:right; margin:0; min-width:0; overflow-wrap:anywhere; }
#chr-fringe-calc .chrfb-side .chrfb-note{ margin-top:12px; }

/* ── Note ── */
#chr-fringe-calc .chrfb-note{
  padding:14px 16px; border:1px solid var(--line-3); border-radius:var(--r);
  background:var(--tint); color:var(--text); font-size:.88rem; line-height:1.6;
}
#chr-fringe-calc .chrfb-note[hidden]{ display:none; }
#chr-fringe-calc .chrfb-note b{ color:var(--navy); font-weight:600; }
#chr-fringe-calc .chrfb-note a{ color:var(--azure); font-weight:600; }
#chr-fringe-calc .chrfb-note.is-warn{ background:var(--amber-s); border-color:var(--amber-b); color:#6B4210; }

/* ── Azioni ── */
#chr-fringe-calc .chrfb-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:18px; }
#chr-fringe-calc .chrfb-actions.split{ justify-content:space-between; }
#chr-fringe-calc .chrfb-actions.center{ justify-content:center; margin-top:16px; }
#chr-fringe-calc .chrfb-error{ margin:6px 0 0; }
#chr-fringe-calc .chrfb-error[hidden]{ display:none; }

/* ── Anteprima regime (fase 2) ── */
#chr-fringe-calc .chrfb-regime{ padding:16px 18px; border:1px solid var(--line-3); border-radius:var(--r); background:#fff; margin-bottom:14px; }
#chr-fringe-calc .chrfb-regime-badge{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--pill);
  background:var(--azure); color:#fff; font-size:.88rem; font-weight:600; line-height:1.2;
  transition:background-color .25s;
}
#chr-fringe-calc .chrfb-regime-badge.is-empty{ background:var(--tint-2); color:var(--muted); }
#chr-fringe-calc .chrfb-regime-badge.is-safeguard{ background:var(--navy); }
#chr-fringe-calc .chrfb-regime-badge.is-valnorm{ background:var(--amber-a); color:#3B2604; }
#chr-fringe-calc .chrfb-regime-badge.is-error{ background:var(--red-s); color:var(--red); }
#chr-fringe-calc .chrfb-regime-text{ margin:10px 0 0; color:var(--muted); font-size:.88rem; line-height:1.55; }
#chr-fringe-calc .chrfb-regime-text b{ color:var(--navy); font-weight:600; }
#chr-fringe-calc .chrfb-regime-pct{ display:block; margin-top:8px; font-size:1.6rem; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
#chr-fringe-calc .chrfb-regime-pct small{ font-size:.82rem; font-weight:500; color:var(--muted); margin-left:6px; }

/* ── Timeline regimi (l'elemento distintivo del calcolatore) ── */
#chr-fringe-calc .chrfb-timeline{ display:grid; grid-template-columns:1fr 1fr 1.6fr 1.6fr; gap:4px; margin:0 0 14px; }
#chr-fringe-calc .chrfb-tl{
  position:relative; padding:34px 8px 10px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); min-width:0;
  transition:background-color .3s, border-color .3s;
}
#chr-fringe-calc .chrfb-tl::before{ /* binario */
  content:""; position:absolute; left:8px; right:8px; top:14px; height:6px; border-radius:6px; background:var(--tint-2);
}
#chr-fringe-calc .chrfb-tl .p{ font-size:.72rem; color:var(--muted); font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
#chr-fringe-calc .chrfb-tl .r{ font-size:.72rem; color:var(--muted2); margin-top:3px; line-height:1.3; }
#chr-fringe-calc .chrfb-tl.is-on{ background:var(--tint); border-color:var(--azure); }
#chr-fringe-calc .chrfb-tl.is-on::before{ background:var(--azure); }
#chr-fringe-calc .chrfb-tl.is-on .p{ color:var(--navy); }
#chr-fringe-calc .chrfb-tl.is-on .r{ color:var(--azure-d); font-weight:600; }
#chr-fringe-calc .chrfb-tl.is-safeguard{ background:#F1F4F9; border-color:var(--navy); }
#chr-fringe-calc .chrfb-tl.is-safeguard::before{ background:var(--navy); }
#chr-fringe-calc .chrfb-tl.is-valnorm{ background:var(--amber-s); border-color:var(--amber-b); }
#chr-fringe-calc .chrfb-tl.is-valnorm::before{ background:var(--amber-a); }
#chr-fringe-calc .chrfb-tl .dot{ /* marcatore data contratto */
  position:absolute; top:9px; width:16px; height:16px; border-radius:50%; background:#fff; border:4px solid var(--azure);
  transform:translateX(-50%); box-shadow:0 0 0 3px rgba(0,141,210,.15); display:none;
}
#chr-fringe-calc .chrfb-tl.is-on .dot{ display:block; }
#chr-fringe-calc .chrfb-tl.is-safeguard .dot{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,48,89,.15); }
#chr-fringe-calc .chrfb-tl.is-valnorm .dot{ border-color:var(--amber-a); box-shadow:0 0 0 3px rgba(242,165,65,.2); }
@media (max-width:560px){
  #chr-fringe-calc .chrfb-timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── Risultato ── */
#chr-fringe-calc .chrfb-result{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; display:grid; gap:14px; }
@media (max-width:640px){ #chr-fringe-calc .chrfb-result{ padding:16px; } }
#chr-fringe-calc .chrfb-block{ min-width:0; }
#chr-fringe-calc .chrfb-block[hidden]{ display:none; }
#chr-fringe-calc .chrfb-res-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
#chr-fringe-calc .chrfb-kicker{ color:var(--azure); font-size:.88rem; font-weight:600; }
#chr-fringe-calc .chrfb-res-title h3{ margin:2px 0 8px; font-size:1.5rem; line-height:1.2; }
#chr-fringe-calc .chrfb-chips{ display:flex; gap:6px; flex-wrap:wrap; }
#chr-fringe-calc .chrfb-chips span{ padding:5px 12px; border:1px solid var(--line-3); border-radius:var(--pill); background:var(--tint); color:var(--azure-d); font-size:.8rem; font-weight:600; white-space:nowrap; }
#chr-fringe-calc .chrfb-chips span.navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
#chr-fringe-calc .chrfb-res-note{ max-width:320px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--soft); color:var(--text); font-size:.88rem; line-height:1.5; }
#chr-fringe-calc .chrfb-res-note[hidden]{ display:none; }
#chr-fringe-calc .chrfb-res-note b{ color:var(--navy); }

#chr-fringe-calc .chrfb-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:640px){ #chr-fringe-calc .chrfb-kpis{ grid-template-columns:minmax(0,1fr); } }
#chr-fringe-calc .chrfb-kpi{ padding:20px 22px; border:1px solid var(--line-3); border-radius:var(--r); background:var(--tint); }
#chr-fringe-calc .chrfb-kpi .k{ color:var(--muted); font-size:.9rem; font-weight:500; }
#chr-fringe-calc .chrfb-kpi .v{ margin-top:4px; color:var(--navy); font-size:2.1rem; line-height:1.1; font-weight:700; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
#chr-fringe-calc .chrfb-kpi .s{ margin-top:6px; color:var(--muted); font-size:.8rem; }
#chr-fringe-calc .chrfb-kpi.main{ background:var(--navy); border-color:var(--navy); }
#chr-fringe-calc .chrfb-kpi.main .k, #chr-fringe-calc .chrfb-kpi.main .s{ color:rgba(255,255,255,.78); }
#chr-fringe-calc .chrfb-kpi.main .v{ color:#fff; }
#chr-fringe-calc .chrfb-kpis.is-valnorm .chrfb-kpi .v{ font-size:1.3rem; }
#chr-fringe-calc .chrfb-kpis.is-valnorm .chrfb-kpi .s{ display:none; }

#chr-fringe-calc .chrfb-valnorm{ position:relative; padding:16px 18px 16px 24px; border:1px solid var(--amber-b); border-radius:var(--r); background:var(--amber-s); color:#5B3A0A; font-size:.9rem; line-height:1.6; overflow:hidden; }
#chr-fringe-calc .chrfb-valnorm::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--amber-a); }
#chr-fringe-calc .chrfb-valnorm b{ color:#5B3A0A; }
#chr-fringe-calc .chrfb-valnorm p{ margin:8px 0 0; }

#chr-fringe-calc .chrfb-detail{ background:var(--soft); }
#chr-fringe-calc .chrfb-detail h4{ margin:0 0 12px; }
#chr-fringe-calc .chrfb-detail .chrfb-timeline{ margin-bottom:12px; }
#chr-fringe-calc .chrfb-kv{ display:grid; margin:0; }
#chr-fringe-calc .chrfb-kv > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
#chr-fringe-calc .chrfb-kv > div:last-child{ border-bottom:0; }
#chr-fringe-calc .chrfb-kv dt{ color:var(--muted); font-size:.88rem; margin:0; }
#chr-fringe-calc .chrfb-kv dd{ color:var(--navy); font-weight:600; font-size:.92rem; margin:0; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#chr-fringe-calc .chrfb-kv dd.is-note{ font-weight:400; color:var(--text); text-align:right; font-size:.85rem; }
@media (max-width:560px){
  #chr-fringe-calc .chrfb-kv > div{ flex-direction:column; align-items:flex-start; gap:2px; }
  #chr-fringe-calc .chrfb-kv dd, #chr-fringe-calc .chrfb-kv dd.is-note{ text-align:left; }
}
#chr-fringe-calc .chrfb-formula{ margin-top:12px; padding:12px 14px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:#fff; color:var(--muted); font-size:.88rem; }
#chr-fringe-calc .chrfb-formula[hidden]{ display:none; }
#chr-fringe-calc .chrfb-formula b{ color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Toast ── */
#chr-fringe-calc .chrfb-toast{
  position:fixed; right:18px; bottom:18px; z-index:9999; display:none; max-width:360px;
  padding:12px 16px; border-radius:var(--r); background:var(--navy); color:#fff; font-size:.9rem; box-shadow:0 18px 40px rgba(19,31,63,.25);
}
#chr-fringe-calc .chrfb-toast.is-on{ display:block; animation:chrFadeUp .25s ease both; }
@media (max-width:520px){ #chr-fringe-calc .chrfb-toast{ left:12px; right:12px; bottom:12px; max-width:none; } }

/* ── Modalità PDF ── */
#chr-fringe-calc.chr-pdf-mode .chrfb-result{ border-color:transparent; padding:8px; }
#chr-fringe-calc.chr-pdf-mode .chrfb-tl{ transition:none; }

/* ── Note normative nel risultato ── */
#chr-fringe-calc .chrfb-notes{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
#chr-fringe-calc .chrfb-notes li{ position:relative; padding:9px 12px 9px 30px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--text); font-size:.84rem; line-height:1.5; }
#chr-fringe-calc .chrfb-notes li::before{ content:"i"; position:absolute; left:10px; top:10px; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--azure); color:var(--azure); font-size:9px; font-weight:700; display:grid; place-items:center; }
#chr-fringe-calc .chrfb-chips span.amber{ background:var(--amber-s); border-color:var(--amber-b); color:var(--amber); }
#chr-fringe-calc .chrfb-omnibus-badge{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:3px 10px; border-radius:var(--pill); background:var(--navy); color:#fff; font-size:.72rem; font-weight:600; vertical-align:middle; }

/* ═══════════════════════════════════════════════════════════════════
   3.4.0 - Individuazione del veicolo: schede, libretto (OCR), ID Modello, risultati ACI
═══════════════════════════════════════════════════════════════════ */
#chr-fringe-calc .chrfb-modes{
  display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 16px; padding:5px;
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-lg);
}
#chr-fringe-calc .chrfb-modes button{
  flex:1 1 auto; margin:0; padding:9px 14px; font:inherit; font-size:.9rem; font-weight:600; line-height:1.2;
  color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--pill); cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
#chr-fringe-calc .chrfb-modes button:hover{ color:var(--navy); }
#chr-fringe-calc .chrfb-modes button.is-on{ color:var(--navy); background:#fff; border-color:var(--line-3); box-shadow:0 1px 3px rgba(19,31,63,.08); }
#chr-fringe-calc .chrfb-modes button:focus-visible{ outline:2px solid var(--azure); outline-offset:2px; }
#chr-fringe-calc .chrfb-modepane[hidden]{ display:none; }

#chr-fringe-calc .chrfb-drop{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px;
  border:1.5px dashed var(--line-3); border-radius:var(--r-sm); background:#fff; transition:background-color .2s, border-color .2s;
}
#chr-fringe-calc .chrfb-drop.is-drag{ background:var(--tint); border-color:var(--azure); }
#chr-fringe-calc .chrfb-drop-name{ color:var(--muted); font-size:.88rem; word-break:break-all; }
#chr-fringe-calc .chrfb-progress{ height:6px; margin:12px 0 0; background:var(--tint); border-radius:var(--pill); overflow:hidden; }
#chr-fringe-calc .chrfb-progress[hidden]{ display:none; }
#chr-fringe-calc .chrfb-progress span{ display:block; height:100%; width:8%; background:var(--azure); border-radius:inherit; transition:width .3s; }
#chr-fringe-calc .chrfb-ocr-fields{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
#chr-fringe-calc .chrfb-row-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:560px){ #chr-fringe-calc .chrfb-row-3{ grid-template-columns:minmax(0,1fr); gap:0; } }
#chr-fringe-calc .chrfb-inline{ display:flex; gap:8px; align-items:stretch; }
#chr-fringe-calc .chrfb-inline input{ flex:1 1 auto; min-width:0; }
#chr-fringe-calc .chrfb-inline select{ flex:0 0 auto; width:auto; }
#chr-fringe-calc .chr-missing{ border-color:#d99a00 !important; background:#fff8e6 !important; }

#chr-fringe-calc .chrfb-results{ margin:4px 0 16px; display:grid; gap:8px; }
#chr-fringe-calc .chrfb-results[hidden]{ display:none; }
#chr-fringe-calc .chrfb-results .meta{ color:var(--muted); font-size:.86rem; margin:0 2px; }
#chr-fringe-calc .chrfb-res-item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; text-align:left;
  width:100%; margin:0; padding:11px 14px; font:inherit; color:var(--text); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; transition:border-color .2s, background-color .2s;
}
#chr-fringe-calc .chrfb-res-item:hover{ border-color:var(--azure); background:var(--tint); }
#chr-fringe-calc .chrfb-res-item.is-sel{ border-color:var(--azure); background:var(--tint); box-shadow:inset 3px 0 0 var(--azure); }
#chr-fringe-calc .chrfb-res-item strong{ font-size:.94rem; color:var(--navy); overflow-wrap:anywhere; }
#chr-fringe-calc .chrfb-res-item .km{ font-weight:700; color:var(--navy); white-space:nowrap; }
#chr-fringe-calc .chrfb-res-item .km small{ font-weight:500; color:var(--muted); }
#chr-fringe-calc .chrfb-res-item .tags{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
#chr-fringe-calc .chrfb-res-item .tag{ font-size:.72rem; font-weight:600; color:var(--azure); background:var(--tint); border:1px solid var(--line-3); border-radius:var(--pill); padding:2px 8px; }