/* Trends by IA (E-35): só o que não está no estilo.css. Opção B (lista e leitura ao lado) com as mudanças da revisão de
   design (revisao-trends-opcoes.md §8). Nada de bloco preto: preto só no selo "K" e no anel de foco; destaque é cartão
   claro. Botão com desenho próprio declara o seu :hover:not(:disabled) (regra de 16/10). */
:root {
  --produto-fundo: #edf2f8; --produto-texto: #25466b; --produto-linha: #cbd8e7;
  --conteudo-fundo: #f4eff7; --conteudo-texto: #5a3b70; --conteudo-linha: #ddcfe7;
  --varejo-fundo: #eef5ec; --varejo-texto: #2f5629; --varejo-linha: #cde1c7;
  --corap-fundo: #fbefe9; --corap-texto: #8a3a1d; --corap-linha: #f0d2c4;
  --preco-fundo: #f7f2e4; --preco-texto: #67500e; --preco-linha: #e6d9b3;
  --importa-fundo: #f8f4ec; --importa-linha: #e8dece;
  --sel-fundo: #f1efea;
  --sombra-barra: 0 -6px 18px rgb(20 18 15 / 8%);
  --icone-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h-2.75c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h7.5c.69 0 1.25-.56 1.25-1.25V9.5'/%3E%3Cpath d='M9 2.5h4.5V7M13.5 2.5 7.5 8.5'/%3E%3C/svg%3E");
  --icone-voltar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E");
  --icone-resumo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 4h7.5M6 8h7.5M6 12h7.5'/%3E%3Ccircle cx='2.75' cy='4' r='.9' fill='black' stroke='none'/%3E%3Ccircle cx='2.75' cy='8' r='.9' fill='black' stroke='none'/%3E%3Ccircle cx='2.75' cy='12' r='.9' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.sidebar nav a[href^="/trends"]::before { -webkit-mask-image: var(--icone-resumo); mask-image: var(--icone-resumo); }

/* ------------------------------------------------------------------ topo numa linha a 1280 (item 2) */
.tr-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 14px; }
.tr-topo h1 { margin: 2px 0 2px; }
.tr-sub { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.tr-ctrl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.quem { min-width: 150px; gap: 4px; font-size: var(--t-2); color: var(--texto-2); }
.quem select { min-height: var(--alto); }
.dia-nav { display: inline-flex; align-items: stretch; min-height: var(--alto); background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--r-2); box-shadow: var(--sombra-1); overflow: hidden; }
.dia-nav a, .dia-nav > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font-size: var(--t-3); font-weight: 600;
  color: var(--texto); text-decoration: none; white-space: nowrap; }
.dia-nav a:hover { background: var(--superficie-3); }
.dia-nav a:focus-visible { outline-offset: -3px; border-radius: var(--r-2); }
.dia-nav .hoje { border-inline: 1px solid var(--linha); font-size: var(--t-4); }
.dia-nav .hoje small { padding: 0 6px; border-radius: var(--r-pilula); background: var(--superficie-3); font-size: var(--t-2); font-weight: 600; color: var(--texto-2); }
.dia-nav .off { color: var(--texto-2); cursor: not-allowed; }

