/* ═════════════ TEMA ═════════════ */
:root{
  --font:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:14px; --r2:10px; --r3:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  --bg:#07080b; --bg2:#0a0c11; --surface:#0e1117; --surface2:#131720; --surface3:#191e29; --hover:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.065); --line2:rgba(255,255,255,.11); --line3:rgba(255,255,255,.18);
  --text:#e9ecf3; --muted:#9aa3b5; --dim:#7f889c;
  --accent:#eef1f6; --accent-ink:#0a0c11; --focus:rgba(238,241,246,.55);
  --consultar:#a78bfa; --consultada:#38bdf8; --sem_restricao:#94a3b8; --aguardando:#fbbf24; --resumida:#34d399; --red:#fb7185;
  --enviado:#818cf8; --adiantado:#fb923c;
  --web:#60a5fa; --ws:#f59e0b;
  --shadow:0 18px 50px -18px rgba(0,0,0,.75); --shadow2:0 6px 18px -8px rgba(0,0,0,.6);
  --glow:radial-gradient(900px 500px at 0% -10%,rgba(255,255,255,.045),transparent 60%),radial-gradient(800px 500px at 100% 110%,rgba(255,255,255,.025),transparent 60%);
  --input:#0a0d13; --plate:#f3f5fa; --plate-ink:#0b1020;
}
[data-theme="light"]{
  --bg:#f4f5f9; --bg2:#eceef4; --surface:#ffffff; --surface2:#f7f8fb; --surface3:#eef1f6; --hover:rgba(15,23,42,.035);
  --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.13); --line3:rgba(15,23,42,.22);
  --text:#0f172a; --muted:#56607a; --dim:#636b7e;
  --accent:#111827; --accent-ink:#ffffff; --focus:rgba(17,24,39,.45);
  --consultar:#7c3aed; --consultada:#0369a1; --sem_restricao:#475569; --aguardando:#b45309; --resumida:#047857; --red:#be123c;
  --enviado:#4f46e5; --adiantado:#c2410c;
  --web:#1d4ed8; --ws:#b45309;
  --shadow:0 18px 50px -20px rgba(15,23,42,.35); --shadow2:0 6px 16px -8px rgba(15,23,42,.25);
  --glow:radial-gradient(900px 500px at 0% -10%,rgba(15,23,42,.04),transparent 60%);
  --input:#ffffff; --plate:#ffffff; --plate-ink:#0b1020;
}
.s-consultar{--c:var(--consultar)} .s-consultada{--c:var(--consultada)} .s-sem_restricao{--c:var(--sem_restricao)}
.s-aguardando{--c:var(--aguardando)} .s-resumida{--c:var(--resumida)} .s-red{--c:var(--red)}
.s-enviado{--c:var(--enviado)} .s-adiantado{--c:var(--adiantado)}
/* controles nativos (setas, calendário, barra de rolagem) no tema do painel, não no do Windows */
[data-theme="dark"]{color-scheme:dark} [data-theme="light"]{color-scheme:light}
/* tema claro: texto colorido escurecido pra dar contraste sobre fundo tingido */
[data-theme="light"] :is(.pill,.pill-select,.btn.tint,.mv.on,.stepper .lb){color:color-mix(in srgb,var(--c) 75%,#000)}
[data-theme="light"] :is(.tag.warn,.tag.pin,.rx.ws){color:#92400e}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg); background-image:var(--glow); background-attachment:fixed; color:var(--text); font:14px/1.45 var(--font); -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none}
::selection{background:color-mix(in srgb,var(--text) 22%,transparent)}
html{scrollbar-width:thin; scrollbar-color:var(--line3) transparent}
input[type=number]{appearance:textfield; -moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--line2); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--line3)}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.i{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.i.sm{width:14px; height:14px} .i.lg{width:20px; height:20px}
.i.st{color:var(--c)}
kbd{font:600 10.5px var(--mono); padding:2px 6px; border-radius:6px; border:1px solid var(--line2); background:var(--surface2); color:var(--muted)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.pos{color:var(--resumida)} .neg{color:var(--red)} .warn{color:var(--aguardando)}
.num{font-variant-numeric:tabular-nums}
.grow{flex:1; min-width:0}
html.is-file .app{display:none}

/* ═════════════ LAYOUT ═════════════ */
.app{display:flex; height:100vh; height:100dvh}
.side{width:248px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; padding:18px 12px 12px; border-right:1px solid var(--line); background:color-mix(in srgb,var(--bg2) 80%,transparent); backdrop-filter:blur(16px); z-index:60}
.brand{display:flex; align-items:center; gap:11px; padding:2px 8px 6px}
.brand-logo{width:36px; height:36px; border-radius:11px; background:#111827; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); display:grid; place-items:center; flex-shrink:0}
.dr-ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; color:var(--text); background:var(--surface3); box-shadow:inset 0 0 0 1px var(--line2)}
.brand-logo svg{width:26px; height:17px; display:block}
.brand-logo.big{width:62px; height:62px; border-radius:18px; margin:0 auto 16px}
.brand-logo.big svg{width:44px; height:28px}
.brand-txt b{display:block; font-size:15px; font-weight:800; letter-spacing:-.2px}
.brand-txt small{color:var(--dim); font-size:11.5px; font-weight:500}
.side-search{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r2); border:1px solid var(--line); background:var(--surface); color:var(--dim); font-size:13px; transition:.15s; text-align:left}
.side-search span:not(.i){flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-search:hover{border-color:var(--line2); color:var(--muted)}
.nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.nav-sec{font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--dim); padding:12px 10px 6px}
.nav-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r2); color:var(--muted); font-weight:600; font-size:13.5px; transition:background .15s,color .15s; text-align:left; width:100%; position:relative}
.nav-item:hover{background:var(--hover); color:var(--text)}
.nav-item.active{background:var(--surface2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line)}
.nav-item.active::before{content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--text)}
.nav-item .ni-n{margin-left:auto; font-size:11px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums}
.nav-item .ni-n.hot{color:var(--consultar); background:color-mix(in srgb,var(--consultar) 16%,transparent); padding:1px 7px; border-radius:99px}
.nav-sep{height:1px; background:var(--line); margin:10px 10px 8px}
.side-foot{margin-top:auto; display:flex; align-items:center; gap:8px; padding:10px 6px 2px; border-top:1px solid var(--line)}
.sync{flex:1; display:flex; align-items:center; gap:10px; min-width:0; padding:4px}
.sync-dot{width:9px; height:9px; border-radius:99px; background:var(--dim); flex-shrink:0; position:relative}
.sync.live .sync-dot{background:var(--resumida)}
.sync.live .sync-dot::after{content:''; position:absolute; inset:-4px; border-radius:99px; border:2px solid var(--resumida); opacity:0; animation:ping 2.2s infinite}
.sync.saving .sync-dot{background:var(--aguardando); animation:blink .8s infinite}
.sync.off .sync-dot,.sync.err .sync-dot{background:var(--red)}
.sync-txt{min-width:0}
.sync-txt b{display:block; font-size:12.5px; font-weight:700}
.sync-txt small{display:block; color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@keyframes ping{0%{transform:scale(.6); opacity:.7} 80%,100%{transform:scale(1.5); opacity:0}}
@keyframes blink{50%{opacity:.35}}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r2); color:var(--muted); transition:.15s; flex-shrink:0}
.icon-btn:hover{background:var(--hover); color:var(--text)}
.icon-btn.sm{width:28px; height:28px; border-radius:var(--r3)}
.icon-btn.danger:hover{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent)}
.side-scrim{display:none}

