/* Tokens derivados de docs/DESIGN.md. Só pilha system-ui, nenhuma fonte/recurso externo. */

:root {
  color-scheme: light dark;

  /* cor — papel semântico, variante clara definida aqui */
  --cor-fundo: #f5f5f7;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #ececef;
  --cor-texto-primario: #1c1c1e;
  --cor-texto-secundario: #6b6b70;
  --cor-borda: #d8d8dc;
  --cor-sucesso: #1e7e34;
  --cor-atencao: #8a5300;
  --cor-erro: #b3261e;
  --cor-destaque: #0a66d6;
  --cor-destaque-texto: #ffffff;

  /* tipografia — escala por papel, só system-ui */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-legenda: 0.75rem;
  --texto-corpo: 0.9375rem;
  --texto-destaque: 1.125rem;
  --texto-titulo: 1.5rem;

  /* espaçamento — múltiplos de 4px */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-12: 48px;

  /* raio */
  --raio-pequeno: 6px;
  --raio-medio: 12px;
  --raio-grande: 20px;

  /* movimento — tokens de duração */
  --dur-rapido: 140ms;
  --dur-padrao: 220ms;
  --dur-lento: 380ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* layout */
  --largura-conteudo: 1200px;
  --altura-nav-inferior: 64px;
  --largura-nav-lateral: 240px;
  --alvo-toque-minimo: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #000000;
    --cor-superficie: #1c1c1e;
    --cor-superficie-2: #2c2c2e;
    --cor-texto-primario: #f5f5f7;
    --cor-texto-secundario: #a1a1a6;
    --cor-borda: #3a3a3c;
    --cor-sucesso: #4cd964;
    --cor-atencao: #ffb84d;
    --cor-erro: #ff6961;
    --cor-destaque: #4da3ff;
    --cor-destaque-texto: #00142b;
  }
}

/* prefers-reduced-motion: zera as durações, nunca remove a transição (evita "pulo" de layout) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rapido: 1ms;
    --dur-padrao: 1ms;
    --dur-lento: 1ms;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fonte);
  font-size: var(--texto-corpo);
  color: var(--cor-texto-primario);
  background: var(--cor-fundo);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cor-destaque);
}

:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

button {
  font: inherit;
  color: inherit;
}

/* --- selo de dados fictícios --- */
.selo-ficticio {
  position: fixed;
  top: var(--esp-2);
  right: var(--esp-2);
  z-index: 50;
  background: var(--cor-atencao);
  color: #1c1c1e;
  font-size: var(--texto-legenda);
  font-weight: 600;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-pequeno);
  pointer-events: none;
}

/* --- layout geral: nav + conteúdo --- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-corpo {
  display: flex;
  flex: 1;
  min-height: 0;
}

.vista {
  flex: 1;
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-4);
  padding-bottom: calc(var(--altura-nav-inferior) + var(--esp-4));
}

@media (min-width: 768px) {
  .vista {
    padding: var(--esp-6);
    padding-bottom: var(--esp-6);
  }
}

/* --- navegação adaptativa: barra inferior no celular, lateral no desktop --- */
.nav {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--altura-nav-inferior);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  z-index: 40;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: var(--alvo-toque-minimo);
  min-height: var(--alvo-toque-minimo);
  color: var(--cor-texto-secundario);
  text-decoration: none;
  font-size: var(--texto-legenda);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-item[aria-current="page"] {
  color: var(--cor-destaque);
  font-weight: 600;
}

.nav-item-icone {
  width: 22px;
  height: 22px;
}

@media (min-width: 768px) {
  .app-corpo {
    flex-direction: row;
  }

  .nav {
    position: static;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: var(--largura-nav-lateral);
    height: auto;
    border-top: none;
    border-right: 1px solid var(--cor-borda);
    padding: var(--esp-4) var(--esp-2);
    gap: var(--esp-1);
  }

  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--raio-medio);
    font-size: var(--texto-corpo);
  }

  .nav-item[aria-current="page"] {
    background: var(--cor-superficie-2);
  }
}

/* --- transição de troca de tela: animação CSS, não bloqueia o conteúdo ---
   O conteúdo é sempre renderizado de forma síncrona (ver app.js); esta classe só
   adiciona um efeito de entrada decorativo. Se a aba estiver em segundo plano e o
   navegador atrasar a animação, o conteúdo já está visível de qualquer forma — nunca
   depende de requestAnimationFrame para ficar visível. */
