/* Layout das páginas. Componentes ficam em componentes.css; aqui só a montagem das telas. Só variáveis de tokens.css. */

/* ---------- utilidades */
.pilha { display: grid; gap: var(--esp-3); }
.pilha-4 { display: grid; gap: var(--esp-4); }
.linha { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.entre { justify-content: space-between; }
.oculto { display: none !important; }
.titulo-pagina { font: 700 var(--texto-xl)/var(--linha-xl) var(--fonte-display); }
.titulo-secao { font-size: var(--texto-lg); line-height: var(--linha-lg); }
.muted { color: var(--cor-text-muted); }
.codigo { font-family: var(--fonte-mono); font-size: 13px; word-break: break-all; }

/* ---------- página de inscrição */
.lp { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--cor-surface); }
.lp-corpo { width: 100%; max-width: var(--lay-lp-max); margin: 0 auto; padding: var(--esp-7) var(--esp-4);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--esp-7); align-items: center; }
.lp-titulo { font: 800 var(--texto-display)/var(--linha-display) var(--fonte-display); letter-spacing: -.01em; }
.lp-sub { margin: var(--esp-4) 0 var(--esp-5); color: var(--cor-text-muted); font-size: var(--texto-lg); line-height: var(--linha-lg); font-weight: 400; }
.apresentadora { display: flex; gap: var(--esp-3); align-items: center; }
.apresentadora small { display: block; color: var(--cor-text-muted); font-size: var(--texto-xs); }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cor-accent-soft); color: var(--cor-accent); display: grid; place-items: center; font-weight: 700; }
.lp-rodape { padding: var(--esp-4); text-align: center; background: var(--cor-overlay); color: var(--cor-on-overlay); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--texto-xs); }
.lp-seguro { text-align: center; font-size: var(--texto-xs); color: var(--cor-text-muted); }
.lp-seguro a { color: inherit; text-decoration: underline; }
@media (max-width: 767px) {
  .lp-corpo { grid-template-columns: 1fr; padding: var(--esp-5) var(--esp-4); gap: var(--esp-5); }
  .lp-titulo { font-size: var(--texto-xl); line-height: var(--linha-xl); }
  .lp-sub { font-size: var(--texto-base); line-height: var(--linha-base); }
}

/* ---------- sala */
.sala-pagina { min-height: 100vh; }
.sala-cabeca { max-width: var(--lay-sala-max); margin: 0 auto; padding: var(--esp-4) var(--esp-4) 0; }
.sala-cabeca h1 { font: 700 var(--texto-lg)/var(--linha-lg) var(--fonte-display); }
@media (max-width: 1023px) { .sala-cabeca { padding: var(--esp-3) var(--esp-4); } .sala-cabeca h1 { font-size: var(--texto-base); } }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--cor-overlay); }
.player-aviso { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--esp-4); gap: var(--esp-2); align-content: center; }
.player-aviso .contagem { justify-content: center; }
.player-controles { position: absolute; right: var(--esp-3); bottom: var(--esp-3); display: flex; gap: var(--esp-2); z-index: 2; }
.player-controles .btn { background: rgba(15, 19, 26, .6); color: var(--cor-on-overlay); }
.selo-teste { display: inline-flex; align-items: center; padding: 4px var(--esp-2); background: var(--cor-warning-soft); color: var(--cor-warning); border-radius: var(--raio-sm); font: 700 var(--texto-xs)/1 var(--fonte-sans); }
.chat { max-height: calc(100vh - 120px); }
@media (max-width: 1023px) { .chat { max-height: none; height: 60vh; } }
.oferta-texto { display: grid; gap: 2px; }
.oferta-sub { color: var(--cor-text-muted); font-size: var(--texto-sm); }

/* ---------- encerrada / não encontrada */
.centro { min-height: 100vh; display: grid; place-items: center; padding: var(--esp-4); }
.centro .cartao { max-width: 480px; text-align: center; display: grid; gap: var(--esp-3); }

/* ---------- painel */
.painel-conteudo { padding: var(--esp-5); display: grid; gap: var(--esp-5); align-content: start; max-width: var(--lay-painel-conteudo-max); width: 100%; }
.menu-rodape { margin-top: var(--esp-5); padding-top: var(--esp-3); border-top: 1px solid var(--cor-border); display: grid; gap: var(--esp-2); }
.menu-rodape small { color: var(--cor-text-muted); padding: 0 var(--esp-2); }
.form-sair { margin: 0; }
.entrar { max-width: 380px; width: 100%; }
.info { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-2) var(--esp-4); }
.info dt { color: var(--cor-text-muted); }
.info dd { margin: 0; }
.tabela-compacta td, .tabela-compacta th { padding: var(--esp-2) var(--esp-3); }
.links-lista { display: grid; gap: var(--esp-3); min-width: min(520px, 80vw); }
@media (max-width: 767px) { .painel-conteudo { padding: var(--esp-4); } }
@media (max-width: 767px) {
  .painel { grid-template-rows: auto 1fr; }
  .menu { align-items: center; }
  .menu-rodape { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: var(--esp-2); flex: none; }
}

