/*
 * Base visual do painel (T-030), refeita como casca de aplicativo na T-117 (D82) e alinhada
 * à referência trazida ao responsável: o design system da Tenex como a CMP Business o
 * implementa nos tokens --tx-* (a leitura "Manual da Marca v1.0 como a CMP o implementa" é
 * PROPOSTA até o 00-decisoes.md registrá-la; a nota 18 lê "não o manual de marca"). Menu lateral de 248 px com os grupos de módulo
 * em mono minúsculo, cabeçalho de 60 px com a trilha e o tema, título em Space Grotesk de
 * 28 px com o ponto âmbar, tabelas como planilha e responsivo de 375 px a 1440+ px. Carrega
 * depois de marca/tokens.css e de painel/css/tema.css.
 *
 * Cores: só os tokens --tx-* e os três papéis --painel-* de tema.css; nenhuma cor literal.
 * O âmbar (--tx-accent) só na barra do item ativo, no ponto do título, no anel de foco e na
 * caixa de seleção; o verde (--tx-status-on) só no quadradinho de .status--operando
 * (UI-006). Medidas: os tokens e as --painel-* de tema.css (PROPOSTA; MRC-07). Nenhum
 * círculo (UI-010): o maior raio é o do card (8 px, manual p.11).
 *
 * O que o manual não define segue PROPOSTA ou PENDENTE:
 *   MRC-01  cores semânticas de status (o status é lido pelo texto, UI-011)
 *   MRC-03  formato do LED e componentes circulares por convenção
 *   MRC-04  foco, hover, desabilitado e erro de formulário (aqui, o anel da CMP)
 *   MRC-05  tabelas densas (aqui, a planilha da CMP: grade, zebra, número à direita)
 *   MRC-07  escala tipográfica, espaçamento e breakpoints (os tokens da CMP)
 *   MRC-13  proteção do quadrado, lockup e medida dos 90px (aqui, a PROPOSTA de 07 §3)
 *   MRC-14  cursor e WCAG 2.2.2 (aqui, a PROPOSTA de 07 §6)
 *   MRC-15  nível-alvo WCAG e impressão (aqui, sem a casca e com a tabela inteira)
 *   MRC-16  ícones: um SVG de linha por área, desenhado para o painel (T-119), e traços de
 *           CSS nos botões (PROPOSTA)
 */

:root {
  /* PROVISÓRIO desde a T-030; a escala da T-117 está em tema.css (MRC-07). */
  --painel-espaco: 1rlh;
  /* PROPOSTA conservadora de 07 §3: 90px de tinta = SVG com 104px; aguardando decisão (MRC-13). */
  --painel-marca-largura: 104px;
}

/* O html fica no tamanho do navegador (16 px por padrão): é a base do rem de todo token
   --tx-*. O corpo de 14 px vai no body; no html, ele encolheria a escala inteira a 87,5%
   (revisão do PR #109: o h1 saía em 24,5 px e o cabeçalho da tabela em 9,6 px). */
html {
  background: var(--tx-bg);
  color: var(--tx-fg);
  font-family: var(--tx-font-text);
  font-weight: var(--tx-weight-regular);
  line-height: var(--tx-leading-body);
  scrollbar-color: var(--tx-border-strong) var(--tx-bg);
}

body {
  margin: 0;
  background: var(--tx-bg);
  color: var(--tx-fg);
  font-size: var(--tx-text-md);
}

/* Pular para o conteúdo (WCAG 2.4.1; revisão do PR #109): o 1º Tab da página. Fica no canto,
   sob o cabeçalho e o menu (z-index 20 e 30), e sobe acima deles só com o foco; sem
   valor negativo nem recorte (CA-20). */
.pular {
  position: absolute;
  inset-block-start: var(--tx-space-2);
  inset-inline-start: var(--tx-space-2);
  z-index: 10;
  padding: var(--tx-space-1) var(--tx-space-3);
  border: 1px solid var(--painel-borda-campo);
  border-radius: var(--painel-raio-controle);
  background: var(--tx-surface);
  color: var(--tx-fg);
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-semibold);
  text-decoration: none;
}

.pular:focus-visible {
  z-index: 60;
  box-shadow: var(--tx-focus-ring);
}

h1,
h2,
h3,
h4 {
  font-family: var(--tx-font-display);
  line-height: var(--tx-leading-snug);
}

/* Título da página: Space Grotesk 700 de 28 px, terminado pelo ponto âmbar (a CMP). */
h1 {
  font-size: var(--tx-text-2xl);
  font-weight: var(--tx-weight-bold);
  letter-spacing: var(--tx-tracking-tight);
  margin-block: 0 var(--tx-space-2);
}

/* O ponto é decoração: o texto alternativo vazio o tira do nome acessível do título (o leitor
   de tela não o lê); o 1º `content` vale no navegador que não aceita o alternativo. */
.conteudo > h1::after {
  content: ".";
  content: "." / "";
  color: var(--tx-accent);
}