.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; height:100dvh}
.top{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 28px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(12px); flex-shrink:0}
.top-l{display:flex; align-items:center; gap:10px; min-width:0}
.top-title{min-width:0}
.top-title h1{font-size:19px; font-weight:800; letter-spacing:-.4px}
.top-title p{color:var(--dim); font-size:12.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-r{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.view{flex:1; overflow:auto; padding:22px 28px 90px; overscroll-behavior:contain}
.view>*{animation:enter .28s var(--ease)}
@keyframes enter{from{opacity:0; transform:translateY(6px)}}
.only-m{display:none}

/* ═════════════ BOTÕES / CAMPOS ═════════════ */
.btn{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--r2); border:1px solid var(--line2); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; white-space:nowrap; transition:background .15s,border-color .15s,transform .1s,filter .15s}
.btn:hover{background:var(--surface2); border-color:var(--line3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 6px 16px -10px rgba(0,0,0,.55)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--bg)); border-color:transparent}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--hover); color:var(--text)}
.btn.danger{color:var(--red)}
.btn.danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent); border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.btn.sm{height:30px; padding:0 10px; font-size:12px; border-radius:var(--r3)}
.btn.xs{height:26px; padding:0 8px; font-size:11.5px; border-radius:7px; gap:5px}
.btn.tint{background:color-mix(in srgb,var(--c) 12%,transparent); border-color:color-mix(in srgb,var(--c) 30%,transparent); color:var(--c)}
.btn.tint:hover{background:color-mix(in srgb,var(--c) 20%,transparent)}
.btn.primary kbd{background:color-mix(in srgb,var(--accent-ink) 9%,transparent); border-color:color-mix(in srgb,var(--accent-ink) 18%,transparent); color:var(--accent-ink)}
.btn:disabled{opacity:.45; pointer-events:none}
.inp,.sel,textarea.inp{width:100%; height:38px; padding:0 12px; border-radius:var(--r2); border:1px solid var(--line2); background:var(--input); color:var(--text); font-size:13.5px; outline:none; transition:border-color .15s,box-shadow .15s}
textarea.inp{height:auto; padding:10px 12px; resize:vertical; line-height:1.5}
.inp:focus,.sel:focus{border-color:var(--line3); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 22%,transparent)}
.pill-select:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.inp::placeholder{color:var(--dim)}
.inp.up{text-transform:uppercase; font-family:var(--mono); font-weight:700; letter-spacing:1px}
.sel{appearance:none; padding-right:30px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center}
.sel.sm{height:32px; font-size:12.5px; width:auto}
.datas{display:inline-flex; align-items:center; gap:6px}
.datas .inp{height:32px; width:142px; font-size:12.5px; padding:0 9px}
.search{position:relative; display:flex; align-items:center}
.search .i{position:absolute; left:11px; color:var(--dim); pointer-events:none}
.search .inp{padding-left:34px; height:34px; width:230px; font-size:13px}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
.f>label,.f>.lbl{font-size:11.5px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px}
.f .hint{font-size:11.5px; color:var(--dim)}
.f-full{grid-column:1/-1}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* ═════════════ COMPONENTES ═════════════ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; min-width:0}
.card-h{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.card-h h3{font-size:14px; font-weight:700; letter-spacing:-.1px; display:flex; align-items:center; gap:8px}
.card-h h3 .i{color:var(--muted)}
.card-h .card-sub{color:var(--dim); font-size:12px; font-weight:500}
.card-h .card-act{margin-left:auto; display:flex; gap:6px; align-items:center}
.grid{display:grid; gap:16px; margin-bottom:16px}
.g-kpi{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.empty{color:var(--dim); text-align:center; padding:28px 12px; font-size:13px}
.empty .btn{display:flex; width:max-content; margin:12px auto 0}
.empty .i{width:28px; height:28px; display:block; margin:0 auto 8px; opacity:.6}

.av{--h:250; width:30px; height:30px; border-radius:9px; display:inline-grid; place-items:center; font-weight:800; font-size:12.5px; flex-shrink:0;
  color:hsl(var(--h) 85% 78%); background:hsl(var(--h) 70% 55% / .16); box-shadow:inset 0 0 0 1px hsl(var(--h) 70% 60% / .3)}
[data-theme="light"] .av{color:hsl(var(--h) 65% 30%); background:hsl(var(--h) 70% 55% / .13)}
.av.xs{width:22px; height:22px; border-radius:6px; font-size:10.5px}
.av.sm{width:26px; height:26px; border-radius:8px; font-size:11.5px}
.av.lg{width:46px; height:46px; border-radius:13px; font-size:18px}

.plate{display:inline-flex; flex-direction:column; align-items:center; background:var(--plate); color:var(--plate-ink); border-radius:5px; padding:0 0 1px; min-width:76px; box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px -2px rgba(0,0,0,.5); overflow:hidden; cursor:pointer; user-select:none; transition:transform .12s, box-shadow .12s; vertical-align:middle; flex-shrink:0}
.plate i{display:block; width:100%; height:4px; background:#1d4ed8}
.plate b{font:800 12.5px/1 var(--mono); letter-spacing:1.6px; padding:3px 7px 2px}
.plate.old{background:linear-gradient(180deg,#d9dee6,#b8c0cb)}
.plate.old i{background:transparent; height:2px}
.plate:hover{transform:translateY(-1px); box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 55%,transparent),0 4px 10px -2px rgba(0,0,0,.5)}
.plate.lg{min-width:150px; border-radius:8px}
.plate.lg i{height:8px} .plate.old.lg i{height:3px}
.plate.lg b{font-size:25px; letter-spacing:3px; padding:6px 14px 5px}

.pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:99px; font-size:11.5px; font-weight:700; white-space:nowrap; color:var(--c); background:color-mix(in srgb,var(--c) 13%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)}
.pill .i{width:13px; height:13px}
.pill-select{appearance:none; height:26px; padding:0 24px 0 10px; border-radius:99px; font-size:11.5px; font-weight:700; cursor:pointer; outline:none; border:none; color:var(--c); background-color:color-mix(in srgb,var(--c) 13%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center}
.pill-select option{background:var(--surface); color:var(--text)}
.dot{width:8px; height:8px; border-radius:99px; background:var(--c); display:inline-block; flex-shrink:0}

.rx{display:inline-flex; align-items:center; height:21px; padding:0 7px; border-radius:6px; font:700 10.5px var(--mono); letter-spacing:.3px; margin-right:4px; white-space:nowrap}
.rx.web{color:var(--web); background:color-mix(in srgb,var(--web) 13%,transparent)}
.rx.ws{color:var(--ws); background:color-mix(in srgb,var(--ws) 13%,transparent)}
.rx.unk{color:var(--consultar); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--consultar) 45%,transparent)}
.rx.zero{color:var(--muted); background:var(--surface3)}
.tag{display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:700; color:var(--muted); background:var(--surface3); white-space:nowrap}
.tag.new{color:var(--text); background:var(--surface3); box-shadow:inset 0 0 0 1px var(--line2)}
.tag.pin{color:var(--aguardando); background:color-mix(in srgb,var(--aguardando) 13%,transparent); cursor:pointer}
/* fila A consultar: posição, arrastar (computador) e setas (celular) */
.fila-n{min-width:22px; height:20px; padding:0 5px; border-radius:6px; display:inline-grid; place-items:center; flex-shrink:0; font:700 11px/1 var(--mono); color:var(--consultar); background:color-mix(in srgb,var(--consultar) 14%,transparent)}
.ck-cell{display:flex; align-items:center; gap:4px}
.fila-grip{display:inline-flex; color:var(--dim); cursor:grab; margin-left:-6px}
tr[data-fila]:hover .fila-grip{color:var(--text)}
.tbl tbody tr.dragging td{opacity:.4}
.tbl tbody tr.drop-antes td{box-shadow:inset 0 3px 0 0 var(--consultar)}
.tbl tbody tr.drop-depois td{box-shadow:inset 0 -3px 0 0 var(--consultar)}
.pm-ord{display:flex; flex-direction:column; gap:6px; align-self:center}
/* placa digitada: como vai ficar salva / já existe */
.pl-hint{display:block; min-height:16px; margin-top:4px; font-size:11.5px}
.pl-hint b{font-family:var(--mono); color:var(--text)}
.pl-ex{display:inline-flex; align-items:center; gap:4px; color:var(--aguardando); font-weight:600}
/* aviso: placa já está no painel */
.ex-ic{display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:11px; color:var(--aguardando); background:color-mix(in srgb,var(--aguardando) 14%,transparent)}
.ex-list{display:flex; flex-direction:column; gap:12px; max-height:46vh; overflow:auto}
.ex-row{display:flex; gap:12px; align-items:flex-start}
.ex-regs{display:flex; flex-direction:column; gap:6px; min-width:0}
.ex-regs>div{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ex-regs small{color:var(--muted); font-size:12px}
.pl-cell{display:flex; align-items:center; gap:6px}
.tag .i{width:12px; height:12px}
.tag.warn{color:var(--aguardando); background:color-mix(in srgb,var(--aguardando) 13%,transparent)}
.tag.bad{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent)}
.tag.ok{color:var(--resumida); background:color-mix(in srgb,var(--resumida) 12%,transparent)}

.seg{display:inline-flex; padding:3px; gap:2px; border-radius:var(--r2); background:var(--surface2); border:1px solid var(--line)}
.seg button{height:28px; padding:0 11px; border-radius:7px; font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface); color:var(--text); box-shadow:var(--shadow2),inset 0 0 0 1px var(--line2)}
.seg button .cnt{font-size:10.5px; color:var(--dim); font-variant-numeric:tabular-nums}
.seg button .dot{width:7px; height:7px}
.seg-abas{flex-wrap:wrap}

.bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.bar .grow{flex:1}

/* ═════════════ VISÃO GERAL ═════════════ */
.hoje{display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; padding:14px 18px; border-radius:var(--r); margin-bottom:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface2),var(--surface))}
.hoje-t{display:flex; flex-direction:column}
.hoje-t b{font-size:15px; font-weight:800; letter-spacing:-.2px}
.hoje-t small{color:var(--muted); font-size:12px}
.hoje-sep{width:1px; align-self:stretch; background:var(--line2)}
.hoje-item{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.hoje-item.z{opacity:.6}
.hoje-item[data-goto]{cursor:pointer}
.hoje-item b{color:var(--text); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums}
.hoje .grow{flex:1}

.kpi{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px 14px; cursor:pointer; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; min-width:0}
.kpi::after{content:''; position:absolute; inset:auto -30% -60% auto; width:140px; height:140px; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 22%,transparent),transparent); pointer-events:none}
.kpi:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--c) 40%,var(--line)); box-shadow:var(--shadow)}
.kpi-h{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--muted)}
.kpi-ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent)}
.kpi-ic .i{width:15px; height:15px}
.kpi-n{margin-left:auto; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums}
.kpi-v{font-size:24px; font-weight:800; letter-spacing:-.8px; margin-top:12px; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi-s{font-size:12px; color:var(--dim); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi-s b{color:var(--c); font-weight:700}

.chart{display:flex; align-items:flex-end; gap:6px; height:190px; padding-top:10px}
.chart-col{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; position:relative; cursor:default}
.chart-stack{display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; min-height:3px; background:var(--surface3); transition:filter .15s}
.chart-stack span{display:block; background:var(--c)}
.chart-col:hover .chart-stack{filter:brightness(1.2)}
.chart-col.today .chart-x{color:var(--text); font-weight:800}
.chart-x{font-size:10.5px; color:var(--dim); text-align:center; margin-top:6px; font-variant-numeric:tabular-nums; white-space:nowrap}
.chart-v{font-size:10px; color:var(--muted); text-align:center; margin-bottom:4px; font-weight:700; white-space:nowrap; overflow:hidden}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}

/* uma grade só: a coluna dos nomes fica do tamanho do maior ("Aguardando pagamento") */
.funil{display:grid; grid-template-columns:max-content minmax(60px,1fr) 34px; align-items:center; gap:10px}
.fn-row{display:contents; font-size:12.5px; cursor:pointer}
.fn-row:hover .fn-fill{filter:brightness(1.15)}
.fn-l{color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap}
.fn-bar{height:10px; border-radius:99px; background:var(--surface3); overflow:hidden}
.fn-fill{height:100%; border-radius:99px; background:var(--c); transition:width .5s var(--ease)}
.fn-n{text-align:right; font-weight:800; font-variant-numeric:tabular-nums}
.rates{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px}
.rate{padding:10px 12px; border-radius:var(--r2); background:var(--surface2); border:1px solid var(--line)}
.rate small{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--dim); font-weight:600}
.rate b{font-size:17px; font-weight:800; letter-spacing:-.4px; font-variant-numeric:tabular-nums}

