/* =============================================================================
   INFORMATIVOS — tela de boletins digeridos
   -----------------------------------------------------------------------------
   Em arquivo, não em bloco inline no template: estilo inline em template
   injetado pelo Angular não é aplicado de forma confiável — foi o que derrubou
   o layout do dashboard em 17/09/2026.
   ============================================================================= */

/* Uma coluna sempre: o card carrega título, subtítulo e até 4 indicadores, e
   em duas colunas o texto fica espremido. A grade de destaques DENTRO do card
   é que se adapta à largura. */
.info-lista { display: grid; grid-template-columns: 1fr; gap: 14px; }

.info-card {
  padding: 18px 20px;
  cursor: pointer;
  transition: var(--transicao);
  display: flex; flex-direction: column; gap: 8px;
}
.info-card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }

.info-card-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.info-periodo {
  font-size: .78rem; font-weight: 600; color: var(--marrom);
  text-transform: capitalize;
}
.info-periodicidade { text-transform: lowercase; }

.info-card-titulo {
  font-size: 1.05rem; font-weight: 700; color: var(--texto);
  line-height: 1.3; margin: 2px 0 0 0;
}
.info-card-subtitulo {
  font-size: .85rem; line-height: 1.5; color: var(--texto-medio); margin: 0;
}

/* Grade de indicadores. Repetida na prévia do card e no detalhe. */
/* auto-FIT, não auto-fill. Com auto-fill o navegador cria todas as faixas que
   cabem na largura e deixa vazias as que sobram — 4 indicadores num card largo
   ficavam espremidos à esquerda, com metade da linha em branco. O auto-fit
   colapsa a faixa vazia e os itens esticam para ocupar o card inteiro.
   Mesmo mecanismo que afetou o cartão do Safra na tela de Mercado. */
.info-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.info-destaque {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 8px 10px;
  min-width: 0;
}
.info-destaque-rotulo {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); line-height: 1.25;
  /* Rótulo é longo ("Exportação total – agosto/2026") e precisa caber em 2 linhas
     sem empurrar o valor para fora do cartão. */
  min-height: 2.2em; overflow-wrap: anywhere;
}
.info-destaque-valor {
  font-size: .95rem; font-weight: 700; color: var(--marrom);
  margin-top: 3px; overflow-wrap: anywhere;
}
.info-destaque-var { font-size: .72rem; font-weight: 600; margin-top: 2px; }

.info-card-rodape {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--borda);
}
.info-abrir {
  margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--dourado);
}

/* --- Detalhe --- */
.info-modal { max-width: 860px; }
.info-titulo { font-size: 1.35rem; font-weight: 700; color: var(--texto); line-height: 1.3; margin: 0 0 6px 0; }
.info-subtitulo { font-size: .92rem; color: var(--texto-medio); line-height: 1.5; margin: 0 0 16px 0; }

.info-resumo { margin-top: 18px; }
.info-resumo p {
  font-size: .9rem; line-height: 1.65; color: var(--texto);
  margin: 0 0 12px 0; text-align: justify;
}