h2 {
  font-size: var(--tx-text-lg);
  font-weight: var(--tx-weight-semibold);
  margin-block: 0 var(--tx-space-3);
}

h3,
h4 {
  font-size: var(--tx-text-md);
  font-weight: var(--tx-weight-semibold);
  margin-block: var(--tx-space-4) var(--tx-space-2);
}

p {
  margin-block: 0 var(--tx-space-2);
}

strong,
b {
  font-weight: var(--tx-weight-semibold);
}

/* Sublinhado, não cor, distingue o link no texto (WCAG 1.4.1): é a única pista de que um
   valor abre a origem (CA-18). Na cor da borda de campo, que passa de 3:1 em todo fundo dos
   dois temas (revisão do PR #109: a border-strong ficava entre 1,59:1 e 2,05:1). */
a {
  color: var(--tx-fg);
  text-decoration-color: var(--painel-borda-campo);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--tx-fg);
}

/* Foco visível nos dois temas: o anel da CMP (--tx-focus-ring); o contorno transparente
   aparece no modo de alto contraste (MRC-04; WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--tx-focus-ring);
}

/* Nenhum círculo (UI-010): sem o disco padrão de lista; outro marcador aguardando decisão (MRC-16). */
ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0 var(--tx-space-2);
}

ol {
  margin-block: 0 var(--tx-space-2);
}

/* Dados em IBM Plex Mono (p.8): valores, códigos, datas e IDs. */
code,
kbd,
samp,
data,
time,
.numero {
  font-family: var(--tx-font-mono);
  font-variant-numeric: tabular-nums;
}

code {
  font-size: var(--painel-texto-pequeno);
  padding-inline: var(--tx-space-1);
  border-radius: var(--tx-radius-sm);
  background: var(--tx-grid-line);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ casca */

.casca {
  display: grid;
  grid-template-columns: var(--painel-lateral) minmax(0, 1fr);
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

.casca--sem-menu {
  grid-template-columns: minmax(0, 1fr);
}

.principal {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

/* Menu lateral (a CMP): 248 px na superfície, o logo e o botão de recolher no topo, os
   grupos de módulo em mono minúsculo e, no rodapé, o perfil e o Sair. O topo e o rodapé
   ficam fixos e só a lista rola (revisão do PR #109: a 768 px de altura, o Economics, o
   Perfil e o Sair ficavam abaixo da dobra). A margem de 14 px se divide entre a lateral
   (10) e a lista, o topo e o rodapé (4): o anel de foco de 4 px cabe na lista que rola. */
.lateral {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-3);
  /* dvh: no iOS, o rodapé (Perfil e Sair) fica acima da barra do Safari; vh é o recuo. */
  block-size: 100vh;
  block-size: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  padding: var(--tx-space-5) 10px var(--tx-space-3);
  background: var(--tx-surface);
  border-inline-end: 1px solid var(--tx-border);
}

.lateral__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tx-space-2);
  padding-inline: var(--tx-space-1);
}

/* Coluna flexível que rola entre o topo e o rodapé; o nome largo quebra a linha em vez de
   passar da lateral ou sair cortado. */
.menu {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--tx-space-3);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--tx-space-1);
}

.menu ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding-block-start: var(--tx-space-1);
}

/* O rótulo do módulo: mono minúsculo, como "tenex.gestão" na CMP. */
.grupo__nome {
  display: flex;
  align-items: center;
  gap: var(--tx-space-2);
  margin: 0;
  padding: var(--tx-space-1) 10px;
  border-radius: var(--painel-raio-controle);
  color: var(--tx-fg);
  font-family: var(--tx-font-mono);
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-semibold);
  line-height: var(--tx-leading-body);
  text-transform: lowercase;
  list-style: none;
  cursor: pointer;
}

.grupo__nome::-webkit-details-marker {
  display: none;
}

/* A seta do grupo: dois traços de borda, sem glifo nem arquivo (MRC-16). */
details.grupo > .grupo__nome::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 5px;
  block-size: 5px;
  border-inline-end: 1.5px solid var(--tx-fg-subtle);
  border-block-end: 1.5px solid var(--tx-fg-subtle);
  transform: rotate(45deg);
}

details.grupo:not([open]) > .grupo__nome::after {
  transform: rotate(315deg);
}

/* Módulo "em breve" (Tenex.Economics): só o rótulo, sem telas nem link. */
.grupo--em-breve .grupo__nome {
  color: var(--tx-fg-muted);
  cursor: default;
}

.grupo__breve {
  margin-inline-start: auto;
  padding-inline: var(--tx-space-1);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  color: var(--tx-fg-muted);
  font-size: var(--tx-text-xs);
  font-weight: var(--tx-weight-regular);
  line-height: var(--tx-leading-body);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--painel-item);
  box-sizing: border-box;
  padding: var(--tx-space-1) 10px;
  border-radius: var(--painel-raio-controle);
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-menu);
  font-weight: var(--tx-weight-medium);
  line-height: var(--tx-leading-snug);
  text-decoration: none;
}