.lst{display:flex; flex-direction:column; gap:6px; max-height:min(680px,72vh); overflow-y:auto; margin:0 -6px; padding:0 6px}
.row{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r2); border:1px solid var(--line); background:var(--surface2); transition:border-color .15s,background .15s; cursor:pointer}
.row:hover{border-color:var(--line2); background:var(--surface3)}
.row-main{flex:1; min-width:0}
.row-l1{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.row-l2{font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.row-l2 .obs{color:var(--aguardando)}
.row-act{display:flex; gap:5px; flex-shrink:0}
.age{font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:var(--surface3); color:var(--muted)}
.age.late{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent)}

.cob-g{display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:var(--r2); border:1px solid var(--line); background:var(--surface2)}
.cob-g .row{background:var(--surface)}
.cob-g .row-l2{white-space:normal; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.cob-g .row-l2 .prev{margin-left:0}
.cob-g .row:hover{background:var(--surface3)}
.cob-h{display:flex; align-items:center; gap:9px; font-size:13px; padding:0 2px 2px; flex-wrap:wrap}
.cob-h .dim{font-size:12px; font-weight:600}
.cob-h .icon-btn.sm{width:26px; height:26px}
.cob-grip{display:grid; place-items:center; width:18px; height:26px; margin:0 -4px 0 -6px; color:var(--dim); cursor:grab; border-radius:6px; flex-shrink:0}
.cob-grip:hover{color:var(--text); background:var(--hover)}
.cob-acoes{display:inline-flex; align-items:center; gap:2px}
.cob-ord{display:inline-flex; gap:2px; opacity:0; transition:opacity .15s}
.cob-g:hover .cob-ord,.cob-ord:focus-within{opacity:1}
.cob-g.dragging{opacity:.45}
.cob-g.drop-antes{box-shadow:0 -3px 0 0 var(--text)}
.cob-g.drop-depois{box-shadow:0 3px 0 0 var(--text)}
.icon-btn:disabled{opacity:.3; pointer-events:none}
.prev{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; margin-left:6px; white-space:nowrap; vertical-align:middle}
.prev .i{width:12px; height:12px}
.prev.p-hoje{color:var(--resumida); background:color-mix(in srgb,var(--resumida) 13%,transparent)}
.prev.p-depois{color:var(--muted); background:var(--surface3)}
.prev.p-atraso{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent)}
.kc-prev{margin-top:7px}
.kc-prev .prev{margin-left:0}
@media (hover:none){ .cob-ord{opacity:1} }
.fila-g{padding:12px; border-radius:var(--r2); border:1px solid var(--line); background:var(--surface2)}
.fila-g+.fila-g{margin-top:8px}
.fila-h{display:flex; align-items:center; gap:9px; margin-bottom:10px; font-weight:700; font-size:13px}
.fila-h .grow{flex:1}
.chips{display:flex; flex-wrap:wrap; gap:6px}

.rtable{width:100%; border-collapse:collapse; font-size:13px}
.rtable th{font-size:11px; color:var(--dim); font-weight:600; text-align:left; padding:0 10px 10px; white-space:nowrap}
.rtable td{padding:10px; border-top:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums}
.rtable tr.click{cursor:pointer}
.rtable tr.click:hover td{background:var(--hover)}
.rtable .num{text-align:right}
.rname{display:flex; align-items:center; gap:10px; font-weight:700}
.stackbar{display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--surface3); min-width:120px}
.stackbar span{display:block; background:var(--c); height:100%}
.counts{display:flex; gap:10px}
.counts span{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--c)}
.counts span.z{color:var(--dim); opacity:.6}

