/* ==========================================================================
   Componentes — prefixo pc-, classes CONGELADAS na fundação.
   Nenhum módulo de tela redefine estas classes nem inventa cor fora de token.
   Uma tela que precise de algo próprio usa a própria folha em css/telas/.

   Execução visual alinhada à Plataforma RTC da ACTA (11/08/2026): sombras
   quase imperceptíveis que ganham tom esverdeado no hover, três degraus de
   superfície, rótulo caixa-alta pareado com valor grande em mono, transições
   de 150/250/400ms. Os NOMES das classes não mudaram: só as regras.
   ========================================================================== */

/* ==========================================================================
   1. VALOR — a célula onde o produto inteiro se decide
   ========================================================================== */

.pc-valor {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -.01em;
}

.pc-valor__unidade {
  font-family: var(--fonte-texto);
  /* Piso absoluto sob a proporção: `.85em` de um pai de 10,5px dá 8,9px, e o
     que fica ali é a unidade do número, que muda o significado dele. O
     `max()` mantém a proporção onde o pai é grande e segura o piso onde
     ele é pequeno. */
  font-size: max(9.5px, .85em);
  font-weight: var(--peso-medio, 500);
  margin-left: 2px;
  color: var(--texto-secundario);
}

/* -- A APURAR --------------------------------------------------------------
   Troca para a fonte de TEXTO e alinha à ESQUERDA. A quebra do ritmo
   monoespaçado é o sinal que o olho pega antes de ler o rótulo — é ela que
   faz o valor pendente saltar numa coluna de 100 números alinhados.
   Cor + hachura + rótulo + aria-label, os quatro juntos: cor sozinha não
   sobrevive a daltonismo, a impressão em preto e branco, nem a print colado
   em slide. E NUNCA 0,00, traço, célula vazia ou cinza apagado.
   -------------------------------------------------------------------------- */

.pc-valor--a-apurar {
  font-family: var(--fonte-texto);
  font-style: italic;
  font-weight: var(--peso-medio, 500);
  text-align: left;
  color: var(--color-a-apurar);
  background-color: var(--surface-a-apurar);
  background-image: var(--hachura-a-apurar);
  padding: 1px 6px 1px 5px;
  /* Moldura completa com raio assimétrico. A borda existia só à
     esquerda e o raio nos quatro cantos: uma borda de um lado com
     canto arredondado desenha um parêntese, e o chip aparecia na
     tela como "( A apurar". */
  border: 1px solid color-mix(in srgb, var(--color-a-apurar) 45%, transparent);
  border-left: 3px solid var(--color-a-apurar);
  border-radius: 2px var(--raio-chip) var(--raio-chip) 2px;
  cursor: help;
}

.pc-valor--nao-avaliavel {
  font-family: var(--fonte-texto);
  font-style: italic;
  text-align: left;
  /* Cor própria, e não a do "a apurar": o violeta é reservado à lacuna de
     norma pelo MASTER, e os dois estados dizem coisas diferentes. A hachura
     sozinha não distingue em projeção nem em impressão em preto e branco. */
  color: var(--color-nao-avaliavel, var(--texto-secundario));
  background-color: var(--surface-nao-avaliavel, #EEF0F1);
  padding: 1px 6px 1px 5px;
  /* Moldura completa com raio assimétrico. A borda existia só à
     esquerda e o raio nos quatro cantos: uma borda de um lado com
     canto arredondado desenha um parêntese, e o chip aparecia na
     tela como "( A apurar". */
  border: 1px solid color-mix(in srgb, var(--color-nao-avaliavel, var(--texto-secundario)) 45%, transparent);
  border-left: 3px solid var(--color-nao-avaliavel, var(--texto-secundario));
  border-radius: 2px var(--raio-chip) var(--raio-chip) 2px;
  cursor: help;
}
.pc-valor--novo { background-image: var(--hachura-a-apurar); }

.pc-regime-simples {
  display:inline-flex; align-items:center; gap:4px; padding:5px 9px;
  border:1px solid #b7d0ec; border-radius:7px;
  color:#1d4e89; font-weight:600;
  background:repeating-linear-gradient(135deg,#eaf1fb 0,#eaf1fb 6px,#dce9f8 6px,#dce9f8 9px);
}
.pc-regime-simples .pc-info__botao { color:#1d4e89; }

/* Inviavel e resultado do MOTOR, nao falha da aplicacao: reconstruir_preco com
   margem de 96% sobre custo 100 nao tem solucao, e isso e uma resposta correta.
   Por isso ambar tostado (--color-negativo, "perda") e nao o vermelho de erro —
   vermelho aqui diria ao usuario que a ferramenta quebrou. E a mesma razao pela
   qual a casa nunca pinta prejuizo de vermelho. */
.pc-valor--inviavel {
  font-family: var(--fonte-texto);
  font-style: italic;
  font-weight: var(--peso-medio, 500);
  text-align: left;
  color: var(--color-negativo);
  background-color: var(--superficie-negativo);
  padding: 1px 6px 1px 5px;
  /* Moldura completa com raio assimétrico. A borda existia só à
     esquerda e o raio nos quatro cantos: uma borda de um lado com
     canto arredondado desenha um parêntese, e o chip aparecia na
     tela como "( A apurar". */
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: 2px var(--raio-chip) var(--raio-chip) 2px;
  cursor: help;
}

/* Procedência estimada fica só no dado (regra do dono de 14/10): nenhuma marca visível. */
.pc-valor--estimado {
  border-bottom: 0;
}

/* Agregado que não cobre a receita inteira (decisão Q3e). */
.pc-valor--parcial { color: var(--color-foreground); }

/* ==========================================================================
   2. TOTAL — três slots, sempre. Não existe célula de total isolada.
   ========================================================================== */

.pc-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  line-height: 1.3;
}

/* O par da casa: rótulo pequeno caixa-alta em cima, valor mono em negrito. */
.pc-total__apurado { font-size: 16px; font-weight: var(--peso-forte, 700); }

.pc-total__piso {
  font-family: var(--fonte-texto);
  font-weight: var(--peso-normal, 400);
  color: var(--texto-secundario);
  margin-right: 2px;
}

.pc-total__etiqueta {
  font-family: var(--fonte-texto);
  font-size: 10px;
  font-weight: var(--peso-semi, 600);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-accent-texto);
  background: color-mix(in srgb, var(--color-accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--raio-pill, 9999px);
  padding: 0 6px;
  margin-left: 6px;
  vertical-align: 2px;
}

/* Esta linha é PROSA, não célula de valor.
   Duas correções, do plano 19, itens 3 e 16:

   1. A borda existia só à esquerda e havia raio nos quatro cantos. Uma
      borda de um lado com canto arredondado desenha um parêntese: a linha
      aparecia na tela como "( A apurar: 75 itens...". A moldura agora é
      faixa de verdade, com os cantos da esquerda retos.

   2. A hachura era o fundo do parágrafo inteiro, e texto sobre hachura
      vibra e cansa. Vira faixa lateral com tinta muito leve. A hachura
      continua no seu único lugar pelo MASTER: célula de valor, chip e
      barra de gráfico, onde ela marca o dado, não o texto. */
.pc-total__pendente {
  font-size: var(--font-size-small);
  font-weight: var(--peso-medio, 500);
  color: var(--color-a-apurar);
  background-color: color-mix(in srgb, var(--color-a-apurar) 5%, transparent);
  border-left: 3px solid var(--color-a-apurar);
  padding: 2px 8px;
  border-radius: 0 var(--raio-chip) var(--raio-chip) 0;
}

.pc-total__pendente--nenhum {
  color: var(--texto-secundario);
  background-color: transparent;
  border-left-color: var(--color-border);
  font-weight: var(--peso-normal, 400);
}

.pc-total__cobertura { font-size: var(--font-size-small); }

/* -- selo de cobertura ----------------------------------------------------- */

.pc-cobertura {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  color: var(--texto-secundario);
}

.pc-cobertura__barra {
  --pc-cobertura: 100%;
  display: inline-block;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(to right, var(--color-secondary) var(--pc-cobertura),
                              transparent var(--pc-cobertura)),
    var(--hachura-a-apurar),
    var(--surface-a-apurar);
  border: 1px solid var(--color-border);
  flex: none;
}

.pc-cobertura--parcial .pc-cobertura__texto { color: var(--color-a-apurar); font-weight: var(--peso-medio, 500); }

/* Recorte sem item: cobertura indefinida. A barra fica lisa, sem hachura e sem parte
   preenchida — hachura aqui leria como pendência, e não há item nenhum a apurar. */
.pc-cobertura--vazia .pc-cobertura__barra { background: var(--color-background); }
.pc-cobertura--vazia .pc-cobertura__texto { font-style: italic; }

/* ==========================================================================
   3. TABELA densa — linha de 38px, cabeçalho branco fixo, zebra sutil
   ========================================================================== */

.pc-tabela__wrap {
  overflow-x: auto;             /* a tabela rola aqui; a PÁGINA nunca rola */
  overflow-y: visible;
  border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie);
  box-shadow: var(--sombra-card);
  max-width: 100%;
}

.pc-tabela {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

.pc-tabela th,
.pc-tabela td {
  height: var(--altura-linha-tabela, var(--table-row-height));
  padding: 0 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.pc-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  font-size: var(--font-size-small);
  font-weight: var(--peso-semi, 600);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-primary);
}

/* 1ª coluna fixa: a identidade da linha não some ao rolar na horizontal. */
.pc-tabela th:first-child,
.pc-tabela td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--superficie);
  border-right: 1px solid var(--color-border);
}
.pc-tabela thead th:first-child { z-index: 3; background: var(--superficie); }

/* Zebra sutil (o degrau mais leve da superfície alternativa)… */
.pc-tabela tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-muted) 40%, #fff);
}