/* ------------------------------------------------------------------ o estado do lote: um cartão de uma linha */
.lote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 14px; padding: 7px 16px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-1); font-size: var(--t-3); color: var(--texto-2); }
.lote.atencao { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--texto); }
.lote.erro { background: var(--erro-fundo); border-color: var(--erro-linha); color: var(--texto); }
.lote-txt { flex: 1 1 340px; min-width: 0; line-height: 1.45; }
.lote .lote-dia { min-height: 34px; padding: 0 12px; font-size: var(--t-3); }
.st { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-4); font-weight: 700; color: var(--texto); white-space: nowrap; }
.st small { font-size: var(--t-2); font-weight: 500; color: var(--texto-2); }
.st .ic { position: relative; display: inline-grid; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ok-linha); background: var(--ok-fundo); }
.st .ic::after { content: ""; position: absolute; inset: 3px; background: var(--ok-texto); -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.st.atencao { color: var(--atencao-texto); }
.st.atencao .ic { border-color: var(--atencao-linha); background: var(--superficie); }
.st.atencao .ic::after { background: var(--atencao-texto); -webkit-mask-image: var(--icone-alerta); mask-image: var(--icone-alerta); }
.st.erro { color: var(--erro-texto); }
.st.erro .ic { border-color: var(--erro-linha); background: var(--superficie); }
.st.erro .ic::after { background: var(--erro-texto); -webkit-mask-image: var(--icone-alerta); mask-image: var(--icone-alerta); }
.st.neutro .ic { border-color: var(--borda-forte); background: var(--superficie-2); }
.st.neutro .ic::after { inset: 5px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--texto-2); -webkit-mask: none; mask: none; }
.funil { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.funil > span { white-space: nowrap; }
.funil b { color: var(--texto); font-weight: 650; }
.funil .sep { color: var(--texto-2); }
.funil .fim b { font-weight: 800; }
.funil .br-cota { margin-left: 4px; padding: 0 8px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie-2); font-size: var(--t-2); color: var(--texto-2); }
details.fontes { margin-left: auto; }
details.fontes[open] { flex-basis: 100%; margin-left: 0; padding-top: 4px; border-top: 1px solid var(--linha-suave); }
details.fontes > summary { flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-3); color: var(--texto-2); }
details.fontes > summary::before { order: 3; }
details.fontes .ver { order: 2; font-weight: 600; color: var(--texto); text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
details.fontes .pausadas { order: 4; font-size: var(--t-2); }
details.fontes > summary:hover .ver { text-decoration-color: currentColor; }
.saude { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--atencao-texto); }
.saude .ic { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icone-alerta) center / contain no-repeat; mask: var(--icone-alerta) center / contain no-repeat; }
.fontes-caixa { padding: 4px 0 6px; }
.f-expl { margin: 4px 0 8px; max-width: 900px; font-size: var(--t-2); line-height: 1.5; color: var(--texto-2); }
.f-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 0 28px; }
.f-lista li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--linha-suave); font-size: var(--t-2); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.f-lista li b { color: var(--texto); font-weight: 650; }
.f-st { justify-self: end; padding: 0 8px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie-2); font-weight: 650; white-space: nowrap; }
.f-st.ok { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok-texto); }
.f-st.buraco { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao-texto); }
.f-st.suspeita { background: var(--erro-fundo); border-color: var(--erro-linha); color: var(--erro-texto); }

/* ------------------------------------------------------------------ pílulas: Brasil, confiança, tipo de aplicação, etiqueta */
.br { display: inline-flex; padding: 0 7px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--superficie-2);
  font-size: 11px; font-weight: 650; line-height: 17px; color: var(--texto-2); white-space: nowrap; }