/* ---------- editor */
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-3) var(--esp-4); }
.grade3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-3) var(--esp-4); }
.caixa { border: 1px solid var(--cor-border); border-radius: var(--raio-md); padding: var(--esp-3) var(--esp-4); margin: 0; }
details.caixa > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; padding: var(--esp-1) 0; }
details.caixa[open] > summary { margin-bottom: var(--esp-3); }
.lista-simples { margin: var(--esp-1) 0 0; padding-left: var(--esp-5); display: grid; gap: 2px; }
fieldset.pares-grupo { border: 0; padding: 0; margin: 0; }
.pares-linhas { display: grid; gap: var(--esp-2); }
/* passos do editor no alto (como na HotWebinar): bola com ícone, nome embaixo, traço ligando as bolas */
.passos { padding: var(--esp-3) var(--esp-4); overflow-x: auto; }
.passos ol { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; min-width: max-content; }
.passos li { position: relative; flex: none; }
.passos li + li::before { content: ""; position: absolute; top: 17px; left: -14px; width: 28px; height: 2px; background: var(--cor-border); }
.passos a { display: grid; justify-items: center; gap: 6px; width: 78px; padding: var(--esp-1) 0; text-decoration: none; color: var(--cor-text-muted); font-size: 12px; text-align: center; border-radius: var(--raio-sm); }
.passo-bola { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cor-border); background: var(--cor-surface); color: var(--cor-text-muted); }
.passo-bola .icone { width: 16px; height: 16px; }
.passo-bola .icone-atual { display: none; }
.passos a.feito .passo-bola { background: var(--cor-accent-soft); border-color: transparent; color: var(--cor-accent); }
.passos a.pendente .passo-bola { background: var(--cor-warning-soft); border-color: transparent; color: var(--cor-warning); }
.passos a[aria-current="step"] { color: var(--cor-text); font-weight: 700; }
.passos a[aria-current="step"] .passo-bola { background: var(--cor-accent); border-color: var(--cor-accent); color: var(--cor-on-accent); box-shadow: 0 0 0 4px var(--cor-accent-soft); }
.passos a[aria-current="step"] .passo-bola .icone { display: none; }
.passos a[aria-current="step"] .passo-bola .icone-atual { display: block; }
.passos a:hover .passo-nome { color: var(--cor-text); }
.passo-numero { display: block; font-size: 13px; margin-bottom: calc(-1 * var(--esp-2)); }
.passo-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); border-top: 1px solid var(--cor-border); padding-top: var(--esp-4); margin-top: var(--esp-2); flex-wrap: wrap; }
/* com JS, só o passo atual aparece */
.com-passos .editor section.passo:not(.passo-atual) { display: none; }
.form-inline { display: inline; }

/* ---------- inscritas */
.filtros-form { display: grid; grid-template-columns: 2fr 1.5fr 1.2fr 1fr 1fr; gap: var(--esp-3); align-items: end; }
.filtros-form .linha { grid-column: 1 / -1; }
@media (max-width: 1023px) { .filtros-form { grid-template-columns: 1fr 1fr; } .filtros-form .campo:first-child { grid-column: 1 / -1; } }
@media (max-width: 639px) { .filtros-form { grid-template-columns: 1fr; } }

