/* ===== Avvio ===== */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink-3); font-weight: 600; }

/* Colori di testo ricorrenti */
.t-red { color: var(--st-scaduto-t); }
.t-coral { color: var(--corallo-testo); }
.t-teal { color: var(--st-attivo-t); }

/* ===== Login ===== */
.login { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: var(--navy); color: #fff; }
.login-scene {
  position: relative; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(59, 154, 217, 0.28), transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(255, 127, 97, 0.14), transparent 60%),
    linear-gradient(180deg, #0A2A40 0%, #0D3550 60%, #12405F 100%);
  padding-top: var(--safe-t);
}
.login-top { display: flex; align-items: center; gap: 12px; padding: 20px clamp(16px, 4vw, 48px); }
.login-logo { width: 46px; height: auto; }
.login-brand { display: flex; flex-direction: column; line-height: 1.1; }
.login-brand b { font-family: var(--f-title); font-size: 20px; }
.login-brand span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--corallo); font-weight: 700; }
.login-top .demo-badge { margin-left: auto; }
.login-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 8px clamp(16px, 4vw, 48px) 24px; max-width: 1320px; width: 100%; margin: 0 auto; }
.login-kicker { color: rgba(255,255,255,0.7); font-weight: 600; font-size: var(--fs-sm); }
.login-copy h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.025em; margin: 12px 0 16px; }
.login-copy h1 span { color: var(--corallo); }
.login-lead { color: rgba(255,255,255,0.78); font-size: var(--fs-lg); max-width: 52ch; }
.login-pick { display: none; color: rgba(255,255,255,0.82); font-weight: 600; }
.login-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.login-points li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.88); font-weight: 550; }
.login-points .ic { color: var(--corallo); }
.login-users { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lu-wrap { opacity: 0; transform: translateY(14px); transition: opacity var(--d-scene) var(--ease-out), transform var(--d-scene) var(--ease-out); transition-delay: calc(500ms + var(--i) * 70ms); }
.login-scene.is-in .lu-wrap { opacity: 1; transform: none; }
.login-user {
  position: relative; overflow: hidden; width: 100%; height: 100%; text-align: left; color: #fff;
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border-radius: 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 20px 40px -24px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  transition: transform var(--d-slow) var(--ease-out), background-color var(--d-std) var(--ease-out), border-color var(--d-std) var(--ease-out);
  transform-style: preserve-3d;
}
.login-user:active { transform: scale(0.98); }
.login-user.is-picked { background: rgba(255,127,97,0.22); border-color: var(--corallo); }
.lu-head { display: flex; align-items: center; gap: 12px; }
.lu-name { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.lu-name b { font-family: var(--f-title); font-size: 17px; }
.lu-name small { color: rgba(255,255,255,0.68); font-size: 12.5px; }
.lu-go { color: rgba(255,255,255,0.5); transition: transform var(--d-std) var(--ease-out), color var(--d-std) var(--ease-out); }
.lu-desc { font-size: var(--fs-sm); color: rgba(255,255,255,0.82); }
.lu-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lu-tags span { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85); }
.lu-tri { position: absolute; top: 0; right: 18px; width: 18px; height: 16px; background: var(--av); clip-path: path("M0 0H18Q18 9 11 16Z"); }
.login-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.62); font-size: 12.5px; }
.login-note .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .login-user:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
  .login-user:hover .lu-go { color: var(--corallo); transform: translateX(3px); }
}

.login-road { position: relative; height: 210px; overflow: hidden; }
.skyline-wrap { position: absolute; left: 0; right: 0; bottom: 70px; height: 120px; overflow: hidden; opacity: 0.9; }
.skyline { width: 200%; height: 100%; animation: skyline-scroll 60s linear infinite; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: linear-gradient(180deg, #23384A, #1B2E3E); border-top: 3px solid #2F4B61; overflow: hidden; }
.road-dash { position: absolute; left: 0; top: 34px; width: calc(100% + 240px); height: 5px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.75) 0 60px, transparent 60px 120px); animation: road-scroll 0.55s linear infinite; }
.van-wrap { position: absolute; bottom: 30px; left: clamp(16px, 22vw, 360px); width: clamp(220px, 26vw, 330px); }
.van-hero { width: 100%; height: auto; overflow: visible; }
.van-hero .van-body { transform-box: fill-box; transform-origin: 50% 100%; animation: van-bob 0.6s ease-in-out infinite; }
.van-hero .wheel { animation: wheel-spin 0.5s linear infinite; }
.login-scene.is-reduced .skyline, .login-scene.is-reduced .road-dash, .login-scene.is-reduced .van-body, .login-scene.is-reduced .wheel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .skyline, .road-dash, .van-hero .van-body, .van-hero .wheel { animation: none; }
  .lu-wrap { transform: none; transition: opacity var(--d-slow) var(--ease-out); }
}
@media (max-width: 899px) {
  .login-main { grid-template-columns: minmax(0, 1fr); }
  .login-points { display: none; }
  .login-road { height: 150px; }
  .skyline-wrap { bottom: 54px; height: 90px; }
  .road { height: 56px; }
  .road-dash { top: 25px; }
  .van-wrap { bottom: 22px; width: 190px; }
}
@media (max-width: 479px) {
  /* telefono: una colonna e le 4 utenze visibili senza scorrere a 390x844 */
  .login-top { padding-top: 14px; padding-bottom: 10px; }
  .login-copy h1 { font-size: 28px; margin: 8px 0 10px; }
  .login-lead { display: none; }
  .login-pick { display: block; }
  .login-users { gap: 10px; }
  .login-users { grid-template-columns: minmax(0, 1fr); }
  .lu-tags { display: none; }
  .login-user { padding: 14px; }
  .login-top .demo-badge { font-size: 10px; }
}

