/* Página de novidades (/main/novidades/): compacta; cada versão é uma linha que abre; cada item tem a etiqueta
   colorida do tipo. Usa os tokens do portal-v2.css e acrescenta só as cores dos tipos (claro e escuro). */
:root {
  --nov-novo: #1a73e8;      --nov-novo-bg: #e8f0fe;
  --nov-melhoria: #188038;  --nov-melhoria-bg: #e6f4ea;
  --nov-correcao: #b06000;  --nov-correcao-bg: #fef7e0;
  --nov-seguranca: #8430ce; --nov-seguranca-bg: #f3e8fd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nov-novo: #8ab4f8;      --nov-novo-bg: #22324a;
    --nov-melhoria: #81c995;  --nov-melhoria-bg: #1d3427;
    --nov-correcao: #fdd663;  --nov-correcao-bg: #3a3116;
    --nov-seguranca: #d7aefb; --nov-seguranca-bg: #352646;
  }
}
:root[data-theme="dark"] {
  --nov-novo: #8ab4f8;      --nov-novo-bg: #22324a;
  --nov-melhoria: #81c995;  --nov-melhoria-bg: #1d3427;
  --nov-correcao: #fdd663;  --nov-correcao-bg: #3a3116;
  --nov-seguranca: #d7aefb; --nov-seguranca-bg: #352646;
}
.pg-novidades { background: var(--bg); color: var(--fg); line-height: 1.45; }

.nov-topo { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.nov-topo__logo { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; flex: none; }
.nov-topo__nome { font-size: 14px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nov-topo__voltar { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 13px; white-space: nowrap; }
.nov-topo__voltar:hover { text-decoration: underline; }

.nov { max-width: 960px; margin-inline: auto; padding: 14px 16px 32px; }
.nov-faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
             padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.nov-faixa__titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.nov-faixa h1 { font-size: 20px; font-weight: 500; margin: 0; }
.nov-atual { font-size: 12.5px; color: var(--soft); }
.nov-atual b { font-family: var(--f-mono); font-weight: 500; color: var(--fg); }

.nov-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.nov-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
            border-radius: 999px; padding: 2px 9px 2px 6px; font: inherit; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.nov-chip:hover { background: var(--chip); }
.nov-chip:focus-visible, .nov-versao summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nov-chip[aria-pressed="true"] { background: var(--cor-bg); border-color: var(--cor); color: var(--cor); font-weight: 500; }
.nov-chip--todos { --cor: var(--accent); --cor-bg: var(--accent-soft); }
.nov-qtd { font-family: var(--f-mono); font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; }
.nov-chip[aria-pressed="true"] .nov-qtd { color: inherit; }
.nov-ic { width: 15px; height: 15px; flex: none; }
.nov-chip:not(.nov-chip--todos) .nov-ic { color: var(--cor); }

/* Cores por tipo: o mesmo par cor/fundo no filtro, na contagem e na etiqueta do item */
.nov-t-novo { --cor: var(--nov-novo); --cor-bg: var(--nov-novo-bg); }
.nov-t-melhoria { --cor: var(--nov-melhoria); --cor-bg: var(--nov-melhoria-bg); }
.nov-t-correcao { --cor: var(--nov-correcao); --cor-bg: var(--nov-correcao-bg); }
.nov-t-seguranca { --cor: var(--nov-seguranca); --cor-bg: var(--nov-seguranca-bg); }

.nov-versao { border-bottom: 1px solid var(--line-soft); }
.nov-versao summary { display: grid; grid-template-columns: 14px 64px 84px minmax(0, 1fr) auto; align-items: center; gap: 8px;
                      padding-block: 7px; cursor: pointer; list-style: none; }
.nov-versao summary::-webkit-details-marker { display: none; }
.nov-seta { width: 14px; height: 14px; color: var(--soft); transition: transform .15s; }
.nov-versao[open] .nov-seta { transform: rotate(90deg); }
.nov-v-num { font-family: var(--f-mono); font-size: 13px; font-weight: 500; }
.nov-v-data { font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.nov-v-titulo { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nov-selo { font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
            background: var(--accent-soft); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.nov-v-contas { display: flex; gap: 4px; }
.nov-conta { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-mono); font-size: 11px; color: var(--cor);
             background: var(--cor-bg); border-radius: 4px; padding: 0 5px 0 3px; font-variant-numeric: tabular-nums; }
.nov-conta .nov-ic { width: 12px; height: 12px; }

.nov-itens { list-style: none; margin: 0; padding: 0 0 8px 22px; display: grid; gap: 3px; }
/* A etiqueta fica sob a versão e a data; o texto começa na coluna do título (14 + 64 + 84 + gaps do resumo) */
.nov-item { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; }
.nov-etiqueta { display: inline-flex; align-items: center; gap: 4px; color: var(--cor); background: var(--cor-bg); border-radius: 4px;
                padding: 0 6px 0 4px; font-size: 11.5px; font-weight: 500; line-height: 19px; justify-self: start; white-space: nowrap; }
.nov-etiqueta .nov-ic { width: 13px; height: 13px; }
.nov-item__texto { padding-top: 1px; }

.nov-vazio { color: var(--soft); padding: 16px 0; margin: 0; }
.nov-rodape { margin: 16px 0 0; color: var(--soft); font-size: 12px; }

/* Tablet: a contagem por tipo sai do resumo (o filtro já mostra) */
@media (max-width: 720px) {
  .nov-v-contas { display: none; }
  .nov-versao summary { grid-template-columns: 14px 56px 74px minmax(0, 1fr); }
  .nov-item { grid-template-columns: 138px minmax(0, 1fr); }
}
/* Celular: data embaixo da versão; etiqueta só com o ícone */
@media (max-width: 480px) {
  .nov-versao summary { grid-template-columns: 14px 64px minmax(0, 1fr); row-gap: 0; }
  .nov-v-data { grid-column: 2; grid-row: 2; font-size: 11px; }
  .nov-v-titulo { grid-column: 3; grid-row: 1 / span 2; white-space: normal; }
  .nov-itens { padding-left: 0; }
  .nov-item { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; }
  .nov-etiqueta { padding: 0 4px; }
  .nov-etiqueta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nov-chip { padding: 2px 8px 2px 5px; }
}
@media (prefers-reduced-motion: reduce) { .nov-seta { transition: none; } }