/*
 * indicex — layout: contêiner de 1200 px, cabeçalho (marca, busca, conta + menu por grupos), faixa de cotações e
 * rodapé. Redesenho de 2026-10-20. Mobile-first; breakpoints (min-width) 480, 768, 1024, 1280.
 */

.conteiner {
  width: 100%;
  max-width: var(--conteiner);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

main { display: block; padding-block: var(--sp-5) var(--sp-6); min-height: 50vh; }

/* ---------- Cabeçalho ---------- */
/* Não fixo: nas páginas de ativo, as abas da página é que ficam fixas no topo (padrão dos portais de mercado) */
.cabecalho {
  position: relative;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cabecalho__barra {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca acoes acoes" "busca busca busca";
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
}
.cabecalho__marca { grid-area: marca; display: inline-flex; padding: var(--sp-1) 0; }
.cabecalho__marca img { height: 26px; width: auto; }
.cabecalho__busca { grid-area: busca; max-width: none; }
.cabecalho__acoes { grid-area: acoes; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.cabecalho__conta { min-height: 40px; }

.cabecalho__menu-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-3);
  font: inherit;
  font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
}
.cabecalho__menu-icone, .cabecalho__menu-icone::before, .cabecalho__menu-icone::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.cabecalho__menu-icone { position: relative; }
.cabecalho__menu-icone::before, .cabecalho__menu-icone::after { content: ""; position: absolute; left: 0; }
.cabecalho__menu-icone::before { top: -6px; }
.cabecalho__menu-icone::after { top: 6px; }

/* Menu: no celular, gaveta aberta pelo botão; grupos em sanfona */
.cabecalho__nav { display: none; border-top: 1px solid var(--border); background: var(--surface); }
.cabecalho--aberto .cabecalho__nav { display: block; max-height: calc(100vh - 7.5rem); overflow-y: auto; }
.menu { margin: 0; padding-block: var(--sp-2); list-style: none; }
.menu__grupo details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--sp-2);
  font-weight: var(--fw-semibold);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-md);
}
.menu__grupo details > summary::-webkit-details-marker { display: none; }
.menu__grupo details > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: var(--sp-2);
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.menu__grupo details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.menu__grupo--atual > details > summary { color: var(--primary); }
.menu__painel { margin: 0 0 var(--sp-2); padding: 0 0 0 var(--sp-3); list-style: none; }
.menu__painel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-md);
}
.menu__painel a:hover { background: var(--surface-2); color: var(--primary); }
.menu__painel a[aria-current="page"] { color: var(--primary); font-weight: var(--fw-semibold); }

/* ---------- Faixa de indicadores e cotações ---------- */
.faixa {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.faixa__trilho {
  display: flex;
  width: max-content;
  height: 40px;
  animation: faixa-rolar 70s linear infinite;
}
.faixa:hover .faixa__trilho, .faixa:focus-within .faixa__trilho { animation-play-state: paused; }
.faixa__lista { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.faixa__lista li { display: flex; align-items: center; height: 40px; }
.faixa__lista a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: 0 var(--sp-4);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}
.faixa__lista a:hover .faixa__rotulo { color: var(--primary); text-decoration: underline; }
.faixa__rotulo { font-weight: var(--fw-semibold); }
.faixa__valor { font-weight: var(--fw-medium); }
.faixa__var { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.faixa__var--alta { color: var(--positive); }
.faixa__var--queda { color: var(--negative); }
.faixa__nota { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes faixa-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa { overflow-x: auto; }
  .faixa__trilho { animation: none; }
  .faixa__lista[aria-hidden="true"] { display: none; }
}
.faixa { overflow: hidden; position: relative; }

/* ---------- Rodapé ---------- */
.rodape {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.rodape__grade { display: grid; gap: var(--sp-5); }
.rodape__nome { margin-bottom: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); letter-spacing: var(--tracking-titulo); }
.rodape__aviso { max-width: 72ch; }
.rodape__titulo { margin-bottom: var(--sp-2); font-weight: var(--fw-semibold); color: var(--text); }
.rodape__nav ul { margin: 0; padding: 0; list-style: none; }
.rodape__nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); }
.rodape__nav a:hover { color: var(--primary); }
.rodape__base { margin-top: var(--sp-5); padding-block: var(--sp-4); border-top: 1px solid var(--border); }
.rodape__base p { margin: 0; }

/* ---------- Breakpoints ---------- */
@media (min-width: 768px) {
  .conteiner { padding-inline: var(--sp-5); }
  .cabecalho__barra { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca busca acoes"; padding-block: var(--sp-3); }
  .cabecalho__busca { max-width: 36rem; }
  .cabecalho__marca img { height: 30px; }
  .rodape__grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }
}

@media (min-width: 1024px) {
  .cabecalho__menu-botao { display: none; }
  .cabecalho__nav { display: block; border-top: 1px solid var(--border); }
  .menu { display: flex; gap: var(--sp-1); padding-block: 0; }
  .menu__grupo { position: relative; }
  .menu__grupo details > summary { min-height: 44px; padding: 0 var(--sp-3); font-weight: var(--fw-medium); border-radius: 0; box-shadow: inset 0 -2px 0 transparent; }
  .menu__grupo details > summary:hover { color: var(--primary); }
  .menu__grupo--atual > details > summary { box-shadow: inset 0 -2px 0 var(--primary); }
  .menu__painel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 15rem;
    margin: 0;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
  }
}

@media (min-width: 1280px) {
  main { padding-block: var(--sp-6) var(--sp-7); }
}

/* ---------- Tema: botão e logo (o escuro só por escolha, ver tokens.css) ---------- */
.cabecalho__tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer;
}
.cabecalho__tema:hover { border-color: var(--primary); color: var(--primary); }
/* Ícone: lua (claro → oferece o escuro) e sol (escuro → oferece o claro), em máscara SVG que segue a cor do texto */
.cabecalho__tema-icone {
  width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("/assets/img/icones/lua.svg") center / contain no-repeat; mask: url("/assets/img/icones/lua.svg") center / contain no-repeat;
}
[data-theme="escuro"] .cabecalho__tema-icone { -webkit-mask-image: url("/assets/img/icones/sol.svg"); mask-image: url("/assets/img/icones/sol.svg"); }
.cabecalho__logo--escuro { display: none; }
[data-theme="escuro"] .cabecalho__logo--claro { display: none; }
[data-theme="escuro"] .cabecalho__logo--escuro { display: inline-flex; }