.menu__item:hover {
  background: var(--tx-grid-line);
  color: var(--tx-fg);
}

/* Item ativo: peso 600 na cor do texto, fundo cinza e a barra âmbar de 2 px à esquerda;
   o estado também está no aria-current, não só na cor. */
.menu__item[aria-current="page"] {
  background: var(--painel-menu-ativo);
  box-shadow: inset 2px 0 0 var(--tx-accent);
  color: var(--tx-fg);
  font-weight: var(--tx-weight-semibold);
}

/* O item ativo com foco: a barra âmbar e o anel de foco juntos. Sem esta regra, o box-shadow
   da barra (mais específico) venceria o de :focus-visible e o foco sumiria (WCAG 2.4.7). */
.menu__item[aria-current="page"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--tx-accent), var(--tx-focus-ring);
}

/* O ícone de linha da área (T-119; SVG desenhado para o painel, UI-008; MRC-16 segue
   PENDENTE): 16 px, o traço de 1,5 px na cor do item (cinza; no ativo, a do texto). */
.icone-da-area {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}

/* O número de pendências da área (D84): a pílula pequena à direita, como na CMP. O número
   também está no nome acessível do link. */
.contador {
  margin-inline-start: auto;
  padding-inline: 6px;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  color: var(--tx-fg);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-text-xs);
  line-height: var(--tx-leading-body);
}

/* A Administração no rodapé do menu, acima do Perfil e do Sair (as configurações no app do
   Claude; D84). */
.menu-do-rodape {
  padding: 0 var(--tx-space-1);
}

.menu-do-rodape ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

/* O nome inteiro à vista, também no toque (revisão do PR #109: "Lançamentos sem
   classificação" saía em reticências): quebra a linha, e o item cresce além dos 36 px. */
.menu__nome {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.lateral__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tx-space-2);
  margin-block-start: auto;
  padding: var(--tx-space-3) var(--tx-space-2) 0;
  border-block-start: 1px solid var(--tx-border);
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-pequeno);
}

.lateral__rodape p,
.lateral__rodape form {
  margin: 0;
}

/* A conta no cabeçalho: só com o menu recolhido no computador (o rodapé some com ele). O
   botão envia o mesmo formulário do rodapé (form="sair"), por POST com o CSRF dele. */
.topo__conta {
  display: none;
  align-items: center;
  gap: var(--tx-space-2);
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-pequeno);
  white-space: nowrap;
}

/* O Sair é a ação discreta do rodapé: sem borda nem fundo até o hover. */
.topo__conta button,
.lateral__rodape button {
  border-color: transparent;
  background: transparent;
  color: var(--tx-fg-muted);
}

/* O véu da gaveta fica fora do fluxo em toda largura: aberto (sem hidden), ele nunca vira
   item do grid da casca, nem ao girar o tablet ou alargar a janela com a gaveta aberta. */
.fundo-da-gaveta {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--tx-bg);
  opacity: 0.7;
}

.fundo-da-gaveta[hidden] {
  display: none;
}

/* Cabeçalho de 60 px: a trilha à esquerda; o tema à direita. */
.topo {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--tx-space-3);
  min-block-size: var(--painel-topo);
  box-sizing: border-box;
  padding-inline: var(--tx-space-8);
  background: var(--tx-surface);
  border-block-end: 1px solid var(--tx-border);
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--tx-space-2);
  margin-inline-start: auto;
}

.trilha {
  min-inline-size: 0;
}

.trilha ol {
  display: flex;
  align-items: center;
  gap: var(--tx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.trilha li {
  display: flex;
  align-items: center;
  gap: var(--tx-space-2);
  min-inline-size: 0;
  color: var(--tx-fg-muted);
  font-size: var(--tx-text-sm);
}

.trilha li + li::before {
  content: "";
  flex: none;
  inline-size: 5px;
  block-size: 5px;
  border-inline-end: 1.5px solid var(--tx-fg-subtle);
  border-block-start: 1.5px solid var(--tx-fg-subtle);
  transform: rotate(45deg);
}

/* O módulo na trilha, em mono minúsculo como no menu. O elo atual nunca é o módulo: na
   página de erro, o único elo é o título e sai como nas demais (revisão do PR #113, aud 2,
   B3). */
.trilha li:first-child > span:not([aria-current]) {
  font-family: var(--tx-font-mono);
  font-size: var(--painel-texto-pequeno);
  text-transform: lowercase;
}

.trilha a,
.trilha span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.trilha a {
  color: var(--tx-fg-muted);
  text-decoration: none;
}

.trilha a:hover {
  color: var(--tx-fg);
  text-decoration: underline;
}

.trilha [aria-current="page"] {
  color: var(--tx-fg);
  font-weight: var(--tx-weight-semibold);
}

/* Botão só com ícone: o nome está no aria-label e no title. */
.botao-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--painel-botao);
  block-size: var(--painel-botao);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--painel-raio-controle);
  background: transparent;
  color: var(--tx-fg-muted);
  cursor: pointer;
}

