:root{
  --bg:#0B0F14; --panel:#121821; --panel2:#1A2230; --line:#26303F;
  --txt:#F2F5F9; --muted:#CBD5E1; --ouro:#F0A500; --ouro2:#FCD34D;
  --verde:#16A34A; --azul:#1D4ED8; --roxo:#7C3AED; --vermelho:#EF4444;
  --r:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* iOS: não inflar o texto sozinho */
body{font-family:'Inter',system-ui,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:15px;-webkit-tap-highlight-color:transparent}
a{color:var(--ouro2);text-decoration:none}
.hidden{display:none!important}

/* LOGIN */
#login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(1200px 600px at 70% -10%, #15406022, transparent), var(--bg)}
.card-login{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px;width:360px;box-shadow:var(--shadow)}
.logo{font-size:26px;font-weight:800;font-family:Georgia,serif;color:var(--ouro);text-align:center}
.logo small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:4px;font-family:Inter}
.logo-img{width:100%;max-width:300px;display:block;margin:0 auto 6px;border-radius:10px}
.logo-sub{text-align:center;color:var(--muted);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.logo-aside{max-width:100%;margin:0 auto 16px;border-radius:8px}
.card-login input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:12px;margin-top:12px;font-size:14px}
.card-login input:focus{outline:none;border-color:var(--ouro)}
.btn{background:var(--ouro);color:#111;border:none;border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.5;cursor:default}
.btn-2{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.erro{color:#FCA5A5;font-size:12px;margin-top:10px;min-height:14px;text-align:center}

/* APP SHELL */
#app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;min-height:100dvh}
/* a sidebar é uma coluna que ROLA: o menu cresceu (11 abas) e, com a tela baixa, os últimos itens
   ficavam ESCONDIDOS embaixo do bloco do usuário, que era ancorado no rodapé (bug visto em 10/08/2026) */
aside{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;
  height:100vh;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
aside::-webkit-scrollbar{width:6px} aside::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
aside .logo{font-size:20px;text-align:left;margin-bottom:18px}
/* nada na coluna pode ser espremido — se não couber, a sidebar rola */
aside > .logo-aside,aside > #segBar,aside > nav{flex:0 0 auto}
nav a{display:flex;gap:10px;align-items:center;color:var(--muted);padding:10px 12px;border-radius:10px;margin:2px 0;font-weight:600;cursor:pointer}
nav a:hover{background:var(--panel2);color:var(--txt)}
nav a.ativo{background:#1f2937;color:var(--ouro2)}
/* 🧩 16/10/2026: título de módulo no menu (Vendas, Financeiro…) — some quando o perfil não tem tela do módulo */
nav .nav-mod{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:10px 10px 2px;opacity:.85;user-select:none}
/* fica no rodapé quando sobra espaço (margin-top:auto) e EMPURRA quando não sobra — nunca cobre o menu.
   Os atalhos viram uma grade que quebra sozinha, em vez de textos se atropelando numa linha só. */
.user{margin-top:auto;flex:0 0 auto;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding:12px 0 4px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.user #userEmail{flex:1 0 100%;margin-bottom:2px}
.user a{margin-right:0 !important;white-space:nowrap}
main{padding:22px 26px;overflow:auto}
.topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topo h1{font-size:20px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi .l{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.kpi .v{font-size:23px;font-weight:800;margin-top:6px;color:var(--ouro2)}
.kpi .v.verde{color:#4ADE80}

/* PIPELINE */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:120px}
.col h3{font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.col h3 .n{background:var(--panel2);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--muted)}
.col .body{padding:8px;display:flex;flex-direction:column;gap:8px}
.pcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.pcard:hover{border-color:var(--ouro)}
.pcard .num{font-size:11px;color:var(--muted)}
.pcard .cli{font-weight:700;margin:2px 0}
.pcard .val{font-size:12px;color:var(--ouro2)}
.pcard .acts{display:flex;gap:6px;margin-top:8px}

/* TABELAS */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{background:var(--panel2);color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.03em}
td.r,th.r{text-align:right} tr:hover td{background:#161d28}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff}

/* FORM */
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;max-width:980px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fld label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input,.fld select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:11px 12px;font-size:15px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ouro)}
/* tira as setinhas do campo numérico (elas comem espaço e cortam o valor) */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sec{font-size:13.5px;color:var(--ouro2);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 8px;font-weight:700}
.itens-tbl input,.itens-tbl select{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:8px;font-size:14px;width:100%}
.right{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--verde);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow);font-weight:600;z-index:50}
.toast.err{background:var(--vermelho)}
.muted{color:var(--muted)} .ouro{color:var(--ouro2)} .verde{color:#4ADE80}
.fld.full{grid-column:1/-1}
/* modo VENDA (orçamento/pendentes): esconde tudo de compra/custo */
.modo-venda .so-compra,.modo-venda .ic-row.compra{display:none!important}
.nao-admin .so-admin{display:none!important}

/* ITEM CARDS (pedido — venda x compra) */
.item-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.ic-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ic-top input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:9px;font-size:15px}
.ic-top .i_prod{flex:2;min-width:200px}
.ic-top .i_especie,.ic-top .i_cond{flex:1;min-width:90px}
.ic-pcs{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;margin-left:auto}
.ic-pcs input{width:96px}
.ic-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:6px 0}
.ic-row .dim{width:74px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:8px;font-size:14px;text-align:center}
.ic-row .val{width:112px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:8px;font-size:14px}
.ic-row .dim2{width:104px;background:var(--bg);border:1px solid var(--ouro);color:var(--txt);border-radius:6px;padding:8px;font-size:14px;text-align:right;font-weight:600}
.ic-row .dim2.ro{background:var(--panel2);border-color:var(--line);color:var(--ouro2);opacity:.9;cursor:default}
.ic-row b{color:var(--txt)} .ic-row .un{color:var(--muted)}
.ic-tag{display:inline-block;width:62px;text-align:center;font-weight:700;font-size:11px;border-radius:5px;padding:4px 0;color:#fff}
.ic-tag.v{background:var(--azul)} .ic-tag.c{background:#B45309}
.ic-exc{font-size:12px;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
.ic-qty{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);margin-top:6px;padding-top:8px;font-size:12px;color:var(--muted)}
.ic-qty label{display:flex;align-items:center;gap:6px}
.ic-qty input{width:112px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:9px;font-size:15px}
.ic-out{margin-left:auto} .ic-out b{font-size:14px}
.ic-adv-toggle{margin-left:auto;cursor:pointer;color:var(--ouro2);font-size:12px;white-space:nowrap}
.ic-out2{font-size:13px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;color:var(--muted)}
.ic-out2 b{font-size:15px}
.ic-adv{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}

/* MODAL (cadastros) */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:60}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:680px;max-width:100%;box-shadow:var(--shadow)}
.modal h2{font-size:18px;margin-bottom:16px;color:var(--ouro2)}

/* Botão flutuante "← Voltar" (histórico de navegação) */
.navback{position:fixed;left:246px;bottom:18px;z-index:48;background:var(--panel2);color:var(--ouro2);
  border:1px solid var(--ouro);border-radius:24px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navback:hover{filter:brightness(1.12)}

/* ===== MOBILE / APP (PWA) ===== */
.mtop{display:none}
.mbackdrop{display:none}
.mbtn{background:var(--panel2);color:var(--ouro2);border:1px solid var(--line);border-radius:10px;font-size:20px;line-height:1;padding:6px 12px;cursor:pointer}

@media (max-width:880px), (hover:none) and (pointer:coarse) and (max-width:1200px){
  #app{display:block;min-height:100vh}
  /* barra superior fixa */
  .mtop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:45;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .mtop .mlogo{height:30px;border-radius:6px}
  .mtop #mTitulo{font-weight:800;color:var(--ouro2);font-size:16px}
  /* sidebar vira gaveta deslizante */
  aside{position:fixed;top:0;left:0;bottom:0;width:250px;max-width:84vw;height:100vh;height:100dvh;z-index:60;
    transform:translateX(-102%);transition:transform .25s ease;box-shadow:var(--shadow);overflow:auto;-webkit-overflow-scrolling:touch;
    padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left))}
  aside.open{transform:none}
  .mbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55}
  .mbackdrop.open{display:block}
  nav a{padding:14px 14px;font-size:15px}
  .user{position:static;margin-top:18px}
  /* ⚠️ NÃO colocar overflow aqui. Qualquer overflow no main faz ele virar o DONO da rolagem —
     inclusive a vertical (regra do CSS: overflow-x definido ⇒ overflow-y vira auto) — e o gesto
     de rolar para de chegar na página. Foi o que quebrou a tela em janela estreita (11/08/2026:
     "eu rolo pra cima e pra baixo e não vai"). Quem rola de lado é a tabela; a página rola sozinha.
     O padding de baixo abre espaço pros botões flutuantes (🖨️ Imprimir / ← Voltar). */
  main{padding:14px 14px calc(76px + env(safe-area-inset-bottom))}
  .topo{flex-wrap:wrap;gap:8px} .topo h1{font-size:18px}
  /* campos das telas principais em 16px: iOS não dá zoom automático ao focar */
  .fld input,.fld select,.card-login input,textarea,.itens-tbl input,.itens-tbl select{font-size:16px}
  /* KPIs e grids empilham */
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi .v{font-size:21px}
  .grid{grid-template-columns:1fr}
  .form{padding:14px}
  /* tabelas roláveis na horizontal (não cortam mais a página) */
  main table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;max-width:100% !important}
  main th,main td{padding:8px 9px;font-size:14px}
  /* grids de 2 colunas montados via style inline (Painel, DRE, Indicadores, Pedido DADOS×Cascata) empilham no celular */
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns: 1fr 1fr"],
  main [style*="grid-template-columns:1.1fr 1fr"],
  main [style*="grid-template-columns: 1.1fr 1fr"]{grid-template-columns:1fr !important}
  /* qualquer bloco inline com largura fixa cabe na tela */
  main [style*="max-width:"]{max-width:100% !important}
  /* nenhum BLOCO pode exigir largura maior que o celular (tabela é exceção: ela rola sozinha) */
  main :not(table)[style*="min-width:2"],main :not(table)[style*="min-width:3"],
  main :not(table)[style*="min-width:4"],main :not(table)[style*="min-width:5"],
  main :not(table)[style*="min-width:6"],main :not(table)[style*="min-width:7"],
  main :not(table)[style*="min-width:8"],main :not(table)[style*="min-width:9"]{min-width:0 !important}
  /* grid que só monta com coluna de 240px+ vira coluna única em vez de estourar a tela */
  main [style*="minmax(2"],main [style*="minmax(3"],main [style*="minmax(4"],
  main [style*="minmax(5"],main [style*="minmax(6"]{grid-template-columns:1fr !important}
  main [style*="width:740px"],main [style*="width:780px"],main [style*="width:820px"],main [style*="width:860px"],main [style*="width:920px"]{width:100% !important}
  /* linhas de botões/abas/toggle quebram em vez de cortar */
  main .sec{flex-wrap:wrap}
  .sec{font-size:13px}
  /* modal sempre dentro da tela */
  .modal{width:94vw !important;max-width:94vw !important;padding:16px}
  .modal-bg{padding:18px 10px;align-items:flex-start}
  /* pipeline: colunas largas e deslizáveis (com inércia e "encaixe" ao soltar) */
  .board{grid-auto-flow:column;grid-auto-columns:82vw;display:grid !important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .board .col{scroll-snap-align:start}
  .modal-bg{-webkit-overflow-scrolling:touch}
  /* botões maiores p/ toque */
  .btn{padding:11px 15px} .btn-sm{padding:9px 12px}
  .card-login{width:92vw;max-width:360px}
  /* botão voltar: no celular a sidebar é gaveta, então cola na esquerda (acima da barra de gestos) */
  .navback{left:12px;bottom:calc(14px + env(safe-area-inset-bottom));max-width:66vw;padding:11px 16px}
}
@media(max-width:420px){ .kpis{grid-template-columns:1fr} }
/* trava o scroll horizontal da página inteira no celular (só tabelas rolam) */
@media (max-width:880px), (hover:none) and (pointer:coarse) and (max-width:1200px){
  /* deixa a PÁGINA arrastar de lado quando algo passa da largura. Antes era overflow-x:hidden:
     o que vazava sumia sem jeito de alcançar. A rolagem vertical continua sendo da página. */
  html,body{max-width:100vw;overflow-x:auto}
}
/* 📇 Contas em CARTÕES no celular (backlog t20): cada linha vira um cartão empilhado; o rótulo da coluna vem do CSS */
@media (max-width:880px), (hover:none) and (pointer:coarse) and (max-width:1200px){
  table.cardify thead{display:none}
  table.cardify,table.cardify tbody{display:block;width:100%}
  table.cardify tr{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;margin:0 0 8px;padding:8px 12px}
  table.cardify td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none !important;padding:3px 0;text-align:right;flex-wrap:wrap}
  table.cardify td::before{content:attr(data-l);color:var(--muted);font-size:10.5px;letter-spacing:.3px;text-align:left;flex:0 0 auto}
  table.cardify td:empty{display:none}
  table.cardify td[colspan]{display:block;text-align:left}
  table.cardify td[colspan]::before{content:''}
  /* rótulos por coluna (mesma ordem do cabeçalho) */
  .t-rec td:nth-child(1)::before{content:'Vencimento'} .t-rec td:nth-child(2)::before{content:'Pedido'} .t-rec td:nth-child(3)::before{content:'Cliente'} .t-rec td:nth-child(4)::before{content:'Valor'} .t-rec td:nth-child(5)::before{content:'Antecipação'} .t-rec td:nth-child(6)::before{content:'Líquido'} .t-rec td:nth-child(7)::before{content:'Baixa'}
  .t-pag td:nth-child(1)::before{content:'Vencimento'} .t-pag td:nth-child(2)::before{content:'Pedido'} .t-pag td:nth-child(3)::before{content:'Tipo'} .t-pag td:nth-child(4)::before{content:'Para quem'} .t-pag td:nth-child(5)::before{content:'Valor'} .t-pag td:nth-child(6)::before{content:'Baixa'}
  .t-desp td:nth-child(1)::before{content:'Vencimento'} .t-desp td:nth-child(2)::before{content:'Tipo'} .t-desp td:nth-child(3)::before{content:'Descrição'} .t-desp td:nth-child(4)::before{content:'Categoria'} .t-desp td:nth-child(5)::before{content:'Segmento'} .t-desp td:nth-child(6)::before{content:'Valor'} .t-desp td:nth-child(7)::before{content:'Baixa'} .t-desp td:nth-child(8)::before{content:''}
}
/* 🖨️ botões FLUTUANTES de impressão — visíveis em toda aba, canto inferior direito */
.printfab{position:fixed;right:18px;bottom:18px;z-index:48;display:flex;gap:8px}
.printfab button{background:var(--panel2);color:var(--ouro2);border:1px solid var(--ouro);border-radius:24px;
  padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.printfab button:hover{background:var(--ouro);color:#000}
.printfab button.cor{border-color:#7C3AED;color:#C4B5FD}
.printfab button.cor:hover{background:#7C3AED;color:#fff}
@media (max-width:880px), (hover:none) and (pointer:coarse) and (max-width:1200px){ .printfab{right:12px;bottom:calc(14px + env(safe-area-inset-bottom))} .printfab button{padding:11px 14px;font-size:12px} }
@media print{ .printfab,.navback{display:none!important} }

/* ═══════════════ ☀️ TEMA CLARO (opcional) ═══════════════
   O ESCURO continua sendo o padrão — este bloco só vale com <html data-theme="light">
   (escolha do usuário, salva em localStorage 'nm_tema', aplicada no <head> antes do 1º render).
   NADA aqui altera o tema escuro. A impressão (_printCSS/imprimirTela) abre janela própria e não é afetada. */
[data-theme="light"]{
  /* 14/09/2026 (dono: "faça mais harmônico e básico"): neutros limpos, sem tom de areia */
  --bg:#F3F5F8;        /* fundo cinza-claro neutro */
  --panel:#FFFFFF;     /* painéis brancos */
  --panel2:#EEF1F5;    /* painel secundário */
  --line:#D6DCE4;      /* linhas */
  --txt:#111827;       /* texto quase-preto */
  --muted:#4B5563;     /* cinza escuro legível */
  --ouro:#B08D1E;      /* dourado p/ BORDAS e fundo de botão (não é cor de texto) */
  --ouro2:#7A5B00;     /* dourado-marrom de TEXTO (~6.3:1 em branco, AA folgado) */
  --verde:#166534; --azul:#1E40AF; --roxo:#5B21B6; --vermelho:#991B1B;
  --shadow:0 6px 24px rgba(15,23,42,.12);
}
/* reforços nos padrões fixos do próprio app.css que usam cor chumbada */
[data-theme="light"] #login{background:radial-gradient(1200px 600px at 70% -10%, #B08D1E14, transparent), var(--bg)}
[data-theme="light"] nav a.ativo{background:#FDF3D8;color:#7A5B00}
[data-theme="light"] tr:hover td{background:#F7F9FC}
[data-theme="light"] .erro{color:#991B1B}
[data-theme="light"] .kpi .v.verde,[data-theme="light"] .verde{color:#166534}
[data-theme="light"] .logo{color:#7A5B00} /* logo usa var(--ouro) como texto; no claro precisa do dourado-marrom escuro */
[data-theme="light"] .printfab button{box-shadow:0 4px 14px rgba(15,23,42,.2)}
[data-theme="light"] .printfab button.cor{color:#5B21B6}
/* gráficos SVG: rótulos claros do tema escuro → BEM escuros no claro */
[data-theme="light"] svg [fill="#8B97A8"]{fill:#3F4754}
[data-theme="light"] svg [fill="#E6EAF0"]{fill:#0B1220}

/* 14/09/2026: as ~430 regras que tentavam corrigir cor por cor os estilos escritos direto no app.js foram
   retiradas — deixavam texto escuro em fundo escuro (dono: "está muito ruim, não entende nada"). Quem ajusta
   agora é o _temaClaro() do index.html: todo fundo escuro vira um tom claro da MESMA cor e todo texto claro
   vira a versão escura da mesma cor. Um lugar só, vale para qualquer tela nova. */

/* acentos claros chumbados inline no app.js → versões escuras legíveis em painel claro */
/* cores médias que sobraram (pedido do dono 07/08: informação FORTE/escura no claro — nada apagado) */

/* restauração: em cima de fundo escuro inline o acento claro ORIGINAL continua (pills/tags escuras) */

/* 📅 O CAMPO DE DATA TEM QUE ABRIR O CALENDÁRIO. Reclamação do dono (11/09/2026): "foi mudado o
   formato de escolha das datas, volta ao padrão que era, que abria o calendário para escolher".
   A causa: na Programação os campos ficaram estreitos e com fonte pequena, e o ícone nativo do
   calendário some ou fica impossível de acertar — sobra o dd/mm/aaaa para digitar na mão.
   Aqui o ícone volta a aparecer, visível no tema escuro, e o campo inteiro vira área de clique. */
input[type="date"]{ position:relative; cursor:pointer; }
input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.75);
  cursor:pointer; padding:0; margin-left:2px;
  width:15px; height:15px;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(1); }
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{ filter:none; opacity:.7; }
[data-theme="light"] input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }
input[type="date"]:disabled{ cursor:not-allowed; }


/* 🧊 FLUXO DE CAIXA — só o CONGELAMENTO (14/09/2026): cabeçalho parado no topo, coluna das semanas parada à esquerda e a
   linha TOTAL parada embaixo; a tabela rola dentro da própria caixa. Textos e tamanhos continuam os de sempre. */
.fx-caixa{overflow:auto;max-height:93vh;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.fx-tab{border:0;border-radius:0;overflow:visible;border-collapse:separate;border-spacing:0}
/* 🔎 19/09/2026 (dono: "aumentar o tamanho na tela do fluxo de caixa, ficar mais fácil visualizar") — fluxo maior */
.fx-tab th{font-size:13.5px;padding:8px 10px}   /* 27/09: o dono pediu fonte maior no fluxo inteiro */
.fx-tab td{font-size:15.5px;padding:7px 10px}
.fx-tab thead th{position:sticky;z-index:4;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}
.fx-tab thead tr:first-child th{top:0;height:42px}
.fx-tab thead tr:nth-child(2) th{top:42px}
.fx-tab thead th:first-child{left:0;z-index:5}
.fx-tab tbody td:first-child{position:sticky;left:0;z-index:2;background:inherit}
.fx-tab tbody tr{background:var(--panel)}
.fx-tab tbody tr:last-child td{position:sticky;bottom:0;z-index:3;background:var(--panel2);box-shadow:inset 0 1px 0 var(--line)}
.fx-tab tbody tr:last-child td:first-child{z-index:4}

/* 🔎 19/09/2026 — fluxo de caixa: modo extrato e tela cheia */
.fx-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.fx-wrap .fx-caixa{border:0;border-radius:0;max-height:93vh}   /* 19/09: o dono quer o QUADRO maior, não a letra */
.fx-wrap.fx-cheia{position:fixed;inset:0;z-index:9990;border-radius:0;border:0;display:flex;flex-direction:column;background:var(--bg)}
.fx-wrap.fx-cheia .fx-caixa{flex:1;max-height:none}
.fx-tab.fx-ext td{font-size:15.5px}
.fx-tab.fx-ext td.r{white-space:nowrap;font-size:16px}
.fx-tab.fx-ext thead tr:first-child th{height:auto}

/* 20/09/2026: no celular os botões flutuantes (← Painel · 🖨️ Imprimir · 🎨 Cores) ficam por cima
   da última linha da tabela. Isto reserva o espaço deles no fim da página — espaço para os botões flutuantes. */
@media (max-width:880px), (hover:none) and (pointer:coarse) and (max-width:1200px){
  main{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
}

/* 📌 20/09/2026 (dono: "cabeçalho congelado") — qualquer tabela dentro de um .fx-caixa pode ter o
   cabeçalho preso no topo ao rolar, sem herdar o resto do visual do fluxo de caixa. */
.tb-cong{border-collapse:separate;border-spacing:0}
.tb-cong thead th{position:sticky;top:0;z-index:4;background:var(--panel2);box-shadow:inset 0 -1px 0 var(--line)}

/* 📏 21/09/2026 — seletor cm/mm da conferência da carga (o cliente manda a lista em milímetros) */
.btn.cf-un{padding:3px 10px;font-size:11.5px}
.btn.cf-un.ativo{background:var(--ouro);border-color:var(--ouro);color:#111;font-weight:700}

/* 📋 21/09/2026 — conferência da carga em FICHAS (o dono: "está muito confuso essa tela").
   Uma ficha por produto, com os três lados lado a lado: o que foi faturado, o que veio e a compra. */
.cf-card{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;background:var(--panel)}
.cf-card.novo{background:rgba(250,204,21,.06);border-color:#B45309}
.cf-tit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cf-tit b{font-size:13.5px}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.cf-box{background:var(--panel2);border-radius:8px;padding:8px;border-left:3px solid var(--line)}
.cf-box.cli{border-left-color:#64748B}
.cf-box.veio{border-left-color:#C9A227}
.cf-box.forn{border-left-color:#F59E0B}
.cf-lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:5px;font-weight:700}
.cf-lin{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:12px;margin-bottom:4px}
.cf-lin input{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:4px 5px;font-size:13px;text-align:right;width:54px}
.cf-lin input.pc{width:74px;border-color:var(--ouro)}
.cf-lin input.rs{width:82px}
.cf-lin input.prop{border-color:#F59E0B}
.cf-num{font-size:13px;font-weight:700;margin-top:3px}
.cf-sub{font-size:10.5px;color:var(--muted)}

/* 📌 21/09/2026 (dono: "congele a primeira linha do fluxo e a primeira coluna") — o cabeçalho e a
   coluna de data/descrição ficam presos enquanto se rola o fluxo, em qualquer sentido.
   O que faltava: fundo OPACO nas duas (com linha colorida por cima o sticky deixava passar o texto
   por baixo) e um traço separando a coluna presa do resto. A rolagem acontece DENTRO do quadro: o
   wrap não gruda na página, senão o fluxo cobriria a tabela de cargas que vem logo abaixo. */
.fx-caixa{overscroll-behavior:contain}
.fx-tab thead th{top:0;background:var(--panel2)!important}
.fx-tab thead th:first-child{left:0;z-index:6;box-shadow:inset 0 -1px 0 var(--line), 1px 0 0 var(--line)}
.fx-tab tbody td:first-child{background-color:inherit;box-shadow:1px 0 0 var(--line)}
.fx-tab tbody tr{background-color:var(--panel)}
.fx-tab tbody tr:last-child td:first-child{background:var(--panel2)}

/* 🔒 abas Contas e Resultado: só o dono edita (23/09/2026) — os controles ficam visíveis, apagados e sem clique */
.aba-so-dono button, .aba-so-dono input, .aba-so-dono select, .aba-so-dono textarea { pointer-events: none; opacity: .45; }

/* ☰ MENU EM GAVETA TAMBÉM NO COMPUTADOR (dono, 25/09/2026: escolheu "gaveta por cima da tela" — o ☰ fica na barra de cima,
   o menu abre POR CIMA da tela escurecendo o fundo e fecha sozinho ao escolher a aba; é o mesmo mecanismo do celular). */
@media (min-width:881px){
  #app{display:block;min-height:100vh}
  .mtop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:45;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 16px}
  .mtop .mlogo{height:30px;border-radius:6px}
  .mtop #mTitulo{font-weight:800;color:var(--ouro2);font-size:16px}
  aside{position:fixed;top:0;left:0;bottom:0;width:260px;height:100vh;height:100dvh;z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow)}
  aside.open{transform:none}
  .mbackdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .mbackdrop.open{display:block}
  .navback{left:16px}   /* sem a coluna do menu, o ← Voltar vai para a borda */
}

.fx-tab summary::-webkit-details-marker{display:none}
.fx-tab details[open]>summary>span:first-child{transform:rotate(90deg);display:inline-block}

/* ── Programação Embarque · FICHA DE CARGA (03/10/2026, Enside: "as informações seguem as mesmas, faça um layout profissional").
   Cada célula é um recibo: rótulo à esquerda, valor à direita, dígitos alinhados. Cor só para estado. Escopo: .prog-tab ── */
.prog-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}   /* 03/10 v1045: sem congelar (o dono achou ruim) */
/* cabeçalho congelado (Enside, 03/10/2026): a tabela rola por dentro, na altura da tela, e o cabeçalho fica preso no topo */
.prog-tab{--p-ok:#4ADE80;--p-warn:#FBBF24;--p-out:#F87171;--p-info:#7DD3FC;--p-vio:#C4B5FD;--p-teal:#5EEAD4;
  border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;overflow:visible!important;font-size:12.5px}
.prog-tab thead th{background:var(--panel2);color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600;
  padding:10px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.prog-tab thead th.r{text-align:right}
.prog-tab tbody td{padding:14px;vertical-align:top;line-height:1.45;border-bottom:1px solid var(--line);background:var(--panel)}
.prog-tab tbody td + td{border-left:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.prog-tab tbody tr:hover td{background:color-mix(in srgb,var(--panel2) 70%,var(--panel))}
.prog-tab tbody td > * + *{margin-top:6px}
/* a carga: o único destaque da linha */
.prog-tab td.pc-carga{box-shadow:inset -1px 0 0 var(--line);min-width:120px}
.prog-tab .pnum{display:block;color:var(--ouro);font-weight:800;font-size:15px;letter-spacing:.01em;cursor:pointer;text-decoration:none}
.prog-tab .pnum:hover{text-decoration:underline;text-underline-offset:3px}
.prog-tab .pcli{font-weight:600;color:var(--txt);white-space:normal;overflow-wrap:break-word}
/* 03/11/2026 (Anderson: "preciso ler o nome do cliente completo"): o nome do cliente vai inteiro e quebra a linha — antes cortava em 22 letras e a cidade da Eucamad sumia */
td.pc-cli-pool{white-space:normal;min-width:170px;overflow-wrap:break-word}
.prog-tab .pmeta{color:var(--muted);font-size:11.5px}
.prog-tab .psem,.prog-tab .psem *{color:var(--muted)!important;font-size:11px!important;opacity:.85}
.prog-tab .pval{font-weight:700;color:var(--txt)}
.prog-tab .pbig{font-weight:800;font-size:14px}
.prog-tab .t-ok{color:var(--p-ok)}.prog-tab .t-out{color:var(--p-out)}.prog-tab .t-gold{color:var(--ouro2)}
/* recibo: rótulo · valor */
.prog-tab .pkv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12px;padding:1px 0}
.prog-tab .pkv + .pkv{margin-top:2px}
.prog-tab .pkv span{color:var(--muted)}
.prog-tab .pkv b{font-weight:600;color:var(--txt);white-space:nowrap}
.prog-tab .pkv-strong{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);padding-top:4px;margin-top:4px!important}
.prog-tab .pkv-strong b{font-weight:800}
.prog-tab .pkv-ok b{color:var(--p-ok)}.prog-tab .pkv-warn b{color:var(--p-warn)}.prog-tab .pkv-out b{color:var(--p-out)}.prog-tab .pkv-violet b{color:var(--p-vio)}
/* estado: pílulas e notas */
.prog-tab .ppl{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;vertical-align:middle}
.prog-tab .ppl-ok{color:var(--p-ok);background:color-mix(in srgb,var(--p-ok) 12%,transparent)}
.prog-tab .ppl-warn{color:var(--p-warn);background:color-mix(in srgb,var(--p-warn) 12%,transparent)}
.prog-tab .ppl-violet{color:var(--p-vio);background:color-mix(in srgb,var(--p-vio) 12%,transparent)}
.prog-tab .ppl-teal{color:var(--p-teal);background:color-mix(in srgb,var(--p-teal) 12%,transparent)}
.prog-tab .ppl-gold{color:var(--ouro2);background:color-mix(in srgb,var(--ouro2) 10%,transparent);font-weight:600}
.prog-tab .ppl-info{color:var(--p-info);background:color-mix(in srgb,var(--p-info) 10%,transparent);font-weight:600}
.prog-tab .pnote{font-size:11.5px;line-height:1.4;padding:5px 8px;border-radius:8px;border-left:3px solid currentColor;max-width:230px;white-space:normal}
.prog-tab .pnote-ok{color:var(--p-ok);background:color-mix(in srgb,var(--p-ok) 8%,transparent)}
.prog-tab .pnote-info{color:var(--p-info);background:color-mix(in srgb,var(--p-info) 8%,transparent)}
.prog-tab .pnote-warn{color:var(--p-warn);background:color-mix(in srgb,var(--p-warn) 8%,transparent)}
.prog-tab .pnote-violet{color:var(--p-vio);background:color-mix(in srgb,var(--p-vio) 8%,transparent)}
.prog-tab .pcond{font-size:11px;font-weight:600}
/* campos */
.prog-tab .prow{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.prog-tab .punit{color:var(--muted);font-size:11.5px;white-space:nowrap}
.prog-tab .pgrp{margin-top:8px!important;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--line) 90%,transparent)}
.prog-tab .plb{color:var(--muted);font-size:11.5px;margin-bottom:4px}
.prog-tab .pin{height:30px;box-sizing:border-box;border-radius:8px;border:1px solid color-mix(in srgb,var(--line) 75%,var(--muted));background:var(--bg);color:var(--txt);
  font:inherit;font-size:12.5px;padding:4px 8px;font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s;display:inline-block}
.prog-tab input.pin[type=number]{text-align:right}
.prog-tab .pin-n{width:70px}.prog-tab .pin-m{width:112px}.prog-tab .pin-d{width:142px}.prog-tab .pin-s{max-width:160px}.prog-tab .pin-w{width:100%;max-width:190px}
.prog-tab .pin-ro{display:inline-flex;align-items:center;justify-content:flex-end;background:transparent;border-style:dashed;color:var(--p-teal)}
.prog-tab .pin-d.pin-ro{justify-content:flex-start}
.prog-tab .pin-cad{color:var(--p-info)}
.prog-tab .pin-gold{color:var(--ouro2)}.prog-tab .pin-warn{color:var(--p-warn)}
.prog-tab .pin:hover{border-color:color-mix(in srgb,var(--ouro) 45%,var(--line))}
.prog-tab .pin:focus{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px color-mix(in srgb,var(--ouro) 22%,transparent)}
.prog-tab select{height:30px;border-radius:8px;background:var(--bg);color:var(--txt);border:1px solid color-mix(in srgb,var(--line) 75%,var(--muted));font-size:12px;padding:2px 6px}
/* ações */
.prog-tab .plink{display:inline-block;font-size:12px;font-weight:600;color:var(--p-info);cursor:pointer;text-decoration:none}
.prog-tab .plink:hover{text-decoration:underline;text-underline-offset:3px}
.prog-tab .plink-ok{color:var(--p-ok)}.prog-tab .plink-violet{color:var(--p-vio)}
.prog-tab a:focus-visible,.prog-tab .pin:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.prog-tab td.pc-x{text-align:center;width:44px}
.prog-tab .pbtn-x{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--p-out);border:1px solid color-mix(in srgb,var(--p-out) 40%,transparent);cursor:pointer;font-weight:700;text-decoration:none}
.prog-tab .pbtn-x:hover{background:color-mix(in srgb,var(--p-out) 14%,transparent)}
.prog-tab td.pc-x .plink{display:block;font-size:10.5px;margin-top:8px;white-space:nowrap}
/* larguras das colunas cheias */
.prog-tab td.pc-cli{min-width:170px}.prog-tab td.pc-frete{min-width:220px}.prog-tab td.pc-adi{min-width:215px}.prog-tab td.pc-sinal{min-width:205px}
.prog-tab td.pc-saldo{min-width:220px}.prog-tab td.pc-venda{min-width:160px}.prog-tab td.pc-ant{min-width:170px}.prog-tab td.pc-entra{min-width:190px}.prog-tab td.pc-prazo{min-width:120px}
.prog-tab td.pc-sobra .pnote{margin-left:auto;text-align:left}
/* total */
.prog-tab tbody tr:last-child td{background:var(--panel2)!important;border-top:2px solid color-mix(in srgb,var(--ouro) 60%,var(--line));font-weight:700}
@media (prefers-reduced-motion:reduce){.prog-tab .pin{transition:none}}
.prog-tab .pval,.prog-tab .pbig{white-space:nowrap}
.prog-tab td.pc-sinal{min-width:250px}
.prog-tab td.pc-sinal .prow,.prog-tab td.pc-saldo .prow{flex-wrap:wrap;row-gap:6px}

/* 🎨 03/10/2026 (Enside: "as cores ficaram muito fracas"): cores fortes. No escuro, mais vivas; no CLARO (o Safari do dono),
   tons escuros e saturados — o verde-claro sobre branco sumia. Rótulos com mais contraste, valores em negrito, estado em pílula sólida. */
.prog-tab{--p-ok:#22C55E;--p-warn:#F59E0B;--p-out:#EF4444;--p-info:#38BDF8;--p-vio:#A78BFA;--p-teal:#2DD4BF}
[data-theme="light"] .prog-tab{--p-ok:#15803D;--p-warn:#B45309;--p-out:#B91C1C;--p-info:#0369A1;--p-vio:#6D28D9;--p-teal:#0F766E}
[data-theme="light"] .prog-tab .pnum{color:#8A6100}
.prog-tab .pkv span,.prog-tab .pmeta,.prog-tab .punit,.prog-tab .plb{color:color-mix(in srgb,var(--txt) 72%,transparent)}
.prog-tab .pkv b{font-weight:700}
.prog-tab .pkv-strong b{font-weight:800;font-size:12.5px}
.prog-tab .ppl{color:#fff!important;border:0;font-weight:800;letter-spacing:.01em}
.prog-tab .ppl-ok{background:var(--p-ok)}.prog-tab .ppl-warn{background:var(--p-warn)}.prog-tab .ppl-violet{background:var(--p-vio)}
.prog-tab .ppl-teal{background:var(--p-teal)}.prog-tab .ppl-info{background:var(--p-info)}.prog-tab .ppl-gold{background:#B8860B}
.prog-tab .pnote{font-weight:600;background:color-mix(in srgb,currentColor 14%,transparent)!important}
.prog-tab .pbig{font-size:15px}
.prog-tab .plink{font-weight:700}
[data-theme="light"] .prog-tab .pin,[data-theme="light"] .prog-tab select{border-color:#94A3B8}
.prog-tab .pval,.prog-tab .pbig{white-space:nowrap}
.prog-tab td.pc-sinal{min-width:250px}
.prog-tab td.pc-sinal .prow,.prog-tab td.pc-saldo .prow{flex-wrap:wrap;row-gap:6px}
.prog-tab td.pc-com{min-width:200px;text-align:left}.prog-tab td.pc-com .pbig{text-align:right}

/* 📱 05/10/2026 (dono: "no celular, na Programação Embarque, o fluxo não mostra as colunas da direita até o Caixa acumulado").
   A 1ª coluna (Período e lançamento) tem ~800 px e era FIXA à esquerda: no celular ela cobria a tela inteira e Sai / Entra /
   No período / Caixa acumulado nunca apareciam. No celular ela deixa de ser fixa — rolando para o lado, as colunas aparecem.
   (Quebrar a linha da 1ª coluna foi testado e deformava os cartões — "Fr et es", "R $ 1 9" — não usar.)
   📱 04/11/2026 (Anderson, print do celular: "a coluna congelada está muito larga, tomando toda a tela, e o restante praticamente não aparece"):
   a regra valia só até 760 px e o celular dele informa largura maior (tela de toque) — a 1ª coluna seguia fixa e cobria 📤 Sai e 📥 Entra.
   Agora vale como as outras regras do celular: até 880 px, ou qualquer tela de toque até 1200 px. No computador (mouse) segue fixa. */
@media (max-width: 880px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  .fx-tab th:first-child, .fx-tab td:first-child,
  .fx-tab thead th:first-child, .fx-tab tbody td:first-child, .fx-tab tbody tr:last-child td:first-child { left: auto !important; box-shadow: none !important; }   /* 04/11: sem prender à esquerda; o cabeçalho e a linha do TOTAL seguem presos em cima/embaixo como as outras colunas */
  .fx-caixa { -webkit-overflow-scrolling: touch; overflow-x: auto; }
}

/* 📑 Relatórios → Programação por cliente (18/10/2026): unidade e medida ficam fixas ao rolar a grade de dias no celular (colunas curtas, não cobrem a tela) */
.rel-grade .fx1,.rel-grade .fx2{position:sticky;background:var(--panel);z-index:2}
.rel-grade .fx1{left:0;min-width:92px;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.rel-grade .fx2{left:92px}
.rel-grade thead .fx1,.rel-grade thead .fx2{z-index:3}