/* …e hover no tom de cartão ativo, respondendo em 150ms. */
.pc-tabela tbody td { transition: background-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease); }
.pc-tabela tbody tr:hover td { background: var(--superficie-ativa, #E8E4D6); }
.pc-tabela tbody tr:hover td:first-child { background: var(--superficie-ativa, #E8E4D6); }

/* Especificidade: `.pc-tabela__num` sozinho vale (0,1,0) e perdia para
   `.pc-tabela th, .pc-tabela td`, que vale (0,1,1). O resultado é que TODO
   número de tabela densa da aplicação saía alinhado à esquerda, contra a
   regra do MASTER, e ninguém tinha visto porque a folha declarava a coisa
   certa. Qualificar pelo elemento empata a conta e a ordem decide. */
.pc-tabela th.pc-tabela__num,
.pc-tabela td.pc-tabela__num { text-align: right; }
.pc-tabela__num .pc-valor { min-width: 5ch; font-size: 13px; }

.pc-tabela__ordenar {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  transition: color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}

/* Medido no telefone, não suposto: os botões de ordenação saíam com 17px de
   altura e as linhas do P&L com 13px. A WCAG 2.2 pede 24px por 24px em alvo
   apontável, e o dedo não acerta 13px. No mouse a altura pequena é correta,
   porque ali o alvo é o cursor; a regra é do ponteiro, não da largura de tela,
   e por isso mora em `pointer: coarse` e não numa consulta de largura: um
   tablet grande com toque precisa do alvo, e uma janela estreita no laptop
   não. `align-items: center` já existe nos dois, então o texto não desce. */
@media (pointer: coarse) {
  .pc-tabela__ordenar,
  .pc-pnl__linha-link {
    min-height: 24px;
  }
}
.pc-tabela__ordenar:hover { color: var(--color-primary); }
.pc-tabela__ordenar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.pc-tabela__seta { width: 12px; height: 12px; opacity: .45; transition: opacity var(--duracao-rapida, 150ms) var(--curva-padrao, ease); }
[aria-sort="ascending"]  .pc-tabela__seta,
[aria-sort="descending"] .pc-tabela__seta { opacity: 1; color: var(--color-primary); }
[aria-sort="descending"] .pc-tabela__seta { transform: rotate(180deg); }

/* Rodapé: total do FILTRO inteiro, nunca da página. Superfície elevada. */
.pc-tabela__rodape td {
  position: sticky;
  bottom: 0;
  background: var(--superficie-elevada);
  border-top: 2px solid var(--color-primary);
  border-bottom: none;
  font-weight: var(--peso-semi, 600);
  height: auto;
  padding: 8px 10px;
}
.pc-tabela__rodape td:first-child { background: var(--superficie-elevada); }

.pc-tabela__legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--grid-gap);
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  color: var(--texto-secundario);
  padding: 6px 2px;
}

/* Bloco fixo de "a apurar" ao fim da ordenação, em asc e em desc. */
.pc-tabela__bloco-a-apurar > td {
  background-color: var(--surface-a-apurar);
  background-image: var(--hachura-a-apurar);
  border-top: 2px solid var(--color-a-apurar);
  font-size: var(--font-size-small);
  font-weight: var(--peso-semi, 600);
  color: var(--color-a-apurar);
  white-space: normal;
  padding: 8px 10px;
  height: auto;
}
.pc-tabela tbody tr[data-bloco="a-apurar"] td { background-color: var(--surface-a-apurar); }
.pc-tabela tbody tr[data-bloco="a-apurar"] td:first-child { background-color: var(--surface-a-apurar); }

/* ==========================================================================
   4. BARRA DE CONTEXTO — sticky, altura compartilhada, fora do alvo de todo swap
   ========================================================================== */

.pc-barra-contexto {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
  padding: 0 var(--card-padding);
  background: var(--superficie);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--sombra-card);
  /* sem overflow AQUI: overflow em um eixo recorta os dois, e recortava o
     painel das convenções. Quem rola é a pista interna. */
}

.pc-barra-contexto__pista {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: thin;
  /* a pista tem a altura da barra para a rolagem não cortar o foco dos chips */
  height: 100%;
}

/* A marca da casa e a do cliente, lado a lado, no topo da pagina inteira. Estava na
   lateral, onde ocupava a altura de tres itens de menu logo acima dos sete espacos. */
/* A linha do topo: a marca à esquerda, o recorte à direita, e ar entre as duas. */
.pc-topo {
  display: flex;
  align-items: center;
  /* O `gap` era 32px fixos entre a marca e os chips, e o recuo da direita 20. Com o
     terceiro chip — o de simulacao nao publicada, que so aparece ali — a fileira ia ate
     20px da borda e lia como cortada. O gap agora cede quando a janela aperta.

     E o recuo da direita e o MESMO do `.pc-conteudo`, e nao um numero escolhido no olho:
     e ele que faz a borda dos chips cair na mesma vertical que a do titulo da pagina e a
     das tabelas abaixo. Chip que passa dessa coluna le como se estivesse saindo da tela.
     Ler a variavel, e nao copiar o resultado, mantem o alinhamento tambem quando a janela
     aperta e o recuo cede. */
  gap: clamp(16px, 4vw, 40px);
  min-height: var(--header-height);
  padding-block: 0;
  padding-left: var(--espaco-5, 20px);
  /* O recuo da direita alinha a borda dos chips com a do titulo e a das tabelas. Desde
     o U16 (25/09/2026) o `.pc-conteudo` vai de ponta a ponta em toda tela, com o recuo
     `--respiro-pagina`, e a barra le a mesma variavel. A conta anterior supunha a coluna
     de 1320px centrada: em 1920 os chips paravam em 1686 enquanto a Visao executiva,
     Produtos e Clientes iam ate 1896. */
  padding-right: var(--respiro-pagina);
  border-bottom: 1px solid var(--color-border);
  background: var(--superficie);
  position: sticky;
  top: 0;
  z-index: 7;
}
.pc-topo-de-marca { display: flex; align-items: center; flex: none; }
.pc-topo > .pc-barra-contexto {
  margin-left: auto;
  min-width: 0;
  border-bottom: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
}
.pc-topo > .pc-barra-contexto .pc-barra-contexto__pista { flex: 0 1 auto; }

/* Controle de recolhimento compartilhado por todas as páginas. */
.pc-lateral__recolher {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; min-height: 40px; box-sizing: border-box;
  margin: 0 var(--espaco-4, 16px) var(--espaco-3, 12px);
  padding: 9px 10px; border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 8px); background: var(--color-background);
  font-size: 12px; font-weight: 500; line-height: 1.35;
  color: var(--texto-secundario); cursor: pointer; user-select: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pc-lateral__recolher:hover {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--superficie));
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  color: var(--color-primary);
}
.pc-lateral__recolher:active { background: color-mix(in srgb, var(--color-primary) 12%, var(--superficie)); }
.pc-lateral__recolher svg { flex: none; color: var(--color-primary); transition: transform .16s ease; }
body:has(#pc-recolher:checked) .pc-lateral__recolher svg { transform: rotate(180deg); }
body:has(#pc-recolher:checked) .pc-lateral__recolher span { display: none; }
body:has(#pc-recolher:checked) .pc-lateral__recolher { justify-content: center; margin-inline: 6px; }

.pc-barra-contexto__marca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
}
.pc-barra-contexto__marca:hover { text-decoration: none; }
/* Respiro entre a marca e o primeiro chip. Com 8px o "COMPARAÇÃO" encostava no logotipo
   e os dois liam como um bloco só. O fio separa o que a ferramenta É do que o usuário
   ESCOLHE. */
/* Dentro da coluna de conteúdo, os controles de recorte vão para a DIREITA: o título da
   tela ocupa a esquerda, e era esse o espaço em branco que sobrava ao lado dele. */

/* Presença discreta da marca, com a proporção original preservada. */
.pc-barra-contexto__acta { display: block; height: 40px; width: auto; }
/* A BIC e um logotipo colorido e horizontal: na mesma altura da ACTA ele pesa o dobro
   na linha. Dois tercos e o que iguala a presenca dos dois. */
.pc-barra-contexto__bic { display: block; height: 26px; width: auto; }
.pc-barra-contexto__fio {
  width: 1px; height: 21px; background: var(--color-border); flex: none;
}
.pc-barra-contexto__para {
  font: var(--peso-medio) 9.5px/1 var(--fonte-texto);
  letter-spacing: .9px; color: var(--texto-terciario);
}

/* ---- recolher o menu ----
   A caixa vive no molde, fora do alvo de todo swap; este `label` a alcanca. Sem
   JavaScript: o estado precisa sobreviver a troca de fragmento, e um `localStorage`
   reintroduziria memoria fora da URL, que e o que a barra de contexto existe para
   impedir. */
.pc-recolher {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 8px; cursor: pointer; color: var(--texto-secundario);
  transition: background .16s ease, color .16s ease;
}
.pc-recolher:hover { background: var(--superficie-marca); color: var(--color-secondary); }

/* Recolhido, o menu guarda so o icone. Some o TEXTO do item, o titulo da secao e o
   bloco de exportacao, que nao tem icone que o represente sozinho; ficam os sete
   espacos, que e o que a navegacao e. */
/* A largura vem de `--lateral-agora`, definida em `base.css`: quem mais precisar dela
   — a barra do topo precisa — le a mesma fonte em vez de repetir o numero. */
body:has(#pc-recolher:checked) .pc-menu a span,
body:has(#pc-recolher:checked) .pc-menu-secao h4,
body:has(#pc-recolher:checked) .pc-lateral__arquivos,
body:has(#pc-recolher:checked) .pc-lateral__mais,
body:has(#pc-recolher:checked) .pc-lateral__perfil small,
body:has(#pc-recolher:checked) .pc-lateral__perfil a { display: none; }
body:has(#pc-recolher:checked) .pc-menu a {
  justify-content: center; padding-left: 0; padding-right: 0; gap: 0;
}
body:has(#pc-recolher:checked) .pc-lateral { overflow-x: hidden; }

/* O nome da conta quebra em vez de ser cortado. Com o menu em 196px, "Conta não
   identificada" pedia 138px numa faixa de 113 e saía cortada no meio da palavra —
   e "não identificada" cortado lê como um estado diferente de "não identificada". */


/* ---- a barra em telefone -------------------------------------------------
   Medido em 390px: "Contexto de análise" custava 143px e o gatilho das
   convenções 138px, e sobravam 109px de pista para 464px de chips. A pista
   rolava, mas por uma fresta: "Cenário" e "Versão" ficavam fora, e o chip de
   comparação era cortado no meio do número. O carimbo de cenário e publicação
   é a garantia da casa contra o print fora de contexto, e era justamente ele
   que sumia.

   Os dois blocos fixos cedem o espaço, sem sair da árvore de acessibilidade:
   o rótulo da barra vira texto só de leitor de tela e o gatilho das convenções
   fica com o seu sinal, mantendo o nome acessível.
   ------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .pc-barra-contexto { padding-inline: var(--espaco-3, 12px); }
  /* A marca FICA em telefone, e nao sai por leitor de tela.
     Antes ela era o texto "Contexto de analise", que a propria barra ja diz pelos chips
     — sair da vista e continuar audivel era a decisao certa para um rotulo. Agora sao os
     dois logotipos, e o que eles dizem — de quem e a ferramenta, e para quem — nao esta
     em nenhum outro lugar da tela estreita. O que cede espaco e o fio entre eles e a
     palavra que os liga. */
  /* Em 390px a marca fica reduzida ao logotipo da casa: 45px, contra os 143px que o
     rotulo "Contexto de analise" custava antes. O que a guarda protege e a pista de
     chips — o carimbo de cenario e publicacao e a garantia contra o print fora de
     contexto, e ele ficava fora da vista. A identificacao da BIC nao se perde: ela esta
     no titulo da pagina, no rodape de procedencia e em cada exportacao. */
  .pc-barra-contexto__marca { gap: 0; }
  .pc-barra-contexto__fio,
  .pc-barra-contexto__para,
  .pc-barra-contexto__bic { display: none; }
  .pc-barra-contexto__acta { height: 22px; }
  .pc-chip--convencoes .pc-chip__rotulo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .pc-chip--convencoes { padding-inline: 10px; }
}


/* ---- o rodapé: procedência, e só ------------------------------------------
   O carimbo da versão e as convenções declaradas. Discreto de propósito: não é
   leitura, é conferência — quem precisa vai atrás, quem não precisa não tropeça. */

.pc-chip--convencoes {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* o triângulo padrão do <summary> em cada motor; o chip já tem o seu sinal */
.pc-chip--convencoes::-webkit-details-marker { display: none; }
.pc-chip--convencoes::marker { content: ""; }











/* Em tela estreita o gatilho fica a poucos pixels da borda, e um painel largo
   ancorado nele sairia da viewport.

   A tentativa anterior era `position: fixed` com `left` e `right` iguais, para
   o painel encostar na janela. Medido em 390px, na tela do simulador: o painel
   saiu com 34px de largura e o texto dele vazou até x=439, inflando a largura
   de rolagem do documento para 703px numa janela de 390. A página passou a
   rolar na horizontal, que é o que a casa não admite em nenhuma tela.

   O que vale é ancorar no PRÓPRIO GATILHO, pela direita, e limitar a largura
   ao que cabe na janela. Como o gatilho fica encostado na borda direita da
   barra, um painel de no máximo `100vw - 24px` sempre nasce dentro dela:
   a borda esquerda cai em `direita do gatilho − largura`, que é maior que a
   folga da barra. Nenhuma coordenada depende de qual caixa o navegador elege
   como bloco contentor. */
@media (max-width: 720px) {
  /* A barra recorta no eixo X, e SÓ no eixo X.

     Medido em 390px, na tela do simulador, que é a que traz mais chips: a
     largura de rolagem do documento ia a 703px numa janela de 390, e a página
     rolava na horizontal. Os chips estão todos dentro da pista, que já rola;
     o que vazava era a largura de rolagem da própria pista, subindo pela
     barra grudada até o documento.

     `overflow: hidden` não serve, e o comentário no alto desta seção diz por
     quê: recortar um eixo com `hidden` recorta os dois, e o painel das
     convenções, que abre PARA BAIXO da barra, sumia. `clip` recorta o eixo
     pedido e deixa `overflow-y: visible` valer, que é exatamente o que esta
     barra precisa. */
  .pc-barra-contexto { overflow-x: clip; overflow-y: visible; }

}

/* Simulação: faixa superior de 3px em âmbar. Aqui âmbar está no seu único
   significado — "exige atenção" —, e o que exige atenção é o número não ser
   publicado. */
.pc-barra-contexto--simulacao { box-shadow: inset 0 3px 0 0 var(--color-accent), var(--sombra-card); }

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Altura única para todos. Eles mediam 36, 25 e 44px lado a lado, e três alturas
     diferentes na mesma linha leem como três coisas de naturezas diferentes — sendo que
     são a mesma coisa: o recorte que vale para a tela.
     Os 30px viraram 26: no topo eles disputam a linha com a marca, e ali o que se pede
     do chip é que informe sem pesar. O alvo de toque não encolheu junto — quem o mantém
     é o <select> de dentro, com 44px absorvidos por margem negativa. */
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--raio-pill, 9999px);
  background: var(--superficie);
  font-size: 11.5px;
  font-weight: var(--peso-medio, 500);
  white-space: nowrap;
  flex: none;
  transition: border-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-chip:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.pc-chip__rotulo {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-terciario);
  font-weight: var(--peso-semi, 600);
}
.pc-chip__valor { font-family: var(--fonte-numero); font-weight: var(--peso-semi, 600); }
.pc-chip__comparacao {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--fonte-numero);
  font-weight: var(--peso-forte, 700);
  font-size: 11.5px;
}
/* "base" e "alvo" são legenda do número, e não o número. Ficam menores e em cinza, e
   sem o espaço extra que os fazia ler como palavra própria. */
.pc-chip__ano { display: inline-flex; align-items: baseline; gap: 3px; }
.pc-chip__ano small {
  font: var(--peso-medio, 500) 8.5px/1 var(--fonte-texto);
  letter-spacing: .04em; color: var(--texto-terciario);
}

/* Sem borda de cor. Um chip tinha a borda no verde da marca e o vizinho no verde
   institucional: dois verdes diferentes lado a lado na mesma linha, dizendo — sem querer
   dizer — que são de naturezas diferentes. O que distingue os dois é o conteúdo, e o
   conteúdo já está escrito neles. */
.pc-chip--exercicio, .pc-chip--cenario { border-color: var(--color-border); }
.pc-chip--exercicio .pc-chip__comparacao,
.pc-chip--cenario select { color: var(--color-secondary); }
.pc-chip--base small {
  padding-left: 4px;
  border-left: 1px solid var(--color-border);
  font-size: 9.5px;
  color: var(--texto-secundario);
}
.pc-chip--base[data-estado="A_APURAR"] {
  border-color: color-mix(in srgb, var(--color-a-apurar) 34%, var(--color-border));
  background: var(--surface-a-apurar);
}

/* Chip de publicação: pill verde-suave, identificador em mono. */
.pc-chip--publicacao {
  background: var(--superficie-marca, #DCEBE7);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-secondary);
  font-family: var(--fonte-numero);
}
.pc-chip--simulacao  {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent-texto);
  background: color-mix(in srgb, var(--color-accent) 10%, #fff);
  font-weight: var(--peso-semi, 600);
}

/* O <select> vive dentro do chip; o chevron é do chip, não do controle, para
   não depender de appearance nativa por cima do `all: unset`. */
.pc-chip select {
  all: unset;
  cursor: pointer;
  font-family: var(--fonte-numero);
  font-weight: var(--peso-forte, 700);
  font-size: 11.5px;
  transition: color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-chip select:hover { color: var(--color-primary); }
/* O anel do chip mora no CHIP, e por dentro dele.

   O `select` usa `all: unset`, entao a caixa dele e do tamanho do TEXTO. Anelado, ele
   desenhava um retangulo no meio da pilula — e ainda somava dois aneis, porque a regra
   global de foco acrescentava o `box-shadow` que esta aqui nao declarava.

   Por DENTRO, e nao por fora: os chips ficam a 8px um do outro, e um anel de 4px para
   fora chegava a 4px do vizinho. Era o "encostar" que o dono viu entre o cenario e o
   exercicio. Por dentro ele acompanha a pilula, nao invade o vao e continua sendo um
   indicador de 2px em cor de marca. */
.pc-chip select:focus-visible { outline: none; box-shadow: none; }
.pc-chip:has(select:focus-visible),
.pc-chip:has(:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--color-primary);
  border-color: var(--color-primary);
}
/* O <select> do ano-alvo COBRE o chip, e nao ocupa espaco dentro dele.

   Ele era um controle invisivel de 44px — `color: transparent` para o valor nao aparecer
   duas vezes, e 44px porque o alvo de toque e minimo de acessibilidade e nao enfeite.
   Invisivel mas presente no fluxo, ele abria um vao de 44px entre "Alvo" e a seta, e o
   chip lia como se tivesse um buraco no meio.
   
   Absoluto sobre o chip, o vao some e a seta volta a encostar no texto. E o alvo de toque
   nao se perde: `inset` de -9px em cima e embaixo devolve os 44px de altura por cima do
   chip de 26, sem mexer no layout, porque elemento absoluto nao empurra os vizinhos. Na
   largura o alvo passou a ser o chip inteiro, que e bem mais do que os 44px de antes. */
.pc-chip--exercicio { position: relative; }
.pc-chip--exercicio select {
  position: absolute;
  inset: -9px 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pc-chip--exercicio select option {
  color: var(--color-foreground);
  font-size: var(--font-size-small);
}
.pc-chip--exercicio::after,
.pc-chip--cenario::after {
  content: "▾";
  font-size: 9px;
  line-height: 1;
  color: var(--texto-terciario);
  pointer-events: none;
}

/* Os dois controles de contexto vivem num <form> só, para que nenhum precise
   guardar uma cópia do valor do outro. `display: contents` tira o form do
   fluxo: os dois chips continuam sendo itens diretos do flex da barra. */
.pc-troca-de-contexto { display: contents; }

/* A seleção é confirmada pelo servidor. O estado de preparo não muda o carimbo. */
.pc-seletor-cenario {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  max-width: 28rem;
}
.pc-seletor-cenario::after { display: none; }
.pc-seletor-cenario:focus-within { outline: none; box-shadow: none; }
.pc-seletor-cenario__menu { position: relative; min-width: 13rem; }
.pc-seletor-cenario__menu .pc-selecao__gatilho {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 9px); background: #fff; color: var(--texto-primario);
  font: var(--peso-medio, 500) 13px/1.4 var(--fonte-texto); cursor: pointer;
}
.pc-seletor-cenario__menu summary { list-style: none; }
.pc-seletor-cenario__menu summary::-webkit-details-marker { display: none; }
.pc-seletor-cenario__menu .pc-selecao__painel {
  box-sizing: border-box; display: flex; flex-direction: column; position: absolute;
  top: calc(100% + 6px); right: 0; width: max(100%, 15rem); max-width: calc(100vw - 16px);
  max-height: min(360px, 70vh); padding: 6px; border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 9px); background: #fff; box-shadow: 0 10px 24px #203b3b22;
  overflow: auto; z-index: 1200;
}
.pc-seletor-cenario__menu:not([open]) .pc-selecao__painel { display: none; }
.pc-seletor-cenario__menu .pc-selecao__lista > button {
  box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--texto-primario);
  font: var(--peso-medio, 500) 13px/1.4 var(--fonte-texto); text-align: left; cursor: pointer;
}
.pc-seletor-cenario__menu .pc-selecao__lista > button:hover,
.pc-seletor-cenario__menu .pc-selecao__lista > button[aria-selected="true"] { background: var(--superficie-marca, #DCEBE7); color: var(--color-primary); }
.pc-seletor-cenario__menu .pc-selecao__rotulo { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.pc-seletor-cenario__menu .pc-selecao__rotulo strong { min-width: 2rem; font: var(--peso-forte, 700) 12px/1.4 var(--fonte-numero); }
.pc-seletor-cenario__menu .pc-selecao__rotulo small { display: inline; color: inherit; font: inherit; }
.pc-seletor-cenario__menu [data-cenario-resumo] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-seletor-cenario__menu [data-cenario-marcacao] { margin-left: auto; }
.pc-seletor-cenario__menu [data-cenario-marcacao][hidden] { display: none; }
.pc-seletor-cenario__menu [aria-disabled="true"] { opacity: .55; cursor: default; }
.pc-seletor-cenario__menu .pc-selecao__gatilho:focus-visible,
.pc-seletor-cenario__menu .pc-selecao__lista button:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.pc-cenario-na-fileira .pc-seletor-cenario__menu .pc-selecao__gatilho { height: 52px; }
.pc-seletor-cenario__cabecalho { display: flex; align-items: center; gap: 6px; }
.pc-seletor-cenario select {
  appearance: auto;
  min-height: 32px;
  min-width: 13rem;
  padding: 2px 4px;
  font: var(--peso-medio, 500) 13px/1.4 var(--fonte-texto);
  color: var(--texto-primario);
}
.pc-seletor-cenario select:disabled { cursor: wait; }
/* O reset all:unset do chip também anula o [hidden] da folha do navegador. */
.pc-seletor-cenario select[hidden] { display: none !important; }
.pc-seletor-cenario__estado {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--texto-secundario);
  white-space: normal;
  font: var(--font-size-small)/1.45 var(--fonte-texto);
}
.pc-seletor-cenario[data-estado="pronto"] .pc-seletor-cenario__estado {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pc-cenario-base { display: contents; }
.pc-cenario-na-fileira .pc-seletor-cenario {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 248px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pc-cenario-na-fileira .pc-chip__rotulo {
  font-size: 9.5px;
  line-height: 1.25;
  letter-spacing: .9px;
}
.pc-cenario-na-fileira .pc-seletor-cenario select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 52px;
  line-height: 50px;
  padding: 0 36px 0 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444947' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 9px);
  background-color: var(--superficie);
}
.pc-cenario-na-fileira .pc-seletor-cenario select:hover,
.pc-cenario-na-fileira .pc-seletor-cenario select:focus-visible {
  border-color: var(--color-primary);
}
.pc-cenario-na-fileira .pc-seletor-cenario select:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.pc-painel-filtros__cenario { align-self: flex-start; max-width: 100%; }
.pc-painel-filtros__contexto:has(.pc-seletor-cenario) { align-items: flex-start; }
.pc-cenario-na-fileira { min-width: 0; max-width: 100%; }
.com-topo .pc-seletor-cenario { margin-left: auto; }
@media (max-width: 640px) {
  .pc-seletor-cenario select { min-height: 44px; }
  .com-topo { flex-wrap: wrap; }
  .com-topo .pc-seletor-cenario { margin-left: 0; max-width: 100%; }
}

/* O recorte mora dentro desse mesmo form, embrulhado pelo #barra-contexto que
   os outros controles incluem. `display: contents` pelo mesmo motivo: o
   embrulho existe para o hx-include, não para o layout. */
.pc-recorte { display: contents; }

/* Um filtro aplicado é uma caixa MARCADA, e desmarcar é o que o remove. A caixa
   fica só para o leitor de tela, que a anuncia com o estado certo sem texto
   auxiliar; o que se vê e se clica é o rótulo. */
.pc-chip--recorte { padding: 0; }
.pc-chip__filtro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  cursor: pointer;
}
.pc-chip__marca::after { content: "×"; color: var(--texto-secundario); }
.pc-chip__caixa:focus-visible + .pc-chip__filtro {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--raio-pill, 9999px);
}
.pc-chip__filtro:hover .pc-chip__marca::after { color: var(--color-primary); }

/* Desmarcado e ainda na tela: o filtro ainda não foi aplicado, e o chip diz
   isso. Com o script vivo esse estado dura o tempo de a navegação sair; sem
   ele, o usuário ainda não apertou "ir" e pode remarcar. Nos dois casos o que
   se lê é o que vale. */
.pc-chip__caixa:not(:checked) + .pc-chip__filtro {
  opacity: .55;
  text-decoration: line-through;
}
.pc-chip__caixa:not(:checked) + .pc-chip__filtro .pc-chip__marca::after { content: "+"; }

/* Botão "ir" dos dois controles da barra. Existe para o caso em que o HTMX não
   está vivo: aí o <form method="get"> troca exercício ou cenário por navegação
   normal, e o controle continua funcionando. Visível e habilitado por padrão,
   de propósito — quem o esconde é o script da fundação, e só depois de
   confirmar que o window.htmx carregou. O padrão precisa ser o que funciona
   sem nada carregado. */
.pc-chip__ir {
  margin-left: 4px;
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--raio-pill, 9999px);
  background: var(--superficie);
  color: var(--texto-secundario);
  font: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: var(--peso-semi, 600);
  cursor: pointer;
  transition: color var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              border-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-chip__ir:hover { color: var(--color-primary); border-color: var(--color-primary); }
.pc-chip__ir:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pc-chip__ir[hidden] { display: none; }

/* O ponto de quebra que escondia as convenções em 1420 saiu junto com a
   lista solta: no popover elas existem em qualquer largura, e convenção
   escondida seria convenção assumida por omissão. */

/* Carimbo: exercício · cenário · publicação, em TEXTO, em todo fragmento. */
.pc-carimbo {
  font-family: var(--fonte-numero);
  font-size: 11px;
  color: var(--texto-secundario);
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  user-select: all;
}
.pc-carimbo--simulacao { color: var(--color-accent-texto); font-weight: var(--peso-semi, 600); }

/* ==========================================================================
   5. CARTÃO, INDICADOR, MENU LATERAL, TRILHA, GAVETA
   ========================================================================== */

.pc-card {
  background: var(--superficie);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 12px);
  padding: var(--card-padding);
  box-shadow: var(--sombra-card);
  min-width: 0;
}

/* Cartão cujo agregado não cobre a receita inteira. */
.pc-card--parcial { border-left: 3px solid var(--color-a-apurar); }

/* Rótulo do cartão: o par da casa — caixa-alta pequena sobre valor grande. */
.pc-card__titulo {
  font-size: 11px;
  font-weight: var(--peso-semi, 600);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-secundario);
  margin: 0 0 6px;
}

/* Indicador: o cartão que desce um nível. Todo indicador é clicável.
   Borda lateral de 3px na cor da marca; no hover, elevação com a sombra
   esverdeada da casa. O parcial mantém a borda violeta — o estado do dado
   vence a decoração. */
.pc-indicador {
  display: block;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--color-primary);
  transition: border-color var(--duracao) var(--curva-padrao, ease),
              box-shadow var(--duracao) var(--curva-padrao, ease),
              transform var(--duracao) var(--curva-padrao, ease);
}
.pc-indicador:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  border-left-color: var(--color-primary);
  box-shadow: var(--sombra-card-hover, 0 8px 24px rgba(0, 110, 101, .08));
  transform: translateY(-2px);
}
.pc-indicador:active { transform: translateY(0) scale(.98); }
.pc-indicador.pc-card--parcial,
.pc-indicador.pc-card--parcial:hover { border-left-color: var(--color-a-apurar); }
.pc-indicador:hover .pc-indicador__descer { opacity: 1; }
.pc-indicador__valor  { font-size: 22px; font-weight: var(--peso-forte, 700); letter-spacing: -.01em; }
.pc-indicador__valor .pc-valor { font-size: inherit; }
.pc-indicador__rodape { display: flex; justify-content: space-between; align-items: flex-end;
                        gap: var(--grid-gap); margin-top: 6px; }
.pc-indicador__descer { font-size: 11px; color: var(--color-primary); opacity: .5;
                        display: inline-flex; align-items: center; gap: 3px;
                        transition: opacity var(--duracao-rapida, 150ms) var(--curva-padrao, ease); }

/* -- menu lateral ------------------------------------------------------------
   Marca discreta, módulo identificável e sete espaços. O verde aparece no item
   ativo e em pequenos sinais de orientação, sem preencher toda a lateral. */

.pc-lateral__cabecalho {
  padding: var(--espaco-6, 24px) var(--espaco-5, 20px) var(--espaco-5, 20px);
  border-bottom: 1px solid var(--color-border);
}
.pc-lateral__marca {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-foreground);
  text-decoration: none;
  line-height: 1;
}
.pc-lateral__marca:hover { color: var(--color-foreground); text-decoration: none; }
.pc-lateral__marca img {
  width: 108px;
  height: auto;
  display: block;
}
.pc-lateral__marca strong {
  font-size: 23px;
  letter-spacing: -.08em;
}
.pc-lateral__marca span {
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: .38em;
  text-transform: uppercase;
}


.pc-lateral__rolagem {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  /* O recuo do TOPO nasceu quando o bloco de módulo saiu da lateral. Ele fazia esse
     espaço sem querer; sem ele, "COMEÇO" encostava na barra de contexto e o menu
     começava colado no logotipo. */
  padding: var(--espaco-5, 20px) var(--espaco-4, 16px) var(--espaco-4, 16px);
}
/* Em altura de notebook (768 e 800 px) a lista de menu não cabe e rola por dentro.
   Sem trilho visível, "Evidências" e "Administração" pareciam cortados pelo cartão do
   usuário e ninguém sabia que havia rolagem (QA em produção, 17/09/2026: em 1366x768
   os quatro últimos itens ficavam fora da janela). O trilho fino fica sempre visível
   quando há rolagem, e abaixo de 820 px o menu encolhe o respiro para caber mais. */
.pc-lateral__rolagem { scrollbar-gutter: stable; scrollbar-width: thin; }
.pc-lateral__rolagem::-webkit-scrollbar { width: 7px; }
.pc-lateral__rolagem::-webkit-scrollbar-track { background: transparent; }
.pc-lateral__rolagem::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-border) 60%, var(--texto-terciario));
  border-radius: 4px;
}
.pc-lateral h4 {
  display: flex;
  align-items: center;
  gap: var(--espaco-2, 8px);
  margin: var(--espaco-4, 16px) 0 var(--espaco-2, 8px);
  font-size: 10.5px;
  font-weight: var(--peso-semi, 600);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--texto-terciario);
}
.pc-lateral h4::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.pc-menu-secao:first-child h4 { margin-top: var(--espaco-1, 4px); }