.vista.animar-entrada {
  animation: vista-entrada var(--dur-padrao) var(--curva);
}

@keyframes vista-entrada {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vista.animar-entrada {
    animation: none;
  }
}

/* --- cartões e grid de métricas --- */
.grade-contas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

@media (min-width: 1024px) {
  .grade-contas {
    grid-template-columns: 1fr 1fr;
  }
}

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: var(--esp-4);
}

.cartao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.cartao-titulo {
  font-size: var(--texto-destaque);
  font-weight: 600;
  margin: 0;
}

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
}

@media (min-width: 390px) {
  .grade-metricas {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metrica {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.metrica-legenda {
  font-size: var(--texto-legenda);
  color: var(--cor-texto-secundario);
  overflow-wrap: anywhere;
}

.metrica-valor {
  font-size: var(--texto-destaque);
  font-weight: 700;
}

.metrica-variacao {
  font-size: var(--texto-legenda);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.metrica-variacao[data-sentido="alta"] {
  color: var(--cor-sucesso);
}

.metrica-variacao[data-sentido="baixa"] {
  color: var(--cor-erro);
}

.grafico-caixa {
  position: relative;
  width: 100%;
}

.grafico-caixa[data-altura="compacta"] {
  height: 180px;
}

.grafico-caixa[data-altura="ampla"] {
  height: 260px;
}

@media (min-width: 390px) {
  .grafico-caixa[data-altura="ampla"] {
    height: 320px;
  }
}

/* --- chip de etiqueta --- */
.chip-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-3);
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie-2);
  font-size: var(--texto-legenda);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-rapido) var(--curva), opacity var(--dur-rapido) var(--curva);
}

.chip-etiqueta:active {
  transform: scale(0.96);
}

.chip-etiqueta[data-etiqueta="traduzido"] {
  background: color-mix(in srgb, var(--cor-destaque) 18%, var(--cor-superficie-2));
  color: var(--cor-destaque);
  border-color: transparent;
}

.chip-etiqueta[data-etiqueta="regional"] {
  background: color-mix(in srgb, var(--cor-sucesso) 18%, var(--cor-superficie-2));
  color: var(--cor-sucesso);
  border-color: transparent;
}

.chip-etiqueta[data-etiqueta="sem_classificacao"] {
  color: var(--cor-texto-secundario);
}

/* --- lista de posts --- */
.lista-posts {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-post {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  text-decoration: none;
  color: inherit;
  min-height: var(--alvo-toque-minimo);
  min-width: 0;
}

.item-post-corpo {
  flex: 1;
  min-width: 0;
}

/* --- capa visual do post (bloco de cor + inicial do tipo, sem imagem real) --- */
.capa-post {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--raio-pequeno);
}

.capa-post--pequena {
  width: 44px;
  height: 44px;
  font-size: var(--texto-corpo);
}

.capa-post--grande {
  width: 100%;
  height: 120px;
  font-size: var(--texto-titulo);
  margin-bottom: var(--esp-3);
}

/* --- cartão aninhado dentro de outro cartão (ex.: pares traduzidos em Comparar) ---
   Evita dois cartões com borda um dentro do outro (lia como "cartão quebrado" no teste);
   diferencia por cor de superfície, não por mais uma borda (princípio de elevação do
   DESIGN.md). */
.item-post--aninhado {
  background: var(--cor-superficie-2);
  border-color: transparent;
}

.item-post-legenda {
  font-size: var(--texto-legenda);
  color: var(--cor-texto-secundario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha-post {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.linha-post .item-post {
  flex: 1;
}

/* --- status de saúde: ponto + faixa lateral (nunca só a cor, sempre com texto ao lado) --- */
.saude-titulo-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.saude-status-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.saude-status-ponto[data-status="ok"] {
  background: var(--cor-sucesso);
}

.saude-status-ponto[data-status="atencao"] {
  background: var(--cor-atencao);
}

.saude-status-ponto[data-status="erro"] {
  background: var(--cor-erro);
}

.cartao-saude {
  border-left-width: 4px;
  border-left-style: solid;
}

.cartao-saude[data-status="ok"] {
  border-left-color: var(--cor-sucesso);
}

.cartao-saude[data-status="atencao"] {
  border-left-color: var(--cor-atencao);
}

.cartao-saude[data-status="erro"] {
  border-left-color: var(--cor-erro);
}

.indicador-par-pendente {
  font-size: var(--texto-legenda);
  color: var(--cor-atencao);
  font-weight: 600;
}

/* --- estados: vazio, carregando, erro --- */
.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--esp-2);
  padding: var(--esp-8) var(--esp-4);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio-medio);
}