.botao-icone:hover {
  border-color: transparent;
  background: var(--tx-grid-line);
  color: var(--tx-fg);
}

/* O botão de reabrir só aparece com o menu recolhido (e, no celular, abre a gaveta). */
.topo__abrir {
  display: none;
}

/* Sem script, os botões da casca não fazem nada: ficam fora (o menu fica aberto). */
html:not(.js) .botao-icone {
  display: none;
}

/* Ícones de traço (MRC-16, PROPOSTA): painel lateral e tema; nenhum círculo. */
.icone {
  position: relative;
  display: block;
  box-sizing: border-box;
}

.icone--lateral {
  inline-size: 16px;
  block-size: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.icone--lateral::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 4px;
  border-inline-start: 1.5px solid currentColor;
}

.icone--tema {
  inline-size: 14px;
  block-size: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.icone--tema::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 50%;
  background: currentColor;
}

/* Wordmark do kit, embutido sem alteração (UI-008, UI-009): o do tema (T-117). */
.marca {
  display: block;
  flex: none; /* no topo do menu (flex), o wordmark nunca encolhe abaixo dos 104px */
  inline-size: var(--painel-marca-largura);
  /* Área de proteção (p.4): altura do "x" livre; ≥ 6,4% da largura por lado (DERIVADO, 07 §3). */
  padding: calc(var(--painel-marca-largura) * 0.064);
}

.marca svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.marca--claro,
:root[data-tx-theme="light"] .marca--escuro {
  display: none;
}

:root[data-tx-theme="light"] .marca--claro {
  display: block;
}

/*
 * Cursor do wordmark: o último <rect> do <g> do SVG do kit; só a opacidade muda (07 §6).
 * Manual p.4: pisca em ciclos de 1s no digital. PROPOSTA (UI-013; WCAG 2.2.2), aguardando
 * decisão (MRC-14): pisca 5 ciclos (5s) e para visível; com movimento reduzido, ou sem
 * suporte à consulta, fica estático.
 */
@media (prefers-reduced-motion: no-preference) {
  .marca svg > g > rect:last-child {
    animation: painel-cursor 1s step-end 5 forwards;
  }
}

@keyframes painel-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ conteúdo */

.conteudo {
  inline-size: 100%;
  max-inline-size: 1680px;
  box-sizing: border-box;
  padding: 28px var(--tx-space-8) 56px;
  overflow-wrap: break-word;
}

/* Sem menu (a entrada): uma coluna estreita no centro. */
.casca--sem-menu .conteudo {
  max-inline-size: 640px;
  margin-inline: auto;
}

.conteudo > h1 + p.secundario {
  max-inline-size: 90ch;
  margin-block-end: var(--tx-space-5);
}

/* As abas da área (T-119; D84): o controle segmentado do seletor de período da CMP, a aba
   ativa sublinhada (no texto, o aria-current). Na largura estreita, a fileira rola. A folga
   de 4 px em volta deixa o anel de foco, que fica 4 px para fora da aba, inteiro dentro do
   bloco que rola (revisão do PR #113, B1); a margem de baixo desconta a folga. */
.abas {
  margin-block: 0 calc(var(--tx-space-5) - 4px);
  padding: 4px;
  overflow: auto;
}

/* A partir de 1024 px a fileira sempre cabe (o maior grupo tem 5 abas desde a T-121, D85;
   o conteúdo tem 712 px ou mais): sem rolagem, nada corta o anel, e sem a folga dos lados
   as abas alinham com o título e os cartões (revisão do PR #113, B4 da 2ª rodada; a regra
   do painel não aceita margem negativa). Medido no Chromium com as fontes locais (revisão
   do delta do PR #113): a fileira mais larga, a da Administração com a pílula em 2 abas,
   soma 513 px, folga de 199 px. */
@media (min-width: 1024px) {
  .abas {
    padding-inline: 0;
    overflow: visible;
  }
}

.abas ul {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--tx-border);
  border-radius: var(--painel-raio-controle);
  background: var(--tx-surface);
}

/* O nome da aba não quebra: a fileira inteira rola no próprio bloco (`flex: none`). */
.abas li {
  flex: none;
}

.abas li + li {
  border-inline-start: 1px solid var(--tx-border);
}

.aba {
  display: block;
  padding: 6px var(--tx-space-3);
  border-block-end: 2px solid transparent;
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-campo);
  font-weight: var(--tx-weight-medium);
  line-height: var(--tx-leading-snug);
  text-decoration: none;
}

.aba:hover {
  color: var(--tx-fg);
}

/* A pílula da aba: quantas pendências do grupo levam a ela (revisão do PR #113, aud 1, B2). */
.aba .contador {
  margin-inline-start: var(--tx-space-1);
}

