/* VENDEV Hub — folha de estilo (extraída do <style> inline; conteúdo idêntico) */
:root{
  --bg:#0b0e14; --panel:#11151f; --panel2:#161b28; --border:#232a3b;
  --tx:#e6e9f0; --tx2:#8b93a7; --verde:#2dd4a7; --amarelo:#f5b849;
  --verm:#f26d6d; --azul:#5b8cff; --roxo:#a78bfa; --rosa:#f472b6; --lar:#fb923c; --ciano:#22d3ee;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--tx);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
/* scrollbars discretas (a barra clara padrão destoa do tema escuro) */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}
#side{width:236px;background:var(--panel);border-right:1px solid var(--border);padding:18px 12px;position:fixed;top:0;bottom:0;overflow-y:auto}
#side .logo{font-weight:800;font-size:1.05rem;letter-spacing:.5px;padding:4px 10px 2px}
#side .logo span{color:var(--verde)}
#side .tag{font-size:.62rem;color:var(--tx2);padding:0 10px 12px;letter-spacing:.4px}
/* menus recolhíveis: .sec é o cabeçalho clicável do grupo; chevron gira quando fechado */
#side .sec{display:flex;align-items:center;font-size:.62rem;color:var(--tx2);text-transform:uppercase;letter-spacing:1px;margin:13px 4px 5px;padding:4px 6px;border-radius:7px;cursor:pointer;user-select:none;transition:color .15s,background .15s}
#side .sec:hover{color:var(--tx);background:var(--panel2)}
#side .sec::after{content:'⌄';margin-left:auto;font-size:.85rem;line-height:1;transition:transform .2s;opacity:.7}
#side .grp.fechado .sec::after{transform:rotate(-90deg)}
#side .grp-items{overflow:hidden;max-height:640px;transition:max-height .25s ease}
#side .grp.fechado .grp-items{max-height:0}
/* pontinho no cabeçalho quando um grupo fechado tem pendência (badge visível dentro) */
#side .grp.fechado.tem-badge .sec::before{content:'●';color:var(--verm);font-size:.55rem;margin-right:6px}
#side .item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;color:var(--tx2);transition:background .15s,color .15s}
#side .item:hover{background:var(--panel2);color:var(--tx)}
#side .item.on{background:var(--panel2);color:var(--verde);font-weight:600;box-shadow:inset 2.5px 0 0 var(--verde)}
#side .item .dot{margin-left:auto;font-size:.58rem;color:var(--verde);animation:pulse 3s infinite}
#side .item .badge{margin-left:auto;background:rgba(242,109,109,.16);color:var(--verm);border:1px solid rgba(242,109,109,.4);border-radius:10px;font-size:.62rem;padding:1px 7px;font-weight:700}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
#main{margin-left:236px;flex:1;padding:20px 24px}
/* topbar gruda no topo ao rolar: título + filtros de canal sempre à mão */
#topbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;position:sticky;top:0;z-index:35;background:var(--bg);padding:10px 0;box-shadow:0 6px 14px -10px rgba(0,0,0,.6)}
#topbar h1{font-size:1.12rem;margin-right:auto}
/* Agrupador dos chips de canal: no desktop ele NÃO existe pro layout (display:contents),
   então os chips seguem sendo itens flex diretos do #topbar, exatamente como antes. É só no
   celular (hub-dispositivos.css) que ele vira uma faixa rolável de uma linha. */
