@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;800;900&display=swap');
/* Fibrasa — generated from tokens.json */
:root, [data-theme="claro"] {
  --verde-lettering: #185226; /* Cor oficial do lettering. Pantone 357 C · CMYK 88/40/100/42. Títulos e texto sobre branco (9,2:1) e cinza-claro (7,9:1); fundo da versão principal negativa. */
  --verde-a: #56ae31; /* Degradê do ícone. Pantone 361 C · CMYK 69/1/100/0. Só preenchimentos, grafismos e séries de gráfico; NUNCA texto sobre branco (2,8:1). */
  --verde-b: #6eb869; /* Degradê do ícone. Pantone 360 C · CMYK 62/1/73/0. Preenchimentos, grafismos e séries de gráfico. Não usar como texto sobre branco (2,4:1). */
  --verde-c: #137845; /* Degradê do ícone. Pantone 7732 C · CMYK 87/28/86/14. Texto sobre branco (5,5:1) e cinza-claro (4,7:1); hover da ação primária; cor de sucesso. */
  --azul-a: #33b5e9; /* Degradê do ícone. Pantone 298 C · CMYK 69/7/0/0. Preenchimentos, grafismos e séries de gráfico; nunca texto sobre branco (2,4:1). */
  --azul-b: #3bbeee; /* Degradê do ícone. Pantone 297 C · CMYK 66/1/0/0. Grafismos e séries de gráfico; texto só ≥24px sobre verde-lettering (4,3:1). Nunca texto sobre branco (2,2:1). */
  --azul-c: #0d6eb5; /* Degradê do ícone. Pantone 285 C · CMYK 87/51/1/0. Links e informação sobre branco (5,4:1) e cinza-claro (4,6:1); anel de foco no tema claro. */
  --branco: #ffffff; /* Fundo principal do guia; lettering da versão negativa. */
  --cinza-claro: #ededed; /* Painéis de fundo do guia (amostrado nas páginas 7–9). Fundo alternativo de seção e de badge no tema claro. */
  --cinza-guia: #878787; /* Cinza do texto corrido do guia (amostrado). 3,6:1 sobre branco: falha AA para texto pequeno. Usar só para contorno de controle (≥3:1) ou texto ≥24px; para texto de apoio use texto-suave. */
  --preto-marca: #1d1d1b; /* Fundo da versão restrita negativa e tinta da versão monocromática (amostrado). Texto principal sobre branco (16,9:1). */
  --superficie: #ffffff; /* Fundo da página. Institucional = verde-lettering, como nas capas e versão negativa do guia. */
  --superficie-alt: #ededed; /* Cards, faixas e linhas zebradas sobre superficie. */
  --texto: #1d1d1b; /* Texto principal sobre superficie e superficie-alt (claro 16,9/14,4:1; institucional 9,2/5,5:1). */
  --texto-suave: #5c5c5c; /* Texto de apoio, legendas e metadados sobre superficie e superficie-alt (claro 6,7/5,7:1; institucional 7,9/4,7:1). Adição: o cinza do guia (#878787) não atinge AA. */
  --titulo: #185226; /* Títulos e subtítulos sobre superficie e superficie-alt. */
  --acao: #185226; /* Preenchimento do botão primário. No institucional o botão inverte para branco, como a versão negativa do logo. */
  --acao-hover: #137845; /* Hover/pressionado do botão primário. */
  --sobre-acao: #ffffff; /* Texto e ícone sobre acao e acao-hover (9,2:1 nos dois temas). */
  --link: #0d6eb5; /* Links, sempre sublinhados. No institucional fica branco: azul-b sobre verde dá 4,3:1, abaixo de AA para texto. */
  --borda: #878787; /* Contorno de campos, botão secundário e tabelas. ≥3:1 sobre superficie e superficie-alt nos dois temas (claro 3,6/3,1:1; institucional 7,9/4,7:1). */
  --divisor: #ededed; /* Linhas finas decorativas entre itens. Não carregam significado. */
  --foco: #0d6eb5; /* Anel de foco de 2px, offset 2px, sólido. ≥3:1 sobre superficie e superficie-alt nos dois temas (claro 5,4/4,6:1; institucional 9,2/5,5:1). */
  --fundo-badge: #ededed; /* Fundo do Badge; os quatro status passam 4,5:1 sobre ele nos dois temas. */
  --status-sucesso: var(--verde-c); /* Concluído, dentro do SLA. Sempre com palavra e ícone ✓. Texto sobre fundo-badge, branco e cinza-claro. */
  --status-info: var(--azul-c); /* Em andamento, informativo. Sempre com palavra e ícone i. */
  --status-alerta: #a14d00; /* Adição fora do guia: risco, SLA próximo do limite. 5,9:1 sobre branco. Sempre com palavra e ícone !. */
  --status-erro: #b3261e; /* Adição fora do guia: atrasado, SLA estourado, falha. 6,5:1 sobre branco. Sempre com palavra e ícone ✕ (vermelho e verde-c não se distinguem só pela cor). */
}
[data-theme="institucional"] {
  --superficie: #185226;
  --superficie-alt: #137845;
  --texto: #ffffff;
  --texto-suave: #ededed;
  --titulo: #ffffff;
  --acao: #ffffff;
  --acao-hover: #ededed;
  --sobre-acao: #185226;
  --link: #ffffff;
  --borda: #ededed;
  --divisor: #137845;
  --foco: #ffffff;
  --fundo-badge: #ffffff;
  --status-sucesso: var(--verde-c);
  --status-info: var(--azul-c);
}
:root {
  --espaco-1: 4px; /* Gap entre ícone e texto. */
  --espaco-2: 8px; /* Padding vertical de badge e botão compacto. */
  --espaco-3: 12px; /* Padding de célula de tabela. */
  --espaco-4: 16px; /* Padding horizontal de botão; gutter mínimo em mobile. */
  --espaco-6: 24px; /* Padding de card. */
  --espaco-8: 32px; /* Espaço entre blocos de uma seção. */
  --espaco-12: 48px; /* Espaço entre seções. */
  --espaco-16: 64px; /* Margem de página em desktop e respiro de capas. */
  --raio-sm: 4px; /* Campos e células destacadas. */
  --raio-md: 8px; /* Botões retangulares e cards compactos. */
  --raio-lg: 16px; /* Cards e painéis; ecoa as curvas do símbolo. */
  --raio-xl: 32px; /* Selos e blocos de destaque, como o selo '50 Anos'. */
  --raio-pill: 999px; /* CTA em pílula ('Saiba +'), badges. */
  --font-sans: "Poppins", sans-serif;
  --text-display: 700 48px/56px var(--font-sans); /* Chamadas de capa, hero, painel de TV. Uma por tela. */
  --text-h1: 700 36px/44px var(--font-sans); /* Título da página ou do relatório. */
  --text-h2: 700 28px/36px var(--font-sans); /* Título de seção. */
  --text-h3: 500 22px/30px var(--font-sans); /* Título de card e subseção. */
  --text-valor-kpi: 800 40px/44px var(--font-sans); /* Número principal de um KPI. */
  --text-subtitulo: 500 18px/28px var(--font-sans); /* Linha de apoio sob títulos. */
  --text-corpo: 400 16px/24px var(--font-sans); /* Texto corrido padrão. */
  --text-corpo-pequeno: 400 14px/20px var(--font-sans); /* Tabelas, metadados, texto denso. */
  --text-legenda: 400 12px/16px var(--font-sans); /* Legendas de gráfico e notas de rodapé. Mínimo absoluto de texto. */
  --text-botao: 500 14px/20px var(--font-sans); /* Rótulo de botão e CTA. */
  --text-sobretitulo: 500 12px/16px var(--font-sans); /* Sobretítulo em CAIXA ALTA espaçada, como o 'GUIA DA MARCA' do manual. */
  --text-rotulo: 700 12px/16px var(--font-sans); /* Cabeçalho de coluna de tabela, rótulo de KPI, rótulo de categoria. */
}
.display {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
.valor-kpi {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 800;
  letter-spacing: 0;
}
.subtitulo {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.corpo {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.corpo-pequeno {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.legenda {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.botao {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sobretitulo {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.rotulo {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
}