/* A aba ativa: sublinhada em âmbar (o destaque do bloco, UI-005) e em peso 600; o estado
   também está no aria-current, não só na cor. */
.aba[aria-current] {
  border-block-end: 2px solid var(--tx-accent);
  color: var(--tx-fg);
  font-weight: var(--tx-weight-semibold);
}

/* "Como funciona": o detalhe da página, recolhido sob a linha de introdução (T-119). */
.como-funciona {
  max-inline-size: 90ch;
  color: var(--tx-fg-muted);
}

.como-funciona > summary {
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-medium);
}

.conteudo > h1 + p.secundario:has(+ .como-funciona) {
  margin-block-end: var(--tx-space-1);
}

.conteudo > .como-funciona {
  margin-block: 0 var(--tx-space-5);
}

/* Os indicadores do Resumo (UI-002, D84; a CMP): rótulo pequeno, número grande em Space
   Grotesk e a linha de apoio; o corte bancário embaixo. */
/* Os quatro numa fileira na tela larga, 2 × 2 abaixo de 1440 px e no celular: nunca 3 + 1
   (revisão do PR #113, B3). Nada no cartão passa da borda (prévia do PR #113, a 430 px ou
   menos): o cartão pode encolher abaixo do conteúdo (`min-inline-size: 0`), o selo
   "aguardando configuração" quebra dentro dele, e o número, o rótulo da chave e o ID dela
   quebram onde for preciso, também a 320 px. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tx-space-3);
  margin-block: 0 var(--tx-space-4);
}

@media (min-width: 1440px) {
  .indicadores {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--tx-space-1);
  min-inline-size: 0;
  padding: var(--tx-space-4) var(--tx-space-5);
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-md);
}

.indicador p {
  margin: 0;
}

h2.indicador__rotulo {
  margin: 0;
  color: var(--tx-fg-muted);
  font-family: var(--tx-font-text);
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-medium);
}

.indicador__valor {
  font-family: var(--tx-font-display);
  font-size: var(--tx-text-2xl);
  font-weight: var(--tx-weight-bold);
  line-height: var(--tx-leading-tight);
  overflow-wrap: anywhere;
}

.indicador__valor .numero {
  font-family: var(--tx-font-display);
}

.indicador__valor .status {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* O que falta: o rótulo da chave em texto, o ID em mono; os dois quebram na borda. */
.indicador__falta {
  display: block;
  margin-block-start: var(--tx-space-1);
  font-family: var(--tx-font-text);
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-regular);
  line-height: var(--tx-leading-snug);
  overflow-wrap: break-word;
}

/* O ID numa linha própria, inteiro quando cabe, em vez de quebrar no meio (revisão do PR
   #113, aud 1, B1); só se nem sozinho couber, quebra na borda. */
.indicador__id {
  display: block;
  max-inline-size: 100%;
  font-family: var(--tx-font-mono);
  font-size: var(--tx-text-xs);
  overflow-wrap: break-word;
}

.indicador__apoio,
.indicador__corte {
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-pequeno);
}

/* Cartão (a CMP; receita de slide da p.11, DERIVADO): superfície, borda, canto 8px. */
.cartao {
  background: var(--tx-surface);
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-md);
  padding: var(--tx-space-4) var(--tx-space-5);
  margin-block: 0 var(--tx-space-4);
}

.cartao h2 {
  margin-block-start: 0;
}

.cartao > :last-child {
  margin-block-end: 0;
}

/* Mensagem do resultado (role=status) e da recusa (role=alert): o texto diz o que houve;
   o traço à esquerda só marca o bloco (MRC-01: sem cor semântica). O aviso fixo da página
   (`.aviso`: o que falta, o relatório incompleto) tem o mesmo traço, sem papel ARIA: ele não
   é uma mensagem nova, e o leitor de tela não o anuncia ao carregar (achado de 24/10). */
.cartao[role="status"],
.cartao[role="alert"],
p[role="alert"],
.aviso {
  border-inline-start: 3px solid var(--tx-fg);
}

p[role="alert"],
p.aviso:not(.cartao) {
  padding-inline-start: var(--tx-space-2);
}

/* Rótulo do card: Plex Mono em caixa alta, 11 px, na cor secundária (a CMP). */
.rotulo {
  margin-block: 0 var(--tx-space-1);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-text-xs);
  letter-spacing: var(--tx-tracking-label);
  text-transform: uppercase;
  color: var(--tx-fg-muted);
}

.secundario,
dt {
  color: var(--tx-fg-muted);
}

dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: var(--tx-space-1) var(--tx-space-4);
  margin-block: 0 var(--tx-space-2);
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin-inline-start: 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

details > summary {
  cursor: pointer;
  font-weight: var(--tx-weight-semibold);
}

details:not(.grupo) {
  margin-block: 0 var(--tx-space-2);
}