.conf { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 7px; border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-2); font-weight: 600; line-height: 19px; white-space: nowrap; }
.conf .barras { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.conf .barras i { width: 3px; border-radius: 1px; background: currentColor; opacity: .25; }
.conf .barras i:nth-child(1) { height: 4px; } .conf .barras i:nth-child(2) { height: 7px; } .conf .barras i:nth-child(3) { height: 10px; }
.conf.baixa .barras i:nth-child(1), .conf.media .barras i:nth-child(-n+2), .conf.alta .barras i { opacity: 1; }
.conf.alta { background: var(--ok-fundo); border-color: var(--ok-linha); color: var(--ok-texto); }
.conf.baixa { background: var(--atencao-fundo); border-color: var(--atencao-linha); color: var(--atencao-texto); }
.tipo { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid; border-radius: var(--r-pilula); font-size: 11px;
  font-weight: 700; letter-spacing: .03em; line-height: 19px; white-space: nowrap; }
.tipo.produto { background: var(--produto-fundo); border-color: var(--produto-linha); color: var(--produto-texto); }
.tipo.conteudo { background: var(--conteudo-fundo); border-color: var(--conteudo-linha); color: var(--conteudo-texto); }
.tipo.varejo { background: var(--varejo-fundo); border-color: var(--varejo-linha); color: var(--varejo-texto); }
.tipo.cor { background: var(--corap-fundo); border-color: var(--corap-linha); color: var(--corap-texto); }
.tipo.preco { background: var(--preco-fundo); border-color: var(--preco-linha); color: var(--preco-texto); }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px; border: 1px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--superficie); color: var(--texto); font-size: var(--t-2); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s; }
.chip small { font-size: 11px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--superficie-3); border-color: var(--borda-forte); }
.chip[aria-current="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); font-weight: 700; }
.chip[aria-current="true"]::before { content: ""; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.ic-ext { display: inline-block; flex: none; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--icone-ext) center / contain no-repeat; mask: var(--icone-ext) center / contain no-repeat; }

/* ------------------------------------------------------------------ filtros */
.b-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; border-bottom: 1px solid var(--linha); }
.sub-abas a small { margin-left: 6px; font-size: var(--t-2); font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.b-busca { flex: 0 1 260px; min-width: 180px; margin-bottom: 6px; }
.b-busca input { min-height: 34px; padding: 6px 11px; }
.valores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.valores-rot { margin-right: 2px; font-size: var(--t-2); font-weight: 600; color: var(--texto-2); }
.filtro-ativo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: var(--t-3); color: var(--texto-2); }
.filtro-ativo b { color: var(--texto); }
.sem-res { margin-top: 12px; padding: 22px 20px; text-align: center; background: var(--superficie); border: 1.5px dashed var(--borda-forte);
  border-radius: var(--r-3); color: var(--texto-2); font-size: var(--t-3); }
.sem-res p { margin: 0 auto 6px; max-width: 420px; }

/* ------------------------------------------------------------------ a lista e a leitura ao lado */
.b-grade { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.b-grade.so-lista { display: block; max-width: 900px; }
.b-lado { min-width: 0; }
.b-lista-caixa { overflow: hidden; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-1); }
/* a linha fixa que abre a capa (item 1) */
.b-capa { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px 8px 16px; border-bottom: 1px solid var(--linha);
  color: var(--texto); font-size: var(--t-4); text-decoration: none; background: var(--importa-fundo); transition: background-color .12s; }
.b-capa b { font-weight: 700; }
.b-capa-txt { flex: 1; min-width: 0; }
.b-capa-ic, .b-capa-seta { flex: none; width: 16px; height: 16px; background: currentColor; }
.b-capa-ic { -webkit-mask: var(--icone-resumo) center / contain no-repeat; mask: var(--icone-resumo) center / contain no-repeat; }
.b-capa-seta { width: 12px; height: 12px; color: var(--texto-2); -webkit-mask: var(--icone-chevron) center / contain no-repeat; mask: var(--icone-chevron) center / contain no-repeat; }
.b-capa:hover { background: var(--sel-fundo); }
.b-capa:hover .b-capa-txt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.b-capa[aria-current="true"] { background: var(--sel-fundo); box-shadow: inset 3px 0 0 var(--texto); }
.b-capa:focus-visible, .b-item:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }   /* item 7: o anel inteiro */
.b-lista-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--linha);
  background: var(--superficie-2); font-size: var(--t-2); color: var(--texto-2); }
