/* Relatório mensal: a capa, as divisórias com aba em cascata na borda direita e as
   folhas. No celular as abas viram uma tira fixa no rodapé. */

/* ---- contexto na faixa ---- */
/* A faixa tem altura propria e fica acima da barra de abas: quebrar linha aqui esconde a
   segunda fileira atras da barra (medido). Entao ela nao quebra, e o que cede e o nome do
   cliente, que tem teto e reticencias de verdade no `span` que o desenha. */
.ctx { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.ctx__cliente { color: var(--capa-ink); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.ctx__campo { display: inline-flex; min-width: 0; }
.fh-select--capa { min-height: 34px; padding-block: 0; background-color: transparent; border-color: var(--capa-ink-soft); color: var(--capa-ink); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4ede4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); }
.fh-select--capa option { color: var(--ink-strong); background: var(--paper-raised); }
.fh-select--capa:hover { border-color: var(--gold); }
.fh-select--capa:focus-visible { border-color: var(--gold); box-shadow: var(--focus-ring-on-capa); }
.ctx__select { max-width: 30ch; }
.ctx__select--mes { flex: none; max-width: 24ch; } /* não encolhe quando há seletor de cliente ao lado ("Julho de 202" era o mês cortado) e sobra folga para o chevron */
.ctx__competencia { display: inline-flex; align-items: center; gap: var(--s-2); }
/* `flex: none`: sem isso a seta encolhia com a linha (medida a 15 px no notebook, metade do
   alvo declarado) porque o nome do cliente e o seletor do mês disputam a mesma faixa. */
.ctx__seta { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-control); color: var(--capa-ink); text-decoration: none; }
.ctx__seta:hover { background: rgba(244, 237, 228, 0.1); }
.ctx__seta.is-off { color: var(--capa-ink-faint); }
.ctx__seta .fh-icon { width: 18px; height: 18px; }

/* Contexto dentro da folha: só no celular, onde a faixa não tem espaço. */
.rel-ctx-movel { display: none; }
@media (max-width: 1023px) {
  .rel-ctx-movel { display: block; padding: var(--s-4) 0 0; }
  .rel-ctx-movel .ctx { flex-wrap: wrap; gap: var(--s-3); }
  .rel-ctx-movel .ctx__cliente { color: var(--ink-strong); max-width: 100%; white-space: normal; }
  .rel-ctx-movel .fh-select--capa { color: var(--ink-strong); border-color: var(--tan); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23152f4d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); }
  /* No celular a calha de 3rem do chevron comia o mês: "Junho de 2026" precisa de 115 px e o
     campo deixava 102, e o `select` corta sem reticências ("Junho de 202"). A calha encolhe,
     o campo cresce até a linha inteira e a seta de virar o mês fica na linha de baixo. */
  .rel-ctx-movel .ctx__select--mes { flex: 1 1 100%; max-width: 100%; padding-right: var(--s-6); background-position: right var(--s-3) center; }
  .rel-ctx-movel .ctx__competencia { flex-wrap: wrap; }
  .rel-ctx-movel .ctx__seta { color: var(--ink-strong); }
  .rel-ctx-movel .ctx__seta.is-off { color: var(--neutral); }
  .rel-ctx-movel .fh-estado--capa { color: var(--ink-soft); }
  .rel-ctx-movel .fh-estado--capa.fh-estado--fechado .fh-estado__ponto { fill: var(--oxford); }
}
/* No primeiro viewport do celular a faixa de contexto e a capa da folha diziam as MESMAS três
   coisas (cliente, competência e estado) uma embaixo da outra, gastando um quarto da tela antes
   do primeiro número. Quem repete é a faixa: ali fica o que serve para TROCAR de mês, e a capa
   continua dizendo de que mês se trata. */
@media (max-width: 599px) {
  .rel-ctx-movel .fh-estado--capa, .rel-ctx-movel .ctx__cliente { display: none; }
}

/* ---- pasta (v2): a barra de grupos no topo e a folha branca sobre a mesa ---- */
.rel { position: relative; max-width: var(--painel-max); margin: 0 auto; padding: 0 var(--gutter); }
.rel .fh-barra { margin: 0 calc(-1 * var(--gutter)); }
.rel__folha { min-width: 0; margin-top: var(--s-5); padding: 0 var(--s-6) var(--s-6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-figure); box-shadow: var(--shadow-cartao); }
/* a folha recebe foco por programa (ao entrar na apresentação, que esconde a barra): o anel
   é o mesmo da moldura, e só quando o navegador julga que o leitor está no teclado */
.rel__folha:focus { outline: none; }
.rel__folha:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---- capa (folha 00) e cabeçalho das demais folhas ---- */
.rel-cabeca { padding: var(--s-7) 0 var(--s-4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-2); }
/* O título da folha é uma palavra em 28; o 48 fica só para o número-manchete. */
.rel-cabeca__titulo { font-size: var(--fs-28); line-height: var(--lh-28); letter-spacing: var(--track-display); }
.rel-cabeca__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.rel__conteudo { display: grid; min-width: 0; overflow-x: clip; }
.rel__conteudo > * { min-width: 0; }
.rel__rodape { display: grid; gap: var(--s-5); padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--rule); }
/* Virar a folha: o fim de cada folha é a próxima aba a puxar. */
.rel__virar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
/* contorno tan sobre papel: a navegação não pode ser a tinta mais forte da folha (o dado é) */
.rel__virar-link { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4); border-radius: var(--radius-aba); background: var(--paper); border: 1px solid var(--tan); color: var(--ink-strong); text-decoration: none; transition: background-color var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.rel__virar-link--prox { text-align: right; justify-items: end; }
.rel__virar-link:hover { background: var(--tab-hover); transform: translateX(var(--aba-advance)); }
.rel__virar-link--ant:hover { transform: translateX(calc(-1 * var(--aba-advance))); }
.rel__virar-nome { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-19); line-height: var(--lh-19); font-weight: var(--fw-semibold); }
.rel__virar-link .fh-legend { color: var(--ink-soft); }
.rel__virar-nome .fh-icon { width: 20px; height: 20px; }

