/* O CSS base do Garimpo: reset, padrão dos elementos e o vocabulário de peças
   que TODA tela usa — painel e site, o mesmo arquivo.
   =========================================================================

   Lê-se de cima para baixo e nessa ordem de propósito:
     1. reset                  (o que o navegador faz e nós não queremos)
     2. elementos              (corpo, título, link, campo)
     3. peças                  (botão, cartão, selo, tabela, barra, nav, KPI)
     4. movimento              (entrada, hover, o que indica trabalho)
     5. @media celular         (gaveta, uma coluna, tabela vira cartão, 44px)
     6. @media movimento reduzido

   Por que essa ordem importa, e não é gosto: regra base escrita DEPOIS de uma
   `@media` sobrescreve a do celular na mesma especificidade — foi assim que o
   botão ☰ sumiu num painel da casa. Base primeiro, `@media` no fim, sempre.

   Nenhuma cor, duração ou curva literal aqui dentro: tudo sai de
   `tokens.css`. Há teste varrendo e falhando se aparecer. */

/* ------------------------------------------------------------- 1. reset */

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

/* O atributo `hidden` TEM de ganhar do `display` que a gente declara.
   A folha do próprio navegador já esconde o que tem esse atributo, mas com a
   especificidade de um atributo — a mesma de uma classe. Como a nossa folha vem
   depois, qualquer `display: flex` numa classe APAGA aquilo, calado. Foi um
   print da etapa 8 que pegou: o recado de "senha trocada" aparecia junto do
   formulário que ele deveria substituir. O `!important` está aqui porque é a
   única forma de a regra valer sem depender da ordem em que o CSS cresce.
   (O seletor não é repetido neste comentário de propósito: o teste que cobra
   esta regra procura o seletor no arquivo, e acharia o comentário primeiro.) */
[hidden] {
  display: none !important;
}

html,
body,
h1,
h2,
h3,
p,
figure,
ul,
ol,
dl,
dd,
fieldset {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botão e campo NÃO herdam a fonte do corpo. Sem esta linha, o botão sai
   desenhado na fonte do sistema e a conferência de tela acusa — já aconteceu
   numa página de prova da casa. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* -------------------------------------------------------- 2. elementos */

html {
  scroll-behavior: smooth;
  /* Sem isto, o navegador escolhe tema claro para barra de rolagem e campo. */
  color-scheme: dark;
}

body {
  background: var(--color-void);
  color: var(--color-mist);
  font-family: var(--font-inter-variable);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-400);
  line-height: 1.5;
  letter-spacing: var(--tracking-ui);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A escala do painel. Três degraus que ninguém confunde: o miúdo de rótulo
   (11–12), o corpo (13), o título (20) e o número que importa (32). */
h1 {
  color: var(--color-paper);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-510);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

h2 {
  color: var(--color-paper);
  font-size: var(--text-14);
  font-weight: var(--font-weight-510);
  line-height: 1.4;
  letter-spacing: var(--tracking-ui);
}

h3 {
  color: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-510);
  line-height: 1.4;
}

p {
  max-width: 68ch;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-control);
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-small);
}

/* Rótulo de campo, cabeçalho de tabela, metadado. SEM caixa alta: rótulo em
   CAIXA ALTA espaçada em cima de cada título é reprovado na hora.
   O cinza `--color-ash` está no tokens.css porque veio inteiro da referência,
   mas NÃO desenha texto nosso: medido, ele dá 3,45:1 contra a tela e reprova
   em texto. Todo metadado usa a névoa `--color-fog`, que dá 6,13:1. O número
   e a conta estão em docs/PLANO-VISUAL.md. */
.rotulo {
  display: block;
  color: var(--color-fog);
  font-size: var(--text-12);
  font-weight: var(--font-weight-510);
  letter-spacing: 0;
}

.meta {
  color: var(--color-fog);
  font-size: var(--text-12);
  letter-spacing: 0;
}