/* ═════════════ QUADRO ═════════════ */
/* as 8 etapas lado a lado; se não couber, rola pro lado com a barra à vista no pé da tela */
.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,1fr); gap:12px; align-items:stretch; overflow-x:auto; padding-bottom:12px; height:calc(100dvh - 240px); min-height:360px}
.col{background:color-mix(in srgb,var(--surface) 60%,transparent); border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column; min-height:0; max-height:100%; transition:border-color .15s,background .15s}
.col.drop{border-color:var(--c); background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.col-h{padding:12px 12px 10px; border-bottom:1px solid var(--line)}
.col-t{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; white-space:nowrap; min-width:0}
.col-n{min-width:0; overflow:hidden; text-overflow:ellipsis}
.col-t .cnt{margin-left:auto; font-size:11.5px; color:var(--muted); background:var(--surface3); padding:1px 8px; border-radius:99px; font-variant-numeric:tabular-nums}
.col-sum{font-size:11.5px; color:var(--dim); margin-top:4px; font-variant-numeric:tabular-nums}
.col-sum b{color:var(--c)}
.col-b{padding:8px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; min-height:80px; flex:1}
.kc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:10px; cursor:grab; transition:border-color .15s,box-shadow .15s,transform .15s; position:relative}
.kc::before{content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--c); opacity:.8}
.kc:hover{border-color:var(--line2); box-shadow:var(--shadow2)}
.kc.dragging{opacity:.4; transform:rotate(1.5deg)}
.kc-top{display:flex; align-items:center; gap:8px}
.kc-top .grow{flex:1}
.kc-date{font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums}
.kc-mid{display:flex; align-items:center; gap:4px; margin-top:8px; flex-wrap:wrap}
.kc-val{margin-left:auto; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums}
.kc-val small{color:var(--resumida); font-weight:700; font-size:11px}
.opc{display:inline-block; font:700 11.5px/1 var(--mono); letter-spacing:-.2px; padding:4px 6px; border-radius:6px; white-space:nowrap; color:var(--consultada); background:color-mix(in srgb,var(--consultada) 13%,transparent)}
.kc-obs{font-size:11.5px; color:var(--aguardando); margin-top:7px; line-height:1.35}
.kc-tz{font-size:11px; color:var(--dim); margin-top:4px}
.kc-act{display:flex; gap:5px; margin-top:9px}
.kc-act .btn{flex:1; justify-content:center}
.daysep{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--dim); margin:4px 2px 0}
.daysep::after{content:''; flex:1; height:1px; background:var(--line)}

