/* ===== Tema escuro (ambiente de teste) ===== */
:root{color-scheme:dark;
  --bg:#0A1220; --surface:rgba(255,255,255,.045); --solid:#131D30; --ink:#EAF0F7; --muted:#8F9CB2; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.05);
  --accent:#5EDBA2; --accent-h:#7BE6B5; --accent-soft:rgba(94,219,162,.14); --accent-ink:#062419;
  --amber:#F4C46E; --amber-soft:rgba(244,196,110,.14); --red:#F29A88; --red-soft:rgba(242,154,136,.14); --gray-soft:rgba(255,255,255,.07); --gray-dot:#56627A;
  --c-fresh:#BDEBD2; --c-warm:#F5DDA4; --c-late:#F3B6A6; --c-ink:#0F1C28;
  --shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --f-display:'Outfit',ui-sans-serif,system-ui,sans-serif; --f-num:'Outfit',ui-sans-serif,system-ui,sans-serif;}
body{background:radial-gradient(1100px 620px at 18% -8%,#1C3157 0,transparent 62%),radial-gradient(900px 560px at 105% 4%,#123A4A 0,transparent 58%),#0A1220;background-attachment:fixed;color:var(--ink)}
.app{grid-template-columns:270px minmax(0,1fr)}
.side{margin:16px 0 16px 16px;height:calc(100vh - 32px);top:16px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:22px 14px}
.brand b{font-weight:700;color:var(--ink);font-size:26px}
.brand b::first-letter{color:var(--accent)}
.navbtn,.folder{border-radius:999px;padding:10px 14px}
.navbtn:hover,.folder:hover{background:rgba(255,255,255,.06)}
.navbtn.on{background:var(--c-fresh);color:var(--c-ink)}
.folder.on{background:var(--accent-soft);color:var(--accent)}
.navbtn.on .cnt{background:var(--c-ink);color:var(--c-warm)}
.topbar{background:rgba(10,18,32,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:0;padding:16px 28px}
.topbar h1{font-weight:600}
.search input{background:rgba(255,255,255,.05);border-color:var(--line);border-radius:999px}
.avatar{background:linear-gradient(135deg,var(--c-warm),var(--c-late));color:var(--c-ink)}
.btn{border-radius:999px}
.btn-sm{border-radius:999px}
.btn-primary:hover{background:var(--accent-h)}
.btn-outline{background:rgba(255,255,255,.04)}
.btn-danger{background:var(--red);color:var(--c-ink)}
.panel{border-radius:24px;background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel-h{border-bottom-color:var(--line2);padding:18px 22px}
.page-h h2,.dh h2{font-weight:600;letter-spacing:-.02em}
.stat .si{border-radius:50%;background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line)}
.stat b{font-weight:600}
.t th{background:transparent}
.t tbody tr:hover td{background:rgba(255,255,255,.025)}
.ib{background:rgba(255,255,255,.04);border-radius:50%}
select,input.inp,.modal textarea{background:rgba(255,255,255,.05)!important;color:var(--ink)}
option{background:var(--solid);color:var(--ink)}
.modal-bg{background:rgba(3,8,16,.6);backdrop-filter:blur(4px)}
.modal{background:var(--solid);border:1px solid var(--line);border-radius:24px}
.vin .money input{background:rgba(255,255,255,.06);color:var(--ink)}
.phone{border-color:#05090F;color:#14201B}
.ph-form input{background:#F3F5F4;color:#14201B;border-color:#E1E7E4}
.ph-form .btn-primary{background:#15805A;color:#fff}
.ph-done .ck{background:#E2F2EA;color:#15805A}
.phone .sub{color:#5F6E68}
.chat{background:#DCF3D0;color:#14201B}
.toast{background:var(--c-fresh);color:var(--c-ink)}
.note{background:rgba(255,255,255,.03)}
.lg-side{background:rgba(255,255,255,.035)!important;color:var(--ink)!important;border-right:1px solid var(--line)}
.lg-side .lb{color:var(--accent)}
.mob-out{border-top-color:var(--line)}
.demo-b{font-size:12px;font-weight:600;color:var(--c-ink);background:var(--c-warm);border-radius:999px;padding:5px 12px;white-space:nowrap}
.muted-s{font-size:13px;color:var(--muted)}
/* dashboard */
.dh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dh h2{font-family:var(--f-display);font-size:38px;line-height:1.05;margin:0}
.dh p{margin:6px 0 0;color:var(--muted)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.seg button{border:0;background:none;color:var(--muted);font:600 14px var(--f-body);padding:8px 14px;border-radius:999px;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button.on{background:rgba(255,255,255,.12);color:var(--ink)}
.seg.sm button{padding:6px 12px;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kpi{display:flex;gap:14px;align-items:center;min-width:0}
.ki{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;flex:none}
.kv1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi b{font:600 26px var(--f-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi small{display:block;color:var(--muted);font-size:13px}
.dl em{font-style:normal}
.dl{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:rgba(255,255,255,.08);color:var(--muted);white-space:nowrap}
.dl.up{background:var(--c-fresh);color:var(--c-ink)}
.dl.down{background:var(--c-late);color:var(--c-ink)}
.gl{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.gl-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gl-h h3{margin:0;font-size:16px;font-weight:600}
.gl-a{display:flex;align-items:center;gap:10px}
.gl-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.gl-big b{font:600 44px var(--f-num);letter-spacing:-.03em;line-height:1}
.gl-big span{color:var(--muted);font-size:14px;display:flex;gap:8px;align-items:center}
.gl-leg{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.gl-leg span{display:flex;align-items:center;gap:8px}
.lg-c{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.lg-p{width:18px;border-top:2px dashed var(--muted)}
.ch{position:relative;height:240px;margin:4px 0 26px 52px}
.ch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-y{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.08)}
.ch-y span{position:absolute;right:calc(100% + 10px);top:-8px;font-size:12px;color:var(--muted);white-space:nowrap}
.ch-x{position:absolute;left:0;right:0;top:calc(100% + 8px);height:16px}
.ch-x span{position:absolute;transform:translateX(-50%);font-size:12px;color:var(--muted);white-space:nowrap}
.ch-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(94,219,162,.25);transform:translate(-50%,-50%);pointer-events:none}
.ch-tip{position:absolute;top:0;transform:translateX(12px);background:var(--solid);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13px;pointer-events:none;display:flex;flex-direction:column;gap:1px;min-width:110px;z-index:2}
.ch-tip.flip{transform:translateX(calc(-100% - 12px))}
.ch-tip span{font:600 16px var(--f-num)}.ch-tip small{color:var(--muted)}
.lcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lc{border-radius:22px;padding:16px;color:var(--c-ink);display:flex;flex-direction:column;gap:6px}
.lc-fresh{background:var(--c-fresh)}.lc-warm{background:var(--c-warm)}.lc-late{background:var(--c-late)}
.lc-h{display:flex;gap:6px;flex-wrap:wrap}
.lc-t{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;background:rgba(15,28,40,.08);border-radius:999px;padding:4px 10px}
.lc-late .lc-h .lc-t:first-child{background:#fff}
.lc h4{margin:6px 0 0;font:600 21px var(--f-display);letter-spacing:-.01em}
.lc-s{font-size:13px;opacity:.75}
.lc-b{background:rgba(255,255,255,.45);border-radius:14px;padding:10px 12px;font-size:13px;display:flex;flex-direction:column;gap:3px;margin-top:4px}
.lc-b b{font-weight:700}
.lc-ad{display:flex;align-items:center;gap:5px;opacity:.7;font-size:12px;margin-top:2px}
.lc-f{margin-top:auto;padding-top:8px}
.lc .vbtns{flex-wrap:wrap}
.lc .vbtns .btn{flex:1 1 auto;padding:8px 10px;font-size:13px}
.lc .btn-primary{background:var(--c-ink);color:#fff}
.lc .btn-primary:hover{background:#1E3446}
.lc .btn-outline{background:rgba(255,255,255,.5);border-color:transparent;color:var(--c-ink)}
.lc .btn-outline:hover{background:#fff;color:var(--c-ink)}
.lc .pill.p-gray{background:rgba(15,28,40,.08);color:var(--c-ink)}
.lc .vin{flex-wrap:wrap}.lc .vin .money{flex:1}
.lc .vin .money input{background:#fff;color:var(--c-ink);border-color:var(--c-ink)}
.lc .vin .money span{color:#4A5866}.lc .undo{color:var(--c-ink)}
.lc-key{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.lc-key span{display:flex;align-items:center;gap:7px}.lc-key i{width:10px;height:10px;border-radius:50%}
.k-fresh{background:var(--c-fresh)}.k-warm{background:var(--c-warm)}.k-late{background:var(--c-late)}
.ringw{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;padding:8px 0}
.ring{width:190px;height:190px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) 0 var(--a),var(--amber) var(--a) var(--b),var(--red) var(--b) var(--c),var(--gray-dot) var(--c) 100%);-webkit-mask:radial-gradient(circle,transparent 66px,#000 67px);mask:radial-gradient(circle,transparent 66px,#000 67px);position:relative}
.ringbox{position:relative;width:190px;height:190px;flex:none}
.ring{position:absolute;inset:0;width:auto;height:auto}
.ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.ring-c b{font:600 40px var(--f-num);letter-spacing:-.03em;line-height:1}
.ring-c small{color:var(--muted);font-size:12px;max-width:110px}
.rleg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;font-size:13px;color:var(--muted)}
.rleg span{display:flex;flex-direction:column;gap:2px;padding-left:16px;position:relative}
.rleg i{position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%}
.rleg b{font:600 22px var(--f-num);color:var(--ink)}
.ads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ads li{display:flex;gap:12px;align-items:flex-start}
.ad-r{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;font:600 13px var(--f-num);flex:none}
.ads li:first-child .ad-r{background:var(--c-warm);color:var(--c-ink)}
.ad-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ad-t{display:flex;justify-content:space-between;gap:10px}.ad-t b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ad-t span{font:600 14px var(--f-num);white-space:nowrap}
.ad-m small{color:var(--muted);font-size:12px}
.ad-bar,.crow-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.ad-bar i,.crow-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--c-fresh))}
.clist{display:flex;flex-direction:column}
.crow{display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(0,2fr) 120px auto;gap:20px;align-items:center;padding:14px 22px;border-top:1px solid var(--line2)}
.crow:first-child{border-top:0}
.crow-n{display:flex;gap:12px;align-items:center;min-width:0}.crow-n b{display:block;font-size:15px}.crow-n small{display:block;color:var(--muted);font-size:12px}
.crow-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.crow-k b{display:block;font:600 17px var(--f-num);white-space:nowrap}.crow-k b.amb{color:var(--amber)}.crow-k small{color:var(--muted);font-size:12px}
.g-dash{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.crow{grid-template-columns:1fr;gap:10px}.g-dash{grid-template-columns:1fr}}
@media (max-width:900px){
  .side{margin:12px 12px 0;height:auto;position:static;border-radius:24px}
  .app{grid-template-columns:1fr}
  .topbar{padding:12px 16px}
  .dh h2{font-size:30px}
  .kpis{gap:14px}.kpi{gap:10px}.ki{width:38px;height:38px}.kpi b{font-size:20px}
  .gl{padding:16px}.gl-big b{font-size:34px}
  .ch{height:190px;margin-left:44px}
  .lcs{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .lc{scroll-snap-align:start}
  .crow{padding:14px 16px}.crow-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg{overflow-x:auto;max-width:100%}
  .demo-b{display:none}
  .kpi .dl em{display:none}
  .kpi>div{min-width:0}
}