#hxCanais{display:contents}
.chip{padding:6px 13px;border:1px solid var(--border);border-radius:18px;font-size:.77rem;cursor:pointer;color:var(--tx2);background:var(--panel);transition:color .15s,border-color .15s,background .15s}
.chip:not(.on):not(.off):hover{color:var(--tx);border-color:var(--tx2)}
.chip.on{background:var(--verde);color:#08281e;font-weight:700;border-color:var(--verde)}
.chip.off{opacity:.42;cursor:not-allowed}
.chip.mini{padding:4px 10px;font-size:.72rem}
.testmode{background:#3b2f10;color:var(--amarelo);border:1px solid #5c4a1a;padding:5px 12px;border-radius:8px;font-size:.72rem}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.card .lbl{font-size:.7rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px}
.card .val{font-size:1.5rem;font-weight:800;margin-top:4px}
.card .sub{font-size:.72rem;color:var(--tx2);margin-top:2px}
.tit{font-size:.95rem;font-weight:700;margin:20px 0 10px}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:.79rem}
th{background:var(--panel2);color:var(--tx2);text-align:left;padding:8px 11px;font-size:.67rem;text-transform:uppercase;letter-spacing:.5px}
td{padding:8px 11px;border-top:1px solid var(--border)}
tr:hover td{background:var(--panel2)}
.pill{padding:2px 9px;border-radius:10px;font-size:.67rem;font-weight:600;white-space:nowrap}
.p-ok{background:#12352b;color:var(--verde)} .p-warn{background:#3b2f10;color:var(--amarelo)}
.p-bad{background:#3a1720;color:var(--verm)} .p-info{background:#152344;color:var(--azul)}
.p-roxo{background:#241c3f;color:var(--roxo)} .p-mut{background:#1c2230;color:var(--tx2)}
.btn{padding:6px 14px;border-radius:8px;border:0;cursor:pointer;font-size:.75rem;font-weight:700;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.b-ap{background:var(--verde);color:#08281e}.b-rj{background:transparent;color:var(--verm);border:1px solid var(--verm)}
.b-task{background:var(--azul);color:#fff}
.aviso{background:#152344;border:1px solid #26407c;color:#9db7f5;padding:10px 14px;border-radius:10px;font-size:.76rem;margin-bottom:14px}
/* ---------- calendário de período clicável (range picker) ---------- */
.cal-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.55);width:258px}
.cal-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.78rem}
.cal-nav{cursor:pointer;padding:2px 9px;border-radius:8px;font-size:1rem;color:var(--tx2)}
.cal-nav:hover{background:var(--panel2);color:var(--tx)}
.cal-grid{display:grid;grid-template-columns:repeat(7,33px);justify-content:center;row-gap:2px}
.cal-sem span{width:33px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--tx2)}
.cal-d{width:33px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.73rem;cursor:pointer;border-radius:9px}
.cal-d:hover{background:var(--panel2)}
.cal-vazio{cursor:default}.cal-vazio:hover{background:transparent}
.cal-in{background:#12352b;border-radius:0}
.cal-ext{background:var(--verde);color:#08281e;font-weight:700}
.cal-hoje{outline:1px solid var(--verde);outline-offset:-1px}
.cal-hint{font-size:.66rem;color:var(--tx2);margin-top:6px;text-align:center}
#chart{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.mut{color:var(--tx2)} .num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:30px;text-align:center;color:var(--tx2)}
input[type=text],textarea{background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--tx);padding:8px 12px;font-size:.82rem;font-family:inherit}
input[type=text]:focus,textarea:focus{outline:1px solid var(--verde)}
/* ---------- cockpit financeiro (estilo GE Finance) ---------- */
.khero{background:linear-gradient(160deg,#12352b 0%,#0e2a22 100%);border-color:#1c5040}
.khero .lbl{color:#7fe9c9}.khero .val{color:var(--verde)}
.kneg{background:linear-gradient(160deg,#2a1618 0%,#22110f 100%);border-color:#5a2530}
.kneg .lbl{color:#f0a5a5}.kneg .val{color:var(--verm)}
.wfrow{display:flex;align-items:center;gap:10px;margin:5px 0;font-size:.82rem}
.wfrow .wl{width:210px;color:var(--tx2);flex-shrink:0}
.wfrow .wt{width:130px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.wftrack{flex:1;height:20px;background:var(--panel2);border-radius:5px;position:relative;overflow:hidden}
.wffill{height:100%;border-radius:5px;transition:width .5s}
.wfrow.acc .wl{color:var(--tx);font-weight:700}.wfrow.acc .wt{font-weight:800}
.wfrow.acc .wftrack{background:#0d1120}
.dedbar{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.dedbar span{display:flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:700;color:#08281e;min-width:0;overflow:hidden;white-space:nowrap}
.deleg{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.72rem}
.deleg i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.mgbar{display:inline-block;height:7px;border-radius:4px;background:var(--verde);vertical-align:middle;min-width:2px}
.pedcusto{font-size:.66rem;color:var(--tx2);line-height:1.5}
.pedcusto b{color:var(--tx);font-variant-numeric:tabular-nums}
/* ---------- escritório 2D vivo ---------- */
#officeWrap{display:grid;grid-template-columns:1fr 300px;gap:14px}
#officeStatus{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:.78rem;color:var(--tx2);flex-wrap:wrap}
#officeStatus b{color:var(--tx)}
#officeSvg{width:100%;height:auto;display:block;background:linear-gradient(160deg,#111623 0%,#0d1120 100%);border:1px solid var(--border);border-radius:14px}
#officeSvg text{font-family:'Segoe UI',system-ui,sans-serif;user-select:none;pointer-events:none}
#officeSvg .clicavel{cursor:pointer}
#officeSvg .clicavel:hover .mesaTampo{filter:brightness(1.25)}
#officeSvg .pE,#officeSvg .pD,#officeSvg .tec,#officeSvg .emote{transform-box:fill-box;transform-origin:center}
.agente .corpo{transition:opacity .4s}
.agente.andando .pE{animation:passo .42s infinite}
.agente.andando .pD{animation:passo .42s infinite -.21s}
@keyframes passo{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
.corpo.trabalhando .tec{animation:digita .85s steps(2) infinite}
@keyframes digita{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.emote{animation:flutua 2.2s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#feed{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;max-height:640px;overflow-y:auto}
#feed h3{font-size:.8rem;margin-bottom:10px}
#feed h3 .live{color:var(--verde);font-size:.62rem;animation:pulse 2s infinite}
.fitem{border-left:3px solid var(--border);padding:7px 10px;margin-bottom:8px;font-size:.72rem;background:var(--panel2);border-radius:0 8px 8px 0}
.fitem b{font-size:.72rem}
.fitem .fq{color:var(--tx2);font-size:.62rem}
/* ---------- modal ---------- */
/* todo modal usa <div id="..." class="modal"><div class="box">. Estilo pela classe:
   modal novo só precisa da class p/ nascer certo — não há mais lista de ids p/ esquecer.
   Largura/altura diferentes: sobrescreva com #idDoModal .box{width:...} (id ganha da classe). */
.modal{position:fixed;inset:0;background:rgba(5,8,14,.75);display:none;align-items:center;justify-content:center;z-index:50}
.modal .box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;width:min(560px,92vw);max-height:92vh;overflow-y:auto}
.modal h3{margin-bottom:4px}
.modal .pp{font-size:.7rem;color:var(--tx2);margin-bottom:12px}
#modal textarea{width:100%;min-height:110px;margin-bottom:12px}
#modalLanc select,#modalKit select,#modalImp select,#modalItem select,#modalAnun select,.box select,#impHdr select{background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--tx);padding:8px 12px;font-size:.82rem;font-family:inherit}
.flab{font-size:.62rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;display:block;margin:8px 0 3px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 10px}
.fgrid input,.fgrid select{width:100%}
#toast{position:fixed;bottom:22px;right:22px;background:var(--panel2);border:1px solid var(--verde);color:var(--tx);padding:12px 18px;border-radius:10px;font-size:.8rem;display:none;z-index:60;max-width:420px;box-shadow:0 8px 28px rgba(0,0,0,.45);animation:toastin .22s ease}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ===== extras de usabilidade (tabelas, confirmação, saúde, responsivo) — inline p/ evitar dependência de MIME do servidor estático ===== */
.hx-box{margin:0 0 4px}
.hx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.hx-wrap>table{margin:0}
.hx-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.hx-toolbar .hx-search{background:var(--panel2);border:1px solid var(--border);border-radius:8px;color:var(--tx);padding:6px 11px;font-size:.78rem;font-family:inherit;min-width:200px;flex:0 1 260px}
.hx-toolbar .hx-search:focus{outline:1px solid var(--verde)}
.hx-toolbar .hx-count{font-size:.7rem;color:var(--tx2)}
.hx-toolbar .hx-spacer{flex:1}
.hx-btnx{padding:5px 11px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--tx2);font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.hx-btnx:hover{color:var(--tx);border-color:var(--verde)}
.hx-btnx[disabled]{opacity:.4;cursor:not-allowed}
.hx-pager{display:flex;align-items:center;gap:6px}
.hx-pager .hx-pg{font-size:.7rem;color:var(--tx2);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
table th.hx-sortable{cursor:pointer;user-select:none;white-space:nowrap}
table th.hx-sortable:hover{color:var(--tx)}
table th .hx-arrow{opacity:.4;font-size:.7em;margin-left:3px}
table th.hx-active .hx-arrow{opacity:1;color:var(--verde)}
#hxConfirm{position:fixed;inset:0;background:rgba(5,8,14,.75);display:none;align-items:center;justify-content:center;z-index:80}
#hxConfirm.open{display:flex}
#hxConfirm .hx-cbox{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;width:min(440px,92vw)}
#hxConfirm .hx-cmsg{font-size:.9rem;line-height:1.45;margin-bottom:18px;color:var(--tx);white-space:pre-wrap}
#hxConfirm .hx-cbtns{display:flex;gap:8px;justify-content:flex-end}
#hxHealth{position:relative;display:none;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--border);border-radius:18px;font-size:.75rem;font-weight:700;cursor:default;background:var(--panel);white-space:nowrap}
#hxHealth.ok{color:var(--verde);border-color:#1c5040}
#hxHealth.warn{color:var(--amarelo);border-color:#5c4a1a;cursor:pointer}
#hxHealth .hx-dot{font-size:.7rem}
#hxHealth .hx-pop{position:absolute;top:calc(100% + 8px);right:0;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:240px;max-width:340px;z-index:90;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4);font-weight:400;color:var(--tx);text-align:left}
#hxHealth.warn:hover .hx-pop,#hxHealth .hx-pop.pin{display:block}
#hxHealth .hx-pop h5{font-size:.7rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px}
#hxHealth .hx-pop .hx-row{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;padding:2px 0}
#hxHealth .hx-pop .hx-row .hx-late{color:var(--amarelo)}
#hxHealth .hx-pop .hx-row .hx-none{color:var(--tx2)}
#hxBurger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--tx);font-size:1.1rem;cursor:pointer;margin-right:4px}
#hxBackdrop{position:fixed;inset:0;background:rgba(5,8,14,.6);z-index:39;display:none}
#hxBackdrop.open{display:block}
@media (max-width:900px){
  #hxBurger{display:inline-flex}
  #side{transform:translateX(-100%);transition:transform .25s ease;z-index:40;width:264px}
  #side.hx-open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.6)}
  #main{margin-left:0;padding:16px 14px}
  #topbar h1{font-size:1rem}
  #officeWrap{grid-template-columns:1fr}
  .hx-toolbar .hx-search{flex:1 1 100%;min-width:0}
}
@media (max-width:560px){
  #topbar{gap:6px}
  .chip{padding:5px 10px;font-size:.72rem}
}

/* ---- modal de tratativa Flex / Entrega Direta ---- */
#modalFlex .box{width:min(700px,92vw)}
#modalFlex textarea{width:100%;min-height:70px;margin-bottom:8px}
#modalFlex .fx-evt{border-left:2px solid var(--border);padding:6px 10px;margin:8px 0;font-size:.78rem}
#modalFlex .fx-evt img{max-height:130px;max-width:160px;border-radius:8px;border:1px solid var(--border);cursor:zoom-in;margin:4px 6px 0 0}
#modalFlex .fx-st{padding:5px 11px;border-radius:16px;border:1px solid var(--border);background:var(--panel2);cursor:pointer;font-size:.74rem;color:var(--tx)}
#modalFlex .fx-st.on{border-color:var(--ciano);color:var(--ciano);font-weight:700}

/* ===== "Custo desta função": bloco no topo de cada aba ===== */
.cst{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);
  border-radius:12px;margin-bottom:16px;overflow:hidden}
.cst-hd{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;user-select:none;flex-wrap:wrap}
.cst-hd:hover{background:rgba(255,255,255,.02)}
.cst-tit{font-size:.9rem;color:var(--tx)}
.cst-tit b{color:var(--amarelo)}
.cst-per{font-size:.7rem;color:var(--tx2);background:var(--panel);border:1px solid var(--border);
  padding:2px 9px;border-radius:12px}
.cst-tot{margin-left:auto;font-size:1.15rem;font-weight:800;color:var(--verde);display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.cst-tot-sub{font-size:.6rem;font-weight:500;color:var(--tx2)}
.cst-chev{font-size:1rem;color:var(--tx2);width:16px;text-align:center}
.cst-body{padding:2px 16px 15px}
.cst-fechado .cst-body{display:none}
.cst-aviso{background:#3b2f10;color:var(--amarelo);border:1px solid #5c4a1a;padding:7px 12px;
  border-radius:8px;font-size:.72rem;margin:6px 0 12px}
.cst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px}
.cst-tile{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:2px}
.cst-rot{font-size:.66rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px}
.cst-val{font-size:1.15rem;color:var(--tx);font-weight:700}
.cst-sub{font-size:.64rem;color:var(--tx2)}
.cst-tile:last-child .cst-val{color:var(--verde)}
.cst-infra{margin-top:12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cst-infra-rot{font-size:.68rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px}
.cst-chip{font-size:.68rem;color:var(--tx2);background:var(--panel);border:1px solid var(--border);
  padding:2px 9px;border-radius:11px}
.cst-nota{margin-top:11px;font-size:.66rem;color:var(--tx2);line-height:1.5;border-top:1px solid var(--border);padding-top:9px}

/* ===== Postos de Trabalho (views-postos.js) ===== */
.pt-postos{display:flex;gap:8px;flex-wrap:wrap}
.pt-posto{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);cursor:pointer;font-size:.76rem;transition:border-color .15s,background .15s}
.pt-posto:hover{border-color:var(--tx2)}
.pt-posto.on{background:var(--panel2);border-color:var(--verde);box-shadow:inset 0 -2px 0 var(--verde)}
.pt-posto.pt-trava{opacity:.38;cursor:not-allowed}
.pt-posto .pt-nome{font-weight:700}
.pt-posto .pt-area{color:var(--tx2);font-size:.66rem}
.pt-posto .badge{background:rgba(242,109,109,.16);color:var(--verm);border:1px solid rgba(242,109,109,.4);border-radius:10px;font-size:.62rem;padding:1px 7px;font-weight:700}
.pt-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.pt-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:1000px){.pt-cols{grid-template-columns:1fr}}
.pt-prod{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.pt-alvo{background:#241c3f;color:var(--roxo);border:1px solid #3a2f63;border-radius:8px;padding:2px 10px;font-size:.74rem;font-weight:800;letter-spacing:.3px}
.pt-titulo{color:var(--tx2);font-size:.74rem}
.pt-card .pt-q{font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:6px}
.pt-card.pt-trava{opacity:.75;border-color:#5c4a1a}
.pt-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pt-analise{font-size:.8rem;color:var(--tx2);line-height:1.5;margin:6px 0}
.pt-rec{background:#12352b;border:1px solid #1c5040;border-radius:8px;padding:8px 12px;font-size:.8rem;margin:8px 0;color:var(--tx)}
.pt-nota{font-size:.62rem;color:var(--tx2);margin:2px 0 6px}
.pt-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.pt-aviso{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);font-size:.74rem}
.pt-aviso:last-child{border-bottom:0}
.pt-sev{width:4px;border-radius:3px;align-self:stretch;flex:0 0 4px;min-height:26px}
.pt-pedido{display:flex;gap:7px;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:.72rem}
.pt-pedido:last-child{border-bottom:0}
/* decisão resolvida some no lugar (sem recarregar a tela nem pular pro topo) */
.pt-saindo{overflow:hidden!important;transition:max-height .45s ease,opacity .35s ease,transform .35s ease,margin .45s ease,padding .45s ease,border-width .45s ease;opacity:0;transform:translateX(26px) scale(.985);margin:0!important;padding-top:0!important;padding-bottom:0!important;border-width:0!important}
/* caixa "aprovar com instrução" */
.pt-instr{margin-top:10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px}
.pt-instr textarea{width:100%;min-height:64px}
/* linha compacta de alerta operacional na Fila de Aprovação */
.fl-alerta{display:flex;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:.76rem}
.fl-alerta:last-child{border-bottom:0}
/* esteira "em andamento" do posto (aprovado -> executando) */
.pt-exec{display:flex;gap:9px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.76rem}
.pt-exec:last-child{border-bottom:0}
.pt-exec-dot{width:8px;height:8px;border-radius:50%;background:var(--amarelo);animation:pulse 1.1s infinite;flex:0 0 8px}

/* ===== login de aplicação (rotas/auth.mjs) + chip do usuário logado ===== */
#loginScreen{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;align-items:center;justify-content:center}
#loginScreen .lg-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:34px 30px;width:min(340px,92vw);display:flex;flex-direction:column;gap:10px;text-align:center;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75)}
#loginScreen input{background:var(--panel2);border:1px solid var(--border);border-radius:8px;
  color:var(--tx);padding:10px 12px;font-size:.85rem;width:100%}
#loginScreen input:focus{outline:none;border-color:var(--verde)}
.lg-erro{color:var(--verm);font-size:.75rem;min-height:1em}
#userChip{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;color:var(--tx2);
  border:1px solid var(--border);border-radius:18px;padding:5px 11px;background:var(--panel)}
#userChip b{color:var(--tx)}
#userChip .uc-papel{font-size:.62rem;text-transform:uppercase;letter-spacing:.5px;color:var(--verde);
  border:1px solid var(--border);border-radius:9px;padding:1px 7px}
/* tabela de usuários (Governança → Usuários & Permissões) */
.usr-chip{display:inline-block;border:1px solid var(--border);border-radius:12px;padding:2px 9px;
  font-size:.68rem;color:var(--tx2);cursor:pointer;margin:2px 3px 2px 0;user-select:none}
.usr-chip.on{background:var(--verde);color:#08281e;border-color:var(--verde);font-weight:700}
.usr-chip.restrita{border-style:dashed}
.usr-senha{background:rgba(45,212,167,.12);border:1px solid var(--verde);border-radius:10px;
  padding:12px 16px;margin-bottom:14px;font-size:.85rem}

/* ---- Histórico recente: painel de preview flutuante (hover/clique fixa) ---- */
.hist-prev{position:fixed;z-index:250;display:none;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;box-shadow:0 14px 44px rgba(0,0,0,.6);max-height:72vh;overflow:auto;
  font-size:.78rem;line-height:1.45;min-width:280px}
.hist-prev .hp-hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.hist-prev .hp-sec{margin-top:9px}
.hist-prev .hp-tit{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin-bottom:3px}
.hist-prev .hp-txt{white-space:pre-wrap;word-break:break-word}
.hist-prev .hp-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.hist-prev .hp-thumbs img{height:88px;max-width:160px;object-fit:cover;border-radius:8px;
  border:1px solid var(--border);cursor:zoom-in}
.hist-prev table.hp-mini{font-size:.72rem}
.hist-prev .hp-hint{font-size:.64rem;margin-top:9px}

/* ===== simulação do anúncio (preview_anuncio — pedido do seller 16/07) ===== */
.anv{border:1px solid var(--border);border-radius:10px;background:var(--panel2);padding:12px 14px;margin:10px 0}
.anv-hd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.anv-corpo{display:flex;gap:14px;flex-wrap:wrap}
.anv-fotos{display:flex;gap:8px;flex-wrap:wrap;max-width:440px}
.anv-semfoto{font-size:.74rem;color:var(--tx2);border:1px dashed var(--border);border-radius:8px;padding:18px 14px}
.anv-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.anv-titulo{font-size:1.02rem;font-weight:700;line-height:1.3}
.anv-preco{font-size:1.25rem;font-weight:800;color:var(--verde)}
.anv-sec{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);margin:10px 0 4px}
.anv-ficha{font-size:.76rem;width:100%}
.anv-ficha td{padding:4px 8px;border-bottom:1px solid var(--border)}
.anv-desc{font-size:.8rem;white-space:pre-wrap;line-height:1.45;max-height:260px;overflow-y:auto}
.usr-grp{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:3px 0}
.usr-grp-rot{font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);min-width:74px}

/* ===== Cartas — pilha estilo Anki, mobile-first (aba #cartas, feature 24/07) ===== */
.ct-wrap{max-width:560px;margin:0 auto;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.ct-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ct-pill{font-size:.74rem;font-weight:700;border-radius:14px;padding:4px 12px}
.ct-pill.hoje{background:#12352b;color:var(--verde)}
.ct-pill.streak{background:#3b2f10;color:var(--amarelo)}
.ct-pill.fila{background:var(--panel2);color:var(--tx2);margin-left:auto}
.ct-bar{height:5px;background:var(--panel2);border-radius:3px;margin-bottom:14px;overflow:hidden}
.ct-bar>div{height:100%;background:var(--verde);border-radius:3px;transition:width .4s ease}
.ct-zona{position:relative;min-height:380px}
.ct-carta{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:transform .35s ease,opacity .35s ease}
.ct-carta.saindo{transform:translateX(-115%) rotate(-6deg);opacity:0;pointer-events:none}
.ct-carta.saindo-dir{transform:translateX(115%) rotate(6deg);opacity:0;pointer-events:none}
@keyframes ctEntra{from{transform:scale(.94) translateY(12px);opacity:0}to{transform:none;opacity:1}}
.ct-carta.entrando{animation:ctEntra .3s ease}
.ct-tipo{align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border-radius:10px;padding:2px 9px}
.ct-pergunta{font-size:1.05rem;line-height:1.45;font-weight:600}
.ct-ctx{font-size:.75rem;color:var(--tx2);line-height:1.5;background:var(--panel2);border-radius:10px;padding:8px 11px}
.ct-membro{font-size:.8rem;background:#152344;border:1px solid #26407c;border-radius:10px;padding:9px 12px;line-height:1.5}
.ct-chips{display:flex;flex-direction:column;gap:8px}
.ct-chip{min-height:44px;text-align:left;font-size:.86rem;color:var(--tx);background:var(--panel2);
  border:1px solid var(--border);border-radius:12px;padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.ct-chip:hover{border-color:var(--tx2)}
.ct-chip.on{background:#12352b;border-color:var(--verde);color:var(--verde);font-weight:700}
/* "Está certo" na carta de auditoria: a resposta mais provável fica visualmente na frente */
.ct-chip.ok{border-color:var(--verde);color:var(--verde);font-weight:700}
.ct-stars{display:flex;justify-content:center;gap:6px}
.ct-star{font-size:1.9rem;background:none;border:0;cursor:pointer;filter:grayscale(1) opacity(.45);
  padding:2px 6px;transition:transform .12s,filter .12s}
.ct-star.on{filter:none;transform:scale(1.12)}
.ct-cats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ct-cat{font-size:.7rem;padding:6px 11px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);
  color:var(--tx2);cursor:pointer}
.ct-cat.on{border-color:var(--roxo);color:var(--roxo);background:#241c3f;font-weight:700}
.ct-regra{display:flex;gap:8px;align-items:flex-start;font-size:.74rem;color:var(--tx2);line-height:1.4}
.ct-regra input{width:17px;height:17px;margin-top:1px;accent-color:var(--verde)}
.ct-carta textarea{width:100%;min-height:74px;font-size:.86rem}
.ct-carta input[type=text]{width:100%;min-height:42px}
/* as linhas do extrato por trás da pergunta — é por elas que o seller pesquisa no banco */
.ct-linhas{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ct-linha{background:var(--panel2);border-radius:10px;padding:7px 10px;font-size:.72rem;line-height:1.45;
  display:grid;grid-template-columns:auto 1fr;column-gap:8px}
.ct-linha .q{color:var(--tx2)}
.ct-linha .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ct-linha .v.neg{color:var(--verm)}
.ct-linha .v.pos{color:var(--verde)}
.ct-linha .d{grid-column:1/-1;color:var(--tx2);word-break:break-word}
.ct-linha.mais{color:var(--tx2);text-align:center;display:block;background:none;padding:2px}
.ct-acoes{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.ct-acao{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.66rem;color:var(--tx2);
  background:none;border:0;cursor:pointer;padding:8px 0;border-radius:10px;min-height:52px;transition:background .15s,color .15s}
.ct-acao:hover{background:var(--panel2);color:var(--tx)}
.ct-acao .ic{font-size:1.25rem;line-height:1}
.ct-acao.principal{color:var(--verde);font-weight:700}
.ct-fim{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:340px;text-align:center}
.ct-fim .grande{font-size:3rem}
.ct-fim .tit2{font-size:1.2rem;font-weight:800}
.ct-fim .sub2{font-size:.8rem;color:var(--tx2);line-height:1.6}
/* bottom-sheet do Encaminhar */
.ct-veu{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;display:none}
.ct-sheet{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--panel);border:1px solid var(--border);
  border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;
  transform:translateY(115%);transition:transform .28s ease}
.ct-sheet.aberta{transform:none}
.ct-sheet .tit3{font-size:.9rem;font-weight:700;margin-bottom:10px}
.ct-sheet .dica{font-size:.7rem;color:var(--tx2);margin-top:10px;line-height:1.5}
/* confete do inbox-zero (CSS puro, sem lib) */
@keyframes ctCai{0%{transform:translateY(-12vh) rotate(0)}100%{transform:translateY(105vh) rotate(720deg)}}
.ct-confete{position:fixed;top:0;width:9px;height:14px;border-radius:2px;z-index:300;pointer-events:none;
  animation:ctCai linear forwards}
@media (max-width:560px){
  .ct-carta{padding:15px}
  .ct-pergunta{font-size:1rem}
  .ct-acao{min-height:56px}
}
@media (prefers-reduced-motion:reduce){
  .ct-carta,.ct-carta.saindo,.ct-carta.saindo-dir{transition:none;animation:none}
  .ct-confete{display:none}
}

/* ---- Conta da margem (hover na linha de promoção, aba Promoções) --------------------
   Painel ÚNICO preso ao <body> e posicionado por JS: dentro da tabela ele seria cortado
   pelo overflow do container, que é o motivo de não ser um ::after no <tr>. */
#contaTip{position:fixed;z-index:70;display:none;max-width:340px;background:var(--panel2);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:.72rem;
  color:var(--tx);box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none;line-height:1.45;
  /* kit com muitos componentes passa da tela em viewport baixa: rola dentro do painel */
  max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain}
/* preso por toque: precisa receber o gesto de rolagem (no hover continua transparente) */
#contaTip.preso{pointer-events:auto}
#contaTip .ct-l span:first-child{min-width:0;overflow-wrap:anywhere}
#contaTip .ct-tit{font-size:.62rem;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:5px}
#contaTip .ct-l{display:flex;justify-content:space-between;gap:14px;padding:1px 0}
#contaTip .ct-l span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
#contaTip .ct-neg span:last-child{color:var(--verm)}
#contaTip .ct-tot{border-top:1px solid var(--border);margin-top:5px;padding-top:5px;font-weight:600}
#contaTip .ct-obs{color:var(--tx2);font-size:.64rem;margin-top:6px;white-space:normal}
.conta-hover{cursor:help}
#contaTip .ct-sub{color:var(--tx2);font-size:.64rem;margin:3px 0 1px;padding-left:2px}
#contaTip .ct-comp{padding-left:12px;color:var(--tx2);font-size:.66rem;border-left:2px solid var(--border);margin-left:2px}
#contaTip .ct-comp i{font-style:normal;font-size:.6rem}