/* ================================================================
   Regularize Consultoria — tipos das Notícias: Atualização, Informativo, Urgente e Orientação
   ----------------------------------------------------------------
   Arquivo único das cores e estados dos quatro tipos. É carregado pela
   listagem, por todas as páginas de notícia (das duas famílias de CSS:
   components.css + noticia-detalhe.css e custom.min.css) e pelo template.
   O HTML usa só as classes abaixo, sem utilitários de cor; nenhuma outra
   folha define cor para elas.

   Cores aprovadas:
     Atualização  #f59e0b  (texto escuro #0f172a: 8,31:1 · hover e foco #d97706  5,60:1)
     Informativo  #f97316  (texto escuro #0f172a: 6,37:1 · hover e foco #ea580c  5,02:1)
     Urgente      #dc2626  (texto branco #ffffff: 4,83:1 · hover e foco #b91c1c  6,47:1)
     Orientação   #1565c0  (texto branco #ffffff: 5,75:1 · hover e foco #1a3a5c 11,64:1)
   As setas usam currentColor e acompanham o texto.
   ================================================================ */

:root {
  --tipo-texto: #0f172a;
  --tipo-texto-claro: #ffffff;
  --tipo-atualizacao: #f59e0b;
  --tipo-atualizacao-forte: #d97706;
  --tipo-atualizacao-claro: #fbbf24;
  --tipo-informativo: #f97316;
  --tipo-informativo-forte: #ea580c;
  --tipo-informativo-claro: #fb923c;
  --tipo-urgente: #dc2626;
  --tipo-urgente-forte: #b91c1c;
  --tipo-urgente-claro: #ef4444;
  --tipo-orientacao: #1565c0;
  --tipo-orientacao-forte: #1a3a5c;
  --tipo-orientacao-claro: #29b6f6;
}

/* ---------- 1. Selos: listagem (dois formatos) e cabeçalho do artigo ---------- */
.news-amber-badge,
.article-badge-atualizacao {
  background-color: var(--tipo-atualizacao);
  color: var(--tipo-texto);
}

.news-orange-badge,
.article-badge-informativo {
  background-color: var(--tipo-informativo);
  color: var(--tipo-texto);
}

.news-urgent-badge,
.article-badge-urgente {
  background-color: var(--tipo-urgente);
  color: var(--tipo-texto-claro);
}

.news-orientacao-badge,
.article-badge-orientacao {
  background-color: var(--tipo-orientacao);
  color: var(--tipo-texto-claro);
}

/* ---------- 2. Botões nos cards de notícias ----------
   A mesma cor nos dois formatos. O tamanho vem do formato: no compacto, da
   regra .news-card-compact > a (pages/noticias.css); nos cinco destaques e
   nos resultados grandes, daqui, com o mesmo acabamento unificado em pílula. */
.news-amber-button {
  background-color: var(--tipo-atualizacao);
  color: var(--tipo-texto);
}

.news-orange-button {
  background-color: var(--tipo-informativo);
  color: var(--tipo-texto);
}

.news-urgent-button {
  background-color: var(--tipo-urgente);
  color: var(--tipo-texto-claro);
}

.news-orientacao-button {
  background-color: var(--tipo-orientacao);
  color: var(--tipo-texto-claro);
}

/* Hover e foco iguais. O !important da sombra vence o box-shadow: none
   !important do compacto (seletor mais forte que .news-card-compact > a). */
.news-amber-button:is(:hover, :focus-visible) {
  background-color: var(--tipo-atualizacao-forte);
  color: var(--tipo-texto);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.32) !important;
}

.news-orange-button:is(:hover, :focus-visible) {
  background-color: var(--tipo-informativo-forte);
  color: var(--tipo-texto);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3) !important;
}

.news-urgent-button:is(:hover, :focus-visible) {
  background-color: var(--tipo-urgente-forte);
  color: var(--tipo-texto-claro);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.32) !important;
}

.news-orientacao-button:is(:hover, :focus-visible) {
  background-color: var(--tipo-orientacao-forte);
  color: var(--tipo-texto-claro);
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.3) !important;
}

/* Foco de teclado: o anel da marca, afastado do botão, e a pílula mantida
   (o foco global aplica border-radius: 4px). */
