/* Direção visual "hora azul": o painel é aberto antes do pregão. Fundo de céu de pré-amanhecer,
   e o dourado da primeira luz reservado ao que está acontecendo agora. */
:root {
  --madrugada: #0E1420;   /* fundo da página */
  --pre-abertura: #151C2A; /* fundo das caixas */
  --elevado: #1B2433;      /* botões, campos, destaque interno */
  --linha: #243044;
  --linha-forte: #34425A;
  --papel: #E4E8EE;
  --papel-2: #A5AFBE;
  --papel-3: #75819A;
  --primeira-luz: #F2C14E; /* só para "agora" */
  --alta: #3CCB7F;
  --baixa: #F2555A;
  --raio: 6px;
  --largo: 118%;     /* relógio */
  --estreito: 88%;   /* listas densas */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--madrugada);
  color: var(--papel);
  font: 400 16.5px/1.45 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primeira-luz); outline-offset: 2px; border-radius: 3px; }
.num, .tabela td.n, time { font-variant-numeric: tabular-nums; }

/* Sem isto, o navegador pinta de branco o fundo dos widgets transparentes (esquema de cor diferente). */
.tradingview-widget-container iframe { color-scheme: normal; }

/* ---------- cabeçalho (fixo ao rolar) ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto auto minmax(320px, 1fr) auto; align-items: center; gap: 12px 32px;
  padding: 12px 20px 10px; background: var(--madrugada); border-bottom: 1px solid var(--linha);
}
body.rolou .topo { box-shadow: 0 10px 28px rgba(4, 8, 16, .55); }

.marca h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.005em; }
.marca p { margin: 1px 0 0; color: var(--papel-2); font-size: 16.5px; }

.relogio-principal { display: flex; flex-direction: column; line-height: 1; }
.relogio-principal b {
  font-size: 41px; font-weight: 500; font-stretch: var(--largo); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.relogio-principal span { font-size: 14.5px; color: var(--papel-3); margin-top: 5px; }

/* Faixa do dia: 24 h no horário de Brasília, sessão de cada praça e a linha do agora. */
.faixa-dia { position: relative; font-size: 15.5px; min-width: 0; max-width: 760px; }
.faixa-linha { display: grid; grid-template-columns: 90px 1fr 138px; align-items: center; gap: 10px; height: 19px; }
.faixa-linha .praca { color: var(--papel-2); font-stretch: var(--estreito); white-space: nowrap; }
.faixa-linha .estado { color: var(--papel-3); font-stretch: var(--estreito); white-space: nowrap; font-variant-numeric: tabular-nums; }
.faixa-linha.aberta .praca { color: var(--papel); }
.faixa-linha.aberta .estado { color: var(--alta); }
.trilho { position: relative; height: 7px; background: var(--elevado); border-radius: 3px; }
.sessao { position: absolute; top: 0; bottom: 0; background: var(--linha-forte); border-radius: 3px; }
.faixa-linha.aberta .sessao { background: rgba(60, 203, 127, .75); }
.faixa-eixo { display: grid; grid-template-columns: 90px 1fr 138px; gap: 10px; margin-top: 3px; }
.faixa-eixo .marcas { position: relative; height: 15px; color: var(--papel-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.faixa-eixo .marcas span { position: absolute; transform: translateX(-50%); }
.faixa-eixo .marcas span:first-child { transform: none; }
.faixa-eixo .marcas span:last-child { transform: translateX(-100%); }
.faixa-sobreposta {
  position: absolute; top: 0; left: 0; right: 0; bottom: 16px; pointer-events: none;
  display: grid; grid-template-columns: 90px 1fr 138px; gap: 10px;
}
.faixa-sobreposta > div { position: relative; }
.agora {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--primeira-luz); border-radius: 1px; box-shadow: 0 0 8px rgba(242, 193, 78, .6);
}
.fim-de-semana .sessao { opacity: .4; }

.botao-icone {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; justify-self: end;
  background: none; border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 10px;
  font-size: 16px; color: var(--papel-2);
}
.botao-icone:hover { color: var(--papel); border-color: var(--linha-forte); }
.botao-icone svg { width: 14px; height: 14px; }
.botao-icone path { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Botão e gaveta do resumo (ocultos enquanto a IA estiver desligada). */
.botao-resumo {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer;
  background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 5px 11px; font-size: 15px; font-weight: 600;
}
.botao-resumo svg { width: 12px; height: 12px; }
.botao-resumo path { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.botao-resumo[aria-expanded="true"] svg { transform: rotate(180deg); }
.ponto-novo { width: 7px; height: 7px; border-radius: 50%; background: var(--alta); }
.gaveta-resumo {
  position: absolute; top: calc(100% + 6px); left: 20px;
  width: min(920px, calc(100vw - 32px)); max-height: 78vh; overflow-y: auto;
  background: var(--pre-abertura); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 16px 18px; box-shadow: 0 18px 50px rgba(4, 8, 16, .6);
}

/* Relógio flutuante: só no celular, quando o cabeçalho sai da tela. */
.relogio-flutuante {
  display: none; position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--pre-abertura); border: 1px solid var(--linha-forte); border-radius: 999px; padding: 3px 14px;
  font-size: 18.5px; font-weight: 500; font-stretch: var(--largo); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 20px rgba(4, 8, 16, .5);
}

.fita { border-bottom: 1px solid var(--linha); min-height: 46px; }

/* ---------- caixas (GridStack) ---------- */
.grid-stack { margin: 8px 14px 0; }
.painel {
  background: var(--pre-abertura); border: 1px solid transparent; border-radius: var(--raio);
  padding: 12px 14px; display: flex; flex-direction: column; overflow: hidden !important;
}
.painel-corpo { flex: 1; min-height: 0; position: relative; }
.rolavel { overflow-y: auto; }

.painel-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; cursor: grab; user-select: none;
}
.painel-topo.estatico { cursor: default; }
.painel h2, .gaveta-resumo h2 { margin: 0; font-size: 17.5px; font-weight: 650; letter-spacing: -.005em; }
/* Alça de arrastar: aparece só ao passar o mouse na caixa. */
.grid-stack .painel h2::before {
  content: ""; display: inline-block; width: 8px; height: 12px; margin-right: 8px; vertical-align: -1px;
  background: radial-gradient(circle, var(--papel-3) 1.2px, transparent 1.4px) 0 0 / 4px 4px;
  opacity: 0; transition: opacity .15s;
}
.grid-stack .painel:hover h2::before { opacity: 1; }
.carimbo { font-size: 14px; color: var(--papel-3); }
.vazio { color: var(--papel-3); margin: 8px 0; }
.estrelas { color: var(--primeira-luz); letter-spacing: 1px; }

/* Caixa sendo movida: iframes não capturam o mouse e o texto não é selecionado. */
body.movendo iframe { pointer-events: none; }
body.movendo { user-select: none; }
.grid-stack-item.ui-draggable-dragging > .painel,
.grid-stack-item.ui-resizable-resizing > .painel { border-color: var(--linha-forte); box-shadow: 0 14px 40px rgba(4, 8, 16, .6); }
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  background: rgba(242, 193, 78, .06); border: 1px dashed rgba(242, 193, 78, .5); border-radius: var(--raio);
}
.grid-stack-item > .ui-resizable-se { opacity: 0; filter: invert(1); transition: opacity .15s; }
.grid-stack-item:hover > .ui-resizable-se { opacity: .5; }

