/* ============================================================
   COMPONENTES DO DASHBOARD — reformulação TASK-016 v2
   A tela conta uma história de cima para baixo:
   recorte → situação → análise → leitura → detalhamento.
   Nada aqui usa cartão como enfeite: só o que é lido em bloco
   ganha superfície própria.
   ============================================================ */

.dash{display:flex; flex-direction:column; gap:var(--s-4);}

/* identificação do arquivo exportado, que circula sem a casca do produto */
.export-cabecalho{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4);
  flex-wrap:wrap; padding-bottom:var(--s-3); border-bottom:1px solid var(--border);
}
.export-cabecalho h1{font-size:var(--t-secao); letter-spacing:-.02em; margin-top:2px;}
.export-meta{font-size:var(--t-mini); color:var(--text-secondary);}

/* ============================================================
   1. RECORTE — a faixa de controle, colada no topo da área útil
   ============================================================ */
.recorte{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  margin:0 calc(var(--s-5) * -1);
  padding:var(--s-3) var(--s-5) var(--s-2);
}
/* dentro do produto a faixa encosta na barra de contexto; no arquivo exportado,
   que não tem casca, ela encosta no topo da janela */
.app-main .recorte{top:var(--topbar);}
.recorte-linha{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5) var(--s-6);}
.recorte-periodo, .recorte-grupo, .recorte-cenario, .recorte-acoes{display:flex; align-items:center; gap:var(--s-2);}
.recorte-acoes{margin-left:auto;}
.recorte-acoes > div{display:flex; align-items:center; gap:var(--s-2);}
.recorte-periodo .rotulo, .recorte-grupo .rotulo{margin-right:var(--s-1);}

/* --- cenário como camadas que se somam ---
   Realizado e Previsão não são opções exclusivas: são camadas de dado que se
   ligam e desligam. As duas ligadas equivalem ao antigo "Realizado + Previsão",
   por isso o terceiro botão deixou de existir. O marcador é o mesmo que as
   telas de Contas usam, para o mesmo conceito ter uma aparência só. */
.camadas{
  display:inline-flex; align-items:stretch; gap:2px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:2px;
}
.camada{
  appearance:none; cursor:pointer; font-family:inherit;
  font-size:var(--t-corpo); font-weight:500;
  display:inline-flex; align-items:center; gap:7px;
  padding:0 var(--s-3); height:calc(var(--altura-controle) - 6px);
  border:0; background:transparent; color:var(--text-tertiary);
  border-radius:calc(var(--radius-md) - 2px); white-space:nowrap;
  transition:color .12s, background .12s;
}
.camada:hover{color:var(--text-primary);}
.camada[aria-pressed="true"]{
  background:var(--surface); color:var(--text-primary); font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,33,.08);
}
.camada:focus-visible{outline:none; box-shadow:var(--ring);}
/* desligada, a camada guarda o marcador esmaecido: some a cor, não o sentido */
.camada .marca-realizado, .camada .marca-previsto{opacity:.35; transition:opacity .12s;}
.camada[aria-pressed="true"] .marca-realizado,
.camada[aria-pressed="true"] .marca-previsto{opacity:1;}
.camada.recusada{animation:camada-recusa .22s;}
@keyframes camada-recusa{
  25%{transform:translateX(-3px);} 75%{transform:translateX(3px);}
}


/* --- controle segmentado: um trilho, sem botões soltos --- */
.segmentado{
  display:inline-flex; align-items:stretch;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:2px; gap:2px;
}
.segmentado button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:var(--t-corpo); font-weight:500; color:var(--text-secondary);
  padding:0 var(--s-3); height:calc(var(--altura-controle) - 6px);
  border-radius:calc(var(--radius-md) - 2px); white-space:nowrap;
  transition:color .12s, background .12s;
}
.segmentado button:hover{color:var(--text-primary);}
.segmentado button.active{
  background:var(--surface); color:var(--text-primary); font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,33,.08);
}
.segmentado button:focus-visible{outline:none; box-shadow:var(--ring);}
.segmentado-mini button{font-size:var(--t-mini); height:24px; padding:0 var(--s-2);}
.segmentado-abas{background:transparent; border:0; padding:0; gap:var(--s-1); flex-wrap:wrap;}
.segmentado-abas button{
  height:28px; border-radius:var(--radius-pill);
  border:1px solid transparent; color:var(--text-secondary);
}
.segmentado-abas button.active{
  background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 35%, transparent);
  color:var(--brand); box-shadow:none;
}
/* Foco visível nas abas: o `box-shadow:none` da aba ativa apagava o anel (F2-13). */
.segmentado-abas button:focus-visible, .segmentado-abas button.active:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; box-shadow:var(--ring);
}

.select-compacto{height:calc(var(--altura-controle) - 2px); font-size:var(--t-corpo); max-width:210px;}

/* contador de filtros dentro do botão */
.contador{
  display:inline-grid; place-items:center; min-width:17px; height:17px;
  margin-left:var(--s-1); padding:0 5px;
  background:var(--brand); color:var(--brand-on);
  border-radius:var(--radius-pill); font-size:var(--t-micro); font-weight:700;
}
#abrir-filtros svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; margin-right:var(--s-1);}

/* --- chips do recorte ativo --- */
.active-chips{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1); margin-top:var(--s-2); min-height:24px;}
.achip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-pill); padding:2px var(--s-1) 2px var(--s-3);
  font-size:var(--t-mini); color:var(--text-primary);
}
.achip button{
  appearance:none; border:0; background:transparent; cursor:pointer; line-height:1;
  color:var(--text-tertiary); font-size:11px; padding:3px 4px; border-radius:var(--radius-pill);
}
.achip button:hover{background:var(--negative-soft); color:var(--negative);}
.achip-limpar{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:var(--t-mini); font-weight:600; color:var(--brand);
  padding:2px var(--s-2); border-radius:var(--radius-pill);
}
.achip-limpar:hover{background:var(--brand-soft);}
.achip-vazio{font-size:var(--t-mini); color:var(--text-tertiary);}

/* --- banner de leitura (concentração etc.) --- */
.banner{
  display:flex; align-items:center; gap:var(--s-2);
  border:1px solid var(--border); border-left:3px solid var(--info);
  background:var(--surface); border-radius:var(--radius-md);
  padding:var(--s-3) var(--s-4); font-size:var(--t-corpo); color:var(--text-secondary);
}
.banner.info-tone{border-left-color:var(--info);}
.banner b{color:var(--text-primary);}

/* ============================================================
   2. SITUAÇÃO — um número herói + indicadores em linha
   ============================================================ */
.situacao{
  display:grid; grid-template-columns:minmax(300px, 360px) 1fr;
  gap:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden;
}
.heroi{
  padding:var(--s-5) var(--s-6);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-1);
}
/* Quebra linha quando o selo não cabe ao lado do rótulo: em 320 px, o selo com
   ano ("-R$ 2,0K · Mar/27 vs Fev/27") era cortado pela borda do cartão (TASK-075). */
.heroi-topo{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);}
.heroi-valor{
  font-family:var(--font-display); font-size:var(--t-heroi); font-weight:600;
  letter-spacing:-.025em; line-height:1.05; font-variant-numeric:tabular-nums;
}
/* No celular o número do topo acompanha a largura do cartão: com oito dígitos
   ("R$ 12.462.773,43") ele passava da borda no S26 (TASK-075, revisão). */
.heroi{container-type:inline-size;}
@media (max-width:640px){ .heroi-valor{font-size:min(var(--t-heroi), 10cqi);} }
.heroi-valor.pos{color:var(--positive);}
.heroi-valor.neg{color:var(--negative);}
.heroi-meta{font-size:var(--t-mini); color:var(--text-secondary);}
.heroi-spark{margin-top:var(--s-2); height:34px;}
.heroi-spark svg{display:block; width:100%; height:34px; overflow:visible;}

.tendencia{
  display:inline-flex; align-items:center; gap:3px;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.02em;
  padding:2px 7px; border-radius:var(--radius-pill);
  background:var(--neutral-chip-bg); color:var(--neutral-chip-text);
}
.tendencia.up, .tendencia.bom{background:var(--positive-soft); color:var(--positive-on-soft);}
.tendencia.down, .tendencia.ruim{background:var(--negative-soft); color:var(--negative);}
.tendencia.neutro{background:var(--neutral-chip-bg); color:var(--neutral-chip-text);}

/* indicadores: tabela de leitura, não um mural de cartões */
.indicadores{display:flex; flex-direction:column; justify-content:center;}
.ind-linha{
  display:grid; grid-template-columns:minmax(150px,1fr) 190px minmax(80px,220px) 120px;
  align-items:center; gap:var(--s-5);
  padding:var(--s-3) var(--s-6);
  border-bottom:1px solid var(--linha);
}
.ind-linha:last-child{border-bottom:0;}
.ind-rot{font-size:var(--t-corpo); color:var(--text-secondary); display:flex; flex-direction:column;}
.ind-rot small{font-size:var(--t-micro); color:var(--text-tertiary);}
.ind-valor{font-size:var(--t-titulo); font-weight:600; letter-spacing:-.02em; text-align:right; white-space:nowrap;}
.ind-valor small{font-size:var(--t-micro); font-weight:500; color:var(--text-tertiary); letter-spacing:0;}
.ind-valor.pos{color:var(--positive);}
.ind-valor.neg{color:var(--negative);}
.ind-barra-area{min-width:0;}
.ind-barra{display:block; height:5px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;}
.ind-barra i{display:block; height:100%; border-radius:var(--radius-pill);}
.ind-var{justify-self:end;}

/* ============================================================
   3. COMPOSIÇÃO — uma rosca legível, na página
   A cauda longa é recolhida em "Outras" e o centro da rosca deixa
   de ser um buraco: carrega o total do recorte.
   ============================================================ */
.composicao-corpo{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:var(--s-6); align-items:center;
}
/* sem rosca, a leitura de concentração assume a primeira coluna e a legenda
   fica na coluna larga — senão os nomes das categorias ficam ilegíveis */
.composicao-corpo.concentrado{grid-template-columns:minmax(300px,380px) minmax(0,1fr); align-items:start;}
.composicao-corpo.concentrado .composicao-concentracao{grid-column:1; grid-row:1;}
.composicao-corpo.concentrado .composicao-legenda{grid-column:2; grid-row:1;}

.composicao-rosca{position:relative; height:260px;}
.composicao-corpo.concentrado .composicao-rosca{display:none;}
.composicao-rosca canvas{display:block; width:100% !important; height:100% !important;}
.rosca-centro{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; pointer-events:none; text-align:center;
}
.rc-valor{font-size:var(--t-secao); font-weight:600; letter-spacing:-.025em;}
.rc-meta{font-size:var(--t-micro); color:var(--text-tertiary);}

/* legenda: a leitura principal, em linhas comparáveis */
.composicao-legenda{display:flex; flex-direction:column; min-width:0;}
.comp-item{
  display:grid; grid-template-columns:8px minmax(0,1fr) 92px 52px 120px;
  align-items:center; gap:var(--s-3);
  width:100%; padding:var(--s-2) var(--s-2); cursor:pointer; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--linha);
  font-family:inherit; font-size:var(--t-corpo); color:var(--text-secondary);
  border-radius:var(--radius-sm);
}
.comp-item:last-child{border-bottom:0;}
.comp-item:hover{background:var(--surface-2); color:var(--text-primary);}
.comp-item:focus-visible{outline:none; box-shadow:var(--ring);}
.comp-item.outras{color:var(--text-tertiary);}
.comp-dot{width:8px; height:8px; border-radius:2px;}
.comp-nome{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.comp-valor{color:var(--text-primary); justify-self:end; font-size:var(--t-corpo);}
.comp-share{justify-self:end; font-family:var(--font-mono); font-size:var(--t-mini); color:var(--text-tertiary);}
.comp-barra{height:6px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;}
.comp-barra i{display:block; height:100%; border-radius:var(--radius-pill);}

/* leitura de concentração: quando uma categoria domina, a rosca não serve */
.composicao-concentracao{display:flex; flex-direction:column; gap:var(--s-2);}
.conc-numero{font-family:var(--font-display); font-size:var(--t-heroi); font-weight:600; letter-spacing:-.025em; line-height:1;}
.conc-nome{font-size:var(--t-titulo); font-weight:600;}
.conc-barra{height:10px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden; margin-top:var(--s-1);}
.conc-barra i{display:block; height:100%; background:var(--brand); border-radius:var(--radius-pill);}
.conc-texto{font-size:var(--t-corpo); color:var(--text-secondary); line-height:1.5;}

@media (max-width:1100px){
  .composicao-corpo, .composicao-corpo.concentrado{grid-template-columns:1fr;}
  /* Em uma coluna, a legenda desce para baixo da concentração. Com o
     grid-column:2 de cima ela criava uma segunda coluna e passava da tela
     (rolagem lateral no celular de 320px; TASK-077b). */
  .composicao-corpo.concentrado .composicao-legenda{grid-column:1; grid-row:auto;}
  .comp-item{grid-template-columns:8px minmax(0,1fr) 86px 48px;}
  .comp-barra{display:none;}
}

/* ============================================================
   4. ANÁLISE — painel com abas; só uma visualização por vez
   ============================================================ */
.painel.analise .painel-corpo{padding-top:var(--s-4);}
.aba-painel{display:flex; flex-direction:column; gap:var(--s-4);}
.aba-painel[hidden]{display:none;}

.chart-canvas-wrap{position:relative; height:380px;}
.chart-canvas-wrap.short{height:260px;}
.chart-canvas-wrap canvas{display:block; width:100% !important; height:100% !important;}
.chart-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:var(--s-4); font-size:var(--t-corpo); color:var(--text-tertiary);
}