:is(.news-amber-button, .news-orange-button, .news-urgent-button, .news-orientacao-button):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 9999px;
}

#news-article-list .news-featured-card:not(.news-card-compact) :is(.news-amber-button, .news-orange-button, .news-urgent-button, .news-orientacao-button) {
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease, box-shadow 0.15s ease;
}

#news-article-list .news-featured-card:not(.news-card-compact) :is(.news-amber-button, .news-orange-button, .news-urgent-button, .news-orientacao-button) svg[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.15s ease;
}

#news-article-list .news-featured-card:not(.news-card-compact) :is(.news-amber-button, .news-orange-button, .news-urgent-button, .news-orientacao-button):is(:hover, :focus-visible) svg[aria-hidden="true"] {
  transform: translateX(2px);
}

/* ---------- 3. Cards: faixa superior, sombra e borda ---------- */
.news-amber-card::before {
  height: 5px;
  background: linear-gradient(90deg, var(--tipo-atualizacao-forte), var(--tipo-atualizacao), var(--tipo-atualizacao-claro));
  opacity: 1;
}

.news-orange-card::before {
  height: 5px;
  background: linear-gradient(90deg, var(--tipo-informativo-forte), var(--tipo-informativo), var(--tipo-informativo-claro));
  opacity: 1;
}

.news-urgent-card::before {
  height: 5px;
  background: linear-gradient(90deg, var(--tipo-urgente), var(--tipo-urgente-claro), #991b1b);
  opacity: 1;
}

.news-card--orientation::before {
  height: 5px;
  background: linear-gradient(90deg, var(--tipo-orientacao), var(--tipo-orientacao-claro));
  opacity: 1;
}

.news-orange-card {
  box-shadow: 0 10px 25px rgba(255, 237, 213, 0.6);
}

.news-urgent-card {
  box-shadow: 0 10px 25px rgba(254, 226, 226, 0.6);
}

#news-article-list .news-card.news-amber-card:hover,
#news-article-list .news-card.news-amber-card:focus-within {
  border-color: rgba(217, 119, 6, 0.5) !important;
}

#news-article-list .news-card.news-orange-card:hover,
#news-article-list .news-card.news-orange-card:focus-within {
  border-color: rgba(234, 88, 12, 0.45) !important;
}

#news-article-list .news-card.news-urgent-card:hover,
#news-article-list .news-card.news-urgent-card:focus-within {
  border-color: rgba(220, 38, 38, 0.48) !important;
}

#news-article-list .news-card.news-card--orientation:hover,
#news-article-list .news-card.news-card--orientation:focus-within {
  border-color: var(--color-brand) !important;
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.06) !important;
}

#news-article-list .news-featured-card.news-amber-card:not(.news-card-compact) {
  border-color: rgba(245, 158, 11, 0.65);
}

#news-article-list .news-featured-card.news-orange-card:not(.news-card-compact) {
  border-color: rgba(249, 115, 22, 0.65);
}

#news-article-list .news-featured-card.news-urgent-card:not(.news-card-compact) {
  border-color: rgba(220, 38, 38, 0.65);
}

#news-article-list .news-featured-card.news-card--orientation:not(.news-card-compact) {
  border-color: rgba(21, 101, 192, 0.60);
}

#news-article-list .news-featured-card.news-amber-card:not(.news-card-compact):hover,
#news-article-list .news-featured-card.news-amber-card:not(.news-card-compact):focus-within {
  border-color: var(--tipo-atualizacao) !important;
}

#news-article-list .news-featured-card.news-orange-card:not(.news-card-compact):hover,
#news-article-list .news-featured-card.news-orange-card:not(.news-card-compact):focus-within {
  border-color: var(--tipo-informativo) !important;
}

#news-article-list .news-featured-card.news-urgent-card:not(.news-card-compact):hover,
#news-article-list .news-featured-card.news-urgent-card:not(.news-card-compact):focus-within {
  border-color: var(--tipo-urgente) !important;
}

#news-article-list .news-featured-card.news-card--orientation:not(.news-card-compact):hover,
#news-article-list .news-featured-card.news-card--orientation:not(.news-card-compact):focus-within {
  border-color: var(--tipo-orientacao) !important;
}