/* Badge DEMO */
.demo-badge {
  display: inline-flex; align-items: center; gap: 0.3em; height: 26px; padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: var(--corallo-chiaro); color: var(--corallo-testo); font-size: 11.5px; font-weight: 750; letter-spacing: 0.02em;
  border: 1px dashed rgba(184, 69, 42, 0.45);
}
.demo-badge-dark { background: rgba(255,127,97,0.16); color: #FFB39F; border-color: rgba(255,127,97,0.5); }

/* ===== Shell ===== */
.shell { position: relative; z-index: 1; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "side top" "side main"; }
.shell.is-revealing { z-index: 120; }
.shell::before { content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: #0B3049; z-index: 0; }
@media (max-width: 1023px) { .shell::before { display: none; } }
.sidebar {
  grid-area: side; position: sticky; top: 0; height: 100dvh; z-index: var(--z-sidebar);
  display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 16px;
  background: linear-gradient(180deg, var(--navy) 0%, #0B3049 100%); color: #fff;
}
.sb-logo { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; color: #fff; text-decoration: none; }
.sb-logo img { width: 38px; height: auto; }
.sb-brand { display: flex; flex-direction: column; line-height: 1.15; }
.sb-brand b { font-family: var(--f-title); font-size: 17px; }
.sb-brand small { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; }
.sb-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav-indicator {
  position: absolute; left: 0; right: 0; top: 0; height: 46px; border-radius: 12px; pointer-events: none;
  background: rgba(255,255,255,0.1); box-shadow: inset 3px 0 0 var(--corallo);
  transition: transform var(--d-slow) var(--ease-in-out), opacity var(--d-std) var(--ease-out); /* l'altezza cambia senza animazione: niente layout per frame */
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px;
  color: rgba(255,255,255,0.72); text-decoration: none; font-weight: 600; font-size: var(--fs-md);
  transition: color var(--d-fast) var(--ease-out);
}
.nav-item .ic { width: 20px; height: 20px; }
.nav-item.is-active { color: #fff; }
.nav-item.is-active .ic { color: var(--corallo); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover { color: #fff; } }
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 750; display: inline-grid; place-items: center; font-family: var(--f-mono); }
.nav-badge.tone-coral { background: var(--corallo); color: var(--navy); }
.nav-badge.tone-red { background: var(--st-scaduto); color: #fff; }
.sb-road { flex: 1; margin: 18px 22px; border-left: 3px dashed rgba(255,255,255,0.08); }
.sb-foot { display: flex; flex-direction: column; gap: 10px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; text-align: left; color: #fff; background: rgba(255,255,255,0.06); transition: background-color var(--d-fast) var(--ease-out); }
.sb-user b { display: block; font-size: var(--fs-sm); }
.sb-user small { display: block; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.sb-user .ic { width: 16px; height: 16px; color: rgba(255,255,255,0.6); }
@media (hover: hover) and (pointer: fine) { .sb-user:hover { background: rgba(255,255,255,0.12); } }
.sb-demo { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: rgba(255,255,255,0.55); padding: 0 6px; }
.sb-demo .ic { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; }

.topbar {
  grid-area: top; position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 14px; padding: 0 clamp(16px, 2.4vw, 32px);
  background: rgba(244, 248, 251, 0.82); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(220, 230, 239, 0.7);
}
.tb-logo { display: none; width: 34px; height: 34px; }
.tb-logo .logo-mark { width: 34px; height: 34px; }
.tb-title { font-size: var(--fs-lg); font-weight: 650; white-space: nowrap; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.topbar > * { flex-shrink: 0; }
.topbar > .tb-title { flex-shrink: 1; }
.topbar > .tb-search { flex-shrink: 1; min-width: 42px; }
.tb-search {
  flex: 1; max-width: 520px; margin-left: auto; display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 8px 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-3); font-size: var(--fs-sm); box-shadow: var(--sh-1); transition: border-color var(--d-fast) var(--ease-out);
}
.tb-search-ph { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-keys { display: flex; gap: 3px; }
@media (hover: hover) and (pointer: fine) { .tb-search:hover { border-color: var(--blu-chiaro-2); } }
.tb-date { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); white-space: nowrap; padding: 0 10px; height: 34px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.tb-date .ic { width: 16px; height: 16px; color: var(--corallo-600); }
.tb-user { display: none; }
.view { grid-area: main; min-width: 0; padding: clamp(16px, 2.4vw, 32px); padding-bottom: 48px; view-transition-name: vista; outline: none; }

.tabbar { display: none; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sidebar { display: none; }
  .tb-logo { display: block; }
  .tb-search { max-width: none; }
  .tb-search-ph, .tb-keys { display: none; }
  .tb-search { flex: 0 0 auto; width: 42px; padding: 0; justify-content: center; margin-left: auto; }
  .tb-user { display: block; border-radius: 12px; }
  /* sotto l'ultimo contenuto resta sempre spazio libero sopra la barra inferiore */
  .view { padding-bottom: calc(var(--tabbar-h) + 24px + var(--safe-b)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 64px repeat(3, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  }
  .tab-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); text-decoration: none; font-size: 11px; font-weight: 650; -webkit-user-select: none; user-select: none; }
  .tab-item .ic { width: 22px; height: 22px; }
  .tab-item.is-active { color: var(--blu); }
  .tab-item .nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; }
  .tab-indicator { position: absolute; top: 0; left: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--corallo); transition: transform var(--d-slow) var(--ease-in-out), opacity var(--d-std) var(--ease-out); }
  /* "Nuovo" al centro della barra: fa parte della barra, non copre mai i contenuti */
  .tab-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 750; color: var(--corallo-testo); -webkit-user-select: none; user-select: none; }
  .tn-ic { width: 46px; height: 30px; border-radius: 11px; display: grid; place-items: center; background: var(--corallo); color: var(--navy); box-shadow: var(--sh-coral); transition: transform var(--d-press) var(--ease-out); }
  .tn-ic .ic { width: 20px; height: 20px; }
  .tab-new:active .tn-ic { transform: scale(0.97); }
  /* nelle procedure (nuovo preventivo, contratto) la barra lascia il posto a quella della procedura */
  body[data-form] .tabbar { display: none; }
  body[data-form] .view { padding-bottom: calc(112px + var(--safe-b)); }
}
@media (max-width: 1023px) and (min-width: 640px) { .tb-search-ph { display: inline; } .tb-search { flex: 1; width: auto; padding: 0 12px; max-width: 360px; justify-content: flex-start; } }
.tb-t-short { display: none; }
@media (max-width: 559px) {
  .topbar { gap: 10px; }
  .tb-date { display: none; }
  .tb-title { font-size: var(--fs-md); }
  /* titolo breve e badge su due righe: il titolo non viene mai tagliato */
  .tb-t-full { display: none; }
  .tb-t-short { display: inline; }
  .topbar .demo-badge { flex-direction: column; justify-content: center; gap: 0; height: auto; min-height: 32px; padding: 2px 8px; border-radius: 10px; font-size: 10px; line-height: 1.2; }
  /* nelle procedure c'è già "← Preventivi" / "← Contratti": logo e ricerca lasciano spazio al titolo intero */
  body[data-form] .tb-logo, body[data-form] .tb-search { display: none; }
  body[data-form] .topbar .demo-badge { margin-left: auto; }
}
@media (max-width: 359px) { .tab-item, .tab-new { font-size: 10px; } }
@media (max-width: 359px) {
  /* sotto i 360 px il badge non sta nella barra: scende in cima a ogni vista, così resta sempre visibile */
  .topbar .demo-badge { display: none; }
  .view::before { content: "DEMO: dati di fantasia"; display: block; width: max-content; margin: -4px 0 10px; padding: 2px 8px; border-radius: 999px; border: 1px dashed rgba(184, 69, 42, 0.45); background: var(--corallo-chiaro); color: var(--corallo-testo); font-size: 10px; font-weight: 750; letter-spacing: 0.02em; }
}
/* 360-379 px: c'è il badge ma non lo spazio per logo e titolo; Home resta nella barra in basso */
@media (min-width: 360px) and (max-width: 379px) { .tb-logo { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-indicator, .tab-indicator { transition: opacity var(--d-std) var(--ease-out); } }

/* ===== Pagine ===== */
.page { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: var(--fs-2xl); }
.page-head p { margin-top: 4px; font-size: var(--fs-sm); }
.page-head .back { align-self: flex-start; margin-left: -8px; }
.page-head > .grow { min-width: min(100%, 300px); }
html:has(body[data-form]) { scroll-padding-top: calc(var(--topbar-h) + 16px); scroll-padding-bottom: 120px; }
.h-num { font-size: 0.6em; font-weight: 500; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-q { flex: 0 1 300px; min-width: 200px; }
.tb-q .input { min-height: 42px; }
.toolbar .chips-scroll { flex: 1 1 auto; min-width: 0; }
.select-sm { min-height: 40px; padding: 6px 36px 6px 12px; width: auto; font-size: 14px; }
@media (max-width: 767px) { .tb-q { flex: 1 1 100%; } .toolbar .chips-scroll { flex-basis: 100%; } .page-head h2 { font-size: var(--fs-xl); } }

.only-narrow { display: none; }
@media (max-width: 767px) { .only-wide { display: none; } .only-narrow { display: block; } }
.only-mid { display: none; }
@media (max-width: 1359px) { .only-mid { display: inline-flex; } }

/* ===== Home ===== */
.hero { padding: 2px 2px 0; }
.hero-kicker { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; text-transform: capitalize; }
.hero-title { font-size: clamp(24px, 3vw, 34px); margin: 2px 0 4px; letter-spacing: -0.02em; }
.hero-text { color: var(--ink-2); max-width: 70ch; }

/* Tre moduli: card sobrie, un solo pulsante "Nuovo" */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px 14px;
  padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  transition: transform var(--d-std) var(--ease-out), box-shadow var(--d-std) var(--ease-out);
}
.tile-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile-art svg { display: block; width: 64px; height: auto; }
.tile-body h3 { font-size: var(--fs-md); }
.tile-n { font-family: var(--f-title); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.tile-sub { font-size: var(--fs-sm); color: var(--ink-3); }
.tile-new { position: relative; z-index: 2; grid-column: 2; justify-self: start; }
.tile-go { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; color: var(--ink-4); transition: transform var(--d-std) var(--ease-out), color var(--d-std) var(--ease-out); }
.tile:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  .tile:hover .tile-go { color: var(--corallo-600); transform: translateX(3px); }
}
@media (max-width: 1279px) { .tile { grid-template-columns: 52px minmax(0, 1fr); } .tile-art svg { width: 52px; } }
/* Telefono: tre scelte compatte (icona, nome, numero); "Nuovo" resta nel bottone flottante */
@media (max-width: 767px) {
  .tiles { gap: 8px; }
  .tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 16px; }
  .tile-art svg { width: 36px; }
  .tile-body h3 { font-size: 13px; }
  .tile-n { font-size: 22px; }
  .tile-sub, .tile-new, .tile-go { display: none; }
}
@media (max-width: 359px) { .tile { padding: 10px 8px; } .tile-body h3 { font-size: 12px; } }

/* Quattro numeri */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  transition: transform var(--d-std) var(--ease-out), box-shadow var(--d-std) var(--ease-out);
}
.kpi:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); } }
.kpi-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 6px; background: var(--k-bg); color: var(--k-c); }
.kpi-ic .ic { width: 19px; height: 19px; position: relative; z-index: 1; }
.kpi-ic.pulse::after { background: var(--k-c); }
.kpi-n { font-family: var(--f-title); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-n small { font-size: 16px; color: var(--ink-3); font-weight: 600; }
.kpi-l { font-weight: 700; font-size: var(--fs-sm); }
.kpi-s { font-size: 12px; color: var(--ink-3); }
.kpi-bar { height: 5px; border-radius: 3px; background: var(--surface-3); margin-top: 8px; overflow: hidden; }
.kpi-bar span { display: block; height: 100%; background: var(--k-c); transform-origin: left; border-radius: 3px; }
.kpi-teal { --k-bg: var(--st-attivo-bg); --k-c: var(--st-attivo); }
.kpi-red { --k-bg: var(--st-scaduto-bg); --k-c: var(--st-scaduto); }
.kpi-red .kpi-n { color: var(--st-scaduto-t); }
.kpi-coral { --k-bg: var(--st-ricontatto-bg); --k-c: var(--corallo-600); }
.kpi-blue { --k-bg: var(--blu-chiaro); --k-c: var(--blu); }
.kpi-grey { --k-bg: var(--st-inattivo-bg); --k-c: var(--st-inattivo); }
.kpi-navy { --k-bg: var(--navy); --k-c: #fff; background: linear-gradient(160deg, var(--navy), var(--blu)); color: #fff; border-color: transparent; }
.kpi-navy .kpi-s { color: rgba(255,255,255,0.7); }
.kpi-navy .kpi-n { font-size: 26px; }
.kpi-navy .kpi-ic { background: rgba(255,255,255,0.12); color: var(--corallo); }
@media (max-width: 767px) {
  .kpis, .kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* icona accanto al numero: ogni riga di numeri è più bassa */
  .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 10px 12px; }
  .kpi-l, .kpi-bar { grid-column: 1 / -1; }
  .kpi-n { font-size: 24px; }
  .kpi-ic { width: 28px; height: 28px; margin-bottom: 0; border-radius: 9px; }
  .kpi-ic .ic { width: 16px; height: 16px; }
  .kpi-bar { margin-top: 6px; }
  .kpi-s { display: none; }
}

/* Schede: Da fare, Flotta, Andamento. La barra resta agganciata sotto la barra superiore. */
.htabs-wrap { display: flex; flex-direction: column; gap: 14px; }
.htabs-bar {
  position: sticky; top: var(--topbar-h); z-index: 5;
  margin: -6px calc(-1 * clamp(16px, 2.4vw, 32px)) 0; padding: 6px clamp(16px, 2.4vw, 32px);
  background: rgba(244, 248, 251, 0.88); backdrop-filter: saturate(1.4) blur(12px);
}
.htabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 480px); padding: 4px; border-radius: 14px; background: var(--surface-3); border: 1px solid var(--line); }
.htabs-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px;
  background: var(--surface); box-shadow: var(--sh-1);
  transform: translateX(calc(var(--ti, 0) * 100%));
  transition: transform var(--d-std) var(--ease-out);
}
.htabs.no-anim .htabs-ind { transition: none; }
.htabs [role="tab"] {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px;
  border-radius: 10px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); transition: color var(--d-fast) var(--ease-out);
}
.htabs [aria-selected="true"] { color: var(--ink); font-weight: 750; }
.htabs [role="tab"]:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .htabs [role="tab"]:hover { color: var(--ink); } }
@media (pointer: coarse) { .htabs [role="tab"] { min-height: 44px; } }
.htab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 750; background: var(--corallo); color: var(--navy); }
.hpanel { display: flex; flex-direction: column; gap: 20px; }
.hpanel[hidden] { display: none; }
.hpanel.is-fading { animation: fade-only var(--d-fast) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .htabs-ind { transition: none; } }