/* ---- Leitura ---- */
.leitura__fatos { display: grid; }
.leitura__narrativa { display: grid; gap: var(--s-4); }
.leitura__frase { font-size: var(--fs-19); line-height: var(--lh-19); color: var(--ink); max-width: var(--measure); }
.leitura__prova { font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); text-decoration: none; white-space: nowrap; margin-left: var(--s-2); }
.leitura__base { white-space: nowrap; margin-left: var(--s-2); }
.leitura__prova:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.leitura__sinais { display: grid; }
.leitura__sinal { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.leitura__sinal:first-child { border-top: 0; }
.leitura__sinal-texto { font-size: var(--fs-15); color: var(--ink); }
.leitura__indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); margin: 0; }
.leitura__indicador { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.leitura__indicador:nth-child(-n + 2) { border-top: 0; }
.leitura__indicador dt { color: var(--ink-soft); }
.leitura__indicador dd { margin: 0; color: var(--ink-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.leitura__indicador.is-neg dd { color: var(--alert); }
.leitura__ver-mais { display: none; margin-top: var(--s-3); }

/* ---- Ponte ---- */
.ponte__cascata svg { width: 100%; height: auto; }
.ponte__passos { max-width: 60rem; }
.ponte__cobertura { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.ponte__cobertura-num { font-size: var(--fs-48); line-height: var(--lh-48); letter-spacing: var(--track-display); font-weight: var(--fw-bold); color: var(--ink-strong); }
.ponte__cobertura-num.is-neg { color: var(--alert); }
.ponte__cobertura-num.is-vazia { color: var(--ink-muted); font-weight: var(--fw-regular); font-size: var(--fs-19); letter-spacing: 0; } /* "sem dado" nunca em 48 px de exibição */
.ponte__reguas { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.ponte__regua { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 7rem; gap: var(--s-4); align-items: center; }
.ponte__regua-rotulo { color: var(--ink); }
.ponte__regua-valor { text-align: right; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.ponte__regua-dupla { overflow: visible; }
.ponte__regua-dupla .fh-track__fill { position: absolute; }
.ponte__partes { margin-top: var(--s-5); }
.ponte__parte, .ponte__stat { display: grid; gap: var(--s-1); align-content: start; }
.ponte__parte-valor, .ponte__stat-valor { font-size: var(--fs-19); font-weight: var(--fw-bold); color: var(--ink-strong); }
.ponte__stat--neg .ponte__stat-valor { color: var(--ink-strong); }
.ponte__stat--warn .ponte__stat-valor { color: var(--alert); }
.ponte__stat--faint .ponte__stat-valor { color: var(--ink-muted); font-weight: var(--fw-regular); }
.ponte__stat--dist .ponte__stat-valor { color: var(--gold-text); }
.ponte__stats { margin-top: var(--s-6); }
.ponte__kind { margin-top: var(--s-4); }

/* ---- Capital de giro ---- */
.capital__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.capital__lacuna { font-size: var(--fs-48); line-height: var(--lh-48); letter-spacing: var(--track-display); font-weight: var(--fw-bold); color: var(--ink-strong); }
.capital__lacuna.is-neg { color: var(--alert); }
.capital__faixa { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--rule); margin: var(--s-6) 0 var(--s-2); }
.capital__faixa-reserva { position: absolute; top: 0; bottom: 0; left: var(--de); width: var(--ate); background: var(--chart-comparacao); border-radius: var(--radius-pill); } /* faixa de dado (piso a teto): o tan de gráfico, 3:1 sobre o branco */
.capital__faixa-marca { position: absolute; top: -6px; bottom: -6px; width: 3px; border-radius: 2px; background: var(--oxford); left: var(--x); }
.capital__faixa-marca--reserva { background: var(--gold); }
.capital__faixa-rotulos { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--ink-soft); }
.capital__reguas { margin-top: var(--s-6); }
.capital__regua { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--radius-figure); background: var(--paper-raised); }
.capital__regua.is-vencedora { box-shadow: inset 0 0 0 1px var(--gold); }
.capital__regua-valor { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); color: var(--ink-strong); }
.capital__regua-valor.is-vazia { color: var(--ink-muted); font-weight: var(--fw-regular); }

/* ---- Empréstimos ---- */
.emprestimos__stats { margin-top: var(--s-2); }
.emprestimos__stat { display: grid; gap: var(--s-1); }
.emprestimos__stat-valor { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); color: var(--ink-strong); }
.emprestimos__stat--neg .emprestimos__stat-valor { color: var(--ink-strong); }
.emprestimos__stat--warn .emprestimos__stat-valor { color: var(--alert); }
.emprestimos__stat--faint .emprestimos__stat-valor { color: var(--ink-muted); font-weight: var(--fw-regular); }
.emprestimos__stat--gold .emprestimos__stat-valor { color: var(--gold-text); }
.emprestimos__barra { display: grid; gap: var(--s-2); margin-top: var(--s-5); }

/* ---- DRE ---- */
.dre__sintetica td:first-child { width: 42%; }
.dre__av { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-2); align-items: center; }
.dre__av .fh-track { min-width: 3rem; }
.dre__linha--warn td { color: var(--alert); }
.dre__acoes { display: flex; gap: var(--s-2); }
.dre__grupo { border-top: 1px solid var(--rule); }
.dre__grupo:first-of-type { border-top: 0; }
.dre__grupo > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: baseline; padding: var(--s-4) 0; }
.dre__grupo > summary::-webkit-details-marker { display: none; }
.dre__grupo > summary:hover .dre__grupo-nome { text-decoration: underline; text-decoration-color: var(--gold); }
.dre__grupo-seta { width: 18px; height: 18px; color: var(--ink-soft); transition: transform var(--t-state) var(--ease); align-self: center; }
.dre__grupo[open] > summary .dre__grupo-seta { transform: rotate(180deg); }
.dre__grupo-nome { font-size: var(--fs-19); font-weight: var(--fw-bold); color: var(--ink-strong); }
.dre__grupo-nome small { display: block; font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--ink-muted); }
.dre__grupo-total { font-weight: var(--fw-bold); color: var(--ink-strong); white-space: nowrap; }
.dre__grupo-av { color: var(--ink-soft); font-size: var(--fs-12); white-space: nowrap; }
.dre__sub { padding: 0 0 var(--s-4) var(--s-5); }
.dre__sub-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.dre__cat { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 8.5rem 6rem; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--rule-soft); color: var(--ink); }
.dre__cat-n { color: var(--ink-muted); text-align: right; font-size: var(--fs-12); }
.dre__cat-v { text-align: right; }
.dre__cat--neg .dre__cat-v { color: var(--alert); }
/* a nota vai no NOME, dentro do botão que abre os lançamentos: no botão inteiro ela cairia
   depois do ícone, e a frase se leria com a seta no meio */