.b-lista-cab b { color: var(--texto); }
.b-lista { list-style: none; margin: 0; padding: 0; }
.b-lista > li + li { border-top: 1px solid var(--linha-suave); }
.b-item { display: grid; gap: 4px; padding: 11px 16px 12px 18px; color: var(--texto); text-decoration: none; transition: background-color .12s; }
.b-item:hover { background: var(--superficie-2); }
.b-item[aria-current="true"] { background: var(--sel-fundo); box-shadow: inset 3px 0 0 var(--texto); }
.b-item .m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-2); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.b-item .m b { color: var(--texto); font-weight: 650; }
.b-item .t { font-size: var(--t-4); font-weight: 650; line-height: 1.38; }
.b-item:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.b-item[aria-current="true"] .t { font-weight: 700; }
.b-item .e { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--t-2); color: var(--texto-2); }
.etq-txt { min-width: 0; }
.salva-marca { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; color: var(--texto); }
.salva-marca::before { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.ver-mais { padding: 6px 12px 8px; border-top: 1px solid var(--linha-suave); }

.leitor { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-4); box-shadow: var(--sombra-2); scrollbar-width: thin; }
.leitor:empty { display: none; }
.leitura:focus, .leitura h2:focus { outline: none; }
.leitura h2:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 4px; }
.ler-corpo { padding: 20px 26px 22px; }
.so-cel { display: none !important; }
.ler-barra { position: sticky; top: 0; z-index: 2; align-items: center; gap: 10px; padding: 8px 12px; background: var(--fundo-vidro);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linha); }
.ler-barra .fechar { min-height: 44px; padding: 0 12px 0 10px; }
.ler-barra .fechar .ic { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icone-voltar) center / contain no-repeat; mask: var(--icone-voltar) center / contain no-repeat; }
.ler-pos { min-width: 0; font-size: var(--t-2); font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ler-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.ler-meta .fonte { font-weight: 700; color: var(--texto); }
.leitura h2 { margin: 10px 0 6px; font-size: 24px; line-height: 1.22; font-weight: 650; letter-spacing: -.018em; text-wrap: balance; }
.ler-orig { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
/* palavra longa sem espaço (um endereço no título) quebra em vez de empurrar a tela para o lado (RC-4) */
.leitura h2, .ler-orig, .ler-resumo, .b-item .t, .manch a, .manch .m-tit, .fora .f-tit, .capa-pontos p { overflow-wrap: anywhere; }
.ler-orig span { margin-right: 4px; font-weight: 650; }
.ler-sec { margin-top: 20px; }
.ler-sec > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: var(--t-1); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-2); }
.ler-sec > h3 span { letter-spacing: 0; font-size: var(--t-2); }
.ler-resumo { margin: 0; max-width: 70ch; font-size: 16px; line-height: 1.62; color: var(--texto); }
.importa { margin-top: 18px; padding: 13px 18px 14px; background: var(--importa-fundo); border: 1px solid var(--importa-linha); border-radius: var(--r-3); }
.importa h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font-size: var(--t-3); font-weight: 700; color: var(--texto); }
.importa .k { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--preto); color: var(--no-preto);
  font-size: 11px; font-weight: 800; }
.importa p { margin: 0; max-width: 70ch; font-size: 15px; line-height: 1.55; }
.apl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.apl li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 14px;
  border: 1px solid var(--linha); border-radius: var(--r-2); background: var(--superficie); }
.apl .tipo { justify-self: start; }
.apl p { margin: 0; font-size: var(--t-4); line-height: 1.5; }
.cit { margin: 20px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--borda-forte); }
.cit blockquote { margin: 0; }
.cit p { margin: 0; font-size: 15px; font-style: italic; line-height: 1.5; }
.cit figcaption { margin-top: 3px; font-size: var(--t-2); color: var(--texto-2); }
.cores-cit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cores-cit li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-3); }
.cores-cit .pantone { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.cores-cit .par { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.cores-cit .amostra { width: 16px; height: 16px; border: 1px solid var(--borda-forte); border-radius: 50%; }
.etq { display: grid; gap: 8px; margin: 0; }
.etq > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.etq dt { font-size: var(--t-2); font-weight: 600; color: var(--texto-2); }
.etq dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.conf-motivo, .tambem { margin: 16px 0 0; font-size: var(--t-3); color: var(--texto-2); }
.conf-motivo b { color: var(--texto); font-weight: 650; }
.tambem a { color: var(--texto); font-weight: 600; }
.ler-nota { margin: 14px 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--texto-2); }

/* a capa: o resumo do dia no painel de leitura (item 1 e P-1) */
.capa-sub { margin: 0; font-size: var(--t-3); color: var(--texto-2); }
.capa-pontos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }   /* "Começar" na 1ª tela a 1280×800 (RC-7) */
.capa-pontos li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.capa-pontos .n { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--texto); border-radius: 50%; font-size: var(--t-3); font-weight: 700; }
.capa-pontos p { margin: 2px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.55; }
.capa-pontos a { display: inline-flex; align-items: center; min-height: 26px; font-size: var(--t-3); font-weight: 600; color: var(--texto);
  text-decoration-color: var(--borda-forte); text-underline-offset: 3px; }
