/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — RADAR DE TENDÊNCIAS (#screenNoticias, prefixo .krd-) · v1
   ═══════════════════════════════════════════════════════════════════════════
   Dono único desta tela. Carrega por último no index.html.

   A tela era um painel do negócio da Karameloo — faturamento, criadores
   recorrentes, mapa 3D de demanda. Nada daquilo responde o que um editor vem
   perguntar aqui: o que está bombando e o que eu edito agora.

   O painel antigo continua no HTML e some por CSS. Apagar o markup quebraria
   as funções que escrevem nos ids dele (kjKpiRow, kjPerfChart, kjGlobeEl…);
   escondido, ele não custa tela e a limpeza do JS morto pode vir depois.

   Cérebro: LEIS/01 - Design Anti-IA · 23 - SaaS Anti Generico/Checklist -
   Dashboard SaaS Operacional (KPI com contexto e drill-down, nada de gráfico
   decorativo) · 30 - Marketplace/Guia - Dashboard Operacional.
   ═══════════════════════════════════════════════════════════════════════════ */

#screenNoticias{
  --r-papel:#ffffff;
  --r-papel2:#faf7f1;
  --r-tinta:#111827;
  --r-mut:#4b5563;
  --r-soft:#5c6573;
  --r-linha:rgba(17,24,39,.12);
  --r-ouro:#fcbc1d;
  --r-ouro-ink:#7a5d10;
  --r-ok:#1f7a45;
  --r-erro:#a3341f;
  --r-r:4px;
  --r-dur:200ms;
  --r-ease:cubic-bezier(.16,1,.3,1);
}

/* O painel de NEGÓCIO antigo sai de cena — faturamento, criadores recorrentes,
   mapa 3D de demanda. Nada disso responde o que o editor vem perguntar aqui.

   ATENÇÃO: `> .kj-card` é largo demais sozinho. Ele escondeu junto o feed de
   notícias, que é conteúdo de verdade (tabela news_posts, com publicação por
   admin). A exceção abaixo é obrigatória, não estética. */
#screenNoticias .kj-dash-header,
#screenNoticias .kj-kpi-row,
#screenNoticias .kj-dash-grid,
#screenNoticias .kj-globe-card,
#screenNoticias > .kj-card{
  display:none !important;
}
#screenNoticias > .kj-card#kmlNewsCard{ display:block !important }

/* ── jornal ──────────────────────────────────────────────────────────────── */
/* O feed fica DEPOIS do radar de propósito: quem abre esta tela quer primeiro
   saber o que está bombando; a leitura vem em seguida. */
#screenNoticias .krd-noticias{
  width:min(1680px, calc(100vw - 84px));
  margin:20px auto 0 !important;
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r) !important;
  box-shadow:none !important;
  padding:18px 20px 20px !important;
}
#screenNoticias .krd-noticias .kj-card__head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--r-linha) !important;
  padding:0 0 12px !important; margin:0 0 16px !important;
}
#screenNoticias .krd-noticias .kj-card__title{
  color:var(--r-tinta) !important;
  font-size:.78rem !important; font-weight:800 !important;
  letter-spacing:.11em; text-transform:uppercase;
}
#screenNoticias .krd-noticias .kj-ai-badge{
  background:var(--r-papel2) !important; color:var(--r-soft) !important;
  border:1px solid var(--r-linha) !important; border-radius:100px !important;
  padding:2px 9px !important; font-size:.66rem !important; font-weight:700;
  text-transform:none; letter-spacing:0;
}
#screenNoticias .krd-noticias .kjNewsAdminBtn{
  margin-left:auto;
  background:var(--r-ouro) !important; color:#1c1405 !important;
  border:1px solid var(--r-ouro) !important; border-radius:var(--r-r) !important;
  padding:7px 14px !important; font-size:.8rem !important; font-weight:800 !important;
  box-shadow:none !important; cursor:pointer;
}
#screenNoticias .krd-noticias .kjNewsAdminBtn:hover{ background:#b98f1f !important }

/* grade dos artigos */
#screenNoticias .krd-noticias .kj-feed{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
  background:transparent !important; padding:0 !important; border:0 !important;
}
/* cada artigo vira cartão sólido com borda 1px, igual ao resto do site */
#screenNoticias .krd-noticias .kj-feed > *{
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r) !important;
  box-shadow:none !important;
  color:var(--r-tinta) !important;
  overflow:hidden;
  transition:border-color var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