.eixo {
  color: var(--color-fog);
  font-size: var(--text-11);
  letter-spacing: 0;
}

/* Código de coleta, protocolo de remoção, atalho. A mono é de identificador
   técnico — nunca de título e nunca de texto de venda. */
.codigo {
  font-family: var(--font-berkeley-mono);
  font-size: var(--text-12);
  font-weight: var(--font-weight-400);
  letter-spacing: -0.013em;
  color: var(--color-fog);
  font-feature-settings: 'cv01' on, 'ss03' on;
}

/* ------------------------------------------------------------ 3. peças */

/* Superfícies. A profundidade vem da troca de fundo e de borda fina — nunca de
   sombra cinza embaixo de tudo. */
.tela {
  background: var(--surface-void);
}

.cartao {
  background: var(--surface-carbon);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-hairline-inset);
  padding: var(--card-padding);
}

.cartao--sutil {
  background: var(--color-veil-2);
  border-radius: var(--radius-buttons);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-8);
}

.cartao--elevado {
  background: var(--surface-obsidian);
  border: 1px solid var(--color-graphite);
  box-shadow: var(--shadow-float);
}

/* A ÚNICA peça dourada de uma tela: o cartão do plano ativo. Borda e véu, não
   fundo cheio — fundo dourado grande vira enfeite, e o acento deixa de
   apontar para algo. */
.cartao--ativo {
  border: 1px solid var(--color-garimpo-ouro);
  background:
    linear-gradient(var(--color-garimpo-ouro-veu), var(--color-garimpo-ouro-veu)),
    var(--surface-carbon);
  box-shadow: none;
}

/* Botões. O de maior contraste é a pílula branca — é assim na referência, e o
   dourado NÃO é botão: ele é indicador. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-8) var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-510);
  letter-spacing: var(--tracking-ui);
  color: var(--color-mist);
  background: var(--color-veil-5);
  transition:
    background-color var(--dur-control) var(--ease-control),
    color var(--dur-control) var(--ease-control),
    border-color var(--dur-control) var(--ease-control);
}

.botao:hover {
  background: var(--color-veil-8);
  color: var(--color-hover-text);
}

.botao--principal {
  background: var(--color-paper);
  color: var(--color-void);
  border-radius: var(--radius-pills);
  padding: var(--spacing-8) var(--spacing-16);
  box-shadow: var(--shadow-cta-stack);
}

.botao--principal:hover {
  background: var(--color-bone);
  color: var(--color-void);
}

.botao--fantasma {
  background: transparent;
  border: 1px solid var(--color-graphite);
}

.botao--fantasma:hover {
  background: var(--color-veil-3);
  border-color: var(--color-smoke);
}

.botao[disabled] {
  color: var(--color-fog);
  background: var(--color-veil-2);
  cursor: not-allowed;
}

/* Campo. No foco a borda clareia — não há anel colorido dentro do formulário,
   que é o que a referência faz. */
.campo {
  width: 100%;
  background: var(--color-veil-2);
  border: 1px solid var(--color-veil-8);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-12) var(--spacing-14);
  font-size: var(--text-14);
  color: var(--color-mist);
  transition: border-color var(--dur-control) var(--ease-control);
}

/* Campo e seletor com a MESMA altura, e não "quase a mesma".
   O reset manda `font: inherit` nos controles, e o atalho `font` carrega a
   entrelinha do corpo junto: o <input> nasce com 47px e o <select>, que ignora
   entrelinha, com 45. Numa linha que alinha pelo pé — Cidade e UF, na coleta
   nova — a diferença vira um degrau de 2px entre os dois rótulos. Não quebra
   nada, e faz a tela parecer malfeita. Altura escrita nos dois acaba com o
   degrau sem depender da métrica da fonte, e continua acima dos 44px de dedo. */
input.campo,
select.campo {
  height: 46px;
}

.campo::placeholder {
  color: var(--color-fog);
}

.campo:focus {
  border-color: var(--color-mist);
  outline: none;
}

