/* =====================================================================
   Coko OS · coko.css — design system do redesign (out/2026)
   Tema escuro é o padrão. Tema claro: adicionar a classe "light" no <html class="coko light">.
   Fontes: Geist (UI) e Geist Mono (números, IDs, datas) — Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   Regra: estilos de tela usam estas classes + variáveis. Nada de cor fixa no HTML.
   ===================================================================== */
html.coko,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 14px/1.45 Geist,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.coko{color-scheme:dark;--bg:#0d0d0c;--surface:#141413;--surface2:#1a1a19;--raise:#222220;--line:#262624;--line2:#34342f;--text:#ecebe6;--text2:#a8a69e;--dim:#85837b;--brand:#ffd84a;--brand-ink:#1a1500;--brand-text:#ffd84a;--brand-soft:rgba(255,216,74,.09);--ok:#5fcf98;--warn:#e9b44c;--bad:#f07a6a;--info:#7fb2ff;--okbg:rgba(95,207,152,.10);--warnbg:rgba(233,180,76,.10);--badbg:rgba(240,122,106,.10);--infobg:rgba(127,178,255,.10);--bar:#3b3a35;--bar2:#57554e;--me:#2a2920;--ck:#ffd84a;--ed:#7fb2ff;--ss:#ff9f5a;--ads:#b69cff;--shadow:0 16px 48px rgba(0,0,0,.6)}
.coko.light{color-scheme:light;--bg:#f7f6f2;--surface:#ffffff;--surface2:#fbfaf7;--raise:#efede7;--line:#e6e3db;--line2:#d6d2c7;--text:#1b1a17;--text2:#57544c;--dim:#6d6a61;--brand:#f2b705;--brand-ink:#1a1500;--brand-text:#8a5d00;--brand-soft:rgba(242,183,5,.13);--ok:#13774a;--warn:#995f00;--bad:#b42d1d;--info:#2a62c9;--okbg:#e6f3ec;--warnbg:#f8efdc;--badbg:#f9e7e4;--infobg:#e7eef8;--bar:#dcd8ce;--bar2:#c4bfb2;--me:#fbf3d6;--ck:#8a5d00;--ed:#2a62c9;--ss:#b85514;--ads:#6a45d6;--shadow:0 16px 48px rgba(27,26,23,.14)}
.num{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border-radius:6px;font:500 13px/1 Geist,system-ui,sans-serif;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-p{background:var(--brand);color:var(--brand-ink)}.btn-p:hover{filter:brightness(1.06)}
.btn-s{background:var(--surface);color:var(--text);border-color:var(--line2)}.btn-s:hover{border-color:var(--dim)}
.btn-g{background:transparent;color:var(--text2)}.btn-g:hover{background:var(--raise);color:var(--text)}
.btn-ml{background:transparent;color:var(--brand-text);border-color:var(--brand)}.btn-ml:hover{background:var(--brand-soft)}
.btn-d{background:#dc2626;color:#fff}.btn-d:hover{background:#b91c1c}
.btn-ok{background:var(--okbg);color:var(--ok);border-color:color-mix(in oklab,var(--ok) 40%,transparent)}
.btn-no{background:var(--badbg);color:var(--bad);border-color:color-mix(in oklab,var(--bad) 40%,transparent)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{height:28px;padding:0 10px;font-size:12.5px}
.btn:focus-visible,.tab:focus-visible,.hit:focus-visible,.nav:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.sw2:focus-visible,.chip:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.nav{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:0 8px;border-radius:5px;color:var(--text2);font:400 13.5px/1.2 Geist,system-ui,sans-serif}
.nav:hover{background:var(--raise);color:var(--text)}
.nav.is-active{background:var(--raise);color:var(--text);font-weight:500;box-shadow:inset 2px 0 0 var(--brand)}
.nav-i{padding-left:34px;font-size:13px;min-height:30px}
.cnt{font:500 12px/1 'Geist Mono',monospace;color:var(--brand-text)}
.box{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.tab{height:30px;padding:0 12px;border:0;border-radius:5px;background:transparent;color:var(--text2);font:500 13px/1 Geist,system-ui,sans-serif;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.tab:hover{color:var(--text)}.tab.on{background:var(--raise);color:var(--text)}
.ul{border-radius:0;height:38px}
.hit{all:unset;cursor:pointer;box-sizing:border-box;display:block}
.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 6px;border-radius:4px;font:500 11.5px/1 Geist,system-ui,sans-serif;white-space:nowrap;background:color-mix(in oklab,currentColor 13%,transparent)}
.sw{border-radius:4px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.h2{margin:0;font:600 14px/1.2 Geist,system-ui,sans-serif}
.lbl{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text2)}
.f{height:32px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);color:var(--text);padding:0 10px;font:400 13px Geist,system-ui,sans-serif;width:100%}
textarea.f{height:auto;padding:8px 10px;line-height:1.5;resize:vertical}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);color:var(--text2);font:500 12.5px/1 Geist,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--text)}.chip.on{border-color:var(--brand);color:var(--brand-text);background:var(--brand-soft)}
.sw2{all:unset;cursor:pointer;position:relative;width:38px;height:22px;border-radius:999px;background:var(--line2);flex:0 0 38px;transition:background .15s}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:left .15s}
.sw2.on{background:var(--ok)}.sw2.on::after{left:19px;background:#fff}
.row:hover{background:var(--surface2)}
.bar{height:6px;border-radius:3px;background:var(--raise);overflow:hidden;display:flex}
.stat{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:6px;border:1px solid var(--line);background:var(--surface2)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));overflow:hidden}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:7px;border-right:1px solid var(--line)}
.kpi.hero{background:var(--brand);color:var(--brand-ink)}
.kpi .k{font-size:13px;color:var(--text2);font-weight:500}.kpi.hero .k,.kpi.hero .s{color:rgba(26,21,0,.72)}
.kpi .v{font-family:'Geist Mono',monospace;font-size:24px;font-weight:500;letter-spacing:-0.03em;line-height:1.1}
.kpi.hero .v{font-size:28px}
.kpi .s{font-size:12.5px;color:var(--text2)}
.th{display:grid;gap:10px;padding:9px 14px;font-size:12px;color:var(--dim);font-weight:500;border-bottom:1px solid var(--line)}
.tr{display:grid;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.tr:hover{background:var(--surface2)}
.r{text-align:right}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;display:flex;justify-content:center;align-items:center;padding:16px}
.dlg{width:100%;max-width:520px;box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 48px);overflow-y:auto}
.drw{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100vw;background:var(--surface);border-left:1px solid var(--line2);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.av{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font:600 11px/1 Geist,sans-serif;flex:0 0 30px;color:var(--brand-ink)}
.live{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.kbd{font:500 11px/1 'Geist Mono',monospace;color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:3px 5px}

/* ---------- Shell (sidebar + topbar + conteúdo) ---------- */
.app{min-height:100vh;display:flex;align-items:stretch}
.side{flex:0 0 236px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;padding:14px 10px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .logo{display:flex;align-items:baseline;gap:6px;padding:8px 8px 0;font-weight:600;font-size:15px;letter-spacing:-.02em}
.side .logo i{width:6px;height:6px;background:var(--brand);border-radius:1px;display:inline-block}
.side nav{display:flex;flex-direction:column;gap:1px;flex:1}
.side .foot{border-top:1px solid var(--line);padding:12px 8px 0;font-size:12px;color:var(--dim);display:flex;flex-direction:column;gap:3px}
.main{flex:1 1 560px;min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:0 28px;min-height:52px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:40}
.crumb{flex:1 1 200px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.crumb b{color:var(--text);font-weight:400}
.page{display:flex;flex-direction:column;gap:20px;padding:26px 28px 64px;width:100%}  /* sem teto: em tela larga o conteúdo ocupa a largura toda */
.ptitle{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.ptitle h1{margin:0;font-size:24px;font-weight:600;letter-spacing:-.025em}
.ptitle p{margin:6px 0 0;font-size:14px;color:var(--text2)}
.seg{display:flex;gap:2px;border:1px solid var(--line2);border-radius:6px;padding:2px}
.seg .tab{height:26px;padding:0 10px}
.tabsbar{display:flex;gap:2px;padding:0 8px;overflow-x:auto}
.tabsbar .tab{height:44px;border-radius:0}
.tabsbar .tab.on{background:transparent;box-shadow:inset 0 -2px 0 var(--brand)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.panel{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.tblwrap{overflow-x:auto}
.tfoot{padding:10px 14px;font-size:12.5px;color:var(--text2);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
.bulk{position:sticky;bottom:16px;z-index:30;display:flex;gap:10px;align-items:center;padding:10px 14px;box-shadow:var(--shadow);border-color:var(--line2)}
.banner{display:flex;gap:10px;align-items:center;padding:10px 16px;border-radius:8px;font-size:13px;border:1px solid var(--line)}
.banner.warn{background:var(--warnbg);border-color:color-mix(in oklab,var(--warn) 45%,var(--line))}
.banner.bad{background:var(--badbg);border-color:color-mix(in oklab,var(--bad) 45%,var(--line))}
.banner.info{background:var(--infobg);border-color:color-mix(in oklab,var(--info) 45%,var(--line))}
.empty{padding:40px;text-align:center;color:var(--text2);display:flex;flex-direction:column;gap:10px;align-items:center}
.skel{border-radius:6px;background:linear-gradient(90deg,var(--surface) 0,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:skel 1.2s infinite linear}
@keyframes skel{to{background-position:-200% 0}}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;width:420px;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:44px;border-radius:6px;background:var(--text);color:var(--bg);box-shadow:var(--shadow);font-size:13.5px}
.toast.bad{background:var(--bad);color:#fff}
.drw-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.drw-b{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.drw-f{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.risk{font-size:12.5px;font-weight:500}
.risk.ml{color:var(--brand-text)}.risk.money{color:var(--warn)}.risk.irrev{color:var(--bad)}.risk.sys{color:var(--info)}

/* ---------- Selos padronizados ---------- */
.tag.ok{color:var(--ok)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}.tag.info{color:var(--info)}.tag.mut{color:var(--text2)}
.tag.premium{color:var(--brand-text)}.tag.classico{color:var(--text2)}
.tag.log-full{color:var(--ok)}.tag.log-flex{color:var(--info)}.tag.log-coleta{color:var(--brand-text)}.tag.log-agencia{color:var(--warn)}
.tag.log-correios{color:var(--warn)}.tag.log-me1{color:var(--bad)}.tag.log-transportador{color:var(--text2)}.tag.log-tradicional{color:var(--text2)}

/* ---------- Densidade ---------- */
.compact .tr{padding:6px 12px;font-size:12.5px}.compact .th{padding:7px 12px}

/* ---------- Responsivo (ver 02-design-system.md §8) ---------- */
/* 760–1100 px: o menu fica inteiro; quem quiser recolhe no botão (com auto-recolhimento os sub-itens ficavam inalcançáveis). */
@media (max-width: 760px){
  .app{flex-direction:column}
  .side{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform .2s;z-index:90;background:var(--bg)}
  .side.open{transform:none}.side .foot,.side .logo span{display:revert}
  .top{padding:0 16px}.page{padding:18px 16px 80px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drw{width:100vw}
  .tblwrap{margin:0 -16px}
  .btn,.tab,.chip{min-height:36px}
}

/* =====================================================================
   Shell montado por coko-shell.js (extensões do pacote — não remover)
   ===================================================================== */
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 0 0;min-height:32px}
.side-top .logo{padding:6px 8px 0}
.side-os{font-size:11px;color:var(--dim)}
.side-mini{padding:0 7px}
.side-canal{display:flex;border:1px solid var(--line2);border-radius:6px;padding:2px;gap:2px;margin:0 2px}
.side-canal .tab{flex:1;justify-content:center;height:28px;padding:0 6px;font-size:12.5px}
.dot-bad{width:6px;height:6px;border-radius:50%;background:var(--bad);display:inline-block}
.side-nav{display:flex;flex-direction:column;gap:1px;flex:1}
.side-gap{height:10px}
.nav-t{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.nav{border:0;background:transparent;cursor:pointer;text-align:left}
.nav-g .chev{transition:transform .15s;color:var(--dim)}
.nav-g.open .chev{transform:rotate(90deg)}
.nav-g.open .cnt[data-cnt-group]{display:none}
.nav-items{display:flex;flex-direction:column;gap:1px}
.nav.is-off{opacity:.55;cursor:default}.nav.is-off:hover{background:transparent;color:var(--text2)}
.side .foot{gap:6px}
.side-sync{width:100%}
.side-sync-st.bad{color:var(--bad)}
.side-link{color:var(--text2);font-size:12px}
a.side-link:hover{color:var(--text)}
.side-user{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text2);font-size:12px;padding-top:4px;border-top:1px solid var(--line);margin-top:4px}
.side-user .ell{flex:1 1 100%}
.side-scrim{display:none}
.top-burger{display:none;padding:0 8px}
.top-live:empty{display:none}
.top-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.top-acts:empty{display:none}
.coko-v2 [data-top][hidden]{display:none}
/* Menu recolhido (só ícones) */
.app.mini .side{flex-basis:64px}
.app.mini .side .nav-t,.app.mini .side .cnt,.app.mini .side .chev,.app.mini .side .nav-items,.app.mini .side .foot,
.app.mini .side .side-canal,.app.mini .side .logo{display:none}
.app.mini .side-top{justify-content:center;padding:0}
/* Menu suspenso (período, preferências) */
.pop{position:fixed;z-index:85;min-width:220px;max-width:calc(100vw - 16px);padding:6px;box-shadow:var(--shadow);border-color:var(--line2);display:flex;flex-direction:column;gap:2px}
.pop-i{all:unset;box-sizing:border-box;display:block;padding:8px 10px;border-radius:5px;font-size:13px;color:var(--text2);cursor:pointer}
.pop-i:hover,.pop-i:focus-visible{background:var(--raise);color:var(--text)}
.pop-i.on{color:var(--brand-text);background:var(--brand-soft)}
.pop-sep{height:1px;background:var(--line);margin:4px 0}
.pop-h{font-size:12px;color:var(--dim);padding:6px 10px 2px;font-weight:500}
.pop-form{display:flex;flex-direction:column;gap:8px;padding:4px 6px 6px}
.pop-err{font-size:12px;color:var(--bad);min-height:0}
.pop-err:empty{display:none}
.pop-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 10px;font-size:13px;color:var(--text2)}
/* Barra de filtros ativos (renderizada pelo coko-ui.js) */
.coko-filterslot:empty{display:none}
.coko-filterslot .coko-filter-bar{display:none;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 28px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text2)}
.coko-filterslot .coko-filter-bar.active{display:flex}
.coko-filterslot .coko-filter-bar .label{color:var(--dim)}
.coko-v2 .coko-filter-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 10px;border-radius:6px;border:1px solid var(--brand);background:var(--brand-soft);color:var(--brand-text);font-size:12.5px}
.coko-v2 .coko-filter-chip .key{color:var(--text2)}
.coko-v2 .coko-filter-chip .x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;cursor:pointer;color:var(--text2)}
.coko-v2 .coko-filter-chip .x:hover{background:var(--raise);color:var(--text)}
.coko-v2 .coko-filter-clear{all:unset;cursor:pointer;font-size:12.5px;color:var(--text2);padding:0 6px}
.coko-v2 .coko-filter-clear:hover{color:var(--text)}
.coko-v2 .coko-active-filter{box-shadow:inset 2px 0 0 var(--brand);background:var(--brand-soft)}
.coko-v2 [data-coko-filter-key],.coko-v2 [data-coko-filter-product]{cursor:pointer}
.coko-canal-oculto{display:none!important}
.coko-v2 #coko-canal-aviso{margin:0!important;border-radius:8px!important;background:var(--warnbg)!important;border:1px solid color-mix(in oklab,var(--warn) 45%,var(--line))!important;color:var(--text)!important;font-size:13px!important}
/* Ctrl+K (markup vem do coko-ui.js) no visual novo */
.coko-v2 #coko-palette{background:rgba(0,0,0,.5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.coko-v2 #coko-palette-box{background:var(--surface)!important;border:1px solid var(--line2)!important;border-radius:8px!important;box-shadow:var(--shadow)!important}
.coko-v2 #coko-palette-input{color:var(--text)!important;font-family:Geist,system-ui,sans-serif!important}
.coko-v2 #coko-palette .coko-palette-item{color:var(--text2)}
/* Celular: menu vira gaveta */
@media (max-width:760px){
  .top-burger{display:inline-flex}
  .app.menu-open .side{transform:none}
  .app.menu-open .side-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:89}
  .app.mini .side .nav-t,.app.mini .side .cnt,.app.mini .side .chev,.app.mini .side .foot,.app.mini .side .side-canal,.app.mini .side .logo{display:revert}
  .app.mini .side .nav-items:not([hidden]){display:flex}
  .coko-filterslot .coko-filter-bar{padding:8px 16px}
}
.coko-v2{--c-primary:var(--brand-text);--c-text:var(--text);--c-text-2:var(--text2);--c-dim:var(--dim);--font-mono:'Geist Mono',monospace}
.coko-v2 #coko-palette .coko-palette-item span{color:var(--text)!important}
.coko-v2 #coko-palette .coko-palette-item[style*="background"]{background:var(--raise)!important}
.coko-v2 #coko-palette .coko-palette-item:hover{background:var(--raise)!important}
/* Previsão do Cokinho como card ([data-coko-preve]) */
.coko-v2 #coko-predictive{position:relative;display:block;padding:0}
.coko-v2 #coko-predictive .pred-main{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:100%;padding:14px 40px 14px 16px;cursor:pointer}
.coko-v2 #coko-predictive .pred-label{font-size:13px;color:var(--text2);font-weight:500}
.coko-v2 #coko-predictive .pred-value{font:500 22px/1.1 'Geist Mono',monospace;color:var(--text)}
.coko-v2 #coko-predictive .pred-sub{font-size:12.5px;color:var(--text2)}
.coko-v2 #coko-predictive .pred-close{color:var(--dim)!important}
.nav-items[hidden]{display:none}
/* Pular para o conteúdo (criado pelo coko-ui.js): só aparece no foco do teclado */
.coko-skip-link{position:absolute;left:8px;top:-60px;z-index:100;padding:8px 12px;border-radius:6px;background:var(--brand);color:var(--brand-ink);font-weight:500}
.coko-skip-link:focus{top:8px}
.coko [hidden]{display:none!important}
.cf-quote{margin:0;padding:10px 12px;border-radius:6px;background:var(--me);border-left:3px solid var(--brand);font-size:13.5px;line-height:1.55;white-space:pre-wrap;max-height:220px;overflow-y:auto}