/* ---------- 4. Cabeçalho do artigo ----------
   O degradê de cada tipo na borda externa e o texto (trilha, selos, título,
   resumo e datas) num painel azul-escuro da marca a 85% (rgba(26, 58, 92, 0.85)):
   legibilidade garantida (> 5,5:1 no pior ponto e > 9:1 no título), espaçamento
   consistente e cantos arredondados (1rem). O degradê continua visível em volta. */
.article-hero-atualizacao,
.article-hero-informativo,
.article-hero-urgente,
.article-hero-orientacao {
  background-color: var(--color-brand-dark);
}

.article-hero-atualizacao {
  background-image: linear-gradient(to right, var(--tipo-atualizacao), var(--color-brand-dark), var(--color-brand));
}

.article-hero-informativo {
  background-image: linear-gradient(to right, var(--tipo-informativo), var(--color-brand-dark), var(--color-brand));
}

.article-hero-urgente {
  background-image: linear-gradient(to right, var(--tipo-urgente-forte), var(--color-brand-dark), var(--color-brand));
}

.article-hero-orientacao {
  background-image: linear-gradient(90deg, #16466f 0%, var(--color-brand-dark) 52%, var(--color-brand) 100%);
}

/* Folga externa do cabeçalho (Proposta A): redução para 1.5rem (<640px), 2rem (640-767px) e 2.75rem (>=768px). */
header:is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) {
  padding-block: 1.5rem;
}

@media (min-width: 640px) {
  header:is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) {
    padding-block: 2rem;
  }
}

@media (min-width: 768px) {
  header:is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) {
    padding-block: 2.75rem;
  }
}


:is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) > div {
  width: calc(100% - 2rem);
  margin-inline: auto;
  padding-block: 1.25rem;
  border-radius: 1rem;
  background-color: rgba(26, 58, 92, 0.85);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}

@media (min-width: 640px) {
  :is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) > div {
    padding-block: 1.75rem;
  }
}

/* Foco branco sobre o painel, como nos outros fundos escuros. */
:is(.article-hero-atualizacao, .article-hero-informativo, .article-hero-urgente, .article-hero-orientacao) :is(a, button):focus-visible {
  outline-color: #fff;
}

/* ---------- Corpo da notícia e a coluna fixa ----------
   As duas famílias carregam esta folha: custom.min.css e a modular
   (components.css + noticia-detalhe.css). Há página que carrega as duas.
   A reserva fica aqui para alcançar o corpo sem recompilar o CSS
   institucional e sem repetir a reserva dos cards nem a do hero.
   Uma vez em .article-body, para título, parágrafo e lista usarem a
   mesma largura, sem recuos somados. A conta é o quanto a borda direita
   do componente passa da faixa do botão: 1,5rem de deslocamento, a
   largura do botão e 0,5rem de folga, menos o espaço que a coluna
   centralizada já deixa livre. Negativo, a reserva vai a zero.
   O aviso e o texto do CTA repetem a mesma conta no próprio componente.

   Layout comum (10/10/2026). A largura útil passa a vir do contêiner de
   consulta main > article (100cqw), que não inclui a barra de rolagem
   clássica: 100vw a inclui e, com a barra de 15px, deixava o texto a menos
   de 1px do botão. Cada regra mantém antes a mesma conta com 100vw; um
   navegador sem unidades de contêiner descarta a declaração com cqw e fica
   com ela. O recuo do botão é o da coluna, max(1,5rem, safe-area). A mesma
   conta, relativa ao bloco de referência, vale também para o herói, para
   os demais filhos do miolo (cartão de metadados, perguntas frequentes) e
   para as notícias relacionadas. Texto reserva 0,5rem de folga; as caixas
   clicáveis (cards de notícias relacionadas e a fileira de ações do CTA),
   1rem, para o contorno de foco (2px + 2px de afastamento) e a sombra
   visível do foco e do botão principal (deslocamento + espalhamento +
   metade do desfoque: até 15px) ficarem fora do botão. A fileira de ações
   deixa a conta fixa de noticia-detalhe.css e custom.css por esta. */
