/* =====================================================================
   Design system — Assistente de Lançamentos · "Editorial Liberdade Médica"
   Visual claro, editorial e flat (cantos quadrados) sobre papel quente.
   Fundo verde-acinzentado + superfícies creme; acento vermelho da marca
   (#e22d36) com indicadores verde (pronto) / âmbar (preencher).
   Tipografia: Archivo (títulos/números) + IBM Plex Sans (corpo).
   Importado do design "Sistema Liberdade Médica.dc.html" (2026-07-17).
   Mantém EXATAMENTE os nomes de classe que o JS de index.html gera.
   ===================================================================== */

:root {
  /* ----- superfícies / papel ----- */
  --bg:#d9dad7;        /* fundo da página */
  --surface:#faf8f4;   /* cartões, controles, drawer */
  --surface-2:#f3f1ec; /* sidebar, "solicitação completa" */
  --surface-3:#fdfcfa; /* grupos dentro da gaveta */
  --surface-k:#eceae5; /* colunas do kanban */
  --field:#f1eee8;     /* fundo dos campos de formulário */

  /* ----- tinta / texto ----- */
  --text:#1b1916;
  --ink:#131110;       /* títulos fortes */
  --muted:#6e685f;
  --muted-2:#5f5c55;
  --faint:#958f85;
  --faint-2:#82817b;

  /* ----- linhas / bordas ----- */
  --line:#c8c5be;      /* containers (kanban, sidebar) */
  --line-2:#bcb9b2;    /* borda dos cartões */
  --line-3:#b3b0a9;    /* borda dos controles da toolbar */
  --field-brd:#d0cbc3; /* borda dos campos */
  --hair:#e5e0d8;      /* divisórias finas internas */

  /* ----- marca + semânticas ----- */
  --red:#e22d36; --red-esc:#b01118;
  --verde:#1d9d5f; --verde-esc:#166a43; --verde-bg:#e2efe6; --verde-brd:#b7d8c3;
  --ambar:#c48910;                /* usado pelo JS (coluna "A fazer") — dourado legível */
  --ambar-txt:#74570f; --ambar-bg:#f7efdb; --ambar-brd:#ddd0a6;
  --ambar-mk:#d8b866; --ambar-rot:#b07a10;   /* indicador "preencher" nos campos */
  --cinza:#8b867d;                /* usado pelo JS (coluna "Em edição") */
  --edit-bg:#e9e6e1; --edit-txt:#57524a;
  --roxo:#e22d36;                 /* JS usa var(--roxo) p/ o #id no kanban → vermelho */
  --ca-azul:#2687e9; --ca-azul-esc:#1f6fce;

  --serif:'Archivo',-apple-system,'Segoe UI',sans-serif;      /* títulos e números */
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif; /* corpo */
}
* { box-sizing:border-box; }

/* Controles nativos na cor da marca (sem isto o checkbox sai no azul do Windows). */
input[type=checkbox], input[type=radio] { accent-color:var(--red); }
/* Setinhas dos campos numéricos: a UI nativa destoa do resto. Some com elas e
   deixa o campo ser digitado (os valores aqui são digitados, não incrementados). */
input[type=number] { appearance:textfield; -moz-appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

body { margin:0; font-family:var(--sans); color:var(--text); background:var(--bg);
  font-size:14px; display:flex; min-height:100vh; -webkit-font-smoothing:antialiased; }
/* fundo antigo (orbes do Midnight Glass) — desativado no tema claro */
#fundo { display:none; }
a { color:var(--red); text-decoration:none; } a:hover { color:var(--red-esc); }

.rotulo { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint-2); }

/* =====================================================================
   Barra lateral — trilho estreito (68px), só ícones
   ===================================================================== */
.lateral { width:68px; flex:0 0 68px; display:flex; flex-direction:column; align-items:center;
  padding:20px 0 16px; gap:18px; position:sticky; top:0; height:100vh; box-sizing:border-box;
  background:var(--surface-2); border-right:1px solid var(--line); }
.marca { display:flex; align-items:center; justify-content:center; padding:0; color:var(--red); }
.marca .m { width:34px; height:19px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.marca .m img { width:34px; height:19px; display:block; }
.marca .nome { display:none; }                 /* trilho estreito: sem rótulo textual */
.lateral .sec { display:none; }
/* divisória fina abaixo da marca (equivalente ao traço do design) */
.lateral .marca::after { content:''; }
.nav-item { width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); text-decoration:none; cursor:pointer; font-size:0;                /* esconde o texto, mantém o ícone */
  border-left:3px solid transparent; transition:background .15s, color .15s; }
.nav-item:hover { background:#efe9e7; color:var(--text); }
.nav-item.ativo { background:#f9e7e6; border-left-color:var(--red); color:var(--red); }
.nav-item svg { width:18px; height:18px; flex:0 0 auto; }
.lateral .rodape { margin-top:auto; border-top:0; padding-top:0; }
.ca-status { display:flex; align-items:center; justify-content:center; gap:0; padding:0; }
.ca-status #ca-txt, .ca-status span:not(.dot) { display:none; }   /* trilho: só o ponto */
.ca-status .dot { width:8px; height:8px; border-radius:50%; background:var(--faint); display:inline-block; flex:0 0 auto; }
.ca-status .dot.ok { background:var(--verde); } .ca-status .dot.erro { background:var(--red); }
.ca-status .dot.aviso { background:var(--ambar); }   /* Conta Azul recusou (≠ servidor caído) */
/* botão de recarregar as listas: fica ao lado do pontinho no trilho estreito */
#ca-recarregar { margin-left:6px; padding:0 4px; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:13px; line-height:1; font-family:inherit; }
#ca-recarregar:hover { color:var(--red); }
#ca-recarregar:disabled { opacity:.45; cursor:default; }

/* faixa de conexão: mesmo desenho do #novidades, trocando só a cor da borda.
   Precisa ser faixa, e não o texto do rodapé — lá o texto é display:none. */
.conexao-aviso { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--line-2); font-size:13px; color:var(--text); }
.conexao-aviso.grave   { border-left:3px solid var(--red); }
.conexao-aviso.atencao { border-left:3px solid var(--ambar); }
.conexao-aviso .conexao-det { margin-left:auto; color:var(--muted); font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%; }

/* aviso "chegaram solicitações novas da Zeev" (acima da lista) */
#novidades { display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--verde);
  font-size:13px; color:var(--text); }
#novidades button { font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 12px;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink); }
#novidades button:hover { background:#efece6; }

/* controles injetados pelo nav.js (recolher menu / hambúrguer) — sem uso no trilho fixo */
.side-acoes, .side-btn, .menu-btn { display:none !important; }

/* =====================================================================
   Área principal
   ===================================================================== */
.principal { flex:1; min-width:0; }
.cabecalho { padding:28px 36px 0; }
.cabecalho::after { content:''; display:block; height:3px; background:var(--red); margin-top:22px; }
.breadcrumb { margin-bottom:14px; }
.titulo { font-family:var(--serif); font-weight:700; font-size:38px; margin:0; letter-spacing:-.02em; color:var(--ink); }
.titulo::after { content:'.'; color:var(--red); }
.titulo em { font-style:normal; color:var(--red); }
.subtitulo { color:var(--muted-2); margin:8px 0 0; font-size:14px; }
.conteudo { padding:20px 36px 44px; display:flex; flex-direction:column; gap:16px; }

.msg { padding:11px 15px; font-size:13px; margin:0; }
.msg.aviso-fase { background:var(--ambar-bg); border:1px solid var(--ambar-brd); color:var(--ambar-txt); }

/* =====================================================================
   Controles (visão, abas, filtros) — flat, cantos quadrados
   ===================================================================== */