.capa-pontos a:hover { text-decoration-color: currentColor; }
.capa-pontos a[aria-current="true"] { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.capa-fim { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.ler-vazio { padding: 28px 24px; text-align: center; color: var(--texto-2); font-size: var(--t-3); }
.ler-vazio p { margin: 0 0 6px; }

/* ------------------------------------------------------------------ a barra de ações presa no pé da leitura (item 3) */
.ler-acoes { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--superficie); border-top: 1px solid var(--linha); box-shadow: var(--sombra-barra); }
.ler-acoes .fonte-link { margin-left: auto; }
.ler-acoes .passo { display: none; }
/* Útil: botão de alternar, verde claro com o visto quando marcado (o hover próprio: regra de 16/10) */
button.secondary.bt-util[aria-pressed="true"], button.secondary.bt-util[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--ok-fundo); border-color: var(--ok-texto); color: var(--ok-texto); box-shadow: inset 0 0 0 1px var(--ok-texto); }
button.secondary.bt-util[aria-pressed="true"]::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
/* Anterior e Próxima nas pontas: desabilitado continua legível (tracejado, texto secundário) */
button.secondary.passo:disabled { opacity: 1; background: var(--superficie-2); border-style: dashed; color: var(--texto-2); box-shadow: none; cursor: default; }
/* notícia sem link http/https: "Ler na fonte" vira texto, com o mesmo desenho do desabilitado (RC-3) */
.botao-off { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alto); padding: 0 14px; border: 1px dashed var(--borda-forte);
  border-radius: var(--r-2); background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-3); font-weight: 600; white-space: nowrap; }
/* o rótulo curto do botão marcado (RC-2 e RC-5): no celular sempre; no computador quando a barra não cabe numa linha */
.rot-curto { display: none; }
.ler-acoes.curto .rot-longo { display: none; }
.ler-acoes.curto .rot-curto { display: inline; }
.ic-marca { flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
/* o voto e as coleções, uma linha cada, no fim da leitura */
.ler-meu { margin: 16px 0 0; padding: 9px 14px; display: grid; gap: 2px; background: var(--superficie-2); border: 1px solid var(--linha);
  border-radius: var(--r-2); font-size: var(--t-3); color: var(--texto); }
.ler-meu p { margin: 0; }
.ler-meu b { font-weight: 650; }
/* menus de Não útil e Salvar: a seta depois do rótulo, girando ao abrir (item 10); abrem para cima, dentro do painel */
details.menu { position: relative; }
details.menu > summary { gap: 8px; min-height: var(--alto); padding: 0 12px 0 14px; border: 1px solid var(--borda-forte); border-radius: var(--r-2);
  background: var(--superficie); color: var(--texto); font-size: var(--t-4); font-weight: 600; box-shadow: var(--sombra-1); user-select: none;
  transition: background-color .12s, border-color .12s; }
details.menu > summary::before { display: none; }
details.menu > summary::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; transform: rotate(90deg); transition: transform .15s;
  -webkit-mask: var(--icone-chevron) center / contain no-repeat; mask: var(--icone-chevron) center / contain no-repeat; }
details.menu[open] > summary::after { transform: rotate(-90deg); }
details.menu > summary:hover, details.menu[open] > summary { background: var(--superficie-3); border-color: var(--borda-campo); }
details.menu.marcado > summary { background: var(--superficie); border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); font-weight: 700; }
details.menu.marcado > summary:hover, details.menu.marcado[open] > summary { background: var(--superficie-3); }
.menu-caixa { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 6px); width: 290px; max-width: calc(100vw - 32px); padding: 6px;
  overflow-y: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra-3); }
