/* =========================================================================
 * HIGIORAL | Gestão Financeira — Estilos
 * Identidade: preto institucional, branco e cinzas claros. Minimalista.
 * Para outro cliente, altere apenas as variáveis em :root.
 * ========================================================================= */
:root {
  --marca: #0a0a0a;
  --marca-2: #1c1c1c;
  --marca-3: #2a2a2a;
  --marca-texto: #f5f5f5;
  --marca-mutado: #8a8a8a;

  --fundo: #f4f4f3;
  --superficie: #ffffff;
  --superficie-2: #fafaf9;
  --borda: #e6e6e3;
  --borda-forte: #d4d4d0;
  --texto: #141414;
  --texto-2: #525252;
  --texto-3: #8a8a87;

  --positivo: #157347;
  --positivo-fundo: #e8f5ee;
  --negativo: #b42318;
  --negativo-fundo: #fdecea;
  --aviso: #a15c07;
  --aviso-fundo: #fdf3e1;
  --info: #1f4e8c;
  --info-fundo: #e9f0fa;

  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --sombra-g: 0 12px 40px rgba(0,0,0,.18);
  --menu-largura: 264px;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--fonte); font-size: 14px; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'cv11' 1; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
code { font-family: var(--mono); font-size: 12px; background: var(--superficie-2); padding: 1px 4px; border-radius: 4px; }
.ico { flex-shrink: 0; }
.mutado { color: var(--texto-3); }
.oculto { display: none !important; }

