/* ============================================================
   INICIO.CSS — Página Início ("Painel do dia")
   ------------------------------------------------------------
   Carregado SÓ por inicio.html, sobre css/tema.css (mesmos
   tokens/tema do app inteiro — chave `agenda-tema`). Não usa
   agenda.css. Prefixos: `ini-` (página), `cotacao-` (bloco de
   cotações), `noticia-` (bloco de notícias) e `questao-` (bloco de
   questões) — os blocos podem ser
   reaproveitados em outra tela depois.
   ============================================================ */

/* Cores que tema.css não tem: alta/baixa/estável da cotação e o
   traço da sparkline; bolinha de cada assunto de notícia (cor pela
   posição do card, 1..8 e recomeça). Contraste nos 2 temas. */
:root {
  --cotacao-alta: #15803d;
  --cotacao-baixa: #dc2626;
  --cotacao-estavel: #6b7280;
  --ini-raio: 14px;
  --noticia-cor-1: #2563eb;
  --noticia-cor-2: #db2777;
  --noticia-cor-3: #059669;
  --noticia-cor-4: #d97706;
  --noticia-cor-5: #7c3aed;
  --noticia-cor-6: #0891b2;
  --noticia-cor-7: #dc2626;
  --noticia-cor-8: #65a30d;
}

:root[data-tema="escuro"] {
  --cotacao-alta: #34d399;
  --cotacao-baixa: #f87171;
  --cotacao-estavel: #9aa2b1;
  --noticia-cor-1: #60a5fa;
  --noticia-cor-2: #f472b6;
  --noticia-cor-3: #34d399;
  --noticia-cor-4: #fbbf24;
  --noticia-cor-5: #a78bfa;
  --noticia-cor-6: #22d3ee;
  --noticia-cor-7: #f87171;
  --noticia-cor-8: #a3e635;
}

* {
  box-sizing: border-box;
}

.ini-body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.45;
  padding-bottom: 48px;
}

button,
select {
  font-family: inherit;
}

/* ===== Cabeçalho ===== */
.ini-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px clamp(16px, 2.5vw, 40px) 18px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  margin-bottom: 20px;
}