.dre__cat--par .fh-drill__nome::after { content: " · estorno pareado"; font-size: var(--fs-12); color: var(--gold-text); }
.dre__peso { display: grid; grid-template-columns: minmax(0, 1fr) 4ch; gap: var(--s-2); align-items: center; font-size: var(--fs-12); color: var(--ink-soft); } /* 4ch: "100%" cabe sem estourar a linha */

/* ---- Faturamento ---- */
.fat__kpi, .fat__stat, .fat__leitura { display: grid; gap: var(--s-1); align-content: start; }
.fat__kpi-valor, .fat__stat-valor, .fat__leitura-valor { font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); color: var(--ink-strong); }
.fat__kpi--neg .fat__kpi-valor, .fat__stat--neg .fat__stat-valor, .fat__stat--warn .fat__stat-valor { color: var(--alert); }
.fat__kpi--gold .fat__kpi-valor, .fat__stat--gold .fat__stat-valor { color: var(--gold-text); }
.fat__kpi--faint .fat__kpi-valor, .fat__stat--faint .fat__stat-valor, .fat__leitura-valor.is-vazia { color: var(--ink-muted); font-weight: var(--fw-regular); font-size: var(--fs-19); }
.fat__itemizacao { padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); background: var(--rule-soft); }
/* Ticket médio: faixa de três leituras com filete (sem cartão); a base de leitura leva o filete dourado. */
.fat__ticket .fat__leitura { padding: var(--s-3) 0 0; border-top: 2px solid var(--rule); }
.fat__ticket .fat__leitura.is-base { border-top-color: var(--gold); }
.fat__mix { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.fat__donut svg { width: 100%; max-width: 220px; height: auto; }
.fat__mix-legenda { display: grid; gap: var(--s-2); }
.fat__mix-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.5rem 6rem; gap: var(--s-2); align-items: center; font-size: var(--fs-15); }
.fat__mix-item i { width: 10px; height: 10px; border-radius: 2px; background: var(--cor); }
.fat__mix-nome { overflow-wrap: anywhere; }
.fat__mix-item .num { text-align: right; color: var(--ink-strong); }
.fat__mix-valor { color: var(--ink-soft); }
.fat__mix-stats { display: grid; gap: var(--s-4); }
.fat__lista td:first-child { min-width: 14rem; }
.fat__linha--nc td:first-child { color: var(--alert); }
.fat__ipc { display: grid; gap: var(--s-4); }
.fat__ipc-item { display: grid; gap: var(--s-2); }
.fat__ipc-cabeca { display: flex; justify-content: space-between; gap: var(--s-4); }
.fat__ipc-nome { color: var(--ink-strong); font-weight: var(--fw-semibold); }
.fat__ipc-item svg { width: 100%; height: 14px; border-radius: 7px; }
.fat__mov { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.fat__mov li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 6rem; gap: var(--s-3); align-items: center; }
.fat__mov-nome { display: grid; color: var(--ink-strong); }
.fat__mov-d { text-align: right; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.fat__mov-d.is-neg { color: var(--alert); }
.fat__split { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.fat__split-linha { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 10rem; gap: var(--s-3); align-items: center; }
.fat__split-linha .num { text-align: right; }

/* ---- Despesas ---- */
.desp__blocos { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.desp__bloco { padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.desp__bloco:first-child { border-top: 0; }
.desp__bloco-cabeca { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 9rem; gap: var(--s-4); align-items: center; }
.desp__bloco-nome { color: var(--ink-strong); font-weight: var(--fw-semibold); }
.desp__bloco-total { text-align: right; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.desp__bloco--neg .desp__bloco-total { color: var(--gold-text); }
/* O bloco que o cartão do painel pediu (`?g=`): marcado com a barra de ouro na lateral, para
   o leitor achar onde caiu. É destaque de lugar, não julgamento: nada de cor de alerta. */
.desp__bloco.is-alvo { border-left: 3px solid var(--gold); padding-left: var(--s-3); background: var(--rule-soft); border-radius: var(--radius-control); }
.desp__alvo-vazio { margin-top: var(--s-3); }
.desp__cats { display: grid; margin-top: var(--s-2); padding-left: var(--s-4); }
.desp__cat { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 9rem; gap: var(--s-3); padding: var(--s-1) 0; color: var(--ink); }
.desp__cat .num { text-align: right; }
.desp__cat-n { color: var(--ink-muted); font-size: var(--fs-12); }
.desp__cat--neg .num:last-child { color: var(--gold-text); }
.desp__razoes { display: grid; gap: var(--s-3); }
.desp__razao { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 6rem; gap: var(--s-4); align-items: center; }
.desp__razao-rotulo { display: grid; color: var(--ink-strong); }
.desp__razao-valor { text-align: right; color: var(--ink-strong); font-weight: var(--fw-semibold); }

/* ---- Histórico ---- */
/* Pequenos múltiplos como blocos da folha (filete, sem cartão): a etiqueta é a única superfície erguida. */
.hist__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.hist__mult { padding: var(--s-5) 0; border-top: 1px solid var(--rule-soft); }
.hist__mult:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
.hist__mult-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: baseline; margin-bottom: var(--s-2); color: var(--ink); font-size: var(--fs-15); }
.hist__mult-rotulo { grid-column: 1; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.hist__mult-delta { grid-column: 1; }
.hist__mult-valor { grid-column: 2; grid-row: 1 / 3; font-size: var(--fs-28); line-height: var(--lh-28); font-weight: var(--fw-bold); color: var(--ink-strong); text-align: right; white-space: nowrap; }
.hist__mult-valor.is-neg { color: var(--alert); }
.hist__mult > svg { width: 100%; height: auto; }

/* ---- Caixa ---- */
.caixa__contas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.caixa__ponte { max-width: 32rem; }
.caixa__ponte td:last-child { text-align: right; }
.caixa__avisos { display: grid; gap: var(--s-1); }

/* ---- Semanas ---- */
.sem__nav { display: inline-flex; align-items: center; gap: var(--s-3); }
.sem__nav-rotulo { color: var(--ink); }
.sem__escada { display: grid; margin-top: var(--s-5); max-width: 34rem; }
.sem__degrau { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); color: var(--ink); }
.sem__degrau:first-child { border-top: 0; }
.sem__degrau > span:first-child { display: grid; }
.sem__degrau--total { border-top: 1px solid var(--tan); font-weight: var(--fw-bold); color: var(--ink-strong); }
.sem__degrau--sai .num { color: var(--ink-strong); }
.sem__detalhe { margin-top: var(--s-6); }
.sem__rig, .sem__grupos { display: grid; gap: var(--s-2); align-content: start; }
.sem__rig-linha, .sem__grupo { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.sem__grupo > span:first-child { display: grid; }
.sem__fora { display: grid; gap: var(--s-3); }
.sem__fora li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; color: var(--ink); }
.sem__fora-valor { font-weight: var(--fw-bold); color: var(--ink-strong); text-align: right; }
.sem__metodo > summary { cursor: pointer; }
.sem__metodo p { margin-top: var(--s-3); max-width: var(--measure); }

/* ---- Pendências ---- */
.pend__fatos .fh-track { margin: var(--s-1) 0; }
.pend__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.pend__tag { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--tan); font-size: var(--fs-12); color: var(--ink); }
.pend__tag--warn { border-color: var(--alert); color: var(--alert); }
.pend__buckets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); align-items: end; margin-top: var(--s-4); }
.pend__bucket { display: grid; gap: var(--s-1); justify-items: center; text-align: center; }
.pend__bucket-valor { font-weight: var(--fw-semibold); color: var(--ink-strong); }
.pend__bucket-coluna { display: flex; align-items: flex-end; width: 100%; height: 120px; border-radius: 6px; background: var(--rule-soft); }
/* faixa sem valor: uma linha baixa e o "nada", cinco caixas vazias do tamanho da cheia liam como ausência gritada */
.pend__bucket.is-vazia .pend__bucket-coluna { height: 2px; border-radius: 0; background: var(--rule); box-shadow: none; } /* uma linha de base, não uma cápsula que lê como valor pequeno */
.pend__bucket.is-vazia .pend__bucket-valor { visibility: hidden; }
.pend__bucket-barra { display: block; width: 100%; height: var(--h, 0%); border-radius: 6px 6px 0 0; background: var(--cor, var(--oxford)); } /* --cor: a rampa do Oxford por faixa, a mesma da rosca */
.pend__bucket-rotulo { font-size: var(--fs-12); color: var(--ink-soft); }
.pend__detalhe > div { display: grid; gap: var(--s-2); align-content: start; }
/* no tablet as duas tabelas (credor e categoria) lado a lado não cabem: uma embaixo da outra em vez de rolar na horizontal */
@media (max-width: 1023px) { .pend__detalhe { grid-template-columns: minmax(0, 1fr); } }

/* ---- Unidades ---- */
.uni__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-4); }
.uni__card { padding: var(--s-5); border-radius: var(--radius-figure); background: var(--paper-raised); display: grid; gap: var(--s-4); }
.uni__card--consome { box-shadow: inset 0 0 0 1px var(--tan); }
.uni__nome { font-size: var(--fs-19); }
.uni__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.uni__stat { display: grid; gap: 2px; }
.uni__stat-valor { font-size: var(--fs-19); font-weight: var(--fw-bold); color: var(--ink-strong); }
.uni__stat--neg .uni__stat-valor { color: var(--ink-strong); }
.uni__shares { display: grid; gap: var(--s-2); }
.uni__share { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 3.5rem; gap: var(--s-2); align-items: center; font-size: var(--fs-12); color: var(--ink-soft); }
.uni__share .num { text-align: right; color: var(--ink-strong); }
.uni__comp-cel { display: grid; gap: 2px; min-width: 8rem; }
.uni__comp-cel .num { color: var(--ink-strong); }