.dafare { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1199px) { .dafare { grid-template-columns: minmax(0, 1fr); } }
/* Telefono: spazi più stretti, la Home sta in due schermate */
@media (max-width: 767px) { .page.home, .hpanel, .dafare { gap: 12px; } .htabs-wrap { gap: 10px; } }

.fleet .seg { flex-wrap: wrap; }
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; margin-top: 14px; }
.fleet-tile {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; text-align: left; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: transform var(--d-std) var(--ease-out), box-shadow var(--d-std) var(--ease-out), border-color var(--d-std) var(--ease-out);
}
.fleet-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .fleet-tile:hover { border-color: var(--blu-chiaro-2); box-shadow: var(--sh-2); background: #fff; } }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ft-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ft-st .dot { width: 7px; height: 7px; border-radius: 50%; }
.ft-in .ft-st { color: var(--blu); } .ft-in .ft-st .dot { background: var(--blu-500); }
.ft-out .ft-st { color: var(--st-attivo-t); } .ft-out .ft-st .dot { background: var(--st-attivo); }
.ft-late { background: #FFF7F7; border-color: #F6D3D3; }
.ft-late .ft-st { color: var(--st-scaduto-t); } .ft-late .ft-st .dot { background: var(--st-scaduto); }
.ft-veh { display: block; margin: 2px -2px 0; }
.ft-veh .veh { width: 100%; height: 56px; }
.ft-in .ft-veh .veh { --art-body: #fff; }
.ft-mm { font-weight: 700; font-size: var(--fs-sm); }
.ft-cli { font-size: 12px; color: var(--ink-2); }
.ft-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.ft-bar span { position: absolute; inset: 0; transform-origin: left; border-radius: 3px; background: var(--st-attivo); }
.ft-bar::after { content: ""; position: absolute; inset: 2px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.75) 0 6px, transparent 6px 12px); }
.bar-near span { background: var(--corallo); }
.bar-late span { background: var(--st-scaduto); }
.bar-idle span { transform: scaleX(0); }
.ft-info { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ft-late .ft-info { color: var(--st-scaduto-t); }
.is-first-load .ft-bar span { animation: grow-x var(--d-data) var(--ease-out) var(--d-slow) both; }
@media (prefers-reduced-motion: reduce) { .is-first-load .ft-bar span { animation: none; } }
@media (max-width: 400px) { .ft-st { font-size: 0; gap: 0; } .ft-st .dot { width: 9px; height: 9px; } }
@media (max-width: 559px) { .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fleet-tile { padding: 10px; } .ft-veh .veh { height: 44px; } }

.az-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.az { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 4px solid var(--az-c); }
.az-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--az-bg); color: var(--az-c); }
.az-ic .ic { width: 18px; height: 18px; }
.az-t { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.az-s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.az-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.az-btns .btn { --bh: 32px; padding: 0 10px; font-size: 12.5px; }
.az-red { --az-c: var(--st-scaduto); --az-bg: var(--st-scaduto-bg); }
.az-coral { --az-c: var(--corallo-600); --az-bg: var(--st-ricontatto-bg); }
.az-teal { --az-c: var(--st-attivo); --az-bg: var(--st-attivo-bg); }
.az-blue { --az-c: var(--st-lead); --az-bg: var(--st-lead-bg); }
.az-grey { --az-c: var(--st-inattivo); --az-bg: var(--st-inattivo-bg); }
.az-list:not(.is-all) > li:nth-child(n+7) { display: none; }
.az-more { display: flex; width: fit-content; margin: 12px auto 0; }
.az-more-tel { display: none; }
/* Telefono: 3 azioni visibili, descrizione su due righe, pulsanti su una riga che scorre */
@media (max-width: 767px) {
  .az-list:not(.is-all) > li:nth-child(n+4) { display: none; }
  .az-more-tel { display: flex; }
  .az { padding: 10px; }
  .az-ic { display: none; }
  .az-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .az-btns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -10px; padding-right: 10px; }
  .az-btns::-webkit-scrollbar { display: none; }
  .az-btns .btn { flex-shrink: 0; }
}
@media (pointer: coarse) { .az-btns .btn { --bh: 40px; } }

/* Oggi: elenco cronologico (ritardi in cima, poi per orario) */
.og-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.og {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out);
}
.og:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .og:hover { border-color: var(--blu-chiaro-2); background: var(--surface); } }
.og-ora { width: 46px; flex-shrink: 0; padding-top: 3px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.og-late .og-ora { color: var(--st-scaduto-t); }
.og-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.og-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.og-tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 750; background: var(--og-bg); color: var(--og-c); }
.og-cli { font-size: var(--fs-sm); font-weight: 650; }
.og-info { font-size: 12px; color: var(--ink-3); }
.og-out { --og-bg: var(--st-attivo-bg); --og-c: var(--st-attivo-t); }
.og-in { --og-bg: var(--blu-chiaro); --og-c: var(--blu); }
.og-late { --og-bg: var(--st-scaduto-bg); --og-c: var(--st-scaduto-t); background: #FFF7F7; border-color: #F6D3D3; }
/* Telefono: una riga per evento, orario o ritardo a sinistra */
@media (max-width: 767px) {
  .og { align-items: center; min-height: 44px; padding: 6px 10px; gap: 8px; }
  .og-ora { width: 44px; padding-top: 0; font-size: 12px; }
  .og-main { flex-direction: row; align-items: center; gap: 8px; }
  .og-top { flex-wrap: nowrap; }
  .og-cli { flex: 1; min-width: 0; font-size: 12.5px; }
  .og-info { display: none; }
  .og-late .og-tag { display: none; }
}
@media (max-width: 359px) { .og-tag { display: none; } }

.charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1199px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts > :last-child { grid-column: 1 / -1; } }
@media (max-width: 767px) { .charts { grid-template-columns: minmax(0, 1fr); } }
.chart-card .card-head h3 { font-size: var(--fs-md); }
.motivi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.motivi > span:first-child { width: 100%; }
.spark-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.big { font-family: var(--f-title); font-size: 30px; }
.spark-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; }
.legend-list li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.legend-list i { width: 12px; height: 12px; border-radius: 4px; }
.legend-list span { flex: 1; }