.chart-legend-note{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font-size:var(--t-mini); color:var(--text-secondary);}
.lg-item{display:inline-flex; align-items:center; gap:6px;}
.lg-swatch{width:14px; height:10px; border-radius:2px; display:inline-block;}
.lg-swatch.solid.pos{background:var(--positive);}
.lg-swatch.solid.neg{background:var(--negative);}
.lg-swatch.hatch.pos{background:repeating-linear-gradient(45deg, var(--positive) 0 3px, transparent 3px 6px); border:1px solid var(--positive);}
.lg-swatch.hatch.neg{background:repeating-linear-gradient(45deg, var(--negative) 0 3px, transparent 3px 6px); border:1px solid var(--negative);}
.lg-swatch.line{height:0; border-top:2px solid var(--text-primary); border-radius:0;}


/* legenda das roscas de categoria */

/* faixa de atalhos por mês/dia */
.daystrip{
  display:flex; gap:var(--s-2); overflow-x:auto; padding-bottom:var(--s-1);
  scrollbar-width:thin;
}
.daychip{
  appearance:none; cursor:pointer; text-align:left; flex:none;
  min-width:104px; padding:var(--s-2) var(--s-3);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); display:flex; flex-direction:column; gap:1px;
  transition:border-color .12s, transform .12s;
}
.daychip:hover{border-color:var(--brand); transform:translateY(-1px);}
.daychip:focus-visible{outline:none; box-shadow:var(--ring);}
.daychip.daychip-empty{opacity:.5;}
.daychip.spike{border-color:var(--warning); background:var(--warning-soft);}
.dlabel{font-size:var(--t-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary);}
.dnet{font-family:var(--font-mono); font-size:var(--t-medio); font-weight:600; letter-spacing:-.02em;}
.dnet.pos{color:var(--positive);} .dnet.neg{color:var(--negative);}
.dn{font-size:var(--t-micro); color:var(--text-tertiary);}

/* ============================================================
   4. LEITURA — atenção e maiores movimentos, lado a lado
   ============================================================ */
/* Os dois painéis terminam na mesma linha. Com `align-items:start` cada um
   tinha a altura do próprio conteúdo, e lado a lado a diferença de alguns
   pixels lê como desalinhamento, não como "um tem mais coisa". Cada painel
   vira uma coluna flexível e a lista reparte a sobra entre as linhas — dentro
   de cada painel as linhas continuam iguais entre si. */
.grid-leitura{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); align-items:stretch;}
.grid-leitura > .painel{display:flex; flex-direction:column;}
.grid-leitura > .painel > .painel-corpo{flex:1; display:flex; flex-direction:column;}
.grid-leitura .ranking, .grid-leitura .variacao{flex:1; display:flex; flex-direction:column;}
.grid-leitura .ranking-item, .grid-leitura .var-item{flex:1;}
.painel-corpo.sem-respiro{padding-top:0;}

.ins-list{list-style:none; display:flex; flex-direction:column; gap:var(--s-2);}
.ins-item{
  display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:var(--t-corpo); color:var(--text-secondary); line-height:1.5;
  padding:var(--s-2) 0; border-bottom:1px solid var(--linha);
}
.ins-item:last-child{border-bottom:0;}
.ins-item b{color:var(--text-primary);}
.ins-item .ic{
  flex:none; width:20px; height:20px; border-radius:var(--radius-sm);
  display:grid; place-items:center; font-size:var(--t-micro); font-weight:700;
  background:var(--neutral-chip-bg); color:var(--neutral-chip-text);
}
.ins-item.warn .ic{background:var(--warning-soft); color:var(--warning);}
.ins-item.pos .ic{background:var(--positive-soft); color:var(--positive);}
.ins-item.neg .ic{background:var(--negative-soft); color:var(--negative);}
.ins-item.info .ic{background:var(--info-soft); color:var(--info);}

.ranking{list-style:none;}
.ranking-item{
  display:grid; grid-template-columns:18px minmax(0,1fr) 84px auto 44px;
  align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-5); cursor:pointer;
  border-bottom:1px solid var(--linha);
}
.ranking-item:last-child{border-bottom:0;}
.ranking-item:hover{background:var(--surface-2);}
.ranking-item:focus-visible{outline:none; box-shadow:inset var(--ring);}
.ranking-pos{font-family:var(--font-mono); font-size:var(--t-mini); color:var(--text-tertiary);}
.ranking-nome{font-size:var(--t-corpo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ranking-barra{height:5px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;}
.ranking-barra i{display:block; height:100%;}
.ranking-valor{font-size:var(--t-corpo); font-weight:600; justify-self:end;}
.ranking-share{font-size:var(--t-mini); color:var(--text-tertiary); justify-self:end;}
.ranking-vazio{padding:var(--s-5); font-size:var(--t-corpo); color:var(--text-tertiary);}

/* "O que mudou no mês": barras divergentes a partir de um eixo central.
   Direita/verde é a categoria que ajudou o resultado, esquerda/vermelho a que
   atrapalhou — e não "subiu"/"caiu", porque uma saída que cai ajuda. */
.variacao{list-style:none;}
.var-resumo{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2);
  padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--linha);
  font-size:var(--t-corpo); color:var(--text-secondary); line-height:1.5;
}
.var-resumo b{color:var(--text-primary); font-weight:600;}
.var-resumo .var-delta{font-size:var(--t-titulo);}
.var-resumo .var-delta.ok{color:var(--positive);}
.var-resumo .var-delta.ruim{color:var(--negative);}
.var-item{
  display:grid; grid-template-columns:minmax(0,1fr) 190px 72px 108px;
  align-items:center; gap:var(--s-2) var(--s-3);
  padding:var(--s-2) var(--s-5); cursor:pointer;
  border-bottom:1px solid var(--linha);
}
.var-item:last-child{border-bottom:0;}
.var-item:hover{background:var(--surface-2);}
.var-item:focus-visible{outline:none; box-shadow:inset var(--ring);}
.var-nome{font-size:var(--t-corpo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.var-barra{position:relative; height:12px;}
/* O eixo passa por fora da célula para emendar com o da linha de cima e o
   da de baixo: lido de longe, vira uma linha só, e é ela que separa o que
   ajudou do que atrapalhou. */
.var-barra::before{content:''; position:absolute; left:50%; top:-9px; bottom:-9px; width:1px; background:var(--border);}
/* A escala é linear de propósito — quando uma categoria explica quase toda a
   variação, é isso que se tem de ver. O mínimo de 3px existe só para que as
   pequenas não sumam ao lado dela; o número ao lado dá a medida exata. */
.var-barra i{position:absolute; top:3px; height:6px; min-width:3px; border-radius:var(--radius-pill);}
.var-barra i.pos{background:var(--positive);}
.var-barra i.neg{background:var(--negative);}
.var-valor{font-size:var(--t-corpo); font-weight:600; justify-self:end;}
.var-valor.ok{color:var(--positive);}
.var-valor.ruim{color:var(--negative);}
/* A direção vem escrita: "pago a menos" não deixa dúvida como um sinal deixa.
   Fica em cinza porque o número é que se lê primeiro. */
.var-frase{font-size:var(--t-mini); color:var(--text-tertiary); line-height:1.3;}
/* A cauda fecha a conta à vista: os nomeados mais esta linha somam a variação
   do resumo. Sem barra de propósito — ela não compete com as categorias. */
.var-resto{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3);
  flex-wrap:wrap;
  padding:var(--s-3) var(--s-5); cursor:pointer;
  border-top:1px solid var(--linha);
  font-size:var(--t-mini); color:var(--text-tertiary);
}
.var-resto:hover{background:var(--surface-2);}
.var-resto:focus-visible{outline:none; box-shadow:inset var(--ring);}

/* ============================================================
   5. DETALHAMENTO — segmentação, resumo e tabela
   ============================================================ */
.ledger-segmentos{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s-3);}
.df-field{display:flex; flex-direction:column; gap:4px; min-width:130px;}
.df-field.df-grow{flex:1 1 200px;}
.df-field label, .df-label{font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);}
.df-field input[type="date"], .df-field input[type="search"], .df-field select{
  height:var(--altura-controle); font-size:var(--t-corpo);
  background:var(--surface); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:0 var(--s-2);
  font-family:inherit;
}
.df-field input:focus-visible, .df-field select:focus-visible{outline:none; border-color:var(--brand); box-shadow:var(--ring);}

.drawer-summary{display:flex; flex-wrap:wrap; gap:var(--s-2);}
.dmini{
  flex:1 1 120px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--s-2) var(--s-3);
}
.dmini .l{font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);}
.dmini .v{font-family:var(--font-mono); font-size:var(--t-medio); font-weight:600; letter-spacing:-.02em; margin-top:2px;}
.ledger-resumo{margin-top:var(--s-3);}

/* a tabela rola dentro da própria moldura: a página não cresce com 100 linhas
   e o cabeçalho continua visível enquanto se percorre os lançamentos */
.table-scroll{
  overflow:auto; max-height:min(70vh, 640px);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
table.ledger{width:100%; border-collapse:collapse; font-size:var(--t-corpo);}
table.ledger th{
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); text-align:left; white-space:nowrap;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-tertiary); padding:var(--s-2) var(--s-4);
  border-bottom:1px solid var(--border); cursor:pointer; user-select:none;
}

table.ledger th:hover{color:var(--text-primary);}
table.ledger th.sorted{color:var(--brand);}
table.ledger th:focus-visible{outline:none; box-shadow:inset var(--ring);}
/* A seta segue o token de texto miúdo: 10,5px no desktop e 12px no celular e
   no tablet (com 9px fixos, era o menor texto da tela; TASK-075, B2). */
table.ledger th .arrow{font-size:var(--t-micro); margin-left:4px;}
/* O `th` já vinha marcado como `num` nas colunas de valor, mas só o `td`
   alinhava à direita: o rótulo ficava no começo da coluna e o número no fim,
   em todas as tabelas que usam este estilo. */