/* ---------- resultados (gráficos: uma série, cor de destaque; texto sempre em cor de texto) */
.filtros-resultados { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr auto; gap: var(--esp-3); align-items: end; }
@media (max-width: 1023px) { .filtros-resultados { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .filtros-resultados { grid-template-columns: 1fr; } }
.numero .ajuda { display: block; margin-top: 2px; }
.tabela-funil { width: 100%; border-collapse: collapse; }
.tabela-funil th, .tabela-funil td { padding: var(--esp-2) var(--esp-2); text-align: left; font-weight: 400; }
.tabela-funil thead th { font-size: var(--texto-xs); color: var(--cor-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tabela-funil tbody th { font-weight: 600; white-space: nowrap; }
.funil-barra { width: 45%; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico { width: 100%; height: auto; display: block; }
.g-barra { fill: var(--cor-accent); }
.g-trilho { fill: var(--cor-accent-soft); }
.g-grade { stroke: var(--cor-border); stroke-width: 1; }
.g-eixo { fill: var(--cor-text-muted); font-size: 11px; font-family: var(--fonte-sans); }
.g-alvo { fill: transparent; }
.g-coluna:hover .g-barra, .g-coluna:focus .g-barra { fill: var(--cor-accent-strong); }
.g-coluna:focus { outline: none; }
.g-coluna:focus-visible .g-alvo { stroke: var(--cor-focus); stroke-width: 2; }
@media (max-width: 639px) { .funil-barra { display: none; } }
.painel-conteudo { grid-template-columns: minmax(0, 1fr); }
.painel-conteudo > * { min-width: 0; }
@media (max-width: 639px) {
  .tabela-funil th, .tabela-funil td { padding: var(--esp-2) 4px; }
  .tabela-funil th:last-child, .tabela-funil td:last-child { display: none; }
  .tabela-funil tbody th { white-space: normal; }
}
.menu-grupo { margin: var(--esp-4) 0 var(--esp-1); padding: 0 var(--esp-2); font-size: var(--texto-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-text-muted); }
@media (max-width: 767px) { .menu-grupo { display: none; } }
.senha-uma-vez { font: 600 var(--texto-lg)/1.4 var(--fonte-mono); letter-spacing: .04em; background: var(--cor-surface-sunken); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-sm); user-select: all; }
.bloco-codigo { background: var(--cor-surface-sunken); border-radius: var(--raio-sm); padding: var(--esp-3); white-space: pre-wrap; margin: 0; }
.g-linha { fill: none; stroke: var(--cor-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-area { fill: var(--cor-accent); fill-opacity: .1; }
.g-ponto { fill: var(--cor-accent); stroke: var(--cor-surface); stroke-width: 2; }
.g-marca { stroke: var(--cor-text-muted); stroke-width: 1; }
.g-alvo-min:hover { fill: var(--cor-accent); fill-opacity: .08; }
progress { width: 100%; height: 10px; accent-color: var(--cor-accent); }

/* ---------- páginas: logo, destaque, cores escolhidas no painel */
.lp-logo { display: block; height: 48px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: var(--esp-5); }
.lp-destaque { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--raio-lg); margin-bottom: var(--esp-5); }
img.avatar { object-fit: cover; }
.faixa-marca .faixa-contagem, .faixa-marca .lp-rodape { background: var(--cor-marca); color: var(--cor-on-marca); }
.faixa-cta .faixa-contagem, .faixa-cta .lp-rodape { background: var(--cor-cta); color: var(--cor-on-cta); }
.botao-marca .btn-compra { background: var(--cor-marca); color: var(--cor-on-marca); }
.botao-accent .btn-compra { background: var(--cor-accent); color: var(--cor-on-accent); }
.botao-escuro .btn-compra { background: var(--cor-overlay); color: var(--cor-on-overlay); }
.amostra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.amostra-cta { background: var(--cor-cta); } .amostra-marca { background: var(--cor-marca); } .amostra-accent { background: var(--cor-accent); } .amostra-escuro { background: var(--cor-overlay); }
.miniatura { height: 56px; width: auto; max-width: 160px; object-fit: contain; border: 1px solid var(--cor-border); border-radius: var(--raio-sm); background: var(--cor-surface-sunken); }
.lista-passos { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); display: grid; gap: var(--esp-2); }
details.caixa p { margin: var(--esp-2) 0 0; }
code { font-family: var(--fonte-mono); font-size: 13px; background: var(--cor-surface-sunken); padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }

/* tabela larga (Resultados › Por campanha): rola dentro do cartão, não empurra a página */
.tabela-rolagem { overflow-x: auto; max-width: 100%; }

/* linha do tempo mensagem a mensagem */
.tabela-linha td:first-child { white-space: nowrap; }
.tabela-linha .corrigir summary { cursor: pointer; color: var(--cor-accent); font-size: var(--texto-sm); margin-top: var(--esp-1); }
.tabela-linha .corrigir form { margin-top: var(--esp-2); }

/* editor: enquetes e materiais */
.item-interacao { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-3); background: var(--cor-surface-sunken); border-radius: var(--raio-sm); }
.item-interacao .votos { margin: var(--esp-1) 0 0 var(--esp-4); font-size: var(--texto-sm); }
.lista-ajuda { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--esp-2); }

/* ---------- dashboard (Resultados), no layout da HotWebinar */
.dash-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); flex-wrap: wrap; }
.dash-topo .titulo-pagina { margin: 0; }
.dash-topo p { margin: 2px 0 0; }
.dash-filtros { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.segmentado { display: inline-flex; background: var(--cor-surface-sunken); border: 1px solid var(--cor-border); border-radius: var(--raio-md); padding: 3px; gap: 2px; }
.segmentado a { padding: 6px var(--esp-3); border-radius: var(--raio-sm); color: var(--cor-text-muted); text-decoration: none; font-size: 13px; white-space: nowrap; }
.segmentado a[aria-current="page"] { background: var(--cor-surface); color: var(--cor-text); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 19, 26, .08); }
.dash-form { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.dash-form .entrada { height: 38px; width: auto; min-width: 0; }
.dash-datas { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 var(--esp-3); border: 1px solid var(--cor-border); border-radius: var(--raio-md); background: var(--cor-surface); font-size: 13px; white-space: nowrap; }
.com-js .dash-form button { display: none; }
.com-js .dash-form:has(input[type=date]) button { display: inline-flex; }
.dash-vazio { margin: 0; }
.dash-numeros { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.dash-numeros .numero { padding: var(--esp-4) var(--esp-5); }
.dash-numeros .numero + .numero { border-left: 1px solid var(--cor-border); }
.dash-numeros .numero b { font-size: 26px; line-height: 1.2; margin-top: var(--esp-2); }
.numero-destaque small::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-marca); margin-right: 6px; vertical-align: middle; }
.funil-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.funil-etapa { display: grid; gap: 2px; padding: 0 var(--esp-3); align-content: start; }
.funil-etapa + .funil-etapa { border-left: 1px solid var(--cor-border); }
.funil-nome { font-size: 13px; color: var(--cor-text-muted); }
.funil-n { font-size: 22px; line-height: 1.2; }
.funil-pct { font-size: 12px; color: var(--cor-text-muted); }
.funil-fim .funil-nome, .funil-fim .funil-n { color: var(--cor-marca); }
.funil-faixa { width: 100%; height: 130px; display: block; }
.funil-parte { fill: var(--cor-marca); }
.dash-grade { display: grid; grid-template-columns: 2fr 1fr; gap: var(--esp-4); align-items: start; }
.dash-grade-meio { grid-template-columns: 1fr; }
.rosca { width: 170px; height: 170px; display: block; margin: var(--esp-2) auto; }
.rosca-a { stroke: var(--cor-marca); }
.rosca-b { stroke: var(--cor-accent-strong); }
.rosca-n { font: 700 22px var(--fonte-display); fill: var(--cor-text); }
.rosca-rot { font-size: 11px; fill: var(--cor-text-muted); font-family: var(--fonte-sans); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.legenda li { display: grid; grid-template-columns: auto 1fr auto 48px; gap: var(--esp-2); align-items: center; font-size: 14px; }
.ponto { width: 10px; height: 10px; border-radius: 3px; }
.ponto-a { background: var(--cor-marca); }
.ponto-b { background: var(--cor-accent-strong); }
@media (max-width: 1023px) {
  .dash-numeros { grid-template-columns: repeat(2, 1fr); }
  .dash-numeros .numero:nth-child(3) { border-left: 0; }
  .dash-numeros .numero:nth-child(n+3) { border-top: 1px solid var(--cor-border); }
  .dash-grade, .dash-grade-meio { grid-template-columns: 1fr; }
  .funil-etapas { grid-template-columns: repeat(3, 1fr); row-gap: var(--esp-3); }
  .funil-etapa:nth-child(4) { border-left: 0; }
}
@media (max-width: 639px) {
  .dash-filtros, .dash-form { justify-content: flex-start; width: 100%; }
  .segmentado { width: 100%; overflow-x: auto; }
  .dash-form .entrada { flex: 1; }
  .dash-numeros .numero { padding: var(--esp-3) var(--esp-4); }
  .dash-numeros .numero b { font-size: 20px; }
  .funil-etapas { grid-template-columns: repeat(2, 1fr); }
  .funil-etapa:nth-child(odd) { border-left: 0; }
  .funil-etapa:nth-child(4) { border-left: 1px solid var(--cor-border); }
  .funil-faixa { height: 80px; }
}
/* no celular, as tabelas de número do dashboard continuam tabela e rolam de lado dentro do cartão */
@media (max-width: 639px) {
  .tabela-rolagem .tabela { display: table; min-width: 520px; }
  .tabela-rolagem .tabela thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .tabela-rolagem .tabela tbody { display: table-row-group; }
  .tabela-rolagem .tabela tr { display: table-row; padding: 0; }
  .tabela-rolagem .tabela td, .tabela-rolagem .tabela th { display: table-cell; padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--cor-border); }
}