/* ═════════════ TABELA ═════════════ */
.tbl-card{padding:0; overflow:hidden}
.tbl-wrap{overflow:auto; max-height:calc(100vh - 250px)}
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; min-width:980px}
.tbl th{position:sticky; top:0; z-index:2; background:var(--surface); text-align:left; font-size:11px; font-weight:600; color:var(--dim); padding:11px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; user-select:none}
.tbl th[data-sort]{cursor:pointer}
.tbl th[data-sort]:hover{color:var(--text)}
.tbl th.asc::after{content:' ↑'} .tbl th.desc::after{content:' ↓'}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl td.num{white-space:nowrap}
.tbl tbody tr{cursor:pointer; transition:background .12s}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl tbody tr.marcada td{background:color-mix(in srgb,var(--text) 6%,transparent)}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl .obs-c{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.tbl .obs-c .tz{color:var(--dim)}
.tbl-foot{display:flex; gap:18px; flex-wrap:wrap; padding:11px 14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); background:var(--surface2)}
.tbl-foot b{color:var(--text); font-variant-numeric:tabular-nums}
.ck{appearance:none; width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line3); display:grid; place-items:center; cursor:pointer; vertical-align:middle; transition:.12s}
.ck:checked{background:var(--text); border-color:var(--text)}
.ck:checked::after{content:''; width:8px; height:5px; border:2px solid var(--bg); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px)}
.bulk{position:fixed; left:50%; bottom:22px; transform:translate(-50%,140%); display:flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:14px; background:var(--surface2); border:1px solid var(--line2); box-shadow:var(--shadow); z-index:70; transition:transform .25s var(--ease),opacity .2s,visibility .25s; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none}
.bulk.show{transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto}
.bulk b{font-size:13px}
.bulk-acoes{display:contents}

/* ═════════════ REVENDAS ═════════════ */
.rgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:14px}
.rcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; cursor:pointer; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; display:flex; flex-direction:column; gap:13px}
.rcard:hover{transform:translateY(-2px); border-color:var(--line2); box-shadow:var(--shadow)}
.rc-h{display:flex; align-items:center; gap:12px}
.rc-name{flex:1; min-width:0}
.rc-name b{display:block; font-size:15.5px; font-weight:800; letter-spacing:-.2px}
.rc-name small{color:var(--dim); font-size:12px}
.rc-flags{display:flex; gap:5px; flex-wrap:wrap}
.rc-money{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.rc-money div{padding:8px 10px; border-radius:var(--r3); background:var(--surface2)}
.rc-money small{display:block; font-size:10.5px; color:var(--dim); font-weight:600}
.rc-money b{font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums}
.rc-act{display:flex; gap:6px; border-top:1px solid var(--line); padding-top:12px; margin-top:auto}

/* ═════════════ IMPORTAR DO BLOCO DE NOTAS ═════════════ */
textarea.mono{font:12.5px/1.55 var(--mono)}
.pv{margin-top:14px; padding:14px; border-radius:var(--r2); background:var(--surface2); border:1px solid var(--line)}
.pv-stats{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.pv-list{max-height:260px; overflow:auto; font-size:12.5px; border-top:1px solid var(--line); margin-top:10px}
.pv-list div{display:flex; align-items:center; gap:8px; padding:6px 2px; border-bottom:1px solid var(--line)}
.pv-avisos{display:flex; flex-direction:column; gap:6px; margin-top:10px; font-size:12.5px; color:var(--aguardando)}
.pv-avisos div{display:flex; align-items:flex-start; gap:7px; line-height:1.45}
.pv-avisos .i{margin-top:2px}
.pv-avisos b{color:var(--text)}
.pv-inc{display:flex; align-items:flex-start; gap:9px; margin:4px 0 10px; padding:9px 11px; border-radius:var(--r3); border:1px solid color-mix(in srgb,var(--aguardando) 35%,transparent); background:color-mix(in srgb,var(--aguardando) 8%,transparent); font-size:12.5px; color:var(--muted); cursor:pointer}
.pv-inc input{accent-color:var(--aguardando); margin-top:2px}
.pv-inc b{color:var(--text)}
.radio-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0}
.radio-card{display:flex; gap:10px; padding:11px 12px; border-radius:var(--r2); border:1px solid var(--line2); cursor:pointer; transition:.15s; font-size:12.5px; color:var(--muted)}
.radio-card b{display:block; color:var(--text); font-size:13px; margin-bottom:2px}
.radio-card input{accent-color:var(--text); margin-top:2px}
.radio-card:has(input:checked){border-color:var(--line3); background:var(--surface2)}

/* ═════════════ CONFIG ═════════════ */
.cfg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); gap:16px; align-items:start}
.cfg-wide{grid-column:1/-1}
.cfg-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.cfg-row:first-of-type{border-top:0}
.cfg-row .grow{flex:1; min-width:0}
.cfg-row .grow>b{display:block; font-size:13px}
.cfg-row small{color:var(--dim); font-size:12px}
.cfg-row small b:not([class]){color:var(--text)}
.money-inp{position:relative; width:140px}
.money-inp span{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--dim); font-size:12.5px; pointer-events:none}
.money-inp .inp{padding-left:32px; text-align:right; font-variant-numeric:tabular-nums}
.bk-list{display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto}
.bk{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r3); background:var(--surface2); font-size:12.5px}
.bk .grow{flex:1; min-width:0}
.keys{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:12.5px; align-items:center; color:var(--muted)}