.campo:focus-visible {
  outline: none;
}

/* Selo de estado. A cor diz o estado; o texto diz o estado também, porque cor
   sozinha não é informação para quem não distingue cor. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  background: var(--color-veil-5);
  color: var(--color-fog);
  border-radius: var(--radius-badges);
  padding: var(--spacing-2) var(--spacing-6);
  font-size: var(--text-12);
  letter-spacing: 0;
}

.selo--pronta {
  color: var(--color-pulse-green);
}

.selo--parcial {
  color: var(--color-series-amber);
}

.selo--falhou {
  color: var(--color-delta-red);
}

/* Pílula de cidade escolhida, filtro, aba. */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  background: var(--color-veil-5);
  color: var(--color-mist);
  border-radius: var(--radius-pills);
  padding: var(--spacing-4) var(--spacing-12);
  font-size: var(--text-12);
  letter-spacing: 0;
  transition: background-color var(--dur-control) var(--ease-control);
}

.pilula:hover {
  background: var(--color-veil-8);
}

.pilula--ativa {
  background: var(--color-veil-8);
  color: var(--color-paper);
}

/* Tabela densa. Cabeçalho sem caixa alta, divisor de 1px, número tabular. */
.tabela {
  font-size: var(--text-caption);
}

.tabela th {
  text-align: left;
  color: var(--color-fog);
  font-size: var(--text-12);
  font-weight: var(--font-weight-510);
  letter-spacing: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border-bottom: 1px solid var(--color-graphite);
}

.tabela td {
  color: var(--color-mist);
  padding: var(--spacing-10) var(--spacing-12);
  border-bottom: 1px solid var(--color-graphite);
  height: 40px;
}

.tabela tbody tr {
  transition: background-color var(--dur-control) var(--ease-control);
}

.tabela tbody tr:hover {
  background: var(--color-veil-3);
}

.numero {
  font-variant-numeric: tabular-nums;
}

/* Barra de uso do plano. Cresce ao entrar, uma vez só. */
.barra {
  height: var(--spacing-6);
  background: var(--color-veil-5);
  border-radius: var(--radius-pills);
  overflow: hidden;
}

.barra__cheio {
  /* `display: block` é o que faz esta peça EXISTIR. Ela é desenhada como um
     `<span>` dentro de `.barra`, e em elemento inline o navegador ignora
     `width` e `height`: a barra sumia inteira, deixando só o trilho cinza. O
     print da e13 pegou — e o defeito não aparece em teste de CSS nenhum,
     porque a regra está toda lá, só não vale para o elemento. */
  display: block;
  height: 100%;
  width: var(--parte, 0%);
  background: var(--color-mist);
  border-radius: var(--radius-pills);
  transform-origin: 0 50%;
  animation: barra-cresce var(--dur-dot-in) var(--ease-control) both;
}

.barra__cheio--estourou {
  background: var(--color-delta-red);
}

@keyframes barra-cresce {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Número de destaque do painel. 32px é o teto: manchete gigante em painel é
   reprovado. */
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.kpi__numero {
  color: var(--color-paper);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-400);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-variant-numeric: tabular-nums;
}

.kpi__delta--sobe {
  color: var(--color-pulse-green);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

.kpi__delta--desce {
  color: var(--color-delta-red);
  font-size: var(--text-12);
  font-variant-numeric: tabular-nums;
}

/* Nav lateral: item de 28px, 232px de largura — medidos no mock do produto. */
.nav-lateral {
  width: var(--sidebar-width);
  background: var(--surface-carbon);
  border-right: 1px solid var(--color-graphite);
  padding: var(--spacing-8);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 28px;
  padding: 0 var(--spacing-7);
  border-radius: var(--radius-8);
  color: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-510);
  transition:
    background-color var(--dur-hover) var(--ease-control),
    color var(--dur-hover) var(--ease-control);
}

.nav-item:hover {
  background: var(--color-veil-3);
  color: var(--color-hover-text);
}

