/* A LEITURA DAS NOTÍCIAS: a grade da lista e a página da peça, num lugar só
   (saiu de painel/noticias.css em 21/09/2026, quando nasceram as páginas
   públicas /noticias.html e /noticia.html — pedido do Thomas: "Notícias de IA
   na pagina inicial pode fazer, em uma página separada notícias"). O painel e
   as páginas públicas desenham a peça com o MESMO módulo (/noticias-peca.js)
   e a MESMA folha; o que é só do painel (filtros, "Útil?", "Reportar erro")
   continua em painel/noticias.css.

   Carregue DEPOIS de /noticias-roleta.css: o selo da imagem usa o véu
   declarado lá (a única cor fixa, num lugar só). Só tokens: vale nos seis
   temas sem regra por tema. */

/* ------------------------------------------------------------ lista */
.noticias-status {
  margin: 0 0 12px;
  min-height: 1.4em;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}
.noticias-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.noticias-grade > li {
  display: flex;
  min-width: 0;
}
.noticias-mais {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ------------------------------------------------------------ página da peça */
.noticia-pagina {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.noticia-voltar {
  margin: 0;
  font-size: calc(13px * var(--escala-texto));
}
.noticia-pagina a {
  color: var(--indigo);
}
.noticia-carregando,
.noticia-erro {
  padding: 18px 20px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-cartao);
  background: var(--campo);
  color: var(--tinta-media);
}
.noticia-conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.noticia-sobre {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.noticia-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--indigo-linha);
  background: var(--indigo-fundo);
  color: var(--indigo);
  font-size: calc(12px * var(--escala-texto));
  font-weight: 600;
}
.noticia-etiqueta-secundaria,
.noticia-pagina a.noticia-etiqueta-secundaria {
  border-color: var(--linha-forte);
  background: var(--painel);
  color: var(--tinta-media);
  font-weight: 500;
  text-decoration: none;
}
.noticia-pagina a.noticia-etiqueta-secundaria:hover {
  border-color: var(--indigo);
  color: var(--tinta);
}
.noticia-titulo {
  margin: 0;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(28px * var(--escala-texto));
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.noticia-resumo {
  margin: 0;
  font-size: calc(17px * var(--escala-texto));
  line-height: 1.55;
  color: var(--tinta-media);
}
.noticia-data {
  margin: 0;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-fraca);
}
.noticia-figura {
  margin: 0;
}
.noticia-midia {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--raio-cartao);
  background: var(--campo);
  border: 1px solid var(--linha);
}
.noticia-midia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noticia-selo-ia {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 11px;
  border-radius: var(--raio-pilula);
  /* O véu vem de public/noticias-roleta.css (carregada antes desta): a única
     cor fixa do produto mora num lugar só. */
  background: var(--veu-sobre-imagem);
  color: var(--tinta-sobre-veu);
  font-size: calc(12px * var(--escala-texto));
  font-weight: 600;
}
.noticia-credito {
  margin-top: 6px;
  font-size: calc(12px * var(--escala-texto));
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.noticia-pontos,
.noticia-estudo {
  padding: 14px 18px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--indigo);
  border-radius: var(--raio);
  background: var(--painel);
}
/* h3 no painel (o título da peça é h2 lá) e h2 na página pública (onde ele é
   h1): o nível segue a página, o desenho não. */
.noticia-pontos :is(h2, h3),
.noticia-estudo :is(h2, h3) {
  margin: 0 0 8px;
  font-family: inherit;
  letter-spacing: normal;
  line-height: 1.3;
  font-size: calc(14px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}
.noticia-pontos ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--tinta);
  line-height: 1.55;
}
.noticia-estudo dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 6px 14px;
  font-size: calc(14px * var(--escala-texto));
}
.noticia-estudo dt {
  color: var(--tinta-fraca);
}
.noticia-estudo dd {
  margin: 0;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.noticia-corpo {
  color: var(--tinta);
  font-size: calc(16px * var(--escala-texto));
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.noticia-corpo h2 {
  margin: 1.2em 0 0.4em;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(20px * var(--escala-texto));
  font-weight: 600;
  line-height: 1.3;
}
.noticia-corpo p {
  margin: 0 0 0.9em;
}
.noticia-corpo ul {
  margin: 0 0 0.9em;
  padding-left: 1.3em;
}
.noticia-corpo sup {
  font-size: 0.72em;
  line-height: 0;
}
.noticia-corpo sup a {
  text-decoration: none;
  font-weight: 600;
}
/* A lista de referências: o renderizador põe um h2 "Referências" e a lista. */
.noticia-referencias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: calc(13.5px * var(--escala-texto));
  line-height: 1.55;
  color: var(--tinta-media);
}
.noticia-referencias li {
  scroll-margin-top: 90px;
}
.noticia-referencias li:target {
  background: var(--indigo-fundo);
  border-radius: 6px;
}
.noticia-ids {
  color: var(--tinta-fraca);
}

.noticia-rotulo-ia {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--campo);
  border: 1px solid var(--linha);
  font-size: calc(13px * var(--escala-texto));
  line-height: 1.55;
  color: var(--tinta-media);
}

@media (max-width: 560px) {
  .noticia-titulo {
    font-size: calc(23px * var(--escala-texto));
  }
  .noticia-estudo dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .noticia-estudo dd {
    margin-bottom: 6px;
  }
}