/* ---------- resumo ---------- */
.manchete { font-size: 23px; line-height: 1.3; font-weight: 600; margin: 2px 0 12px; text-wrap: balance; }
.resumo-texto p { margin: 0 0 10px; color: var(--papel); max-width: 72ch; }
.regioes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 14px 0; }
.regiao { background: var(--elevado); border-radius: var(--raio); padding: 9px 11px; }
.regiao h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--papel-2); }
.regiao p { margin: 0; font-size: 15.5px; }
.bloco-titulo { font-size: 14.5px; font-weight: 600; color: var(--papel-2); margin: 16px 0 6px; }
.pontos { margin: 0; padding-left: 18px; }
.relevantes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.relevantes li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 8px 10px; border-radius: var(--raio); background: var(--elevado); }
.relevantes a { font-weight: 600; text-decoration: none; }
.relevantes p { margin: 2px 0 0; font-size: 15px; color: var(--papel-2); }
.aviso { border: 1px dashed var(--linha-forte); border-radius: var(--raio); padding: 12px 14px; color: var(--papel-2); }

.tag { font-size: 12.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; margin-top: 2px; }
.tag.alto, .tag.alta { background: rgba(242, 85, 90, .14); color: #FF8E91; }
.tag.medio, .tag.media { background: rgba(165, 175, 190, .12); color: var(--papel-2); }

/* ---------- tabelas (placar e extras) ---------- */
.placar-grupo + .placar-grupo { margin-top: 14px; }
.placar-grupo h3, .extras h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--papel-2); }
.extras h3 .carimbo { font-weight: 400; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15.5px; font-stretch: var(--estreito); }
.tabela td { padding: 4px 0; border-bottom: 1px solid var(--linha); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.n { text-align: right; white-space: nowrap; padding-left: 12px; }
.tabela .cod { display: inline-block; min-width: 30px; font-weight: 650; color: var(--papel-2); }
.sobe { color: var(--alta); }
.desce { color: var(--baixa); }
.igual { color: var(--papel-3); }

/* ---------- abas ---------- */
.abas { display: flex; gap: 2px 4px; flex-wrap: wrap; margin-bottom: 10px; }
.abas button, .chips button {
  background: none; border: 1px solid transparent; border-radius: var(--raio);
  padding: 4px 9px; font-size: 15px; cursor: pointer; color: var(--papel-2);
}
.abas button:hover, .chips button:hover { color: var(--papel); background: var(--elevado); }
.abas button[aria-selected="true"], .chips button[aria-selected="true"] {
  background: var(--elevado); border-color: var(--linha-forte); color: var(--papel); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primeira-luz);
}
.abas.compacta { margin: 0; }