table.ledger th.num{text-align:right;}
table.ledger td{padding:var(--s-2) var(--s-4); border-bottom:1px solid var(--linha); vertical-align:top;}
table.ledger tbody tr:hover{background:var(--surface-2);}
table.ledger td.num{font-family:var(--font-mono); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
table.ledger td.dim{color:var(--text-secondary);}
table.ledger td.venc{white-space:nowrap;}   /* "20/09 · 37 dias" numa linha só */
table.ledger td.desc{max-width:280px; overflow:hidden; text-overflow:ellipsis;}
/* o total acompanha a rolagem: numa tabela longa ele é o que se procura */
table.ledger tfoot td{
  position:sticky; bottom:0; z-index:2;
  background:var(--surface-2); font-weight:600; border-top:1px solid var(--border-strong); border-bottom:0;
}
table.ledger .pos{color:var(--positive);} table.ledger .neg{color:var(--negative);}

.pill{
  display:inline-block; padding:1px 8px; border-radius:var(--radius-pill);
  font-size:var(--t-micro); font-weight:600; white-space:nowrap;
  background:var(--neutral-chip-bg); color:var(--neutral-chip-text);
}
.pill-liquidado, .pill-realizado{background:var(--positive-soft); color:var(--positive-on-soft);}
.pill-previsto, .pill-previsao{background:var(--info-soft); color:var(--info);}
.pill-entrada{background:var(--positive-soft); color:var(--positive-on-soft);}
.pill-saida{background:var(--negative-soft); color:var(--negative);}

.empty-state{padding:var(--s-7) var(--s-4); text-align:center; color:var(--text-secondary);}
.empty-state .ic{font-size:26px; color:var(--text-tertiary); line-height:1;}
.empty-state .t{font-size:var(--t-medio); font-weight:600; color:var(--text-primary); margin-top:var(--s-2);}
.empty-state .s{font-size:var(--t-corpo); margin-top:var(--s-1);}

.pagination{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3);}
.pg-info{font-size:var(--t-mini); color:var(--text-secondary);}
.pg-controls{display:flex; align-items:center; gap:var(--s-2);}
.pg-controls button{
  appearance:none; cursor:pointer; height:var(--altura-controle); padding:0 var(--s-3);
  background:var(--surface); color:var(--text-primary); white-space:nowrap;
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:var(--t-corpo);
}
.pg-controls button:hover:not(:disabled){border-color:var(--brand); color:var(--brand);}
.pg-controls button:disabled{opacity:.45; cursor:not-allowed;}
.pg-atual{font-size:var(--t-mini); color:var(--text-secondary); min-width:96px; text-align:center;}

/* ============================================================
   GAVETAS — filtros (esquerda do conteúdo) e detalhamento
   ============================================================ */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(9,14,20,.45);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:140;
}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(620px, 94vw); z-index:150;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
}
.drawer.open{transform:none;}
.drawer-filtros{width:min(400px, 94vw);}

/* ---- detalhamento (drill-down): painel largo, porque é tabular ---- */
.drawer-drill{width:min(1120px, 96vw); display:flex; flex-direction:column;}
.dd-cabeca{padding:var(--s-4) var(--s-5) var(--s-3); border-bottom:1px solid var(--border);}
.dd-cabeca-linha{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);}
.dd-trilha{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-1); min-width:0;}
.dd-nivel{
  appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-size:var(--t-mini); color:var(--brand); padding:2px 6px; border-radius:var(--radius-sm);
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dd-nivel:hover{background:var(--brand-soft);}
.dd-nivel:focus-visible{outline:none; box-shadow:var(--ring);}
.dd-nivel.atual{color:var(--text-primary); font-weight:600; cursor:default;}
.dd-nivel.atual:hover{background:transparent;}
.dd-sep{color:var(--text-tertiary); font-size:var(--t-mini);}
.dd-titulo{font-size:var(--t-secao); letter-spacing:-.02em; margin-top:var(--s-2);}
.dd-resumo{font-size:var(--t-corpo); color:var(--text-secondary); margin-top:var(--s-1);}
.dd-resumo b{font-family:var(--font-mono); letter-spacing:-.02em;}
.dd-resumo b.pos{color:var(--positive);} .dd-resumo b.neg{color:var(--negative);}
.dd-ponto{color:var(--text-tertiary); margin:0 2px;}

.dd-barra{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--linha); flex:none;
}
/* Quebram linha em vez de sair da gaveta: até 393px, "Filtros / Exportar CSV"
   e o "Agrupar por" passavam da borda (TASK-075, M4). */
.dd-barra-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);}
.dd-barra-acoes .contador{background:var(--brand); color:var(--brand-on);}

.dd-filtros{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); background:var(--surface-2); border-bottom:1px solid var(--border); flex:none;
}
.dd-chips{padding:0 var(--s-5); margin-top:var(--s-2); flex:none;}
.dd-chips:empty{display:none;}

.dd-corpo{flex:1; min-height:0; display:flex; flex-direction:column; padding:var(--s-4) var(--s-5) var(--s-5);}
.dd-painel{flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--s-3);}
.dd-painel[hidden]{display:none;}
.dd-agrupar{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; flex:none;}
.dd-agrupar .segmentado{flex-wrap:wrap; max-width:100%;}
.dd-scroll{flex:1; min-height:0; max-height:none; border-radius:var(--radius-md); border:1px solid var(--border);}

/* linhas do resumo levam a mais um nível */
.dd-linha{cursor:pointer;}
.dd-linha:focus-visible{outline:none; box-shadow:inset var(--ring);}
.dd-abrir{color:var(--text-tertiary); margin-right:6px; font-size:var(--t-micro);}
.dd-linha:hover .dd-abrir{color:var(--brand);}
.dd-part{width:180px;}
td.dd-part{display:flex; align-items:center; gap:var(--s-2);}
.dd-prop{flex:1; height:6px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;}
.dd-prop i{display:block; height:100%; background:var(--brand); border-radius:var(--radius-pill);}
.dd-pct{font-size:var(--t-mini); color:var(--text-tertiary); width:46px; text-align:right;}
.dd-paginacao{flex:none; padding-top:var(--s-1);}

/* o que abre detalhamento precisa parecer clicável */
.ind-linha.clicavel{cursor:pointer;}
.ind-linha.clicavel:hover{background:var(--surface-2);}
.ind-linha.clicavel:focus-visible{outline:none; box-shadow:inset var(--ring);}

@media (max-width:900px){
  .dd-part, td.dd-part{display:none;}
  .dd-titulo{font-size:var(--t-titulo);}
}
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border);
}
.dh-title{font-size:var(--t-titulo); font-weight:600;}
.dh-sub{font-size:var(--t-mini); color:var(--text-secondary); margin-top:2px;}
.drawer-close{
  appearance:none; border:1px solid var(--border); background:var(--surface-2); cursor:pointer;
  width:28px; height:28px; border-radius:var(--radius-sm); color:var(--text-secondary); flex:none;
}
.drawer-close:hover{border-color:var(--negative); color:var(--negative);}
.drawer-body{flex:1; overflow-y:auto; padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4);}
.drawer-filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s-3);}
.drawer-search input{width:100%;}
.drawer-table-wrap{border:1px solid var(--border); border-radius:var(--radius-md); overflow:auto; max-height:52vh;}
.drawer-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-top:1px solid var(--border); background:var(--surface-2);
}

/* ============================================================
   ESQUELETO DE CARGA
   ============================================================ */
.dash-skeleton{display:flex; flex-direction:column;}
.sk-duplo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4);}

/* ============================================================
   INTERRUPTOR DE TEMA
   ============================================================ */
.theme-switch{
  position:relative; appearance:none; cursor:pointer; flex:none;
  width:46px; height:24px; border-radius:var(--radius-pill);
  background:var(--chrome-field-bg); border:1px solid var(--chrome-border);
  display:inline-flex; align-items:center; justify-content:space-between; padding:0 5px;
}
.theme-switch:focus-visible{outline:none; box-shadow:var(--ring);}
.ts-track-icon{display:grid; place-items:center; width:12px; height:12px; color:var(--chrome-text-dim);}
.ts-track-icon svg, .ts-thumb-icon svg{width:11px; height:11px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.ts-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--chrome-text); display:grid; place-items:center;
  transition:transform .18s ease; color:var(--chrome-bg-1);
}
.ts-thumb-icon{display:none;}
.ts-thumb-icon.sun{display:grid;}
:root[data-theme="dark"] .ts-thumb, .theme-switch[aria-checked="true"] .ts-thumb{transform:translateX(22px);}
.theme-switch[aria-checked="true"] .ts-thumb-icon.sun{display:none;}
.theme-switch[aria-checked="true"] .ts-thumb-icon.moon{display:grid;}
/* fora da navegação em grafite (páginas exportadas), o interruptor segue a superfície */
.recorte-acoes .theme-switch{background:var(--surface-2); border-color:var(--border-strong);}
.recorte-acoes .ts-track-icon{color:var(--text-tertiary);}
.recorte-acoes .ts-thumb{background:var(--text-primary); color:var(--surface);}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1280px){
  .situacao{grid-template-columns:1fr;}
  .heroi{border-right:0; border-bottom:1px solid var(--border);}
  .grid-leitura{grid-template-columns:1fr;}
}
@media (max-width:1100px){
  /* Abaixo de 1100px a barra lateral é gaveta (app.css) e a de contexto
     continua presa no topo: o recorte gruda logo abaixo dela, como no desktop. */
  .recorte{margin:0 calc(var(--s-4) * -1); padding:var(--s-3) var(--s-4) var(--s-2);}
}
/* TASK-074 — celular e qualquer tela de toque (celular deitado, tablet em pé
   ou deitado). Presa no topo fica só a barra de contexto: o recorte rola com
   a página. Colado, ele tomava até 31% da tela no celular em pé, 34% no
   deitado e ~20% no tablet. Sem o desfoque de fundo, o recorte também deixa
   de ser o bloco de contenção da grade de período (posição fixa, abaixo). */
@media (max-width:720px), (pointer:coarse){
  .recorte{position:static; -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg);}
}
@media (max-width:900px){
    .sk-duplo{grid-template-columns:1fr;}
  .recorte-acoes{margin-left:0;}
  .chart-canvas-wrap{height:300px;}
  .ind-linha{grid-template-columns:1fr auto; gap:var(--s-2) var(--s-3);}
  .ind-barra-area{grid-column:1 / -1;}
  .ind-var{grid-column:2; grid-row:1; justify-self:end;}
  .ind-var:empty{display:none;}
  /* F2-08: valor sempre à esquerda, sob o rótulo, em todos os indicadores (antes uns iam à direita, outros ficavam soltos). */
  .ind-valor{grid-column:1; text-align:left;}
  .ranking-item{grid-template-columns:18px minmax(0,1fr) auto; }
  .ranking-barra{display:none;}
  .var-item{grid-template-columns:minmax(0,1fr) auto auto;}
  .var-barra{display:none;}
}
@media print{
  .recorte, .side, .topbar, .drawer, .drawer-overlay, .daystrip{display:none !important;}
  .painel, .situacao{break-inside:avoid; box-shadow:none;}
}

/* ============================================================
   PRÉVIA DA IMPORTAÇÃO
   Aqui o cartão faz sentido: são quatro totais de uma planilha que
   ainda não foi gravada, lidos de relance antes de confirmar.
   ============================================================ */
.previa-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--s-2); margin:var(--s-4) 0;}
.previa-kpis .kpi-card{
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--border-strong);
  border-radius:var(--radius-md); padding:var(--s-3);
}
.previa-kpis .kpi-card.pos{border-left-color:var(--positive);}
.previa-kpis .kpi-card.neg{border-left-color:var(--negative);}
.previa-kpis .kpi-card.info{border-left-color:var(--info);}
.kpi-label{font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);}
.kpi-value{font-family:var(--font-mono); font-size:var(--t-titulo); font-weight:600; letter-spacing:-.02em; margin-top:3px;}
/* O valor do cartão nunca parte nem é cortado pela borda: numa linha só, a
   fonte acompanha a largura do cartão (10% dela, entre 12px e o tamanho
   normal). Cabe "R$ 12.345.678,90" num cartão de 150px, o do S26 Ultra com
   duas colunas; abaixo disso a fonte ficaria menor que 12px, e o detalhe do
   cliente da Inadimplência passa a uma coluna (inadimplencia.css). No
   detalhe, "R$ 1.234.570,89" perdia os últimos dígitos (TASK-075, M1). Vale
   também para a prévia das Importações, que usa os mesmos cartões. */
.previa-kpis .kpi-card{container-type:inline-size; min-width:0;}
.previa-kpis .kpi-value{white-space:nowrap; font-size:clamp(12px, 10cqi, var(--t-titulo));}
.kpi-value.pos{color:var(--positive);}
.kpi-value.neg{color:var(--negative);}
.val-pos{color:var(--positive);}
.val-neg{color:var(--negative);}
.acoes-previa{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4);}
.achado.bloqueio{border-left:3px solid var(--negative);}
.arquivo-escolhido .nome{font-size:var(--t-corpo); font-weight:500; overflow:hidden; text-overflow:ellipsis;}

/* ============================================================
   CONTAS A PAGAR / A RECEBER — o calendário é a tela
   Mesma linguagem do dashboard: superfícies separadas por linha,
   números em mono, um acento só. O dia é uma peça de leitura
   financeira, não uma casa de calendário com valor dentro.
   ============================================================ */