/* ---------------- Estrutura ---------------- */
.app { display: grid; grid-template-columns: var(--menu-largura) 1fr; min-height: 100vh; }
.menu { background: var(--marca); color: var(--marca-texto); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 30; }
.menu-logo { padding: 22px 22px 18px; border-bottom: 1px solid var(--marca-3); }
.menu-logo img { height: 34px; display: block; }
.menu-logo small { display: block; margin-top: 8px; color: var(--marca-mutado); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.menu-nav { flex: 1; overflow-y: auto; padding: 10px 10px 20px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.menu-grupo { margin-top: 6px; }
.menu-grupo-cab { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; color: var(--marca-mutado); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 12px 12px 6px; cursor: pointer; }
.menu-grupo-cab:hover { color: #cfcfcf; }
.menu-grupo-cab .ico { transition: transform .2s; }
.menu-grupo.recolhido .menu-grupo-cab .ico { transform: rotate(-90deg); }
.menu-grupo.recolhido .menu-itens { display: none; }
.menu-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 7px; color: #c9c9c9; text-decoration: none; font-size: 13.5px; margin: 1px 0; }
.menu-item:hover { background: var(--marca-2); color: #fff; }
.menu-item.ativo { background: #fff; color: var(--marca); font-weight: 600; }
.menu-item .fase { margin-left: auto; font-size: 9.5px; letter-spacing: .06em; color: #6b6b6b; border: 1px solid #333; border-radius: 4px; padding: 0 5px; }
.menu-item.ativo .fase { color: #777; border-color: #ddd; }
.menu-item .contador { margin-left: auto; background: #3a3a3a; color: #fff; font-size: 11px; border-radius: 10px; padding: 0 7px; font-weight: 600; }
.menu-item.ativo .contador { background: var(--marca); }
.menu-rodape { padding: 14px 22px; border-top: 1px solid var(--marca-3); font-size: 11px; color: var(--marca-mutado); }

.principal { display: flex; flex-direction: column; min-width: 0; }
.topo { height: 58px; background: var(--superficie); border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 14px; padding: 0 28px; position: sticky; top: 0; z-index: 20; }
.topo .migalha { color: var(--texto-3); font-size: 13px; }
.topo .migalha b { color: var(--texto); font-weight: 600; }
.topo .espaco { flex: 1; }
.topo .btn-menu-movel { display: none; }
.ambiente { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 4px 11px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.ambiente::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--positivo); }
.ambiente.demo { background: var(--aviso-fundo); border-color: #f0d9a8; color: var(--aviso); }
.ambiente.demo::before { background: var(--aviso); }
.faixa-demo { background: repeating-linear-gradient(45deg, #fff4dc, #fff4dc 10px, #fdedc8 10px, #fdedc8 20px); color: #7a4605; text-align: center; font-size: 12px; font-weight: 600; padding: 6px; letter-spacing: .04em; border-bottom: 1px solid #f0d9a8; }
.conteudo { padding: 26px 28px 40px; flex: 1; max-width: 1600px; width: 100%; }
.rodape-app { padding: 16px 28px; font-size: 11.5px; color: var(--texto-3); border-top: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------- Cabeçalho de página ---------------- */
.pagina-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pagina-cab h1 { font-size: 22px; }
.pagina-cab p { margin: 5px 0 0; color: var(--texto-2); font-size: 13.5px; max-width: 760px; line-height: 1.5; }
.pagina-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Botões ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--raio-p); border: 1px solid transparent; cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover:not(:disabled) { background: #2b2b2b; }
.btn-secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); border-color: #bdbdb8; }
.btn-perigo { background: var(--negativo); color: #fff; }
.btn-perigo:hover:not(:disabled) { background: #8f1c13; }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover:not(:disabled) { background: #ececea; color: var(--texto); }
.btn-p { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-icone { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 0; background: transparent; color: var(--texto-2); cursor: pointer; }
.btn-icone:hover { background: #efefed; color: var(--texto); }
.btn-icone.perigo:hover { background: var(--negativo-fundo); color: var(--negativo); }
.grupo-botoes { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); overflow: hidden; }
.grupo-botoes button { border: 0; background: var(--superficie); padding: 0 12px; height: 32px; font-size: 12.5px; cursor: pointer; border-right: 1px solid var(--borda); color: var(--texto-2); }
.grupo-botoes button:last-child { border-right: 0; }
.grupo-botoes button.ativo { background: var(--marca); color: #fff; }

/* ---------------- Cartões / indicadores ---------------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.cartao-cab h3 { font-size: 14.5px; }
.cartao-cab p { margin: 3px 0 0; font-size: 12.5px; color: var(--texto-3); }
.cartao-corpo { padding: 18px; }
.cartao + .cartao, .cartao + .grade, .grade + .cartao { margin-top: 18px; }
.grade { display: grid; gap: 14px; }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.indicador { padding: 16px 18px; position: relative; }
.indicador .rotulo { font-size: 12px; color: var(--texto-2); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.indicador .rotulo .ico { color: var(--texto-3); }
.indicador .valor-g { font-size: 23px; font-weight: 650; margin-top: 8px; letter-spacing: -0.02em; }
.indicador .det { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.indicador.destaque { background: var(--marca); color: #fff; border-color: var(--marca); }
.indicador.destaque .rotulo, .indicador.destaque .det { color: #a3a3a3; }
.indicador.clicavel { cursor: pointer; transition: border-color .15s, transform .15s; }
.indicador.clicavel:hover { border-color: var(--borda-forte); transform: translateY(-1px); }

/* ---------------- Tabelas ---------------- */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabela th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-2); background: var(--superficie-2); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid #f0f0ee; vertical-align: middle; }
.tabela tbody tr:hover td { background: #fafaf8; }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.selecionada td { background: #f3f3f0; }
.tabela .num, .tabela th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .centro { text-align: center; }
.tabela .acoes { text-align: right; white-space: nowrap; width: 1%; }
.tabela tfoot td { font-weight: 600; background: var(--superficie-2); border-top: 1px solid var(--borda); border-bottom: 0; }
.tabela .hist { max-width: 420px; min-width: 220px; }
.tabela .nw { white-space: nowrap; }
.tabela .hist div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .hist small { color: var(--texto-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela th.ordenavel { cursor: pointer; user-select: none; }
.tabela th[data-dir="asc"]::after { content: ' ▲'; font-size: 9px; }
.tabela th[data-dir="desc"]::after { content: ' ▼'; font-size: 9px; }
.tabela tr.linha-grupo td { background: var(--superficie-2); font-weight: 600; }
.tabela tr.inativo td { color: var(--texto-3); }
.tabela-rolagem { max-height: 520px; overflow: auto; }
.valor.pos { color: var(--positivo); }
.valor.neg { color: var(--negativo); }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 12.5px; color: var(--texto-2); gap: 10px; flex-wrap: wrap; }

/* ---------------- Selos ---------------- */
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; border: 1px solid transparent; }
.selo-neutro { background: #f0f0ee; color: var(--texto-2); }
.selo-sucesso { background: var(--positivo-fundo); color: var(--positivo); }
.selo-erro { background: var(--negativo-fundo); color: var(--negativo); }
.selo-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo-info { background: var(--info-fundo); color: var(--info); }
.selo-escuro { background: var(--marca); color: #fff; }

/* ---------------- Filtros ---------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid var(--borda); }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--texto-2); font-weight: 500; }
.filtros input, .filtros select { height: 34px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 0 10px; background: #fff; min-width: 130px; font-size: 13px; }
.filtros input[type=checkbox] { min-width: 0; height: auto; }
.filtros .busca { position: relative; flex: 1; min-width: 220px; }
.filtros .busca input { width: 100%; padding-left: 34px; }
.filtros .busca .ico { position: absolute; left: 10px; bottom: 9px; color: var(--texto-3); }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); padding: 0 12px; overflow-x: auto; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 12px; font-size: 13px; color: var(--texto-2); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.abas button.ativa { color: var(--texto); border-bottom-color: var(--marca); font-weight: 600; }
.abas button .n { background: #eeeeec; border-radius: 10px; font-size: 11px; padding: 0 6px; }

/* ---------------- Formulários ---------------- */
.form-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; grid-column: span 6; }
.campo.meia { grid-column: span 3; }
.campo.terco { grid-column: span 2; }
.campo > span { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.campo .obrig { color: var(--negativo); font-style: normal; }
.campo input, .campo select, .campo textarea { border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 8px 10px; background: #fff; font-size: 13.5px; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus { outline: 2px solid #11111122; border-color: #555; }
.campo small { color: var(--texto-3); font-size: 11.5px; line-height: 1.4; }
.campo-check { flex-direction: row; align-items: center; gap: 8px; }
.campo.campo-check input { width: auto; }
.campo-check span { font-size: 13px; color: var(--texto); }
.campo-check small { flex-basis: 100%; }
.secao-form { grid-column: span 6; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding-top: 8px; border-top: 1px solid var(--borda); margin-top: 4px; }
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.checks label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.checks label small { display: block; color: var(--texto-3); font-size: 11.5px; }

/* ---------------- Modal / gaveta ---------------- */
.modal-fundo, .gaveta-fundo { position: fixed; inset: 0; background: rgba(10,10,10,.45); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; animation: aparecer .15s; }
.modal { background: var(--superficie); border-radius: 12px; width: 100%; box-shadow: var(--sombra-g); animation: subir .18s; }
.modal-cab { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px 12px; gap: 12px; }
.modal-cab h3 { font-size: 16px; }
.modal-sub { margin: 4px 0 0; color: var(--texto-3); font-size: 12.5px; }
.modal-corpo { padding: 6px 20px 18px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 12px 12px; }
.confirmacao p { margin: 0 0 14px; line-height: 1.55; color: var(--texto-2); }
.confirmacao .campo { margin-top: 10px; }
.gaveta-fundo { justify-content: flex-end; padding: 0; align-items: stretch; }
.gaveta { background: var(--superficie); height: 100vh; overflow-y: auto; box-shadow: var(--sombra-g); animation: deslizar .2s; display: flex; flex-direction: column; }
.gaveta-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: #fff; z-index: 2; }
.gaveta-cab h3 { font-size: 16px; }
.gaveta-corpo { padding: 18px 20px 30px; }
.saindo { opacity: 0; transition: opacity .15s; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }
@keyframes deslizar { from { transform: translateX(30px); opacity: 0; } }

/* ---------------- Detalhes ---------------- */
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.dl dt { color: var(--texto-3); }
.dl dd { margin: 0; word-break: break-word; }
.bloco { margin-top: 22px; }
.bloco h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin-bottom: 10px; }
.bruto { font-family: var(--mono); font-size: 11.5px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 6px; padding: 10px; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 0 0 14px 12px; font-size: 13px; }
.linha-tempo li::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--marca); }
.linha-tempo .lt-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linha-tempo .lt-cab span { color: var(--texto-3); font-size: 12px; }
.linha-tempo ul { margin: 6px 0 0; padding-left: 16px; color: var(--texto-2); font-size: 12.5px; }

/* ---------------- Avisos ---------------- */
.alerta { display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; border: 1px solid; align-items: flex-start; }
.alerta .ico { margin-top: 2px; }
.alerta-info { background: var(--info-fundo); border-color: #cfdcf0; color: #1d3e6b; }
.alerta-aviso { background: var(--aviso-fundo); border-color: #f0d9a8; color: #7a4605; }
.alerta-erro { background: var(--negativo-fundo); border-color: #f5c6c1; color: #8f1c13; }
.alerta-sucesso { background: var(--positivo-fundo); border-color: #bfe3cf; color: #0f5534; }
.alerta + .alerta { margin-top: 8px; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--marca); color: #fff; padding: 12px 14px; border-radius: 8px; box-shadow: var(--sombra-g); font-size: 13px; line-height: 1.45; animation: subir .2s; }
.toast-sucesso .ico { color: #6ee7a8; }
.toast-erro { background: #7f1d17; }
.toast-aviso .ico { color: #fbbf24; }
.vazio { text-align: center; padding: 48px 20px; color: var(--texto-3); }
.vazio .ico { color: #c4c4c0; }
.vazio h4 { color: var(--texto); margin: 12px 0 6px; font-size: 15px; }
.vazio p { margin: 0 auto 16px; max-width: 460px; line-height: 1.5; font-size: 13px; }

/* ---------------- Importação ---------------- */
.zona-arquivo { border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); padding: 34px 20px; text-align: center; background: var(--superficie); cursor: pointer; transition: border-color .15s, background .15s; }
.zona-arquivo:hover, .zona-arquivo.arrastando { border-color: var(--marca); background: #fafaf8; }
.zona-arquivo .ico { color: var(--texto-2); }
.zona-arquivo h3 { font-size: 15px; margin: 10px 0 4px; }
.zona-arquivo p { margin: 0; color: var(--texto-3); font-size: 12.5px; }
.formatos { display: inline-flex; gap: 6px; margin-top: 12px; }
.formatos span { font-size: 11px; font-weight: 600; border: 1px solid var(--borda-forte); border-radius: 4px; padding: 1px 7px; color: var(--texto-2); }
.mapa-grade { overflow: auto; max-height: 420px; border: 1px solid var(--borda); border-radius: 8px; }
.mapa-grade table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.mapa-grade th { background: var(--superficie-2); padding: 6px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 1; }
.mapa-grade th select { font-size: 12px; padding: 4px; border: 1px solid var(--borda-forte); border-radius: 4px; min-width: 120px; background: #fff; }
.mapa-grade th select.mapeada { border-color: var(--marca); background: var(--marca); color: #fff; }
.mapa-grade td { padding: 5px 8px; border-bottom: 1px solid #f2f2f0; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.mapa-grade td.nl { color: var(--texto-3); font-size: 11px; text-align: right; cursor: pointer; }
.mapa-grade tr.cabecalho td { background: #111; color: #fff; font-weight: 600; }
.mapa-grade tr.antes td { color: #bdbdb8; }
.passos { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--texto-3); margin-bottom: 16px; flex-wrap: wrap; }
.passos b { color: var(--texto); }
.passos .sep { color: #c9c9c5; }
.ref-dup { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.decisao { display: inline-flex; gap: 4px; }
.decisao button { font-size: 11.5px; border: 1px solid var(--borda-forte); background: #fff; border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.decisao button.sim.ativo { background: var(--positivo); color: #fff; border-color: var(--positivo); }
.decisao button.nao.ativo { background: #555; color: #fff; border-color: #555; }
.resumo-imp { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.resumo-imp div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.resumo-imp small { display: block; color: var(--texto-3); font-size: 11.5px; }
.resumo-imp b { white-space: nowrap; }
.resumo-imp b { font-size: 17px; }

/* ---------------- Plano de contas ---------------- */
.arvore-grupo > .linha { display: grid; grid-template-columns: 28px 70px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.arvore-grupo > .linha.grupo { background: var(--superficie-2); font-weight: 600; cursor: pointer; }
.arvore-grupo > .linha.cat { padding-left: 42px; }
.arvore-grupo > .linha.cat:hover { background: #fafaf8; }
.arvore-grupo > .linha .cod { font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.arvore-grupo.recolhido > .linha.cat { display: none; }
.arvore-grupo.recolhido .seta { transform: rotate(-90deg); }
.seta { transition: transform .2s; color: var(--texto-3); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: #f0f0ee; color: var(--texto-2); white-space: nowrap; }
.tag.t-rec { background: var(--positivo-fundo); color: var(--positivo); }
.tag.t-pag { background: var(--negativo-fundo); color: var(--negativo); }
.tag.t-fin { background: var(--info-fundo); color: var(--info); }
.tag.t-trf { background: #ece9f8; color: #4b3a99; }
.tag.t-pat { background: var(--aviso-fundo); color: var(--aviso); }
.lista-desc { display: flex; flex-wrap: wrap; gap: 5px; }
.lista-desc span { font-family: var(--mono); font-size: 11px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 4px; padding: 1px 6px; }

/* ---------------- Divisões ---------------- */
.divisoes-tab td { padding: 4px; border: 0; }
.divisoes-tab input, .divisoes-tab select { width: 100%; border: 1px solid var(--borda-forte); border-radius: 5px; padding: 6px 8px; font-size: 13px; background: #fff; }
.soma-div { font-size: 12.5px; margin-top: 6px; }

/* ---------------- Fase futura ---------------- */
.fase-futura { max-width: 760px; }
.fase-futura ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.8; color: var(--texto-2); }


/* valores negativos em indicadores */
.indicador .valor-g.neg { color: var(--negativo); }

/* ---------------- Menu recolhível (somente ícones) ---------------- */
.menu-logo { position: relative; }
.btn-recolher { position: absolute; top: 18px; right: 12px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--marca-3); background: transparent; color: var(--marca-mutado); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-recolher:hover { color: #fff; background: var(--marca-2); }
@media (min-width: 901px) {
body.menu-compacto { --menu-largura: 68px; }
body.menu-compacto .menu { overflow: visible; }
body.menu-compacto .menu-logo { padding: 16px 8px 12px; text-align: center; }
body.menu-compacto .menu-logo img { height: auto; width: 50px; margin: 0 auto; }
body.menu-compacto .menu-logo small { display: none; }
body.menu-compacto .btn-recolher { position: static; margin: 10px auto 0; display: flex; }
body.menu-compacto .menu-nav { overflow: visible; padding: 6px 8px 16px; }
body.menu-compacto .menu-grupo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--marca-3); }
body.menu-compacto .menu-grupo:first-child { border-top: 0; }
body.menu-compacto .menu-grupo-cab { display: none; }
body.menu-compacto .menu-grupo.recolhido .menu-itens { display: block; }
body.menu-compacto .menu-item { justify-content: center; padding: 9px 0; position: relative; }
body.menu-compacto .menu-item .rotulo-item, body.menu-compacto .menu-item .fase { display: none; }
body.menu-compacto .menu-item:hover::after, body.menu-compacto .menu-item:focus-visible::after {
  content: attr(data-dica); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: #1d1d1d; color: #fff; font-size: 12.5px; font-weight: 500; padding: 6px 10px; border-radius: 6px; box-shadow: var(--sombra-g); z-index: 50; pointer-events: none;
}
body.menu-compacto .menu-rodape { font-size: 0; padding: 10px; }
body.menu-compacto .menu-rodape::before { content: 'H7'; font-size: 10px; letter-spacing: .1em; display: block; text-align: center; }
}

/* ---------------- Cabeçalho: informações e período ---------------- */
.topo-info { display: flex; gap: 8px; align-items: center; }
.chip-topo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 999px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.chip-topo b { color: var(--texto); font-weight: 600; }
a.chip-topo.alerta { color: var(--aviso); background: var(--aviso-fundo); border-color: #f2dcb3; }
a.chip-topo.alerta b { color: var(--aviso); }
a.chip-topo.ok { color: var(--positivo); background: var(--positivo-fundo); border-color: #cbe7d6; }
.topo-periodo { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); }
.topo-periodo select { border: 1px solid var(--borda-forte); border-radius: 7px; background: #fff; font: inherit; font-size: 12.5px; padding: 5px 8px; color: var(--texto); max-width: 170px; }

/* ---------------- Atenção necessária ---------------- */
.atencao { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.atencao-item { display: block; text-decoration: none; color: inherit; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 12px 14px; background: var(--superficie); transition: border-color .15s, box-shadow .15s; }
.atencao-item:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.atencao-item .qtd { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 2px 0; }
.atencao-item .tit { font-size: 12.5px; font-weight: 600; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.atencao-item .sub { font-size: 11.5px; color: var(--texto-3); }
.atencao-item.erro.ativo { border-left: 3px solid var(--negativo); }
.atencao-item.erro.ativo .qtd { color: var(--negativo); }
.atencao-item.aviso.ativo { border-left: 3px solid var(--aviso); }
.atencao-item.aviso.ativo .qtd { color: var(--aviso); }
.atencao-item.info.ativo { border-left: 3px solid var(--info); }
.atencao-item.zero { opacity: .62; }

/* ---------------- Conciliação ---------------- */
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chip-f { border: 1px solid var(--borda-forte); background: #fff; border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; color: var(--texto-2); }
.chip-f:hover { border-color: var(--texto-3); }
.chip-f.ativo { background: var(--marca); border-color: var(--marca); color: #fff; }
.chip-f .n { opacity: .7; margin-left: 4px; }
.barra-lote { position: sticky; top: 58px; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--marca); color: #fff; border-radius: var(--raio-p); margin: 0 16px 12px; font-size: 13px; }
.barra-lote .btn-secundario { background: #fff; }
.barra-lote .espaco { flex: 1; }
.tabela-conc td { vertical-align: top; padding: 8px 7px; }
.tabela-conc th { padding: 9px 7px; }
.tabela-conc .hist { max-width: 230px; min-width: 150px; }
.tabela-conc .btn-icone { width: 28px; height: 28px; }
.tabela-conc .sel-c { width: 100%; min-width: 100px; max-width: 140px; border: 1px solid var(--borda-forte); border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 12px; background: #fff; }
.tabela-conc .sel-c.sugerido { border-color: #8fb3e6; background: var(--info-fundo); }
.tabela-conc .sel-c.risco { border-color: #e7c27d; background: var(--aviso-fundo); }
.tabela-conc .sug { display: block; font-size: 11px; color: var(--info); margin-top: 3px; max-width: 320px; }
.tabela-conc .sug.risco { color: var(--aviso); }
.tabela-conc .acoes-linha { white-space: nowrap; display: flex; gap: 4px; }
.tabela-conc tr.conciliado td { background: #fbfbfa; }
.tabela-conc input[type=checkbox] { width: 15px; height: 15px; }

/* ---------------- Conciliação v1.3: tabela enxuta + painel lateral ---------------- */
.conc-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.conc-layout.com-painel { grid-template-columns: minmax(0, 1fr) 380px; }
.conc-layout.com-painel .tabela-conc.v13 .hist { min-width: 100px; max-width: 140px; }
.conc-layout.com-painel .tabela-conc.v13 .cel-class { min-width: 60px; max-width: 110px; }
.conc-layout.com-painel .tabela-conc.v13 td, .conc-layout.com-painel .tabela-conc.v13 th { padding-left: 5px; padding-right: 5px; }
.conc-layout.com-painel .tabela-conc.v13 td { font-size: 12.5px; }
.conc-layout.com-painel .tabela-conc.v13 .hist .marcas { display: none; }
.conc-lista { min-width: 0; }
.conc-layout.com-painel .col-opc { display: none; }
.tabela-conc tbody tr.clicavel { cursor: pointer; }
.tabela-conc tbody tr:hover td { background: #fafaf8; }
.tabela-conc tbody tr.ativo td { background: #f1f1ee; }
.tabela-conc tbody tr.ativo td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
.tabela-conc .hist .marcas { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; }
.tabela-conc .hist .marca-rec { font-size: 11px; color: var(--texto-3); display: inline-flex; align-items: center; gap: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-conc .cel-class { font-size: 12.5px; max-width: 160px; min-width: 70px; }
.tabela-conc.v13 th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tabela-conc.v13 .hist { max-width: 240px; min-width: 130px; }
.tabela-conc.v13 td, .tabela-conc.v13 th { padding-left: 6px; padding-right: 6px; }
.tabela-conc.v13 .selo { white-space: nowrap; }
/* Coluna de ação sempre visível, mesmo se a tabela precisar de rolagem horizontal */
.tabela-conc.v13 th:last-child, .tabela-conc.v13 td.acoes-linha { position: sticky; right: 0; background: var(--superficie); box-shadow: -1px 0 0 var(--borda); z-index: 1; }
.tabela-conc.v13 thead th:last-child { background: var(--superficie-2); z-index: 2; }
.tabela-conc.v13 tbody tr:hover td.acoes-linha { background: #fafaf8; }
.tabela-conc.v13 tbody tr.ativo td.acoes-linha { background: #f1f1ee; }
.tabela-conc.v13 tr.conciliado td.acoes-linha { background: #fbfbfa; }
.tabela-conc.v13 td.acoes-linha { display: table-cell; }
.sug-cel { color: var(--info); font-style: italic; }
.sug-cel::before { content: '◇ '; font-style: normal; font-size: 10px; }
.sug-cel.risco { color: var(--aviso); }
.ico-alerta { color: var(--aviso); margin-left: 4px; display: inline-flex; vertical-align: middle; }
.tabela-conc .acoes-linha .btn-p { height: 28px; padding: 0 10px; font-size: 12px; }
.painel-conc { border-left: 1px solid var(--borda); background: var(--superficie); position: sticky; top: 58px; max-height: calc(100vh - 58px); overflow-y: auto; align-self: stretch; }
.painel-conc[hidden] { display: none; }
.pc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.pc-nav { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--texto-3); }
.pc-nav .btn-icone { width: 28px; height: 28px; }
.pc-nav .btn-icone:disabled { opacity: .35; cursor: default; }
.pc-corpo { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.pc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pc-valor { font-size: 22px; font-weight: 650; }
.dl-comp { grid-template-columns: 128px 1fr; font-size: 12.5px; gap: 6px 10px; }
.pc-bloco { border: 1px solid var(--borda); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pc-bloco .campo { grid-column: auto; }
.pc-sug { background: var(--info-fundo); border-color: #cfdcf0; }
.pc-sug.revisao { background: var(--aviso-fundo); border-color: #f0d9a8; }
.pc-pend { background: #fbfbf9; }
.pc-sug-tit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-sug-tit .mutado { font-size: 11.5px; flex-basis: 100%; }
.pc-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-rot { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin-bottom: 3px; }
.pc-mini { font-size: 11.5px; color: var(--texto-2); margin-top: 4px; line-height: 1.4; }
.pc-det summary { cursor: pointer; font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.pc-det ul { margin: 4px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--texto-2); }
.pc-alerta { padding: 8px 10px; font-size: 12.5px; }
.pc-alerta ul { margin: 2px 0 0; padding-left: 16px; }
.pc-botoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-acoes { margin-top: 4px; }
.pc-acoes .btn { flex: 1; justify-content: center; }
.pc-link { font-size: 12px; color: var(--texto-2); }
.pc-check { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--texto); cursor: pointer; }
.pc-check input { width: auto; margin-top: 2px; }
.pc-check[hidden] { display: none; }
.pc-check.destaque { outline: 2px solid var(--aviso); outline-offset: 3px; border-radius: 4px; }
.pc-avancar { color: var(--texto-3); font-size: 12px; }
.pc-linha { display: flex; gap: 6px; }
.pc-linha select { flex: 1; min-width: 0; }
.pc-bloco select.sugerido { border-color: #8fb3e6; background: var(--info-fundo); }
.pc-bloco select.risco { border-color: #e7c27d; background: var(--aviso-fundo); }
.pc-bloco select:disabled { background: var(--superficie-2); color: var(--texto-3); }
.pc-rodape { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; padding-top: 4px; border-top: 1px solid var(--borda); }
.pc-rodape a { color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding-top: 6px; }
.pc-rodape a:hover { color: var(--texto); }
.resumo-lote { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.resumo-lote > div { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.resumo-lote b { font-size: 20px; font-weight: 650; }
.resumo-lote span { font-size: 12px; color: var(--texto-2); }
.resumo-lote .elegiveis { border-color: #bfe3cf; background: var(--positivo-fundo); }
.resumo-lote .divergencias b { color: var(--negativo); }
.resumo-lote .pendentes b { color: var(--aviso); }
.titulo-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin: 16px 0 8px; }
@media (max-width: 1180px) {
  .conc-layout.com-painel { grid-template-columns: minmax(0, 1fr); }
  .painel-conc { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); max-height: 100vh; z-index: 90; box-shadow: var(--sombra-g); }
  .conc-layout.com-painel .col-opc { display: table-cell; }
}
@media (max-width: 560px) { .resumo-lote { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-duas { grid-template-columns: 1fr; } }
.marca-rec { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--texto-3); border: 1px solid var(--borda); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
details.explica summary { cursor: pointer; font-size: 12.5px; color: var(--info); }
details.explica p { font-size: 12.5px; color: var(--texto-2); line-height: 1.55; margin: 8px 0 0; }
.cand-lista label { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); margin-bottom: 6px; cursor: pointer; }
.cand-lista label:hover { border-color: var(--borda-forte); }
.cand-lista input { margin-top: 3px; }

/* Prévia da importação: histórico completo */
.tabela-previa .hist-completo { min-width: 260px; max-width: 520px; white-space: normal; word-break: break-word; }
.tabela-previa .hist-completo small { display: block; color: var(--texto-3); }

/* ---------------- Responsivo ---------------- */
@media (max-width: 1200px) { .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; left: 0; top: 0; width: var(--menu-largura); transform: translateX(-100%); transition: transform .2s; }
  .menu.aberto { transform: none; box-shadow: var(--sombra-g); }
  .topo .btn-menu-movel { display: inline-flex; }
  .conteudo { padding: 18px 16px 30px; }
  .topo { padding: 0 16px; }
  .grade-3, .grade-2 { grid-template-columns: 1fr; }
  .campo.meia, .campo.terco { grid-column: span 6; }
  .checks { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  .arvore-grupo > .linha { grid-template-columns: 20px 44px 1fr auto; gap: 6px 8px; }
  .arvore-grupo > .linha.cat { padding-left: 14px; }
  .arvore-grupo > .linha.grupo > span:nth-child(4) { display: none; }
  .arvore-grupo > .linha .tags { grid-column: 2 / -1; grid-row: 2; }
  .arvore-grupo > .linha .acoes { white-space: nowrap; }
  .arvore-grupo > .linha .acoes .btn-icone { width: 28px; }
  .topo .ambiente { font-size: 11px; padding: 3px 8px; white-space: nowrap; }
  .topo-info { display: none; }
  .topo-periodo select { max-width: 120px; }
  .btn-recolher { display: none !important; }
  .barra-lote { top: 58px; margin: 0 0 12px; }
}
@media (max-width: 1280px) { .topo-info .chip-topo:first-child { display: none; } }
@media (max-width: 560px) {
  .grade-4 { grid-template-columns: 1fr; }
  .topo { gap: 8px; }
  .topo .migalha, .topo-periodo .ico { display: none; }
  .topo .ambiente { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
  .atencao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atencao-item { padding: 10px; }
  .atencao-item .sub { display: none; }
}

@media print {
  .menu, .topo, .pagina-acoes, .filtros, .rodape-app .acoes { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .cartao { box-shadow: none; }
}

/* Menu "Mais ações" (Conciliação) */
.menu-mais { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: var(--sombra-g); padding: 4px; min-width: 250px; }
.menu-mais button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; color: var(--texto); }
.menu-mais button:hover { background: var(--superficie-2); }

/* Relatório de esclarecimentos (impressão dentro do sistema, sem pop-up) */
#relatorioImpressao { position: fixed; inset: 0; z-index: 90; background: #e9e9e6; overflow: auto; padding: 20px; }
#relatorioImpressao .ri-acoes { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
#relatorioImpressao .ri-folha { background: #fff; max-width: 1050px; margin: 0 auto; padding: 28px; font-size: 12px; box-shadow: var(--sombra); }
#relatorioImpressao header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0a0a0a; padding-bottom: 10px; margin-bottom: 14px; }
#relatorioImpressao header img { height: 30px; }
#relatorioImpressao h1 { font-size: 17px; margin: 0; }
#relatorioImpressao .ri-intro { background: #f4f4f3; border-radius: 8px; padding: 10px 12px; line-height: 1.5; margin-bottom: 14px; }
#relatorioImpressao table { width: 100%; border-collapse: collapse; }
#relatorioImpressao th { background: #0a0a0a; color: #fff; text-align: left; font-size: 10.5px; padding: 7px; text-transform: uppercase; letter-spacing: .04em; }
#relatorioImpressao td { border-bottom: 1px solid #ddd; padding: 8px 7px; vertical-align: top; }
#relatorioImpressao .ri-v { text-align: right; white-space: nowrap; }
#relatorioImpressao .ri-e { color: #157347; } #relatorioImpressao .ri-s { color: #b42318; }
#relatorioImpressao .ri-resp { height: 46px; border: 1px solid #bbb; border-radius: 4px; }
#relatorioImpressao footer { margin-top: 18px; font-size: 10px; color: #777; display: flex; justify-content: space-between; }
@media print {
  body.modo-impressao > *:not(#relatorioImpressao) { display: none !important; }
  body.modo-impressao #relatorioImpressao { position: static; padding: 0; background: #fff; overflow: visible; }
  body.modo-impressao .ri-acoes { display: none; }
  body.modo-impressao .ri-folha { box-shadow: none; padding: 0; max-width: none; }
}