/* Monitor de Endividamento — identidade visual
   Azul #164194 | Ciano #008BD2 | Cinza #595959 | Arial
   Os tokens abaixo são a única fonte de cor do projeto. Não introduzir hex solto no JS. */

:root {
  --azul:        #164194;
  --ciano:       #008BD2;
  --cinza:       #595959;
  --cinza-claro: #D9D9D9;
  --cinza-fundo: #F5F6F8;
  --alerta:          #C0392B;   /* reservado a avisos de dado desatualizado */
  --fundo:           #FFFFFF;

  /* Paleta de séries. Ordem de uso obrigatória — Brasil sempre na primeira posição.

     As duas primeiras são os azuis institucionais. Da terceira em diante a paleta sai
     da família azul, por decisão de 30/08/2026: com três e quatro séries no mesmo
     gráfico, as variações de azul ficavam indistinguíveis entre si e na impressão em
     preto e branco. Verde-petróleo e ocre são escuros o bastante para manter contraste
     com o fundo branco. Vermelho segue reservado a alertas. */
  --serie-1: #164194;   /* azul institucional */
  --serie-2: #008BD2;   /* ciano institucional */
  --serie-3: #00785F;   /* verde-petróleo */
  --serie-4: #C77F00;   /* ocre */
  --serie-5: #595959;   /* cinza */

  --escala-1: 0.75rem;   /* rótulos, fonte, data de atualização */
  --escala-2: 0.875rem;  /* subtítulo de gráfico */
  --escala-3: 1rem;      /* corpo */
  --escala-4: 1.25rem;   /* título de gráfico */
  --escala-5: 1.75rem;   /* título de aba */

  --gap: 1.5rem;
  --largura-max: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--cinza);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--escala-3);
  line-height: 1.5;
}

h1, h2, h3 { color: var(--azul); font-weight: bold; margin: 0 0 0.5rem; }
h1 { font-size: var(--escala-5); }
h2 { font-size: var(--escala-4); }

.conteudo { max-width: var(--largura-max); margin: 0 auto; padding: var(--gap); }

.cabecalho { padding-bottom: var(--gap); }
.cabecalho__linha { max-width: 60ch; margin: 0 0 0.75rem; }
.cabecalho__meta { font-size: var(--escala-1); margin: 0 0 0.75rem; }

/* ------------------------------------------------------------ navegação por abas */

/* Barra de abas no lugar da pilha de blocos: uma aba de cada vez, trocada por app.js
   sem recarregar a página. A borda inferior do container e a borda inferior do botão
   ativo (mesma cor, mesma espessura, ligadas pela margem negativa) formam uma linha
   contínua só interrompida onde a aba ativa "gruda" no conteúdo abaixo dela. */
.abas-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 3px solid var(--azul);
  margin-bottom: var(--gap);
}
.abas-nav__botao {
  font-family: inherit;
  font-size: var(--escala-3);
  font-weight: bold;
  background: var(--fundo);
  color: var(--cinza);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.abas-nav__botao:hover { color: var(--azul); }
.abas-nav__botao:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.abas-nav__botao--ativo { color: var(--azul); border-bottom-color: var(--azul); }

.aba-painel[hidden] { display: none; }
.aba__subtitulo { max-width: 70ch; margin: 0 0 var(--gap); }

/* ------------------------------------------------------------ filtro de segmento */

/* Família / Empresas / Ambos, por aba. Mesma linguagem visual do botão `.baixar`
   (borda azul, fundo branco em repouso) para não introduzir um terceiro estilo de
   botão na página — só troca o que marca o estado: aqui é seleção (fundo cheio),
   não hover. */
.filtro-segmento {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--gap);
}
.filtro-segmento__botao {
  font-family: inherit;
  font-size: var(--escala-1);
  background: var(--fundo);
  color: var(--azul);
  border: 1px solid var(--azul);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.filtro-segmento__botao:hover { background: var(--cinza-fundo); }
.filtro-segmento__botao:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.filtro-segmento__botao--ativo { background: var(--azul); color: var(--fundo); }
.filtro-segmento__botao--ativo:hover { background: var(--azul); }

.aba__vazio { font-size: var(--escala-2); color: var(--cinza); font-style: italic; margin-bottom: var(--gap); }

/* ------------------------------------------------------------ grade de gráficos */

/* Dois gráficos por linha. Os cartões esticam até a altura da linha, de modo que as
   bordas dos dois vizinhos fiquem alinhadas mesmo com notas de tamanhos diferentes. */
/* `row-gap: 0` na grade, e não no cartão: o espaçamento entre as faixas do `subgrid`
   abaixo é o da grade da aba, e ele apareceria entre título, subtítulo e gráfico
   dentro de cada cartão. Quem separa uma linha de cartões da seguinte é a margem do
   próprio cartão. */
.aba__graficos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap);
  row-gap: 0;
}