/* Status sempre em texto (UI-011): "RÓTULO · complemento", um chip pequeno com o
   quadradinho de cor, fundo suave e raio 4 (a CMP). O quadradinho é cinza em todo status
   (MRC-01: cores semânticas PENDENTES) e verde só no operando (UI-006). */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 6px;
  border: 1px solid var(--tx-border);
  border-radius: var(--tx-radius-sm);
  background: var(--tx-grid-line);
  color: var(--tx-fg);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-text-xs);
  line-height: var(--tx-leading-body);
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  background: var(--tx-fg-subtle);
}

.status--operando::before {
  background: var(--tx-status-on);
}

/* ------------------------------------------------------------------ tabelas */

/* Tabela como planilha (a CMP; MRC-05, PROPOSTA): grade fina, cabeçalho fixo em mono
   maiúsculo, zebra discreta, linha de 33 px e, no celular, rolagem no próprio bloco. */
.tabela {
  max-block-size: 72vh;
  overflow: auto;
  margin-block: 0 var(--tx-space-3);
  border: 1px solid var(--tx-border);
  border-radius: var(--painel-raio-controle);
  background: var(--tx-surface);
}

table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--tx-text-sm);
  line-height: var(--tx-leading-snug);
}

caption {
  padding: var(--tx-space-2) var(--tx-space-3);
  border-block-end: 1px solid var(--tx-border);
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-pequeno);
  text-align: start;
}

th,
td {
  padding: var(--tx-space-2) var(--tx-space-3);
  border-block-end: 1px solid var(--tx-border);
  border-inline-end: 1px solid var(--tx-border);
  text-align: start;
  vertical-align: top;
}

th:last-child,
td:last-child {
  border-inline-end: 0;
}

tbody tr:last-child > th,
tbody tr:last-child > td {
  border-block-end: 0;
}

thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--painel-cabecalho-tabela);
  color: var(--tx-fg-muted);
  font-family: var(--tx-font-mono);
  font-size: var(--tx-text-xs);
  font-weight: var(--tx-weight-semibold);
  letter-spacing: var(--tx-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

tbody th {
  font-weight: var(--tx-weight-semibold);
}

tbody tr:nth-child(even) > th,
tbody tr:nth-child(even) > td {
  background: var(--tx-grid-line);
}

/* Número à direita, em fonte tabular: a célula que é só um valor. */
td:has(> data.numero:only-child),
td:has(> a:only-child > data.numero) {
  text-align: end;
  white-space: nowrap;
}

/* O cabeçalho da coluna de número também à direita (D82: tudo alinhado), sem marcar o
   template: a coluna é de número quando alguma célula dela é só um valor. Até a 10ª coluna
   (a tabela mais larga tem 9; test_painel_tema.py confere). */
table:has(> tbody > tr > td:nth-child(1) > data.numero:only-child) > thead > tr > th:nth-child(1),
table:has(> tbody > tr > td:nth-child(1) > a:only-child > data.numero) > thead > tr > th:nth-child(1),
table:has(> tbody > tr > td:nth-child(2) > data.numero:only-child) > thead > tr > th:nth-child(2),
table:has(> tbody > tr > td:nth-child(2) > a:only-child > data.numero) > thead > tr > th:nth-child(2),
table:has(> tbody > tr > td:nth-child(3) > data.numero:only-child) > thead > tr > th:nth-child(3),
table:has(> tbody > tr > td:nth-child(3) > a:only-child > data.numero) > thead > tr > th:nth-child(3),
table:has(> tbody > tr > td:nth-child(4) > data.numero:only-child) > thead > tr > th:nth-child(4),
table:has(> tbody > tr > td:nth-child(4) > a:only-child > data.numero) > thead > tr > th:nth-child(4),
table:has(> tbody > tr > td:nth-child(5) > data.numero:only-child) > thead > tr > th:nth-child(5),
table:has(> tbody > tr > td:nth-child(5) > a:only-child > data.numero) > thead > tr > th:nth-child(5),
table:has(> tbody > tr > td:nth-child(6) > data.numero:only-child) > thead > tr > th:nth-child(6),
table:has(> tbody > tr > td:nth-child(6) > a:only-child > data.numero) > thead > tr > th:nth-child(6),
table:has(> tbody > tr > td:nth-child(7) > data.numero:only-child) > thead > tr > th:nth-child(7),
table:has(> tbody > tr > td:nth-child(7) > a:only-child > data.numero) > thead > tr > th:nth-child(7),
table:has(> tbody > tr > td:nth-child(8) > data.numero:only-child) > thead > tr > th:nth-child(8),
table:has(> tbody > tr > td:nth-child(8) > a:only-child > data.numero) > thead > tr > th:nth-child(8),
table:has(> tbody > tr > td:nth-child(9) > data.numero:only-child) > thead > tr > th:nth-child(9),
table:has(> tbody > tr > td:nth-child(9) > a:only-child > data.numero) > thead > tr > th:nth-child(9),
table:has(> tbody > tr > td:nth-child(10) > data.numero:only-child) > thead > tr > th:nth-child(10),
table:has(> tbody > tr > td:nth-child(10) > a:only-child > data.numero) > thead > tr > th:nth-child(10) {
  text-align: end;
}

td form,
td p {
  margin: 0;
}

/* A DRE legível no celular (T-119): a 1ª coluna (grupo e categoria) fica fixa à esquerda
   enquanto o previsto e o realizado rolam no próprio bloco; o fundo é opaco para o número
   que passa por baixo não aparecer (nessa coluna, sem a zebra). */
table.dre tbody tr > :first-child,
table.dre thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--tx-surface);
}