#screenNoticias .krd-noticias .kj-feed > a:hover{
  border-color:rgba(17,24,39,.28) !important; transform:translateY(-1px);
}
#screenNoticias .krd-noticias .kj-feed img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}
#screenNoticias .krd-noticias .kj-feed h3,
#screenNoticias .krd-noticias .kj-feed strong{
  color:var(--r-tinta) !important; font-size:.9rem; font-weight:700; line-height:1.35;
}
#screenNoticias .krd-noticias .kj-feed p,
#screenNoticias .krd-noticias .kj-feed small,
#screenNoticias .krd-noticias .kj-feed time{
  color:var(--r-mut) !important; font-size:.78rem; line-height:1.5;
}

/* estado vazio do feed — o que aparece hoje, sem notícia publicada */
#screenNoticias .krd-noticias .kj-feed__empty,
#screenNoticias .krd-noticias .kj-feed > div:only-child{
  grid-column:1 / -1;
  background:var(--r-papel2) !important;
  border:1px dashed rgba(17,24,39,.22) !important;
  color:var(--r-mut) !important;
  padding:32px 20px; text-align:center; font-size:.85rem;
}

/* esqueleto no formato do cartão, não um giro genérico */
#screenNoticias .kjNewsSkeletonList{
  display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
}
#screenNoticias .kjNewsSkeletonCard{
  background:var(--r-papel2) !important; border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r); height:190px;
}

/* barra de push e rodapé, que continuam abaixo do jornal */
#screenNoticias .kj-push-bar,
#screenNoticias .kj-push-settings,
#screenNoticias .kj-footer{
  width:min(1680px, calc(100vw - 84px)); margin-left:auto; margin-right:auto;
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r) !important;
  color:var(--r-tinta) !important;
  box-shadow:none !important;
}
#screenNoticias .kj-push-bar{ margin-top:14px !important }
#screenNoticias .kj-footer{ margin-top:14px !important; color:var(--r-soft) !important }

@media (max-width:1100px){
  #screenNoticias .krd-noticias .kj-feed,
  #screenNoticias .kjNewsSkeletonList{ grid-template-columns:repeat(2, minmax(0,1fr)) !important }
}
@media (max-width:900px){
  #screenNoticias .krd-noticias,
  #screenNoticias .kj-push-bar,
  #screenNoticias .kj-push-settings,
  #screenNoticias .kj-footer{ width:calc(100vw - 32px) }
}
@media (max-width:640px){
  #screenNoticias .krd-noticias .kj-feed,
  #screenNoticias .kjNewsSkeletonList{ grid-template-columns:1fr !important }
}

/* herança de cor: o reset global pinta span/p de #111 com !important */
#screenNoticias .krd p, #screenNoticias .krd span, #screenNoticias .krd small,
#screenNoticias .krd strong, #screenNoticias .krd b, #screenNoticias .krd div,
#screenNoticias .krd h1, #screenNoticias .krd h2{ color:inherit !important }

/* ── casca ───────────────────────────────────────────────────────────────── */
#screenNoticias .krd{
  width:min(1680px, calc(100vw - 84px));
  margin:0 auto;
  padding:26px 0 64px;
  color:var(--r-tinta) !important;
}
#screenNoticias .krd-topo{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:flex-end; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--r-linha); margin-bottom:20px;
}
#screenNoticias .krd-titulo{
  margin:0; color:var(--r-tinta) !important;
  font-size:1.5rem; font-weight:800; letter-spacing:-.03em;
}
#screenNoticias .krd-sub{
  margin:4px 0 0; color:var(--r-mut) !important; font-size:.84rem;
}
#screenNoticias .krd-sub b{ color:var(--r-tinta) !important; font-weight:800 }
/* selo de demonstração: precisa gritar que o dado não é real */
#screenNoticias .krd-selo{
  background:#fdf3dd !important; color:#7a5310 !important;
  border:1px solid #e8d4a0; border-radius:100px;
  padding:1px 8px; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em;
}
#screenNoticias .krd-btn{
  background:var(--r-papel) !important; color:var(--r-tinta) !important;
  border:1px solid var(--r-linha) !important; border-radius:var(--r-r) !important;
  padding:8px 16px; font-size:.84rem; font-weight:700; cursor:pointer;
  transition:border-color var(--r-dur) var(--r-ease);
}
#screenNoticias .krd-btn:hover{ border-color:rgba(17,24,39,.3) !important }
#screenNoticias .krd-btn:focus-visible{ outline:2px solid var(--r-ouro-ink); outline-offset:2px }
#screenNoticias .krd-btn--forte{
  background:var(--r-ouro) !important; color:#1c1405 !important; border-color:var(--r-ouro) !important;
  font-weight:800; margin-top:14px;
}

/* ── grade ───────────────────────────────────────────────────────────────── */
#screenNoticias .krd-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;
}
#screenNoticias .krd-bloco{
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r); padding:18px 20px 20px;
}
#screenNoticias .krd-bloco--largo{ grid-column:1 / -1 }
/* Este bloco é um <header>, e alguma folha do site pinta `header` com fundo
   escuro (medido: rgba(6,10,18,.72)). O texto continuava grafite, então dava
   contraste 1.12 — título preto sobre preto. Usar elemento semântico não pode
   custar a legibilidade; o fundo volta a ser o do cartão. */