/* ═════════════ DRAWER ═════════════ */
.drawer-scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; z-index:80}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(520px,100vw); background:var(--surface); border-left:1px solid var(--line2); box-shadow:var(--shadow); transform:translateX(105%); transition:transform .3s var(--ease); z-index:90; display:flex; flex-direction:column}
.drawer.open{transform:none}
.dr-h{padding:18px 20px 14px; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:flex-start}
.dr-h .grow{flex:1; min-width:0}
.dr-h h2{font-size:17px; font-weight:800; letter-spacing:-.3px}
.dr-h p{color:var(--dim); font-size:12.5px; margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dr-b{flex:1; overflow-y:auto; padding:18px 20px}
.dr-f{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; background:var(--surface2)}
.dr-f .grow{flex:1}
.dr-sec{font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--dim); margin:22px 0 10px; display:flex; align-items:center; gap:8px}
.dr-sec:first-child{margin-top:0}
.dr-sec::after{content:''; flex:1; height:1px; background:var(--line)}
.moves{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mv{display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:var(--r3); border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted); transition:.15s; text-align:left}
.mv:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent); color:var(--c); background:color-mix(in srgb,var(--c) 8%,transparent)}
.mv.on{border-color:var(--c); color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent)}
.mv .i{width:14px; height:14px}
.stepper-row{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line2); border-radius:var(--r3); overflow:hidden; background:var(--input)}
.stepper .lb{padding:0 10px; font:800 11px var(--mono); color:var(--c); align-self:stretch; display:flex; align-items:center; background:color-mix(in srgb,var(--c) 12%,transparent)}
.stepper button{width:30px; height:32px; color:var(--muted); font-size:16px; font-weight:700}
.stepper button:hover{background:var(--hover); color:var(--text)}
.stepper .v{min-width:30px; text-align:center; font:800 13px var(--mono); font-variant-numeric:tabular-nums}
.stepper .v.vazio{color:var(--dim); opacity:.55}
.stepper.web{--c:var(--web)} .stepper.ws{--c:var(--ws)}
.tiers{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.tier{padding:6px 10px; border-radius:var(--r3); border:1px solid var(--line2); font-size:12px; font-weight:600; color:var(--muted); transition:.15s; background:var(--surface)}
.tier b{color:var(--text); font-variant-numeric:tabular-nums}
.tier:hover{border-color:var(--line3); color:var(--text)}
.tier.on{border-color:var(--text); background:var(--surface3); color:var(--text)}
.tier-op{border-style:dashed}
.tier-op.on{border-style:solid; border-color:var(--consultada); background:color-mix(in srgb,var(--consultada) 13%,transparent)}
.timeline{display:flex; flex-direction:column; gap:0; padding-left:6px}
.tl{display:flex; gap:12px; position:relative; padding-bottom:14px; font-size:12.5px}
.tl::before{content:''; position:absolute; left:4px; top:12px; bottom:0; width:2px; background:var(--line)}
.tl:last-child::before{display:none}
.tl .dot{margin-top:4px; box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.tl small{color:var(--dim); display:block; font-size:11.5px}

/* ═════════════ MODAL / PALETA ═════════════ */
.modal-wrap,.palette-wrap{position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:9vh 16px 16px; background:rgba(3,5,10,.55); backdrop-filter:blur(5px); overflow-y:auto}
.modal-wrap.open,.palette-wrap.open{display:flex; animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{width:100%; max-width:540px; background:var(--surface); border:1px solid var(--line2); border-radius:18px; box-shadow:var(--shadow); animation:pop .2s var(--ease)}
.modal.wide{max-width:680px}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:0}}
.m-h{padding:18px 20px 0; display:flex; align-items:flex-start; gap:12px}
.m-h .grow{flex:1}
.m-h h3{font-size:16px; font-weight:800; letter-spacing:-.2px}
.m-h p{color:var(--dim); font-size:12.5px; margin-top:3px}
.m-b{padding:18px 20px}
.m-f{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; justify-content:flex-end; background:var(--surface2); border-radius:0 0 18px 18px}
.m-f .grow{flex:1}
.progress{height:4px; border-radius:99px; background:var(--surface3); overflow:hidden; margin-top:10px}
.progress span{display:block; height:100%; background:var(--consultada); transition:width .3s}
.det-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; max-height:150px; overflow:auto}
.det-chips .plate{cursor:pointer}
.det-chips>button{display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:2px; border-radius:7px; transition:opacity .15s}
.det-chips small{font-size:10px; font-weight:600; color:var(--dim)}
.det-chips .ja small{color:var(--aguardando)}
.det-chips .fora{opacity:.4}
.det-chips .fora .plate b{text-decoration:line-through}
.det-chips .fora small{color:var(--red)}
.palette{width:100%; max-width:620px; background:var(--surface); border:1px solid var(--line2); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; animation:pop .18s var(--ease)}
.pal-in{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.pal-in input{flex:1; background:none; border:none; outline:none; font-size:15px}
.pal-list{max-height:420px; overflow-y:auto; padding:6px}
.pal-g{font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--dim); padding:10px 10px 5px}
.pal-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:var(--r3); text-align:left; font-size:13px; color:var(--muted)}
.pal-item .grow b{color:var(--text); font-weight:600}
.pal-item .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pal-item.on{background:var(--surface3); color:var(--text)}
.pal-foot{display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--dim)}

/* ═════════════ TOAST / TIP / BLOCKER ═════════════ */
.toasts{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:200; align-items:flex-end; pointer-events:none; transition:right .3s var(--ease),bottom .3s var(--ease)}
body:has(.bulk.show) .toasts{bottom:84px}
body:has(.drawer.open) .toasts{right:calc(min(520px,100vw) + 20px)}
.toast{pointer-events:auto; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; border-radius:12px; background:var(--surface2); border:1px solid var(--line2); box-shadow:var(--shadow); font-size:13px; font-weight:600; max-width:420px; animation:tin .25s var(--ease)}
.toast.out{animation:tout .2s forwards}
.toast>.i{color:var(--muted)}
.toast.ok>.i{color:var(--resumida)} .toast.err>.i{color:var(--red)}
.toast button{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--text); padding:5px 9px; border-radius:7px; background:var(--surface3)}
.toast button:hover{background:var(--hover)}
.toast.fixo{border-color:color-mix(in srgb,var(--consultada) 45%,transparent)}
.toast.fixo>.i{color:var(--consultada)}
@keyframes tin{from{transform:translateY(10px); opacity:0}}
@keyframes tout{to{transform:translateX(20px); opacity:0}}
.tip{position:fixed; z-index:300; pointer-events:none; padding:8px 10px; border-radius:9px; background:var(--surface3); border:1px solid var(--line2); box-shadow:var(--shadow2); font-size:12px; opacity:0; transition:opacity .12s; white-space:nowrap}
.tip.show{opacity:1}
.tip div{display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums}
.blocker{position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:20px; background:var(--bg); background-image:var(--glow)}
.blocker.show{display:flex}
.blocker-card{width:100%; max-width:440px; text-align:center; padding:34px; border-radius:20px; background:var(--surface); border:1px solid var(--line2); box-shadow:var(--shadow)}
.blocker-card h2{font-size:19px; margin-bottom:8px; letter-spacing:-.3px}
.blocker-card p{color:var(--muted); line-height:1.55; margin-bottom:16px}
.blocker-card ol{text-align:left; display:flex; flex-direction:column; gap:8px; padding:14px 16px 14px 34px; border-radius:12px; background:var(--surface2); border:1px solid var(--line); color:var(--muted)}
.blocker-card ol b{color:var(--text)}
.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%,30%{box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 55%,transparent),0 0 24px -6px color-mix(in srgb,var(--text) 40%,transparent)}}