table.dre thead th:first-child {
  z-index: 2;
  background: var(--painel-cabecalho-tabela);
}

/* ------------------------------------------------------------------ formulários */

/* Rótulo e campo alinhados em grade (rótulo à esquerda; no celular, em cima). */
form p:has(> label) {
  display: grid;
  grid-template-columns: minmax(140px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: var(--tx-space-2) var(--tx-space-3);
  max-inline-size: 760px;
}

form p:has(> label) > button {
  grid-column: 2;
  justify-self: start;
}

label {
  color: var(--tx-fg-muted);
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-semibold);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
  box-sizing: border-box;
  max-inline-size: 100%;
  min-block-size: var(--painel-campo);
  padding: 0 10px;
  border: 1px solid var(--painel-borda-campo);
  border-radius: var(--painel-raio-controle);
  background: var(--tx-surface);
  color: var(--tx-fg);
  font: inherit;
  font-size: var(--painel-texto-campo);
}

textarea {
  padding-block: var(--tx-space-2);
  resize: vertical;
}

form p:has(> label) > input,
form p:has(> label) > select,
form p:has(> label) > textarea {
  inline-size: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tx-accent);
}

input[type="file"] {
  font: inherit;
  font-size: var(--painel-texto-campo);
}

/* Botão da CMP: 12 px, padding 8/12, raio 6, na superfície com borda. A borda é a do campo
   (fg-muted, ≥ 3:1 em todo fundo; PROPOSTA, MRC-04): a border-strong da CMP fica abaixo. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tx-space-2);
  min-block-size: var(--painel-botao);
  padding: 0 var(--tx-space-3);
  border: 1px solid var(--painel-borda-campo);
  border-radius: var(--painel-raio-controle);
  background: var(--tx-surface);
  color: var(--tx-fg);
  font: inherit;
  font-size: var(--painel-texto-pequeno);
  font-weight: var(--tx-weight-semibold);
  cursor: pointer;
}

button:hover {
  border-color: var(--tx-fg);
  background: var(--tx-surface-raised);
}

/* Desabilitado: borda tracejada e texto secundário (sem esmaecer o texto). */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  border-style: dashed;
  color: var(--tx-fg-muted);
  cursor: not-allowed;
}

/* O fieldset nasce com min-inline-size: min-content: a opção longa do select (a regra de
   classificação em /lancamentos/) o alargava além da tela a 320 px. Com 0, o campo fica na
   largura do cartão (max-inline-size: 100%) e a página não rola (rodada 4, PR #109). */
fieldset {
  min-inline-size: 0;
  margin: 0 0 var(--tx-space-3);
  padding: var(--tx-space-2) var(--tx-space-3);
  border: 1px solid var(--tx-border);
  border-radius: var(--painel-raio-controle);
}

legend {
  padding-inline: var(--tx-space-1);
  font-weight: var(--tx-weight-semibold);
}

/* Indicador do htmx: a biblioteca não injeta estilo inline (CSP; seguranca.py). */
.htmx-indicator {
  visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  visibility: visible;
}

/*
 * Tela Operação (T-029, aceite ③): falha nunca aparece como operando, nem com o painel ou o
 * banco fora e a tela aberta. O htmx relê o trecho a cada 30 s, e cada troca recria estes
 * elementos, o que reinicia a animação. Sem troca por 90 s (o htmx não troca o trecho em
 * resposta de erro nem sem resposta), a parte vencida (FALHA · TELA DESATUALIZADA) toma o
 * lugar da atual (OPERANDO, ou o aviso de atualização). Sem script próprio e sem depender
 * do htmx: se nada troca o trecho, a tela vence. Só a visibilidade muda, de uma vez, sem
 * movimento: vale também com movimento reduzido. PROPOSTA: 90 s, 3 ciclos (painel/views.py).
 */
.vigente {
  display: inline-grid;
}

.vigente__atual,
.vigente__vencido {
  grid-area: 1 / 1;
}

.vigente__atual {
  animation: painel-vence-atual 1ms step-end 90s forwards;
}

.vigente__vencido {
  visibility: hidden;
  animation: painel-vence-vencido 1ms step-end 90s forwards;
}

@keyframes painel-vence-atual {
  to {
    visibility: hidden;
  }
}

@keyframes painel-vence-vencido {
  to {
    visibility: visible;
  }
}

/* ------------------------------------------------------------------ menu recolhido */