/* Pannello mezzo */
.mz-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, var(--blu-chiaro), var(--surface)); margin-bottom: 16px; }
.mz-veh { width: 100%; display: flex; justify-content: center; }
.mz-veh .veh { width: min(320px, 90%); height: auto; }
.mz-cur { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.mz-cli, .pv-cli { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); }
.mz-free { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--st-attivo-t); margin-bottom: 16px; }
.mz-h { font-size: var(--fs-md); margin: 18px 0 10px; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.dl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.dl div { min-width: 0; }
.dl dt { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.dl dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 559px) { .dl-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mini-list button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); text-align: left; background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .mini-list button:hover { background: var(--blu-chiaro); } }
.note-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: var(--fs-sm); background: var(--st-lead-bg); color: var(--st-lead-t); margin: 10px 0; }
.note-box .ic { width: 18px; height: 18px; flex-shrink: 0; }
.note-box.ok { background: var(--st-attivo-bg); color: var(--st-attivo-t); }
.note-box.danger { background: var(--st-scaduto-bg); color: var(--st-scaduto-t); }

/* ===== Chiamata e WhatsApp simulati ===== */
.call { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0; }
.call-av { position: relative; margin-bottom: 6px; }
.call-wave { position: absolute; inset: -8px; border-radius: 26px; border: 2px solid var(--st-attivo); opacity: 0; animation: pulse-ring 1.8s var(--ease-out) infinite; }
.call-name { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-xl); }
.call-num { font-size: var(--fs-lg); color: var(--ink-2); }
.call-state { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--st-attivo-t); font-weight: 650; }
.call-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-attivo); }
.call-note { width: 100%; text-align: left; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .call-wave { animation: none; opacity: 0.5; } }
.wa { display: flex; flex-direction: column; gap: 16px; }
.wa-phone { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #EFE7DD; }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #075E54; color: #fff; }
.wa-top b { display: block; font-size: var(--fs-sm); }
.wa-top small { font-size: 11.5px; opacity: 0.8; }
.wa-chat { padding: 16px; min-height: 120px; background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 14px 14px; }
.wa-bubble { margin-left: auto; max-width: 92%; background: #DCF8C6; border-radius: 12px 4px 12px 12px; padding: 8px 10px 6px; box-shadow: 0 1px 1px rgba(0,0,0,0.12); font-size: 14px; }
.wa-file { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,0.6); margin-bottom: 6px; }
.wa-file .ic { color: #D64545; width: 28px; height: 28px; }
.wa-file b { display: block; font-size: 13px; } .wa-file small { font-size: 11px; color: var(--ink-3); }
.wa-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: #667781; margin-top: 2px; }
.wa-ticks { color: #8696A0; display: inline-flex; transition: color var(--d-std) var(--ease-out); }
.wa-ticks .draw-check { width: 18px; height: 18px; }
.wa-bubble.is-sent .wa-ticks { color: #34B7F1; }
.mail-mock { position: relative; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.mm-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); }
.mm-row > span:first-child { width: 58px; color: var(--ink-3); }
.mm-body { padding: 14px; white-space: pre-wrap; font-size: 14px; max-height: 260px; overflow-y: auto; }
.mm-att { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface-3); font-size: var(--fs-sm); font-weight: 600; width: fit-content; }
.mm-att .ic { color: #D64545; }
.mm-sent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,0.92); font-weight: 700; color: var(--st-attivo-t); opacity: 0; pointer-events: none; transition: opacity var(--d-modal) var(--ease-out); }
.mm-sent.is-sent { opacity: 1; }
.done-mark.sm { width: 52px; height: 52px; border-radius: 18px; }
.send { display: flex; flex-direction: column; gap: 14px; }
.send-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.send-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 767px) { .send-grid { grid-template-columns: minmax(0, 1fr); } }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: wheel-spin 0.7s linear infinite; }
.done-box { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 8px 0; }