.pc-lateral .pc-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-lateral .pc-menu li { list-style: none; }
.pc-lateral .pc-menu li::marker { content: none; }
.pc-lateral .pc-menu a {
  display: flex;
  align-items: center;
  gap: var(--espaco-3, 12px);
  min-height: 42px;
  padding: 9px 11px;
  border-left: 3px solid transparent;
  border-radius: 0 var(--raio-md, 12px) var(--raio-md, 12px) 0;
  color: #6A706D;
  font-size: 13px;
  font-weight: var(--peso-normal, 400);
  text-decoration: none;
  transition: color var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              background-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              border-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-lateral .pc-menu a:hover {
  color: var(--color-foreground);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--superficie));
  text-decoration: none;
}
.pc-menu__icone { width: 17px; height: 17px; flex: none; color: currentColor; }
.pc-lateral .pc-menu a.pc-menu--ativo {
  border-left-color: color-mix(in srgb, var(--color-primary) 78%, white);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--superficie));
  color: var(--color-primary);
  font-weight: var(--peso-semi, 600);
}

/* Irmão da região de rolagem, e não filho dela: com altura própria, os links
   de exportação não descem para fora da parte visível da lateral. */
.pc-lateral__arquivos {
  flex: none;
  padding: var(--espaco-3, 12px) var(--espaco-4, 16px) var(--espaco-2, 8px);
  border-top: 1px solid var(--color-border);
}
.pc-lateral__arquivos > p {
  margin: 0 0 var(--espaco-2, 8px);
  font-size: 10.5px;
  font-weight: var(--peso-semi, 600);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}
