/* ==========================================================================
   Base — reset enxuto, grade de 12 colunas, tipografia, foco.
   Estilo: Data-Dense Dashboard. Máxima densidade de informação legível.
   Isto é uma ferramenta de uso continuado, não uma landing page: sem hero,
   sem CTA, sem "massive whitespace".
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--fonte-texto);
  font-size: 14px;
  line-height: 1.45;
  /* Número tabular em TODO texto, não só no valor em destaque: os dígitos da
     Plus Jakarta Sans têm nove larguras diferentes, e sem isto qualquer número
     em cabeçalho, rótulo, cartão ou texto corrido treme entre uma linha e outra.
     A fonte declara `tnum`, conferido nos .woff2 em disco.

     Aqui havia `font-feature-settings: "cv11", "ss01", "cv01"`, herdado da
     Plataforma RTC com a nota de que rendiam "o desenho de dígito e de a que a
     casa já usa". As três são tags da Inter. A Plus Jakarta Sans não expõe
     nenhuma delas, conferido com fontTools nas nove faces: a linha não fazia
     nada e documentava uma crença falsa. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* A PÁGINA nunca rola na horizontal. Tabela larga rola no próprio contêiner. */
  overflow-x: hidden;
}

/* -- escala tipográfica -----------------------------------------------------
   h1 24/700, h2 18/700, h3 15/600, corpo 14. O h4 deixou de carregar o visual
   de rótulo: esse visual agora vive na classe .pc-rotulo e, por contexto, em
   .pc-lateral h4 (o menu não muda de marcação). */

h1, h2, h3, h4 { margin: 0 0 var(--espaco-2, 8px); line-height: 1.25; }
h1 { font-size: 24px; font-weight: var(--peso-forte, 700); letter-spacing: -.01em;
     margin-bottom: var(--espaco-3, 12px); }
h2 { font-size: 18px; font-weight: var(--peso-forte, 700); letter-spacing: -.01em; }
h3 { font-size: 15px; font-weight: var(--peso-semi, 600); }
h4 { font-size: 13px; font-weight: var(--peso-semi, 600); }

/* O rótulo da casa: pequeno, caixa-alta, pareado com valor grande em mono. */
.pc-rotulo {
  font-size: 11px;
  font-weight: var(--peso-semi, 600);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-secundario);
}

p { margin: 0 0 var(--espaco-2, 8px); }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-secondary); }

::selection { background: rgba(0, 110, 101, .25); color: var(--color-foreground); }

/* Foco visível em toda navegação por teclado. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar fina, discreta, que escurece sob o cursor. */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--texto-terciario); }
::-webkit-scrollbar-corner { background: transparent; }

/* Alvos de toque de 44×44px em qualquer controle acionável. */
button, [role="button"], select, summary, .pc-alvo {
  min-height: 44px;
  font-family: inherit;
  font-size: inherit;
}
@media (pointer: fine) {
  /* Em mouse, densidade importa mais que alvo grande; o teclado continua servido. */
  .pc-barra-contexto button,
  .pc-barra-contexto select { min-height: 32px; }
}

.pc-so-leitor-de-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pc-pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 8px 12px;
}
.pc-pular-para-conteudo:focus { left: 8px; top: 8px; }

/* -- grade de 12 colunas --------------------------------------------------- */

.pc-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.pc-grade__col-1  { grid-column: span 1; }
.pc-grade__col-2  { grid-column: span 2; }
.pc-grade__col-3  { grid-column: span 3; }
.pc-grade__col-4  { grid-column: span 4; }
.pc-grade__col-5  { grid-column: span 5; }
.pc-grade__col-6  { grid-column: span 6; }
.pc-grade__col-7  { grid-column: span 7; }
.pc-grade__col-8  { grid-column: span 8; }
.pc-grade__col-9  { grid-column: span 9; }
.pc-grade__col-10 { grid-column: span 10; }
.pc-grade__col-11 { grid-column: span 11; }
.pc-grade__col-12 { grid-column: span 12; }

/* 1440 → 12 · 1024 → 12 · 768 → 6 · 375 → 1 */
@media (max-width: 1024px) {
  .pc-grade__col-1, .pc-grade__col-2, .pc-grade__col-3 { grid-column: span 4; }
  .pc-grade__col-4, .pc-grade__col-5 { grid-column: span 6; }
  .pc-grade__col-7, .pc-grade__col-8, .pc-grade__col-9,
  .pc-grade__col-10, .pc-grade__col-11 { grid-column: span 12; }
}
@media (max-width: 768px) {
  .pc-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [class*="pc-grade__col-"] { grid-column: span 6; }
}
@media (max-width: 480px) {
  .pc-grade { grid-template-columns: 1fr; }
  [class*="pc-grade__col-"] { grid-column: span 1; }
}

/* -- estrutura da página --------------------------------------------------- */

/* A coluna de conteúdo: o recorte no alto, a tela abaixo. A barra de recorte desceu do
   topo para cá, mas parou ANTES de `#conteudo` — ela continua fora do alvo de todo swap,
   e a regra que a mantém fora não é de aparência: é para que uma resposta atrasada não
   redesenhe o recorte com o contexto antigo enquanto a tabela abaixo mostra o novo. */