.ini-saudacao {
  margin: 0 0 2px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.ini-data {
  margin: 0;
  font-size: 14px;
  color: var(--cor-texto-suave);
}

.ini-cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ini-link-agenda {
  color: var(--cor-acao);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
}

.ini-link-agenda:hover {
  background: var(--cor-fundo);
}

.ini-btn-redondo {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.ini-btn-redondo:hover {
  border-color: var(--cor-acao);
}

/* ===== Grade de 3 colunas =====
   Esquerda ~300px · centro flexível · direita ~280px. Vira 1 coluna em
   tela estreita (sem largura fixa nem sticky sobrando). */
.ini-grade {
  display: grid;
  /* 1ª coluna (Questões) ajustável no −/+ (js/questoes.js grava a var). */
  grid-template-columns: var(--ini-largura-questoes, clamp(260px, 24vw, 340px)) minmax(0, 1fr) clamp(240px, 20vw, 300px);
  gap: 18px;
  align-items: start;
  padding: 0 clamp(16px, 2.5vw, 40px);
}

.ini-coluna {
  min-width: 0;
}

@media (max-width: 900px) {
  .ini-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Blocos (título + conteúdo) ===== */
.ini-titulo-bloco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Mesma altura com ou sem botões (Cotações tem ↻/Editar) — as linhas de
     baixo das 3 colunas ficam alinhadas. */
  min-height: 38px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.ini-titulo-bloco h2 {
  margin: 0;
  font-size: inherit;
}

.ini-titulo-acoes {
  display: flex;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Questões ===== */
/* Coluna: estado vazio + resumo (cards de novas e revisão + rodapé) */
.questao-vazio {
  border: 1px dashed var(--cor-borda);
  border-radius: var(--ini-raio);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--cor-texto-suave);
}

.questao-vazio p {
  margin: 0 0 12px;
}

.questao-resumo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* display: flex/grid venceria o [hidden] — regras espelhadas */
.questao-vazio[hidden],
.questao-resumo[hidden],
.questao-resolver[hidden],
.questao-opcoes[hidden],
.questao-retorno[hidden],
.questao-erros[hidden],
.questao-placar[hidden] {
  display: none;
}

.questao-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 14px;
}

.questao-card-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.questao-card-rotulo {
  font-size: 14px;
  font-weight: 600;
}

.questao-card-numero {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.questao-card-nota {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.questao-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--cor-fundo);
  overflow: hidden;
}

.questao-barra-preenchida {
  height: 100%;
  border-radius: inherit;
  background: var(--cor-acao);
  transition: width 0.3s;
}

.questao-btn-largo {
  width: 100%;
}

.questao-rodape {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

/* Coluna estreita (−/+ no mínimo): os 4 botões do título descem de linha
   em vez de vazar pra fora da coluna. */
.ini-coluna-esquerda .ini-titulo-bloco {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* −/+ da largura: some em 1 coluna (lá não faz nada) */
.questao-largura {
  display: inline-flex;
  gap: 4px;
}

.questao-largura .ini-btn-pequeno {
  width: 28px;
  padding: 5px 0;
}

@media (max-width: 900px) {
  .questao-largura {
    display: none;
  }
}

/* Resolver: a questão na própria coluna */
.questao-resolver {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 14px;
}

/* Modais de questão: mais largos que os 420px padrão */
.modal.questao-modal {
  max-width: 720px;
}

.questao-importar-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.questao-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.questao-modo {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cor-texto-suave);
}

.questao-filtro,
.questao-meta-dia select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 13px;
  max-width: 100%;
}

.questao-meta {
  margin: 0;
  font-size: 12px;
  color: var(--cor-acao);
  font-weight: 600;
}

/* Enunciado: quebra de linha do texto colado é respeitada */
.questao-enunciado {
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.questao-opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Certo/errado: 2 botões lado a lado */
.questao-opcoes.questao-opcoes-ce {
  flex-direction: row;
}

.questao-opcoes-ce .questao-opcao {
  flex: 1;
  justify-content: center;
  font-weight: 600;
}

.questao-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.questao-opcao:hover:not(:disabled) {
  border-color: var(--cor-acao);
}

.questao-opcao:disabled {
  cursor: default;
}

.questao-letra {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--cor-fundo);
  font-size: 12px;
  font-weight: 700;
}

.questao-opcao-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

.questao-opcao-certa {
  border-color: var(--cotacao-alta);
  background: color-mix(in srgb, var(--cotacao-alta) 12%, var(--cor-painel));
}

.questao-opcao-certa .questao-letra {
  background: var(--cotacao-alta);
  color: #fff;
}

.questao-opcao-errada {
  border-color: var(--cotacao-baixa);
  background: color-mix(in srgb, var(--cotacao-baixa) 12%, var(--cor-painel));
}

.questao-opcao-errada .questao-letra {
  background: var(--cotacao-baixa);
  color: #fff;
}

.questao-retorno {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cor-fundo);
}

.questao-veredito {
  margin: 0;
  font-weight: 700;
}

.questao-veredito-certo {
  color: var(--cotacao-alta);
}

.questao-veredito-errado {
  color: var(--cotacao-baixa);
}

.questao-comentario {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.questao-comentario-vazio {
  color: var(--cor-texto-suave);
}

.questao-fim {
  margin: 8px 0;
  font-size: 15px;
  text-align: center;
}

/* Rodapé (resolver e modais): ação discreta à esquerda, botões à direita */
.questao-acoes,
.modal-acoes.questao-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* "Próxima" fica à direita mesmo com "Excluir" escondido */
.questao-acoes > .ini-btn-acao {
  margin-left: auto;
}

.questao-acoes-direita {
  display: flex;
  gap: 8px;
}

.questao-excluir {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}

.questao-excluir:hover {
  color: var(--cotacao-baixa);
}

/* Importar */
.questao-ajuda {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.questao-campo-importar {
  width: 100%;
  min-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.questao-resultado {
  margin: 0;
  font-size: 14px;
  white-space: pre-line;
}

.questao-resultado-ok {
  color: var(--cotacao-alta);
}

.questao-resultado-erro {
  color: var(--cotacao-baixa);
}

.questao-erros {
  margin: 0;
  padding-left: 18px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

/* Placar */
.questao-meta-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.questao-placar-rolagem {
  overflow-x: auto;
}

.questao-placar {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.questao-placar th,
.questao-placar td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--cor-borda);
  text-align: right;
  white-space: nowrap;
}

.questao-placar th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cor-texto-suave);
}

.questao-placar th:first-child,
.questao-placar .questao-placar-materia {
  text-align: left;
  white-space: normal;
}

.questao-placar-apagar {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.questao-placar-apagar:hover {
  color: var(--cotacao-baixa);
  background: var(--cor-fundo);
}

.questao-placar-vazio {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.questao-backup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

/* ===== Botões ===== */
.ini-btn-pequeno {
  border: 1px solid var(--cor-borda);
  background: var(--cor-painel);
  color: var(--cor-texto);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ini-btn-pequeno:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

.ini-btn-pequeno:disabled {
  opacity: 0.5;
  cursor: default;
}

.ini-btn-acao {
  border: none;
  background: var(--cor-acao);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ini-btn-acao:hover {
  background: var(--cor-acao-hover);
}

.ini-btn-acao:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ===== Cotações ===== */
/* Contêiner dos grupos (Moedas / Criptomoedas / Empresas) */
.cotacao-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.cotacao-lista[hidden] {
  display: none;
}

/* Grupo: título discreto + grade de tiles. Grupo sem item fica `hidden`
   (o display: grid venceria o [hidden] sem a regra espelhada). */
.cotacao-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.cotacao-grupo[hidden] {
  display: none;
}

/* Separador sutil ENTRE grupos (o 1º visível não tem linha em cima). */
.cotacao-grupo:not([hidden]) ~ .cotacao-grupo:not([hidden]) {
  border-top: 1px solid var(--cor-borda);
  padding-top: 12px;
}

.cotacao-grupo-titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cor-texto-suave);
}

.cotacao-grupo-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.cotacao-tile {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  padding: 9px 12px;
}

.cotacao-tile-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cor-texto-suave);
}

.cotacao-tile-linha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
}

.cotacao-tile-valor {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.cotacao-tile-variacao {
  font-size: 11.5px;
  font-weight: 700;
}

/* Linha "7d ▲0,74% · 30d ▼1,90%" (cores pelas mesmas classes abaixo) */
.cotacao-tile-periodos {
  margin-top: 2px;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.cotacao-tile-periodos span {
  font-weight: 600;
}

.cotacao-alta { color: var(--cotacao-alta); }
.cotacao-baixa { color: var(--cotacao-baixa); }
.cotacao-estavel { color: var(--cotacao-estavel); }

.cotacao-sparkline {
  display: block;
  width: 100%;
  height: 18px;
  margin-top: 4px;
  overflow: visible;
}

/* Estados do tile */
.cotacao-tile-carregando .cotacao-tile-valor {
  color: var(--cor-texto-suave);
  font-weight: 400;
  font-size: 13px;
}

.cotacao-tile-indisponivel .cotacao-tile-valor {
  color: var(--cor-texto-suave);
  font-weight: 400;
  font-size: 13px;
}

.cotacao-tile-detalhe {
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.cotacao-fonte {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

/* Estado vazio */
.cotacao-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--ini-raio);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--cor-texto-suave);
}

.cotacao-vazio[hidden] {
  display: none;
}

.cotacao-vazio p {
  margin: 0;
}

/* Mensagem de erro do bloco inteiro (falha ao ler o banco) */
.ini-erro-bloco {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--cotacao-baixa);
}

/* ===== Modal (agenda.css não é carregado aqui) ===== */
.modal {
  margin: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-painel);
  color: var(--cor-texto);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  margin: 0;
}

