/* Os nomes legados abaixo agora APONTAM para os tokens da marca (brascamp-ui.css)
   — fonte única da verdade. Fallback em hex caso o brascamp-ui não carregue.
   Assim as páginas legadas herdam exatamente a paleta/raio/sombra da marca. */
:root{
  --preto:#040404; --verde:#87c85d; --azul-claro:#1393d3;
  --azul-logo:#0c63a4; --azul-escuro:#2264ac;
  --cinza-bg:var(--bg,#f4f6f9); --cinza-borda:var(--borda,#e3e8ef); --cinza-txt:var(--ink-2,#5a6a7d);
  --vermelho:var(--erro,#e5484d); --amarelo:var(--alerta,#f5a623); --branco:#fff;
  --sombra:0 1px 3px rgba(16,32,58,.08),0 1px 2px rgba(16,32,58,.06);
  --sombra-md:0 4px 16px rgba(16,32,58,.12);
  --radius:12px;
}
*{box-sizing:border-box}
/* A fonte da marca e' CAIRO. Esta linha declarava a pilha do sistema e so nao
   aparecia porque `brascamp-ui.css` carrega DEPOIS e sobrescreve — ou seja, o
   dia em que aquele arquivo falhasse, o portal inteiro cairia para a fonte do
   sistema sem ninguem entender por que. Variavel resolve na hora de computar,
   nao na ordem dos arquivos: `--fonte` vem do brascamp-ui e vale aqui tambem.
   O literal ao lado e' a rede para o caso de a variavel nao existir. */
body{
  margin:0;font-family:var(--fonte,'Cairo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  background:var(--cinza-bg);color:#1a2533;font-size:13.5px;line-height:1.45;
}
button{font-family:inherit;cursor:pointer}
a{color:var(--azul-logo);text-decoration:none}

/* ---------- HEADER ---------- */
header{
  background:linear-gradient(100deg,var(--azul-escuro),var(--azul-logo) 55%,var(--azul-claro));
  color:#fff;padding:16px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  box-shadow:var(--sombra-md);position:sticky;top:0;z-index:50;
}
header .logo{height:40px;width:auto;background:#fff;padding:6px 12px;border-radius:9px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);flex-shrink:0}
header .marca{display:flex;flex-direction:column;line-height:1.15}
header .marca .titulo{font-size:21px;font-weight:700;letter-spacing:.2px}
header .marca .sub{font-size:12.5px;opacity:.85}
header .base-info{font-size:11px;opacity:.9;margin-left:auto;text-align:right;line-height:1.5}
header .acoes{display:flex;gap:8px;margin-left:auto}
header .usuario{order:9}
header .acoes button{
  background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);
  padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;transition:.15s;
}
header .acoes button:hover{background:rgba(255,255,255,.28)}

.container{max-width:1280px;margin:0 auto;padding:22px 24px 60px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:8px}
.kpi{background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--sombra);
  border-left:4px solid var(--azul-logo);min-width:0}
.kpi.alerta{border-left-color:var(--vermelho)}
.kpi.ok{border-left-color:var(--verde)}
.kpi .rot{font-size:11px;color:var(--cinza-txt);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.kpi .val{font-size:21px;font-weight:700;margin-top:3px;color:var(--preto);
  font-variant-numeric:tabular-nums;letter-spacing:-.4px;white-space:nowrap}
.kpi .desc{font-size:11px;color:var(--cinza-txt);margin-top:2px}

/* ---------- CARDS / GRID ---------- */
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);padding:18px 20px;margin-top:16px}
.card h2{font-size:15px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.card h2 .cnt{background:var(--cinza-bg);color:var(--cinza-txt);font-size:12.5px;font-weight:600;
  padding:2px 9px;border-radius:20px}

/* ---------- AGING BARS ---------- */
.aging-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.aging-row .lab{width:82px;font-size:12.5px;font-weight:600;color:#33465c;flex-shrink:0}
.aging-row .barwrap{flex:1;background:var(--cinza-bg);border-radius:6px;height:22px;overflow:hidden;position:relative}
.aging-row .bar{height:100%;border-radius:6px;transition:width .4s}
.aging-row .vals{width:150px;text-align:right;font-size:12.5px;flex-shrink:0}
.aging-row .vals b{color:var(--preto)}
.aging-row .vals span{color:var(--cinza-txt)}

/* ---------- TABELAS ---------- */
.tabela-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;padding:9px 10px;border-bottom:2px solid var(--cinza-borda);
  font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--cinza-txt);
  position:sticky;top:0;background:#fff;cursor:pointer;user-select:none;white-space:nowrap}
th:hover{color:var(--azul-logo)}
td{padding:9px 10px;border-bottom:1px solid var(--cinza-borda);vertical-align:middle}
tbody tr{transition:.1s}
tbody tr:hover{background:#f7fafd;cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.center,th.center{text-align:center}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.b-verde{background:#e7f6dd;color:#3f7d1e}
.b-azul{background:#e2f1fb;color:var(--azul-logo)}
.b-amarelo{background:#fdf1dc;color:#b7791f}
.b-vermelho{background:#fbe3e4;color:#b42318}
.b-cinza{background:#eef1f5;color:#5a6a7d}
.b-roxo{background:#eae6fb;color:#6941c6}

.chip-atraso{font-weight:700}
.pt-alerta{color:var(--vermelho);font-weight:700}

.tag-semcontato{background:#fbe3e4;color:#b42318;font-weight:600;font-size:11px;
  padding:1px 7px;border-radius:5px}

/* filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros input,.filtros select{padding:8px 11px;border:1px solid var(--cinza-borda);
  border-radius:8px;font-size:13.5px;background:#fff}
.filtros input[type=search]{min-width:230px}
.filtros .sep{flex:1}

/* ---------- MODAL / DETALHE ---------- */
.overlay{position:fixed;inset:0;background:rgba(16,32,58,.45);display:none;z-index:100;
  backdrop-filter:blur(2px)}
.overlay.on{display:block}
.painel{position:fixed;top:0;right:0;height:100%;width:min(760px,100%);background:var(--cinza-bg);
  box-shadow:-8px 0 30px rgba(16,32,58,.25);z-index:101;transform:translateX(100%);
  transition:transform .28s ease;overflow-y:auto;display:flex;flex-direction:column}
.painel.on{transform:translateX(0)}
.painel .ph{background:linear-gradient(100deg,var(--azul-logo),var(--azul-claro));color:#fff;
  padding:20px 24px;position:sticky;top:0;z-index:2}
.painel .ph .fechar{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.2);
  border:none;color:#fff;width:32px;height:32px;border-radius:8px;font-size:17px;line-height:1}
/* O nome do cliente nascia AZUL-ESCURO sobre a faixa azul — quase ilegível.
   `.painel .ph` já pinta tudo de branco, mas cor herdada perde para regra
   direta no elemento: `brascamp-ui.css` tem `h1,h2,h3,h4{color:var(--ink)}`,
   e ela ganha sem precisar de especificidade nenhuma. Por isso o branco tem
   de ser dito aqui, no próprio h2. (Joel, 01/09/2026) */
.painel .ph h2{margin:0 0 4px;font-size:21px;padding-right:40px;color:#fff}
.painel .ph .meta{font-size:12.5px;opacity:.9}
.painel .pbody{padding:20px 24px;flex:1}
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin-bottom:8px}
.mini-kpi{background:#fff;border-radius:10px;padding:11px 12px;box-shadow:var(--sombra);min-width:0}
.mini-kpi .rot{font-size:11px;color:var(--cinza-txt);text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-kpi .val{font-size:15px;font-weight:700;color:var(--preto);font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}

/* form de lancamento */
.form-lanc{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--sombra);margin-top:16px}
.form-lanc h3{margin:0 0 14px;font-size:13.5px}
.tipo-tabs{display:flex;gap:6px;margin-bottom:14px;background:var(--cinza-bg);padding:4px;border-radius:9px}
.tipo-tabs button{flex:1;border:none;background:transparent;padding:8px;border-radius:6px;font-weight:600;
  font-size:13.5px;color:var(--cinza-txt)}
.tipo-tabs button.on{background:#fff;color:var(--azul-logo);box-shadow:var(--sombra)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fld{display:flex;flex-direction:column;gap:4px}
.fld.full{grid-column:1/-1}
.fld label{font-size:11px;font-weight:600;color:#33465c}
.fld input,.fld select,.fld textarea{padding:9px 11px;border:1px solid var(--cinza-borda);
  border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;width:100%}
.fld textarea{resize:vertical;min-height:64px}
.btn-primario{background:var(--azul-logo);color:#fff;border:none;padding:11px 20px;border-radius:9px;
  font-weight:700;font-size:13.5px;transition:.15s}
.btn-primario:hover{background:var(--azul-escuro)}
.btn-sec{background:#fff;color:var(--azul-logo);border:1px solid var(--cinza-borda);
  padding:8px 14px;border-radius:8px;font-weight:600;font-size:12.5px}
.btn-pdf{background:var(--verde);color:#123a05;border:none;padding:8px 15px;border-radius:8px;
  font-weight:700;font-size:12.5px;transition:.15s}
.btn-pdf:hover{filter:brightness(.95)}
.det-acoes{display:flex;gap:10px;margin-top:16px}
.det-acoes .btn-pdf{font-size:13.5px;padding:11px 18px;width:100%;justify-content:center}
.btn-mini{background:none;border:none;color:var(--cinza-txt);font-size:12.5px;padding:3px 6px}
.btn-mini:hover{color:var(--vermelho)}

/* timeline de lancamentos */
.timeline{margin-top:20px}
.tl-item{background:#fff;border-radius:10px;padding:13px 15px;box-shadow:var(--sombra);margin-bottom:10px;
  border-left:4px solid var(--azul-claro);position:relative}
.tl-item.t-COMPROMISSO{border-left-color:var(--amarelo)}
.tl-item.t-NEGOCIACAO{border-left-color:var(--verde)}
.tl-item .tl-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.tl-item .tl-data{font-size:12.5px;color:var(--cinza-txt);font-weight:600}
.tl-item .tl-desc{font-size:13.5px;color:#1a2533;white-space:pre-wrap}
.tl-item .tl-extra{font-size:12.5px;color:var(--cinza-txt);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.tl-item .tl-extra b{color:#1a2533}
.tl-item .tl-acoes{position:absolute;top:11px;right:12px}
.vazio{text-align:center;color:var(--cinza-txt);padding:26px;font-size:13.5px}

/* toast */
/* z-index acima de .modal-bg (300), .fab-confirma (400) e .login-bg (1000):
   com 200 o aviso era desenhado ATRAS do modal e ninguem via. Ver a mesma
   correcao e o motivo completo em brascamp-ui.css. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--preto);color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:1200;box-shadow:var(--sombra-md)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.erro{background:var(--vermelho)}

.loading{text-align:center;padding:60px;color:var(--cinza-txt)}
.spinner{width:34px;height:34px;border:3px solid var(--cinza-borda);border-top-color:var(--azul-logo);
  border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}

.pill-nav{display:flex;gap:6px;margin:18px 0 4px}
.pill-nav button{background:#fff;border:1px solid var(--cinza-borda);padding:8px 16px;border-radius:20px;
  font-weight:600;font-size:13.5px;color:var(--cinza-txt)}
.pill-nav button.on{background:var(--azul-logo);color:#fff;border-color:var(--azul-logo)}

/* ---------- LOGIN + estados: agora vêm de brascamp-ui.css ---------- */
.app-oculto{display:none}

/* ==================== PORTAL (shell) ==================== */
/* Sidebar, nav, main, topbar, drawer e responsivo agora vêm de brascamp-ui.css. */
/* topo travado das páginas nativas (cobranças, projeções, apontamento, análise):
   nome + botões grudam abaixo da topbar; o resto rola por baixo. */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:var(--topbar-h);z-index:20;background:var(--bg);padding:6px 0 10px;margin-bottom:10px;
  border-bottom:1px solid var(--borda)}
.page-title{font-size:21px;font-weight:800;color:var(--preto);margin:0}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
/* ---------------------------------------------------------------------------
   BOTÃO DA BARRA DO TÍTULO — só para quem NÃO declarou a família .btn
   (01/09/2026)

   A regra era `.page-actions button` (especificidade 0,1,1) e VENCIA
   `.btn-primario` / `.btn-sec` (0,1,0). Quem escrevia `class="btn btn-primario"`
   na barra do título recebia um botão BRANCO, e nada avisava. Medido no
   navegador: os quatro casos — `btn btn-primario`, `btn-primario`, `btn btn-sec`
   e sem classe — saíam idênticos (fundo #fff, raio 9px, peso 600, com sombra).
   O MESMO botão fora da `.page-actions` saía azul cheio, raio 8px, peso 700.
   Por isso a ação primária de ~20 telas (Nova regra, Novo papel, Nova invoice,
   Novo processo, Nova remessa…) nunca foi azul.

   `:not(.btn):not(.chip)` devolve o comando à família `.btn` sem deixar nenhum
   botão órfão: quem ficou sem classe continua com a aparência de sempre.
   Mesma ideia do `:not([class])` dos campos dentro de tabela — só que por
   CLASSE, porque `class=""` (interpolação que resulta em vazio, como nos
   toggles do Comex) tem o atributo presente e escaparia do `[class]`.
   --------------------------------------------------------------------------- */
.page-actions button:not(.btn):not(.chip){background:#fff;color:var(--azul-logo);border:1px solid var(--cinza-borda);
  padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:var(--sombra)}
.page-actions button:not(.btn):not(.chip):hover{background:#f2f7fc}

/* Campo de AÇÃO na barra do título (muda o registro, não filtra a lista — ex.:
   o seletor de situação da ocorrência e da amostra). Filtro de verdade não mora
   aqui: vai para `.filtro-bar`, com rótulo. Sem estas duas linhas o controle
   saía com o desenho do sistema operacional ao lado de um botão do portal —
   foi o "filtro superior fora do padrão" apontado em 01/09/2026. */
.page-actions select,.page-actions input{height:36px;padding:0 12px;border:1px solid var(--borda-forte);
  border-radius:var(--r-sm,8px);background:#fff;font-size:13.5px;font-weight:600;font-family:var(--fonte);
  color:var(--ink);box-shadow:var(--sombra);cursor:pointer}
.page-actions select{padding-right:28px}
.page-actions select:focus,.page-actions input:focus{outline:none;border-color:var(--azul-logo)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(16,32,58,.45);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal-bg.on{display:flex}
.modal{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);width:100%;max-width:400px;padding:24px}
.modal h3{margin:0 0 16px;font-size:17px}
.modal .fld{margin-bottom:12px}
.modal-acoes{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}

/* ---------- página de painel embutido (Financeiro, Comercial, …) ---------- */
.painel-pagina{display:block}
/* TOPO TRAVADO: nome da página + botões + "Atualizado em" ficam sempre visíveis
   (grudam logo abaixo da topbar); só o painel abaixo rola. */
.painel-topo{position:sticky;top:var(--topbar-h);z-index:20;background:var(--bg);
  padding:2px 0 8px;border-bottom:1px solid var(--borda)}
/* nos painéis embutidos quem trava é o .painel-topo — o page-head fica normal */
.painel-topo .page-head{position:static;background:none;border:none;padding:0;margin-bottom:4px}
.painel-meta{font-size:12.5px;color:var(--ink-2);margin:0}
.painel-frame-wrap{background:transparent;overflow:visible;margin-top:10px}  /* gap enxuto até o painel */
.painel-frame{width:100%;border:none;display:block;background:transparent;min-height:520px}

/* toggle de empresa (Projeções) */
.emp-toggle{display:inline-flex;gap:2px;background:var(--cinza-bg);padding:3px;border-radius:9px;border:1px solid var(--cinza-borda)}
.emp-toggle button{border:none;background:transparent;padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--cinza-txt);cursor:pointer}
.emp-toggle button.on{background:#fff;color:var(--azul-logo);box-shadow:var(--sombra)}
.btn-atalho{background:var(--verde)!important;color:#123a05!important;border:none!important;font-weight:700!important}

/* ---------------------------------------------------------------------
   SELETOR DE EMPRESA (25/08/2026)
   Só é exibido para quem enxerga Brascamp E Confio. A escolha vale para o
   portal inteiro e sobrevive ao recarregar — trocar de empresa a cada tela
   seria pedir para alguém olhar o número de uma empresa achando que é da
   outra.
   --------------------------------------------------------------------- */
.emp-sel { display: flex; gap: 4px; margin: 8px 0 4px; }
.emp-sel button {
  flex: 1; padding: 5px 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line, #dbe2ea); background: transparent;
  color: var(--cinza-txt, #667); border-radius: 6px; cursor: pointer;
  white-space: nowrap;
}
.emp-sel button:hover { background: var(--hover-bg, #eef2f7); }
.emp-sel button.on {
  background: var(--brand, #0c63a4); border-color: var(--brand, #0c63a4); color: #fff;
}
.emp-sel button.on.confio { background: #e8730c; border-color: #e8730c; }