main > article {
  container-type: inline-size;
}

/* Título da matéria em telas estreitas. Com a reserva da faixa, o título
   tem 212px de largura útil a 320px (197px com a barra clássica) e 252px
   a 375px com a barra. Palavras mais largas que isso em 30px
   ("estabelecimentos", 254px; "Cosmetovigilância", 264px) passavam da
   caixa. Essas palavras têm no HTML um hífen opcional (&shy;) num limite
   de sílaba em que as duas partes cabem na menor caixa; o texto, o
   tamanho da fonte e a hierarquia não mudam. A quebra no hífen opcional só
   vale enquanto a largura útil é menor que 375px (media query para a
   janela; container query para a largura útil, que desconta a barra
   clássica); de 375px em diante os hífens opcionais são ignorados
   (hyphens: none) e o título quebra como antes. Sem hifenização
   automática: ela depende de dicionário do navegador e não se repete no
   ambiente de medição. O título do CTA final segue a mesma regra
   ("creden&shy;ciamento?", 200px em 24px, passava da caixa de 196px com
   a barra clássica a 320px). */
main > article > header h1,
.article-final-cta__title {
  -webkit-hyphens: none;
  hyphens: none;
}

@media (max-width: 374px) {
  main > article > header h1,
  .article-final-cta__title {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

@container (max-width: 374px) {
  main > article > header h1,
  .article-final-cta__title {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

.article-body {
  box-sizing: border-box;
  overflow-wrap: break-word;
  padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
  padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
}

.article-body .article-table-scroll {
  overflow-wrap: normal;
}

.article-important-notice {
  padding-right: max(1.5rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
  padding-right: max(1.5rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
}

.article-final-cta__title,
.article-final-cta__text,
.article-related-news__title,
main > article > header > .max-w-4xl > * {
  padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
  padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
}

main > article > .max-w-4xl > :not(.article-body, .article-important-notice, .article-final-cta, .article-related-news) {
  margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
  margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
}

.article-related-news {
  padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 1rem));
  padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem));
}

.article-final-cta__actions {
  margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 1rem));
  margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem));
}

@media (max-width: 640px) {
  .article-body {
    padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  .article-important-notice {
    padding-right: max(1.25rem, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    padding-right: max(1.25rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  .article-final-cta__title,
  .article-final-cta__text,
  .article-related-news__title,
  main > article > header > .max-w-4xl > * {
    padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  main > article > .max-w-4xl > :not(.article-body, .article-important-notice, .article-final-cta, .article-related-news) {
    margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  .article-related-news {
    padding-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 1rem));
    padding-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 1rem));
  }

  .article-final-cta__actions {
    margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 1rem));
    margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 1rem));
  }
}

/* Espelho à esquerda da mesma reserva (14/10/2026).
   Entra só com main > article em 58rem ou mais: aí o painel azul e a
   coluna de leitura já são a caixa de 56rem, e o recuo único à direita
   é o que tira o texto do centro. Abaixo disso a borda esquerda já
   encontra o painel e a reserva direita é grande; copiá-la esmagaria a
   linha. No desktop a conta vai a zero dos dois lados e resta o recuo
   de leitura do miolo. O 100% continua a ser a caixa do componente que
   já tem a reserva à direita, então o quadro amarelo, dentro de
   .article-body, não recebe outra conta. A faixa de 640px fica de fora:
   58rem está acima dela e o botão segue com 3rem. */
@container (min-width: 58rem) {
  .article-body {
    padding-left: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    padding-left: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }

  .article-important-notice {
    padding-left: max(1.5rem, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    padding-left: max(1.5rem, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }

  .article-final-cta__title,
  .article-final-cta__text,
  .article-related-news__title,
  main > article > header > .max-w-4xl > * {
    padding-left: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    padding-left: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }

  main > article > .max-w-4xl > :not(.article-body, .article-important-notice, .article-final-cta, .article-related-news) {
    margin-left: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
    margin-left: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
  }

  .article-related-news {
    padding-left: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 1rem));
    padding-left: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem));
  }

  .article-final-cta__actions {
    margin-left: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 1rem));
    margin-left: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem));
  }
}