/* ---- Centros de custo ---- */
.cc__chips { display: grid; gap: var(--s-2); }
.cc__chip { padding: var(--s-3) var(--s-4); border-radius: var(--radius-control); background: var(--rule-soft); color: var(--ink); }
.cc__chip--warn { color: var(--alert); background: rgba(168, 84, 63, 0.08); }
.cc__chip--mut { color: var(--ink-muted); }
.cc__legenda { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s-2); }
.cc__legenda i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--cor); }
.cc__listas { margin-top: var(--s-5); }
.cc__lista { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.cc__centro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--rule-soft); }
.cc__centro:first-child { border-top: 0; }
.cc__centro-nome { color: var(--ink-strong); overflow-wrap: anywhere; }
.cc__centro-reguas { display: grid; gap: 3px; }
.cc__centro-nums { display: grid; text-align: right; font-size: var(--fs-12); }
.cc__desp { color: var(--ink-soft); }
.cc__custo { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.cc__custo-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 9rem 10rem; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--rule-soft); }
.cc__custo-linha:first-child { border-top: 0; }
.cc__custo-nome { color: var(--ink-strong); }
.cc__desvio { text-align: right; color: var(--ink-soft); }
.cc__desvio--neg { color: var(--alert); }
.cc__desvio--pos { color: var(--ink-strong); }

