/* =============================================================================
   CARDS DE MERCADO — base compartilhada por views/mercado.html e views/dashboard.html
   -----------------------------------------------------------------------------
   Até 17/09/2026 este bloco existia DUPLICADO dentro do <style> das duas views:
   26 regras idênticas e 7 divergentes só em espaçamento. Toda mudança de card
   exigia lembrar de editar os dois arquivos — e esquecer um não dava erro, só
   deixava as telas diferentes.

   Os valores aqui são os da tela de Mercado. O dashboard é uma versão mais
   compacta e mantém no próprio <style> apenas os 7 overrides de espaçamento,
   que continuam vencendo porque o <style> da view é injetado depois deste
   arquivo.

   ⚠️ É este o arquivo a editar para qualquer .dm-*, .seta-*, .stock-* ou
   .noticia-*. Mexer em css/global.css não tem efeito nenhum sobre eles.
   ============================================================================= */

.dm-secao { margin-bottom: 24px; }

.dm-secao-titulo {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
  margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 2px solid var(--borda);
}

/* São 12 cotações (3 câmbio + 9 preço, 5 delas do CCCMG). Com auto-fit de
   ~170px, em Full HD cabiam 10 numa fileira só e viravam uma régua de
   números. O teto de colunas mantém a seção em 2 linhas.
   ⚠️ Esta regra vence a de css/global.css: o <style> da view é injetado
   depois. Mexer só no global.css não tem efeito nenhum aqui. */
.dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
/* ⚠️ O teto de colunas vale SÓ para a grade de cotações (.dm-grid-cotacoes).
   Aplicá-lo ao .dm-grid genérico quebra as seções com poucos cards: com
   `repeat(6,1fr)` as 6 faixas existem sempre, então o card único do Safra
   ficava com 1/6 da largura. O `auto-fit` do .dm-grid colapsa faixa vazia e
   deixa o card sozinho ocupar a linha inteira — é esse o comportamento a
   preservar em Safra, Stocks e Clima. */
@media (min-width: 1250px) { .dm-grid-cotacoes { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) and (max-width: 1249px) { .dm-grid-cotacoes { grid-template-columns: repeat(4, 1fr); } }
.dm-grid > .dm-card { min-width: 0; overflow: hidden; }
.dm-grid-clima {
  grid-template-columns: repeat(5, 1fr);
}
.dm-grid-clima .dm-card .text-xs { word-wrap: break-word; overflow-wrap: break-word; }
@media (max-width: 1200px) {
  .dm-grid-clima { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .dm-grid-clima { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dm-grid-clima { grid-template-columns: 1fr 1fr; }
}

/* Stocks — cards menores em até 4 colunas */
.dm-grid-stocks { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .dm-grid-stocks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .dm-grid-stocks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .dm-grid-stocks { grid-template-columns: 1fr; } }

.stock-card { padding: 14px 16px; }
.stock-ticker {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
  margin-bottom: 4px;
}
.stock-empresa {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-success { color: var(--sucesso); }
.text-danger  { color: var(--erro); }

.dm-card {
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: var(--transicao);
}
.dm-card             { display: flex; flex-direction: column; }
/* Segunda linha do card. O min-height de 2 linhas é o que mantém os valores
   na mesma altura quando um card quebra ("Arábica · tipo 6 · Dura Riada")
   e o vizinho não. */
.dm-detalhe          { font-size: .78rem; color: var(--texto-medio); line-height: 1.25;
                       min-height: 2.5em; margin-top: -4px; margin-bottom: 8px;
                       overflow-wrap: anywhere; }
.dm-fonte            { margin-top: auto; }
.dm-card:hover       { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }
.dm-card-destaque    { border-left: 3px solid var(--dourado); background: var(--dourado-pale); }

.dm-label   {
  font-size: .68rem; font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
}
.variacao-seta { font-size: .75rem; font-weight: 700; margin-left: 2px; }
.seta-alta     { color: #16a34a; }
.seta-baixa    { color: #dc2626; }
.seta-neutra   { color: var(--texto-suave); font-weight: 400; }
.seta-neutra   { color: var(--texto-suave); font-weight: 400; }
.dm-valor   {
  font-size: 1.6rem; font-weight: 600;
  color: var(--marrom); line-height: 1;
  display: flex; align-items: baseline; gap: 3px;
}
.dm-unidade { font-size: .72rem; color: var(--texto-suave); font-weight: 400; }
.dm-fonte   { font-size: .68rem; color: var(--texto-suave); margin-top: 6px; }

.dm-var-up   { font-size: .78rem; font-weight: 600; color: var(--sucesso); }
.dm-var-down { font-size: .78rem; font-weight: 600; color: var(--erro); }

.dm-noticia {
  background: var(--fundo-card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 12px 16px;
  transition: var(--transicao);
}
.dm-noticia-link { cursor: pointer; }
.dm-noticia-link:hover {
  border-color: var(--marrom);
  background: var(--dourado-pale);
}

@media (max-width: 700px) {
  .dm-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .dm-grid { grid-template-columns: 1fr; }
}

.noticia-card { padding: 16px 18px; }
.noticia-categoria {
  font-size: .65rem; font-weight: 700; color: var(--marrom);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.noticia-titulo {
  font-size: 1.1rem; font-weight: 700; color: var(--marrom);
  line-height: 1.25; margin: 0 0 10px 0;
}
.noticia-resumo {
  font-size: .85rem; line-height: 1.55; color: var(--texto);
  margin: 0 0 12px 0;
}
.noticia-valor {
  font-size: 1.4rem; font-weight: 700; color: var(--dourado);
  line-height: 1; margin-bottom: 10px;
}
.noticia-fonte {
  display: inline-block; font-size: .8rem; color: var(--dourado);
  text-decoration: none; margin-bottom: 8px;
}
.noticia-fonte:hover { text-decoration: underline; }
.noticia-meta { color: var(--texto-suave); }