.pc-lateral .pc-menu--exportar a { min-height: 34px; padding-block: 6px; font-size: 11.5px; }

.pc-lateral__perfil {
  flex: none;
  padding: var(--espaco-3, 12px) var(--espaco-4, 16px);
  border-top: 1px solid var(--color-border);
  background: var(--superficie);
}
.pc-lateral__mais { display: none; }
.pc-lateral__mais summary {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--raio, 8px);
  color: var(--texto-secundario);
  cursor: pointer;
  list-style: none;
}
.pc-lateral__mais summary::-webkit-details-marker { display: none; }
.pc-lateral__mais-conteudo {
  position: absolute;
  right: var(--espaco-3, 12px);
  z-index: 30;
  display: grid;
  min-width: 210px;
  margin-top: var(--espaco-2, 8px);
  padding: var(--espaco-2, 8px);
  border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie);
  box-shadow: var(--sombra-card-hover, var(--sombra-card));
}
.pc-lateral__mais-conteudo a {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--raio, 8px);
  color: var(--texto-secundario);
  font-size: 12px;
  text-decoration: none;
}
.pc-lateral__mais-conteudo a:hover {
  background: var(--color-muted);
  color: var(--color-primary);
}
.pc-perfil {
  display: flex;
  align-items: center;
  gap: var(--espaco-3, 12px);
  min-width: 0;
  color: var(--color-foreground);
  text-decoration: none;
}
.pc-perfil:hover { color: var(--color-foreground); text-decoration: none; }
.pc-perfil__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--raio-md, 12px);
  background: color-mix(in srgb, var(--color-primary) 88%, white);
  color: var(--color-on-primary);
  font-weight: var(--peso-forte, 700);
}
.pc-perfil__texto { display: grid; min-width: 0; }
.pc-perfil__texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O NOME quebra; o endereço abaixo dele continua com reticências.
   Com a lateral em 196px, "Conta não identificada" pedia 138px numa faixa de 113 e saía
   cortada no meio da palavra — e "não identificada" cortado lê como um estado diferente
   de "não identificada". Um e-mail cortado com reticências continua legível como e-mail;
   um estado, não. */
