/* Central · padrão herdado do Financeiro da Mitra (docs/PADRAO-MITRA.md) */
:root {
  --color-primary: #0b6bcb; --color-primary-hover: #0a5aab; --color-primary-light: #5aa5ea; --color-primary-bg: #eaf3fc;
  --color-bg: #f5f7fa; --color-surface: #ffffff; --color-nav: #ffffff; --color-nav-text: #475467; --color-nav-active: #0b6bcb; --color-nav-hover: #f2f5f9;
  --color-border: #e4e8ee; --color-text: #101828; --color-text-secondary: #667085;
  --color-receita: #0e9f6e; --color-despesa: #d92d20; --color-saldo-pos: #0e9f6e; --color-saldo-neg: #d92d20; --color-pendente: #dc8a05;
  --kpi-verde: #e7f6ef; --kpi-azul: #eaf3fc; --kpi-ciano: #e6f6fb; --kpi-ambar: #fdf3e1; --kpi-roxo: #f0ecfc; --kpi-vermelho: #fdeceb;
  --radius: 12px; --sombra: 0 1px 2px rgba(16,24,40,.05);
  --sidebar: 248px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--color-primary); text-decoration: none; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 0; color: var(--color-text); }
.num { font-variant-numeric: tabular-nums; }
.sec { color: var(--color-text-secondary); font-size: 13px; }
.neg { color: var(--color-despesa); } .pos { color: var(--color-receita); }

/* ---- shell ---- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar { background: var(--color-nav); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; }
.sidebar .marca .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-weight: 700; }
.sidebar .marca b { display: block; font-size: 14px; } .sidebar .marca span { display: block; font-size: 12px; color: var(--color-text-secondary); }
.sidebar nav { flex: 1; padding: 4px 8px; }
.sidebar .secao { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--color-text-secondary); padding: 14px 8px 4px; text-transform: uppercase; }
.sidebar a.item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--color-nav-text); font-size: 14px; }
.sidebar a.item:hover { background: var(--color-nav-hover); }
.sidebar a.item.ativo { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
.sidebar a.item svg { width: 18px; height: 18px; flex: none; }
.sidebar .rodape { border-top: 1px solid var(--color-border); padding: 12px 16px; font-size: 12px; color: var(--color-text-secondary); }
.sidebar .rodape b { display: block; color: var(--color-text); font-size: 13px; font-weight: 500; }
.sidebar .rodape button { margin-top: 6px; }
.topo-mobile { display: none; }
main.conteudo { padding: 28px 32px 48px; max-width: 1320px; width: 100%; min-width: 0; }
.app > * { min-width: 0; }

/* cabeçalho de tela */
.tela-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tela-cab p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 13px; max-width: 900px; }
.tela-cab .acoes { display: flex; gap: 8px; align-items: center; }