@media (max-width: 1279px) { .hist__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fat__mix { grid-template-columns: 200px minmax(0, 1fr); } .fat__mix-stats { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .rel__folha { padding: 0 var(--s-4) var(--s-5); }
  .fat__mix { grid-template-columns: minmax(0, 1fr); }
  .fat__mix-stats { grid-template-columns: minmax(0, 1fr); }
  .fat__mov li, .fat__split-linha, .desp__razao, .desp__bloco-cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .fat__mov-d, .desp__razao-valor, .desp__bloco-total { text-align: left; }
  .hist__grade { grid-template-columns: minmax(0, 1fr); }
  .hist__mult:nth-child(2) { border-top: 1px solid var(--rule-soft); padding-top: var(--s-5); }
  .desp__cat { grid-template-columns: minmax(0, 1fr) auto; }
  .desp__cat-n { display: none; }
  .sem__rig-linha, .sem__grupo, .sem__fora li, .cc__centro, .cc__custo-linha { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .sem__fora-valor, .cc__centro-nums, .cc__desvio { text-align: left; }
  .pend__buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uni__grade { grid-template-columns: minmax(0, 1fr); }
  .ponte__regua { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .ponte__regua-valor { text-align: left; }
  .leitura__indicadores { grid-template-columns: minmax(0, 1fr); }
  .leitura__indicador:nth-child(2) { border-top: 1px solid var(--rule-soft); }
  /* Folha 00 curta no celular: quatro indicadores à vista, os demais atrás do botão. */
  .leitura__indicadores:not(.is-aberta) .leitura__indicador:nth-child(n + 5) { display: none; }
  .leitura__ver-mais { display: inline-flex; }
  .rel__virar { grid-template-columns: minmax(0, 1fr); }
  .rel__virar > span:empty { display: none; }
  .dre__cat { grid-template-columns: minmax(0, 1fr) auto; }
  .dre__cat-n, .dre__peso { display: none; }
}
@media (max-width: 599px) {
  .ponte__cobertura, .capital__lead { grid-template-columns: minmax(0, 1fr); }
  .ctx__cliente { max-width: 16ch; }
}

/* ---- Vitrines das folhas curtas (v2) ---- */
.dre__barras { display: grid; gap: 2px; }
.dre__barra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: 5px 0; border-top: 1px solid var(--rule-soft); color: var(--ink); font-size: var(--fs-15); }
.dre__barra:first-child { border-top: 0; }
.dre__barra--total { font-weight: var(--fw-semibold); color: var(--ink-strong); border-top-color: var(--tan); }
.dre__barra--warn .dre__barra-rotulo { color: var(--alert); }
.dre__barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dre__barra-valor { display: inline-flex; align-items: baseline; gap: var(--s-2); color: var(--ink-strong); white-space: nowrap; }
.dre__barra-valor.is-neg { color: var(--ink); }
.dre__barra-valor small { font-size: var(--fs-12); color: var(--ink-soft); min-width: 5ch; text-align: right; }
.desp__familias { display: grid; gap: var(--s-2); }
/* Cada família é um botão que isola o detalhe por natureza: reset do controle, o filete
   tan à esquerda quando ela está isolada, e a calha de 12px reservada para ele em todas
   (sem isso o filete cobriria a amostra de cor e a linha pularia ao ser escolhida). */
.desp__familia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s-3); align-items: center; width: 100%; padding: 13px 0 13px var(--s-3); border: 0; border-top: 1px solid var(--rule-soft); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; } /* cinco famílias com a altura da coluna de números ao lado */
.desp__familia:first-child { border-top: 0; }
.desp__familia[disabled] { cursor: default; } /* sem recorte próprio: falta a ação, não o dado */
.desp__familia:not([disabled]):hover .desp__familia-rotulo { color: var(--ink-strong); }
.desp__familia:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.desp__familia[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--tan); }
/* a cor da família vem da variável (nunca de background inline), para a hachura poder vencer */
.desp__familia .fh-track__fill { background: var(--cor, var(--oxford)); }
/* "dist" (distribuição e CAPEX) leva hachura: azul-cinza e o azul claro das variáveis têm o mesmo matiz, e a cor sozinha não as separa */
.desp__familia--dist .fh-track__fill, .desp__familia--dist .fh-legenda-series__cor { background: repeating-linear-gradient(135deg, var(--cor) 0 4px, var(--paper) 4px 7px); }
.desp__familia[aria-pressed="true"] .desp__familia-rotulo { color: var(--ink-strong); font-weight: var(--fw-semibold); }
.desp__familia-rotulo { display: inline-flex; align-items: center; gap: var(--s-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desp__familia-valor { display: inline-flex; align-items: baseline; gap: var(--s-2); color: var(--ink-strong); font-weight: var(--fw-semibold); white-space: nowrap; }
.desp__familia-valor small { font-weight: var(--fw-regular); font-size: var(--fs-12); color: var(--ink-soft); min-width: 4ch; text-align: right; }
.desp__familia.is-neg .desp__familia-valor { color: var(--gold-text); }
.fh-detalhe .fh-bloco__cabeca { margin-bottom: var(--s-3); }
@media (max-width: 599px) { .dre__barra, .desp__familia { grid-template-columns: minmax(0, 1fr) auto; } .dre__barra .fh-track, .desp__familia .fh-track { grid-column: 1 / -1; order: 3; } }
.fat__mix--vitrine { grid-template-columns: 200px minmax(0, 1fr); }
.fat__mix--vitrine .fat__donut svg { max-width: 200px; }

/* Régua do capital de giro: cada rótulo ancorado sob a sua marca (perto das pontas, encosta na ponta) */
.capital__faixa-rotulos--ancorados { position: relative; display: block; height: 3em; margin-top: var(--s-2); }
.capital__faixa-rotulo { position: absolute; top: 0; left: var(--x, 0); transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-12); color: var(--ink-soft); }
.capital__faixa-rotulo--esq { left: 0; transform: none; }
.capital__faixa-rotulo--dir { left: auto; right: 0; transform: none; }
.capital__faixa-rotulo--reserva { top: 1.5em; }
.capital__faixa-rotulos .num { white-space: nowrap; color: var(--ink-strong); font-weight: var(--fw-semibold); }
.desp__familia-delta { font-size: var(--fs-12); font-weight: var(--fw-regular); }

/* Vista "Tabela" da vitrine: a tabela ocupa a coluna da figura (start-justificada ela
   encolhia e as colunas se encostavam); o Copiar continua do tamanho do próprio texto. */
.fh-vitrine__grafico .fh-tabela-vista { justify-items: stretch; }
.fh-vitrine__grafico .fh-tabela-vista .fh-copiar { justify-self: start; }
.ponte__barras > svg, .ponte__cascata > svg { width: 100%; height: auto; overflow: visible; }

/* Barra divergente (vista "Variação" das despesas): uma régua de dois lados com o zero no
   meio; o que subiu vai para a direita, o que caiu para a esquerda, na mesma escala. */
.desp__divergente { display: grid; gap: var(--s-2); }
.desp__div-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: var(--s-3); align-items: center; padding: 11px 0 11px var(--s-3); border-top: 1px solid var(--rule-soft); color: var(--ink); }
.desp__div-linha:first-child { border-top: 0; }
.desp__div-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desp__div-trilho { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--rule); }
.desp__div-trilho::before { content: ""; position: absolute; left: calc(50% - 1px); top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--chart-comparacao); } /* a régua do zero: é o dado que a barra divergente lê, então o tan de gráfico (3:1), não o de filete */
.desp__div-barra { position: absolute; top: 0; bottom: 0; width: var(--w, 0%); border-radius: var(--radius-pill); }
.desp__div-barra--sobe { left: 50%; }
.desp__div-barra--cai { right: 50%; }
.desp__div-valor { display: inline-flex; align-items: baseline; gap: var(--s-2); justify-self: end; color: var(--ink-strong); font-weight: var(--fw-semibold); white-space: nowrap; }