.pc-perfil__texto strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.pc-perfil__texto strong { font-size: 12.5px; }
.pc-perfil__texto small { font-size: 10.5px; color: var(--texto-secundario); }
.pc-perfil__acoes {
  display: flex;
  gap: var(--espaco-3, 12px);
  margin: var(--espaco-2, 8px) 0 0 50px;
}
.pc-perfil__acoes a { font-size: 10.5px; color: var(--texto-secundario); }

@media (max-width: 1024px) {
  .pc-lateral {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    /* `relative` é para ancorar o menu "•••", que abre absoluto. Mas o
       deslocamento `top` do modo grudado continuava valendo: a lateral
       pintava 56px abaixo da própria linha da grade e cobria o kicker e o
       título da página. Em tela estreita o título simplesmente não existia.
       `top: auto` desfaz o deslocamento sem tirar a âncora. */
    position: relative;
    top: auto;
  }
  .pc-lateral__cabecalho { padding: var(--espaco-3, 12px) var(--espaco-4, 16px); border-bottom: 0; }
  .pc-lateral__marca strong { font-size: 18px; }
  .pc-lateral__marca span { display: none; }
  .pc-lateral__rolagem { overflow-x: auto; overflow-y: hidden; padding: var(--espaco-2, 8px); }
  .pc-lateral__navegacao { display: flex; gap: var(--espaco-1, 4px); width: max-content; }
  .pc-menu-secao { display: contents; }
  .pc-lateral h4 { display: none; }
  .pc-lateral .pc-menu { display: flex; }
  .pc-lateral .pc-menu a {
    min-height: 38px;
    padding: 8px 10px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--raio, 8px);
    white-space: nowrap;
  }
  .pc-lateral .pc-menu a.pc-menu--ativo { border-left: 0; border-bottom-color: var(--color-primary); }
  .pc-lateral__arquivos,
  .pc-lateral__perfil { display: none; }
  .pc-lateral__mais { display: block; margin-right: var(--espaco-3, 12px); }
  .pc-lateral__recolher { display: none; }
}

@media (max-width: 640px) {
  .pc-lateral { grid-template-columns: minmax(0, 1fr) auto; }
  .pc-menu__icone { display: none; }
}

/* Trilha: derivada da URL. Descer acrescenta uma chave, subir remove. */
.pc-trilha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  margin-bottom: var(--grid-gap);
  padding: 0;
  list-style: none;
}
.pc-trilha li { display: inline-flex; align-items: center; gap: 4px; }
.pc-trilha li + li::before { content: "›"; color: var(--texto-secundario); margin-right: 2px; }
.pc-trilha [aria-current="page"] { font-weight: var(--peso-semi, 600); color: var(--color-foreground); }

/* Gaveta: memória de cálculo e detalhe, sem sair da tela. */
.pc-gaveta {
  border: 1px solid var(--color-border);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie);
  margin-top: var(--grid-gap);
  transition: border-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-gaveta:hover { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); }
.pc-gaveta > summary {
  cursor: pointer;
  padding: 8px var(--card-padding);
  font-size: var(--font-size-small);
  font-weight: var(--peso-semi, 600);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.pc-gaveta > summary::-webkit-details-marker { display: none; }
.pc-gaveta > summary::before { content: "▸"; transition: transform var(--duracao) var(--curva-padrao, ease); }
.pc-gaveta[open] > summary::before { transform: rotate(90deg); }
.pc-gaveta__corpo { padding: 0 var(--card-padding) var(--card-padding); }

/* ==========================================================================
   6. BOTÕES — primário em degradê da marca, fantasma e contorno
   As telas novas usam .pc-botao; os controles já servidos (.pc-tabela__mais,
   button.pc-alvo) recebem o mesmo vocabulário sem mudar de marcação.
   ========================================================================== */

.pc-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2, 8px);
  padding: 0 var(--espaco-4, 16px);
  border: none;
  border-radius: var(--raio-md, 12px);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-escuro, #005B54));
  color: var(--color-on-primary);
  font-family: var(--fonte-texto);
  font-size: 13px;
  font-weight: var(--peso-semi, 600);
  letter-spacing: .02em;
  cursor: pointer;
  transition: box-shadow var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              transform var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              filter var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-botao:hover { box-shadow: 0 4px 16px rgba(0, 110, 101, .3); filter: brightness(1.05); }
.pc-botao:active { transform: scale(.98); }
.pc-botao:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.pc-botao--contorno {
  background: none;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.pc-botao--contorno:hover {
  box-shadow: none;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.pc-botao--fantasma {
  background: none;
  border: 1px solid transparent;
  color: var(--texto-secundario);
}
.pc-botao--fantasma:hover {
  box-shadow: none;
  color: var(--color-foreground);
  background: var(--color-muted);
  border-color: var(--color-border);
}

/* Controles que já existem nas telas servidas, no mesmo vocabulário.

   `:not(.pc-botao--primario)` porque as duas classes declaram aparências
   OPOSTAS: `pc-alvo` é o botão fantasma, contorno verde sobre branco, e
   `--primario` é o sólido. `button.pc-alvo` vale (0,1,1) e vencia
   `.pc-botao--primario`, que vale (0,1,0): o botão "Entrar" da primeira tela
   do produto renderizava como secundário, enquanto "Sair" renderizava
   sólido. A ação principal parecia a menos importante das duas. */
.pc-tabela__mais,
button.pc-alvo:not(.pc-botao--primario) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2, 8px);
  padding: 0 var(--espaco-4, 16px);
  border: 1px solid var(--color-primary);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie);
  color: var(--color-primary);
  font-weight: var(--peso-semi, 600);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              box-shadow var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
              transform var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
}
.pc-tabela__mais:hover,
button.pc-alvo:not(.pc-botao--primario):hover {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  box-shadow: var(--sombra-card-hover, 0 8px 24px rgba(0, 110, 101, .08));
}
.pc-tabela__mais:active,
button.pc-alvo:not(.pc-botao--primario):active { transform: scale(.98); }

/* ==========================================================================
   7. GRÁFICO — a parcela a apurar tem entrada própria na legenda
   ========================================================================== */

.pc-grafico { display: block; width: 100%; height: auto; overflow: visible; }
.pc-grafico__eixo line, .pc-grafico__eixo path { stroke: var(--color-border); }
.pc-grafico__eixo text { fill: var(--texto-secundario); font-size: 11px;
                         font-family: var(--fonte-numero); }
.pc-serie { fill: var(--color-secondary); }
.pc-serie--a-apurar { stroke: var(--color-a-apurar); stroke-width: 1; }

.pc-legenda { display: flex; gap: var(--grid-gap); flex-wrap: wrap;
              font-size: var(--font-size-small); margin-top: 6px; }
.pc-legenda__item { display: inline-flex; align-items: center; gap: 5px; }
.pc-legenda__amostra { width: 12px; height: 12px; border-radius: 2px;
                       border: 1px solid var(--color-border); flex: none; }
.pc-legenda__item[data-estado="A_APURAR"] { color: var(--color-a-apurar); font-weight: var(--peso-medio, 500); }
.pc-legenda__item[data-estado="A_APURAR"] .pc-legenda__amostra {
  background-image: var(--hachura-a-apurar);
  background-color: var(--surface-a-apurar);
  border-color: var(--color-a-apurar);
}

/* ==========================================================================
   8. ERRO E ESTADO VAZIO
   ========================================================================== */

.pc-erro {
  border: 1px solid var(--color-destructive);
  border-left: 3px solid var(--color-destructive);
  border-radius: var(--raio-md, 12px);
  background: color-mix(in srgb, var(--color-destructive) 5%, #fff);
  padding: var(--card-padding);
  max-width: 62ch;
}
.pc-erro__titulo { color: var(--color-destructive); font-size: 15px; margin-bottom: 6px; }
.pc-erro__opcoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--grid-gap); }

/* Estado vazio: borda tracejada sobre a superfície elevada. Diz "não há nada
   aqui" sem parecer defeito nem sumir na página. */
.pc-vazio {
  padding: var(--espaco-6, 24px) var(--card-padding);
  text-align: center;
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: var(--peso-leve, 300);
  border: 1px dashed var(--color-border);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie-elevada);
}