/* ═════════════ RESPONSIVO ═════════════ */
@media (max-width:1400px){ .g-kpi{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1100px){ .g-21,.g-2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .only-m{display:grid}
  .side{position:fixed; inset:0 auto 0 0; transform:translateX(-102%); transition:transform .25s var(--ease); box-shadow:var(--shadow)}
  .app.menu .side{transform:none}
  .app.menu .side-scrim{display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45)}
  .top{padding:12px 16px} .view{padding:16px 16px 90px}
  .top-r{flex-wrap:nowrap; flex-shrink:0}
  .top-r .btn .lbl,.top-r .btn kbd{display:none}
  .top-r .btn.keep .lbl{display:inline}
  .g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search .inp{width:100%}
  .form-grid,.radio-cards{grid-template-columns:1fr}
  .hoje-sep{display:none}
}
@media (max-width:600px){ .kpi-n{display:none} .kpi-h{white-space:nowrap; min-width:0} .kpi-l{min-width:0; overflow:hidden; text-overflow:ellipsis} }

/* ═════════════ ENTRAR (PIN) / USAR NO CELULAR ═════════════ */
.login .pin{height:58px; font:800 28px/1 var(--mono); letter-spacing:12px; text-align:center; padding-left:22px; margin-top:2px}
.login .login-erro{color:var(--red); min-height:20px; font-size:13px; margin:8px 0 10px}
.login .btn{width:100%; justify-content:center; height:46px; font-size:14px}
.cel-passo{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin:12px 0 7px; line-height:1.45}
.cel-passo>span{width:22px; height:22px; border-radius:99px; display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--text); background:var(--surface3); flex-shrink:0}
.cel-url{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 8px 8px 12px; margin-left:32px; border-radius:var(--r2); background:var(--surface2); border:1px solid var(--line); font-size:14.5px; word-break:break-all}
.cel-url+.cel-url{margin-top:6px}
.cel-url small{display:block; font:600 11px var(--font); color:var(--dim); margin-bottom:1px}
.cel-url.outra{opacity:.6; font-size:13px}
.cel-pin{font-size:15px; color:var(--text); letter-spacing:2px; padding:2px 8px; border-radius:6px; background:var(--surface3); white-space:nowrap}
.sync-mini{display:none}