/* --- navegação de mês, na faixa fixa do topo --- */
.mes-nav{display:flex; align-items:center; gap:var(--s-2);}
.mes-seta{
  appearance:none; cursor:pointer; width:var(--altura-controle); height:var(--altura-controle);
  background:var(--surface); color:var(--text-primary);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:16px; line-height:1; display:grid; place-items:center;
}
.mes-seta:hover:not(:disabled){border-color:var(--brand); color:var(--brand);}
.mes-seta:disabled{opacity:.4; cursor:not-allowed;}
.mes-seta:focus-visible{outline:none; box-shadow:var(--ring);}
.mes-atual{display:flex; align-items:center; gap:var(--s-1);}
.mes-atual .select{min-width:132px; max-width:160px;}

/* --- realizado x previsto: forma antes de cor --- */
.marca-realizado, .marca-previsto, .marca-hoje{
  display:inline-block; width:9px; height:9px; border-radius:2px; flex:none; vertical-align:middle;
}
.marca-realizado{background:var(--positive); border:1px solid var(--positive);}
.marca-previsto{background:transparent; border:1px dashed var(--info);}
.marca-hoje{background:transparent; border:2px solid var(--brand); border-radius:50%;}
.ind-rot .marca-realizado, .ind-rot .marca-previsto{margin-right:6px;}

.selo{display:inline-flex; align-items:center; gap:5px; font-size:var(--t-mini); white-space:nowrap;}
.selo-realizado{color:var(--positive);}
.selo-previsto{color:var(--info);}

.cal-legenda{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); font-size:var(--t-mini); color:var(--text-secondary);}

/* --- proporção realizado/previsto no bloco de situação --- */
.proporcao{display:flex; flex-direction:column; gap:4px;}
.pr-barra{display:block; height:8px; background:var(--info-soft); border-radius:var(--radius-pill); overflow:hidden;
  border:1px dashed color-mix(in srgb, var(--info) 45%, transparent);}
.pr-barra i{display:block; height:100%; background:var(--positive); border-radius:var(--radius-pill);}
.pr-txt{font-size:var(--t-micro); color:var(--text-secondary);}

/* --- grade --- */
.cal-semana{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--s-1);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-tertiary); padding:0 2px var(--s-2);
}
.calendario{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--s-1);}

.cal-dia{
  appearance:none; font-family:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; min-height:118px; padding:var(--s-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:border-color .12s, background .12s;
}
.cal-dia.fora{background:transparent; border-color:transparent; cursor:default; min-height:0;}
.cal-dia:hover:not(.fora){border-color:var(--brand-strong); background:var(--surface-2);}
.cal-dia:focus-visible{outline:none; box-shadow:var(--ring);}
.cal-dia.sem-movimento{background:var(--surface-2); border-style:dashed;}
.cal-dia.hoje{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand);}
.cal-dia.selecionado{
  border-color:var(--brand); background:var(--brand-soft);
  box-shadow:inset 0 0 0 2px var(--brand);
}

.cal-topo{display:flex; align-items:center; justify-content:space-between; gap:var(--s-1);}
.cal-num{font-size:var(--t-medio); font-weight:600; color:var(--text-secondary);}
.cal-dia.hoje .cal-num{color:var(--brand);}
.cal-dia.sem-movimento .cal-num{color:var(--text-tertiary); font-weight:500;}
.cal-marcas{display:inline-flex; gap:3px;}

.cal-valor{font-size:var(--t-titulo); font-weight:600; letter-spacing:-.02em; line-height:1.1;}
.cal-valor.pos{color:var(--positive);} .cal-valor.neg{color:var(--negative);}
.cal-barra{display:block; height:3px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden;}
.cal-barra i{display:block; height:100%; background:currentColor; opacity:.45; border-radius:var(--radius-pill);}
.cal-dia .cal-barra{color:var(--text-secondary);}

.cal-linha{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-1); font-size:var(--t-micro);}
.cal-linha em{font-style:normal; color:var(--text-tertiary);}
.cal-linha b{font-weight:600; color:var(--text-secondary); font-size:var(--t-mini);}
.cal-linha.geracao{margin-top:2px; padding-top:3px; border-top:1px solid var(--linha);}
.cal-linha.geracao.pos b{color:var(--positive);}
.cal-linha.geracao.neg b{color:var(--negative);}

.cal-vazio{margin-top:var(--s-4);}

/* --- painel do dia --- */
#painel-dia .painel-corpo{padding-bottom:var(--s-3);}

/* Em tela menor o calendário continua sendo calendário: sempre 7 colunas,
   alinhadas por dia da semana. O que encolhe é o conteúdo da célula — o
   detalhe completo do dia está a um toque, no painel abaixo. */
@media (max-width:1100px){
  .cal-dia{min-height:88px; padding:6px;}
  .cal-linha:not(.geracao){display:none;}
  .cal-valor{font-size:var(--t-medio);}
}
@media (max-width:700px){
  .calendario, .cal-semana{gap:2px;}
  .cal-semana{font-size:9px; letter-spacing:.04em;}
  .cal-dia{min-height:58px; padding:4px 3px; gap:1px; border-radius:var(--radius-sm);}
  .cal-linha, .cal-barra, .cal-moeda{display:none;}
  .cal-num{font-size:var(--t-mini);}
  .cal-valor{font-size:10.5px; letter-spacing:-.04em;}
  .cal-marcas .marca-realizado, .cal-marcas .marca-previsto{width:6px; height:6px;}
  .mes-atual .select{min-width:0; max-width:120px;}
}

/* geração acumulada do mês, dentro da linha de indicador */
.spark-acum{display:block; width:100%; height:30px; overflow:visible;}
.sa-zero{stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 3;}
.sa-linha{fill:none; stroke-width:1.8; vector-effect:non-scaling-stroke;}
.sa-linha.pos{stroke:var(--positive);} .sa-linha.neg{stroke:var(--negative);}
.sa-ponta.pos{fill:var(--positive);} .sa-ponta.neg{fill:var(--negative);}

/* ============================================================
   DRE GERENCIAL

   A demonstração é uma cascata: o olho desce da receita até o lucro
   líquido. O desenho reforça essa descida com hierarquia de peso, e não
   com fundo colorido — doze linhas com fundo forte viram ruído e o leitor
   perde o fio. Cor aqui carrega só o sinal do resultado.
   ============================================================ */

/* --- controles do recorte --- */
/* `flex:none` é o que conserta: sem isso o item encolhe até o `min-width` e,
   como o texto não quebra, ele vaza da caixa e passa por baixo da seta de
   próximo período. O rótulo mais longo é o personalizado
   ("01/09/2026 a 30/09/2026"), então a largura é reservada para caber sem
   depender de sobra na linha. */
.periodo-ancora{position:relative; flex:none;}
.periodo-atual{
  appearance:none; cursor:pointer; font-family:inherit;
  display:block; width:100%; min-width:16ch;
  height:calc(var(--altura-controle) - 2px); padding:0 var(--s-2);
  border:1px solid transparent; border-radius:var(--radius-md); background:transparent;
  font-size:var(--t-medio); font-weight:600; color:var(--text-primary);
  text-align:center; white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.periodo-atual:hover:not(:disabled){background:var(--surface-2); border-color:var(--border);}
.periodo-atual:focus-visible{outline:none; box-shadow:var(--ring);}
.periodo-atual:disabled{cursor:default; opacity:.55;}
.periodo-atual[aria-expanded="true"]{background:var(--surface-2); border-color:var(--border-strong);}

/* --- grade de escolha do período ---
   Aparece ancorada no rótulo. Período sem lançamento fica apagado e não
   clicável: é melhor a grade dizer que o mês está vazio do que a tela abrir
   zerada e a pessoa achar que perdeu o dado. */
.periodo-pop{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  z-index:60; min-width:250px; padding:var(--s-3);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:0 12px 28px rgba(15,23,33,.16);
}
.periodo-pop[hidden]{display:none;}
.pp-cab{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  margin-bottom:var(--s-2); padding-bottom:var(--s-2); border-bottom:1px solid var(--linha);
}
.pp-cab b{font-size:var(--t-medio); font-weight:600; flex:1; text-align:center;}
.pp-seta{
  appearance:none; cursor:pointer; font-family:inherit; flex:none;
  width:24px; height:24px; line-height:1;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text-secondary);
}
.pp-seta:hover{border-color:var(--brand); color:var(--brand);}
.pp-seta:focus-visible{outline:none; box-shadow:var(--ring);}

.pp-grade{display:grid; gap:4px;}
.pp-mes{grid-template-columns:repeat(4, 1fr);}
.pp-trimestre, .pp-semestre{grid-template-columns:repeat(2, 1fr);}
.pp-ano{grid-template-columns:repeat(3, 1fr);}

.pp-item{
  appearance:none; cursor:pointer; font-family:inherit;
  padding:7px 6px; border:1px solid transparent; border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text-primary);
  font-size:var(--t-corpo); font-weight:500; white-space:nowrap;
}
.pp-item:hover:not(:disabled){background:var(--brand-soft); color:var(--brand);}
.pp-item:focus-visible{outline:none; box-shadow:var(--ring);}
.pp-item.ativo{background:var(--brand); color:var(--brand-on); font-weight:600;}
.pp-item:disabled{
  cursor:not-allowed; background:transparent;
  color:var(--text-tertiary); opacity:.45;
}
/* Sair do mês escolhido e voltar a ver o período inteiro. Só aparece onde a
   escolha é opcional — na DRE o período sempre existe, então não há rodapé. */
.pp-rodape{margin-top:var(--s-2); padding-top:var(--s-2); border-top:1px solid var(--linha); text-align:center;}

/* O botão que abre a grade no Fluxo de Caixa vive entre controles compactos,
   e ganha destaque quando há um mês escolhido — senão o recorte ativo passa
   despercebido. */
.btn-mes{height:calc(var(--altura-controle) - 2px); min-width:15ch; justify-content:center;}
.btn-mes.escolhido{border-color:var(--brand); color:var(--brand); font-weight:600;}
.btn-mes[aria-expanded="true"]{background:var(--surface-2);}
.input-compacto{height:calc(var(--altura-controle) - 2px); font-size:var(--t-corpo); max-width:150px;}
.periodo-livre[hidden]{display:none;}
/* --- DRE: rótulos dos cartões (o resto da tela mora em pages/dre.css) --- */
.dc-rot{
  font-size:var(--t-mini); font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:.04em;
}
.dc-valor{
  font-family:var(--font-display); font-size:var(--t-secao); font-weight:600;
  letter-spacing:-.02em; line-height:1.15; margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.dc-valor.pos{color:var(--positive);}
.dc-valor.neg{color:var(--negative);}
.dc-pct{font-size:var(--t-micro); color:var(--text-tertiary);}

/* --- avisos: limitação que o número sozinho esconderia --- */
/* Vive dentro do painel "Observações", no fim da página: o respiro já vem do
   painel, então a lista não acrescenta margem própria. */
.dre-avisos{display:flex; flex-direction:column; gap:var(--s-2);}
.dre-avisos:empty{display:none;}
.dre-aviso{
  display:flex; gap:var(--s-3); align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--text-tertiary);
  border-radius:var(--radius-md); padding:10px var(--s-4);
}
.dre-aviso[data-tipo="nao_classificado"]{border-left-color:var(--warning); background:var(--warning-soft);}
.dre-aviso[data-tipo="base"],
.dre-aviso[data-tipo="integridade"]{border-left-color:var(--negative); background:var(--negative-soft);}
.dre-aviso > span{
  flex:none; width:16px; height:16px; border-radius:50%; margin-top:1px;
  background:var(--text-tertiary); color:var(--surface);
  font-size:10px; font-weight:700; font-style:italic;
  display:flex; align-items:center; justify-content:center;
}
.dre-aviso[data-tipo="nao_classificado"] > span{background:var(--warning);}
.dre-aviso[data-tipo="base"] > span,
.dre-aviso[data-tipo="integridade"] > span{background:var(--negative);}
.dre-aviso p{font-size:var(--t-corpo); color:var(--text-secondary); line-height:1.5;}