.modal-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
}

/* Lista das seguidas (com ×) */
.cotacao-seguidas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cotacao-seguidas[hidden] {
  display: none;
}

/* Subtítulo de grupo dentro da lista do modal */
.cotacao-seguidas-grupo {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cor-texto-suave);
}

.cotacao-seguidas-grupo:first-child {
  margin-top: 0;
}

.cotacao-seguida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 14px;
}

.cotacao-seguida-par {
  color: var(--cor-texto-suave);
  font-size: 12px;
  margin-left: 6px;
}

.cotacao-remover {
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.cotacao-remover:hover {
  color: var(--cotacao-baixa);
  background: var(--cor-fundo);
}

.cotacao-seguidas-vazio {
  margin: 0;
  font-size: 13px;
  color: var(--cor-texto-suave);
}

/* Adicionar: select + botão */
.cotacao-adicionar {
  display: flex;
  gap: 8px;
}

.cotacao-adicionar[hidden] {
  display: none;
}

.cotacao-adicionar select {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-size: 14px;
}

/* ===== Notícias ===== */
.noticia-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noticia-lista[hidden] {
  display: none;
}

/* Card por assunto: cabeçalho-botão (abre/recolhe) + manchetes */
.noticia-card {
  background: var(--cor-painel);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  overflow: hidden;
}

.noticia-card-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--cor-texto);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.noticia-card-cabecalho:hover {
  background: var(--cor-fundo);
}