#screenNoticias .krd-blocoHd,
#screenNoticias header.krd-blocoHd{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--r-linha) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 0 12px !important; margin:0 0 14px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* !important aqui porque a regra de herança lá em cima usa !important e, sem
   isso, ela venceria e apagaria a cor que este bloco precisa. */
#screenNoticias .krd-blocoHd h2{
  margin:0; color:var(--r-tinta) !important;
  font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
#screenNoticias .krd-bloco,
#screenNoticias section.krd-bloco{
  background:var(--r-papel) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
/* a explicação do critério fica colada no título de propósito: é o que separa
   um número afirmado de um número justificado */
#screenNoticias .krd-blocoHd small{
  display:block; margin-top:4px;
  color:var(--r-soft) !important; font-size:.74rem; line-height:1.45;
}

/* ── cartão de vídeo ─────────────────────────────────────────────────────── */
#screenNoticias .krd-vids{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
#screenNoticias .krd-vids--compacto{ grid-template-columns:1fr; gap:8px }
#screenNoticias .krd-vid{
  display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:inherit;
  border:1px solid var(--r-linha); border-radius:var(--r-r);
  overflow:hidden; background:var(--r-papel);
  transition:border-color var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease);
}
#screenNoticias .krd-vid:hover{
  border-color:rgba(17,24,39,.28); transform:translateY(-1px);
}
#screenNoticias .krd-vid:focus-visible{ outline:2px solid var(--r-ouro-ink); outline-offset:2px }
#screenNoticias .krd-vidThumb{
  display:block; aspect-ratio:16/9; overflow:hidden; background:var(--r-papel2);
}
#screenNoticias .krd-vidThumb img{ width:100%; height:100%; object-fit:cover; display:block }
#screenNoticias .krd-vidThumb--vazia{ border-bottom:1px solid var(--r-linha) }
#screenNoticias .krd-vidInfo{ display:flex; flex-direction:column; gap:3px; padding:0 12px 12px }
#screenNoticias .krd-vidTitulo{
  color:var(--r-tinta) !important; font-size:.84rem; font-weight:700; line-height:1.32;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#screenNoticias .krd-vidCanal{ color:var(--r-soft) !important; font-size:.74rem }
#screenNoticias .krd-vidNums{
  display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:4px;
  color:var(--r-soft) !important; font-size:.72rem;
  font-variant-numeric:tabular-nums;
}
/* a velocidade é o número que manda aqui, então é o único destacado */
#screenNoticias .krd-vidNums b{ color:var(--r-ouro-ink) !important; font-weight:800 }

/* lista compacta: miniatura ao lado, não em cima */
#screenNoticias .krd-vids--compacto .krd-vid{ flex-direction:row; align-items:stretch }
#screenNoticias .krd-vids--compacto .krd-vidThumb{ width:104px; flex:0 0 104px; aspect-ratio:16/10 }
#screenNoticias .krd-vids--compacto .krd-vidInfo{ padding:9px 12px; justify-content:center }

/* ── formatos ────────────────────────────────────────────────────────────── */
#screenNoticias .krd-formatos{ display:flex; flex-direction:column; gap:12px }
#screenNoticias .krd-formato{
  display:flex; flex-direction:column; gap:5px; align-items:stretch;
  background:transparent !important; border:0 !important; padding:0; cursor:pointer;
  text-align:left;
}
#screenNoticias .krd-formatoNome{ color:var(--r-tinta) !important; font-size:.84rem; font-weight:700 }
#screenNoticias .krd-formatoBarra{
  display:block; height:8px; border-radius:100px; background:rgba(17,24,39,.07); overflow:hidden;
}
#screenNoticias .krd-formatoBarra i{ display:block; height:100%; background:var(--r-ouro); border-radius:100px }
#screenNoticias .krd-formatoLinha{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  color:var(--r-mut) !important; font-size:.76rem;
}
#screenNoticias .krd-formatoLinha b{ color:var(--r-tinta) !important; font-weight:800 }
#screenNoticias .krd-formato:hover .krd-formatoNome{ text-decoration:underline; text-underline-offset:3px }
#screenNoticias .krd-formato:focus-visible{ outline:2px solid var(--r-ouro-ink); outline-offset:3px }

#screenNoticias .krd-delta{ font-weight:800; font-size:.74rem; white-space:nowrap }
#screenNoticias .krd-delta--sobe{ color:#15703d !important }
#screenNoticias .krd-delta--desce{ color:#9a3412 !important }
#screenNoticias .krd-delta--igual{ color:var(--r-soft) !important }
/* "primeira leitura" tem de parecer ausência de dado, não um valor */
#screenNoticias .krd-semBase{
  color:var(--r-soft) !important; font-size:.72rem; font-style:italic;
}