.dre-cont{
  display:inline-block; margin-left:var(--s-2); padding:1px 6px;
  font-size:var(--t-micro); font-family:var(--font-mono);
  color:var(--text-tertiary); background:var(--surface-2);
  border-radius:var(--radius-pill);
}
.dre-cont.agrupada{font-family:inherit; font-style:italic;}

td.num.pos{color:var(--positive);}
td.num.neg{color:var(--negative);}
table.ledger td.cen, table.ledger th.cen{text-align:center;}

/* --- gaveta da estrutura --- */
#estrutura-tabela tr.pendente td{background:var(--warning-soft);}
#estrutura-tabela td{vertical-align:middle;}
#estrutura-tabela .select-compacto{max-width:280px;}
.achip.alerta{background:var(--warning-soft); color:var(--warning);}


/* ============================================================
   ORÇAMENTO — aba Planilha
   A leitura de uma planilha de orçamento: a coluna de categorias fica
   presa à esquerda enquanto os meses rolam, cada mês tem Previsto e
   Realizado/Projetado lado a lado, e o bloco do ano fecha a linha.
   ============================================================ */
.orc-planilha-wrap{overflow:auto; max-height:72vh;}
table.orc-planilha{border-collapse:separate; border-spacing:0; font-size:var(--t-mini); white-space:nowrap;}
.orc-planilha th, .orc-planilha td{padding:5px 8px; border-bottom:1px solid var(--linha);}
.orc-planilha thead th{position:sticky; background:var(--surface-2); color:var(--text-secondary); font-weight:600; z-index:2;}
.orc-planilha thead tr:first-child th{top:0; height:30px;}
.orc-planilha thead tr:nth-child(2) th{top:30px; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.04em;}
.orc-planilha th.mes{text-align:center; border-left:1px solid var(--border);}
.orc-planilha th.mes.realizado{color:var(--positive);}
.orc-planilha th.mes.projetado{color:var(--info);}
.orc-planilha th.mes.parcial{color:var(--warning);}
.orc-planilha th.sub{text-align:right;}
.orc-planilha th.ano-cab{text-align:center; border-left:2px solid var(--border-strong);}
/* a coluna presa: por cima do que rola por baixo dela */
.orc-planilha .fixa{position:sticky; left:0; z-index:1; background:var(--surface); text-align:left;
  min-width:240px; max-width:280px; overflow:hidden; text-overflow:ellipsis; border-right:1px solid var(--border);}
.orc-planilha thead .fixa{z-index:3; background:var(--surface-2);}
.orc-planilha td.num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.orc-planilha td.prev{border-left:1px solid var(--linha); color:var(--text-secondary);}
.orc-planilha td.cmp{font-weight:600;}
.orc-planilha td.ok{color:var(--positive);}
.orc-planilha td.ruim{color:var(--negative);}
/* A variação do mês é leitura de apoio: fica menor e mais clara que o valor,
   para a vista continuar correndo pelos números e não pelos percentuais. */
.orc-planilha td.var{font-size:var(--t-mini); color:var(--text-tertiary);}
.orc-planilha td.var.ok{color:var(--positive);}
.orc-planilha td.var.ruim{color:var(--negative);}
.orc-planilha th.sub.var{font-weight:400;}
.orc-planilha td.ano{background:color-mix(in srgb, var(--surface-2) 55%, transparent);}
.orc-planilha td.ano:first-of-type, .orc-planilha tr td:nth-last-child(4){border-left:2px solid var(--border-strong);}
.orc-planilha tbody tr:hover td{background:var(--surface-2);}
.orc-planilha tr.cat .fixa{padding-left:28px;}
.orc-planilha tr.grupo td{font-weight:600; background:color-mix(in srgb, var(--surface-2) 45%, var(--surface));}
.orc-planilha tr.grupo .fixa{padding-left:16px; background:color-mix(in srgb, var(--surface-2) 45%, var(--surface));}
.orc-planilha tr.lado td{font-weight:700; color:var(--text-primary); background:var(--surface-2); border-top:2px solid var(--border-strong);}
.orc-planilha tr.resultado td{font-weight:700; background:var(--brand-soft); border-top:2px solid var(--brand);}
.orc-planilha tr.resultado .fixa{background:var(--brand-soft);}


/* ===================== termômetro de orçamento =====================
   A pergunta que o painel do Orçamento responde é uma só: quanto da meta já
   foi consumido e quanto falta para os 100%. O termômetro existe para que
   essa resposta seja lida sem precisar comparar dois números.

   A escala não é linear até o infinito: os 100% ficam sempre no mesmo ponto
   do trilho (LIMITE abaixo), e o espaço à direita é a margem de estouro. Assim
   o marco dos 100% fica na mesma coluna em todas as linhas, e o olho compara
   as barras entre si sem ler percentual nenhum. */
.termo{display:flex; flex-direction:column; gap:5px;}
.termo-topo{display:flex; align-items:baseline; gap:var(--s-2); justify-content:space-between;}
.termo-nome{
  font-size:var(--t-mini); color:var(--text-primary); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.termo-pct{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-mini); font-weight:600; color:var(--text-primary); flex:none;
}
.termo-trilho{
  position:relative; height:9px; border-radius:5px; background:var(--surface-3);
  overflow:visible;
}
.termo-barra{
  position:absolute; inset:0 auto 0 0; border-radius:5px;
  background:var(--text-tertiary); transition:width .18s ease;
}
.termo-barra.ok{background:var(--positive);}
.termo-barra.atencao{background:var(--warning);}
.termo-barra.estouro{background:var(--negative);}
/* O marco dos 100%: uma linha vertical que atravessa o trilho inteiro. É o
   único elemento que não se move, e é por isso que ele orienta a leitura. */
.termo-marco{
  position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text-primary);
  opacity:.55; border-radius:1px;
}
.termo-marco::after{
  content:"100%"; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:9px; font-family:var(--font-mono); color:var(--text-tertiary); opacity:.85;
}
.termo-rodape{
  display:flex; gap:var(--s-2); justify-content:space-between; align-items:baseline;
  font-size:var(--t-micro); color:var(--text-tertiary);
}
.termo-falta{font-family:var(--font-mono); white-space:nowrap;}
.termo-falta.ok{color:var(--positive);}
.termo-falta.atencao{color:var(--warning);}
.termo-falta.estouro{color:var(--negative);}
/* A nota do total: explica por que a soma das linhas não fecha com ele. */
.termo-nota{
  font-size:var(--t-micro); color:var(--text-tertiary); font-style:italic;
  padding-top:2px;
}
.termo-valores{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* O marco dos 100% só cabe uma vez por bloco: repetido em toda linha viraria
   ruído. Nas listas, só a primeira barra mostra o rótulo. */
.termo-lista .termo:not(:first-child) .termo-marco::after{content:none;}
/* Com a navegação por nível a lista já nasce curta; o teto é rede de
   segurança para uma empresa com muitos grupos, e o piso é o que faz os dois
   painéis terminarem na mesma linha quando um lado tem menos contas. */
.termo-lista{
  display:flex; flex-direction:column; gap:var(--s-4);
  min-height:300px; max-height:420px; overflow-y:auto; padding-right:var(--s-2);
}
/* Sem previsto carregado (F2-07): estado compacto, sem a altura mínima dos termômetros. */
.grid-termos.sem-previsto .termo-lista{min-height:0;}
.termo-lista .termo.clicavel{cursor:pointer; border-radius:var(--radius-sm); padding:2px; margin:-2px;}
.termo-lista .termo.clicavel:hover{background:var(--surface-2);}
.termo-lista .termo.filha{padding-left:var(--s-4); border-left:2px solid var(--linha);}



/* ---- destaques automáticos: frases curtas tiradas dos próprios números.
   Ficam DEPOIS dos indicadores, nunca antes: no caminho de leitura, o número
   vem primeiro e o comentário depois. */
.destaques{display:flex; flex-wrap:wrap; gap:var(--s-3);}
.destaque{
  display:flex; align-items:center; gap:var(--s-2); flex:1 1 260px;
  padding:9px var(--s-4); border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); font-size:var(--t-mini); color:var(--text-secondary);
}
.destaque b{color:var(--text-primary); font-weight:600;}
.destaque::before{content:"●"; font-size:7px; color:var(--text-tertiary); flex:none;}
.destaque.ok::before{color:var(--positive);}
.destaque.atencao::before{color:var(--warning);}
.destaque.estouro::before{color:var(--negative);}

/* ---- as duas colunas de termômetros (receitas e despesas) terminam juntas */
/* minmax(0,…): `1fr` puro não deixa a coluna encolher abaixo do conteúdo, e o
   rodapé dos termômetros, sem quebra, alargava a página (TASK-074). */
.grid-termos{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:var(--s-5); align-items:stretch;}
.grid-termos > .painel{display:flex; flex-direction:column;}
.grid-termos > .painel > .painel-corpo{flex:1;}
@media (max-width:900px){
  .grid-termos{grid-template-columns:minmax(0, 1fr);}
}
/* Celular e tela de toque (onde o texto mínimo passa a 12px): o rodapé dos
   termômetros quebra em duas linhas em vez de cortar o valor. */
@media (max-width:720px), (pointer:coarse){
  .termo-rodape{flex-wrap:wrap; row-gap:2px;}
  .termo-valores{white-space:normal;}
}


/* ===================== painel executivo do Orçamento =====================
   Quatro cartões lado a lado no lugar da lista de sete linhas. Cada um
   responde a uma pergunta e nenhum repete o período, que já está no filtro
   acima. O que sustenta a leitura é o espaço em volta do número, não a borda. */
.painel-exec{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.exec-card{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-5) var(--s-5) var(--s-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  min-height:172px;
}
.exec-rot{
  font-size:var(--t-micro); letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-tertiary); font-weight:500;
}
.exec-valor{
  font-size:clamp(22px, 2.1vw, 30px); font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--text-primary); line-height:1.15;
}
.exec-valor.pos{color:var(--positive);}
.exec-valor.neg{color:var(--negative);}
.exec-nota{
  margin-top:auto; font-size:var(--t-micro); color:var(--text-tertiary);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.exec-spark{height:38px;}
.exec-spark svg{width:100%; height:100%; display:block;}

/* O selo de saúde: uma palavra, com o ponto colorido discreto na frente. */
.exec-selo{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding:3px 9px; border-radius:999px; font-size:var(--t-micro); font-weight:600;
  border:1px solid var(--border); color:var(--text-secondary); background:var(--surface-2);
}
.exec-selo::before{content:"●"; font-size:7px;}
.exec-selo.ok{color:var(--positive-on-soft); border-color:color-mix(in srgb, var(--positive) 35%, transparent); background:var(--positive-soft);}
.exec-selo.atencao{color:var(--warning); border-color:color-mix(in srgb, var(--warning) 35%, transparent); background:var(--warning-soft);}
.exec-selo.estouro{color:var(--negative); border-color:color-mix(in srgb, var(--negative) 35%, transparent); background:var(--negative-soft);}

/* Velocímetro: arco fino, marca dos 100% na escala e o percentual no centro. */
.exec-gauge-card{align-items:center; text-align:center;}
.exec-gauge-card .exec-rot{align-self:flex-start;}
.exec-gauge{width:100%; max-width:200px; margin:0 auto;}
.exec-gauge svg{width:100%; height:auto; display:block; overflow:visible;}
.gauge-trilho{stroke:var(--surface-3); fill:none; stroke-linecap:round;}
.gauge-arco{fill:none; stroke-linecap:round; transition:stroke-dasharray .25s ease;}
.gauge-arco.ok{stroke:var(--positive);}
.gauge-arco.atencao{stroke:var(--warning);}
.gauge-arco.estouro{stroke:var(--negative);}
/* Desenhado na cor do cartão: o corte aparece tanto no trilho claro quanto
   sobre o arco cheio, que é justamente quando saber onde estão os 100% importa. */
.gauge-marco{stroke:var(--surface); stroke-width:2.5; stroke-linecap:butt;}
.gauge-marco-rot{fill:var(--text-tertiary); font-size:8px; font-family:var(--font-mono);}
.gauge-pct{
  fill:var(--text-primary); font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; text-anchor:middle;
}
.gauge-pct.ok{fill:var(--positive);}
.gauge-pct.atencao{fill:var(--warning);}
.gauge-pct.estouro{fill:var(--negative);}
.gauge-situacao{fill:var(--text-tertiary); font-size:7.5px; text-anchor:middle;}

@media (max-width:1200px){
  .painel-exec{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
  .painel-exec{grid-template-columns:1fr;}
}


/* ===================== consumo do orçamento no tempo =====================
   Duas barras na mesma escala, uma sobre a outra: quanto do período já
   correu e quanto do orçamento já saiu. Alinhadas, a diferença entre elas é
   lida sem cálculo — e é ela que diz se o dinheiro está indo rápido demais. */
/* As barras começam na mesma linha do gráfico: centralizá-las deixava um vão
   morto no alto da coluna esquerda. */
.grid-ritmo{display:grid; grid-template-columns:minmax(300px, 1fr) 1.1fr; gap:var(--s-6); align-items:start;}
.grid-ritmo .chart-canvas-wrap{height:300px;}
.ritmo-barras{display:flex; flex-direction:column; gap:var(--s-4);}
.ritmo-item{display:flex; flex-direction:column; gap:5px;}
.ritmo-topo{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2);}
.ritmo-nome{font-size:var(--t-mini); color:var(--text-secondary);}
.ritmo-pct{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--t-body); font-weight:600; color:var(--text-primary);
}
.ritmo-trilho{height:10px; border-radius:5px; background:var(--surface-3); overflow:hidden;}
.ritmo-barra{height:100%; border-radius:5px;}
.ritmo-barra.tempo{background:var(--text-tertiary);}
.ritmo-barra.ok{background:var(--positive);}
.ritmo-barra.atencao{background:var(--warning);}
.ritmo-barra.estouro{background:var(--negative);}
.ritmo-nota{font-size:var(--t-micro); color:var(--text-tertiary);}