.nav-item--ativo {
  background: var(--color-veil-4);
  color: var(--color-paper);
}

/* A gaveta de celular. A lateral NÃO vira lista comprida no topo da tela nem
   barra que rola de lado: no celular ela sai da tela e volta pelo ☰, com o
   fundo escurecido atrás. Os números são os medidos na referência: 232px de
   largura, 180ms de deslize, 175ms de fade do fundo.

   O botão ☰ fica escondido no desktop por uma regra ESCRITA DEPOIS da do
   `.botao` — regra genérica escrita depois, com a mesma especificidade, ganha,
   e foi assim que um ☰ já apareceu no desktop de um painel da casa. */
.topo-celular {
  display: none;
}

.gaveta__fundo {
  display: none;
}

.botao.abrir-gaveta {
  display: none;
}

/* ------------------------------------------------------- 4. movimento */

/* A CENA ENTRANDO, uma vez por carga.

   O CONTÊINER é quem sabe quantas peças a tela tem — ele declara `--itens` ao
   lado delas, no HTML —, e o degrau sai do TEMPO TOTAL medido na referência
   dividido por esse número. É a regra que a referência ensina com números: ela
   mediu 326ms distribuídos em 164 pontos, o que dá 2ms por ponto; copiar o
   degrau de 2ms em cinco blocos daria cascata invisível. Copia-se o total.

   O `clamp` prende o degrau na faixa de 20–100ms da régua: abaixo de 20ms
   ninguém vê a ordem, acima de 100ms a tela parece devagar.

   POR QUE `--passo-da-cena` É DECLARADO AQUI E NÃO NO `:root`: o valor de uma
   propriedade personalizada é resolvido no elemento onde ela é DECLARADA, e
   herdado já resolvido. Declarada no `:root`, ela se resolveria com o
   `--itens` do `:root` e o número de itens de cada tela não entraria na conta —
   medido num Chromium, não suposto: o degrau saía 100ms em toda tela. */
.cena {
  --passo-da-cena: clamp(
    var(--passo-minimo),
    calc(var(--stagger-cena) / var(--itens, 1)),
    var(--passo-maximo)
  );
}

.surge {
  animation: surge var(--dur-dot-in) var(--ease-control) calc(var(--i, 0) * var(--passo-da-cena, 0ms)) both;
}

@keyframes surge {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* O que indica trabalho em andamento. Tudo daqui para baixo é infinito, e
   TUDO para no modo reduzido — indicador contínuo também cansa. */

/* O ponto dourado de "coletando agora". É o único dourado do painel. */
.ponto-ao-vivo {
  display: inline-block;
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--radius-pills);
  background: var(--color-garimpo-ouro);
  animation: pulso var(--dur-pulso) var(--ease-control) infinite;
}

