@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/roboto.woff2) format("woff2")}
:root{
  /* marca TopMix: vermelho assinatura + navy. O nome "--teal*" foi mantido só p/ não reescrever todas as regras; agora aponta pro vermelho. */
  --teal:#D20A11; --teal-d:#A80A0F; --teal-l:#EBA39E; --teal-xl:#FCEBEB;
  --navy:#00223E;
  --azul:#1B8FD4; --verm:#E11A12; --verde:#006F3A;
  --creme:#F3F4F6; --branco:#fff; --linha:#E5E7EB;
  --tinta:#2A2E33; --suave:#727A82;
  --raio:16px; --raio-s:11px;
  --sombra:0 1px 2px rgba(16,32,48,.05),0 8px 24px rgba(16,32,48,.07);
  --sombra-sm:0 1px 2px rgba(16,32,48,.06),0 3px 10px rgba(16,32,48,.05);
  --grad-topo:linear-gradient(118deg,#00223E 0%,#062b46 55%,#0a3a5c 100%);
  --grad-teal:linear-gradient(135deg,#D20A11,#A80A0F);
  --foco:0 0 0 4px rgba(20,30,45,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--creme);
  background-image:radial-gradient(1200px 520px at 100% -12%,rgba(20,30,45,.08),transparent 60%),
                   radial-gradient(900px 520px at -12% -4%,rgba(0,34,62,.05),transparent 55%);
  background-attachment:fixed;
  color:var(--tinta); -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.5;
}
.hidden{display:none!important}

/* identidade visual por local de trabalho (TopMix=padrão teal/navy; Betmix=azul; Superconcreto=verde) */
body[data-local="601"]{
  --teal:#1B8FD4; --teal-d:#1473ad; --teal-l:#7CC2EC; --teal-xl:#E4F1FB;
  --grad-topo:linear-gradient(115deg,#00223E 0%,#0f5a86 55%,#1B8FD4 100%);
  --grad-teal:linear-gradient(135deg,#1B8FD4,#1473ad);
  --foco:0 0 0 4px rgba(27,143,212,.16);
}
body[data-local="701"]{
  --teal:#006F3A; --teal-d:#005C30; --teal-l:#5BB98A; --teal-xl:#E2F0E8;
  --grad-topo:linear-gradient(115deg,#00223E 0%,#024d2a 55%,#006F3A 100%);
  --grad-teal:linear-gradient(135deg,#006F3A,#005C30);
  --foco:0 0 0 4px rgba(0,111,58,.16);
}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1100px 560px at 12% -6%, rgba(20,30,45,.40), transparent 55%),
    radial-gradient(1000px 760px at 100% 108%, rgba(22,78,128,.55), transparent 60%),
    linear-gradient(140deg,#012b40 0%,#00223E 38%,#011a2c 100%)}
.login-logo-top{height:clamp(64px,11vw,150px);width:auto;max-width:420px;object-fit:contain;display:block;margin:0 auto 30px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.login-card{background:var(--branco);border-radius:22px;box-shadow:0 24px 60px rgba(0,12,24,.45);padding:34px 28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px;text-align:center;border:1px solid rgba(255,255,255,.08)}
.login-logo{height:46px;width:auto;max-width:200px;object-fit:contain;margin:2px auto 10px;display:block}
.login-card h1{font-size:21px;margin:0;color:var(--navy);font-weight:600;letter-spacing:.2px}
.login-sub{margin:0 0 10px;color:var(--suave);font-size:13px}
.login-card input{padding:14px;border:1.5px solid var(--linha);border-radius:12px;font-size:16px;outline:none;transition:border .15s,box-shadow .15s;font-family:inherit}
.login-card input:focus{border-color:var(--teal);box-shadow:var(--foco)}
.login-card button{background:var(--grad-teal);color:#fff;border:0;padding:14px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;margin-top:6px;box-shadow:0 6px 16px rgba(20,30,45,.28);transition:transform .08s,box-shadow .15s;font-family:inherit}
.login-card button:hover{box-shadow:0 8px 22px rgba(20,30,45,.36)}
.login-card button:active{transform:translateY(1px)}
.login-card button:disabled{opacity:.6}
.login-rodape{margin-top:22px;color:rgba(255,255,255,.78);font-size:12px;letter-spacing:1.6px;text-transform:uppercase}
.erro-msg{color:var(--verm);font-size:13px;min-height:18px}

/* ---------- TOPO + ABAS ---------- */
.topo{display:flex;align-items:center;gap:11px;background:var(--grad-topo);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:20;box-shadow:0 2px 14px rgba(0,34,62,.22);border-bottom:2px solid var(--teal)}
.topo-logo{height:clamp(34px,3.4vw,46px);width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.topo-sep{width:1px;height:30px;background:rgba(255,255,255,.22);margin:0 4px}
.topo-marca{display:flex;flex-direction:column;line-height:1.1}
.topo-eyebrow{font-size:10px;font-weight:600;letter-spacing:3px;color:#cdd9e4;text-transform:uppercase}
.topo-titulo{font-weight:600;letter-spacing:.3px;font-size:16px}
.topo-local{margin-left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;padding:6px 12px;border-radius:9px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .15s}
.topo-local:hover{background:rgba(255,255,255,.28)}
.topo-local:disabled{cursor:default;opacity:.95}
.topo-local .troca{opacity:.8;font-size:11px;font-weight:400;margin-left:3px}
.topo-user{margin-left:12px;font-size:13px;opacity:.92;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-sair{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;padding:7px 13px;border-radius:9px;font-size:13px;cursor:pointer;transition:background .15s}
.topo-sair:hover{background:rgba(255,255,255,.28)}
/* ---------- MENU GAVETA (drawer) ---------- */
.topo-menu{flex:0 0 auto;width:40px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.topo-menu:hover{background:rgba(255,255,255,.3)}
.drawer-overlay{position:fixed;top:var(--topo-h,56px);left:0;right:0;bottom:0;background:rgba(0,12,24,.5);z-index:45;opacity:0;visibility:hidden;transition:opacity .25s}
body.drawer-aberto .drawer-overlay{opacity:1;visibility:visible}
.drawer{position:fixed;top:var(--topo-h,56px);left:0;height:calc(100dvh - var(--topo-h,56px));width:78%;max-width:300px;background:#fff;z-index:50;
  transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 44px rgba(0,12,24,.32);border-radius:0 16px 16px 0;display:flex;flex-direction:column;gap:3px;
  padding:14px 10px;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.drawer-aberto .drawer{transform:translateX(0)}
.drawer button{display:flex;align-items:center;gap:13px;background:none;border:0;padding:13px 14px;border-radius:12px;
  font-size:15px;color:var(--tinta);cursor:pointer;font-family:inherit;font-weight:500;text-align:left;width:100%}
.drawer button .ic{font-size:18px;width:26px;text-align:center;flex:0 0 auto}
.drawer button:hover{background:var(--teal-xl);color:var(--teal-d)}
.drawer button.ativa{background:var(--teal-xl);color:var(--teal-d);font-weight:700}
.drawer button .badge{margin-left:auto;background:var(--verm);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;flex:0 0 auto}
@media (min-width:900px){
  .drawer{top:var(--topo-h,56px);height:calc(100dvh - var(--topo-h,56px));width:248px;transform:translateX(0);box-shadow:none;border-right:1px solid var(--linha);border-radius:0 16px 16px 0}
  .drawer-overlay{display:none}
  main{margin-left:248px;transition:margin-left .26s cubic-bezier(.4,0,.2,1)}
  body.drawer-colapsado .drawer{transform:translateX(-100%)}
  body.drawer-colapsado main{margin-left:auto;margin-right:auto}
}

main{padding:18px 16px 44px;max-width:940px;margin:0 auto}

/* ---------- COMPONENTES ---------- */
h2.titulo{font-size:19px;margin:4px 0 16px;color:var(--navy);font-weight:600;display:flex;align-items:center;gap:10px}
h2.titulo::before{content:"";width:4px;height:21px;border-radius:3px;background:var(--grad-teal)}
.card{background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);padding:20px;margin-bottom:16px;border:1px solid rgba(231,227,219,.7)}
label{display:block;font-size:12.5px;color:var(--suave);margin:12px 0 5px;font-weight:600;letter-spacing:.2px}
input,select,textarea{width:100%;padding:12px 13px;border:1.5px solid var(--linha);border-radius:12px;font-size:15px;outline:none;background:#fff;font-family:inherit;transition:border .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:var(--foco)}
textarea{resize:vertical;min-height:84px}
.linha{display:flex;gap:12px;flex-wrap:wrap}
.linha>div{flex:1;min-width:130px}
button.btn{background:var(--grad-teal);color:#fff;border:0;padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-top:14px;box-shadow:0 5px 14px rgba(20,30,45,.26);transition:transform .08s,box-shadow .15s;font-family:inherit}
button.btn:hover{box-shadow:0 7px 18px rgba(20,30,45,.34)}
button.btn:active{transform:translateY(1px)}
button.btn.sec{background:#fff;color:var(--teal);border:1.5px solid var(--teal);margin-top:0;box-shadow:none}
button.btn.sec:hover{background:var(--teal-xl)}
button.btn:disabled{opacity:.5;box-shadow:none}
.toggle{display:flex;gap:0;border:1.5px solid var(--teal);border-radius:12px;overflow:hidden;margin-top:4px}
.toggle button{flex:1;background:#fff;border:0;padding:13px 12px;font-size:15px;font-weight:600;color:var(--teal);cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.toggle button + button{border-left:1.5px solid var(--teal)}   /* separador entre os dois */
.toggle button:not(.on):hover{background:var(--teal-xl)}
.toggle button.on{background:var(--grad-teal);color:#fff;border-left-color:transparent}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--linha)}
th{color:var(--suave);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;background:#faf9f6}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.vencido td{background:#fff2f2}
tr.linha-clic{cursor:pointer}
tr.linha-clic:hover td{background:var(--teal-xl)}
/* ---------- AG Grid (tema v35 Theming API, pintado na marca via JS) ---------- */
.grade-ag{width:100%;min-height:300px;margin-top:10px}
/* AG Grid v24 (tema alpine) pintado na marca — acento acompanha o local via --teal */
.ag-theme-alpine{
  --ag-alpine-active-color:var(--teal);
  --ag-selected-row-background-color:var(--teal-xl);
  --ag-row-hover-color:var(--teal-xl);
  --ag-header-background-color:#F4F2EE;
  --ag-header-foreground-color:var(--navy);
  --ag-odd-row-background-color:#FBFAF8;
  --ag-border-color:var(--linha);
  --ag-font-family:"Roboto",-apple-system,system-ui,sans-serif;
  --ag-font-size:14px;
  --ag-grid-size:5px;
  --ag-borders:solid 1px;
}
.ag-theme-alpine .ag-paging-panel{justify-content:flex-end}
.ag-theme-alpine .ag-paging-panel .pg-size{margin-right:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--suave)}
.ag-theme-alpine .ag-paging-panel .pg-size select{width:auto;padding:3px 7px;border-radius:7px;font-size:13px}
/* filtro de seleção múltipla (custom Community) */
.fs-pop{padding:9px;width:236px;font-family:inherit}
.fs-busca{width:100%;padding:7px 9px;border:1.5px solid var(--linha);border-radius:8px;font-size:13px;margin-bottom:7px;outline:none}
.fs-busca:focus{border-color:var(--teal)}
.fs-todos{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--suave);padding-bottom:7px;border-bottom:1px solid var(--linha);margin:0 0 4px;cursor:pointer}
.fs-lista{max-height:222px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.fs-it{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinta);padding:4px 2px;cursor:pointer;font-weight:400;margin:0}
.fs-it input,.fs-todos input{width:auto;flex:0 0 auto;margin:0}
.fs-vazio{color:var(--suave);font-size:13px;padding:7px 2px}
.fs-acoes{text-align:right;margin-top:7px}
.fs-reset{font-size:12px;padding:6px 11px;border:1.5px solid var(--linha);background:#fff;border-radius:8px;cursor:pointer;color:var(--teal-d);font-weight:600;font-family:inherit}
.fs-reset:hover{background:var(--teal-xl);border-color:var(--teal-l)}
/* botão/popup "Colunas" (escolher colunas no Community) */
.grade-tools{display:flex;justify-content:flex-end;margin-bottom:6px}
.cols-pop{position:fixed;z-index:90;background:#fff;border:1px solid var(--linha);border-radius:12px;box-shadow:0 10px 32px rgba(0,12,24,.22);padding:11px;width:232px;font-family:inherit}
.cols-cab{font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.cols-lista{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.cols-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:9px;border-top:1px solid var(--linha);padding-top:9px}
.grade-paginacao{display:flex;justify-content:flex-end;align-items:center;margin-top:6px;font-size:13px;color:var(--suave)}
.grade-paginacao label{margin:0;font-weight:500;color:var(--suave)}
.grade-paginacao select{width:auto;display:inline-block;padding:5px 8px;margin:0 5px;border-radius:8px;font-size:13px}

.grade-filtravel{position:relative}
.grade-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grade-scroll table{min-width:max-content}
.grade-scroll th,.grade-scroll td{white-space:nowrap}
th .th-rot{vertical-align:middle}
.th-filtro{margin-left:5px;border:0;background:none;color:var(--suave);cursor:pointer;font-size:11px;padding:1px 4px;border-radius:5px;vertical-align:middle}
.th-filtro.on{background:var(--teal);color:#fff}
.filtro-pop{position:absolute;z-index:40;background:#fff;border:1px solid var(--linha);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.18);padding:10px;width:240px;text-transform:none;letter-spacing:0}
.fp-busca{margin-bottom:8px}
.fp-todos{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--suave);margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--linha);font-weight:600}
.fp-todos input,.fp-it input{width:auto;flex:0 0 auto;margin:0}
.fp-lista{max-height:210px;overflow:auto;display:flex;flex-direction:column;gap:1px}
.fp-it{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tinta);padding:4px 2px;cursor:pointer;margin:0;font-weight:400}
.fp-vazio{color:var(--suave);font-size:13px;padding:6px 2px}
.fp-acoes{margin-top:8px;text-align:right}
.grade-rodape{color:var(--suave);font-size:12px;margin-top:8px}
tfoot th{color:var(--tinta);font-size:15px;text-transform:none;letter-spacing:0;border-top:2px solid var(--teal-l);background:#fff}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.pill.e{background:#e6f4ea;color:var(--verde)}
.pill.s{background:#e7f1fb;color:var(--azul)}
.pill.alerta{background:#fff3cd;color:#8a6d00}
.pill.venc{background:#fde2e2;color:var(--verm)}
.aviso{font-size:13px;color:var(--suave);margin:4px 0 0}
.vazio{text-align:center;color:var(--suave);padding:32px 10px}
.item-lista{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--linha)}
.item-lista .nome{font-weight:600}
.item-lista .meta{font-size:13px;color:var(--suave)}
.item-lista .acoes{margin-left:auto;display:flex;gap:6px}
.mini{padding:7px 12px;font-size:13px;border-radius:9px;border:1.5px solid var(--linha);background:#fff;cursor:pointer;color:var(--teal-d);font-weight:600;font-family:inherit;transition:background .15s,border-color .15s}
.mini:hover{background:var(--teal-xl);border-color:var(--teal-l)}
.tag{display:inline-block;background:var(--teal-xl);color:var(--teal-d);padding:3px 10px;border-radius:8px;font-size:12px;margin:2px 3px 0 0;font-weight:600}
.resumo-mov{background:linear-gradient(135deg,#f7f6f2,#eef4f3);border:1px solid var(--linha);border-radius:12px;padding:13px;margin-top:12px;font-size:14px}
.resumo-mov b{color:var(--teal-d)}
.busca{margin-bottom:12px}
.sync-info{font-size:12px;color:var(--suave);margin-top:6px}
.campo{margin-bottom:2px}
.obrig{color:var(--teal);font-weight:700;margin-right:3px}
.chips-wrap{border:1.5px solid var(--linha);border-radius:12px;padding:8px;background:#fff;transition:border .15s,box-shadow .15s}
.chips-wrap:focus-within{border-color:var(--teal);box-shadow:var(--foco)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-xl);color:var(--teal-d);padding:5px 6px 5px 11px;border-radius:9px;font-size:14px;font-weight:600}
.chip button{background:rgba(0,0,0,.12);color:var(--teal-d);border:0;width:20px;height:20px;border-radius:50%;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.chip button:active{background:rgba(0,0,0,.25)}
.chips-input{border:0!important;padding:7px 4px!important;margin-top:4px;font-size:15px;outline:none;box-shadow:none!important}
.chips-input:focus{border:0!important;box-shadow:none!important}
.combo-drop{position:absolute;left:0;right:0;top:100%;background:#fff;border:1.5px solid var(--linha);border-top:0;border-radius:0 0 12px 12px;max-height:240px;overflow:auto;z-index:30;box-shadow:var(--sombra)}
.combo-it{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--linha);font-size:14px}
.combo-it:hover{background:var(--teal-xl)}
.combo-it span{color:var(--suave);font-size:12px}
.combo-vazio{padding:12px;color:var(--suave);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px rgba(0,34,62,.32);z-index:95;max-width:90vw;text-align:center}
.toast.erro{background:var(--verm)}
/* ---------- modal (escolha de local) ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,34,62,.55);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}
.modal-card{background:#fff;border-radius:18px;box-shadow:var(--sombra);padding:24px;max-width:380px;width:100%;text-align:center}
.modal-card h3{margin:0 0 6px;color:var(--navy);font-size:18px}
.modal-locais{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.modal-locais .local-op{margin-top:0;background:#fff;color:var(--teal-d);border:1.5px solid var(--teal);box-shadow:none}
.modal-locais .local-op.on,.modal-locais .local-op:hover{background:var(--grad-teal);color:#fff}
.modal-locais .local-op span{opacity:.7;font-weight:400}
.mov-itens{margin-top:14px;border:1px solid var(--linha);border-radius:12px;padding:10px 12px;background:#FBFAF8}
.mov-itens-cab{font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.mov-item{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--tinta);padding:5px 0;border-bottom:1px solid var(--linha)}
.mov-item b{white-space:nowrap}
.mov-item.total{font-weight:700;color:var(--navy);border-bottom:0;border-top:1px solid var(--linha);margin-top:3px;padding-top:7px}
.ma-titulo{margin:0 0 8px;color:var(--verm);font-size:17px;font-weight:700}
.ma-msg{margin:0;color:var(--tinta);font-size:14px;line-height:1.5}
/* cabeçalho de lista (CRUD) + modal de formulário */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.modal-form{max-width:540px;width:100%;max-height:92dvh;padding:0;text-align:left;display:flex;flex-direction:column;overflow:hidden}
.modal-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;border-bottom:1px solid var(--linha);flex:0 0 auto}
.modal-cab h3{margin:0;color:var(--navy);font-size:17px;font-weight:600}
.modal-x{background:none;border:0;font-size:26px;line-height:1;color:var(--suave);cursor:pointer;width:36px;height:36px;border-radius:9px;flex:0 0 auto}
.modal-x:hover{background:var(--teal-xl);color:var(--teal-d)}
.modal-corpo{padding:16px 20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media (max-width:560px){
  .modal-bg{padding:0;align-items:stretch}
  .modal-form{max-width:100%;width:100%;height:100dvh;max-height:100dvh;border-radius:0}
}
@media (max-width:560px){
  th.esc,td.esc{display:none}
  .topo-user{max-width:30%}
}
@media print{
  .topo,.drawer,.drawer-overlay,.no-print{display:none!important}
  main{padding:0;margin-left:0}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ccc}
}

/* ===== MODO EDITORIAL EMBUTIDO (?ed=1) — pele navy/vermelho/Inter, sem cabecalho proprio ===== */
@font-face{font-family:Inter;font-weight:400;src:url(/kit-editorial/fonts/inter-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:500;src:url(/kit-editorial/fonts/inter-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:600;src:url(/kit-editorial/fonts/inter-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:700;src:url(/kit-editorial/fonts/inter-700.woff2) format("woff2");font-display:swap}
body.ed{
  --teal:#DD1226; --teal-d:#c4101f; --teal-l:#f5b8c1; --teal-xl:#fdecef; --navy:#011A28; --faisca:#DD1226;
  --bg:#f7f7f8; --card:#fff; --texto:#101828; --suave:#667085; --linha:#e9eaed; --icbg:#eef1f4;
  --tinta:#101828; --creme:#f2f3f5; --foco:0 0 0 4px rgba(221,18,38,.14);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  background:var(--bg) !important; background-attachment:initial !important}
body.ed .topo{display:none !important}
body.ed main,body.ed .wrap{padding-top:18px}
body.ed .drawer{top:0 !important;height:100dvh !important}
body.ed .btn:not(.sec),body.ed button.btn:not(.sec){background:linear-gradient(90deg,#DD1226,#FA121F);color:#fff}
body.ed .btn.sec,body.ed button.btn.sec{background:#fff;color:#DD1226;border-color:#DD1226}
body.ed .ed-fab{position:fixed;top:12px;left:12px;z-index:45;width:40px;height:40px;border:0;border-radius:10px;
  background:linear-gradient(90deg,#DD1226,#FA121F);color:#fff;font-size:18px;line-height:40px;text-align:center;
  cursor:pointer;box-shadow:0 6px 18px rgba(221,18,38,.3)}

/* editorial (?ed): sem "voltar ao portal" (navegacao por abas) + "Sair" fica no menu do usuario do portal */
body.ed #tnx-voltar-portal{display:none !important}
body.ed #btn-sair,body.ed .topo-sair,body.ed [data-sair]{display:none !important}

/* ===== MODO minimalista/moderno (?min=1) — refina superficies; NAO altera cabecalho/cores do tema ===== */
body.min{background:#f4f5f7 !important;background-image:none !important}
body.min .card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.05) !important;border:1px solid #edeff3 !important;border-radius:18px;padding:22px 24px}
body.min .btn{box-shadow:none !important}
body.min .dropzone{background:#fafbfc !important;border:1.5px dashed #dde2e8 !important;border-radius:14px}

/* ===== CABEÇALHO EDITORIAL (padrão na dev · no portal o modo ed já oculta) ===== */
@font-face{font-family:Inter;font-weight:400;src:url(/kit-editorial/fonts/inter-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:500;src:url(/kit-editorial/fonts/inter-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:600;src:url(/kit-editorial/fonts/inter-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inter;font-weight:700;src:url(/kit-editorial/fonts/inter-700.woff2) format("woff2");font-display:swap}
body:not(.ed):not(.dark) .topo{background:#fff !important;color:#101828 !important;border-bottom:1px solid #e9eaed !important;box-shadow:0 1px 0 #e9eaed,0 3px 12px rgba(16,24,40,.05) !important;font-family:Inter,system-ui,sans-serif}
body:not(.ed):not(.dark) .topo .logo,body:not(.ed):not(.dark) .topo .topo-logo{filter:brightness(0)}
body:not(.ed):not(.dark) .topo .eyebrow,body:not(.ed):not(.dark) .topo .topo-eyebrow{color:#667085 !important}
body:not(.ed):not(.dark) .topo .titulo,body:not(.ed):not(.dark) .topo .topo-titulo{color:#101828 !important;font-weight:600}
body:not(.ed):not(.dark) .topo .user-btn{background:#f4f5f7 !important;border:1px solid #e9eaed !important;color:#101828 !important}
body:not(.ed):not(.dark) .topo .user-btn:hover{background:#eceef1 !important}
body:not(.ed):not(.dark) .topo .caret{color:#667085 !important}

/* ===== PADRÃO EDITORIAL (kit) — remapeia tokens legados p/ a marca · Inter · espaço ===== */
:root{
  --teal:#DD1226 !important; --teal-d:#C4101F !important; --teal-l:#F5B8C1 !important; --teal-xl:#FDECEF !important;
  --grad-teal:linear-gradient(90deg,#DD1226,#FA121F) !important;
  --navy:#011A28 !important; --verm:#FA121F !important; --faisca:#FA121F !important;
  --foco:0 0 0 4px rgba(221,18,38,.12) !important;
}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ag-theme-alpine{--ag-font-family:Inter,system-ui,sans-serif !important}
/* aproveitar o espaço horizontal (some do cap estreito de 940px) */
main{max-width:1760px !important;padding-inline:clamp(20px,3vw,42px)}

/* MOBILE: folga pro FAB não cobrir o conteúdo (mobile) */
@media(max-width:899px){ body.ed main{padding-top:60px} }

/* MOBILE: empilha os pares no celular (campos em largura total = mais espaço/toque) */
@media(max-width:520px){
  .linha:not(.res){flex-direction:column;align-items:stretch}
  .linha:not(.res)>div{width:100%;min-width:0}
}

/* ===== PADRÃO MOBILE: botão de menu (hambúrguer) uniforme em todas as telas ===== */
body.ed .ed-fab,.ws-menu{background:#fff !important;color:#344054 !important;border:1px solid var(--linha) !important;border-radius:11px !important;width:42px !important;height:42px !important;font-size:20px !important;line-height:1 !important;box-shadow:0 4px 14px rgba(16,24,40,.12) !important;display:none;align-items:center;justify-content:center}
body.ed .ed-fab{position:fixed;top:11px;left:11px;z-index:60}
body.ed .ed-fab:active,.ws-menu:active{transform:scale(.94)}
@media(max-width:899px){body.ed .ed-fab{display:inline-flex !important}}

/* ===== TEMA ESCURO (genérico) — segue o portal ===== */
body.dark{--creme:#161a1d;--branco:#22272b;--card:#22272b;--linha:#2c333a;--tinta:#dee4ea;--suave:#8c9bab;--icbg:#1d2125;--navy:#dee4ea;
  background:#161a1d !important;background-image:none !important;color:#dee4ea}
body.dark .card,body.dark .painel,body.dark .box,body.dark .kpi .box{background:#22272b;border-color:#2c333a}
body.dark input,body.dark select,body.dark textarea{background:#22272b;color:#dee4ea;border-color:#2c333a}
body.dark table th,body.dark table td{border-color:#2c333a;color:#dee4ea}
body.dark .ag-theme-alpine{--ag-background-color:#22272b;--ag-foreground-color:#dee4ea;--ag-header-background-color:#1d2125;--ag-border-color:#2c333a;--ag-odd-row-background-color:rgba(255,255,255,.02);--ag-row-hover-color:rgba(255,255,255,.05)}

/* ===== TEMA ESCURO vence o modo min (que usa !important) — segue o portal ===== */
body.dark{background:#161a1d !important;background-image:none !important;color:#dee4ea}
body.dark .card,body.dark .box,body.dark .kpi .box,body.dark .painel{background:#22272b !important;border-color:#2c333a !important;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.28) !important}
body.dark .drawer,body.dark .ws-drawer,body.dark #abas{background:#1d2125 !important;border-color:#2c333a !important}
body.dark input,body.dark select,body.dark textarea{background:#22272b !important;color:#dee4ea !important;border-color:#2c333a !important}
body.dark .dropzone{background:#22272b !important;border-color:#2c333a !important}
body.dark .ag-theme-alpine{--ag-background-color:#22272b;--ag-foreground-color:#dee4ea;--ag-header-background-color:#1d2125;--ag-border-color:#2c333a;--ag-odd-row-background-color:rgba(255,255,255,.02);--ag-row-hover-color:rgba(255,255,255,.05);--ag-secondary-foreground-color:#8c9bab}
body.dark .card-mob{background:#22272b !important;border-color:#2c333a !important}
body.dark .cm-fi{background:rgba(255,255,255,.05) !important;border-color:#2c333a !important;color:#dee4ea}

/* ===== MENU LATERAL no ESCURO (o padrão claro usa !important) ===== */
body.dark .drawer button,body.dark .ws-drawer button,body.dark #abas button{color:#b6c2cf !important}
body.dark .drawer button .ic,body.dark .ws-drawer button .ic{color:#8c9bab !important}
body.dark .drawer button:hover,body.dark .ws-drawer button:hover{background:rgba(255,255,255,.06) !important;color:#dee4ea !important}
body.dark .drawer button.ativa,body.dark .ws-drawer button.ativa{background:rgba(221,18,38,.18) !important;color:#dee4ea !important}
body.dark .drawer button.ativa .ic,body.dark .ws-drawer button.ativa .ic{color:#e0616b !important}
body.dark .drawer-flag,body.dark .fl-txt{color:#8c9bab !important}
body.dark #topo-local{background:rgba(255,255,255,.06) !important;border-color:#2c333a !important;color:#dee4ea !important}

/* ===== ESCURO AMIGÁVEL: ícones legíveis + botões sem contraste agressivo ===== */
body.dark .drawer button .ic,body.dark .ws-drawer button .ic,body.dark #abas button .ic{color:#8c9bab !important}
body.dark .drawer button,body.dark .ws-drawer button,body.dark #abas button{color:#b6c2cf !important}
/* secundário/outline: nada de branco puro no escuro */
body.dark .btn.sec,body.dark .btn.out,body.dark button.sec,body.dark .mini{background:rgba(255,255,255,.05) !important;border-color:#2c333a !important;color:#dee4ea !important;box-shadow:none !important}
body.dark .btn.sec:hover,body.dark .btn.out:hover,body.dark .mini:hover{background:rgba(255,255,255,.10) !important;border-color:#4a5a6d !important}
/* primário: vermelho mais contido, sem brilho */
body.dark .btn:not(.sec):not(.out),body.dark button.btn:not(.sec){background:linear-gradient(90deg,#b81020,#cf1322) !important;box-shadow:none !important;color:#fff !important}
/* textos auxiliares um pouco mais claros */
body.dark .suave,body.dark small,body.dark label{color:#8c9bab !important}

/* ===== ESCURO v2 — tons neutros, bordas visíveis, sem contraste extremo (ref. Atlassian) ===== */
body.dark{background:#161a1d !important;background-image:none !important;color:#b6c2cf !important}
body.dark .card,body.dark .box,body.dark .kpi .box,body.dark .painel,body.dark .card-mob,body.dark .chips-wrap,body.dark .resumo-mov{
  background:#22272b !important;border:1px solid #2c333a !important;box-shadow:none !important}
body.dark .drawer,body.dark .ws-drawer,body.dark #abas{background:#1d2125 !important;border-right:1px solid #2c333a !important;box-shadow:none !important}
body.dark input,body.dark select,body.dark textarea{background:#1d2125 !important;color:#dee4ea !important;border:1px solid #2c333a !important;box-shadow:none !important}
body.dark input::placeholder,body.dark textarea::placeholder{color:#7a8794 !important}
/* menu lateral: neutro, ativo sem vermelho na letra */
body.dark .drawer button,body.dark .ws-drawer button,body.dark #abas button{color:#b6c2cf !important;background:transparent !important}
body.dark .drawer button .ic,body.dark .ws-drawer button .ic{color:#8c9bab !important}
body.dark .drawer button:hover,body.dark .ws-drawer button:hover{background:rgba(255,255,255,.07) !important;color:#dee4ea !important}
body.dark .drawer button.ativa,body.dark .ws-drawer button.ativa{background:rgba(255,255,255,.09) !important;color:#dee4ea !important}
body.dark .drawer button.ativa .ic,body.dark .ws-drawer button.ativa .ic{color:#e0616b !important}
body.dark .drawer button.ativa::before{background:#e0616b !important}
/* botões: primário contido; secundário neutro com borda */
body.dark .btn:not(.sec):not(.out),body.dark button.btn:not(.sec){background:#b8323f !important;border:1px solid #c4404d !important;box-shadow:none !important;color:#fff !important}
body.dark .btn:not(.sec):not(.out):hover{background:#c93c4a !important}
body.dark .btn.sec,body.dark .btn.out,body.dark button.sec,body.dark .mini{background:#22272b !important;border:1px solid #2c333a !important;color:#b6c2cf !important;box-shadow:none !important}
body.dark .btn.sec:hover,body.dark .btn.out:hover,body.dark .mini:hover{background:#2c333a !important;color:#dee4ea !important}
/* textos */
body.dark h1,body.dark h2,body.dark h3,body.dark .titulo,body.dark .cm-tit{color:#dee4ea !important}
body.dark label,body.dark small,body.dark .suave,body.dark .cm-sub{color:#8c9bab !important}
/* tabelas / grade */
body.dark .ag-theme-alpine{--ag-background-color:#22272b;--ag-foreground-color:#b6c2cf;--ag-header-background-color:#1d2125;--ag-header-foreground-color:#8c9bab;--ag-border-color:#2c333a;--ag-odd-row-background-color:rgba(255,255,255,.02);--ag-row-hover-color:rgba(255,255,255,.06);--ag-selected-row-background-color:rgba(255,255,255,.08)}
body.dark table th,body.dark table td{border-color:#2c333a !important;color:#b6c2cf !important}
body.dark .cm-fi{background:rgba(255,255,255,.05) !important;border:1px solid #2c333a !important;color:#b6c2cf !important}
body.dark .cm-tag{background:rgba(224,97,107,.14) !important;color:#e0616b !important}
body.dark .dropzone{background:#1d2125 !important;border:1.5px dashed #3a434c !important}

/* ===== POP-UPS no escuro: fundo escurecido + borda/sombra delimitando ===== */
body.dark .modal-bg,body.dark .modal{background:rgba(0,0,0,.62) !important}
body.dark .modal-card,body.dark .modal-form,body.dark .modal-locais,body.dark .modal-grande,body.dark .modal-lg,body.dark .modal-corpo,body.dark .menu-pop{
  background:#22272b !important;border:1px solid #3d4650 !important;box-shadow:0 24px 70px rgba(0,0,0,.7) !important}
body.dark .modal-cab,body.dark .modal-head{border-bottom:1px solid #2c333a !important;color:#dee4ea !important}

/* ===== ESCURO: barras de rolagem e controles nativos (data/select) no tema ===== */
body.dark{color-scheme:dark;scrollbar-color:#3d4650 #1d2125;scrollbar-width:thin}
body.dark ::-webkit-scrollbar{width:10px;height:10px}
body.dark ::-webkit-scrollbar-track{background:#1d2125}
body.dark ::-webkit-scrollbar-thumb{background:#3d4650;border-radius:6px;border:2px solid #1d2125}
body.dark ::-webkit-scrollbar-thumb:hover{background:#4a5560}
body.dark ::-webkit-scrollbar-corner{background:#1d2125}

/* ===== MDF-e: correções do escuro (cabeçalho de tabela / painéis) ===== */
body.dark th{background:#1d2125 !important;color:#8c9bab !important;border-color:#2c333a !important}
body.dark td{background:transparent !important;color:#b6c2cf !important;border-color:#2c333a !important}
body.dark table,body.dark .tabela,body.dark .lista{background:#22272b !important;border-color:#2c333a !important}
body.dark tbody tr:hover td{background:rgba(255,255,255,.05) !important}
/* o checkbox escondido do "Fixar menu" não pode herdar width:100% (estoura a largura) */
.drawer-flag input{width:1px !important;height:1px !important;margin:0 !important;clip:rect(0 0 0 0)}

/* ===== Mensagens de erro: vermelho contido (mesmo tom do botão) ===== */
body.dark .erro-msg,body.dark .erro,body.dark .msg.err,body.dark .msg-erro{color:#e0616b !important}
body.dark .toast.erro,body.dark .badge.erro,body.dark .thumb .badge.erro,body.dark .tag.erro{background:#b8323f !important;color:#fff !important}
body.dark .pill.alerta{background:rgba(214,163,94,.16) !important;color:#d6a35e !important}

/* ===== CHIPS/FILTROS no escuro (texto legível + selecionado com acento contido) ===== */
body.dark .chip,body.dark .preset,body.dark .filtro-chip{background:#22272b !important;border:1px solid #2c333a !important;color:#b6c2cf !important}
body.dark .chip:hover,body.dark .preset:hover,body.dark .filtro-chip:hover{background:#2c333a !important;color:#dee4ea !important}
body.dark .chip.on,body.dark .chip.sel,body.dark .chip.ativo,body.dark .preset.on,body.dark .preset.ativo{
  background:rgba(224,97,107,.16) !important;border-color:#c4404d !important;color:#dee4ea !important}
body.dark,
body.dark .login-card,
body.dark .drawer,
body.dark .card,
body.dark input,
body.dark select,
body.dark textarea,
body.dark button.btn.sec,
body.dark .toggle button,
body.dark th,
body.dark tr.vencido td,
body.dark .fs-reset,
body.dark .cols-pop,
body.dark .filtro-pop,
body.dark tfoot th,
body.dark .pill.e,
body.dark .pill.s,
body.dark .pill.alerta,
body.dark .pill.venc,
body.dark .mini,
body.dark .chips-wrap,
body.dark .combo-drop,
body.dark .modal-card,
body.dark .modal-locais .local-op,
body.dark .mov-itens,
body.dark.ed,
body.dark.ed .btn.sec,
body.dark.ed button.btn.sec,
body.dark.min,
body.dark.min .dropzone,
body.dark:not(.ed):not(.dark) .topo,
body.dark:not(.ed):not(.dark) .topo .user-btn,
body.dark:not(.ed):not(.dark) .topo .user-btn:hover,
body.dark.ed .ed-fab,
body.dark .ws-menu{background:#22272b !important;border-color:#2c333a !important}
body.dark,
body.dark .login-card h1,
body.dark .drawer button,
body.dark  h2.titulo,
body.dark .fs-it,
body.dark .fp-it,
body.dark tfoot th,
body.dark .modal-card h3,
body.dark .mov-item,
body.dark .mov-item.total,
body.dark .ma-msg,
body.dark .modal-cab h3,
body.dark.ed .btn.sec,
body.dark.ed button.btn.sec,
body.dark:not(.ed):not(.dark) .topo,
body.dark:not(.ed):not(.dark) .topo .titulo,
body.dark:not(.ed):not(.dark) .topo .topo-titulo,
body.dark:not(.ed):not(.dark) .topo .user-btn,
body.dark.ed .ed-fab,
body.dark .ws-menu{color:#b6c2cf !important}

/* VARS-DARK-FINAL: tokens claros que nao tinham versao escura -> hover/branco no tema escuro */
body.dark{--teal-xl:#2c333a !important;--teal-l:#3d4650 !important;--teal-d:#dee4ea !important;--teal-lx:#2c333a !important}

/* toast usa background:var(--navy) -> ficava branco no escuro */
body.dark .toast{background:#22272b !important;color:#dee4ea !important;border:1px solid #3d4650 !important}

/* Layout do conteudo vs. gaveta: controlado no pneus.css (carrega por ultimo), no
   modelo do EPI — main{margin-left} segue o estado do menu (fixo 248 / trilho 64).
   O antigo hack de body{padding-left} do mdfe foi removido (conflitava com o trilho). */

/* GRADE-ESCURO v2 — hierarquia da tabela no tema escuro:
   cabecalho com superficie propria + borda forte embaixo (da pra ver que e cabecalho),
   zebra visivel fazendo a separacao das linhas, e a linha separadora DISCRETA. */
body.dark .ag-theme-alpine,body.dark .ag-theme-alpine-dark{
  --ag-background-color:#22272b;
  --ag-odd-row-background-color:#282e33;      /* zebra visivel */
  --ag-header-background-color:#1d2125;       /* superficie recuada do kit */
  --ag-header-foreground-color:#8c9bab;
  --ag-row-border-color:#2c333a;              /* discreta: quem separa e a zebra */
  --ag-border-color:#2c333a;
  --ag-secondary-border-color:#2c333a;
  --ag-row-hover-color:#323940}
body.dark .ag-theme-alpine .ag-row{border-bottom-color:#2c333a !important}
body.dark .ag-theme-alpine .ag-row-odd{background:#282e33 !important}
body.dark .ag-theme-alpine .ag-row-even{background:#22272b !important}
body.dark .ag-theme-alpine .ag-row-hover,body.dark .ag-theme-alpine .ag-row:hover{background:#323940 !important}
body.dark .ag-theme-alpine .ag-header{background:#1d2125 !important;border-bottom:2px solid #3d4650 !important}
body.dark .ag-theme-alpine .ag-header-cell-text{color:#8c9bab !important;font-weight:600;letter-spacing:.3px}
body.dark .ag-theme-alpine .ag-header-cell{border-right-color:#2c333a !important}
body.dark .ag-theme-alpine .ag-paging-panel{background:#1d2125 !important;border-top:1px solid #2c333a !important;color:#b6c2cf !important}
/* tabelas comuns (nao ag-grid) seguem o mesmo padrao */
body.dark table thead th{background:#1d2125 !important;color:#8c9bab !important;border-bottom:2px solid #3d4650 !important}
body.dark table tbody tr:nth-child(odd){background:#282e33 !important}
body.dark table tbody tr:nth-child(even){background:#22272b !important}
body.dark table tbody td{border-bottom-color:#2c333a !important}
body.dark table tbody tr:hover{background:#323940 !important}

/* KIT-CONFORMIDADE (escuro): tokens que ainda saiam da paleta do kit editorial */
body.dark .drawer-flag input:checked + .sw,body.dark .sw.on,body.dark input:checked + .sw{background:#b8323f !important}
body.dark .drawer-flag .sw{background:#3d4650 !important}


/* ===== PADRAO DE ERRO/AVISO VERMELHO (referencia: modulo Scanner) =====
   claro: #E11A12   ·   escuro: texto #e0616b, preenchido #b8323f
   So as mensagens de erro: NAO mexe nos tokens (--verm/--red/--faisca),
   que tambem pintam botao primario. */
.erro-msg,.erro,.err,#lg-err,.lg-err,.msg-erro,.msg.err,.resultado.err,.m-erro,.erro-txt,.txt-erro,.det.erro,.hist-err,.linha-err{color:#E11A12}
.toast.erro,.badge.erro,.tag.erro,.thumb .badge.erro,.bdg.erro,.pill.erro{background:#E11A12;color:#fff}
.bdg.err{color:#E11A12}
body.dark .erro-msg,body.dark .erro,body.dark .err,body.dark #lg-err,body.dark .lg-err,body.dark .msg-erro,body.dark .msg.err,body.dark .resultado.err,body.dark .m-erro,body.dark .erro-txt,body.dark .txt-erro,body.dark .det.erro,body.dark .hist-err,body.dark .linha-err{color:#e0616b !important}
body.dark .toast.erro,body.dark .badge.erro,body.dark .tag.erro,body.dark .thumb .badge.erro,body.dark .bdg.erro,body.dark .pill.erro{background:#b8323f !important;color:#fff !important}
body.dark .bdg.err{color:#e0616b !important}

/* ===================================================================
   TABELA -> CARTAO NO CELULAR (padrao do sistema)
   Tabela larga no telefone so oferece rolagem lateral e numero espremido.
   Abaixo de 560px cada linha vira um cartao: 1a celula e o titulo, as
   demais viram rotulo -> valor. O rotulo sai do cabecalho (data-rot,
   preenchido pelo tabela-cartao.js). Nao mexe no desktop.
   ================================================================== */
@media (max-width:560px){
  table.cartao-mob{display:block;width:auto;min-width:0 !important;table-layout:auto !important}
  table.cartao-mob thead{display:none}
  table.cartao-mob tbody,table.cartao-mob tfoot,table.cartao-mob tr,table.cartao-mob td{display:block;width:auto}
  table.cartao-mob tr{background:var(--branco,var(--card,#fff));border:1px solid var(--linha,var(--bd,#e6ebf2));
    border-left:4px solid var(--verm,#E11A12);border-radius:12px;margin:0 0 12px;padding:13px 15px}
  table.cartao-mob td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    border:0;padding:6px 0;font-size:13.5px;color:var(--suave,var(--cdesc,#697585));text-align:right;
    word-break:break-word;overflow-wrap:anywhere}
  /* valor com largura minima: coluna de numeros alinhada, 1 digito ou 4 */
  /* rotulo NUNCA corta: prefere quebrar o valor a espremer o rotulo (ex.: Origem/Motorista) */
  table.cartao-mob td{white-space:normal}
  table.cartao-mob td::before{white-space:normal;overflow:visible;text-overflow:clip;
    flex:0 0 auto;min-width:88px;max-width:45%}
  table.cartao-mob td>*:last-child,table.cartao-mob td .comp-anexo{white-space:normal;text-align:right}
  table.cartao-mob td::before{content:attr(data-rot);font-size:12px;font-weight:500;color:var(--suave,var(--cdesc,#697585));
    text-align:left;flex:1 1 auto;text-transform:none;letter-spacing:.2px}
  table.cartao-mob td:first-child{font-family:"Poppins",inherit;font-weight:700;font-size:16px;
    color:var(--navy,var(--tinta,#101828));letter-spacing:.4px;text-align:left;display:block;
    padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--linha,var(--bd,#e6ebf2))}
  table.cartao-mob td:first-child::before{display:none}
  table.cartao-mob td:empty{display:none}
  table.cartao-mob td.num{font-weight:700;font-size:14.5px;color:var(--tinta,var(--cnome,#101828));
    font-variant-numeric:tabular-nums;min-width:52px;justify-content:space-between}
  table.cartao-mob tfoot tr{border-left-color:var(--suave,#697585)}
  /* no cartao a zebra nao vale: cartao alternado parece outro tipo de dado */
  table.cartao-mob tbody tr:nth-child(odd),table.cartao-mob tbody tr:nth-child(even){background:var(--branco,var(--card,#fff))}
  table.cartao-mob td.esc,table.cartao-mob th.esc{display:flex}
  .grade-scroll,.comp-wrap,.tab-wrap,.tabela-scroll{overflow-x:visible}
}
body.dark table.cartao-mob tr,body.dark table.cartao-mob tbody tr:nth-child(odd),
body.dark table.cartao-mob tbody tr:nth-child(even){background:#22272b !important;border-color:#2c333a !important;
  border-left-color:#b8323f !important}
body.dark table.cartao-mob td{color:#8c9bab !important;border-bottom-color:#2c333a !important}
body.dark table.cartao-mob td::before{color:#8c9bab !important}
body.dark table.cartao-mob td:first-child{color:#dee4ea !important;border-bottom-color:#2c333a !important}
body.dark table.cartao-mob td.num{color:#dee4ea !important}
body.dark table.cartao-mob tfoot tr{background:#1d2125 !important;border-left-color:#8c9bab !important}

/* mobile: com a gaveta aberta, o hamburguer sumia sobrepondo o 1o item do menu.
   Some enquanto aberta (fecha tocando na area escura / num item). */
body.drawer-aberto .ed-fab,body.drawer-aberto .ws-menu{display:none !important}

/* ===== FAIXA "AMBIENTE DE DESENVOLVIMENTO" — só aparece no dev (detecção por domínio) ===== */
.dev-flag{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;align-items:center;
  justify-content:center;gap:8px;padding:7px 14px;box-sizing:border-box;
  background:#fef3c7;color:#78350f;border-top:2px solid #f59e0b;
  font-family:Inter,system-ui,-apple-system,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.2px;line-height:1.3;text-align:center;box-shadow:0 -2px 12px rgba(120,53,15,.14);
  pointer-events:none;user-select:none}
.dev-flag .dev-ic{display:inline-flex;flex:0 0 auto}
.dev-flag .dev-ic svg{width:15px;height:15px}
.dev-flag b{font-weight:800}
body.dark .dev-flag{background:#3a2f12;color:#fcd34d;border-top-color:#b45309;box-shadow:0 -2px 12px rgba(0,0,0,.4)}
body.tem-dev-flag{padding-bottom:34px}
@media (max-width:560px){ .dev-flag{font-size:11.5px;padding:6px 10px} .dev-flag .dev-txt-extra{display:none} }