.pc-coluna { display: flex; flex-direction: column; min-width: 0; }

/* `--lateral-agora` e a largura que a lateral tem NESTE momento, e nao a que ela tem
   quando aberta. O recolhimento a troca por 60px, e ate agora fazia isso escrevendo o
   valor direto na grade — quem precisasse saber a largura corrente, como a barra do topo
   para alinhar a borda dos chips, lia 196 e errava por 136. */
:root { --lateral-agora: var(--sidebar-width); }
body:has(#pc-recolher:checked) { --lateral-agora: 60px; }

/* `--respiro-pagina` e o recuo lateral de TODA pagina: 24px, e 12px em telefone. Quem
   precisa alinhar com a borda do conteudo le esta variavel em vez de repetir a conta:
   o `.pc-conteudo`, a borda direita dos chips no topo e as telas de Usuarios e acessos. */
:root { --respiro-pagina: var(--espaco-6); }
@media (max-width: 640px) { :root { --respiro-pagina: var(--espaco-3); } }

.pc-pagina {
  display: grid;
  grid-template-columns: var(--lateral-agora) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - var(--header-height));
}

.pc-lateral {
  border-right: 1px solid var(--color-border);
  border-top: 3px solid color-mix(in srgb, var(--color-primary) 72%, white);
  background: var(--superficie);
  padding: 0;
  position: sticky;
  top: var(--header-height);
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.pc-conteudo {
  /* U16 (25/09/2026): toda tela usa a largura util inteira ao lado da lateral, com o
     mesmo respiro de 24px. Era uma coluna de 1320px centrada, com recuo de 2,2vw (o
     plano de redesign 19, item 1), e Visao executiva, Produtos e Clientes saiam dela
     cada uma com o seu `:has()`. Quem nao tinha o seu ficava diferente: Cenarios,
     Administracao e Introducao com 31,68px em 1440 e 202px vazios de cada lado em
     1920; e a propria Visao, enquanto preparava o P&L, sem o gancho `[data-base-pnl]`,
     trocava de largura quando o resultado chegava.
     `width: 100%` (e nao `max-width`) continua valendo pelo motivo de antes: num item de
     grade a largura intrinseca nao empurra a coluna, e a pagina nao rola na horizontal. */
  width: 100%;
  padding: var(--espaco-6) var(--respiro-pagina) var(--espaco-8);
  min-width: 0; /* deixa o filho de grade encolher, senão a tabela empurra a página */
}

@media (max-width: 1024px) {
  .pc-pagina { grid-template-columns: minmax(0, 1fr); }
  .pc-lateral {
    position: static;
    min-height: 0;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .pc-conteudo { padding: var(--espaco-3, 12px); }
}

/* -- movimento ------------------------------------------------------------- */
/* Sutil e nunca decorativo. Resposta direta em 150ms, transição de estado em
   250ms, entrada de conteúdo em 400ms com fade e subida de 12px, escalonada
   60ms por irmão da grade. Só em tela, e só sem prefers-reduced-motion. */

@media screen and (prefers-reduced-motion: no-preference) {
  .pc-gaveta[open] > *:not(summary) { animation: pc-descer var(--duracao) var(--curva); }
  .htmx-added { animation: pc-entrada var(--duracao-lenta, 400ms) var(--curva-entrada, ease-out); }

  /* Entrada escalonada: cada filho da grade sobe na sua vez. `backwards`
     mantém o atrasado invisível até a vez dele chegar. */
  .pc-grade > * {
    animation: pc-entrada var(--duracao-lenta, 400ms) var(--curva-entrada, ease-out) backwards;
  }
  .pc-grade > *:nth-child(2) { animation-delay: 60ms; }
  .pc-grade > *:nth-child(3) { animation-delay: 120ms; }
  .pc-grade > *:nth-child(4) { animation-delay: 180ms; }
  .pc-grade > *:nth-child(5) { animation-delay: 240ms; }
  .pc-grade > *:nth-child(6) { animation-delay: 300ms; }
  .pc-grade > *:nth-child(7) { animation-delay: 360ms; }
  .pc-grade > *:nth-child(n+8) { animation-delay: 420ms; }
}
@keyframes pc-descer   { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pc-aparecer { from { opacity: 0; } }
@keyframes pc-entrada  { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Indicador de requisição em voo do HTMX. */
.htmx-indicator { opacity: 0; transition: opacity var(--duracao) var(--curva); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---- transição de vista nas trocas de fragmento -----------------------
   Item 8 do dossiê. Sutil de propósito: 150ms e só opacidade, porque o que
   se quer dizer é "a mesma tela mudou", não "chegou outra tela". Movimento
   maior competiria com a leitura do número, que é o assunto.
   --------------------------------------------------------------------- */
@media screen and (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 150ms;
    animation-timing-function: var(--curva, ease);
  }
}

/* Quem pede menos movimento não recebe transição nenhuma. A troca continua
   acontecendo; o que some é a animação dela. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}