@keyframes pulso {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Selo "coletando": varredura de brilho atravessando o selo, 2s, linear. */
.selo-trabalhando {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  color: var(--color-garimpo-ouro);
  background: var(--color-garimpo-ouro-veu);
  border-radius: var(--radius-badges);
  padding: var(--spacing-2) var(--spacing-8);
  font-size: var(--text-12);
  letter-spacing: 0;
  background-image: linear-gradient(90deg, transparent, var(--color-veil-8), transparent);
  background-size: 120px 100%;
  background-repeat: no-repeat;
  animation: varredura var(--dur-varredura) var(--ease-linear) infinite;
}

@keyframes varredura {
  from {
    background-position-x: -120px;
  }
  to {
    background-position-x: 120px;
  }
}

/* Esqueleto de linha enquanto a lista carrega. */
.esqueleto {
  height: var(--spacing-12);
  border-radius: var(--radius-badges);
  background-image: linear-gradient(90deg, var(--color-veil-2), var(--color-veil-8), var(--color-veil-2));
  background-size: 240px 100%;
  animation: varredura var(--dur-varredura) var(--ease-linear) infinite;
}

/* ------------------------------------------------------- 5. celular */

@media (max-width: 640px) {
  body {
    font-size: var(--text-14);
  }

  .cartao {
    padding: var(--spacing-16);
  }

  /* Alvo de toque: 44px é o mínimo de dedo. No desktop o botão continua
     compacto, que é a densidade da referência. */
  .botao,
  .campo,
  .nav-item,
  .pilula {
    min-height: 44px;
  }

  /* A lateral vira gaveta: sai pela esquerda e volta pelo ☰. */
  .topo-celular {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface-carbon);
    border-bottom: 1px solid var(--color-graphite);
    padding: var(--spacing-8) var(--spacing-16);
  }

  .botao.abrir-gaveta {
    display: inline-flex;
  }

  .gaveta {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: var(--sidebar-width);
    max-width: 86vw;
    overflow-y: auto;
    border-right: 1px solid var(--color-graphite);
    transform: translateX(-100%);
    transition: transform var(--dur-menu) var(--ease-scene);
  }

  .gaveta__fundo {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: var(--color-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-overlay) var(--ease-control);
  }

  body.gaveta-aberta .gaveta {
    transform: none;
  }

  body.gaveta-aberta .gaveta__fundo {
    opacity: 1;
    pointer-events: auto;
  }

  body.gaveta-aberta {
    overflow: hidden;
  }

  .kpi__numero {
    font-size: var(--text-subheading);
    letter-spacing: var(--tracking-subheading);
  }

  /* Tabela vira cartão: cada linha empilha TODOS os campos, com o rótulo da
     coluna à esquerda e o valor à direita. Sem rolagem lateral escondendo
     justamente a coluna que importa. */
  .tabela thead {
    display: none;
  }

  .tabela tbody tr {
    display: block;
    background: var(--surface-carbon);
    border: 1px solid var(--color-graphite);
    border-radius: var(--radius-9);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-8);
  }

  .tabela td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-12);
    height: auto;
    padding: var(--spacing-4) var(--spacing-4);
    border-bottom: 0;
    text-align: right;
  }

  /* O elo de ação do cartão — o "ver a ficha" de cada contato — é o único alvo
     de dedo da linha, e nasce com a altura da letra: 20px. Recheio vertical num
     elemento EM LINHA não muda a caixa de linha, então o cartão continua com a
     mesma altura e a área de toque passa a 44px. As linhas vizinhas do cartão
     não têm elo nenhum, então nada se sobrepõe a um alvo de verdade. */
  .tabela td a {
    padding-block: var(--spacing-14);
  }

  .tabela td::before {
    content: attr(data-label);
    color: var(--color-fog);
    font-size: var(--text-12);
    letter-spacing: 0;
    text-align: left;
    flex: none;
  }
}

/* --------------------------------------------- 6. movimento reduzido */

/* Os seletores aqui são OS DESTA TELA. Copiar o bloco da referência cru não
   desliga nada: as classes dela (.hero-atmosphere e companhia) não existem
   aqui, e o print sai com animação rodando. Há teste conferindo que cada
   classe citada neste bloco existe de verdade. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Entradas acabam na hora, com o estado final já desenhado. */
  .surge,
  .barra__cheio {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Nada de infinito: o ponto ao vivo fica aceso, o selo e o esqueleto param
     de varrer. O estado continua legível — é o texto que informa, não o
     movimento. */
  .ponto-ao-vivo,
  .selo-trabalhando,
  .esqueleto {
    animation: none;
    opacity: 1;
  }

  /* A gaveta aparece sem deslizar: o fundo ainda escurece, em fade curto. */
  .gaveta {
    transition: none;
  }

  .gaveta__fundo {
    transition-duration: var(--dur-reduzido);
  }

  /* Hover continua respondendo, só sem rampa. */
  .botao,
  .pilula,
  .nav-item,
  .campo,
  .tabela tbody tr,
  a {
    transition-duration: 0ms;
  }
}