.controles { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.visao-toggle { display:inline-flex; border:1px solid var(--ink); flex:0 0 auto; }
.visao-toggle .tg { background:var(--surface); border:0; padding:9px 15px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.visao-toggle .tg + .tg { border-left:1px solid var(--ink); }
.visao-toggle .tg.ativo { background:var(--ink); color:#fff; font-weight:600; }
.visao-toggle .tg svg { width:15px; height:15px; }

.abas { display:inline-flex; border:1px solid var(--line-3); }
.aba { padding:9px 16px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
  color:var(--muted); background:var(--surface); border:0; transition:.15s; }
.aba + .aba { border-left:1px solid #cbc8c1; }
.aba:hover { color:var(--text); }
.aba.ativa { color:#fff; background:var(--red); font-weight:600; }

.controles input[type=text], #filtro-tipo, #filtro-emergencial, #filtro-ordem {
  padding:9px 12px; border:1px solid var(--line-3); font:inherit; font-size:13px;
  color:var(--text); background:var(--surface); cursor:pointer; }
.controles input[type=text] { min-width:320px; cursor:text; }
.controles input[type=text]::placeholder { color:var(--faint); }
.controles input[type=text]:focus, #filtro-tipo:focus, #filtro-emergencial:focus, #filtro-ordem:focus {
  outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
#filtro-tipo, #filtro-emergencial, #filtro-ordem { color:var(--muted); }
#filtro-tipo { max-width:280px; }

/* linha de filtros por data (vencimento/competência), abaixo da barra principal.
   ⚠️ Cada grupo é inline-flex com nowrap: sem isso o flex-wrap do .controles pai
   quebrava rótulo, campo e "até" em linhas diferentes (ficou feio de verdade). */
.controles-datas { margin-top:2px; gap:20px; }
.fd-grupo { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; white-space:nowrap; }
.fd-par { display:inline-flex; align-items:center; gap:6px; }
.controles-datas .fd-rotulo { font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; }
.controles-datas .fd-ate { font-size:12px; color:var(--faint); }
/* .data-vis junto para vencer a regra genérica `.controles input[type=text]`
   (min-width:320px) — sem isso cada campo de data viraria um trem de 320px */
.controles-datas .data-vis.fd-data { width:104px; min-width:0; padding:7px 9px;
  font:inherit; font-size:13px; font-variant-numeric:tabular-nums;
  border:1px solid var(--line-3); background:var(--surface); color:var(--text); }
.controles-datas .data-vis.fd-data:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
#fd-limpar { padding:7px 11px; font:inherit; font-size:12.5px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-3); color:var(--muted); }
#fd-limpar:hover { color:var(--text); border-color:var(--ink); }

/* "Atualizar": dispara a sincronização com a Zeev na hora */
#btn-sync { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink); transition:background .15s; }
#btn-sync:hover:not(:disabled) { background:#efece6; }
#btn-sync:disabled { cursor:default; color:var(--muted); border-color:var(--line-3); }
/* girando = está buscando. Reusa o keyframe do spinner do modal de envio. */
#btn-sync[aria-busy="true"] .ico-sync { animation:env-gira .9s linear infinite; transform-origin:50% 50%; }
.contador { margin-left:auto; font-size:12px; font-weight:600; color:var(--muted-2); }

/* =====================================================================
   Cartões
   ===================================================================== */
#lista { display:flex; flex-direction:column; gap:16px; }
.vazio { color:var(--muted); padding:26px; text-align:center; font-family:var(--serif); font-weight:600; font-size:16px; }

.cartao { display:grid; grid-template-columns:180px 1fr auto; gap:22px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 2px 8px rgba(30,26,20,.08); }
@media (max-width:900px){ .cartao{ grid-template-columns:1fr; } }

.col-esq { display:flex; flex-direction:column; gap:6px; border-right:1px solid var(--hair); padding-right:18px; }
@media (max-width:900px){ .col-esq{ border-right:none; border-bottom:1px solid var(--hair); padding-bottom:12px; } }
.mini { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; }
.col-esq .valor-inp { font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); }
.pagto { font-size:11.5px; color:var(--faint); margin-top:3px; }
.col-corpo { display:flex; flex-direction:column; gap:11px; min-width:0; }

.card-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-bottom:10px;
  border-bottom:1px solid var(--hair); }
.card-head .ch-tipo { font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); }
.card-head .ch-id { font-weight:600; font-size:13.5px; color:var(--red); }
/* O #id vira link para a solicitação na Zeev. Mantém EXATAMENTE a aparência de
   antes (mesma cor/peso, sem sublinhado) — só ganha o sublinhado no hover, para
   não parecer um botão novo nem competir com o azul do Conta Azul. */
a.ch-id { text-decoration:none; cursor:pointer; }
a.ch-id:hover { text-decoration:underline; }
/* link para a Zeev na gaveta (linha "Origem (Zeev)") */
.lnk-zeev { color:var(--red); text-decoration:none; }
.lnk-zeev:hover { text-decoration:underline; }
.kv .lnk-zeev { font-weight:600; }
.card-head .ch-sep { color:#c4beb4; }
.card-head .ch-solic { font-size:13.5px; color:var(--muted); font-weight:500; }

/* badges de status (quadradas) */
.st { font-size:11px; font-weight:600; padding:3px 11px; text-transform:capitalize; white-space:nowrap;
  background:#e9e6e1; color:var(--edit-txt); border:1px solid var(--field-brd); }
.st.pendente { background:var(--ambar-bg); color:var(--ambar-txt); border-color:var(--ambar-brd); }
.st.em_edicao { background:var(--edit-bg); color:var(--edit-txt); border-color:var(--field-brd); }
.st.confirmado, .st.lancado { background:var(--verde-bg); color:var(--verde-esc); border-color:var(--verde-brd); }
.st.devolvido, .st.erro { background:#f9e7e6; color:var(--red-esc); border-color:#d99a9d; }
/* excluído do painel: neutro de propósito — não é erro nem sucesso, é "saiu daqui" */
.st.ignorado { background:#eceae5; color:var(--muted); border-color:var(--field-brd); text-decoration:line-through; }

.selo { font-size:11px; font-weight:500; padding:3px 11px; white-space:nowrap;
  background:var(--surface); color:var(--muted); border:1px solid var(--field-brd); }
.selo-urg { background:var(--red); color:#fff; border-color:var(--red); font-weight:600; }
.selo-alert { background:var(--ambar-bg); color:var(--ambar-txt); border-color:var(--ambar-brd); }
.selo-info { background:var(--surface-2); color:var(--muted); }
/* tarefa concluída na Zeev (pós-envio): verde discreto, é confirmação, não alerta */
.selo-zeev-ok { background:var(--verde-bg); color:var(--verde-esc); border-color:var(--verde-brd); }
.selo-acao { cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.selo-acao:hover { background:#efe9e7; color:var(--text); border-color:var(--line-3); }

/* popover das flags (comentários / anexos) */
#pop-flag { position:absolute; z-index:1300; display:none; min-width:220px; max-width:360px; max-height:320px; overflow-y:auto;
  padding:10px 12px; font-size:13px; background:var(--surface); border:1px solid var(--line-3);
  box-shadow:0 12px 34px rgba(25,22,16,.22); }
#pop-flag .pf-tit { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; margin-bottom:8px; }
#pop-flag .pf-item { padding:7px 0; border-top:1px solid var(--hair); }
#pop-flag .pf-item:first-of-type { border-top:0; }
#pop-flag .pf-meta { font-size:11px; color:var(--muted); margin-bottom:2px; }
#pop-flag .pf-texto { color:var(--text); word-break:break-word; white-space:pre-wrap; }
#pop-flag .pf-vazio { color:var(--muted); }
#pop-flag .pf-anexo { padding:8px 9px; cursor:pointer; color:var(--text); }
#pop-flag .pf-anexo:hover { background:var(--field); }

.dois { display:grid; grid-template-columns:1fr 1fr; gap:11px 16px; }
@media (max-width:640px){ .dois{ grid-template-columns:1fr; } }
.tres { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px 16px; }
@media (max-width:640px){ .tres{ grid-template-columns:1fr; } }
.campo label { font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }

/* campos de texto (cartões e gaveta) */
/* `.campos select` está aqui como FALLBACK: se o JS quebrar antes de marcar
   html.sel-ok, o <select> volta a aparecer — e sem esta regra ele ficaria sem
   estilo nenhum (era exatamente o defeito do campo "Forma de pagamento"). */
.ctrl, .campos input, .campos textarea, .campos select, .lin-cfg input, .lin-cfg select {
  width:100%; padding:9px 11px; border:1px solid var(--field-brd); font:inherit; font-size:13.5px;
  background:var(--field); color:var(--text); transition:border-color .12s, box-shadow .12s; }
.ctrl::placeholder { color:var(--faint); }
.ctrl:focus, .campos input:focus, .campos textarea:focus, .lin-cfg input:focus, .lin-cfg select:focus {
  outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.via-rateio { font-size:12.5px; color:var(--red-esc); background:#f9e7e6; border:1px dashed #d99a9d; padding:9px 11px; }

/* campo travado: já enviado ao Conta Azul, não editável */
.ctrl:disabled, .cbx-input:disabled, .data-vis:disabled, .sel-vis:disabled,
.campos input:disabled, .campos textarea:disabled,
.lin-cfg input:disabled, .lin-cfg select:disabled {
  background:var(--surface); color:var(--muted); cursor:not-allowed; opacity:.75;
  background-image:none; }
.cartao.travado { border-top-color:var(--field-brd); }
.travado-aviso { font-size:12px; font-weight:600; color:var(--red-esc); background:#f9e7e6;
  border:1px solid #d99a9d; padding:7px 11px; margin:2px 0 4px; }

/* =====================================================================
   Botões
   ===================================================================== */
.col-acoes { display:flex; flex-direction:column; gap:8px; justify-content:center; }
.col-acoes button, .acoes button, .btn-salvar {
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:10px 16px;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink);
  white-space:nowrap; transition:background .15s, transform .1s; }
.col-acoes button:hover, .acoes button:hover, .btn-salvar:hover { background:#efece6; }
.col-acoes button:active, .acoes button:active { transform:translateY(1px); }
.btn-dev { font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:10px 16px;
  color:var(--red-esc); border:1px solid #d99a9d; background:#f9e7e6; }
.btn-dev:hover { background:#f4dad9; }

/* "Excluir": DISCRETO de propósito. Fica ao lado do botão azul do Conta Azul, que é
   a ação principal do cartão — um botão vermelho aqui competiria com ele e convidaria
   ao clique errado. Só ganha cor de alerta no hover, quando a intenção já é clara.
   Seletor com `.col-acoes` na frente porque `.col-acoes button` (acima) tem
   especificidade maior que uma classe sozinha e venceria estas regras. */
/* Marca de pagamento por remessa. Discreto quando desmarcado (é opcional) e
   verde quando ligado — o mesmo par de cores que o resto do painel usa para
   "confirmado". Precisa de `.col-acoes` na frente pelo mesmo motivo do
   .btn-excluir abaixo: `.col-acoes button` venceria uma classe sozinha. */
.col-acoes .btn-remessa { font-size:12.5px; font-weight:500; padding:7px 16px;
  color:var(--muted); border:1px dashed var(--line-3); background:var(--surface); }
.col-acoes .btn-remessa:hover { color:var(--verde-esc); border-color:var(--verde-brd); background:var(--verde-bg); }
.col-acoes .btn-remessa.on { color:var(--verde-esc); border:1px solid var(--verde-brd);
  background:var(--verde-bg); font-weight:600; }
.col-acoes .btn-remessa:disabled { cursor:default; opacity:.7; }
.col-acoes .btn-remessa:disabled:hover { color:var(--muted); border-color:var(--line-3); background:var(--surface); }
.col-acoes .btn-remessa.on:disabled:hover { color:var(--verde-esc); border-color:var(--verde-brd); background:var(--verde-bg); }

.col-acoes .btn-excluir { font-size:12.5px; font-weight:500; padding:7px 16px;
  color:var(--muted); border:1px solid var(--field-brd); background:transparent; }
.col-acoes .btn-excluir:hover { color:var(--red-esc); border-color:#d99a9d; background:#f9e7e6; }

/* botão "Enviar para o Conta Azul": azul da marca + wordmark (máscara branca) */
.ca-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; cursor:pointer; font-weight:600; color:#fff !important;
  background:var(--ca-azul) !important; border:1px solid var(--ca-azul) !important; }
.ca-btn:hover { background:var(--ca-azul-esc) !important; border-color:var(--ca-azul-esc) !important; }
.ca-btn:disabled { opacity:.45; cursor:not-allowed; }
.ca-btn:disabled:hover { background:var(--ca-azul) !important; border-color:var(--ca-azul) !important; }

/* recado do envio abaixo dos botões do cartão */
.envio-msg { font-size:11px; line-height:1.35; max-width:190px; color:var(--muted);
  border-left:3px solid var(--field-brd); padding:4px 0 4px 7px; }
.envio-msg.ok { color:var(--verde-esc); border-left-color:var(--verde); }
.envio-msg.atencao { color:var(--red-esc); border-left-color:var(--red); font-weight:600; }
.ca-wordmark { display:inline-block; width:98px; height:15px; background:#fff;
  -webkit-mask:url('/conta-azul.svg') center/contain no-repeat;
          mask:url('/conta-azul.svg') center/contain no-repeat; }

/* =====================================================================
   Indicadores discretos de preenchimento (borda esquerda)
   ===================================================================== */
.marca-ok > .cbx-input, .marca-ok > input, .marca-ok > textarea { border-left:3px solid var(--verde); }
.marca-falta > .cbx-input, .marca-falta > input,
.marca-nova > .cbx-input, .marca-nova > input { border-left:3px solid var(--ambar-mk); }
.marca-rot { font-size:10.5px; font-weight:600; letter-spacing:.02em; margin-left:2px; }
/* "+ cadastrar": o aviso "novo fornecedor?" virou ação. Discreto — é uma escrita
   no ERP, não pode parecer um clique casual, mas precisa ser achável. */
.btn-cadastrar-forn { font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  margin-left:4px; padding:1px 7px; cursor:pointer; color:var(--ambar-rot);
  background:var(--ambar-bg); border:1px solid var(--ambar-brd); }
.btn-cadastrar-forn:hover { background:#f6e6c8; color:var(--ink); }
.marca-ok .marca-rot { color:var(--verde); }
.marca-falta .marca-rot, .marca-nova .marca-rot { color:var(--ambar-rot); }

/* =====================================================================
   Combobox pesquisável
   ===================================================================== */
.cbx-input { width:100%; padding:9px 11px; padding-right:32px; border:1px solid var(--field-brd); font:inherit; font-size:13.5px;
  color:var(--text);
  background:var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23958f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  transition:border-color .12s, box-shadow .12s; }
.cbx-input::placeholder { color:var(--faint); }
.cbx-input:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
#cbx-pop { position:absolute; z-index:1200; max-height:280px; overflow-y:auto; padding:4px; display:none;
  background:var(--surface); border:1px solid var(--line-3); box-shadow:0 12px 34px rgba(25,22,16,.22); }
.cbx-item { padding:8px 11px; font-size:13.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
/* 2ª linha do fornecedor (CPF/CNPJ). line-height apertado para a lista não
   dobrar de altura e continuar cabendo os mesmos itens na tela. */
.cbx-item .cbx-sub { font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:1px; }
.cbx-item .cbx-sub-vazio { color:var(--ambar-rot); }

/* aviso da perda de endereço ao editar fornecedor */
.fnv-aviso { margin:8px 0 2px; padding:9px 12px; font-size:12.5px; line-height:1.5;
  background:var(--ambar-bg); border:1px solid var(--ambar-brd); color:var(--ambar-txt); }
.cbx-item:hover, .cbx-item.sel { background:var(--field); }
.cbx-item .cbx-hi { font-weight:700; color:var(--red); }
.cbx-vazio { padding:9px 11px; font-size:13px; color:var(--muted); }
.cbx-limpar { padding:7px 11px; font-size:12px; color:var(--muted); cursor:pointer; border-top:1px solid var(--hair); margin-top:2px; }

/* =====================================================================
   Seleção simples (sem busca) — visual IDÊNTICO ao combobox acima.
   A lista aberta de um <select> nativo não é estilizável em navegador
   nenhum (mesma razão do calendário próprio). Aqui o <select> continua
   existindo e sendo o dono do valor — só fica escondido.
   ===================================================================== */
.sel-campo { display:block; position:relative; }
/* Só esconde o nativo se o JS realmente subiu: se o script quebrar antes,
   o usuário fica com o select feio, mas FUNCIONANDO. */
html.sel-ok .sel-campo > select { display:none; }

.sel-vis { width:100%; text-align:left; padding:9px 11px; padding-right:32px;
  border:1px solid var(--field-brd); font:inherit; font-size:13.5px; color:var(--text); cursor:pointer;
  background:var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23958f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:border-color .12s, box-shadow .12s; }
.sel-vis.vazio { color:var(--faint); }
.sel-vis:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.sel-vis:disabled { background:var(--surface); color:var(--muted); cursor:not-allowed; opacity:.75; }

/* z-index acima do #fnv-modal (1401): o cadastro de fornecedor tem um dropdown
   dentro dele, e a 1240 a lista abria ATRÁS do modal. Segue abaixo do modal de
   envio (1500) e do de pergunta (1601), que não têm dropdown. */
#sel-pop { position:absolute; z-index:1450; max-height:280px; overflow-y:auto; padding:4px; display:none;
  background:var(--surface); border:1px solid var(--line-3); box-shadow:0 12px 34px rgba(25,22,16,.22); }
.sel-item { padding:8px 11px; font-size:13.5px; cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.sel-item:hover, .sel-item.sel { background:var(--field); }
.sel-item[aria-selected="true"] { font-weight:600; }

/* variante da barra de controles (fundo de superfície, não de campo) */
.controles .sel-campo { flex:0 0 auto; }
/* ⚠️ O `padding` atalho APAGA o `padding-right:32px` da regra base — que é o espaço
   reservado para a seta. Sem redeclará-lo, o texto passa por baixo do chevron
   (a seta fica a 10px da borda; o texto avançava até 12px). Redeclarar SEMPRE
   depois do atalho, como a variante do rateio abaixo já faz. */
.controles .sel-vis { width:auto; max-width:280px; padding:9px 12px; padding-right:32px;
  font-size:13px; color:var(--muted); background-color:var(--surface); border-color:var(--line-3); }
/* variante compacta do rateio (espelha .rt-linha .cbx-input) */
.rt-linha .sel-vis { padding:7px 8px; padding-right:24px; font-size:13px; background-position:right 6px center; }
.cbx-limpar:hover { color:var(--red); }

/* =====================================================================
   Campo de data + calendário próprio
   (o calendário nativo do navegador não é estilizável — por isso o nosso)
   ===================================================================== */
.data-campo { display:block; }
.data-vis { width:100%; padding:9px 11px; padding-right:32px; border:1px solid var(--field-brd);
  font:inherit; font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums;
  background:var(--field) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23958f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>") no-repeat right 10px center;
  transition:border-color .12s, box-shadow .12s; }
.data-vis::placeholder { color:var(--faint); }
.data-vis:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.col-esq .data-vis { font-size:13px; }
.pl .data-vis { padding:6px 8px; padding-right:26px; font-size:13px; background-position:right 6px center; }

#dtp-pop { position:absolute; z-index:1250; display:none; width:252px; padding:8px;
  background:var(--surface); border:1px solid var(--line-3); box-shadow:0 12px 34px rgba(25,22,16,.22); }

.dtp-cab { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dtp-titulo { font-family:var(--serif); font-weight:700; font-size:13.5px; color:var(--ink);
  text-transform:capitalize; letter-spacing:-.01em; }
.dtp-nav { width:26px; height:26px; padding:0; font:inherit; font-size:15px; line-height:1; cursor:pointer;
  background:var(--surface); border:1px solid var(--field-brd); color:var(--muted); }
.dtp-nav:hover { background:var(--field); color:var(--ink); border-color:var(--line-3); }

.dtp-sem, .dtp-grade { display:grid; grid-template-columns:repeat(7,1fr); }
.dtp-sem { margin-bottom:3px; }
.dtp-sem span { text-align:center; font-size:10px; font-weight:600; letter-spacing:.08em;
  color:var(--faint); padding:4px 0; }
.dtp-grade { gap:1px; background:var(--hair); border:1px solid var(--hair); }

.dtp-dia { padding:6px 0; font:inherit; font-family:var(--serif); font-size:12.5px; font-weight:500;
  cursor:pointer; border:0; background:var(--surface); color:var(--text);
  font-variant-numeric:tabular-nums; transition:background .1s; }
.dtp-dia:hover { background:var(--field); }
.dtp-dia.fora { color:var(--faint); background:var(--surface-2); }
.dtp-dia.hoje { box-shadow:inset 0 -2px 0 var(--ambar-mk); font-weight:700; }
.dtp-dia.foco { outline:2px solid rgba(226,45,54,.35); outline-offset:-2px; }
.dtp-dia.sel { background:var(--red) !important; color:#fff; font-weight:700; box-shadow:none; }

.dtp-rodape { display:flex; gap:6px; margin-top:8px; }
.dtp-acao { flex:1; padding:7px 0; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink); }
.dtp-acao:hover { background:#efece6; }
.dtp-acao.dtp-limpar { border-color:#d99a9d; color:var(--red-esc); background:#f9e7e6; }
.dtp-acao.dtp-limpar:hover { background:#f4dad9; }

/* =====================================================================
   Kanban
   ===================================================================== */
.kanban { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:start; }
@media (max-width:1400px){ .kanban { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px){ .kanban { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kanban { grid-template-columns:1fr; } }
/* Kanban do Histórico: 4 colunas (Conferidos | Lançados | Devolvidos | Excluídos).
   As media queries precisam ser repetidas: `.kanban.k3` tem especificidade
   maior que `.kanban`, então venceria as regras acima e nunca colapsaria. */
.kanban.k3 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1400px){ .kanban.k3 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px){ .kanban.k3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .kanban.k3 { grid-template-columns:1fr; } }
.kanban-col { padding:12px; background:var(--surface-k); border:1px solid var(--line); min-width:0; }
.kanban-col h3 { font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600; margin:2px 4px 10px; display:flex; justify-content:space-between; align-items:center; }
.kanban-col h3 .cnt { background:var(--surface); border:1px solid var(--field-brd); padding:0 8px; font-weight:500; color:var(--muted-2); }
.kanban-col .col-cards { display:flex; flex-direction:column; gap:10px; }
.kanban-col .col-vazia { color:var(--faint); font-size:12px; padding:8px 4px; }
.lote-card { display:flex; flex-direction:column; gap:4px; padding:14px 15px; cursor:pointer; text-align:left; overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2); border-left:4px solid var(--faint);
  box-shadow:0 1px 4px rgba(30,26,20,.07); }
.lote-card:hover { border-color:var(--line-3); }
.lote-card .topo { display:flex; justify-content:space-between; align-items:start; gap:8px; }
.lote-card .ev { font-weight:600; font-size:13.5px; word-break:break-word; color:var(--ink); }
.lote-card .meta { font-size:12.5px; color:var(--muted); }
.lote-card .nums { font-size:13.5px; margin-top:6px; color:var(--text); }
.lote-card .nums b { font-family:var(--serif); font-weight:700; }
.card-rodape { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
.lote-card .quem { font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; }

/* =====================================================================
   Histórico — linha de consulta (somente leitura)
   ===================================================================== */
.hist-linha { display:grid; grid-template-columns:150px 1fr 170px auto; gap:18px;
  padding:16px 20px; background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--line-2); align-items:start; }
.hl-quando { display:flex; flex-direction:column; gap:2px;
  border-right:1px solid var(--hair); padding-right:14px; }
.hl-data { font-size:13px; font-weight:600; color:var(--ink); }
.hl-rot { font-size:11.5px; color:var(--muted); }
.hl-corpo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hl-forn { font-size:13.5px; color:var(--text); }
.hl-desc { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hl-num { display:flex; flex-direction:column; gap:3px; text-align:right; }
.hl-num b { font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); }
.hl-acoes { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.hl-acoes button { font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:9px 16px;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink); white-space:nowrap; transition:background .15s; }
.hl-acoes button:hover { background:#efece6; }
/* Selo do "Formato do pagamento" no cartão: o texto já vem cortado em 80
   caracteres. O .card-head quebra linha (flex-wrap), então um selo largo desce
   em vez de sobrepor; o max-width:100% com reticências é a segunda guarda,
   para ele nunca passar da largura do cartão. */
.selo-formato { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:middle; }
/* Restaurar um excluído (Histórico): ação de volta, em verde para não ser
   confundida com as ações vermelhas (excluir/devolver) do painel. */
.hl-acoes .btn-restaurar, .dw-restaurar .btn-restaurar { color:var(--verde-esc); border-color:var(--verde); }
.hl-acoes .btn-restaurar:hover, .dw-restaurar .btn-restaurar:hover { background:#e8f3ec; }
.hl-acoes .btn-restaurar:disabled, .dw-restaurar .btn-restaurar:disabled { opacity:.6; cursor:default; }
.dw-restaurar { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12.5px; color:var(--muted-2); }
.dw-restaurar .btn-restaurar { font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:7px 14px;
  background:transparent; border:1px solid var(--verde); }
@media (max-width:900px){
  .hist-linha { grid-template-columns:1fr; }
  .hl-quando { border-right:none; padding-right:0; flex-direction:row; gap:8px; }
  .hl-num { text-align:left; }
}

/* =====================================================================
   Toast
   ===================================================================== */
#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); color:#fff;
  padding:11px 18px; font-size:13.5px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:2000;
  background:var(--ink); border:1px solid #000; box-shadow:0 14px 34px rgba(25,22,16,.35); }
#toast.show { opacity:1; }

/* =====================================================================
   Gaveta (drawer)
   ===================================================================== */
#overlay { position:fixed; inset:0; background:rgba(20,18,14,.45); display:none; z-index:900; }
#drawer { position:fixed; top:0; right:0; width:min(920px,100%); height:100%; display:none; z-index:901; overflow-y:auto; padding:22px 26px;
  background:var(--surface); border-left:1px solid var(--line-2); box-shadow:-14px 0 40px rgba(25,22,16,.25); box-sizing:border-box; }
#drawer h2 { font-family:var(--serif); font-weight:700; font-size:22px; margin:0 0 6px; color:var(--ink); }
.fechar { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--muted); line-height:1; }
.fechar:hover { color:var(--ink); }
details.solic { border:1px solid var(--field-brd); padding:12px 16px; margin:14px 0; font-size:13px; background:var(--surface-2); }
details.solic summary { cursor:pointer; font-weight:600; color:var(--red); }
.kv { margin:10px 0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
/* link de pagamento: quebra em qualquer ponto (URLs longas não podem esticar a gaveta) */
.link-pag { color:var(--red); word-break:break-all; }
.kv .k { color:var(--muted); font-weight:600; } .kv .v { word-break:break-word; }
/* Divisão do rateio: vem da Zeev com uma linha por centro de custo, e sem o
   pre-wrap essas quebras somem — o texto vira um parágrafo ilegível. */
.rateio-desc { white-space:pre-wrap; word-break:break-word; }
/* histórico das etapas na Zeev (quem aprovou o quê, quando) */
.hist-det { margin-top:10px; }
.hist-det summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--text); }
.hist-lista { list-style:none; margin:8px 0 0; padding:0; }
.hist-item { display:grid; grid-template-columns:minmax(120px,1.4fr) minmax(110px,1.6fr) auto auto;
  gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-2); font-size:12.5px; }
.hist-item:last-child { border-bottom:0; }
.hist-quem { font-weight:600; color:var(--ink); word-break:break-word; }
.hist-etapa { color:var(--text); word-break:break-word; }
.hist-data { color:var(--muted); font-size:12px; white-space:nowrap; }

.payload-det { margin-top:10px; }
.payload-det summary { cursor:pointer; font-size:12px; color:var(--muted); }
/* `overflow-x:auto` prende no BLOCO qualquer sobra que ainda estoure; sem isso
   ela virava barra de rolagem horizontal na gaveta inteira. */
.payload { background:#efece6; border:1px solid var(--field-brd); padding:8px 10px; margin-top:6px; font-size:12px;
  overflow-x:auto; }
/* ⚠️ `display:block`, NÃO flex. A recursão de renderPayload() injeta os divs dos
   níveis filhos DENTRO do .lin do pai — como item flex, níveis inteiros do JSON
   eram dispostos lado a lado na horizontal em vez de empilhados. Era a causa
   principal do bloco sair do enquadramento. */
.payload .lin { display:block; } .payload .pk { color:var(--muted); margin-right:6px; }
.payload .ind { margin-left:14px; }
/* Mesmo padrão do .link-pag: o reportLink da Zeev é uma URL gigante com token e,
   sem quebrar, empurra a largura para fora dos 920px da gaveta. */
.payload .v { word-break:break-all; }
.anexo a { color:var(--red); } .anexo a:hover { color:var(--red-esc); }
.anexo-meta { font-size:11.5px; color:var(--muted); }
.anexo-pend { color:var(--ambar-rot); }

/* chips de anexo (gaveta e popover da flag 📎) */
.anexos { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.anexo-chip { display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:13px;
  background:var(--surface-2); border:1px solid var(--field-brd); }
.ax-ico { font-size:16px; line-height:1; flex:none; }
/* min-width:0 é o que faz o ellipsis funcionar dentro do flex — nome comprido
   de nota fiscal é a regra, não a exceção. */
.ax-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
.ax-nome { font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ax-meta { font-size:11.5px; color:var(--muted); }
/* Vira <button> (era <a href>) desde o login: navegação do navegador não manda
   o cabeçalho Authorization, então o anexo é buscado por fetch. Herda a fonte e
   o cursor porque botão não herda nenhum dos dois. */
.ax-btn { flex:none; font:inherit; font-size:12px; padding:4px 10px; text-decoration:none;
  white-space:nowrap; cursor:pointer; line-height:1.45;
  color:var(--red); border:1px solid var(--field-brd); background:var(--surface); }
.ax-btn:hover { color:var(--red-esc); border-color:var(--line-3); background:var(--field); }
.ax-baixar { color:var(--ink); font-weight:600; }
.ax-indisp { opacity:.85; }
/* pre-wrap: comentário da Zeev vem com quebra de linha de verdade (o <br> vira
   "\n" na importação). Sem isto, a lista de parcelas colada num parágrafo só.
   O popover das flags (.pf-texto) já fazia igual. */
.coment { font-size:13px; margin:2px 0; white-space:pre-wrap; word-break:break-word; }
.aviso-origem { background:var(--ambar-bg); border:1px solid var(--ambar-brd); color:var(--ambar-txt); padding:9px 11px; font-size:13px; margin-bottom:8px; }
.aviso-mini { font-size:12.5px; color:var(--muted); margin-top:6px; }

.grupo { border:1px solid var(--field-brd); padding:14px 16px; margin-bottom:12px; background:var(--surface-3); }
.grupo h3 { margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); font-weight:600; }
.campos { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
@media (max-width:760px){ .campos { grid-template-columns:1fr; } }
.campos .full { grid-column:1/-1; }
.campos label, .lin-cfg label { font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.campos textarea { min-height:58px; resize:vertical; }
/* texto de origem abaixo do seletor de forma de pagamento */
.dica-origem { font-size:11px; color:var(--faint); margin-top:4px; line-height:1.35; }
.dica-origem:empty { margin-top:0; }
.dica-origem.alerta { color:var(--ambar-rot); font-weight:600; }
.lin-cfg { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.lin-cfg > div { flex:1; min-width:96px; }
.parcelas { margin-top:10px; }
.pl { display:grid; grid-template-columns:1fr 160px 120px; gap:8px; align-items:center; margin-bottom:6px; font-size:13px; }
.pl .pl-val { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.pl .pl-rot { color:var(--muted); }
/* colunas: categoria | % | R$ | centros | remover — o cabeçalho .rt-head usa o
   MESMO grid, então qualquer mudança aqui vale para os dois de uma vez.
   (Até 23/09/2026 o centro era uma coluna; agora cada categoria tem a sua
   divisão, na janela #cen-modal — a lógica de dois níveis do Conta Azul.) */
.rt-linha { display:grid; grid-template-columns:1.3fr 76px 100px 1fr 30px; gap:6px; margin-bottom:6px; align-items:center; }
.rt-head { margin-bottom:2px; }
.rt-head span, .cen-head span { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
/* ⚠️ `font:inherit` é obrigatório: sem ele o <input> usa a fonte PADRÃO DO
   NAVEGADOR (Arial), não a do sistema (IBM Plex Sans) — os campos de % e R$
   destoavam do resto da tela. Os vizinhos .cbx-input já traziam font:inherit,
   por isso só os dois numéricos apareciam errados. */
.rt-linha input, .rt-linha select, .cen-linha input { padding:7px 8px; border:1px solid var(--field-brd);
  font:inherit; font-size:13px; width:100%; background:var(--field); color:var(--text); }
/* dinheiro/percentual alinhados à direita e com dígitos de largura fixa, como
   as parcelas (.pl-val) — números de colunas diferentes ficam alinhados */
.rt-linha .rt-pct, .rt-linha .rt-rs, .cen-linha .cen-pct, .cen-linha .cen-rs { text-align:right; font-variant-numeric:tabular-nums; }
/* os comboboxes do rateio são mais estreitos que os da gaveta */
.rt-linha .cbx-input, .cen-linha .cbx-input { padding:7px 8px; padding-right:26px; font-size:13px; background-position:right 6px center; }
/* Célula "Centro de custo": a lista (ou o resumo "4 centros ✓") + o ícone de
   ratear. Ícone destacado = a categoria já está dividida entre centros. */
.rt-cen-cel { display:flex; gap:4px; min-width:0; }
.rt-cen-cel .rt-cen, .rt-cen-resumo { flex:1 1 auto; min-width:0; }
.rt-cen-resumo { font:inherit; font-size:13px; text-align:left; padding:7px 8px; cursor:pointer;
  border:1px solid var(--field-brd); background:var(--field); color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt-cen-resumo:hover:not(:disabled) { border-color:var(--red); }
.rt-cen-btn { flex:0 0 30px; display:flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--field-brd); background:transparent; color:var(--muted); cursor:pointer; }
.rt-cen-btn:hover:not(:disabled) { border-color:var(--red); color:var(--red-esc); }
.rt-cen-btn.tem { border-color:#d99a9d; background:#f9e7e6; color:var(--red-esc); }
.rt-cen-btn:disabled, .rt-cen-resumo:disabled { cursor:default; opacity:.6; }
/* categoria (ou centro) repetida: acende em vermelho */
.rt-linha .rt-dup, .cen-linha .rt-dup { border-color:var(--red) !important; background:#fbeaea; }
.rt-rem { background:#f9e7e6; border:1px solid #d99a9d !important; color:var(--red-esc); cursor:pointer; }
/* atalhos do rateio: adicionar / usar o restante / dividir igualmente */
.rt-acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.rt-acoes button { font-size:.85rem; padding:6px 10px; }
.rt-acoes button:disabled { opacity:.45; cursor:default; }
.rt-total { margin-top:8px; font-weight:600; font-size:13px; }
.rt-total.ok { color:var(--verde-esc); } .rt-total.falta { color:var(--red-esc); }

.acoes { display:flex; gap:9px; flex-wrap:wrap; margin-top:10px; }

/* =====================================================================
   Modal de pergunta (no lugar do prompt() do navegador)
   ===================================================================== */
#ask-overlay { position:fixed; inset:0; background:rgba(20,18,14,.55); display:none; z-index:1600; }
#ask-modal { position:fixed; z-index:1601; display:none; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(480px,92vw); padding:24px 26px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 24px 60px rgba(25,22,16,.35); }
#ask-modal:focus { outline:none; }
#ask-modal h3 { font-family:var(--serif); font-weight:700; font-size:19px; margin:0 0 6px; color:var(--ink); }
.ask-sub { font-size:13px; color:var(--muted-2); line-height:1.5; margin-bottom:12px; }
#ask-texto { width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:13.5px;
  resize:vertical; background:var(--field); border:1px solid var(--field-brd); color:var(--text); }
#ask-texto:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.ask-acoes { display:flex; gap:9px; justify-content:flex-end; margin-top:16px; }

/* =====================================================================
   Cadastrar fornecedor no Conta Azul
   Mesmo visual do #ask-modal; z-index acima dele porque pode ser aberto
   de dentro da gaveta (901) e usa o combobox de tipo (#sel-pop, 1240).
   ===================================================================== */
#fnv-overlay { position:fixed; inset:0; background:rgba(20,18,14,.55); display:none; z-index:1400; }
#fnv-modal { position:fixed; z-index:1401; display:none; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px,92vw); padding:24px 26px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 24px 60px rgba(25,22,16,.35); }
#fnv-modal:focus { outline:none; }
#fnv-modal h3 { font-family:var(--serif); font-weight:700; font-size:19px; margin:0 0 6px; color:var(--ink); }
.fnv-campos { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-top:4px; }
.fnv-campos .full { grid-column:1/-1; }
.fnv-campos label { font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
.fnv-campos input { width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:13.5px;
  background:var(--field); border:1px solid var(--field-brd); color:var(--text); }
.fnv-campos input:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.fnv-erro { font-size:12.5px; color:var(--red-esc); font-weight:600; margin-top:10px; min-height:1em; }
.fnv-erro:empty { margin-top:0; min-height:0; }

/* =====================================================================
   Janela dos centros de custo de UMA categoria do rateio.
   ⚠️ z-index 1100/1101: ACIMA da gaveta (901) e ABAIXO do #cbx-pop (1200),
   do #dtp-pop e do #sel-pop — a janela tem combobox de centro e dois
   dropdowns, e as listas deles precisam abrir POR CIMA dela. O #ask-modal
   (1600) também fica por cima: é ele que pede o nome da divisão salva.
   ===================================================================== */
#cen-overlay { position:fixed; inset:0; background:rgba(20,18,14,.55); display:none; z-index:1100; }
#cen-modal { position:fixed; z-index:1101; display:none; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(660px,94vw); max-height:88vh; overflow-y:auto; padding:24px 26px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 24px 60px rgba(25,22,16,.35); }
#cen-modal:focus { outline:none; }
#cen-modal h3 { font-family:var(--serif); font-weight:700; font-size:19px; margin:0 0 6px; color:var(--ink); }
.cen-atalhos { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.cen-atalhos .sel-campo { flex:1 1 220px; min-width:0; }
.cen-linha { display:grid; grid-template-columns:1fr 104px 112px 30px; gap:6px; margin-bottom:6px; align-items:center; }
.cen-head { margin-bottom:2px; }

/* Botão que abre as divisões salvas, na janela dos centros */
.cen-gerenciar { flex:0 0 auto; font-size:.85rem; padding:6px 10px; }
.rt-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rt-divisoes { font-size:.85rem; padding:6px 10px; }

/* =====================================================================
   Divisões de centro salvas: ver, editar, criar, excluir.
   z-index 1110: acima da janela dos centros (1101), abaixo do #cbx-pop (1200).
   ===================================================================== */
#div-overlay { position:fixed; inset:0; background:rgba(20,18,14,.55); display:none; z-index:1110; }
#div-modal { position:fixed; z-index:1111; display:none; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(640px,94vw); max-height:88vh; overflow-y:auto; padding:24px 26px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 24px 60px rgba(25,22,16,.35); }
#div-modal:focus { outline:none; }
#div-modal h3 { font-family:var(--serif); font-weight:700; font-size:19px; margin:0 0 6px; color:var(--ink); }
.div-item { display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  padding:12px 0; border-top:1px solid var(--line); }
.div-item:first-child { border-top:0; padding-top:4px; }
.div-info { min-width:0; }
.div-nome { font-weight:600; color:var(--ink); }
.div-resumo { font-size:12.5px; color:var(--muted-2); margin-top:3px; line-height:1.55; }
.div-resumo b { font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.div-alerta { font-size:12px; color:var(--red-esc); font-weight:600; margin-top:3px; }
.div-meta { font-size:11.5px; color:var(--faint-2); margin-top:3px; }
.div-botoes { display:flex; gap:6px; flex:0 0 auto; }
.div-botoes button { font-size:.82rem; padding:5px 10px; }
.div-btn-excluir { font:inherit; cursor:pointer; background:transparent; color:var(--muted);
  border:1px solid var(--field-brd); }
.div-btn-excluir:hover { color:var(--red-esc); border-color:#d99a9d; background:#f9e7e6; }
.div-vazio { font-size:13px; color:var(--muted-2); padding:6px 0 4px; }
#div-nova { margin-top:12px; font-size:.85rem; padding:6px 10px; }
.div-rot { font-size:11.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px; }
#div-nome { width:100%; box-sizing:border-box; padding:9px 11px; font:inherit; font-size:13.5px;
  background:var(--field); border:1px solid var(--field-brd); color:var(--text); margin-bottom:14px; }
#div-nome:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(226,45,54,.18); }
.div-linha { grid-template-columns:1fr 104px 30px; }
.cen-linha .div-pct { text-align:right; font-variant-numeric:tabular-nums; }

/* =====================================================================
   Modal de status do envio ao Conta Azul
   Fica ACIMA da gaveta (901), do combobox (1200) e do pop-flag (1300),
   porque o envio pode partir de dentro da gaveta.
   ===================================================================== */
#env-overlay { position:fixed; inset:0; background:rgba(20,18,14,.55); display:none; z-index:1500; }
#env-modal { position:fixed; z-index:1501; display:none; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:86vh; overflow-y:auto; padding:26px 28px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line-2); border-top:3px solid var(--red);
  box-shadow:0 24px 60px rgba(25,22,16,.35); }
#env-modal:focus { outline:none; }

.env-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; line-height:1; margin-bottom:14px;
  background:var(--field); border:1px solid var(--field-brd); color:var(--muted); }
#env-modal[data-estado="sucesso"] .env-ico { background:var(--verde-bg); border-color:var(--verde-brd); color:var(--verde-esc); }
#env-modal[data-estado="parcial"] .env-ico { background:var(--ambar-bg); border-color:var(--ambar-brd); color:var(--ambar-txt); }
#env-modal[data-estado="erro"]    .env-ico { background:#f9e7e6; border-color:#d99a9d; color:var(--red-esc); }
#env-modal[data-estado="sucesso"] { border-top-color:var(--verde); }
#env-modal[data-estado="parcial"] { border-top-color:var(--ambar-mk); }

#env-modal h3 { font-family:var(--serif); font-weight:700; font-size:20px; margin:0 0 6px; color:var(--ink); }
.env-sub { font-size:13.5px; color:var(--muted-2); line-height:1.5; white-space:pre-wrap; }
.env-corpo { margin-top:14px; }
.env-corpo:empty { margin-top:0; }

/* spinner do estado "enviando" */
.env-spin { display:block; width:20px; height:20px; border:2px solid var(--field-brd);
  border-top-color:var(--red); border-radius:50%; animation:env-gira .7s linear infinite; }
@keyframes env-gira { to { transform:rotate(360deg); } }

.env-alerta { font-size:12.5px; padding:9px 11px; margin-bottom:10px;
  background:var(--ambar-bg); border:1px solid var(--ambar-brd); color:var(--ambar-txt); }

.env-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px;
  max-height:34vh; overflow-y:auto; }
.env-item { display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:8px 10px; font-size:12.5px; background:var(--surface-2); border:1px solid var(--field-brd);
  border-left:3px solid var(--faint); }
.env-item.env-sucesso { border-left-color:var(--verde); }
.env-item.env-erro { border-left-color:var(--red); }
.env-item.env-pendente, .env-item.env-indeterminado { border-left-color:var(--ambar-mk); }
.env-seq { font-family:var(--serif); font-weight:700; color:var(--muted); }
.env-venc { color:var(--muted); }
.env-val { font-family:var(--serif); font-weight:700; color:var(--ink); }
.env-st { font-size:11px; font-weight:600; text-transform:capitalize; color:var(--muted); }
.env-item.env-sucesso .env-st { color:var(--verde-esc); }
.env-item.env-erro .env-st { color:var(--red-esc); }
.env-erro-msg { grid-column:1/-1; font-size:11.5px; color:var(--red-esc); }

.env-acoes { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; margin-top:18px; }
.env-acoes:empty { margin-top:0; }
.env-acoes .ax-btn { padding:10px 16px; font-size:13.5px; font-weight:600; }
/* o .ca-btn normal usa o wordmark; aqui é botão de texto comum */
.env-btn-txt { font-family:inherit; font-size:13.5px; }

/* =====================================================================
   Menu mobile (overlay injetado pelo nav.js) — inativo no trilho fixo
   ===================================================================== */
.menu-overlay { position:fixed; inset:0; background:rgba(20,18,14,.45); z-index:999; display:none; }

@media (max-width:860px){
  .cabecalho { padding:22px 18px 0; }
  .conteudo { padding:16px 18px 36px; }
  .titulo { font-size:30px; }
}

/* =====================================================================
   Descrição: o Motivo da Zeev como texto-fantasma + o botão "usar"
   ---------------------------------------------------------------------
   O texto-fantasma é o Motivo da solicitação. Ele PRECISA se distinguir
   de um valor digitado — senão o analista acha que o campo já está
   preenchido e envia o lançamento com a descrição vazia. Por isso fica
   em itálico, além do cinza que o .ctrl::placeholder já dá.
   ===================================================================== */
.desc-linha { display:flex; align-items:stretch; gap:0; }
.desc-linha .ctrl { flex:1 1 auto; min-width:0; }
.desc-linha .ctrl::placeholder { font-style:italic; }
.btn-usar-motivo { font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  flex:0 0 auto; padding:0 10px; cursor:pointer; color:var(--faint-2);
  background:var(--field); border:1px solid var(--field-brd); border-left:none; }
.btn-usar-motivo:hover { background:#f6e6c8; color:var(--ink); border-color:var(--ambar-brd); }

/* Quem está logado, no pé do trilho.
   ⚠️ O trilho tem 68px e SÓ mostra ícone — texto aqui vaza para fora da tela
   (foi o que aconteceu: a caixa media 147px e começava em x=-40). Por isso a
   sessão é uma bolinha com as iniciais; o nome, o papel e o nível vão no
   title. Mesma regra que já vale para o "Conta Azul conectado", que no trilho
   vira só o pontinho. */
.sessao-box { display:flex; flex-direction:column; align-items:center; gap:5px;
  width:42px; margin:8px auto 0; padding-top:9px; border-top:1px solid var(--line); }
.sessao-avatar { width:26px; height:26px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; background:#efe9e7; color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.02em; flex:0 0 auto; cursor:default; }
.sessao-sair { display:flex; align-items:center; justify-content:center;
  width:26px; height:22px; padding:0; border:0; background:none;
  color:var(--faint-2); cursor:pointer; }
.sessao-sair svg { width:15px; height:15px; }
.sessao-sair:hover { color:var(--red); }

/* =====================================================================
   Página "Notas fiscais" (FR 03) — public/notas.html
   Lista à esquerda (a fila, ↑/↓), e à direita o PDF aberto + a conferência.
   Feita para conferir EM SÉRIE: chegam ~50 NFs num dia só no começo do mês.
   ===================================================================== */
.nf-conteudo { padding-bottom:20px; }
.nf-busca { width:260px; }
.nf-planilha { margin-left:auto; text-decoration:none; font-size:13px; padding:8px 12px; }
.nf-layout { display:grid; grid-template-columns:300px 1fr; gap:14px; align-items:start; }
.nf-lista { display:flex; flex-direction:column; border:1px solid var(--line); background:var(--surface);
  max-height:calc(100vh - 230px); overflow-y:auto; position:sticky; top:12px; }
.nf-item { padding:10px 12px; border-bottom:1px solid var(--hair, #e4e0d8); cursor:pointer; border-left:3px solid transparent; }
.nf-item:hover { background:#f3efe8; }
.nf-item.sel { background:#f9e7e6; border-left-color:var(--red); }
.nf-item-topo { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.nf-nome { font-weight:600; color:var(--ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nf-item-sub { font-size:12px; color:var(--muted-2); margin-top:3px; }
.nf-item-sub .selo { font-size:10.5px; padding:1px 6px; }
.nf-tipo { font-size:11px; font-weight:600; padding:2px 7px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; flex:0 0 auto; }
.nf-tipo-servico { background:#eef3f8; border-color:#c9d6e3; color:#2f5575; }
.nf-tipo-comissao { background:#f6efe2; border-color:#e2cfa6; color:#7a5a1c; }
.nf-detalhe { min-width:0; border:1px solid var(--line); background:var(--surface); }
.nf-escolha { padding:60px 20px; }
.nf-cab { padding:14px 18px; border-bottom:1px solid var(--line); }
.nf-cab-nome { font-family:var(--serif); font-weight:700; font-size:20px; color:var(--ink); }
.nf-cab-sub { font-size:12.5px; color:var(--muted-2); margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.nf-corpo { display:grid; grid-template-columns:1fr 340px; min-height:calc(100vh - 300px); }
.nf-pdf { border-right:1px solid var(--line); background:#e9e6e0; display:flex; }
.nf-iframe { flex:1; width:100%; min-height:calc(100vh - 300px); border:0; background:#fff; }
.nf-img { max-width:100%; object-fit:contain; margin:auto; }
.nf-sem-pdf { margin:auto; font-size:14px; }
.nf-conf { padding:14px 16px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:calc(100vh - 300px); }
.nf-bloco h4 { margin:0 0 7px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:6px; }
.nf-opc { text-transform:none; letter-spacing:0; font-weight:400; }
.nf-recarregar { margin-left:auto; border:0; background:none; cursor:pointer; color:var(--muted); font-size:14px; }
.nf-recarregar:hover { color:var(--red); }
.nf-cands { display:flex; flex-direction:column; gap:6px; }
.nf-cand { display:grid; grid-template-columns:18px 1fr auto; gap:8px; align-items:start; padding:8px 9px; cursor:pointer;
  border:1px solid var(--field-brd); background:var(--field); }
.nf-cand.sel { border-color:var(--red); background:#fbf1f0; }
.nf-cand input { margin-top:2px; }
.nf-cand-corpo { display:flex; flex-direction:column; gap:2px; min-width:0; }
.nf-cand-desc { font-size:12.5px; font-weight:600; color:var(--text); }
.nf-cand-desc .selo { font-size:10px; padding:0 5px; margin-left:4px; }
.nf-cand-meta { font-size:11.5px; color:var(--muted-2); }
.nf-cand-valor { font-weight:700; font-variant-numeric:tabular-nums; font-size:13px; white-space:nowrap; }
.nf-cand-nenhum { grid-template-columns:18px 1fr; background:transparent; border-style:dashed; }
.nf-valor { width:100%; box-sizing:border-box; font-size:16px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.nf-compara { margin-top:6px; font-size:12.5px; font-weight:600; min-height:1em; color:var(--muted-2); }
.nf-compara.ok { color:var(--verde-esc); }
.nf-compara.falta { color:var(--red-esc); }
.nf-conf textarea.ctrl { width:100%; box-sizing:border-box; resize:vertical; }
.nf-acoes { display:flex; gap:8px; }
.nf-aprovar { flex:1; font:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:10px 16px;
  color:#fff; background:var(--verde); border:1px solid var(--verde-esc); }
.nf-aprovar:hover { background:var(--verde-esc); }
.nf-aprovar:disabled, .nf-devol button:disabled { opacity:.6; cursor:default; }
.nf-devol { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px dashed #d99a9d; background:#fdf5f4; }
.nf-devol label { font-size:12px; font-weight:600; color:var(--red-esc); }
.nf-aviso { font-size:12.5px; color:var(--ambar-txt); background:var(--ambar-bg); border:1px solid var(--ambar-brd); padding:8px 10px; }
.nf-kv { font-size:13px; color:var(--text); margin:3px 0; }
.nf-coment { font-size:12.5px; color:var(--text); margin:3px 0; line-height:1.45; }
@media (max-width:1100px){
  .nf-layout { grid-template-columns:1fr; }
  .nf-lista { position:static; max-height:260px; }
  .nf-corpo { grid-template-columns:1fr; }
  .nf-pdf { border-right:0; border-bottom:1px solid var(--line); }
  .nf-conf { max-height:none; }
}