.pc-icone { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

/* ==========================================================================
   NOTA DIDATICA (pc-info): ⓘ ao lado de um titulo, painel em camada superior.

   `popovertarget` abre e devolve o foco. JS limita a posição ao viewport;
   a ancoragem CSS permanece como fallback sem JavaScript.

   REGRA DE EDICAO: `display` de .pc-info__painel so pode ser declarado em tres
   lugares, e em mais nenhum: sob :popover-open, dentro do @supports not, e no
   bloco @media print de impressao.css. Uma quarta declaracao faz o painel
   aparecer aberto na pagina.
   ========================================================================== */

.pc-info__botao,
button.pc-info__fechar { display: none; }

/* Reset tipografico. Obrigatorio: o gatilho mora dentro de titulos em
   caixa-alta com tracking e, sem isto, a prosa sai em caixa-alta. Medido
   dentro de `.pc-tabela thead th`. */
.pc-info__painel {
  font-family: var(--fonte-texto);
  font-size: var(--font-size-small);
  font-weight: var(--peso-normal, 400);
  font-style: normal;
  font-variant-numeric: normal;
  line-height: 1.45;
  letter-spacing: normal;
  word-spacing: normal;
  text-indent: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  color: var(--texto-secundario);
  max-width: 92ch;
}

/* 1. sem a API: a prosa fica no fluxo, exatamente como hoje, e o ⓘ nao existe.
      Nenhum texto se perde em navegador nenhum. */
@supports not selector(:popover-open) {
  .pc-info__painel { display: block; margin: 0 0 var(--espaco-2, 8px); }
}

/* 2. com a API: camada superior, imune a overflow e a z-index. */
@supports selector(:popover-open) {
  .pc-info__botao {
    all: unset;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    /* Junto do texto a que responde, com 4 a 6 px de folga. Quase toda chamada da
       macro vem depois de um espaço literal (cerca de 0,25em: 2,4 a 3,8 px nas
       fontes da casa), e os 2 px completam a folga. Onde o ⓘ é item de um flex, o
       espaço não existe e o `gap` do contêiner faz o papel dele (3 px). Medido em
       17/09/2026: com 4 px e `baseline` a folga ia de 6,4 a 10 px, e chegava a 28 px
       no resumo administrativo, onde o gap do flex é de 24 px. */
    margin-left: 2px;
    /* O centro do ⓘ na altura do centro do texto. A base desta caixa inline-flex é a
       base do ícone de 14 px, 2 px acima do fundo da caixa de 18 px: em `baseline` o
       centro ficava 7 px acima da base do texto, e o centro visual de uma linha fica
       a cerca de 0,35em. A conta iguala os dois em qualquer corpo de fonte; medido,
       a diferença caiu de até 3 px para 1 px ou menos. Em contêiner flex a
       propriedade não vale, e o `align-items: center` de cada um responde. */
    vertical-align: calc(0.35em - 7px);
    border-radius: var(--raio-pill, 9999px);
    color: var(--texto-terciario);
    cursor: help;
    transition: color var(--duracao-rapida, 150ms) var(--curva-padrao, ease),
                background-color var(--duracao-rapida, 150ms) var(--curva-padrao, ease);
  }
  /* Alvo de toque de 44px sem inchar a caixa (checklist do MASTER.md). */
  .pc-info__botao::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .pc-info__botao .pc-icone { width: 14px; height: 14px; vertical-align: 0; }
  .pc-info__botao:hover { color: var(--color-primary); background: var(--color-muted); }
  .pc-info__botao:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  /* Janela de dica não modal. O painel não rola: quem rola é o corpo, para que o
     "x" fique sempre à vista no canto superior direito, mesmo com texto longo. */
  .pc-info__painel {
    position: fixed;
    inset: auto var(--espaco-3, 12px) var(--espaco-3, 12px) auto;
    box-sizing: border-box;
    width: min(46ch, calc(100vw - 24px));
    max-width: min(46ch, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
    margin: 0;
    padding: 0 var(--espaco-3, 12px) var(--espaco-3, 12px);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--raio-md, 12px);
    background: var(--superficie);
    box-shadow: var(--sombra-modal);
    color: var(--color-foreground);
  }
  .pc-info__painel:popover-open { display: flex; flex-direction: column; }
  .pc-info__painel:focus { outline: none; }
  .pc-info__painel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  /* O título é a faixa do "x": reserva a largura do botão à direita e tem a altura dele
     (48 px), então o "x" nunca cobre o texto, nem o título, nem a primeira linha do corpo. */
  .pc-info__titulo {
    flex: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 4px 40px 0 0;
    font-size: 10.5px;
    font-weight: var(--peso-semi, 600);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-secundario);
  }
  .pc-info__corpo {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* "x" no padrão do Fechar das janelas (.pc-fechar-painel: 44 x 44 px, pílula
     clara). Só a posição é daqui. */
  button.pc-info__fechar {
    display: inline-flex;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
  }
}

/* 3. com ancoragem em CSS: o painel gruda no ⓘ. Sem esta camada ele fica numa
      faixa fixa no canto inferior direito da janela, que funciona em qualquer
      lugar onde o popover funcione.

      NAO e preciso `anchor-name` no botao nem `position-anchor` no painel:
      `popovertarget` ja estabelece o invocador como ancora implicita. E
      `position-anchor: var(--x)` nao funciona neste arranjo, porque o painel e
      irmao do botao, nao descendente, e nao herda a propriedade personalizada. */
@supports (position-area: block-end) {
  .pc-info__painel {
    position: absolute;
    inset: auto;
    margin-block-start: 6px;
    position-area: block-end span-inline-end;
    position-try-fallbacks: block-end span-inline-start,
                            block-start span-inline-end,
                            block-start span-inline-start;
    position-visibility: anchors-visible;
  }
}

/* Task 17 (auditoria A2): o P&L rola DENTRO do proprio involucro no celular,
   com sombra de borda dizendo que ha mais coluna; nada some em silencio. */
.pc-pnl__tabela-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) 100% 0,
    linear-gradient(to right, rgba(27, 31, 30, 0.10), rgba(27, 31, 30, 0)),
    linear-gradient(to left, rgba(27, 31, 30, 0.10), rgba(27, 31, 30, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.pc-pnl__tabela { min-width: 100%; }
.pc-pnl__tabela th, .pc-pnl__tabela td { white-space: nowrap; }

/* Task 17 (A4): a celula unica do a-apurar centraliza o chip no espaco das
   tres colunas, mantendo a hachura e o rotulo do MASTER. */
.pc-pnl__celula-unica { text-align: center; }

/* 17-5: convencoes da FOLHA de impressao quebram em linhas; a barra da tela
   mantem a rolagem horizontal, que la e o comportamento correto. */
.pc-folha__convencoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-4);
  overflow-x: visible;
  /* A barra da tela usa nowrap porque rola; a folha e papel: texto longo
     quebra em vez de esticar a pagina (17-5). */
  white-space: normal;
}
.pc-folha__convencoes dt,
.pc-folha__convencoes dd {
  white-space: normal;
  max-width: 100%;
  /* Digest de quarenta caracteres nao tem espaco onde quebrar; sem isto ele
     estica a folha em tela estreita. Quebra so onde precisa (17-5). */
  overflow-wrap: anywhere;
}
.pc-folha__convencoes dt { font-weight: var(--peso-semi); }
.pc-folha__convencoes dd { margin: 0 var(--espaco-3) 0 var(--espaco-1); }

/* Assinatura conjunta: a consultoria assina o trabalho, o cliente é nomeado.
   O logo da BIC entra em escala menor e com rótulo, para não competir com a
   marca da casa nem sugerir que a ferramenta é da BIC (Task 19). */
.pc-lateral__parceria {
  margin: var(--espaco-4) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pc-lateral__parceria span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}
.pc-lateral__parceria img {
  width: 76px;
  height: auto;
  display: block;
  opacity: 0.92;
}


/* ==========================================================================
   Refino do dossiê de referências (Task 19): itens 3, 5, 14 e 15

   Item 3 — a tabela ganha o que o Carbon e o Ant Design formalizam: sombra no
   cabeçalho quando ele gruda (o leitor precisa ver que a linha de cima é o
   cabeçalho, não a primeira linha), densidades nomeadas em vez de improviso
   por tela, e números com largura tabular para a vírgula alinhar sozinha.

   Item 5 — um anel de foco só, da marca, em toda a aplicação: hoje cada
   componente inventava o seu.

   Itens 14 e 15 — hover derivado do verde por color-mix, e o degrau de 100ms
   do Carbon para resposta direta (hover e press), abaixo dos 150ms que já
   valem para transição de estado.
   ========================================================================== */

:root {
  --duracao-toque: 100ms;
  --anel-foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--color-primary);
  --tint-marca: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Item 3: sombra que aparece só quando o cabeçalho está grudado. */
.pc-tabela thead th {
  box-shadow: 0 1px 0 var(--color-primary),
              0 6px 12px -8px rgba(27, 31, 30, 0.28);
}

/* Item 3: números com largura tabular — a vírgula alinha entre linhas mesmo
   fora da coluna monoespaçada (a Plus Jakarta Sans tem a feature). */
.pc-tabela td,
.pc-tabela th { font-variant-numeric: tabular-nums; }

/* Item 3: densidades nomeadas. Compacta para administração, auditoria e
   evidências, onde caber mais linha por tela é o que o operador quer. */
.pc-tabela[data-densidade="compacta"] th,
.pc-tabela[data-densidade="compacta"] td {
  height: 32px;
  padding: 0 8px;
  font-size: 12px;
}
.pc-tabela[data-densidade="confortavel"] th,
.pc-tabela[data-densidade="confortavel"] td {
  height: 44px;
  padding: 0 var(--espaco-4);
}

/* Item 3: hover de linha em 100ms, com o tint da marca em vez de cinza. */
.pc-tabela tbody tr { transition: background var(--duracao-toque) var(--curva-padrao); }
.pc-tabela tbody tr:hover td { background: var(--tint-marca); }

/* Item 5: anel de foco único. Vale para link, botão, campo e região rolável;
   quem precisar de outro tratamento sobrescreve declarando o motivo.

   O RAIO NAO E IMPOSTO AQUI. Ate 27/08/2026 esta regra escrevia
   `border-radius: var(--raio-chip)`, e com isso todo elemento focado trocava de forma:
   o `select` dos filtros ia de 9px para 6px, e o `select` de dentro do chip — que e uma
   pilula de 9999px — ganhava um anel retangular de 6px no meio dela. Era o "contorno
   adicional que nao alinha" que o dono descreveu nos filtros de SKU, Cliente e Estado.

   Cada elemento guarda a propria forma, e quem nao tem forma propria ganha uma onde ela
   e declarada. Anel que muda a geometria do que ele marca nao esta marcando: esta
   redesenhando. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}

/* Item 1 do dossiê — anatomia Stripe no cartão de indicador.

   O que muda: respiro de 20px (era 12), rótulo de 11px com tracking maior,
   valor em JetBrains Mono 28px com tabular-nums (a vírgula alinha entre
   cartões vizinhos, que é o que faz uma faixa de indicadores parecer
   instrumento e não improviso) e rodapé separado por uma linha fina. A cor
   segue reservada ao estado do dado: hierarquia por tipografia e espaço. */
.pc-indicador {
  padding: var(--espaco-5);
  border-radius: var(--raio-md);
}
.pc-indicador .pc-card__titulo {
  font-size: 11px;
  letter-spacing: .06em;
  margin-bottom: var(--espaco-3);
}
.pc-indicador__valor {
  font-family: var(--fonte-numero);
  font-size: 28px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.pc-indicador__rodape {
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-3);
  border-top: 1px solid var(--color-border);
}

/* A faixa de indicadores respira: grade fluida com o mesmo gutter da escala. */
.pc-grade--indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-4);
}

/* Plano de redesign 19, item 3: o chip do "a apurar" lia como um parêntese
   aberto — o raio curvava a borda esquerda até virar "(". A moldura passa a
   ser completa, com a lateral reta que carrega a cor do estado. */
.pc-valor--a-apurar,
.pc-chip--a-apurar {
  border: 1px solid color-mix(in srgb, var(--color-a-apurar) 35%, transparent);
  border-left: 3px solid var(--color-a-apurar);
  border-radius: 0 var(--raio-chip) var(--raio-chip) 0;
  padding-inline: var(--espaco-2);
}

/* Item 13: no celular a célula única do a-apurar alinha à esquerda, junto do
   rótulo da linha; centrada, ela caía fora da janela e a linha parecia vazia. */
@media (max-width: 640px) {
  .pc-pnl__celula-unica { text-align: left; padding-left: var(--espaco-3); }
}

/* Item 18: barra de progresso de 2px durante a troca HTMX e alvo esmaecido.
   Sem biblioteca: o htmx marca o elemento com .htmx-request. */
.pc-progresso {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.htmx-request .pc-progresso::after,
.pc-progresso.htmx-request::after,
.pc-progresso.pc-progresso--espera::after {
  content: "";
  display: block;
  height: 2px;
  width: 40%;
  background: var(--color-primary);
  animation: pc-progresso-desliza 900ms var(--curva-padrao) infinite;
}
@keyframes pc-progresso-desliza {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}
#conteudo.htmx-request {
  pointer-events: none;
}
#conteudo.htmx-request .pc-filtros,
#conteudo.htmx-request .pc-produtos__filtros,
#conteudo.htmx-request .pc-produtos__filtros-preco,
#conteudo.htmx-request .pc-clientes__busca {
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .htmx-request .pc-progresso::after,
  .pc-progresso.pc-progresso--espera::after { animation: none; width: 100%; opacity: .6; }
}