.menu-caixa .rot-dica { letter-spacing: 0; text-transform: none; font-weight: 500; }
details.salvar .menu-caixa { width: 310px; }
.ler-acoes details.menu .menu-caixa { bottom: calc(100% + 16px); }   /* acima da barra (10 px de respiro dela + 6) */
.ler-acoes > .pedir-quem { left: 16px; }
.menu-caixa .rot { margin: 4px 8px 6px; font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.menu-caixa button.op { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-1); background: transparent; color: var(--texto); font-size: var(--t-4); font-weight: 500; text-align: left; box-shadow: none; }
.menu-caixa button.op:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }
.menu-caixa button.op small { font-size: var(--t-2); font-weight: 500; color: var(--texto-2); }
.menu-caixa button.op[aria-pressed="true"], .menu-caixa button.op[aria-pressed="true"]:hover:not(:disabled) { font-weight: 700; background: var(--sel-fundo); box-shadow: inset 3px 0 0 var(--texto); }
.menu-caixa button.op[aria-pressed="true"] span::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 7px; vertical-align: -2px;
  background: currentColor; -webkit-mask: var(--icone-ok) center / contain no-repeat; mask: var(--icone-ok) center / contain no-repeat; }
.menu-caixa button.op:focus-visible { outline-offset: -2px; }
/* coleção: a caixa de marcar antes do nome, vazia ou com o visto (RC-9) */
.menu-caixa button.op[data-colecao] { justify-content: flex-start; }
.menu-caixa button.op[data-colecao] small { margin-left: auto; }
.menu-caixa button.op[data-colecao] span::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -3px;
  border: 1.5px solid var(--borda-campo); border-radius: 4px; background: var(--superficie); }
.menu-caixa button.op[data-colecao][aria-pressed="true"] span::before { border-color: var(--texto);
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1917' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.menu-caixa button.op[data-colecao][aria-pressed="true"] span::after { display: none; }
.op-lista { max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.menu-dica { margin: 6px 8px 4px; font-size: var(--t-2); line-height: 1.45; color: var(--texto-2); }
.menu-dica.erro { color: var(--erro-texto); }
.nota-salvar { margin: 8px 6px 4px; gap: 4px; font-size: var(--t-2); color: var(--texto-2); }
.nota-salvar input { min-height: 36px; padding: 6px 10px; font-size: var(--t-3); }
.salvar-fim { display: flex; justify-content: flex-end; padding: 6px 6px 4px; }
.salvar-fim button { min-height: 34px; }

/* extras no fim: outras manchetes e o que a IA deixou de fora (recolhido: P-2) */
details.extra { margin-top: 14px; padding: 2px 16px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-3); }
details.extra > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; min-height: 44px; padding: 10px 0;
  font-size: var(--t-4); font-weight: 650; color: var(--texto); }
details.extra > summary::before { align-self: center; }
details.extra > summary small { font-size: var(--t-2); font-weight: 500; color: var(--texto-2); }
details.extra ul { list-style: none; margin: 0 0 10px; padding: 0; }
details.extra li { display: grid; gap: 1px; padding: 9px 0; border-top: 1px solid var(--linha-suave); font-size: var(--t-3); }
.manch a, .fora .f-tit { justify-self: start; font-weight: 600; color: var(--texto); text-decoration-color: var(--borda-forte); }
.manch a:hover, .fora a.f-tit:hover { text-decoration-color: currentColor; }
.fora span.f-tit, .manch .m-tit { justify-self: start; font-weight: 600; }
.manch .m, .fora .f-por { font-size: var(--t-2); color: var(--texto-2); }
.fora .f-fonte { font-size: var(--t-2); font-weight: 650; color: var(--texto-2); }

/* o aviso não cobre a barra de ações: no computador ele sai embaixo, sobre a lista */
.tr ~ .toast { left: calc(var(--lateral-largura) + var(--pad-main)); right: auto; }