/* ===== Preventivi ===== */
.kanban { touch-action: pan-x pan-y; overscroll-behavior-x: contain; position: relative; display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
/* Bozza vuota: striscia stretta con "+ Bozza", le altre colonne si allargano */
.kanban.has-strip { grid-template-columns: 64px repeat(3, minmax(250px, 1fr)); }
.kcol.is-strip > .kcol-h, .kcol.is-strip > .kcol-body { display: none; }
.kstrip-add { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 220px; padding: 12px 0; border-radius: 20px; text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); transition: background-color var(--d-fast) var(--ease-out); }
.kstrip-add span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.02em; }
.kstrip-add .ic { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--surface); color: var(--corallo-600); box-shadow: var(--sh-1); }
@media (hover: hover) and (pointer: fine) { .kstrip-add:hover { background: var(--surface); } }
.ktabs { display: none; }
.kcol { display: flex; flex-direction: column; border-radius: 20px; background: rgba(227, 238, 246, 0.55); border: 1px solid var(--line-2); min-height: 220px; scroll-snap-align: start; transition: background-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); }
.kcol.is-over { background: var(--blu-chiaro); box-shadow: inset 0 0 0 2px var(--st-lead); }
/* segnaposto dove cade la scheda trascinata */
.kcol.is-over .kcol-body::after { content: "Rilascia qui"; display: grid; place-items: center; min-height: 64px; border: 2px dashed var(--st-lead); border-radius: 14px; color: var(--st-lead-t); font-size: var(--fs-sm); font-weight: 650; animation: fade-only var(--d-fast) var(--ease-out); }
.kcol-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; border-radius: 20px 20px 0 0; }
.kcol-h h3 { font-size: var(--fs-md); }
.kcol-h .ic { width: 18px; height: 18px; }
.kcol-bozza .kcol-h .ic { color: var(--ink-3); }
.kcol-inviato .kcol-h .ic { color: var(--st-lead); }
.kcol-accettato .kcol-h .ic { color: var(--st-attivo); }
.kcol-rifiutato .kcol-h .ic { color: var(--st-perso); }
.kcol-body { display: flex; flex-direction: column; gap: 10px; padding: 6px 10px 12px; flex: 1; }
@media (min-width: 1024px) { .kcol-body { max-height: calc(100dvh - 300px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } }
.kcol-empty { padding: 24px 10px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); border: 2px dashed var(--line); border-radius: 14px; }
.kcard {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  transition: transform var(--d-std) var(--ease-out), box-shadow var(--d-std) var(--ease-out), opacity var(--d-fast) var(--ease-out);
}
.kcard[draggable="true"] { cursor: grab; }
.kcard.is-hot { border-color: #FFC9BA; box-shadow: 0 0 0 1px #FFE0D7, var(--sh-1); }
.kcard.is-hot::before { content: ""; position: absolute; top: 0; right: 40px; width: 14px; height: 12px; background: var(--corallo); clip-path: path("M0 0H14Q14 7 8.5 12Z"); }
.kcard.is-dragging { opacity: 0.4; transform: scale(0.98); }
.kcard:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .kcard:hover { box-shadow: var(--sh-2); transform: translateY(-1px); } }
.kc-top { display: flex; align-items: center; gap: 6px; }
.kc-num { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.kc-cli { font-weight: 700; }
.kc-veh { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.kc-veh .veh { width: 44px; height: 22px; flex-shrink: 0; }
.kc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kc-foot .tag .ic { width: 13px; height: 13px; }
.kc-imp { font-size: var(--fs-md); margin-right: 2px; }
.kc-foot .kc-why { display: inline-block; max-width: 100%; line-height: 22px; overflow: hidden; text-overflow: ellipsis; }
.kc-foot .kc-why .ic { display: inline-block; vertical-align: -2px; margin-right: 2px; }
@media (max-width: 767px) {
  /* Telefono: una colonna per volta, schede in alto con il conteggio, scorrimento a scatto */
  .ktabs {
    position: sticky; top: var(--topbar-h); z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * clamp(16px, 2.4vw, 32px)) 8px; padding: 6px clamp(16px, 2.4vw, 32px);
    background: rgba(244, 248, 251, 0.9); backdrop-filter: blur(12px);
  }
  .ktabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
  .ktabs [aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .ktabs [aria-current="true"] .chip-n { background: rgba(255, 255, 255, 0.18); color: #fff; }
  .kanban, .kanban.has-strip {
    display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * clamp(16px, 2.4vw, 32px)); padding: 0 clamp(16px, 2.4vw, 32px) 8px; scroll-padding-inline: clamp(16px, 2.4vw, 32px);
  }
  .kcol { flex: 0 0 100%; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .kcol-inviato { order: 1; } .kcol-accettato { order: 2; } .kcol-rifiutato { order: 3; } .kcol-bozza { order: 4; }
  .kcol.is-strip > .kcol-h, .kcol.is-strip > .kcol-body { display: flex; }
  .kstrip-add { display: none; }
  .kcard [data-kmenu] { width: 44px; height: 44px; margin: -6px -6px -6px 0; }
}
.kit-ic { width: 40px; height: 40px; }
.kit-xs { width: 14px; height: 14px; }
.kit-sm { width: 28px; height: 28px; }
.radio-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.radio-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.radio-row:has(input:checked) { border-color: var(--blu); background: var(--ghiaccio); }
.radio-row input { width: 18px; height: 18px; accent-color: var(--blu); }
.pv-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pv-doc { border: 1px solid var(--line); box-shadow: var(--sh-2); }

/* Procedura nuovo preventivo */
.wiz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.wiz-main { padding: 20px 24px; }
.wiz-side { position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1199px) { .wiz-grid { grid-template-columns: minmax(0, 1fr); } .wiz-side { position: static; } .pdf-card { display: none; } }
/* overflow-x: clip: al passo 3 la traccia del furgone esce a destra e allargava la pagina sul telefono */
.stepper { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 24px; overflow-x: clip; }
.step-road { position: absolute; left: 16.66%; right: 16.66%; top: 17px; height: 4px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); }
.step-road-fill { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--corallo) 0 10px, transparent 10px 18px); transform-origin: left; transform: scaleX(0); transition: transform var(--d-scene) var(--ease-in-out); }
.step-van-track { position: absolute; inset: 0; transform: translateX(0); transition: transform var(--d-scene) var(--ease-in-out); pointer-events: none; }
.step-van { position: absolute; top: -14px; left: 0; transform: translateX(-50%); width: 30px; height: 30px; display: grid; place-items: center; color: var(--blu); background: var(--surface); border-radius: 9px; }
.step-van .ic { width: 22px; height: 22px; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-3); }
.step-n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-family: var(--f-title); font-weight: 700; transition: background-color var(--d-std) var(--ease-out), border-color var(--d-std) var(--ease-out), color var(--d-std) var(--ease-out); }
.step.is-active { color: var(--ink); }
.step.is-active .step-n { border-color: var(--blu); color: var(--blu); box-shadow: 0 0 0 4px var(--blu-chiaro); }
.step.is-done .step-n { background: var(--blu); border-color: var(--blu); color: #fff; }
@media (prefers-reduced-motion: reduce) { .step-road-fill, .step-van-track { transition: none; } }
.wiz-h { font-size: var(--fs-xl); margin-bottom: 14px; }
.wiz-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.wiz-err { order: -1; flex-basis: 100%; }
.wiz-tot { display: none; flex-direction: column; line-height: 1.15; }
.wiz-tot span { font-size: 11.5px; font-weight: 650; color: var(--ink-3); }
.wiz-tot b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.wiz-prev-btn { display: none; }
@media (max-width: 1199px) { .wiz-prev-btn { display: inline-flex; } }
/* Telefono e tablet: barra fissa in basso con totale e Avanti, sopra la safe area */
@media (max-width: 1023px) {
  .wiz-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); margin: 0; gap: 8px;
    padding: 10px clamp(16px, 2.4vw, 32px) calc(10px + var(--safe-b));
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgba(10, 42, 64, 0.25);
  }
  .wiz-tot { display: flex; }
  .wiz-foot[data-step="3"] .wiz-tot { display: none; }
  /* una riga sola: l'errore compare sopra la barra */
  .wiz-foot { flex-wrap: nowrap; }
  .wiz-foot .wiz-err { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); padding: 6px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--sh-2); }
}
@media (max-width: 559px) {
  .wb-l { display: none; }
  .wiz-foot [data-back] { width: 46px; padding: 0; justify-content: center; flex-shrink: 0; }
  .wiz-foot[data-step="3"] .spacer { display: none; }
  .wiz-foot[data-step="3"] [data-next], .wiz-foot [data-save-send] { flex: 1; padding: 0 10px; }
}
.combo { margin-bottom: 8px; }
.combo-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.combo-list li[role=option] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.combo-list li[role=option] b { display: block; font-size: var(--fs-sm); }
.combo-list li[role=option] small { font-size: 12px; color: var(--ink-3); }
.combo-list li.is-sel { background: var(--blu-chiaro); border-color: var(--blu-chiaro-2); }
.combo-empty { padding: 12px; color: var(--ink-3); font-size: var(--fs-sm); }
.sel-cli { display: flex; gap: 14px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--blu); background: var(--ghiaccio); }
.sel-cli .small { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sel-note { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--corallo-testo); font-weight: 600; }
.sel-note .ic { width: 15px; height: 15px; }
.tipo-grid, .kit-grid, .pol-grid { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.tipo-grid legend, .kit-grid legend, .pol-grid legend { margin-bottom: 8px; }
.tipo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tipo-c { align-items: flex-start; padding: 10px 12px; }
.tipo-c .veh { width: 100%; height: 54px; }
.tipo-c b { font-size: var(--fs-sm); }
.kit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.kit-c { align-items: flex-start; padding: 16px; }
.kit-art { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--ghiaccio); margin-bottom: 4px; transition: transform var(--d-slow) var(--ease-out); }
.kit-art .kit-ic { width: 50px; height: 50px; }
.card-choice:has(input:checked) .kit-art { transform: scale(1.06) rotate(-3deg); background: #fff; }
.kit-p { margin-top: auto; font-weight: 700; color: var(--blu); font-size: var(--fs-sm); }
.pol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.pol-c .row .ic { color: var(--blu); }
.pol-p { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding-top: 6px; border-top: 1px dashed var(--line); }
@media (max-width: 767px) { .tipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-grid, .pol-grid { grid-template-columns: minmax(0, 1fr); } .kit-c { flex-direction: row; flex-wrap: wrap; align-items: center; } .kit-c .kit-p { margin-left: auto; } }
.days-box { display: flex; align-items: baseline; gap: 8px; min-height: 46px; padding: 8px 14px; border-radius: 12px; background: var(--surface-3); }
.days-box b { font-family: var(--f-title); font-size: 22px; }
.km-in { max-width: 140px; }
.avail-wrap { margin-top: 16px; }
.avail { padding: 12px 14px; border-radius: 14px; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 8px; }
.avail .row .ic { width: 18px; height: 18px; }
.avail-ok { background: var(--st-attivo-bg); color: var(--st-attivo-t); }
.avail-ko { background: var(--st-scaduto-bg); color: var(--st-scaduto-t); }
.avail-warn { background: var(--st-ricontatto-bg); color: var(--corallo-testo); flex-direction: row; align-items: center; }
.avail-list { display: flex; flex-wrap: wrap; gap: 6px; }
.avail-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1px solid #BFE7E3; color: var(--ink); font-weight: 600; cursor: pointer; font-size: 12.5px; }
.avail-opt input { accent-color: var(--st-attivo); }
.avail-opt:has(input:checked) { border-color: var(--st-attivo); box-shadow: 0 0 0 1px var(--st-attivo); }
.recap { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.recap-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.recap-row > .ic, .recap-row > .veh, .recap-row > .kit-ic { width: 44px; height: 32px; color: var(--blu); flex-shrink: 0; }
.recap-row > div { flex: 1; min-width: 0; }
.recap-row span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.recap-row b { display: block; }
.recap-row small { color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.recap-tot { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--navy); color: #fff; }
.recap-tot b { font-family: var(--f-title); font-size: 24px; font-variant-numeric: tabular-nums; }
.price-card { padding: 18px 20px; background: linear-gradient(165deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; border: 0; overflow: hidden; }
.price-card::after { content: ""; position: absolute; top: 0; right: 24px; width: 22px; height: 20px; background: var(--corallo); clip-path: path("M0 0H22Q22 11 13.5 20Z"); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-l { font-size: var(--fs-sm); color: rgba(255,255,255,0.72); font-weight: 600; }
.pc-top .tag { background: rgba(255,255,255,0.12); color: #fff; }
.pc-tot { font-size: 40px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -0.02em; }
.pc-tot .odo { font-family: var(--f-title); }
.pc-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); }
.price-card .road-line { margin: 14px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 14px, transparent 14px 24px); }
.pc-lines { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.pc-lines div { display: flex; justify-content: space-between; gap: 10px; }
.pc-lines dt { color: rgba(255,255,255,0.72); } .pc-lines dd { margin: 0; font-weight: 650; font-family: var(--f-mono); font-size: 13px; text-align: right; }
.pc-lines .t-coral { color: #FFB39F; }
.pc-disc dd { color: #6FE3D8; }
.pdf-wrap { border: 1px solid var(--line); box-shadow: var(--sh-1); }

/* ===== Contratti ===== */
.pbar { display: block; position: relative; height: 5px; width: 120px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin-top: 5px; }
.pbar span { position: absolute; inset: 0; transform-origin: left; border-radius: 3px; background: var(--st-attivo); }
.pbar.bar-near span { background: var(--corallo); } .pbar.bar-late span { background: var(--st-scaduto); } .pbar.bar-done span { background: #A9B7C3; }
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.m-card { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
.m-card .pbar { width: 100%; }
.m-item { display: flex; flex-direction: column; }
.m-item:has(.m-co) .m-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.m-co { justify-content: center; border-radius: 0 0 16px 16px; border-top-width: 0; }
.ct-co { --bh: 34px; padding: 0 10px; }
.ct-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, var(--blu-chiaro), var(--surface)); margin-bottom: 14px; }
.ct-veh .veh { width: 150px; height: auto; }
.ct-period { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); margin-bottom: 14px; }
.ct-period span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.ct-period b { display: block; } .ct-period small { color: var(--ink-3); }
.ct-track { text-align: center; }
.ct-track .pbar { width: 100%; height: 8px; margin: 0 0 4px; }
@media (max-width: 559px) { .ct-hero { flex-direction: column; align-items: flex-start; } .ct-veh .veh { width: 120px; } }

.gen { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 0 12px; }
.gen-ring { position: relative; width: 84px; height: 84px; }
.gen-ring .ring-fg { transition: stroke-dashoffset var(--d-scene) var(--ease-out); }
.gen-ic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blu); }
.gen-ic .ic, .gen-ic .draw-check { width: 30px; height: 30px; }
.gen-ic .draw-check { color: var(--st-attivo); }

.co { display: flex; flex-direction: column; gap: 16px; }
.co-head { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.co-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.co-sum div { padding: 10px 12px; border-radius: 12px; background: var(--ghiaccio); }
.co-sum span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.co-sum b { font-size: var(--fs-md); }
.seg-fuel { flex-wrap: wrap; }
.cauz { display: flex; align-items: center; gap: 18px; text-align: left; padding: 16px; border-radius: 18px; background: var(--ghiaccio); margin-top: 8px; width: 100%; }
.cauz-ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.cauz-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cauz-in b { font-size: 16px; }
.ring-teal .ring-fg { stroke: var(--st-attivo); transition: stroke-dashoffset 1s linear; }
@media (max-width: 559px) { .cauz { flex-direction: column; text-align: center; } .co-sum { grid-template-columns: minmax(0, 1fr); } }

/* Form contratto */
.cform-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(360px, 440px); gap: 20px; align-items: start; }
@media (max-width: 1679px) { .cform-grid { grid-template-columns: 58px minmax(0, 1fr) 400px; } .rail .rail-l, .rail .rail-pct, .rail .rail-van { display: none; } .rail-road { left: 27px; } .rail a { padding: 0; justify-content: center; } .rail a.is-active { background: none; box-shadow: none; } .rail a.is-active .rail-dot { box-shadow: 0 0 0 4px var(--blu-chiaro); border-color: var(--blu); } }
@media (max-width: 1359px) { .cform-grid { grid-template-columns: 58px minmax(0, 1fr); } .cform-prev { display: none; } }
@media (max-width: 1023px) { .cform-grid { grid-template-columns: minmax(0, 1fr); } .rail .rail-l { display: inline; } .rail a { padding: 0 8px 0 2px; } }
.rail { position: sticky; top: calc(var(--topbar-h) + 16px); padding: 14px 10px 14px 6px; }
.rail ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rail-road { position: absolute; left: 21px; top: 30px; bottom: 70px; width: 4px; background: repeating-linear-gradient(180deg, var(--blu-chiaro-2) 0 10px, transparent 10px 18px); }
.rail-van { position: absolute; left: -11px; top: 0; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--corallo); color: var(--navy); box-shadow: var(--sh-coral); transition: transform var(--d-enter) var(--ease-in-out); z-index: 2; }
.rail-van .ic { width: 16px; height: 16px; }
.rail a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px 0 2px; border-radius: 12px; text-decoration: none; color: var(--ink-3); font-weight: 600; font-size: var(--fs-sm); }
.rail a.is-active { color: var(--ink); background: var(--surface); box-shadow: var(--sh-1); }
.rail-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); font-family: var(--f-mono); font-size: 12px; flex-shrink: 0; margin-left: 8px; transition: background-color var(--d-std) var(--ease-out), border-color var(--d-std) var(--ease-out), color var(--d-std) var(--ease-out); }
.rail-ok { position: absolute; width: 16px; height: 16px; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--d-std) var(--ease-out), transform var(--d-modal) var(--ease-out); }
.rail a.is-done .rail-dot { background: var(--st-attivo); border-color: var(--st-attivo); }
.rail a.is-done .rail-n { opacity: 0; }
.rail a.is-done .rail-ok { opacity: 1; transform: none; }
.rail-pct { margin: 14px 0 0 12px; font-size: var(--fs-sm); color: var(--ink-3); }
.rail-pct span { font-family: var(--f-title); font-weight: 700; color: var(--ink); font-size: 20px; }
@media (max-width: 1023px) {
  .rail { top: calc(var(--topbar-h) + 4px); z-index: 5; padding: 8px; border-radius: 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); box-shadow: var(--sh-1); overflow-x: auto; scrollbar-width: none; }
  .rail ol { flex-direction: row; gap: 2px; }
  .rail-road, .rail-pct { display: none; }
  .rail a { white-space: nowrap; min-height: 38px; }
  .rail-dot { margin-left: 0; width: 26px; height: 26px; }
}
.cform-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sez { scroll-margin-top: calc(var(--topbar-h) + 72px); }
.sez-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
.sez .card-head h3 { font-size: var(--fs-lg); }
/* campi bloccati: fondo grigio e bordo tratteggiato, testo pieno e leggibile */
.field.is-ro .input, .field.is-ro .select { background-color: var(--surface-3); border-style: dashed; color: var(--ink); }
.field.is-ro .select:disabled { opacity: 1; }
/* campi compilati dalla scheda cliente: un solo lampo di colore */
@keyframes fill-flash { from { background-color: #D3EAFA; } }
.field.is-filled .input, .field.is-filled .select { animation: fill-flash var(--d-flash) var(--ease-out) 1; }
.sez-count { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--st-ricontatto-bg); color: var(--corallo-testo); font-size: var(--fs-sm); }
.sez-count.is-done { background: var(--st-attivo-bg); color: var(--st-attivo-t); }
.sez-count .ic { width: 15px; height: 15px; }
.sez-tog, .sez-chev { display: none; }
@media (max-width: 767px) {
  /* Telefono: le 8 sezioni diventano un accordion, il binario laterale non serve */
  .rail { display: none; }
  .sez .card-head { position: relative; padding-bottom: var(--s4); flex-wrap: nowrap; }
  .sez .card-head h3 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sez .card-head .spacer { display: none; }
  .sez.is-open .card-head { padding-bottom: 0; }
  .sez-lab { display: none; }
  .sez-tog { display: inline; font: inherit; color: inherit; text-align: left; }
  .sez-tog::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
  .sez-tog:focus-visible { outline: none; }
  .sez-tog:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
  .sez-chev { display: block; width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--d-std) var(--ease-out); }
  .sez.is-open .sez-chev { transform: rotate(180deg); }
  .sez:not(.is-open) > .card-body { display: none; }
}
.field .lock .ic { width: 13px; height: 13px; color: var(--ink-4); }
.field.is-ok .draw-check path { stroke-dasharray: 30; }
.input-wrap .draw-check { opacity: 1; }
.cli-pick { margin-bottom: 16px; padding: 12px; border-radius: 14px; background: var(--ghiaccio); border: 1px dashed var(--blu-chiaro-2); }
.veh-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--ghiaccio); font-size: var(--fs-sm); }
.veh-strip .veh { width: 110px; height: 52px; }
.tot-box { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 4px 14px; border-radius: 12px; background: var(--navy); color: #fff; }
.tot-box b { font-family: var(--f-title); font-size: 20px; }
.tot-box .muted { color: rgba(255,255,255,0.7); }
.cform-bar { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); box-shadow: var(--sh-3); border: 1px solid var(--line-2); }
@media (max-width: 1023px) { .cform-bar { bottom: calc(10px + var(--safe-b)); } }
/* Telefono: una riga sola, PDF e Word solo icona, il salvataggio prende il resto */
@media (max-width: 559px) {
  .cform-bar { flex-wrap: nowrap; gap: 8px; padding: 8px; }
  .cform-bar .spacer, .cb-l { display: none; }
  .cform-bar [data-dl] { width: 46px; padding: 0; justify-content: center; flex-shrink: 0; }
  .cform-bar [type="submit"] { flex: 1; }
  .cform-bar .cform-err { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); padding: 6px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--sh-2); }
}
.cform-prev { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100dvh - var(--topbar-h) - 32px); overflow-y: auto; border-radius: var(--r-lg); }
.cform-prev .doc-wrap { border: 1px solid var(--line); }

