@charset "UTF-8";

/* --------- Variáveis globais (tema escuro permanente; mantive a estrutura original e alterei o mínimo) --------- */
:root {
  /* cores originais (mantive nomes) ajustadas para tema escuro permanente */
  --preto: #ececec;        /* usado como cor de texto em tema escuro */
  --branco: #303030;      /* usado como fundo em tema escuro (mais suave que #000) */
  --sombra-principal: #242424;
  --sombra-secundaria: #3c3c3c;
  --borda-preta: #FFFFFF50;
  --marcado: rgb(127 195 255);
  /* Tipografia */
  --tipo-principal: helvetica, arial, sans-serif;
}

/* -- Removi o bloco prefers-color-scheme para forçar tema escuro sempre -- */

/* --------- Rotativa / slideshow (mantive original) --------- */
#imagem-rotativa {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}
#imagem-rotativa img {
  width: 100%;
  height: auto;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#imagem-rotativa img.active {
  opacity: 1;
}

/* --------- Reset e base (mantidas o máximo possível) --------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

img, picture, video, iframe, figure { max-width: 100%; width: 100%; display: block; object-fit: cover; object-position: center center; }

a { display: block; }
p a { display: inline; }
li { list-style-type: none; }

html { scroll-behavior: smooth; }

h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em { font-size: 1em; font-weight: inherit; font-style: inherit; text-decoration: none; color: inherit; }

blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; }

::-moz-selection { background-color: var(--preto); color: var(--branco); }
::selection { background-color: var(--preto); color: var(--branco); }

/* Classe amarela original preservada */
.amarelo-link a { color: yellow; }
.amarelo-classif { color: yellow; /* Define a cor do texto como amarelo para botões de classificados */ }

form, input, textarea, select, button, label { font-family: inherit; font-size: inherit; hyphens: auto; background-color: transparent; display: block; color: inherit; appearance: none; }

table, tr, td { border-collapse: collapse; border-spacing: 0; }

svg { width: 100%; display: block; fill: currentcolor; }

/* --------- Layout base (mantive conteúdo original, apenas forcei cores para escuro onde havia sobreposição) --------- */
body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--tipo-principal);
  /* forçar fundo escuro e texto claro (ajuste mínimo aplicado) */
  background-color: #363636;
  color: #f5f5f5;
  line-height: 1.6;
  hyphens: auto;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* containers principais mantidos */
#header, #footer, main#content { width: 100%; max-width: 1200px; padding: 1rem; }
#header, #footer { flex: 0 0 auto; background-color: #393939; }
main#content { flex: 1 0 auto; overflow-y: auto; }

#body-content { width: 100%; padding: 1rem; max-width: 1200px; }

.hidden { display: none; }

/* --------- Acordeão (preservei a maior parte do original; apliquei apenas as alterações solicitadas) --------- */

/* Mantive seletor .acordeao original, apenas ajustei cores para harmonizar e apliquei regras de link apenas dentro do conteúdo */
.acordeao {
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
  color: var(--preto); /* mantive referência original, mas body força texto claro; títulos serão explicitamente forçados a branco abaixo */
  transition: all 0.4s ease;
  border-radius: 0.5rem;
  background-color: var(--branco); /* esta variável agora representa um fundo escuro suave no :root ajustado */
  box-shadow: 0.1rem 0.1rem 0.4rem var(--sombra-principal), -0.1rem -0.1rem 0.4rem var(--sombra-secundaria), inset 0 0 0 transparent, inset 0 0 0 transparent;
}

/* bloco individual do acordeão (mantive estrutura original) */
.acordeao .bloco {
  margin: 0 0 1rem;
  padding: 0.5rem;
  color: var(--preto);
  transition: all 0.4s ease;
  border-radius: 0.5rem;
  background-color: var(--branco);
  box-shadow: 0.1rem 0.1rem 0.4rem var(--sombra-principal), -0.1rem -0.1rem 0.4rem var(--sombra-secundaria), inset 0 0 0 transparent, inset 0 0 0 transparent;
}