/* O veredito: uma frase, porque é o que a pessoa leva da tela. */
.ritmo-veredito{
  margin-top:var(--s-2); padding:var(--s-3) var(--s-4);
  border-left:3px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); font-size:var(--t-mini); color:var(--text-secondary);
  line-height:1.5;
}
.ritmo-veredito b{color:var(--text-primary); font-weight:600;}
.ritmo-veredito.ok{border-left-color:var(--positive);}
.ritmo-veredito.atencao{border-left-color:var(--warning);}
.ritmo-veredito.estouro{border-left-color:var(--negative);}

@media (max-width:1000px){
  .grid-ritmo{grid-template-columns:1fr;}
}

/* ============================================================
   INADIMPLÊNCIA — a carteira a receber lida pelo atraso
   Nenhum componente novo onde um existente serve: o topo usa o
   herói e as linhas de indicador do Contas, e o aging usa o
   termômetro do Orçamento. O que entra aqui é só o que não havia.
   ============================================================ */

/* Os dois painéis do meio. Grade própria, e não a do Orçamento, por causa
   do `minmax(0, …)`: com `1fr` puro a coluna não encolhe abaixo do conteúdo,
   e um nome de cliente comprido (razão social de hospital, com mais de
   cinquenta letras) empurrava o painel para fora da tela, levando junto o
   valor e o percentual da legenda. */
.grid-inad{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--s-5); align-items:stretch; margin-bottom:var(--s-5);
}
.grid-inad > .painel{display:flex; flex-direction:column; min-width:0;}
.grid-inad > .painel > .painel-corpo{flex:1; min-width:0;}
@media (max-width:900px){
  .grid-inad{grid-template-columns:1fr;}
}

/* O aging tem sempre as mesmas seis faixas: cabem todas, e nenhuma pode ficar
   escondida atrás de rolagem — ao contrário da lista do Orçamento, que varia
   com o plano de contas e por isso tem teto. */
.aging-lista{display:flex; flex-direction:column; gap:var(--s-4);}

/* Faixa sem nenhum título: fica na lista para o aging mostrar o
   tempo inteiro, sem convidar ao clique nem competir pela atenção. */
.termo-vazio{opacity:.45;}
.termo-vazio .termo-barra{background:var(--surface-3);}

/* Faixa com título filtra a tela: é um botão, alcançável por teclado, e a
   faixa em vigor fica marcada (aria-pressed) para quem volta a ela. */
.aging-lista .termo.clicavel{cursor:pointer; border-radius:var(--radius-sm); padding:2px; margin:-2px;}
.aging-lista .termo.clicavel:hover,
.aging-lista .termo[aria-pressed="true"]{background:var(--surface-2);}
.aging-lista .termo.clicavel:focus-visible{outline:none; box-shadow:var(--ring);}

/* O que ainda vai vencer: fecha a conta com a carteira, separado por uma
   linha porque não entra na régua do atraso. */
.aging-rodape{
  display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap;
  margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--linha);
  font-size:var(--t-mini); color:var(--text-secondary);
}
.aging-rodape .ar-valor{font-family:var(--font-mono); color:var(--text-primary); margin-left:auto;}
.aging-rodape .ar-nota{flex-basis:100%; color:var(--text-tertiary); font-size:var(--t-micro);}

/* Legenda da rosca de concentração. A rosca mostra a proporção; o
   valor e o percentual ficam aqui, na página, porque é com eles que
   se decide cobrança — não dentro de um balão que só o mouse abre. */
.rosca-legenda{
  display:flex; flex-direction:column; gap:1px; min-width:0;
  margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--linha);
}
.rosca-item{
  display:grid; grid-template-columns:10px minmax(0,1fr) auto 58px;
  align-items:center; gap:var(--s-2);
  padding:5px var(--s-1); border-radius:var(--radius-sm);
  font-size:var(--t-mini); color:var(--text-secondary);
}
.rosca-item.clicavel{cursor:pointer;}
.rosca-item.clicavel:hover{background:var(--surface-2); color:var(--text-primary);}
.rosca-item.clicavel:focus-visible{outline:none; box-shadow:var(--ring);}
.rosca-cor{width:10px; height:10px; border-radius:3px;}
.rosca-nome{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rosca-valor{font-family:var(--font-mono); color:var(--text-primary); white-space:nowrap;}
.rosca-pct{font-family:var(--font-mono); text-align:right; color:var(--text-tertiary);}

/* Chip do recorte que se remove no próprio chip, sem abrir a gaveta. */
.chip-x{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:var(--t-micro); padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--surface-2); color:var(--text-secondary);
  border:1px solid var(--border); font-family:inherit;
}
.chip-x:hover{color:var(--text-primary); border-color:var(--border-strong);}
.chip-x span[aria-hidden]{color:var(--text-tertiary); font-size:10px;}

/* A linha do título vencido leva o tom do atraso numa faixa à
   esquerda, não no fundo: fundo colorido em tabela longa cansa a
   leitura e ainda briga com o destaque da linha sob o cursor. */
table.ledger tbody tr.linha-atencao td:first-child{box-shadow:inset 3px 0 0 var(--warning);}
table.ledger tbody tr.linha-estouro td:first-child{box-shadow:inset 3px 0 0 var(--negative);}
table.ledger tbody tr.clicavel{cursor:pointer;}
table.ledger tbody tr.clicavel:focus-visible{outline:none; box-shadow:inset var(--ring);}

/* Aviso de que o painel aberto não segue os filtros da tela. Fica DEPOIS do
   título e ANTES dos números do cliente porque sem ele a soma de baixo não
   bate com os cartões de cima e parece erro — é leitura do número, não
   recado operacional. */
.aviso-recorte{
  font-size:var(--t-micro); color:var(--text-tertiary);
  padding:var(--s-2) 0 0;
}

/* Até onde a base enxerga. Vem depois de todas as faixas porque é leitura do
   que está na tela, não aviso de sistema: sem isso, "Acima de 360 dias: zero"
   parece ausência de dívida quando pode ser ausência de dado. */
.aging-limite{
  margin-top:var(--s-2); font-size:var(--t-micro); color:var(--text-tertiary);
}

/* Célula de realizado que abre os lançamentos por trás dela. O convite é
   discreto — sublinhado pontilhado e cursor —, porque a planilha é densa e um
   realce forte em dezenas de células viraria ruído. O destaque só aparece sob
   o cursor, onde a pessoa já está olhando. */
.orc-planilha td.cmp.abrivel{cursor:pointer; text-decoration:underline dotted var(--text-tertiary); text-underline-offset:3px;}
.orc-planilha td.cmp.abrivel:hover{background:var(--surface-3); color:var(--text-primary); text-decoration-color:var(--brand);}
.orc-planilha td.cmp.abrivel:focus-visible{outline:none; box-shadow:inset var(--ring);}

/* No drill-down, o lançamento que ABATE a conta — estorno ou devolução numa
   conta do lado oposto. Sem essa marca, uma linha negativa no meio da lista
   pareceria erro de sinal. */
table.ledger tbody tr.abate td:first-child{box-shadow:inset 3px 0 0 var(--warning);}

/* ============================================================
   CELULAR (TASK-074) — no fim do arquivo de propósito: estas regras
   vencem as regras-base de mesmo peso declaradas acima.
   ============================================================ */
@media (max-width:720px){
  /* Os grupos do recorte quebram linha em vez de empurrar a página para o
     lado: rótulo, atalhos e "Mês específico…" cabiam só a partir de 420px. */
  .recorte-periodo, .recorte-grupo, .recorte-cenario, .recorte-acoes{flex-wrap:wrap; row-gap:var(--s-2);}
  .btn-mes{min-width:0;}
  /* Rodapé das gavetas (Estrutura da DRE: "Restaurar" e "Salvar"): quebra
     em vez de cortar o botão da direita. */
  .drawer-foot{flex-wrap:wrap;}
  .drawer-foot > .btn{flex:1 1 auto;}
}
/* A grade de período abre no centro da tela no celular e no celular deitado:
   ancorada no botão, a quarta coluna (abr, ago, dez) ficava fora da tela
   abaixo de 480px, e com 360px de altura o fim da grade ficava abaixo da tela. */
@media (max-width:720px), (max-height:600px) and (pointer:coarse){
  .periodo-pop{
    position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);
    width:min(340px, calc(100vw - 24px)); min-width:0;
    max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; z-index:170;
    box-shadow:0 18px 48px rgba(15,23,33,.28);
  }
}

/* Gavetas no celular e no tablet: a altura acompanha a área visível (dvh). No
   iOS, presas a top e bottom elas seguiam a viewport de layout, e o rodapé
   (Aplicar, Salvar) podia ficar atrás da barra do navegador. */
@media (max-width:1100px), (pointer:coarse){
  .drawer{bottom:auto; height:100vh; height:100dvh;}
}

/* --- tabelas no celular (TASK-074) ---
   `empilhavel`: abaixo de 640px a tabela vira uma pilha de cartões, cada
   célula com o título da coluna à esquerda (rótulos copiados do cabeçalho
   pelo core.js, `rotularTabela`). Vale para lançamentos, Contas,
   Inadimplência e Administração. A DRE e a planilha do Orçamento continuam
   tabela, com a primeira coluna fixa e o aviso de deslizar (`.dica-rolagem`). */