/* ═════════════ CELULAR ═════════════ */
.tabbar,.bd-tabs,.pl-cards,.so-tab{display:none}
@media (max-width:900px){
  .sync-mini{display:inline-block; width:8px; height:8px; border-radius:99px; margin-left:8px; vertical-align:middle; background:var(--dim)}
  .sync-mini.live{background:var(--resumida)} .sync-mini.saving{background:var(--aguardando)} .sync-mini.off,.sync-mini.err{background:var(--red)}
}
@media (max-width:760px){
  .so-tab{display:grid}
  .sem-tab{display:none !important}

  /* barra de baixo: Início · Quadro · + · Placas · Revendas */
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:65;
    height:calc(62px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--bg2) 90%,transparent); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-top:1px solid var(--line)}
  .tab-item{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:62px; color:var(--dim); font-size:10.5px; font-weight:600; transition:color .15s}
  .tab-item .i{width:21px; height:21px}
  .tab-item.active{color:var(--text)}
  .tab-item.active .i{stroke-width:2.4}
  .tab-n{position:absolute; top:6px; left:calc(50% + 5px); min-width:17px; height:17px; padding:0 5px; border-radius:99px; font:700 10px/17px var(--font); text-align:center; color:var(--consultar); background:color-mix(in srgb,var(--consultar) 22%,var(--bg2))}
  .tab-n:empty{display:none}
  .tab-novo{justify-self:center; width:52px; height:52px; border-radius:17px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 24px -10px rgba(0,0,0,.7); transition:transform .12s}
  .tab-novo .i{width:24px; height:24px; stroke-width:2.6}
  .tab-novo:active{transform:scale(.93)}

  .top{padding:calc(10px + env(safe-area-inset-top)) 10px 10px 6px; gap:6px}
  .top-title h1{font-size:17px}
  .top-title p{font-size:11.5px}
  .top-r{gap:4px}
  .view{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
  .side{z-index:80; width:min(300px,84vw); padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .app.menu .side-scrim{z-index:75}
  .grid{gap:12px; margin-bottom:12px}
  .card{padding:15px}
  .card-h{gap:6px 10px}

  /* tela inicial */
  .hoje{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; padding:14px}
  .hoje-t{grid-column:1/-1}
  .hoje .grow{display:none}
  .hoje>.btn,.hoje>.tag{grid-column:1/-1; justify-content:center}
  .hoje>.btn{height:42px}
  .g-kpi{gap:10px}
  .g-kpi>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  .kpi{padding:13px 14px 12px}
  .kpi-v{font-size:21px; margin-top:10px}
  .chart{height:165px}
  .row{flex-wrap:wrap; gap:8px 10px}
  .row-act{width:100%; justify-content:flex-end}
  .cob-g .row-act .btn{flex:1; justify-content:center}
  .fila-h{flex-wrap:wrap}

  /* listas com abas: uma linha que rola pro lado */
  .seg-abas{flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; flex:1 1 100%}
  .seg-abas::-webkit-scrollbar{display:none}
  .seg-abas button{flex-shrink:0}
  .bar{gap:8px}
  .bar .grow{display:none}
  .bar .search{flex:1 1 180px}
  .bar .sel.sm{flex:1 1 40%}
  .datas{flex:1 1 100%} .datas .inp{flex:1; width:auto}

  /* Quadro: uma etapa por vez */
  .bd-tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -14px 12px; padding:0 14px 2px}
  .bd-tabs::-webkit-scrollbar{display:none}
  .bd-tabs button{flex-shrink:0; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:99px; border:1px solid var(--line2); background:var(--surface); color:var(--muted); font-size:12.5px; font-weight:700; transition:.15s}
  .bd-tabs button.on{border-color:color-mix(in srgb,var(--c) 60%,transparent); color:var(--text); background:color-mix(in srgb,var(--c) 14%,var(--surface))}
  .bd-tabs .cnt{font-size:11px; color:var(--dim)}
  .board{display:block; height:auto; min-height:0; overflow:visible; padding:0}
  .board .col{display:none; max-height:none; background:transparent; border:0}
  .board .col.ativa{display:flex; animation:enter .2s var(--ease)}
  .board .col-h{padding:0 2px 8px; border:0}
  .board .col-t{display:none}
  .board .col-b{overflow:visible; padding:0; min-height:0}
  .board .kc{padding:12px}
  .board .kc::before{top:12px; bottom:12px}

  /* Placas: cartões no lugar da tabela */
  .tbl-card{background:transparent; border:0; overflow:visible; padding:0}
  .tbl-card .tbl-wrap{display:none}
  .pl-cards{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
  .pm{position:relative; display:flex; gap:10px; align-items:flex-start; padding:12px 12px 12px 10px; border-radius:var(--r2); background:var(--surface); border:1px solid var(--line)}
  .pm::before{content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--c)}
  .pm.marcada{border-color:var(--line3); background:var(--surface2)}
  .pm-ck{display:flex; padding:2px 0 0 4px}
  .pm-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
  .pm-l1,.pm-l2,.pm-l3{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
  .pm-l2{font-size:12.5px; color:var(--muted)}
  .pm-l2 b{color:var(--text)}
  .pm-l3{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
  .pm-l3 .prev{margin-left:0}
  .pm-obs{font-size:12px; color:var(--aguardando); line-height:1.4}
  .pm-ord .icon-btn:disabled{opacity:.3}
  .tbl-card .empty{border:1px dashed var(--line2); border-radius:var(--r2)}
  .tbl-foot{border:1px solid var(--line); border-radius:var(--r2); gap:6px 14px}
  .tbl-foot .dim{display:none}

  /* revendas, configurações */
  .rc-act{flex-wrap:wrap}
  .atalhos{display:none}
  .cel-url{margin-left:0}

  /* gaveta em tela cheia */
  .drawer{border-left:0}
  .dr-h{padding:calc(14px + env(safe-area-inset-top)) 16px 12px}
  .dr-b{padding:14px 16px 20px}
  .dr-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap:wrap}
  .dr-f .btn{flex:1 1 auto; justify-content:center}
  .dr-f .grow{display:none}
  .moves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plate.lg{min-width:118px} .plate.lg b{font-size:20px; letter-spacing:2px}

  /* janelas sobem de baixo, como no celular */
  .modal-wrap{align-items:flex-end; padding:0}
  .modal,.modal.wide{max-width:none; border-radius:20px 20px 0 0; border-bottom:0; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; animation:sobe .26s var(--ease)}
  .m-h{position:relative; padding:20px 16px 0}
  .m-b{padding:14px 16px}
  .m-f{position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap:wrap; border-radius:0}
  .m-f .btn{flex:1 1 auto; justify-content:center}
  .m-f .grow{display:none}
  .palette-wrap{padding:calc(10px + env(safe-area-inset-top)) 10px 10px}
  .pal-foot{display:none}
  .pal-list{max-height:62dvh}

  /* avisos e barra de seleção acima da barra de baixo */
  .toasts{left:12px; right:12px; bottom:calc(74px + env(safe-area-inset-bottom)); align-items:stretch}
  .toast{max-width:none}
  /* com barra de seleção, gaveta ou janela aberta o aviso vai pro topo: embaixo cobriria os botões */
  body:has(.bulk.show) .toasts,body:has(.drawer.open) .toasts,body:has(.modal-wrap.open) .toasts{bottom:auto; top:calc(12px + env(safe-area-inset-top))}
  body:has(.bulk.show) .view{padding-bottom:calc(200px + env(safe-area-inset-bottom))}
  .lst{max-height:none; overflow:visible}
  .pal-item .pill{font-size:0; gap:0; padding:0 6px}
  /* Revendas / Total: no celular só o que importa (total, a receber, pra mim) */
  #ov-rev :is(th,td):is(:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(12)){display:none}
  /* tela inicial: o que é pra fazer (cobrar, consultar) antes dos números e do gráfico */
  .v-overview{display:flex; flex-direction:column}
  .v-overview>#ov-hoje{order:-2}
  .v-overview>.g-2{order:-1}
  .bulk{left:8px; right:8px; bottom:calc(70px + env(safe-area-inset-bottom)); transform:translateY(calc(100% + 140px)); flex-wrap:wrap; gap:8px; padding:8px 8px 10px 14px}
  .bulk.show{transform:none}
  .bulk>b{flex:1}
  /* quebra em 2 linhas em vez de cortar botão */
  .bulk-acoes{display:flex; flex-wrap:wrap; order:2; width:100%; gap:8px}
  .bulk-acoes>*{flex:1 1 auto; justify-content:center}
  .bulk-acoes .sel.sm{flex:1 1 140px; width:auto; min-width:0}
  .cob-todas{flex:1 1 100%; justify-content:center}
  .hoje-item:has(.i){grid-column:1/-1}
  .cob-acoes{margin-left:auto}
  .blocker-card{padding:26px 20px}
}
@keyframes sobe{from{transform:translateY(48px); opacity:0}}

/* ═════════════ TOQUE ═════════════ */
@media (pointer:coarse){
  .btn{height:42px}
  .btn.sm{height:38px}
  .btn.xs{height:40px; padding:0 12px; font-size:12.5px}
  .icon-btn{width:42px; height:42px}
  .icon-btn.sm,.cob-h .icon-btn.sm{width:40px; height:40px}
  .inp,.sel,.sel.sm,textarea.inp,.search .inp,.money-inp .inp,.datas .inp,.pal-in input,.pill-select{font-size:16px}
  .inp,.sel{height:44px}
  .sel.sm,.search .inp,.datas .inp{height:40px}
  .seg button,.bd-tabs button{height:40px}
  .toast button{min-height:40px; padding:0 14px}
  .pm-ck{padding:10px; margin:-8px -4px -8px -6px}
  .chips{gap:10px}
  .tier{padding:9px 12px; font-size:13px}
  .stepper button{width:44px; height:42px; font-size:20px}
  .ck{width:22px; height:22px; border-radius:6px}
  .ck:checked::after{width:10px; height:6px}
  .mv{padding:11px 12px}
  .pill-select{height:36px}
  .plate b{font-size:13.5px}
  .cob-grip{display:none}
  .cob-ord{opacity:1}
  kbd{display:none}
  .kpi:hover,.rcard:hover{transform:none; box-shadow:none}
  button,label,.plate,[data-open],[data-goto]{touch-action:manipulation}
}