/* ── categorias ──────────────────────────────────────────────────────────── */
#screenNoticias .krd-cats{ display:flex; flex-direction:column }
#screenNoticias .krd-cat{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--r-linha);
  background:transparent !important; border-left:0; border-right:0; border-top:0;
  cursor:pointer; text-align:left; width:100%;
}
#screenNoticias .krd-cat:last-child{ border-bottom:0 !important }
#screenNoticias .krd-catNome{ color:var(--r-tinta) !important; font-size:.86rem; font-weight:700 }
#screenNoticias .krd-catVel{
  color:var(--r-ouro-ink) !important; font-size:.8rem; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#screenNoticias .krd-cat:hover .krd-catNome{ text-decoration:underline; text-underline-offset:3px }
#screenNoticias .krd-cat:focus-visible{ outline:2px solid var(--r-ouro-ink); outline-offset:-2px }

/* ── base do indicador ───────────────────────────────────────────────────── */
#screenNoticias .krd-base{
  margin-top:16px;
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-left:3px solid var(--r-ouro) !important;
  border-radius:var(--r-r); padding:16px 18px 18px;
}
#screenNoticias .krd-baseTopo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--r-linha); margin-bottom:14px;
}
#screenNoticias .krd-baseTitulo{
  color:var(--r-tinta) !important; font-size:.95rem; font-weight:800; letter-spacing:-.01em;
}
#screenNoticias .krd-baseExpl{ color:var(--r-mut) !important; font-size:.78rem; margin-top:3px }
#screenNoticias .krd-baseFechar{
  background:transparent !important; border:0 !important; cursor:pointer;
  color:var(--r-soft) !important; font-size:1rem; line-height:1; padding:4px 6px;
}
#screenNoticias .krd-baseFechar:hover{ color:var(--r-tinta) !important }
#screenNoticias .krd-baseLista{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}

/* ── estados ─────────────────────────────────────────────────────────────── */
#screenNoticias .krd-estado{
  background:var(--r-papel) !important;
  border:1px solid var(--r-linha) !important;
  border-radius:var(--r-r); padding:44px 32px; text-align:center;
}
#screenNoticias .krd-estado h2{
  margin:0 0 8px; color:var(--r-tinta) !important;
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em; text-transform:none;
}
#screenNoticias .krd-estado p{
  margin:0 auto; max-width:56ch; color:var(--r-mut) !important; line-height:1.6; font-size:.88rem;
}
#screenNoticias .krd-estado--erro h2{ color:var(--r-erro) !important }
#screenNoticias .krd-estadoPassos{
  display:inline-flex; flex-direction:column; gap:8px; text-align:left;
  margin:18px auto 0; padding:14px 18px;
  background:var(--r-papel2) !important; border:1px solid var(--r-linha); border-radius:var(--r-r);
  color:var(--r-tinta) !important; font-size:.85rem;
}
#screenNoticias .krd-estadoNota{
  margin-top:16px !important; color:var(--r-soft) !important; font-size:.78rem !important;
}
#screenNoticias .krd-estadoNota code{
  background:var(--r-papel2); border:1px solid var(--r-linha); border-radius:3px;
  padding:1px 5px; font-size:.9em;
}
#screenNoticias .krd-vazio{
  color:var(--r-soft) !important; font-size:.82rem; padding:18px 0; text-align:center;
}

/* esqueleto de carregamento no formato do conteúdo, não um giro genérico */
#screenNoticias .krd-skel{
  height:280px; border-radius:var(--r-r);
  background:linear-gradient(90deg,#f1f3f6 25%,#f8fafc 50%,#f1f3f6 75%);
  background-size:200% 100%; animation:krdPulso 1.3s ease-in-out infinite;
}
@keyframes krdPulso{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── responsivo ──────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  #screenNoticias .krd-vids,
  #screenNoticias .krd-baseLista{ grid-template-columns:repeat(3, minmax(0,1fr)) }
}
@media (max-width:900px){
  #screenNoticias .krd{ width:calc(100vw - 32px) }
  #screenNoticias .krd-grid{ grid-template-columns:1fr }
  #screenNoticias .krd-vids,
  #screenNoticias .krd-baseLista{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:560px){
  #screenNoticias .krd-vids,
  #screenNoticias .krd-baseLista{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  #screenNoticias .krd-vid,
  #screenNoticias .krd-btn{ transition:none }
  #screenNoticias .krd-vid:hover{ transform:none }
  #screenNoticias .krd-skel{ animation:none }
}