.dica-rolagem{display:none; font-size:var(--t-mini); color:var(--text-tertiary); margin:0 0 6px; padding:0 var(--s-1);}
/* Só no celular e no tablet: no desktop a barra de rolagem já diz que a tabela continua. */
@media (max-width:1100px), (pointer:coarse){ .dica-rolagem{display:block;} }
@media (max-width:640px){
  table.empilhavel.empilhavel{min-width:0; width:100%;}
  table.empilhavel.empilhavel thead{display:none;}
  table.empilhavel.empilhavel, table.empilhavel.empilhavel tbody, table.empilhavel.empilhavel tfoot,
  table.empilhavel.empilhavel tr{display:block; width:100%;}
  table.empilhavel.empilhavel tbody tr{padding:6px 0; border-bottom:1px solid var(--border);}
  table.empilhavel.empilhavel tbody tr:last-child{border-bottom:0;}
  table.empilhavel.empilhavel td{
    display:grid; grid-template-columns:minmax(96px, 38%) minmax(0, 1fr); column-gap:var(--s-3); row-gap:2px;
    align-items:baseline; justify-items:end; text-align:right;
    padding:4px var(--s-4); border:0; white-space:normal; max-width:none; overflow:visible; position:static;
  }
  table.empilhavel.empilhavel td > *{grid-column:2; max-width:100%;}
  table.empilhavel.empilhavel td::before{
    content:attr(data-rotulo); grid-column:1; grid-row:1 / span 6; justify-self:start; text-align:left;
    font-size:var(--t-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary);
  }
  table.empilhavel.empilhavel td.num{white-space:nowrap;}
  table.empilhavel.empilhavel td:not([data-rotulo]){display:block; text-align:left;}
  table.empilhavel.empilhavel td:not([data-rotulo])::before{content:none;}
  table.empilhavel.empilhavel td.acoes{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--s-2); padding-top:var(--s-2);}
  table.empilhavel.empilhavel tfoot{background:var(--surface-2); border-top:1px solid var(--border-strong);}
  table.empilhavel.empilhavel tfoot tr{padding:6px 0;}
  table.empilhavel.empilhavel tfoot td{position:static; background:transparent; border:0;}
  /* Cartões não precisam da moldura com altura máxima: rolar dentro de
     uma caixa no meio da página é pior que rolar a página. */
  .table-scroll:has(> table.empilhavel){max-height:none;}
  /* Tabelas que continuam tabela: primeira coluna mais estreita. */
  table.orc-planilha .fixa{max-width:46vw; white-space:normal;}

  /* --- ajustes pontuais --- */
  /* Paginação em duas linhas: anterior / página / próxima e, embaixo, o
     tamanho da página — o seletor encolhia até sobrar só a seta. */
  .pagination{flex-direction:column; align-items:stretch;}
  .pg-controls{flex-wrap:wrap; justify-content:space-between; row-gap:var(--s-2);}
  .pg-controls select{flex:1 1 100%; max-width:none;}
  /* Contas: mês e ano por extenso entre as setas; "Hoje" desce se faltar espaço. */
  .mes-nav{flex-wrap:nowrap; row-gap:var(--s-2);}
  .mes-atual{flex:1 1 auto; min-width:0;}
  .mes-atual .select-compacto{max-width:none;}
  #sel-mes{flex:1 1 auto; min-width:0;}
  #sel-ano{flex:none; width:5rem;}
  /* Menos respiro lateral: com a seta e o "Hoje" na mesma linha, "Setembro" não cabia inteiro em 360 px. */
  .mes-atual .select-compacto{padding-left:var(--s-2); padding-right:20px; background-position:calc(100% - 12px) 52%, calc(100% - 7px) 52%;}
  .mes-nav{gap:var(--s-1);}
  /* F2-08: "Hoje" na mesma linha das setas e do mês (só desce em tela muito estreita). */
  .mes-nav #mes-hoje{flex:none;}
}
@media (max-width:359px){
  .mes-nav{flex-wrap:wrap;}
}

@media (max-width:420px){
  /* Calendário das Contas: a moldura cede espaço para cada dia ter 40px. */
  #painel-calendario .painel-corpo{padding-left:var(--s-3); padding-right:var(--s-3);}
  .cal-semana{font-size:11px;}
  .cal-valor{font-size:11px;}
}

/* Erro de carga com saída (TASK-080, F3-04): mensagem e botão "Tentar de novo". */
.erro-carga{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap;}
.erro-carga-texto{display:flex; flex-direction:column; gap:2px; min-width:0;}
.erro-carga-botao{min-height:40px; flex:none;}
.empty-state .vazio-acao{margin-top:var(--s-3);}

/* ============================================================
   FAIXA DO RECORTE: "Opção 3 híbrida" (Fluxo na TASK-077b; Contas, DRE e
   Orçamento na TASK-083). Aprovada pelo Mateus em 22/10/2026
   (saidas/INTERNO/2026-10-22_estudo-faixa-filtros):
   - abas da tela e Empresa num cabeçalho que rola, nunca preso (.cab-tela);
   - computador (a partir de 1280px, com mouse): a faixa é UMA linha presa
     (Período, Mostrar, Tipo, Filtros, Exportar), cerca de 49px;
   - tablet e celular: a faixa completa rola com a página; quando ela sai
     por cima, uma pílula com o resumo do recorte fica presa e abre o painel;
   - celular deitado: nada preso além da barra de contexto.
   Marcação: <section class="recorte recorte-faixa"> com <div class="recorte-linha
   linha-faixa">; `faixa-cheia` e `faixa-meia` dizem quanto do celular cada grupo
   ocupa. O comportamento (pílula, painel, foco) é o PF.ligarFaixa, do core.js.
   ============================================================ */

/* --- cabeçalho da tela: abas + empresa (rola com a página) --- */
.cab-tela{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  margin-top:calc(var(--s-3) * -1); border-bottom:1px solid var(--border);
}
.abas-tela{display:flex; gap:var(--s-5); min-width:0;}
.aba-tela{
  appearance:none; cursor:pointer; font-family:inherit; white-space:nowrap;
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:10px 2px 9px; font-size:var(--t-medio); font-weight:500; color:var(--text-secondary);
}
.aba-tela:hover{color:var(--text-primary);}
/* aba ativa com dois sinais: peso e sublinhado */
.aba-tela[aria-selected="true"], .aba-tela.active{color:var(--text-primary); font-weight:600; border-bottom-color:var(--brand);}
.aba-tela:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);}
.cab-empresa{margin-left:auto; padding:6px 0;}
.cab-empresa:empty{display:none;}
.cab-empresa .select{min-width:220px; max-width:340px; font-weight:600;}
.cab-empresa .select.mudou{border-color:color-mix(in srgb, var(--brand) 45%, transparent); background-color:var(--brand-soft); color:var(--brand);}
.cab-acoes{margin-left:auto; padding:6px 0; display:flex; align-items:center; gap:var(--s-2);}
.cab-acoes:empty{display:none;}

/* --- faixa do recorte --- */
/* Rola com a página por padrão; só o computador a prende (abaixo). */
.recorte.recorte-faixa{
  position:static; -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg);
  padding-top:7px; padding-bottom:7px;
}
.recorte-faixa .recorte-linha{gap:var(--s-2) var(--s-4);}
.linha-faixa .recorte-periodo{position:relative;}
/* A grade do período abre sob o último atalho, alinhada à direita do grupo. */
.linha-faixa .recorte-periodo > .periodo-pop{left:auto; right:0; transform:none;}
/* Fugiu do padrão: o controle ganha o tom do acento (sem repetir em chip). */
.linha-faixa .segmentado.mudou button.active,
.linha-faixa .camadas.mudou .camada[aria-pressed="true"]{
  background:var(--brand-soft); color:var(--brand);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent);
}
.linha-faixa .select.mudou{border-color:color-mix(in srgb, var(--brand) 45%, transparent); background-color:var(--brand-soft); color:var(--brand);}
.linha-faixa .btn svg, .recorte-resumo .resumo-exportar svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round;}

/* Chips do que mora em Filtros: fora da faixa, logo abaixo dela. */
.recorte-faixa + .active-chips{margin-top:calc(var(--s-2) * -1);}

/* Computador: uma linha presa logo abaixo da barra de contexto. */
@media (min-width:1280px) and (pointer:fine){
  .recorte.recorte-faixa{
    position:sticky;
    background:color-mix(in srgb, var(--bg) 97%, transparent);
    -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px);
  }
  .recorte-faixa .recorte-linha{flex-wrap:nowrap;}
  /* Telas com mais controles (DRE): uma linha quando cabe; o período livre e
     a comparação com outro período abrem uma segunda linha em vez de estourar. */
  .recorte-faixa.faixa-flexivel .recorte-linha{flex-wrap:wrap;}
}
/* 1280 a 1365px: sem os rótulos e com o Exportar só no ícone, para caber numa linha. */
@media (min-width:1280px) and (max-width:1365px) and (pointer:fine){
  .recorte-faixa .rotulo, .recorte-faixa .btn-txt{display:none;}
  .recorte-faixa .btn-exportar-faixa{padding:0 10px;}
}
/* Telas densas (DRE): os rótulos só cabem acima de 1600px. */
@media (min-width:1280px) and (max-width:1599px) and (pointer:fine){
  .recorte-faixa.faixa-densa .rotulo, .recorte-faixa.faixa-densa .btn-txt{display:none;}
  .recorte-faixa.faixa-densa .btn-exportar-faixa{padding:0 10px;}
}

/* --- resumo preso (tablet e celular, depois de rolar) --- */
.recorte-resumo{
  position:fixed; top:0; left:0; right:0; z-index:45;
  display:flex; align-items:center; gap:var(--s-2);
  padding:7px var(--s-5);
  /* quase opaco: cabeçalho translúcido perde contraste */
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 14px -10px rgba(15,23,33,.35);
  transform:translateY(-130%); visibility:hidden;
  transition:transform .25s ease, visibility 0s linear .25s;
}
.app-main .recorte-resumo{top:var(--topbar);}
@media (min-width:1101px){ .app-main .recorte-resumo{left:var(--sidebar);} }
.recorte-resumo.on{transform:none; visibility:visible; transition:transform .25s ease;}
/* Não existe no computador (a faixa já é presa) nem no celular deitado
   (qualquer faixa presa ali passa de 25% da altura). */
@media (min-width:1280px) and (pointer:fine), (max-height:500px) and (pointer:coarse){
  .recorte-resumo{display:none;}
}
@media (prefers-reduced-motion:reduce){ .recorte-resumo, .recorte-resumo.on{transition:none;} }

.recorte-resumo .resumo-btn{
  appearance:none; cursor:pointer; font-family:inherit; text-align:left;
  flex:1 1 auto; min-width:0; max-width:640px; display:flex; align-items:center; gap:10px;
  height:var(--altura-controle); padding:0 12px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  color:var(--text-primary); font-size:var(--t-corpo); font-weight:600;
}
.recorte-resumo .resumo-btn:hover{background:var(--surface-2);}
.recorte-resumo .resumo-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.recorte-resumo .resumo-btn svg{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round;}
.recorte-resumo .resumo-btn .chev{width:12px; height:12px; stroke-width:2;}
.recorte-resumo .resumo-btn .contador{margin-left:0;}
.recorte-resumo .resumo-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.recorte-resumo .resumo-txt .sep{color:var(--text-tertiary); font-weight:400; padding:0 2px;}
.recorte-resumo .resumo-btn.mudou{background:var(--brand-soft); border-color:color-mix(in srgb, var(--brand) 45%, transparent); color:var(--brand);}
.recorte-resumo .resumo-exportar{flex:none; min-width:var(--altura-controle); padding:0 10px;}

/* A caixa do menu Exportar da faixa ancora no botão (a faixa é static fora do computador). */
.menu-exportar-faixa{position:relative;}
/* O botão fica na ponta direita da faixa: o menu abre para a esquerda em qualquer largura (o padrão do celular, left:0, estouraria a tela). */
.menu-exportar-faixa .gear-menu{left:auto; right:0; max-width:calc(100vw - 32px);}
/* Ao fechar o painel sem alvo visível, o foco volta para a faixa só para não cair no body: sem contorno. */
.recorte-faixa:focus{outline:none;}

/* --- painel do recorte: a gaveta recebe a linha da faixa --- */
.filtros-recorte{margin-bottom:var(--s-4); padding-bottom:var(--s-4); border-bottom:1px solid var(--linha);}
.filtros-recorte:empty{display:none;}
.filtros-recorte .recorte-linha{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:var(--s-3);}
.filtros-recorte .recorte-periodo, .filtros-recorte .recorte-grupo, .filtros-recorte .recorte-cenario{flex-wrap:wrap; row-gap:6px;}
.filtros-recorte .rotulo{flex-basis:100%; margin:0; display:block;}
.filtros-recorte .segmentado, .filtros-recorte .camadas{display:flex; width:100%;}
.filtros-recorte .segmentado button, .filtros-recorte .camada{flex:1 1 0; justify-content:center; padding:0 4px;}
.filtros-recorte .select-compacto{max-width:none; flex:1 1 0; min-width:0;}
.filtros-recorte .recorte-acoes{display:none;}
/* A Empresa do consolidado mora no cabeçalho (que rola) e também no painel da pílula: rolada a página,
   é o painel que a oferece. Os dois seletores são o mesmo estado (Orçamento, TASK-087). */
.filtros-empresa{display:flex; flex-direction:column; gap:6px;}
.filtros-empresa[hidden]{display:none;}
.filtros-empresa .select{width:100%; font-weight:600;}
.filtros-empresa .select.mudou{border-color:color-mix(in srgb, var(--brand) 45%, transparent); background-color:var(--brand-soft); color:var(--brand);}