/* Painéis que preenchem a caixa inteira (widgets acompanham o redimensionamento). */
.aba-painel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.aba-painel .widget { flex: 1; min-height: 120px; }
.extras { margin-top: 8px; max-height: 45%; overflow-y: auto; }
.widget .tradingview-widget-container { height: 100%; }

/* Mapa de ações (treemap próprio). */
#mapa { overflow: hidden; }
.mapa-treemap { position: absolute; inset: 0; }
.mapa-setor { position: absolute; }
.mapa-setor-nome {
  position: absolute; left: 0; right: 0; top: 0; height: 17px; padding: 0 4px;
  font-size: 12.5px; line-height: 16px; color: var(--papel-2); font-stretch: var(--estreito);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mapa-acao {
  position: absolute; box-sizing: border-box; border: 1px solid var(--pre-abertura);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  overflow: hidden; text-decoration: none; color: #fff; line-height: 1.1; text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums;
}
.mapa-acao b { font-weight: 650; }
.mapa-acao span { font-size: .82em; opacity: .92; }
.mapa-acao:hover { outline: 2px solid var(--primeira-luz); outline-offset: -2px; z-index: 1; }

/* ---------- notícias ---------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.chips { display: flex; gap: 4px; }
.filtros input {
  flex: 1; min-width: 150px; background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 5px 10px; color: var(--papel); font: inherit; font-size: 15px;
}
.filtros input::placeholder { color: var(--papel-3); }
.filtros input:focus { outline: none; border-color: var(--primeira-luz); }
.lista-noticias { list-style: none; margin: 0; padding: 0; overflow-y: auto; font-stretch: var(--estreito); }
.lista-noticias li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--linha); }
.lista-noticias time { font-size: 14.5px; color: var(--papel-3); padding-top: 1px; }
.lista-noticias a { text-decoration: none; font-size: 16.5px; line-height: 1.35; }
.lista-noticias a:hover { text-decoration: underline; text-decoration-color: var(--papel-3); }
.lista-noticias .fonte { display: block; font-size: 14px; color: var(--papel-3); margin-top: 1px; }
/* Notícia nova: o horário ganha a cor do "agora" e a linha acende uma vez. */
.lista-noticias li.nova time { color: var(--primeira-luz); font-weight: 600; }
.lista-noticias li.nova { animation: chegou 2.4s ease-out 1; }
@keyframes chegou { from { background: rgba(242, 193, 78, .12); } to { background: transparent; } }

/* ---------- agenda ---------- */
.agenda-painel { position: absolute; inset: 0; }
.agenda-lista { list-style: none; margin: 0; padding: 0; font-stretch: var(--estreito); }
.agenda-lista li { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; padding: 7px 0 7px 10px; border-bottom: 1px solid var(--linha); border-left: 3px solid transparent; }
.agenda-lista time { font-size: 15.5px; font-weight: 600; }
.agenda-lista strong { font-weight: 600; }
.agenda-lista .pais { font-size: 14px; color: var(--papel-3); display: block; }
.agenda-lista .porque { font-size: 15px; color: var(--papel-2); display: block; margin-top: 2px; }
.agenda-lista .nums { font-size: 14px; color: var(--papel-3); display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.agenda-lista li.alta { border-left-color: var(--baixa); }
.agenda-lista li.media { border-left-color: var(--linha-forte); }
.agenda-lista li.passou { opacity: .5; }
.nota { font-size: 14.5px; color: var(--papel-3); margin: 10px 0 0; }

/* Widgets do Investing são claros; a inversão com giro de 180° escurece o fundo e preserva as cores (bandeiras, alta/baixa). */
.agenda-painel iframe {
  width: 100%; height: 100%; border: 0; border-radius: var(--raio); background: #fff;
  filter: invert(.88) hue-rotate(180deg);
}

.rodape { padding: 10px 20px 28px; color: var(--papel-3); font-size: 14px; }
.rodape p { margin: 0; max-width: 72ch; }

@media (max-width: 1100px) {
  .topo { grid-template-columns: auto 1fr auto; }
  .faixa-dia { grid-column: 1 / -1; grid-row: 2; }
  .relogio-principal { justify-self: end; }
}
@media (max-width: 767px) {
  .topo { position: relative; grid-template-columns: 1fr auto; padding: 12px 16px; }
  .botao-icone { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .relogio-principal b { font-size: 31.5px; }
  .faixa-linha, .faixa-eixo, .faixa-sobreposta { grid-template-columns: 78px 1fr 120px; gap: 8px; }
  .faixa-eixo .marcas span:nth-child(4) { display: none; } /* "18h" encosta no "24h" em tela estreita */
  body.topo-fora .relogio-flutuante { display: block; }
  .grid-stack { margin: 8px 10px 0; }
  .painel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}