/* ===== Clienti ===== */
.cli-sum { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 10px 2px; }
.imp-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-banner > .ic { color: #1D7044; }

/* Tabella: colonne essenziali; Noleggi e Speso solo da 1280 px, Contatto solo da 1400 px (sotto, il telefono va in seconda riga) */
.table-cli .td-cli { min-width: 200px; }
.table-cli th, .table-cli td { padding-left: 12px; padding-right: 12px; }
.table-cli .t-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.table-cli .td-mail { max-width: 190px; }
.table-cli .col-xl { display: none; }
@media (min-width: 1280px) { .table-cli .col-xl { display: table-cell; } }
.table-cli .cli-tel-sub { display: none; }
@media (max-width: 1399px) { .table-cli .col-contatto { display: none; } .table-cli .cli-tel-sub { display: block; } }
.table-cli tr.row-imported td { background: var(--st-attivo-bg); }
.table-cli tr.row-imported[data-imp="aggiornato"] td { background: var(--st-lead-bg); }
.table-cli tr.row-imported td:first-child { box-shadow: inset 3px 0 0 var(--st-attivo); }

/* Una azione primaria per riga; le secondarie compaiono al passaggio del mouse, sempre visibili su touch */
.row-acts { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.row-sec { display: inline-flex; gap: 2px; }
.az-btn { --bh: 34px; white-space: nowrap; }
.az-btn .ic { width: 16px; height: 16px; }
.az-red { background: var(--st-scaduto-bg); color: var(--st-scaduto-t); }
.az-coral { background: var(--corallo-chiaro); color: var(--corallo-testo); }
.az-grey { background: var(--surface-3); color: var(--ink-2); }
.az-none { white-space: nowrap; padding-right: 4px; }
@media (pointer: coarse) { .az-btn { --bh: 44px; } }
@media (hover: hover) and (pointer: fine) {
  .az-btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
  .row-sec { opacity: 0; transition: opacity var(--d-fast) var(--ease-out); }
  .td-az .row-acts { flex-wrap: nowrap; }
  .table-cli tr:hover .row-sec, .table-cli tr:focus-within .row-sec, .cli-card:hover .row-sec, .cli-card:focus-within .row-sec { opacity: 1; }
}

/* Schede: tutta la scheda apre il cliente, i pulsanti d'azione restano sopra */
.cli-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cli-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; text-align: left; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-1); transition: transform var(--d-std) var(--ease-out), box-shadow var(--d-std) var(--ease-out); min-width: 0; }
.cli-card .grow { display: flex; flex-direction: column; min-width: 0; }
.cc-open { display: block; width: 100%; text-align: left; color: inherit; font: inherit; border-radius: 12px; }
.cc-open::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.cc-open:focus-visible { outline: none; }
.cli-card:has(.cc-open:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cc-open > .row > .ic { width: 18px; height: 18px; color: var(--ink-4); flex-shrink: 0; }
.cc-name { overflow-wrap: anywhere; }
.cli-card .row-acts { position: relative; z-index: 1; padding-top: 10px; border-top: 1px dashed var(--line); }
.cli-card:active:not(:has(.row-acts:active)) { transform: scale(0.99); }
.cli-card.row-imported { border-color: var(--st-attivo); box-shadow: inset 4px 0 0 var(--st-attivo), var(--sh-1); }
.cli-card.row-imported[data-imp="aggiornato"] { border-color: var(--st-lead); box-shadow: inset 4px 0 0 var(--st-lead), var(--sh-1); }
@media (hover: hover) and (pointer: fine) { .cli-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); } }
.cc-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-3); }
.cc-stats b { color: var(--ink); }
.cc-az { color: var(--corallo-testo); font-weight: 650; }
.cl-hero { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.cl-contact { margin-top: 6px; overflow-wrap: anywhere; }
.cl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
@media (max-width: 559px) {
  .cl-hero { gap: 12px; align-items: flex-start; }
  .cl-hero .avatar-xl { width: 48px; height: 48px; border-radius: 15px; font-size: 16px; }
  .cl-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-acts .btn { --bh: 44px; justify-content: center; }
}
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-list a { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); color: inherit; text-decoration: none; transition: background-color var(--d-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cl-list a:hover { background: var(--ghiaccio); } }
.cl-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; }
.cl-amt { margin-left: auto; }
.cl-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--ink-3); }
.cl-vuoto { padding: 12px 2px; }
.cl-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.cl-kpi div { padding: 12px; border-radius: 14px; background: var(--ghiaccio); }
.cl-kpi span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.cl-kpi b { font-family: var(--f-title); font-size: 20px; }
.cl-kpi small { display: block; font-size: 11.5px; color: var(--ink-3); }
@media (max-width: 559px) { .cl-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs [role=tab] { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-weight: 650; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.tabs [role=tab][aria-selected=true] { color: var(--ink); }
.tabs [role=tab][aria-selected=true]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--corallo); }
.tl-v { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.tl-v::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 3px; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
.tlv { position: relative; display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.tlv-ic { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-3); }
.tlv-ic .ic { width: 16px; height: 16px; }
.tlv-contratto .tlv-ic { color: var(--blu); border-color: var(--blu-chiaro-2); background: var(--blu-chiaro); }
.tlv-preventivo .tlv-ic { color: var(--corallo-testo); border-color: #FFD3C7; background: var(--corallo-chiaro); }
.tlv-whatsapp .tlv-ic { color: #128C4A; border-color: #BFE8CF; background: #E7F7EE; }
.tlv-chiamata .tlv-ic, .tlv-mail .tlv-ic { color: var(--st-lead-t); border-color: #CDE6F7; background: var(--st-lead-bg); }
.tlv.is-new .tlv-t::after { content: "nuovo"; margin-left: 6px; font-size: 10px; font-weight: 750; color: var(--corallo-testo); background: var(--corallo-chiaro); padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.tlv-t { font-weight: 650; font-size: var(--fs-sm); }
.tlv-s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tlv-d { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
@media (max-width: 559px) { .tlv { flex-wrap: wrap; } .tlv-d { flex-direction: row; width: 100%; padding-left: 44px; justify-content: flex-start; } }
.note-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ghiaccio); margin-bottom: 14px; }
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notes li { padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Import Excel */
.imp-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.imp-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-3); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-3); }
.imp-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-family: var(--f-mono); font-size: 12px; }
.imp-steps li.is-on { background: var(--blu-chiaro); color: var(--blu); }
.imp-steps li.is-on span { background: var(--blu); color: #fff; }
.imp-steps li.is-done { background: var(--st-attivo-bg); color: var(--st-attivo-t); }
.imp-steps li.is-done span { background: var(--st-attivo); color: #fff; }
.imp-steps li span .ic { width: 14px; height: 14px; }
.imp-h { font-size: var(--fs-lg); margin: 0 0 12px; }
.imp-h:focus-visible { outline: none; }
.solo-touch { display: none; }
@media (pointer: coarse) { .solo-fine { display: none; } .solo-touch { display: inline; } }
.imp-err { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.imp-err .ic { flex-shrink: 0; margin-top: 2px; }
.map-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0; }
.imp-prev { margin-bottom: 14px; }
.imp-prev summary { cursor: pointer; font-weight: 650; padding: 6px 0; }
.prev-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin-top: 6px; }
/* quando le colonne non ci stanno lo si vede: barra di scorrimento piena, ombra sul bordo destro, prima colonna ferma */
.prev-box { position: relative; }
.prev-wrap.is-scroll { scrollbar-width: auto; scrollbar-color: var(--blu-500) var(--surface-3); }
/* sfumatura a destra finché c'è altro da vedere */
.prev-box:has(.prev-wrap.is-scroll:not(.is-end))::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 56px; border-radius: 0 13px 13px 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 70%), linear-gradient(90deg, transparent calc(100% - 3px), var(--blu-500) 0); }
.prev-wrap.is-scroll::-webkit-scrollbar { height: 10px; }
.prev-wrap.is-scroll::-webkit-scrollbar-thumb { background: var(--blu-500); border-radius: 6px; }
.prev-wrap.is-scroll::-webkit-scrollbar-track { background: var(--surface-3); }
.prev-table th:first-child, .prev-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line-2); }
.prev-hint { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--st-lead-t); font-weight: 650; }
.prev-hint .ic { width: 14px; height: 14px; }
.prev-table th, .prev-table td { white-space: nowrap; padding: 6px 10px; font-size: 12.5px; }
.prev-table th.is-mapped { color: var(--st-attivo-t); }
.prev-table th.is-todo { color: var(--corallo-testo); }
.prev-table td.is-off { color: var(--ink-4); }
.map-table tr.is-todo td:first-child { box-shadow: inset 3px 0 0 var(--corallo); }
.map-es { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 559px) {
  /* su telefono ogni colonna dell'Excel diventa una riga a due livelli */
  .map-wrap { max-height: none; }
  .map-table thead { display: none; }
  .map-table, .map-table tbody { display: block; }
  .map-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
  .map-table td { display: block; padding: 0; border: 0; }
  .map-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .map-table td:nth-child(2), .map-table td:nth-child(3) { grid-column: 1 / -1; }
  .map-table tr.is-mapped td:first-child, .map-table tr.is-todo td:first-child { box-shadow: none; }
  .map-table tr.is-mapped { box-shadow: inset 3px 0 0 var(--st-attivo); }
  .map-table tr.is-todo { box-shadow: inset 3px 0 0 var(--corallo); }
  .map-table .select { width: 100%; }
  .map-es { max-width: none; }
}
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 220px; padding: 24px; border-radius: 20px; border: 2px dashed var(--blu-chiaro-2); background: var(--ghiaccio); cursor: pointer; transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.drop.is-over { border-color: var(--st-lead); background: var(--blu-chiaro); }
.drop.is-loading { cursor: default; }
.drop .skeleton-list { width: 100%; max-width: 520px; }
.drop-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #fff; color: #1D7044; box-shadow: var(--sh-1); }
.drop-ic .ic { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) { .drop:hover { border-color: var(--st-lead); } }
.imp-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.map-wrap { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; }
.map-table td { padding: 8px 12px; }
.map-table tr.is-mapped td:first-child { box-shadow: inset 3px 0 0 var(--st-attivo); }
.map-table .ic { width: 16px; height: 16px; color: var(--ink-4); }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.rep { padding: 14px; border-radius: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rep-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rep-n div { padding: 8px; border-radius: 10px; text-align: center; background: var(--surface-3); }
.rep-n b { display: block; font-size: 20px; font-family: var(--f-title); }
.rep-n span { font-size: 10.5px; font-weight: 650; color: var(--ink-3); }
.rep-nuovo { background: var(--st-attivo-bg) !important; } .rep-nuovo b { color: var(--st-attivo-t); }
.rep-aggiornato { background: var(--st-lead-bg) !important; } .rep-aggiornato b { color: var(--st-lead-t); }
.rep-controllo { background: var(--st-scaduto-bg) !important; } .rep-controllo b { color: var(--st-scaduto-t); }
.rep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.rep-list li { display: flex; gap: 8px; align-items: flex-start; }
.rep-list details { width: 100%; }
.rep-list summary { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; list-style: none; padding: 2px; border-radius: 8px; }
/* testi lunghi (email, indirizzi) vanno a capo invece di uscire a destra */
.rep-list summary > .small { min-width: 0; overflow-wrap: anywhere; }
.rep-list summary::-webkit-details-marker { display: none; }
.rl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface-3); font-size: 12px; }
.rl-row dt { color: var(--ink-3); font-weight: 600; }
.rl-row dd { margin: 0; overflow-wrap: anywhere; }
.diff { margin-right: 8px; } .diff s { color: var(--ink-3); }
.imp-sum { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.imp-sum b { display: inline-block; min-width: 28px; font-size: var(--fs-lg); }

/* Impostazioni */
.sett-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.sett-wide { grid-column: 1 / -1; }
@media (max-width: 1023px) { .sett-grid { grid-template-columns: minmax(0, 1fr); } }
.sett .section-title { margin-bottom: 6px; }
.sett-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sett-sub .row-wrap { width: 100%; }
.sett-date { max-width: 220px; }
.sett-soglie { align-items: end; }
.reset-box { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--st-scaduto-bg); animation: reset-in var(--d-std) var(--ease-out); }
.reset-box[hidden] { display: none; }
@keyframes reset-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .reset-box { animation: fade-only var(--d-fast) var(--ease-out); } }
.user-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 559px) { .user-pick { grid-template-columns: minmax(0, 1fr); } }
.sim-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.sim-list li { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--ghiaccio); }
.sim-list li > .ic { color: var(--blu); margin-top: 2px; }
.sim-list b { display: block; font-size: var(--fs-sm); }
.sim-list span { font-size: 12.5px; color: var(--ink-3); }