.pc-troca-em-curso {
  position: sticky;
  top: var(--header-height);
  z-index: 4;
  margin: 0 0 var(--espaco-3, 12px);
  padding: 10px 14px;
  border-left: 3px solid var(--color-primary, #006e65);
  background: color-mix(in srgb, var(--color-primary, #006e65) 12%, #fff);
  color: var(--color-ink, #1b2b26);
  font: 600 14px/1.35 var(--fonte-texto, sans-serif);
}
.pc-troca-em-curso[hidden] { display: none; }

/* O invólucro rolável precisa poder encolher dentro de grade e flex; sem isto
   ele adota a largura intrínseca da tabela e empurra a página inteira. */
.pc-tabela__wrap,
.pc-pnl__tabela-wrap {
  min-width: 0; /* wrap encolhe */
  max-width: 100%;
}

/* Linhas abaixo da primeira página visível: o browser adianta layout/paint.
   As 11 primeiras ficam de fora — estão acima da dobra nas listas padrão. */
.pc-produtos tbody tr:nth-child(n+12),
.pc-clientes tbody tr:nth-child(n+12) {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 48px;
}
@supports not (content-visibility: auto) {
  .pc-produtos tbody tr:nth-child(n+12),
  .pc-clientes tbody tr:nth-child(n+12) {
    contain: layout style paint;
  }
}

/* ---- a rolagem lateral precisa DIZER que existe ------------------------
   Medido na auditoria de 22/08: o P&L do painel tem 364px úteis para 620px de
   conteúdo em 390px de janela, e a tabela "O tributo na cadeia" tem 779px para
   1.087px em 1440px. Nos dois casos a coluna que justifica a tabela fica fora,
   e o leitor não descobre que ela existe.

   Duas coisas que NÃO resolvem, e por quê:

   * o degradê de borda que já estava aqui: as células da tabela são opacas e
     pintam por cima dele;
   * a barra de rolagem: `base.css` declara `* { scrollbar-width: thin }`, e em
     macOS a barra fina é SOBREPOSTA. Medido nas duas telas, em três larguras:
     `offsetHeight - clientHeight` deu 0px. Ela não ocupa altura, não aparece
     em repouso e não aparece em print.

   O que resolve é a máscara de esmaecimento, a mesma receita de
   `.pc-lateral__rolagem`, ligada a uma LINHA DO TEMPO DE ROLAGEM. O ganho de
   amarrá-la à rolagem, em vez de deixá-la fixa, são as duas mentiras que ela
   deixa de contar:

   * tabela que CABE não ganha máscara nenhuma. Linha do tempo de rolagem sem
     rolagem é inativa, e animação de linha inativa não entra em efeito: a
     borda direita fica inteira, como hoje;
   * o lado esmaecido é sempre o lado que continua. No começo esmaece só a
     direita; no fim, só a esquerda; no meio, os dois.

   O que se anima é `mask-position`, não a imagem: posição interpola em todo
   motor, imagem de degradê não. A máscara é 40px mais larga que a caixa, com
   uma faixa opaca no meio e transparência nas duas pontas; deslizá-la de
   `-40px` para `0` troca qual ponta fica de fora.
   ---------------------------------------------------------------------- */
@supports (animation-timeline: scroll(self inline)) {
  .pc-tabela__wrap,
  .pc-pnl__tabela-wrap {
    /* Só o tamanho e a repetição ficam na regra base: sem imagem de máscara,
       os dois não pintam nada. A IMAGEM mora nos dois quadros, idêntica nos
       dois, e é isso que faz a máscara sumir por inteiro quando a linha do
       tempo é inativa, isto é, quando a tabela cabe. */
    -webkit-mask-size: calc(100% + 40px) 100%;
    mask-size: calc(100% + 40px) 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: pc-esmaece-a-rolagem linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes pc-esmaece-a-rolagem {
    from {
      -webkit-mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0, #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0, #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
      -webkit-mask-position: -40px 0;
      mask-position: -40px 0;
    }
    to {
      -webkit-mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0, #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
      mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0, #000 40px, #000 calc(100% - 40px), rgba(0, 0, 0, 0) 100%);
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }
}

/* Quem pede menos movimento continua vendo a indicação: a máscara não é
   movimento decorativo, é o que diz que existe coluna fora do quadro. O que se
   faz é congelá-la no estado de início, que é o estado em que a tabela é
   aberta. */
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll(self inline)) {
    .pc-tabela__wrap,
    .pc-pnl__tabela-wrap { animation-play-state: paused; }
  }
}

/* A sombra de borda continua, e mais forte: onde a célula não é opaca ela é o
   primeiro sinal que o olho pega. `background-attachment: local` nas duas
   primeiras camadas apaga a sombra do lado que já chegou ao fim, então a
   indicação nunca mente. */
.pc-pnl__tabela-wrap {
  background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
  background-image:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(27, 31, 30, 0.20), rgba(27, 31, 30, 0)),
    linear-gradient(to left, rgba(27, 31, 30, 0.20), rgba(27, 31, 30, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
}

/* ---- fita de chips que rola ---------------------------------------------
   Mesma receita de máscara de `.pc-lateral__rolagem`: os últimos pixels da
   pista esmaecem, que é o sinal que o olho já conhece de "continua". Sem ela
   a fita de linhas da análise cortava "Margem sobre o preço" no meio da
   palavra, exibindo "Marge", com 1.093px úteis para 1.233px de conteúdo.
   -------------------------------------------------------------------- */
.pc-analise__linhas-rolo,
.pc-barra-contexto__pista {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}


/* ==========================================================================
   CABEÇALHO DE PÁGINA
   Um só bloco para todas as telas. Antes cada uma montava o seu, com
   espaçamentos diferentes, e a visão executiva chegava a dizer o mesmo
   título três vezes na mesma dobra (trilha de um nível, kicker e h1).
   ========================================================================== */

.pc-cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-5, 20px);
  margin-bottom: var(--espaco-6, 24px);
  min-width: 0;
}

.pc-cabecalho-pagina__texto { min-width: 0; }

.pc-cabecalho-pagina__kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: var(--peso-semi, 600);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.pc-cabecalho-pagina__titulo {
  margin: 0;
  font-size: 24px;
  font-weight: var(--peso-forte, 700);
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* `--texto-primario` nunca foi declarado em tokens.css: a regra caía para
     herança e acertava a cor por acidente. O token real é este. */
  color: var(--color-foreground);
}

.pc-cabecalho-pagina__pergunta {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-secundario);
}

.pc-cabecalho-pagina__acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-2, 8px);
  flex: 0 1 auto;
  max-width: 100%;
  /* Em 390px o bloco fica com a largura da coluna; sem isto a pill mais um
     botão fantasma somavam mais que a janela e a página rolava na horizontal. */
  min-width: 0;
}

.pc-cabecalho-pagina__acoes .pc-botao {
  /* 32px é a altura de controle do cabeçalho: o botão da página não pode
     ficar mais alto que a pill que o acompanha. */
  min-height: 32px;
  padding: 0 var(--espaco-3, 12px);
  font-size: 12px;
}

.pc-cabecalho-pagina__acoes .pc-botao--ir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 6px 0 14px;
  border: 0;
  border-radius: 8px;
  background: #006E65;
  color: #fff;
  font: 600 13px/1 var(--fonte-texto, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  filter: none;
}
.pc-cabecalho-pagina__acoes .pc-botao--ir:hover {
  color: #fff;
  text-decoration: none;
  background: #006E65;
  box-shadow: none;
  filter: none;
}
.pc-cabecalho-pagina__acoes .pc-botao--ir i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, #fff 18%, transparent);
  font-style: normal;
}
.pc-cabecalho-pagina__acoes .pc-botao--ir .pc-icone {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   O carimbo do fragmento, em pill.

   Vem do cartão que ficava no canto superior direito de cinco telas, com
   moldura própria escrita em cada uma: "2026 × 2029" em mono de 17px sobre
   "C1 · DEMO-06" em 10,5px. Ele empatava em peso com o h1 ao lado, e o que
   ele diz não é o assunto da tela, é a data dela. Mesmo conteúdo, uma linha
   de 11px, uma forma só para todas as telas.

   O miolo continua sendo `.pc-carimbo`, e por isso continua herdando a fonte
   mono, o `user-select: all` e a regra de impressão que o devolve ao papel.
   -------------------------------------------------------------------------- */
.pc-cabecalho-pagina__carimbo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--superficie);
  white-space: normal;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.pc-cabecalho-pagina__carimbo /* O carimbo do fragmento fica no DOM e fora da vista.
   No DOM porque a guarda cobra que nenhuma superficie saia sem ele, e porque o fragmento
   trocado por HTMX viaja sozinho. Fora da vista porque a pill do cabecalho ja diz a mesma
   coisa na mesma pagina — exercicio, cenario e publicacao —, e duas vezes e uma vez a
   mais. Na impressao ele volta: `impressao.css` forca `.pc-carimbo` a aparecer.

   A condicao era `:has(> .pc-rodape)`: ele sumia QUANDO o rodape estava na pagina. O
   rodape saiu em 27/08/2026 com as Convencoes, e a condicao deixou de casar — o carimbo
   ia reaparecer no pe de onze telas, que e o oposto do que foi pedido. */
.pc-fragmento__carimbo { display: none; }

.pc-carimbo {
  font-size: 11px;
  color: var(--texto-terciario);
}

/* O ano-base fica FORA do `.pc-carimbo`: quem lê o carimbo, na tela ou na
   sonda, tem de ler exercício · cenário · publicação, e não um par de anos
   grudado neles. */
.pc-cabecalho-pagina__comparacao {
  font-family: var(--fonte-numero);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-semi, 600);
  color: var(--color-foreground);
}

.pc-cabecalho-pagina__carimbo--simulacao {
  border-color: var(--color-accent);
  background: var(--superficie-elevada);
}

@media (max-width: 720px) {
  .pc-cabecalho-pagina { flex-direction: column; align-items: stretch; }
  .pc-cabecalho-pagina__titulo { font-size: 21px; }
  /* Empilhado, o bloco de ações vira uma fileira que começa à esquerda, no
     mesmo eixo do título. */
  .pc-cabecalho-pagina__acoes { justify-content: flex-start; }
  /* Com a marca de simulação o carimbo passa de quarenta caracteres, e em
     390px ele precisa poder quebrar em vez de esticar a página. */
  .pc-cabecalho-pagina__carimbo,
  .pc-cabecalho-pagina__carimbo /* O carimbo do fragmento fica no DOM e fora da vista.
   No DOM porque a guarda cobra que nenhuma superficie saia sem ele, e porque o fragmento
   trocado por HTMX viaja sozinho. Fora da vista porque a pill do cabecalho ja diz a mesma
   coisa na mesma pagina — exercicio, cenario e publicacao —, e duas vezes e uma vez a
   mais. Na impressao ele volta: `impressao.css` forca `.pc-carimbo` a aparecer.

   A condicao era `:has(> .pc-rodape)`: ele sumia QUANDO o rodape estava na pagina. O
   rodape saiu em 27/08/2026 com as Convencoes, e a condicao deixou de casar — o carimbo
   ia reaparecer no pe de onze telas, que e o oposto do que foi pedido. */
.pc-fragmento__carimbo { display: none; }

.pc-carimbo { white-space: normal; }
}

@media print {
  /* Ação de tela não vai para o papel. O carimbo vai, e é obrigatório: sem
     ele a folha solta não diz de que exercício nem de que cenário é o número.
     Por isso some o botão, e não o bloco de ações inteiro. */
  .pc-cabecalho-pagina__acoes .pc-botao { display: none !important; }
  .pc-cabecalho-pagina__carimbo { border: none; padding: 0; background: none; }
}

/* O chip de comparação diz qual ano é a base. O rótulo por extenso fica
   pequeno sob cada ano: é a única ocorrência dessa informação na tela, e
   supor a ordem "base × alvo" é justamente o que não se pede ao leitor. */
/* O ano e o papel dele na MESMA linha, e não empilhados.
   Empilhados, o chip media 36px de altura contra 25px do vizinho, e a barra ficava com
   três alturas diferentes lado a lado. Os quatro caracteres continuam ali — eles tiram a
   suposição de ordem, que foi o problema que os trouxe —, agora ao lado do número. */
.pc-chip__ano {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.pc-chip__ano > small {
  /* "base" e "alvo": quatro letras que tiram a suposição de ordem.

     9,5px e não 8,5px: texto pequeno é onde o contraste mais falta, e a
     medição no navegador mostrou este rótulo em 3,76 sobre o creme do chip,
     abaixo do mínimo. Um ponto a mais de corpo, mais o terciário corrigido,
     põem os dois acima da linha sem mudar a hierarquia. */
  font-family: var(--fonte-texto);
  font-size: 9.5px;
  font-weight: var(--peso-medio, 500);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--texto-terciario);
  white-space: nowrap;
}