/* --- grade do período no celular e no celular deitado ---
   Mais acima ela abre fixa no meio da tela, e a conferência a media como
   faixa presa de 32% a 58% da altura. Na faixa ela desce logo abaixo do
   botão, por cima do conteúdo, e rola com a página. */
@media (max-width:720px), (max-height:600px) and (pointer:coarse){
  .linha-faixa .periodo-ancora{position:static;}
  .linha-faixa .periodo-pop,
  .linha-faixa .recorte-periodo > .periodo-pop{
    position:absolute; top:calc(100% + 6px); left:0; right:0; transform:none;
    width:min(340px, 100%); min-width:0; margin-inline:auto;
    max-height:none; overflow:visible; z-index:60;
  }
}

/* --- celular em pé --- */
@media (max-width:560px){
  .cab-tela{margin-top:calc(var(--s-2) * -1);}
  .abas-tela{width:100%; gap:0;}
  .aba-tela{flex:1 1 auto; text-align:center; min-height:44px; padding:0 4px; font-size:var(--t-corpo);}
  .aba-tela:first-child{flex:0 0 auto; padding:0 var(--s-5);}
  /* Empresa vai para dentro de Filtros. */
  .cab-empresa:not(.cab-empresa-visivel){display:none;}
  .cab-empresa-visivel{width:100%; margin-left:0; padding-top:0;}
  .cab-empresa-visivel .select{min-width:0; max-width:none; width:100%;}
  .cab-tela:not(:has(.abas-tela)){display:none;}
  .cab-acoes{width:100%; margin-left:0;}

  .recorte-faixa .rotulo{display:none;}
  .recorte-faixa .faixa-cheia{width:100%;}
  .recorte-faixa .segmentado, .recorte-faixa .camadas{display:flex; width:100%;}
  .recorte-faixa .segmentado button, .recorte-faixa .camada{flex:1 1 0; justify-content:center; padding:0 4px;}
  /* Tipo, Filtros e Exportar dividem a linha quando cabem; senão Filtros desce. */
  .recorte-faixa .faixa-meia{flex:1 1 220px;}
  .recorte-faixa .faixa-curta{flex:0 0 104px;}
  .recorte-faixa .faixa-curta .select-compacto{width:100%;}
  .recorte-faixa .recorte-acoes{flex:0 0 auto; margin-left:auto;}
  .recorte-faixa .select-compacto{flex:1 1 0; min-width:0; max-width:none;}
}
/* Exportar só no ícone no celular (em pé e deitado). */
@media (max-width:720px), (max-height:500px) and (pointer:coarse){
  .recorte-faixa .btn-txt{display:none;}
  .recorte-faixa .btn-exportar-faixa{padding:0 10px;}
  .recorte-resumo{padding-left:var(--s-4); padding-right:var(--s-4);}
  /* no celular o resumo diz só o que foge do padrão; o contador conta os filtros */
  .recorte-resumo .resumo-txt .pd{display:none;}
  .recorte-resumo .resumo-btn{gap:8px; padding:0 10px 0 12px;}
  .recorte-resumo .resumo-btn > svg:first-child{display:none;}
}
/* Toque: abas com 44px; a pílula com 40px (alvo de toque mínimo) para a
   faixa presa ficar em 55px, como medido no estudo. */
@media (pointer:coarse){
  .aba-tela{min-height:44px; min-width:56px; padding-left:var(--s-2); padding-right:var(--s-2);}
  .recorte-resumo .resumo-btn, .recorte-resumo .resumo-exportar{height:40px; min-height:40px;}
}
/* Celular deitado: sem rótulos, para a faixa caber em poucas linhas. */
@media (max-height:500px) and (pointer:coarse){
  .recorte-faixa .rotulo{display:none;}
}

/* ============================================================
   CONTAS · atraso por idade (TASK-098)
   O atraso é a posição de hoje, de todos os meses: dois cartões lado a lado
   (até 1 ano e vencidos há mais de 1 ano, as cinco idades da Inadimplência, tokens
   --id-1 a --id-5), o seletor "Atraso" na faixa e a lista de títulos.
   ============================================================ */

/* Seletor "Atraso" da faixa: rótulo e lista no mesmo controle. */
.sel-atraso{display:inline-flex; align-items:center; height:var(--altura-controle, 36px); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); padding-left:10px; gap:6px; min-width:0;}
.sel-atraso .pre{font-size:12px; font-weight:500; color:var(--text-secondary); flex:none;}
.sel-atraso .select{border:0; background-color:transparent; height:calc(var(--altura-controle, 36px) - 2px); font-weight:600; padding-left:0; width:auto; flex:1; min-width:0;}
/* No computador a faixa tem de caber numa linha com o Atraso: o ano não precisa de 132px. */
@media (min-width:1280px) and (pointer:fine){
  .faixa-contas .mes-atual #sel-ano{min-width:84px; max-width:84px;}
  .faixa-contas .mes-atual #sel-mes{min-width:124px;}
  .faixa-contas .sel-atraso{flex:none;}
}
.sel-atraso.mudou{border-color:color-mix(in srgb, var(--brand) 45%, transparent); background:var(--brand-soft);}
.sel-atraso.mudou .select, .sel-atraso.mudou .pre{color:var(--brand);}
.filtros-recorte .sel-atraso{width:100%;}

/* Legenda do bloco e os dois cartões, com a mesma altura. */
.at-bloco{display:flex; flex-direction:column; gap:var(--s-2); margin-top:var(--s-4);}
.at-bloco[hidden]{display:none;}
.at-grupo-rot{display:flex; align-items:baseline; gap:var(--s-2); flex-wrap:wrap; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);}
.at-grupo-rot span{font-weight:500; letter-spacing:0; text-transform:none;}
.at-cartoes{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); align-items:stretch;}
.at-cartoes.um{grid-template-columns:1fr;}
.at-cartao{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--negative); border-radius:var(--radius-lg); padding:var(--s-4); display:flex; flex-direction:column; gap:8px; min-width:0;}
.at-cartao.antigo{border-left-color:var(--id-4);}
.at-cartao.sel{box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);}
.at-rot{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary);}
.at-rot .base{font-weight:500; letter-spacing:0; text-transform:none;}
.at-valor{font-family:var(--font-mono); font-size:26px; line-height:1.1; font-weight:600; letter-spacing:-.02em; white-space:nowrap;}
.at-valor.neg{color:var(--negative);}
.at-nota{font-size:12px; color:var(--text-secondary);}
.at-nota b{color:var(--text-primary); font-weight:600;}
.at-barra{display:flex; height:12px; gap:2px; border-radius:3px; overflow:hidden; background:var(--surface-3);}
.at-barra span{display:block; height:100%;}
.at-legenda{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--text-secondary);}
.at-legenda i{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;}
.at-legenda b{font-family:var(--font-mono); color:var(--text-primary); font-weight:600;}
.at-acoes{margin-top:auto; padding-top:var(--s-2); border-top:1px solid var(--linha); display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;}
.at-acoes .peq{font-size:12px; color:var(--text-tertiary);}
.at-link{appearance:none; border:0; background:none; color:var(--brand); font-family:inherit; font-weight:600; font-size:var(--t-corpo); cursor:pointer; padding:0; min-height:34px; white-space:nowrap;}
.at-link:hover{text-decoration:underline;}
.at-link:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);}
.at-tira{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; font-size:12px; color:var(--text-secondary); background:var(--surface-2); border-radius:var(--radius-md); padding:6px 10px; border-left:3px solid var(--id-4);}
.at-tira.vazia{border-left-color:var(--positive);}
.at-tira.sel{box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 55%, transparent);}
.at-aviso{font-size:var(--t-corpo); color:var(--text-secondary); padding:var(--s-3) var(--s-4); background:var(--surface-2); border-radius:var(--radius-md);}
.at-aviso button{margin-left:var(--s-2);}

/* Lista "Títulos em atraso". */
#painel-atraso .painel-head{flex-wrap:nowrap; align-items:flex-start;}
#painel-atraso .painel-head > div:first-child{min-width:0; flex:1;}
.at-acoes-lista{display:flex; align-items:center; gap:var(--s-2); flex:none;}
.at-idade{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); white-space:nowrap;}
.at-idade i{display:inline-block; width:10px; height:10px; border-radius:2px; flex:none;}
#painel-atraso table.ledger th{cursor:default; font-size:12px;}
#painel-atraso table.ledger th .arrow{font-size:12px;}
#painel-atraso{scroll-margin-top:calc(var(--topbar, 56px) + 16px);}
#painel-atraso table.ledger td.cli{font-weight:600;}
#painel-atraso .table-scroll{max-height:none;}
#painel-atraso .hint{font-size:12px;}
.at-paginacao{display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); flex-wrap:wrap; padding:var(--s-3) var(--s-4); font-size:12px; color:var(--text-secondary); border-top:1px solid var(--linha);}
.at-paginacao .at-paginas{display:flex; gap:var(--s-2); align-items:center;}
.at-paginacao .btn{font-size:12px;}
.at-cards{display:none;}
.at-mais{display:none;}

/* TASK-103: o bloco abre recolhido numa linha-botão; os cartões ficam em .at-detalhe. */
.at-resumo{appearance:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); text-align:left; font-family:inherit; font-size:var(--t-corpo); color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--negative); border-radius:var(--radius-lg); padding:8px var(--s-4); min-height:44px; cursor:pointer;}
.at-resumo:hover{background:var(--surface-2);}
.at-resumo:focus-visible{outline:none; box-shadow:var(--ring);}
.at-r-texto{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--s-2); min-width:0; flex:1;}
.at-r-item{display:inline-block; min-width:0;}
.at-r-rot{font-weight:600; color:var(--text-primary);}
.at-r-valor{font-family:var(--font-mono); font-weight:600; color:var(--text-primary); white-space:nowrap;}
.at-r-valor.neg{color:var(--negative);}
.at-resumo.zero{border-left-color:var(--border-strong);}
.at-r-aviso .at-r-dado{color:var(--text-secondary);}
.at-r-dado{display:inline;}
.at-r-qtd{white-space:nowrap;}
.at-r-sep{display:none; color:var(--text-tertiary);}
.at-r-ver{flex:none; color:var(--brand); font-weight:600; white-space:nowrap;}
.at-detalhe{display:flex; flex-direction:column; gap:var(--s-2);}
.at-detalhe[hidden]{display:none;}
@media (min-width:900px){
  .at-r-sep{display:inline;}
}
@media (max-width:639px){
  /* celular: o rótulo numa linha e, embaixo, valor e quantidade; assim a linha não deixa palavra solta */
  .at-r-texto{flex-direction:column; align-items:flex-start; gap:6px;}
  .at-r-item{display:flex; flex-direction:column; gap:0;}
  .at-r-qtd{white-space:normal;}
}
@media (pointer:coarse){
  .at-resumo{min-height:48px;}
}

@media (max-width:900px){
  .at-cartoes{grid-template-columns:1fr;}
}
@media (max-width:1000px){
  /* celular deitado e tablet pequeno: a tabela de 8 colunas cortaria o saldo; a lista vira cartões */
  .at-desk{display:none;}
  .at-cards{display:flex; flex-direction:column;}
  .at-cc{padding:10px var(--s-3); border-bottom:1px solid var(--linha); display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--text-secondary);}
  .at-cc .l1{display:flex; justify-content:space-between; gap:8px; font-size:var(--t-corpo); color:var(--text-primary);}
  .at-cc .l1 b{font-weight:600; min-width:0; overflow-wrap:anywhere;}
  .at-cc .l1 .num{font-family:var(--font-mono); white-space:nowrap;}
  .at-cc .neg{color:var(--negative);}
  .at-mais{display:flex; justify-content:center; padding:var(--s-2) var(--s-3) var(--s-3);}
  .at-mais .btn{width:100%;}
}
@media (max-width:720px){
  .at-cartao{padding:var(--s-3);}
  .at-valor{font-size:24px;}
  .at-acoes-lista .btn-txt{display:none;}
  .at-acoes-lista .btn{min-width:40px; padding:0 10px; border:1px solid var(--border-strong);}
  .sel-atraso{width:100%; max-width:100%; box-sizing:border-box;}
  .sel-atraso .select{width:0; min-width:0; flex:1 1 0;}
  .recorte-acoes{min-width:0; max-width:100%; width:100%; margin-left:0;}
}
@media (pointer:coarse){
  .at-link{min-height:40px;}
  .at-paginacao .btn{min-height:40px;}
}