/* ===== Documenti A4 (anteprima e stampa) ===== */
.doc { width: 794px; background: #fff; color: #12293A; font-family: Arial, "Helvetica Neue", sans-serif; font-size: 12px; line-height: 1.4; }
.doc .mono { font-family: var(--f-mono); }
.doc-prev { padding: 40px 44px 30px; min-height: 1123px; display: flex; flex-direction: column; gap: 18px; }
.d-head { display: flex; align-items: center; gap: 16px; }
.d-logo { width: 62px; height: auto; }
.d-brand { display: flex; flex-direction: column; flex: 1; font-size: 11px; color: #5E7387; }
.d-brand b { font-family: var(--f-title); font-size: 18px; color: #0F4E7A; }
.d-title { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #5E7387; }
.d-title h1 { font-family: Arial, sans-serif; font-size: 22px; color: #0F4E7A; letter-spacing: 0.02em; }
.d-title b { font-size: 14px; color: #12293A; }
.d-road { height: 4px; background: repeating-linear-gradient(90deg, #FF7F61 0 18px, transparent 18px 28px); border-radius: 2px; }
.d-grid2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; }
.d-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.d-box { border: 1px solid #D5DEE7; border-radius: 10px; padding: 12px 14px; }
.d-box h4 { font-family: Arial, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #5E7387; margin-bottom: 4px; }
.d-big { font-size: 15px; font-weight: 700; color: #12293A; }
.d-box p { color: #33495C; }
.d-veh .row { gap: 12px; }
.d-veh .veh { width: 110px; height: auto; }
.d-facts { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #D5DEE7; border-radius: 10px; overflow: hidden; }
.d-facts > div { padding: 10px 12px; border-right: 1px solid #D5DEE7; display: flex; flex-direction: column; background: #F2F6FA; }
.d-facts > div:last-child { border-right: 0; }
.d-facts span { font-size: 10px; color: #5E7387; text-transform: uppercase; letter-spacing: 0.06em; }
.d-facts b { font-size: 14px; }
.d-kit { position: relative; }
.d-kit .kit-ic { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; }
.d-table { width: 100%; border-collapse: collapse; }
.d-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #5E7387; padding: 8px 10px; border-bottom: 2px solid #0F4E7A; }
.d-table td { padding: 9px 10px; border-bottom: 1px solid #E3EAF0; }
.d-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.d-table tfoot td { border: 0; padding-top: 12px; font-weight: 700; font-size: 13px; }
.d-tot { font-size: 20px !important; color: #0F4E7A; }
.d-disc td { color: #0B7A71; }
.d-note { border-left: 3px solid #FF7F61; padding: 6px 12px; background: #FFF6F3; }
.d-note h4 { font-size: 10px; text-transform: uppercase; color: #B8452A; }
.d-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #D5DEE7; font-size: 9.5px; color: #5E7387; text-align: center; }
.d-empty { color: #B4BEC7; }
.doc-contr { display: flex; flex-direction: column; gap: 24px; background: transparent; }
.d-page { background: #fff; padding: 34px 38px 24px; min-height: 1123px; display: flex; flex-direction: column; gap: 6px; }
.doc-contr .d-head { margin-bottom: 8px; }
.cr { display: flex; border: 1px solid #D5DEE7; border-top: 0; }
.cr:first-of-type, .d-sec + .cr { border-top: 1px solid #D5DEE7; }
.cr .c { flex: 1; min-width: 0; padding: 5px 8px 6px; border-right: 1px solid #D5DEE7; display: flex; flex-direction: column; }
.cr .c:last-child { border-right: 0; }
.cr .c.w2 { flex: 2; } .cr .c.w3 { flex: 3; } .cr .c.w4 { flex: 4; }
.cr .c span { font-size: 8.5px; color: #5E7387; }
.cr .c b { font-size: 11px; color: #12293A; overflow-wrap: anywhere; min-height: 15px; }
.cr-head { background: #F2F6FA; border-top: 1px solid #D5DEE7; }
.d-strong { color: #0F4E7A; }
.d-sec { font-family: Arial, sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #0F4E7A; padding-bottom: 3px; border-bottom: 2px solid #FF7F61; margin: 12px 0 6px; }
.d-small { font-size: 11px; color: #33495C; }
.d-cond { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 11px; }
.d-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.d-sign div { border-bottom: 1px solid #12293A; padding-bottom: 60px; display: flex; flex-direction: column; font-size: 11px; }
.d-sign span { color: #5E7387; font-size: 9.5px; }

#print-root { display: none; }