/* header do painel (o botão que abre) */
/* Importante: títulos dos acordeões devem permanecer BRANCOS — regra aplicada abaixo */
.acordeao .h2 {
  display: flex;
  align-items: center;
  margin: 0 0 0.5rem;
  padding: 1rem;
  color: var(--preto);
  transition: all 0.4s ease;
  border-radius: 0.5rem;
  background-color: var(--branco);
  box-shadow: 0.1rem 0.1rem 0.4rem var(--sombra-principal), -0.1rem -0.1rem 0.4rem var(--sombra-secundaria), inset 0 0 0 transparent, inset 0 0 0 transparent;
  cursor: pointer;
}

/* ícone dentro do header — mantive as dimensões originais */
.acordeao .h2 img { width: 45px; height: 45px; margin-right: 0.5rem; }

/* hover do header — mantive comportamento original */
.acordeao .h2:hover {
  color: var(--preto);
  transition: all 0.4s ease;
  border-radius: 0.5rem;
  background-color: var(--branco);
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 0.1rem 0.1rem 0.4rem var(--sombra-principal), inset -0.1rem -0.1rem 0.4rem var(--sombra-secundaria);
}

/* conteúdo interno — mantido */
.acordeao .conteudo {
  height: 0;
  padding: 0 1rem;
  overflow: hidden;
  transition: height 0.5s ease;
}

.acordeao .bloco.ativo .conteudo {
  height: auto;
  padding: 1rem;
}