/* ---- totalizador com piso degenerado ---------------------------------
   Nada apurado: o piso "≥ R$ 0,00" continua na tela, com o mesmo texto,
   mas deixa de liderar. Quem lidera é a linha que carrega a informação
   útil naquele estado, que é quantos itens estão a apurar e quanto
   faturamento eles carregam. Nenhum slot some, nenhum número muda.
   --------------------------------------------------------------------- */
.pc-total[data-piso="degenerado"] .pc-total__pendente {
  font-size: 13px;
  font-weight: var(--peso-semi, 600);
  order: 0;
}
.pc-total[data-piso="degenerado"] .pc-total__apurado {
  font-size: 12px;
  font-weight: var(--peso-normal, 400);
  color: var(--texto-secundario);
}
.pc-total[data-piso="degenerado"] .pc-total__apurado .pc-total__etiqueta { display: none; }

/* O menu rola na horizontal em tela estreita e cortava "Análise" no meio,
   sem nada dizendo que havia mais. A máscara apaga os últimos pixels da
   pista, que é o sinal que o olho já conhece de "continua". Só quando há o
   que rolar: `scroll-timeline` não é universal, então a máscara é fixa e
   discreta o bastante para não incomodar quando a pista cabe inteira. */
@media (max-width: 1024px) {
  .pc-lateral__rolagem {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}


/* ---- recusa por contexto divergente ----------------------------------
   O servidor recusa a aba velha com 409 e uma explicação. O HTMX não troca
   fragmento de resposta de erro, então a pessoa clicava e nada acontecia:
   uma tela que não responde ao clique é lida como travada. A explicação
   ganha faixa própria, fora do alvo do swap.
   --------------------------------------------------------------------- */
.pc-recusa-de-contexto {
  position: fixed;
  top: calc(var(--header-height) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  /* Sem moldura própria: o conteúdo da recusa vem do servidor já com o
     desenho da página de erro, e duas molduras concêntricas leem como
     defeito. A faixa contribui com o que o conteúdo não tem: posição fixa,
     elevação e limite de altura. */
  background: var(--superficie);
  border-radius: var(--raio-md, 12px);
  box-shadow: var(--sombra-modal, 0 16px 48px rgba(0, 0, 0, .12));
}
.pc-recusa-de-contexto[hidden] { display: none; }
.pc-recusa-de-contexto:focus-visible { outline: 2px solid var(--anel-foco, var(--color-primary)); }
.pc-recusa-de-contexto h1,
.pc-recusa-de-contexto h2 { margin: 0 0 8px; font-size: 16px; }
.pc-recusa-de-contexto p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.pc-recusa-de-contexto :last-child { margin-bottom: 0; }

/* Ação de fechar compartilhada pelos painéis flutuantes. */
.pc-fechar-painel{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:8px;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid #bdccc5;border-radius:999px;background:#f0f4f1;color:#304d43;font:600 13px/1.2 var(--fonte-texto,sans-serif);cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease}
.pc-fechar-painel svg{display:block;flex:none;pointer-events:none}
.pc-fechar-painel:hover{border-color:#729486;background:#e3ece6}
.pc-fechar-painel:focus-visible{outline:3px solid var(--color-primary,#006e65);outline-offset:3px}
.pc-custo-dialog__fechar.pc-fechar-painel{width:44px;height:44px;padding:0}
@media(prefers-reduced-motion:reduce){.pc-fechar-painel{transition:none}}

/* Ajuste global após a abertura nativa; evita ancoragem fora da janela. */
@supports selector(:popover-open) {
  .pc-info__painel[data-posicionado] {
    position: fixed;
    inset: auto;
    margin: 0;
    position-area: none;
    position-anchor: auto;
    position-try-fallbacks: none;
    position-visibility: always;
  }
}

/* Balão textual global: camada superior, sem alterar altura das linhas do P&L. */
.pc-tooltips-ativos .pc-balao::before,
.pc-tooltips-ativos .pc-balao::after { display: none !important; }
.pc-tooltip-flutuante {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 12px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--color-secondary);
  color: #fff;
  font: var(--peso-medio) 11px/1.5 var(--fonte-texto);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.pc-tooltip-flutuante span { display:block; }

/* Janela de dica (aberta por clique): mesma face da nota ⓘ (.pc-info__painel), com o
   "x" do padrão Fechar (.pc-fechar-painel) no canto superior direito. O título é a
   faixa do "x" e reserva o espaço dele; só o texto rola, o "x" fica sempre à vista.
   `display` só sob :popover-open, como no painel da nota. */
.pc-tooltip-flutuante[data-modo="clique"] {
  padding: 0 12px 12px;
  overflow: visible;
}
/* D59 (dono, 20/10/2026): todas as dicas com o mesmo visual claro, o da nota ⓘ. A classe é
   aplicada por tooltips.js (FACE_CLARA) a toda dica, com "x" ou sem ele. Sem a classe o
   balão volta à face escura da regra base. */
.pc-tooltip-flutuante--claro {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--raio-md, 12px);
  background: var(--superficie);
  color: var(--color-foreground);
  font: var(--peso-normal, 400) var(--font-size-small) / 1.45 var(--fonte-texto);
  box-shadow: var(--sombra-modal);
}
.pc-tooltip-flutuante[data-modo="clique"]:popover-open { display:flex; flex-direction:column; }
.pc-tooltip-flutuante[data-modo="clique"]:focus { outline:none; }
.pc-tooltip-flutuante[data-modo="clique"]:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.pc-tooltip-flutuante[data-modo="clique"] .pc-tooltip-flutuante__conteudo {
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
.pc-tooltip-flutuante[data-modo="clique"] .pc-tooltip-flutuante__titulo {
  flex:none; display:flex; align-items:center; box-sizing:border-box; min-height:48px;
  margin:0; padding:4px 40px 0 0;
  font-size:10.5px; font-weight:var(--peso-semi, 600); text-transform:uppercase;
  letter-spacing:.06em; color:inherit;
}
.pc-tooltip-flutuante--claro[data-modo="clique"] .pc-tooltip-flutuante__titulo { color:var(--texto-secundario); }
.pc-tooltip-flutuante[data-modo="clique"] .pc-tooltip-flutuante__texto {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
button.pc-tooltip-flutuante__fechar { display:none; }
.pc-tooltip-flutuante[data-modo="clique"] button.pc-tooltip-flutuante__fechar {
  display:inline-flex; position:absolute; top:4px; right:4px; width:44px; height:44px; padding:0;
}
[data-comparacao-projetado] .pc-tooltip-clique { min-height:0; cursor:help; text-decoration:underline dotted; text-underline-offset:3px; }
[data-comparacao-projetado] .pc-tooltip-clique:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

/* Valor que abre memória: um único padrão para custo e tributos. */
button.pc-valor-acionavel {
  display:inline-flex; align-items:baseline; gap:0; width:auto;
  min-width:0; min-height:0; margin:0; padding:1px 2px;
  font:inherit; line-height:inherit; color:inherit;
  border:0; border-radius:4px;
  background:transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none;
}
button.pc-valor-acionavel:hover {background:#e8f2ef;color:var(--color-primary);text-decoration:none}
button.pc-valor-acionavel:focus-visible {outline:2px solid var(--color-primary);outline-offset:2px}
button.pc-valor-acionavel * {cursor:pointer}
button.pc-valor-acionavel .pc-valor--estimado {border-bottom:0;text-decoration:none;cursor:pointer}
:root {--estimado-fundo:#DCEBE7;--estimado-cor:#42796d}
.pc-nat.pc-nat--estimado {background:var(--estimado-fundo);border:1px solid var(--estimado-cor)}
.pc-pnl--est .pc-pnl__sit,
.pc-pnl[data-aquisicao-elo="distribuidor"] .pc-pnl__sit,
.pc-pnl[data-aquisicao-elo="varejista"] .pc-pnl__sit {background:var(--estimado-fundo);color:var(--estimado-cor);border:1px solid var(--estimado-fundo)}

[data-ancora-pnl="liquido"] {
  box-shadow: inset 3px 0 0 var(--color-primary, #287568);
}

/* Filtros recolhíveis: botão acessível, com o resumo dos valores ativos na mesma linha. */
.pc-painel-filtros { margin: 0 0 16px; }
.pc-painel-filtros__cabecalho { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pc-painel-filtros__botao {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  width: fit-content; max-width: 100%; min-height: 42px; box-sizing: border-box;
  padding: 8px 12px; list-style: none; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--superficie, #fff); color: var(--texto-primario);
  font: var(--peso-semi) 13px/1.35 var(--fonte-texto);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pc-painel-filtros__botao:hover, .pc-painel-filtros__botao[aria-expanded="true"] { border-color: var(--color-primary); background: #f7faf9; }
.pc-painel-filtros__botao:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pc-painel-filtros__gatilho { display: inline-flex; align-items: center; gap: 8px; color: var(--color-secondary); white-space: nowrap; }
.pc-painel-filtros__gatilho .pc-icone { width: 18px; height: 18px; }
.pc-painel-filtros__gatilho .pc-icone:last-child { width: 15px; height: 15px; transition: transform .15s ease; }
.pc-painel-filtros__botao[aria-expanded="true"] .pc-painel-filtros__gatilho .pc-icone:last-child { transform: rotate(180deg); }
.pc-painel-filtros__resumo { color: var(--texto-secundario); font: var(--peso-normal) 12px/1.4 var(--fonte-texto); overflow-wrap: anywhere; }
.pc-painel-filtros__conteudo { padding-top: 12px; }
@media (max-width: 640px) {
  .pc-painel-filtros__botao { width: 100%; }
  .pc-painel-filtros__resumo { flex-basis: 100%; padding-inline-start: 26px; }
}
/* ---- a barra em altura de notebook ------------------------------------------
   Fica no fim do arquivo de propósito: as regras de desktop do menu vêm antes e
   têm a mesma especificidade; a ordem decide. Abaixo de 820 px de altura o menu
   encolhe o respiro para mostrar mais itens antes de precisar rolar. */
@media (max-height: 820px) and (min-width: 769px) {
  .pc-lateral__rolagem { padding-top: var(--espaco-3, 12px); }
  .pc-lateral h4 { margin: var(--espaco-3, 12px) 0 var(--espaco-1, 4px); }
  .pc-lateral .pc-menu a { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
}

/* Colunas de ações explícitas, sem alterar o alinhamento financeiro. */
.pc-tabela__acoes { text-align: center !important; vertical-align: middle; }
.pc-tabela__acoes > .admin-monitor__acoes { justify-content: center; }

/* O cenário só ocupa a interface financeira; o rodapé mantém a procedência. */
.pc-seletor-cenario[hidden]{display:none!important}
body:has(#conteudo [data-pc-async-scope][aria-busy="true"]) #barra-de-contexto .pc-seletor-cenario{display:none!important}
.pc-fragmento__carimbo{display:block;margin-top:24px;color:var(--texto-terciario);font-size:11px}
.pc-fragmento .pc-figura__rodape .pc-carimbo,.pc-fragmento .pc-sku-grafico__carimbo{display:none}

/* P50 (20/10/2026): o ⓘ do P&L e os textos com dica do comparativo ganharam role="button"
   em tooltips.js (abrir por clique, D60) e passaram a herdar o alvo de toque de 44 px de
   base.css (`[role="button"] { min-height: 44px }`). O círculo virou pílula de 13 x 44 px
   e a linha do P&L cresceu para cerca de 61 px, com os valores desalinhados. Aqui o ícone e
   o texto voltam à altura própria; o clique e o teclado continuam iguais. */
.pc-balao[role="button"],
.pc-tooltip-clique[role="button"] {
  min-height: 0;
}