/* Recolhido (botão do topo do menu; lembrado no navegador): o menu some e sobra o botão de
   reabrir no cabeçalho, à esquerda (a CMP). Vale da largura de tablet para cima; no
   celular o menu é a gaveta. */
@media (min-width: 900px) {
  :root[data-menu="recolhido"] .casca {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-menu="recolhido"] .lateral {
    display: none;
  }

  .js[data-menu="recolhido"] .topo__abrir {
    display: inline-grid;
  }

  /* Recolhido, a conta e o Sair continuam à vista, no cabeçalho (revisão do PR #109). */
  :root[data-menu="recolhido"] .topo__conta {
    display: flex;
  }

  /* Da largura de tablet para cima não há gaveta: o véu nunca aparece (o script também a
     fecha quando a largura muda). */
  .fundo-da-gaveta {
    display: none;
  }
}

/* ------------------------------------------------------------------ celular e tablet */

/* No tablet e no notebook estreito, a planilha larga já rola no próprio bloco: o nome (do
   título, do cliente) ganha largura mínima e quebra em até 2 linhas, em vez de 4 numa
   coluna de 80 px (revisão do PR #109, a 1024 px). Abaixo de 600 px a célula não quebra; da
   largura de 1280 px para cima a tabela cabe sem rolar, e o mínimo a faria rolar. */
@media (min-width: 600px) and (max-width: 1279px) {
  .tabela .nome {
    min-inline-size: 14ch;
  }
}

/* Abaixo de 900 px, o menu vira gaveta, aberta pelo botão do cabeçalho (com script). */
@media (max-width: 899px) {
  .casca {
    grid-template-columns: minmax(0, 1fr);
  }

  .js .lateral {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    inline-size: min(300px, 86vw);
    visibility: hidden;
  }

  :root[data-gaveta="aberta"] .lateral {
    visibility: visible;
  }

  /* Sem script, o menu fica no topo da página, no fluxo; relative, e não static, para o
     z-index de .lateral cobrir o "pular" fora de foco. */
  html:not(.js) .lateral {
    position: relative;
    block-size: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--tx-border);
  }

  .js .topo__abrir {
    display: inline-grid;
  }

  .topo {
    gap: var(--tx-space-2);
    padding-inline: var(--tx-space-4);
  }

  .conteudo {
    padding: var(--tx-space-5) var(--tx-space-4) var(--tx-space-10);
  }
}

@media (max-width: 599px) {
  /* Na trilha estreita, só os dois últimos elos. */
  .trilha li:not(:nth-last-child(-n + 2)) {
    display: none;
  }

  /* O 1º elo visível não tem separador antes (o oculto ainda conta como irmão). */
  .trilha li:nth-last-child(2)::before {
    display: none;
  }

  h1 {
    font-size: var(--tx-text-xl);
  }

  /* Abas mais estreitas no celular. Medido no Chromium com as fontes locais (revisão do
     delta do PR #113): a 375 px (343 px úteis), as fileiras de 5 abas passam do bloco
     (Contas a receber soma 344 px sem pílula e 407 px com 2; Administração, 390 px e
     453 px), e então a fileira rola no próprio bloco, e a página não (largura do documento
     igual à da tela, de 320 px a 1280 px). */
  .aba {
    padding-inline: 6px;
  }

  .cartao {
    padding: var(--tx-space-3);
  }

  /* Os cartões do Resumo em 2 × 2, compactos: "O que precisa de você" sobe para a 1ª tela.
     O número em 16 px: a 320 px, "R$ 1.400,00" cabe inteiro na metade da tela (a 20 px ele
     quebrava no meio; correção de 24/10). */
  .indicador {
    padding: var(--tx-space-3);
  }

  .indicador__valor {
    font-size: var(--tx-text-lg);
  }

  dl,
  form p:has(> label) {
    grid-template-columns: minmax(0, 1fr);
  }

  dt,
  dd,
  form p:has(> label) > button {
    grid-column: 1;
  }

  dd {
    margin-block-end: var(--tx-space-1);
  }

  /* Planilha também no celular: a célula não quebra linha (a linha fica nos 33 px) e a
     tabela larga rola no próprio bloco, sem empurrar a página. */
  th,
  td {
    white-space: nowrap;
  }
}

/* Movimento só sem preferência por movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  details.grupo > .grupo__nome::after {
    transition: transform var(--tx-duration-fast) var(--tx-ease);
  }
}

/* ------------------------------------------------------------------ impressão */

/* Impressão e PDF (MRC-15, PENDENTE; revisão do PR #109): sem o menu, o cabeçalho, o véu e o
   pular, e a tabela inteira, sem o limite de altura nem a rolagem do bloco. */
@media print {
  .lateral,
  .topo,
  .fundo-da-gaveta,
  .pular {
    display: none;
  }

  .casca {
    display: block;
  }

  .tabela {
    max-block-size: none;
    overflow: visible;
  }

  thead th {
    position: static;
  }
}