/* Rosca de composição na vitrine: a figura à esquerda e a legenda fora do SVG. Serve aos
   centros que faturam e às faixas de atraso das pendências. */
.cc__rosca, .pend__rosca { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.cc__rosca-figura > svg, .pend__rosca-figura > svg { width: 100%; max-width: 200px; height: auto; }
.cc__rosca-legenda, .pend__rosca-legenda { display: grid; gap: var(--s-2); }
.cc__rosca-legenda .fh-legenda-series__item, .pend__rosca-legenda .fh-legenda-series__item { display: grid; grid-template-columns: auto minmax(0, 1fr) 3rem 6rem; gap: var(--s-2) var(--s-3); align-items: center; }
.cc__rosca-legenda .fh-legenda-series__cor, .pend__rosca-legenda .fh-legenda-series__cor { width: 10px; height: 10px; border-radius: 3px; } /* fatia, não traço de linha */
.cc__rosca-nome, .pend__rosca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__rosca-legenda .num, .pend__rosca-legenda .num { text-align: right; }
.cc__rosca-valor, .pend__rosca-valor { color: var(--ink-strong); }
@media (max-width: 899px) { .cc__rosca, .pend__rosca { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* Vitrine das pendências: as faixas trocam de forma (colunas, rosca, tabela) e o espaço
   acima vinha da margem das colunas; as outras formas herdam a mesma calha. */
.pend__vitrine > .pend__rosca, .pend__vitrine > .fh-tabela-vista, .pend__vitrine > .fh-note { margin-top: var(--s-4); }
/* Vista em tabela dos empréstimos: a ressalva da base fica logo abaixo da tabela. */
.emprestimos__tabela { display: grid; gap: var(--s-3); }
@media (max-width: 599px) { .desp__div-linha { grid-template-columns: minmax(0, 1fr) auto; } .desp__div-trilho { grid-column: 1 / -1; order: 3; } }
@media (max-width: 599px) { .capital__faixa-rotulos--ancorados { display: grid; gap: 2px; height: auto; } .capital__faixa-rotulo, .capital__faixa-rotulo--reserva, .capital__faixa-rotulo--esq, .capital__faixa-rotulo--dir { position: static; top: auto; left: auto; right: auto; transform: none; white-space: normal; } }

/* Mix de Vendas em barras: a última barra é o "Outros" da rosca, que não é uma categoria
   e sim o resto da lista; vai no neutro de gráfico, como a fatia dele. */
.fat__barras--resto .fh-ranking__item:last-child .fh-track__fill { background: var(--chart-neutro); }

/* Unidades: os chips isolam uma unidade, e a coluna dela acende na comparação direta. */
.uni__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.uni__rosca { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.uni__rosca-figura > svg { width: 100%; max-width: 200px; height: auto; }
.uni__rosca-legenda { display: grid; gap: var(--s-2); }
.uni__rosca-legenda .fh-legenda-series__item { display: grid; grid-template-columns: auto minmax(0, 1fr) 3rem 6rem; gap: var(--s-2) var(--s-3); align-items: center; }
.uni__rosca-legenda .fh-legenda-series__cor { width: 10px; height: 10px; border-radius: 3px; } /* fatia, não traço de linha */
.uni__rosca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uni__rosca-legenda .num { text-align: right; }
.uni__rosca-valor { color: var(--ink-strong); }
@media (max-width: 899px) { .uni__rosca { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
/* a coluna escolhida acende com o mesmo tinte dos controles e o filete de ouro da aba
   ativa: a marca de "é esta" da casa, não um segundo realce inventado. A calha lateral
   das colunas de unidade existe SEMPRE (sai do lado direito, entra no esquerdo): sem ela
   o tinte encostaria no rótulo, e criá-la só ao escolher faria a coluna pular. */
.uni__comp th:not(:first-child), .uni__comp td:not(:first-child) { padding-inline: var(--s-2) var(--s-1); }
.uni__comp th.is-on, .uni__comp td.is-on { background: var(--ctl-secondary-hover); }
.uni__comp th.is-on { color: var(--ink-strong); box-shadow: inset 0 -3px 0 var(--gold); }
.uni__card.is-on { box-shadow: inset 0 0 0 2px var(--gold); }

/* Vendas no celular: a rosca acima da legenda (o 200px + 1fr da vitrine estourava a legenda) e o "Ver todos" quebra a nota em linha própria */
@media (max-width: 599px) { .fat__mix--vitrine { grid-template-columns: minmax(0, 1fr); } .fat__mix-item { grid-template-columns: auto minmax(0, 1fr) 3rem 5.5rem; } [data-fat-ver] { white-space: normal; height: auto; padding-block: var(--s-2); text-align: left; } [data-fat-ver] .fh-note { display: block; } }
.desp__familias-nota { display: block; margin-top: var(--s-3); padding-left: var(--s-3); } /* alinhada com as linhas, que reservam a calha do filete */

/* Modo apresentação: a folha vista de longe. O número-manchete do cartão e o das vitrines
   sobem ao corpo de display; o resto da folha não muda de tamanho (quem lê de longe lê o
   número, e o contexto continua ao alcance de quem está perto da tela). */
/* O degrau de 48 só entra onde a tela comporta: num quadro de 375 px "−R$ 12.650,73" em 48 px
   vaza 52 px da folha (medido). Apresentar num celular continua valendo (a moldura some e a
   folha ocupa tudo), só o número não cresce. */
/* A regra dos 48: UM número por tela, e nunca texto. Na apresentação quem sobe ao corpo de
   exibição é o PRIMEIRO número da vitrine (a manchete da folha) e o número do cartão; os
   outros dois ficam em 32, e valor que é palavra ("baixa", "4 semanas") ou ausência fica menor
   ainda. Sem isso a sala de reunião via duas cifras em 48 lado a lado, e a palavra "baixa"
   do tamanho de uma manchete. */
@media (min-width: 768px) {
  .is-apresentando .fh-cartao__numero,
  .is-apresentando .fh-vitrine__numeros > .fh-numero:first-child .fh-numero__valor { font-size: var(--fs-48); line-height: var(--lh-48); }
  .is-apresentando .fh-numero__valor--vazio,
  .is-apresentando .fh-numero__valor--palavra { font-size: var(--fs-28); line-height: var(--lh-28); }
}
.is-apresentando .rel { max-width: none; }
/* Apresentar é mostrar, não editar: a régua de formas e as janelas saem da tela junto com a
   moldura (antes ficavam, e a folha aparecia para o cliente cercada de controles do operador). */
.is-apresentando .fh-bloco__acoes, .is-apresentando .fh-busca { display: none; }
/* O caminho de volta desenhado: apaga sozinho em 4 s e volta ao primeiro movimento do ponteiro. */
.fh-apresentando { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-overlay); display: none;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--capa-ink-soft); border-radius: var(--radius-pill);
  background: var(--capa); color: var(--capa-ink); font: inherit; font-size: var(--fs-12); letter-spacing: var(--track-caps);
  text-transform: uppercase; cursor: pointer; opacity: 1; transition: opacity var(--t-folha) var(--ease); }
.is-apresentando .fh-apresentando { display: block; }
.fh-apresentando.is-apagada { opacity: 0; }
.fh-apresentando:hover, .fh-apresentando:focus-visible { opacity: 1; border-color: var(--gold); }
.fh-apresentando:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fh-apresentando { transition: none; } .fh-apresentando.is-apagada { opacity: 1; } }
.is-apresentando .rel__folha { margin-top: 0; border: 0; border-radius: 0; box-shadow: none; }

/* Seletor de janela na capa: mesmo desenho do seletor de competência, travado na largura do
   seu rótulo mais longo ("12 meses"). Sem o teto, o `select` se dimensiona pela OPÇÃO mais
   larga, e a mais larga aqui é o MOTIVO da janela indisponível inteiro ("12 meses (mesma
   janela de «Anual» nesta competência: é esse botão)"): medi 188 px tomados do seletor de
   competência, que passava a exibir "Junho de 202" e perdia a legibilidade. */
.ctx__janela { display: flex; align-items: center; flex: none; }
/* A calha de 3rem do chevron comia o rótulo: sobravam 70 px para "Trimestre", que precisa de
   73. Encolher a calha (a mesma troca que a faixa do celular já faz com o mês) devolve 16 px
   de texto sem alargar o campo, que continua com 13 px de folga até a navegação em 1280 px. */
.ctx__select--janela { flex: none; max-width: 12ch; padding-right: var(--s-6); background-position: right var(--s-3) center; }
/* Seletor de BASE, logo depois do de janela e pela mesma razão de estar na capa: ele responde à
   segunda pergunta da leitura ("contra o que eu comparo"), que só existe depois de "que meses eu
   leio". Mesmo teto de largura do de janela, e pelo mesmo motivo: a opção mais larga aqui é
   "Média dos 6 meses anteriores", que sem teto tomaria a faixa inteira do seletor de competência.
   O rótulo inteiro continua alcançável na lista aberta, que não respeita o teto. */
.ctx__base { display: flex; align-items: center; flex: none; }
.ctx__select--base { flex: none; max-width: 14ch; padding-right: var(--s-6); background-position: right var(--s-3) center; }
/* O QUINTO controle não cabe na faixa do notebook: medido em 1280 px, a fileira pede 631 px onde
   a coluna do contexto dá 482, e o excesso não encolhe, passa POR CIMA da navegação. Abaixo de
   1440 px quem desce para dentro da folha é a BASE, e não a competência nem a janela: ela é a
   única das três cujo valor já vem escrito na cabeça de cada folha ("comparada com ..."), de modo
   que a faixa perde o controle e nunca o fato. Some da faixa, aparece na cópia que a folha já
   tinha para o celular, aqui reduzida ao único controle que faltou lá em cima. */
@media (max-width: 1439px) { .faixa__contexto .ctx__base { display: none; } }
/* A FAIXA DO OPERADOR é outra conta, e a escada inteira desliza nela. Ela carrega um controle a
   mais (o seletor de cliente) e uma entrada a mais na navegação, e a coluna do contexto sobra
   bem menos: medido nesta pasta, 215 px a 1024, 456 a 1280, 539 a 1366, 612 a 1440, 708 a 1536 e
   772 a 1600, contra 463 a 1024 e 861 a 1440 na faixa de quem lê a própria empresa. Do outro
   lado da conta, competência e janela pedem 440 px que não encolhem, o seletor de cliente 111
   (é o mínimo que ele desenha: 34 de calha e borda mais o nome abreviado), a base 172 e o estado
   101. A 1440 a fileira pedia 627 numa coluna de 612 e encostava na navegação - com o nome do
   cliente já espremido a ZERO. Por isso cada degrau abaixo entra mais tarde onde o seletor de
   cliente existe, e só ali (`:has`). */
@media (min-width: 1440px) and (max-width: 1599px) { .faixa__contexto .ctx:has(.ctx__campo--cliente) .ctx__base { display: none; } }
/* Abaixo de 1440 px o seletor de cliente não cabe na faixa do operador (a 1366 ele pede 111 onde
   sobram 83), e um campo espremido não some: ele continua pintando o nome por cima do vizinho.
   Então quem desce é o seletor inteiro, pela mesma regra da base - o fato não se perde, porque a
   cópia dentro da folha o recebe logo abaixo. */
@media (min-width: 1024px) and (max-width: 1439px) { .faixa__contexto .ctx__campo--cliente { display: none; } }
@media (min-width: 1024px) and (max-width: 1599px) {
  .rel-ctx-movel { padding: var(--s-4) 0 0; }
  .rel-ctx-movel .ctx > *:not(.ctx__base):not(.ctx__campo--cliente) { display: none; }
  /* Sozinho, o seletor precisa do nome que na faixa vinha do vizinho: o rótulo que já existe no
     HTML para o leitor de tela sai do esconderijo, em vez de uma segunda cópia do mesmo texto. */
  .rel-ctx-movel .ctx__base .sr-only, .rel-ctx-movel .ctx__campo--cliente .sr-only { position: static; flex: none; width: auto; height: auto; margin: 0 var(--s-2) 0 0; overflow: visible; clip: auto; color: var(--ink-soft); font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; }
  .rel-ctx-movel .ctx__select--base { color: var(--ink-strong); border-color: var(--tan); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23152f4d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); max-width: 26ch; }
  /* A cópia aparece quando a faixa cedeu alguma coisa: até 1439 em qualquer papel (a base), e
     até 1599 na faixa que carrega o seletor de cliente. Fora daí ela continua `display: none`. */
  @media (max-width: 1439px) { .rel-ctx-movel { display: block; } }
  @media (min-width: 1440px) {
    .rel-ctx-movel:has(.ctx__campo--cliente) { display: block; }
    /* Daqui para cima o seletor de cliente voltou para a faixa: na folha ele seria a segunda
       cópia do mesmo controle. */
    .rel-ctx-movel .ctx__campo--cliente { display: none; }
  }
}
@media (min-width: 1024px) {
  /* Com um TERCEIRO controle na faixa, quem cede largura é o seletor de cliente (ele abrevia
     com reticências e a lista aberta traz o nome inteiro), nunca o mês, que sem isto vira
     "Junho de 202". Medido em 1280 px: mês 66 px antes, 213 px depois, sem sobreposição. */
  .ctx__competencia { flex: none; }
  /* Teto do seletor de CLIENTE: ele abrevia com reticências de verdade, e a lista aberta traz o
     nome inteiro. O PISO mora na regra de 1366 px abaixo, que é onde a faixa o paga. */
  .ctx__campo--cliente { max-width: 24ch; }
  /* Abaixo de 1440 px a faixa não comporta os quatro: cliente, competência, janela e estado.
     Sai o ESTADO, o único dos quatro que já está repetido logo abaixo - a cabeça de cada
     folha o traz, e a folha Painel o traz na etiqueta. É a mesma troca que a regra de 599 px
     já fazia, pela mesma razão: quem repete é a faixa. */
  /* O estado sai da faixa cedo (1600) e nao a 1440: com o terceiro controle, os quatro so
     convivem numa tela larga, e o estado e o unico dos quatro que ja vem repetido logo abaixo
     (a cabeca de cada folha o traz, e a capa o traz na etiqueta). */
  @media (max-width: 1599px) { .ctx .fh-estado--capa { display: none; } }
  /* Na faixa do operador o estado espera mais 100 px: a 1600 a fileira já pede 739 dos 772 da
     coluna (é ali que a base volta para a faixa), e os 101 do estado não cabem. */
  @media (min-width: 1600px) and (max-width: 1699px) { .ctx:has(.ctx__campo--cliente) .fh-estado--capa { display: none; } }
}
/* O PISO do nome do cliente, onde a faixa o paga (de 1440 px para cima, com a base ainda dentro
   da folha): sem piso, um nome curto deixaria o campo menor do que a própria calha do chevron. */
@media (min-width: 1440px) { .ctx__campo--cliente { min-width: 10ch; } }
/* A nota de posição fica colada no topo do bloco que ela explica. */
.fh-posicao { margin: 0 0 var(--s-2); }
/* O aviso da janela negada (ou sem base) abre o conteúdo: é o motivo, não um bloco. */
.rel__aviso-janela { margin: 0 0 var(--s-4); }

/* Alvo de toque na capa: medido em 375px, o seletor de competencia e o de janela vinham com
   34px e as setas com 32. No dedo, 44 e o piso; no desktop a faixa fica como estava. */
@media (max-width: 599px) {
  .ctx .fh-select--capa { min-height: 44px; }
  .ctx__seta { width: 44px; height: 44px; }
}

/* Nome do cliente na faixa (operador): o texto visivel e um `span` com reticencias de verdade,
   e o `select` fica invisivel por cima, cobrindo o mesmo alvo. Um `select` sozinho corta no
   meio da palavra sem nenhum sinal de que ha mais nome, e o pedaco cortado le como um nome inteiro.
   O foco continua no `select` (e ele quem o leitor de tela anuncia), e o anel aparece no campo. */
/* Sem `min-width` aqui de propósito: ela existia, valia 0 e vinha DEPOIS da media query de
   1024 px, então vencia o piso dela na cascata e o campo colapsava a zero em toda largura de
   notebook (medido: 0 px a 1024, 1280 e 1440, com o nome pintando 50 px por cima do vizinho).
   O piso e o teto moram nas regras de largura acima; o que sobra nesta é o desenho do campo. */
.ctx__campo--cliente { position: relative; align-items: center; }
.ctx__campo--cliente .ctx__cliente-txt { display: block; flex: 1 1 auto; min-width: 0; padding: 0 var(--s-6) 0 var(--s-4); min-height: 34px; line-height: 34px; border: 1px solid var(--capa-ink-soft); border-radius: var(--radius-field); color: var(--capa-ink); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f4ede4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat: no-repeat; background-position: right var(--s-4) center; }
/* Dentro da FOLHA (a cópia que recebe o que não coube na faixa) o campo está sobre papel branco:
   sem esta troca o nome sai em `--capa-ink`, que é quase branco, e some - estava assim desde que
   a cópia existe, e só apareceu quando o seletor desceu para ela em largura de notebook. */
.rel-ctx-movel .ctx__cliente-txt { color: var(--ink-strong); border-color: var(--tan); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23152f4d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>"); }
.ctx__campo--cliente .ctx__select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.ctx__campo--cliente:hover .ctx__cliente-txt { border-color: var(--gold); }
.ctx__campo--cliente:focus-within .ctx__cliente-txt { border-color: var(--gold); box-shadow: var(--focus-ring-on-capa); }