.estado-titulo {
  font-size: var(--texto-corpo);
  margin: 0;
}

.estado-descricao {
  font-size: var(--texto-legenda);
  color: var(--cor-texto-secundario);
  margin: 0;
  max-width: 32ch;
}

.estado-acao {
  margin-top: var(--esp-2);
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-medio);
  border: 1px solid var(--cor-destaque);
  background: transparent;
  color: var(--cor-destaque);
  font-weight: 600;
  cursor: pointer;
}

.esqueleto {
  background: linear-gradient(
    90deg,
    var(--cor-superficie-2) 25%,
    var(--cor-borda) 37%,
    var(--cor-superficie-2) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--raio-medio);
  opacity: 1;
  animation: esqueleto-pulso 1.6s ease-in-out infinite;
}

@keyframes esqueleto-pulso {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto {
    animation: none;
    opacity: 0.85;
  }
}

/* --- banners de aviso (persistentes, exigem ação) --- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-medio);
  margin-bottom: var(--esp-4);
}

.banner[data-tipo="atencao"] {
  background: color-mix(in srgb, var(--cor-atencao) 16%, var(--cor-superficie));
  border: 1px solid color-mix(in srgb, var(--cor-atencao) 40%, var(--cor-borda));
}

.banner[data-tipo="erro"] {
  background: color-mix(in srgb, var(--cor-erro) 14%, var(--cor-superficie));
  border: 1px solid color-mix(in srgb, var(--cor-erro) 40%, var(--cor-borda));
}

.banner-texto {
  flex: 1;
  margin: 0;
}

/* --- toast (temporário, usado no desfazer de etiqueta) --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--altura-nav-inferior) + var(--esp-3));
  transform: translate(-50%, 0);
  background: var(--cor-texto-primario);
  color: var(--cor-fundo);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-medio);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--texto-legenda);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-padrao) var(--curva);
}

.toast.visivel {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .toast {
    bottom: var(--esp-4);
  }
}

.toast-botao {
  background: none;
  border: none;
  color: var(--cor-destaque);
  font-weight: 700;
  cursor: pointer;
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-2);
}

/* --- painel de desenvolvimento escondido (simulação de estados) --- */
.painel-dev-botao {
  position: fixed;
  right: var(--esp-2);
  bottom: calc(var(--altura-nav-inferior) + var(--esp-2));
  z-index: 70;
  width: var(--alvo-toque-minimo);
  height: var(--alvo-toque-minimo);
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-secundario);
  cursor: pointer;
}

@media (min-width: 768px) {
  .painel-dev-botao {
    bottom: var(--esp-4);
  }
}

.painel-dev {
  position: fixed;
  right: var(--esp-2);
  bottom: calc(var(--altura-nav-inferior) + var(--esp-12));
  z-index: 70;
  width: min(280px, calc(100vw - 2 * var(--esp-2)));
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  padding: var(--esp-3);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.2);
}

.painel-dev[hidden] {
  display: none;
}

.painel-dev-titulo {
  font-size: var(--texto-legenda);
  color: var(--cor-texto-secundario);
  margin: 0 0 var(--esp-2);
}

.painel-dev-opcao {
  display: block;
  width: 100%;
  text-align: left;
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-2);
  border: none;
  background: none;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
}

.painel-dev-opcao[aria-pressed="true"] {
  background: var(--cor-superficie-2);
  font-weight: 600;
}

/* --- controles de período/filtro --- */
.barra-filtros {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-bottom: var(--esp-4);
}

.filtro-chip {
  min-height: var(--alvo-toque-minimo);
  padding: 0 var(--esp-3);
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  cursor: pointer;
  font-size: var(--texto-legenda);
}

.filtro-chip[aria-pressed="true"] {
  background: var(--cor-destaque);
  color: var(--cor-destaque-texto);
  border-color: transparent;
}

.par-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
}

@media (min-width: 768px) {
  .par-lado-a-lado {
    grid-template-columns: 1fr 1fr;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--esp-2);
  top: var(--esp-2);
  background: var(--cor-destaque);
  color: var(--cor-destaque-texto);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-pequeno);
  z-index: 100;
  transform: translateY(-150%);
  transition: transform var(--dur-rapido) var(--curva);
}

.pular-para-conteudo:focus-visible {
  transform: translateY(0);
}