/* custom table e células mantidas (apenas garantido contraste de texto do conteúdo) */
.custom-table { width: 100%; border: none; margin: 0 auto; border-collapse: separate; border-spacing: 2px; font-size: 1.8rem; line-height: 1.6; }
.custom-table td { text-align: left; vertical-align: middle; padding: 5px; color: #f5f5f5; } /* força cor clara no conteúdo da tabela */
.custom-img-td { text-align: center; vertical-align: middle; }
.custom-img { display: block; margin: 0 auto; height: 45px; width: auto; }
.custom-td-wide { width: 100%; font-size: calc(1rem + 0.8vw); }
.separator-img { width: 100%; height: 2px; }
.custom-td-center { text-align: center; }
.custom-text { font-size: 1.1rem; color: #f5f5f5; }

/* imagens entre índices mantidas */
.imagem-entre-indices-retangulares { text-align: center; margin: 1rem 0; }
.imagem-entre-indices-retangulares img { max-width: 100%; height: auto; margin: 0.0; border-radius: 0.1rem; }
.imagem-entre-indices { text-align: center; margin: 1rem 0; }
.imagem-entre-indices img { max-width: 100%; height: auto; border-radius: 1rem; }

/* --------- Breakpoints e responsividade (mantidos integralmente como no original) --------- */
@media (min-width: 320px) and (max-width: 639px) {
  .custom-table { font-size: calc(1rem + 1vw); line-height: 1.4; }
  .container { font-size: calc(2rem + 1vw); }
  .custom-table { font-size: calc(1rem + 1vw); line-height: 1.4; }
  .container { font-size: calc(2rem + 1vw); }
  h2 { font-size: calc(1.2rem + 1vw); }
  .custom-img-td, .h2-img-td { width: calc(2.4rem + 1vw); height: auto; text-align: center; vertical-align: middle; }
  .h2-img { width: calc(2rem + 2vw); height: auto; vertical-align: middle; }
  .custom-img { width: calc(2rem + 2vw); height: auto; vertical-align: middle; }
  .s { flex-direction: column; align-items: center; }
  .estado-texto { text-align: center; vertical-align: middle; font-size: calc(1rem + 1vw); font-weight: inherit; color: inherit; }
  .sucesso-mensagem, .erro-mensagem { font-size: calc(1rem + 1vw); line-height: 1.4; }
  .sucesso-mensagem { background-color: #DFF2BF; color: #4F8A10; padding: 10px; margin: 10px 0; border: 1px solid #4F8A10; border-radius: 5px; }
  .erro-mensagem { background-color: #FFBABA; color: #D8000C; padding: 10px; margin: 10px 0; border: 1px solid #D8000C; border-radius: 5px; }
}

@media (min-width: 640px) and (max-width: 1079px) {
  .custom-table { font-size: calc(1.7rem + 1vw); line-height: 1.4; }
  .container { font-size: calc(2.4rem + 1.2vw); }
  h2 { font-size: calc(1.6rem + 1.5vw); }
  .custom-img-td, .h2-img-td { width: auto; height: calc(5.4rem + 2.7vw); text-align: center; vertical-align: middle; }
  .h2-img { width: auto; height: calc(5.1rem + 2.7vw); vertical-align: middle; }
  .custom-img { width: auto; height: calc(5.1rem + 2.7vw); vertical-align: middle; }
  .s { flex-direction: column; align-items: center; }
  .estado-texto { text-align: center; vertical-align: middle; font-size: calc(1.7rem + 1vw); font-weight: inherit; color: inherit; }
  .sucesso-mensagem, .erro-mensagem { font-size: calc(1.7rem + 1vw); line-height: 1.4; }
  .sucesso-mensagem { background-color: #DFF2BF; color: #4F8A10; padding: 10px; margin: 10px 0; border: 1px solid #4F8A10; border-radius: 5px; }
  .erro-mensagem { background-color: #FFBABA; color: #D8000C; padding: 10px; margin: 10px 0; border: 1px solid #D8000C; border-radius: 5px; }
}

@media (min-width: 1080px) and (max-width: 1439px) {
  .custom-table { font-size: calc(1.4rem + 1vw); line-height: 1.4; }
  .container { font-size: calc(5rem + 2.8vw); }
  h2 { font-size: calc(1.4rem + 1vw); }
  .custom-img-td, .h2-img-td { width: auto; height: calc(5.6rem + 2.8vw); text-align: center; vertical-align: middle; }
  .h2-img { width: auto; height: calc(5.6rem + 2.8vw); vertical-align: middle; }
  .custom-img { width: auto; height: calc(5.6rem + 2.8vw); vertical-align: middle; }
  .s { flex-direction: column; align-items: center; }
  .estado-texto { text-align: center; vertical-align: middle; font-size: calc(1.4rem + 1vw); font-weight: inherit; color: inherit; }
  .sucesso-mensagem, .erro-mensagem { font-size: calc(1.4rem + 1vw); line-height: 1.4; }
  .sucesso-mensagem { background-color: #DFF2BF; color: #4F8A10; padding: 10px; margin: 10px 0; border: 1px solid #4F8A10; border-radius: 5px; }
  .erro-mensagem { background-color: #FFBABA; color: #D8000C; padding: 10px; margin: 10px 0; border: 1px solid #D8000C; border-radius: 5px; }
}

/* --------- Logos, ícones e utilitários mantidos ---------- */
.logo-copilot { display: block; margin: 0 auto; height: 45px; width: auto; }
@media (min-width: 320px) and (max-width: 639px) { .logo-copilot { width: auto; height: calc(2.5rem + 2vw); } }
@media (min-width: 640px) and (max-width: 1079px) { .logo-copilot { width: auto; height: calc(5.4rem + 2.7vw); } }
@media (min-width: 1080px) and (max-width: 1439px) { .logo-copilot { width: auto; height: calc(5.6rem + 2.8vw); } }
@media (min-width: 1440px) { .logo-copilot { width: auto; height: calc(5.6rem + 2.8vw); } }

.td-icon-index, .td-icon-tag { text-align: center; vertical-align: middle; padding: 10px; }
.logo-index { width: 70%; height: auto; display: inline-block; max-width: 140px; }
.logo-tag { width: 100%; height: auto; display: inline-block; max-width: 180px; }
@media (max-width: 639px) { .logo-tag { max-width: 120px; } .logo-index { max-width: 84px; } }
@media (min-width: 640px) and (max-width: 1079px) { .logo-tag { max-width: 150px; } .logo-index { max-width: 105px; } }
@media (min-width: 1080px) and (max-width: 1439px) { .logo-tag { max-width: 180px; } .logo-index { max-width: 126px; } }
@media (min-width: 1440px) { .logo-tag { max-width: 200px; } .logo-index { max-width: 140px; } }

/* spinner mantido */
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #4CAF50; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 10px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --------- Ajustes solicitados para links e harmonização (mudanças pontuais e seguras) --------- */

/* 1) links dentro do conteúdo dos acordeões: AMARELO e sem underline (aplica-se a TODO conteúdo dentro do acordeão) */
.acordeao .conteudo a,
.acordeao .custom-table a,
.acordeao p a,
.acordeao li a {
  color: #FFD54F;         /* amarelo suave solicitado */
  text-decoration: none;  /* sem underline */
}

/* hover para esses links */
.acordeao .conteudo a:hover,
.acordeao .custom-table a:hover,
.acordeao p a:hover,
.acordeao li a:hover {
  color: #FFCA28;
  text-decoration: none;
}

/* 2) EXCEÇÃO: nomes/títulos dos acordeões (elementos .acordeao .h2) e quaisquer links dentro deles devem permanecer BRANCOS */
/* garante que, mesmo se for <a> dentro do título, ele fique branco e sem underline */
.acordeao .h2,
.acordeao .h2 a,
.acordeao .h2 .titulo {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 3) Footer: links obrigatoriamente brancos (não herdarão o amarelo) */
#footer, #footer a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 4) Harmonização visual: reduzi variação excessiva entre base e blocos apenas onde havia contraste forte */
/* Mantive as variáveis originais, e ajustei apenas as cores usadas pelo acordeão para que fiquem mais próximas entre si */
.acordeao { background-color: #2b2b2b; }         /* leve ajuste para base do acordeão */
.acordeao .bloco { background-color: #2b2b2b; }  /* blocos um pouco mais escuros que a base, harmonia suave */

/* 5) garantir contraste de textos em células e conteúdo */
.custom-table td { color: #f5f5f5; }
.acordeao .conteudo p, .acordeao .conteudo li { color: #e8e8e8; }

/* 6) Se desejar destacar um link amarelo em outro lugar, aplique a classe .amarelo-link explicitamente */
.amarelo-link a { color: #FFD54F; text-decoration: none; }

/* 7) preservação de comportamentos focais / acessibilidade (mantive as configurações originais, acrescentei outline visível para foco onde aplicável) */
.acordeao a:focus, .acordeao button:focus, .acordeao .h2:focus {
  outline: 2px solid rgba(127,195,255,0.9);
  outline-offset: 2px;
}

/* --------- Observações finais (implantação segura) --------- */
/* - Mantive a maior parte do arquivo original e apliquei somente as mudanças pontuais solicitadas: */
/*   * links em conteúdo do acordeão em amarelo e sem underline; */
/*   * títulos dos acordeões e links no header/footer forçados para branco; */
/*   * harmonização sutil das cores de fundo do acordeão e dos blocos; */
/* - Não removi regras de centralização, tamanhos ou breakpoints existentes; */
/* - Após substituir este arquivo no ambiente de staging, teste: */
/*   1) títulos dos acordeões permanecem brancos (mesmo que sejam <a>); */
/*   2) links dentro do conteúdo dos acordeões aparecem amarelos, sem underline; */
/*   3) links no footer permanecem brancos; */
/* - Se achar necessário, ajusto apenas os valores de #FFD54F (amarelo) e dos fundos (#2b2b2b / #242424) para chegar à harmonização visual exata que deseja. */
```