.noticia-bolinha {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--noticia-cor-1);
}

.noticia-cor-1 { background: var(--noticia-cor-1); }
.noticia-cor-2 { background: var(--noticia-cor-2); }
.noticia-cor-3 { background: var(--noticia-cor-3); }
.noticia-cor-4 { background: var(--noticia-cor-4); }
.noticia-cor-5 { background: var(--noticia-cor-5); }
.noticia-cor-6 { background: var(--noticia-cor-6); }
.noticia-cor-7 { background: var(--noticia-cor-7); }
.noticia-cor-8 { background: var(--noticia-cor-8); }

.noticia-card-nome {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.noticia-contagem {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

.noticia-chevron {
  flex: none;
  color: var(--cor-texto-suave);
  font-size: 12px;
  transition: transform 0.15s ease;
}

.noticia-card-fechado .noticia-chevron {
  transform: rotate(-90deg);
}

.noticia-itens {
  list-style: none;
  margin: 0;
  padding: 0 14px 4px;
}

.noticia-itens[hidden] {
  display: none;
}

.noticia-item {
  padding: 9px 0;
  border-top: 1px solid var(--cor-borda);
}

.noticia-titulo {
  display: block;
  color: var(--cor-texto);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.noticia-titulo:hover {
  color: var(--cor-acao);
  text-decoration: underline;
}

.noticia-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--cor-texto-suave);
  overflow-wrap: anywhere;
}

/* "buscando…" / "Nada nas últimas 24 h" / "indisponível agora" */
.noticia-estado {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.noticia-estado[hidden] {
  display: none;
}

.noticia-rodape {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--cor-texto-suave);
}

.noticia-aviso {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

/* Estado vazio */
.noticia-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--ini-raio);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--cor-texto-suave);
}

.noticia-vazio[hidden] {
  display: none;
}

.noticia-vazio p {
  margin: 0;
}

/* ----- Modal de assuntos ----- */
.noticia-assuntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.noticia-assuntos[hidden] {
  display: none;
}

.noticia-assunto {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font-size: 14px;
}

.noticia-assunto-texto {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.noticia-assunto input {
  flex: 1;
  min-width: 0;
}

.noticia-icone {
  flex: none;
  border: none;
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.noticia-icone:hover {
  color: var(--cor-acao);
  background: var(--cor-fundo);
}

.noticia-icone-remover:hover {
  color: var(--cotacao-baixa);
}

.noticia-icone:disabled {
  opacity: 0.5;
  cursor: default;
}

.noticia-assuntos-vazio,
.noticia-contador {
  margin: 0;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.noticia-mensagem {
  margin: 0;
  font-size: 13px;
  color: var(--cotacao-baixa);
}

.noticia-adicionar {
  display: flex;
  gap: 8px;
}

.noticia-adicionar[hidden] {
  display: none;
}

.noticia-adicionar input,
.noticia-assunto input,
.noticia-frequencia select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 14px;
}

.noticia-adicionar input {
  flex: 1;
  min-width: 0;
}

.noticia-sugestoes-bloco[hidden] {
  display: none;
}

.noticia-sugestoes-rotulo {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--cor-texto-suave);
}

.noticia-sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.noticia-sugestao {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.noticia-sugestao:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

.noticia-sugestao:disabled {
  opacity: 0.5;
  cursor: default;
}

.noticia-frequencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}

.noticia-frequencia select {
  min-width: 0;
  max-width: 100%;
}