/* Gráfico sozinho na última linha ocupa as duas colunas: meia linha vazia ao lado de um
   cartão fica pior do que o cartão inteiro. Não é `:nth-child(odd):last-child` porque o
   filtro de segmento pode ocultar cartões no meio da grade, e os seletores de posição
   do CSS contam os irmãos ocultos também — quem decide é app.js, sobre os cartões
   visíveis, e marca esta classe. */
.grafico--linha-inteira { grid-column: 1 / -1; }

.grafico { border: 1px solid var(--cinza-claro); padding: var(--gap); margin-bottom: var(--gap); display: flex; flex-direction: column; }
.grafico[hidden] { display: none; }

/* Alinhamento horizontal entre os dois cartões de uma mesma linha. Sem ele, um título
   que quebra em duas linhas — ou uma nota presente em só um dos lados — desloca a área
   do gráfico do vizinho, e as duas curvas ficam em alturas diferentes.

   Com `subgrid`, os cinco elementos do cartão (título, subtítulo, vão da nota, gráfico
   e meta) passam a compartilhar as mesmas faixas horizontais: cada faixa tem a altura
   do maior dos dois cartões.

   O número de filhos do cartão é fixo — por isso o vão da nota existe mesmo vazio. Em
   navegador sem `subgrid` vale o empilhamento em flex acima, sem o alinhamento. */
@supports (grid-template-rows: subgrid) {
  .grafico {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }
}

/* Vazio, o vão não ocupa altura própria: quem a define é a nota do cartão vizinho. */
.grafico__nota:not(:empty) { margin-bottom: var(--gap); }
.grafico__area { width: 100%; height: 260px; }
.grafico--linha-inteira .grafico__area { height: 320px; }
.grafico__subtitulo { font-size: var(--escala-2); margin: 0 0 var(--gap); }

/* `margin-top: auto` empurra a meta para o rodapé do cartão: nos dois vizinhos de uma
   mesma linha, os botões de download ficam na mesma altura. */
.grafico__meta {
  font-size: var(--escala-1);
  color: var(--cinza);
  margin-top: auto;
  padding-top: 0.75rem;
}
.grafico__meta > div { margin-bottom: 0.25rem; }

/* Nota metodológica: obrigatória onde a abrangência da fonte muda a leitura do gráfico. */
.nota {
  font-size: var(--escala-1);
  background: var(--cinza-fundo);
  border-left: 3px solid var(--ciano);
  padding: 0.6rem 0.9rem;
}
.nota--aba { max-width: 80ch; margin: 0 0 var(--gap); }
.nota--grafico { max-width: 80ch; margin: 0; }

.metodologia {
  border-top: 3px solid var(--azul);
  padding-top: var(--gap);
  margin-bottom: 3rem;
}
.metodologia h2 { font-size: var(--escala-5); }
.metodologia h3 { font-size: var(--escala-4); margin-top: var(--gap); }
.metodologia h4 { font-size: var(--escala-3); margin-top: var(--gap); }
.metodologia__p { max-width: 70ch; }

/* Código de série e caminho de arquivo dentro do texto corrido. */
code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9em;
  background: var(--cinza-fundo);
  padding: 0 0.2em;
}

/* Botões e links de download de um mesmo gráfico. */
.grafico__acoes {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.75rem;
}

.carregando { font-size: var(--escala-1); }

.baixar {
  display: inline-block; text-decoration: none;
  font-family: inherit; font-size: var(--escala-1);
  background: var(--fundo); color: var(--azul);
  border: 1px solid var(--azul); padding: 0.4rem 0.9rem; cursor: pointer;
}
.baixar:hover { background: var(--azul); color: var(--fundo); }
.baixar:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

.aviso-desatualizado { color: var(--alerta); font-size: var(--escala-1); font-weight: bold; }

.rodape {
  border-top: 1px solid var(--cinza-claro);
  margin-top: 3rem; padding-top: var(--gap);
  font-size: var(--escala-1);
}
/* Crédito discreto: mesma escala do rodapé, sem destaque de cor ou peso. */
.rodape__credito { margin-top: var(--gap); }

/* Abaixo de 900px a metade da largura não comporta eixo, legenda e curva legíveis:
   volta a uma coluna, com a altura de antes. */
@media (max-width: 900px) {
  .aba__graficos { grid-template-columns: 1fr; }
  .grafico__area,
  .grafico--linha-inteira .grafico__area { height: 320px; }
}

@media (max-width: 640px) {
  .grafico__area,
  .grafico--linha-inteira .grafico__area { height: 280px; }
  :root { --gap: 1rem; }
  .abas-nav__botao { font-size: var(--escala-3); padding: 0.5rem 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}