/* ---- componentes ---- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--sombra); padding: 20px; }
.card.compacto { padding: 14px 16px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--color-primary-hover); } .btn[disabled] { opacity: .55; cursor: default; }
.btn.sec { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn.sec:hover { background: var(--color-nav-hover); }
.btn.link { background: none; border: 0; color: var(--color-primary); padding: 0; font-weight: 500; }
.btn.pequeno { padding: 5px 10px; font-size: 13px; }
input.campo, select.campo { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; }
input.campo:focus, select.campo:focus { outline: 2px solid var(--color-primary-bg); border-color: var(--color-primary-light); }
label.rotulo { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.busca { position: relative; } .busca svg { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--color-text-secondary); } .busca input { padding-left: 32px; }

/* chips de empresa */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chips .rot { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--color-text-secondary); margin-right: 4px; display: inline-flex; align-items: center; gap: 4px; }
.chip { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: var(--color-text); }
.chip.ativo { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chips .inclui { width: 100%; font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

/* interruptores */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch input { display: none; }
.switch i { width: 34px; height: 20px; border-radius: 999px; background: #d0d5dd; position: relative; transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--color-primary); } .switch input:checked + i::after { left: 16px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.kpi { display: flex; gap: 12px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; text-align: left; cursor: pointer; box-shadow: var(--sombra); text-decoration: none; color: inherit; }
.kpi:hover { border-color: var(--color-primary-light); }
.kpi .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--color-text); }
.kpi .ico svg { width: 18px; height: 18px; }
.kpi .ico.verde { background: var(--kpi-verde); color: var(--color-receita); } .kpi .ico.azul { background: var(--kpi-azul); color: var(--color-primary); }
.kpi .ico.ciano { background: var(--kpi-ciano); color: #0b7aa3; } .kpi .ico.ambar { background: var(--kpi-ambar); color: var(--color-pendente); }
.kpi .ico.roxo { background: var(--kpi-roxo); color: #6938ef; } .kpi .ico.vermelho { background: var(--kpi-vermelho); color: var(--color-despesa); }
.kpi .rot { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.kpi .val { font-size: 20px; font-weight: 600; margin: 2px 0; letter-spacing: -.01em; }
.kpi .leg { font-size: 12px; color: var(--color-text-secondary); }
.kpi .val.neg { color: var(--color-despesa); } .kpi .val.pos { color: var(--color-receita); } .kpi .val.ambar { color: var(--color-pendente); }

/* abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 14px; overflow-x: auto; }
.aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--color-text-secondary); white-space: nowrap; font-size: 13px; margin-bottom: -1px; }
.aba.ativa { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }
.aba .cont { display: inline-block; margin-left: 6px; background: var(--color-nav-hover); border-radius: 999px; padding: 0 7px; font-size: 11px; color: var(--color-text-secondary); }
.aba.ativa .cont { background: var(--color-primary-bg); color: var(--color-primary); }

/* tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--color-border); background: #fafbfc; white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tabela tr.clicavel { cursor: pointer; } .tabela tr.clicavel:hover td { background: #fafbfc; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .sub { display: block; font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; }
.tabela-caixa { overflow-x: auto; }
.rodape-tabela { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; font-size: 13px; color: var(--color-text-secondary); flex-wrap: wrap; }

/* badges */
.badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--color-nav-hover); color: var(--color-text-secondary); white-space: nowrap; }
.badge.vermelho { background: var(--kpi-vermelho); color: var(--color-despesa); } .badge.verde { background: var(--kpi-verde); color: var(--color-receita); }
.badge.azul { background: var(--kpi-azul); color: var(--color-primary); } .badge.ambar { background: var(--kpi-ambar); color: var(--color-pendente); }

/* listas do dia */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lista-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.lista-item:hover { background: #fafbfc; } .lista-item:last-child { border-bottom: 0; }
.lista-item b { font-weight: 500; font-size: 13px; } .lista-item .sub { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 2px; }

/* drawer */
.drawer-fundo { position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 520px; max-width: 100vw; background: var(--color-surface); box-shadow: -8px 0 30px rgba(16,24,40,.15); z-index: 31; display: flex; flex-direction: column; animation: entra .18s ease-out; }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .cab { padding: 18px 20px 12px; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.drawer .corpo { padding: 16px 20px 32px; overflow-y: auto; flex: 1; }
.drawer .fechar { background: none; border: 0; cursor: pointer; color: var(--color-text-secondary); font-size: 18px; line-height: 1; }
.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ficha .it { border-bottom: 1px solid var(--color-border); padding: 6px 0; } .ficha .it span { display: block; font-size: 11px; color: var(--color-text-secondary); } .ficha .it b { font-weight: 500; word-break: break-word; }
.drawer h3 { margin: 18px 0 8px; }
.mini { font-size: 12.5px; }

/* estados */
.vazio { text-align: center; color: var(--color-text-secondary); padding: 36px 12px; }
.vazio svg { width: 34px; height: 34px; color: #98a2b3; margin-bottom: 8px; }
.skeleton { background: linear-gradient(90deg, #f2f4f7 25%, #e9ecf1 37%, #f2f4f7 63%); background-size: 400% 100%; animation: sk 1.2s infinite; border-radius: 8px; min-height: 18px; }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.erro { background: var(--kpi-vermelho); color: var(--color-despesa); padding: 10px 12px; border-radius: 8px; margin: 8px 0; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.aviso { background: var(--kpi-ambar); color: #7a4b00; padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: 13px; }
.ok { background: var(--kpi-verde); color: var(--color-receita); padding: 10px 12px; border-radius: 8px; margin: 8px 0; }

/* cartões "Suas telas" / projetos */
.telas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tela-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px; background: var(--color-surface); color: inherit; }
.tela-card:hover { border-color: var(--color-primary-light); }
.tela-card .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--color-primary-bg); color: var(--color-primary); display: grid; place-items: center; flex: none; } .tela-card .ico svg { width: 16px; height: 16px; }
.tela-card b { display: block; font-weight: 600; font-size: 14px; } .tela-card span { font-size: 12.5px; color: var(--color-text-secondary); }
.tela-card .seta { margin-left: auto; color: #98a2b3; }
.tela-card.inativo { opacity: .7; }

/* login */
.login-fundo { min-height: 100vh; display: grid; place-items: center; background: var(--color-bg); padding: 16px; }
.login { width: 100%; max-width: 380px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar); transform: translateX(-100%); transition: transform .18s; z-index: 40; }
  .sidebar.aberta { transform: none; }
  .topo-mobile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
  .topo-mobile button { background: none; border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
  main.conteudo { padding: 16px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .kpi .val { font-size: 18px; }
}
.btn svg { width: 16px; height: 16px; }
.topo-mobile button svg { width: 20px; height: 20px; display: block; }

.seta { width: 14px; height: 14px; vertical-align: -2px; color: var(--color-text-secondary); transition: transform .15s; }
tr.total-dre td { border-top: 2px solid var(--color-border); }

/* Histórico de mudanças (foto da Central) */
.evento { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; margin: 8px 0; background: #fff; }
.evento-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.evento .tabela.mini td { padding: 4px 6px; }
.evento .tabela.mini.texto td:first-child { white-space: nowrap; } .evento .tabela.mini.texto td.num { text-align: left; white-space: normal; word-break: break-word; }

/* DRE gerencial e planejamento */
.dg-caixa { overflow: auto; max-height: 72vh; }
.tabela.dg { font-size: 12.5px; min-width: 1100px; }
.tabela.dg th { position: sticky; top: 0; background: var(--color-bg-card, #fff); z-index: 2; }
.tabela.dg td, .tabela.dg th { padding: 6px 8px; white-space: nowrap; }
.tabela.dg .dg-rot { position: sticky; left: 0; background: var(--color-bg-card, #fff); z-index: 1; min-width: 260px; }
.tabela.dg th.dg-rot { z-index: 3; }
.tabela.dg tr.dg-total td { background: #f3f6fb; font-weight: 600; border-top: 1px solid var(--color-border); }
.tabela.dg tr.dg-total td.dg-rot { background: #f3f6fb; }
.tabela.dg tr.dg-pct td { color: var(--color-text-secondary); font-size: 11.5px; border-bottom: none; padding-top: 0; }
.tabela.dg td.nivel-1 { padding-left: 22px; }
.tabela.dg td.nivel-2 { padding-left: 22px; font-style: italic; }
.tabela.dg td.clicavel { cursor: pointer; text-decoration: underline dotted var(--color-border); text-underline-offset: 3px; }
.tabela.dg td.clicavel:hover { color: var(--color-primary); }
.tabela.dg .pos { color: var(--color-receita, #15803d); }
.pl-input { width: 92px; text-align: right; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; font: inherit; font-variant-numeric: tabular-nums; background: transparent; }
.pl-input:hover { border-color: var(--color-border); } .pl-input:focus { outline: 2px solid var(--color-primary-bg); border-color: var(--color-primary-light); background: #fff; }

/* Campo de senha com olho */
.senha-caixa { position: relative; }
.senha-caixa .campo { padding-right: 40px; }
.senha-caixa .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--color-text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
.senha-caixa .olho:hover { color: var(--color-primary); background: var(--color-primary-bg); }
.senha-caixa .olho svg { width: 18px; height: 18px; }
.rodape .nome-conta { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; }
.rodape .nome-conta:hover { color: var(--color-primary); text-decoration: underline; }

/* Crédito: categorias e badges extras */
.badge.cinza { background: #eef0f3; color: #4b5563; }
.badge.roxo { background: #efe9ff; color: #6938ef; }
.badge.cat-bronze { background: #f3e3d3; color: #8a4b1a; } .badge.cat-prata { background: #e9ecef; color: #4b5563; } .badge.cat-ouro { background: #fdf0c2; color: #8a6a00; }
.badge.cat-platina { background: #e3ecf5; color: #2a4d7a; } .badge.cat-safira { background: #dde8ff; color: #1e3fa8; } .badge.cat-diamante { background: #e6f7ff; color: #0b6bcb; }
.kpi .val[style] { line-height: 1.2; }

/* Gaveta larga (duas colunas) e tabelas de contas sem rolagem lateral */
.drawer.largo { width: 1040px; }
.drawer .duas-colunas-gaveta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .drawer.largo { width: 100vw; } .drawer .duas-colunas-gaveta { grid-template-columns: 1fr; } }
.contas-grade { display: grid; gap: 10px; }
.conta-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px 14px; align-items: center; }
.conta-card.clicavel { cursor: pointer; } .conta-card.clicavel:hover { background: #fafbfc; }
.conta-card.selecionada { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-bg); }
.conta-card .rot { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.conta-card .val { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 700px) { .conta-card { grid-template-columns: 1fr 1fr; } }

/* Funil de vendas (Comercial) */
.funil-etapa { margin: 12px 0; }
.funil-rot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.funil-barra { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #f2f4f7; min-width: 40px; transition: width .3s; }
.funil-barra .ok { background: var(--color-primary); } .funil-barra .ok.roxo { background: #6938ef; } .funil-barra .ok.verde { background: var(--color-receita); }
.funil-barra .parado { background: #f6c161; } .funil-barra .enc { background: #d0d5dd; }
.funil-leg { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.tabela tr.ativa td { background: var(--color-primary-bg); }
.tabela th .sub { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
#fu-filtros svg { width: 16px; height: 16px; vertical-align: -3px; }
#fu-lista .abas { flex-wrap: wrap; }

/* Compras: cotações */
.linha-tempo { position: relative; padding-left: 18px; margin: 6px 0; }
.linha-tempo::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.lt-item { position: relative; padding: 4px 0 10px; font-size: 13px; }
.lt-item::before { content: ""; position: absolute; left: -17px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); }
.lt-item .sec { display: block; font-size: 12px; }
.anexos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.anexo { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: #f2f4f7; display: grid; place-items: center; }
.anexo img, .anexo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo .apagar { position: absolute; top: 3px; right: 3px; background: rgba(16,24,40,.7); color: #fff; border: 0; border-radius: 6px; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; }
.anexo .apagar svg { width: 13px; height: 13px; }
.anexo .tipo { position: absolute; left: 4px; bottom: 4px; font-size: 10px; background: rgba(16,24,40,.7); color: #fff; padding: 1px 6px; border-radius: 999px; }
.precos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.preco { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; }
.preco .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); font-weight: 600; }
.preco .val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0; }
.preco.escolhida { border-color: var(--color-primary); background: var(--color-primary-bg); }
.forn-regiao { border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.forn-regiao h4 { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.forn-linha { display: grid; grid-template-columns: 22px 1.6fr 1fr 1fr 1fr 1fr; gap: 6px; align-items: center; margin: 4px 0; }
.forn-linha input.campo { padding: 6px 8px; font-size: 13px; }
.forn-linha .pv { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; font-weight: 600; white-space: nowrap; }
.forn-cab { font-size: 11px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.forn-cab .pv { font-weight: 600; }
@media (max-width: 700px) { .forn-linha { grid-template-columns: 22px 1fr 1fr; } .forn-cab { display: none; } }
.segmento { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.segmento button { border: 0; background: #fff; padding: 7px 12px; cursor: pointer; font: inherit; color: var(--color-text); }
.segmento button.ativo { background: var(--color-primary); color: #fff; }
.campo-busca-prod { position: relative; }
.lista-prod { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16,24,40,.12); z-index: 5; max-height: 260px; overflow: auto; }
.lista-prod button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; cursor: pointer; font: inherit; border-bottom: 1px solid var(--color-border); }
.lista-prod button:hover { background: var(--color-nav-hover); }
.lista-prod .sub { display: block; font-size: 11.5px; color: var(--color-text-secondary); }
.grade-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
@media (max-width: 600px) { .grade-campos { grid-template-columns: 1fr; } }
textarea.campo { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; font: inherit; }
textarea.campo:focus { outline: 2px solid var(--color-primary-bg); border-color: var(--color-primary-light); }
.urgente { color: var(--color-despesa); font-weight: 600; }

/* Modo offline: barra de rede no topo e itens aguardando envio */
.barra-rede { display: none; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; background: var(--kpi-ambar); color: var(--color-pendente); border-bottom: 1px solid #f3dfb3; position: sticky; top: 0; z-index: 25; }
.barra-rede.visivel { display: flex; }
.barra-rede.ok { background: var(--kpi-verde); color: var(--color-receita); border-color: #cdebdc; }
.barra-rede b { font-weight: 600; }
.barra-rede .btn { margin-left: auto; }
tr.pendente-envio td { background: #fffaf0; }
.dados-cache { font-size: 12px; color: var(--color-pendente); margin: 0 0 10px; }