@media (max-width: 1180px) {
  .b-grade { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
  .ler-corpo { padding: 18px 20px 20px; }
}

/* ------------------------------------------------------------------ celular: a lista e depois a leitura */
@media (max-width: 900px) {
  .tr-topo h1 { font-size: var(--t-7); }
  .tr-ctrl { width: 100%; }
  .quem { flex: 1 1 140px; }
  .dia-nav { flex: 1 1 auto; min-height: 44px; }
  .dia-nav .hoje { flex: 1; justify-content: center; }
  .lote { padding: 8px 12px; }
  .funil .br-cota { margin-left: 0; }
  details.fontes { margin-left: 0; }
  details.fontes > summary { min-height: 44px; }
  .lote .lote-dia { min-height: 44px; }
  .f-lista li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; }
  .f-lista li > .f-dados { grid-column: 1 / -1; grid-row: 2; }
  .chip { min-height: 36px; }
  .valores { gap: 8px 6px; }
  .b-filtros { border-bottom: 0; }
  .b-busca { flex: 1 1 100%; }
  .b-busca input { min-height: 44px; }
  .b-grade { display: block; }
  .b-capa { min-height: 52px; }
  .ver-mais button { min-height: 44px; }
  .capa-pontos a { min-height: 44px; }

  .leitor { display: none; position: static; max-height: none; overflow: visible; box-shadow: var(--sombra-1); }
  body.lendo .leitor { display: block; }
  body.lendo main.tr > :not(#conteudo), body.lendo #conteudo > :not(.b-grade), body.lendo .b-lado { display: none; }
  .so-cel { display: initial !important; }
  .ler-barra.so-cel { display: flex !important; border-radius: var(--r-4) var(--r-4) 0 0; }
  .ler-corpo { padding: 16px 16px 20px; }
  .leitura h2 { font-size: 22px; }
  .ler-meta .sep { display: none; }
  .ler-resumo { font-size: 15px; }
  .apl li { grid-template-columns: 1fr; gap: 6px; }
  .etq > div { grid-template-columns: 1fr; gap: 4px; }
  body.lendo .leitura { padding-bottom: calc(var(--barra-alto, 120px) + 12px); }

  /* a barra presa no pé da tela: Anterior · Próxima · Ler na fonte em cima; Útil · Não útil · Salvar embaixo (item 5) */
  .ler-acoes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "ant prox fonte" "util nao salvar"; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .ler-acoes > * { min-width: 0; }
  .ler-acoes .passo { display: inline-flex; }
  .ler-acoes [data-passo="-1"] { grid-area: ant; }
  .ler-acoes [data-passo="1"] { grid-area: prox; }
  .ler-acoes .fonte-link { grid-area: fonte; margin-left: 0; }
  .ler-acoes .bt-util { grid-area: util; }
  .ler-acoes .nao-util { grid-area: nao; }
  .ler-acoes .salvar { grid-area: salvar; }
  .ler-acoes button, .ler-acoes a.botao, .ler-acoes .botao-off, .ler-acoes details.menu > summary { width: 100%; min-height: 44px; padding: 4px 8px;
    font-size: var(--t-3); white-space: normal; line-height: 1.15; text-align: center; justify-content: center; }
  .ler-acoes .rot-longo { display: none; }   /* no celular o botão marcado fica curto; o detalhe vai na leitura (RC-2) */
  .ler-acoes .rot-curto { display: inline; }
  .ler-acoes .ic-ext { margin-left: 3px; }
  details.menu { position: static; }
  .ler-acoes .menu-caixa, details.salvar .menu-caixa { left: 8px; right: 8px; width: auto; max-width: none; max-height: 62vh; overflow-y: auto; }
  .ler-acoes details.menu .menu-caixa { bottom: calc(100% + 6px); }
  .menu-caixa button.op { min-height: 44px; }
  .op-lista { max-height: none; }
  .nota-salvar input { min-height: 44px; }
  .salvar-fim button { min-height: 44px; flex: 1; }
  .tr ~ .toast { left: 12px; right: 12px; }
  body.lendo .toast { bottom: calc(var(--barra-alto, 120px) + 8px); }
}