/* Página Apuração ao vivo (I-013) — layout do mockup aprovado em 20/10/2026. */
.av-pagina { --av-navy: #07194f; --av-royal: #0d1d96; --av-linha: #e3e6ec; --av-cinza: #5b6170; --av-vermelho: #cc0000; color: #1d2230; }
.av-pagina *, .av-pagina *::before, .av-pagina *::after { box-sizing: border-box; }
.av-abas-eleicoes { max-width: 1120px; margin: 0 auto; display: flex; border-bottom: 1px solid var(--av-linha); }
.av-abas-eleicoes a { flex: 1; text-align: center; padding: 14px 0; color: #4a5060; font-weight: 600; font-size: 13px; text-decoration: none; }
.av-abas-eleicoes a.av-ativa { color: var(--av-royal); border-bottom: 3px solid var(--av-royal); }
.av-vivo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--av-vermelho); margin-right: 6px; vertical-align: 1px; }
.av-grade { max-width: 1240px; margin: 0 auto; padding: 20px 24px 40px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.av-esquerda .av-player, .av-espera { border-radius: 10px; }
.av-espera { aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 30% 40%, #26407a, #0a1430 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; }
.av-espera p { margin: 0; font-size: 22px; font-weight: 700; }
.av-espera small { opacity: .8; }
.av-espera__selo { background: var(--av-vermelho); border-radius: 4px; padding: 4px 8px; font-weight: 700; font-size: 13px; letter-spacing: .03em; }
.av-apuracao h1 { font-size: 26px; line-height: 1.15; margin: 18px 0 4px; color: var(--av-navy); }
.av-sub { color: var(--av-cinza); margin: 0 0 14px; font-size: 14px; }
.av-secao { font-size: 18px; color: #104144; margin: 20px 0 8px; }
.av-secao small { font-size: 12px; font-weight: 400; color: #6e727a; margin-left: 6px; }
.av-link { display: block; text-align: right; color: var(--av-royal); font-weight: 700; font-size: 14px; margin-top: 12px; text-decoration: none; }
.av-abas-celular { display: none; }
/* chat */
.av-chat { position: sticky; top: 72px; height: calc(100vh - 92px); min-height: 520px; border: 1px solid var(--av-linha); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.av-chat__cab { padding: 12px 14px; border-bottom: 1px solid var(--av-linha); display: flex; justify-content: space-between; align-items: center; }
.av-chat__cab b { font-size: 15px; color: var(--av-navy); }
.av-chat__estado { font-size: 12px; color: var(--av-cinza); }
.av-chat__estado.av-on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1aa260; margin-right: 5px; }
.av-destaque { margin: 10px 12px 0; border-left: 3px solid var(--av-vermelho); background: #fff5f5; padding: 8px 10px; border-radius: 0 6px 6px 0; font-size: 13px; }
.av-destaque small { display: block; color: var(--av-vermelho); font-weight: 700; font-size: 11px; letter-spacing: .05em; margin-bottom: 2px; }
.av-lista { flex: 1; overflow-y: auto; margin: 0; padding: 6px 14px; list-style: none; scrollbar-width: none; }
.av-lista::-webkit-scrollbar { display: none; }
/* chat ainda sem mensagem (Davy, 22/10): em vez da coluna branca, um convite */
.av-lista:empty::before { content: "Ainda não há comentários.\A Seja o primeiro a comentar a apuração."; white-space: pre-line; display: block; padding: 96px 16px 0; text-align: center; color: #8a90a0; font-size: 14px; line-height: 1.5; }
/* avatar com a inicial à esquerda (como o chat ao vivo do YouTube); o texto quebra alinhado depois dele */
.av-avatar { position: absolute; left: 0; top: 7px; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; line-height: 24px; text-align: center; user-select: none; }
.av-lista li { position: relative; display: flex; flex-direction: column; padding: 6px 28px 6px 36px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.av-avatar--equipe { background: url(avatar-equipe.png) center / cover no-repeat; }
.av-cab { display: flex; align-items: center; gap: 6px; min-width: 0; }
.av-lista .av-msg-sub { color: #8a90a0; font-size: 12px; line-height: 1.3; }
.av-lista .av-texto { color: #1d2230; margin-top: 2px; }
/* equipe: nome numa pílula com o selo de verificado (como o dono do canal no chat do YouTube) */
.av-lista .av-nome--equipe, .av-lista .av-mod .av-nome.av-nome--equipe { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 8px; border-radius: 999px; background: var(--av-royal); color: #fff; font-size: 13px; }
.av-verificado { display: inline-flex; width: 15px; height: 15px; }
.av-verificado svg { width: 15px; height: 15px; fill: #fff; }
.av-verificado .av-verificado__v { fill: none; stroke: var(--av-royal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.av-lista .av-nome { font-weight: 700; color: #2a3352; }
.av-lista .av-lugar { color: #8a90a0; font-size: 12px; margin: 0 4px; }
.av-lista .av-mod .av-nome { color: var(--av-royal); }
.av-selo { background: var(--av-royal); color: #fff; font-weight: 700; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-right: 4px; vertical-align: 1px; }
.av-pendente { opacity: .6; }
.av-pendente::after { content: " · aguardando a moderação"; font-size: 11px; color: var(--av-cinza); }
.av-mais { position: absolute; right: 0; top: 2px; width: 26px; height: 26px; border: 0; background: none; color: #9aa0ad; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.av-mais svg { width: 18px; height: 18px; fill: currentColor; }
.av-menu { position: absolute; right: 0; top: 28px; z-index: 3; background: #fff; border: 1px solid var(--av-linha); border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.av-menu button { display: block; border: 0; background: none; padding: 10px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.av-novas { position: absolute; left: 50%; transform: translateX(-50%); bottom: 112px; border: 0; background: var(--av-royal); color: #fff; border-radius: 16px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.av-rodape { border-top: 1px solid var(--av-linha); padding: 12px 14px; background: #fff; }
.av-botao { width: 100%; background: var(--av-royal); color: #fff; border: 0; border-radius: 22px; padding: 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
.av-entrar { text-align: center; }
.av-entrar__chamada { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #2a3352; }
.av-entrar__chamada b { color: var(--av-navy); }
.av-quem { display: block; font-size: 12px; color: var(--av-cinza); margin-bottom: 6px; }
.av-digitar__linha { display: flex; gap: 8px; align-items: flex-end; }
.av-digitar textarea { flex: 1; resize: none; border: 1px solid var(--av-linha); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 14px; max-height: 96px; }
.av-enviar { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--av-royal); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.av-enviar svg { width: 20px; fill: #fff; }
.av-enviar:disabled { opacity: .5; }
.av-digitar__pe { display: flex; justify-content: space-between; font-size: 12px; color: var(--av-cinza); margin-top: 4px; min-height: 16px; }
.av-digitar__pe [data-av-aviso] { color: #b3261e; }
/* sem conta (padrão Twitch): a caixa aparece, mas tocar nela abre o cadastro */
/* (o "Já tem conta? Entrar" fica só dentro da janela de cadastro; Davy, 24/10) */
.av-digitar--visitante .av-quem, .av-digitar--visitante .av-apagar, .av-digitar--visitante .av-digitar__pe { display: none; }
.av-digitar--visitante textarea { cursor: pointer; }
.av-apagar { border: 0; background: none; color: #8a90a0; font-size: 11px; text-decoration: underline; padding: 4px 0 0; cursor: pointer; }
/* celular e app */
@media (max-width: 900px) {
  .av-abas-eleicoes { display: none; }
  .av-grade { display: block; padding: 0; }
  .av-fixo { position: sticky; top: 0; z-index: 5; background: #fff; }
  .av-esquerda .av-player, .av-espera { border-radius: 0; }
  /* Seletor Chat | Apuração (Davy, 20/10: duas barras de abas empilhadas confundiam) — pílulas com ícone. */
  .av-abas-celular { display: flex; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--av-linha); }
  .av-abas-celular button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d9dde5; background: #f4f6f9; border-radius: 20px; padding: 9px 0; font-weight: 700; font-size: 14px; color: #4a5060; cursor: pointer; }
  /* ícones de traço, no mesmo desenho dos controles do player; ponto vermelho pulsando no chat = acontecendo agora */
  .av-abas-celular button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .av-abas-pulso { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: #e1061f; animation: av-abas-pulso 1.6s ease-out infinite; }
  .av-abas-celular button.av-ativa .av-abas-pulso { background: #ff3b4e; }
  @keyframes av-abas-pulso { 0% { box-shadow: 0 0 0 0 rgba(225, 6, 31, .55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(225, 6, 31, 0); } }
  .av-abas-celular button.av-ativa { background: var(--av-royal); border-color: var(--av-royal); color: #fff; }
  /* na página ao vivo, a barra de Eleições (Destaques, Quem são…) sai: o seletor acima já é a navegação */
  .av-na-apuracao .cpx-election-nav { display: none; }
  .av-apuracao { padding: 0 14px 24px; }
  .av-pagina[data-av-aba="chat"] .av-apuracao { display: none; }
  /* A apuração escondida continua com a largura da tela: o plugin do Córtex desenha o mapa e mede os gráficos no
     carregamento, e com display:none tudo media zero (mapa em branco e página mais larga que a tela, 20/10). */
  .av-pagina[data-av-aba="chat"] main.apr { height: 0; overflow: hidden; visibility: hidden; margin: 0; }
  .av-pagina[data-av-aba="apuracao"] .av-chat { display: none; }
  .av-chat { position: static; height: auto; min-height: 0; border: 0; border-radius: 0; }
  .av-chat__cab { display: none; }
  .av-lista { min-height: 50vh; padding-bottom: calc(140px + var(--av-base, 0px)); overflow: visible; }
  .av-rodape { position: fixed; left: 0; right: 0; bottom: var(--av-base, 0px); z-index: 6; box-shadow: 0 -2px 8px rgba(0, 0, 0, .08); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .av-novas { position: fixed; bottom: calc(150px + var(--av-base, 0px)); z-index: 6; }
}

/* Dentro da página de apuração: a apuração ocupa a coluna da esquerda inteira (o plugin centraliza a coluna dela). */
.av-na-apuracao .av-grade { max-width: 1320px; }
.av-na-apuracao main.apr { margin-top: 12px; }
@media (min-width: 901px) {
  .av-na-apuracao .av-fixo { margin-top: 4px; }
  /* barra flutuante do Halley presa à coluna da apuração, sem invadir o chat (medida no chat.js) */
  body:has(.av-na-apuracao) .prj-flutuante-raiz { left: var(--av-esq-l, 0px); right: auto; width: var(--av-esq-w, 100%); box-sizing: border-box; }
}
/* Página ao vivo no celular: a live presa no topo é o que importa. As barras fixas do tema (cpst-stickybar) e da
   apuração (apr-barra) ficam por cima dela (z-index 1000 e 9990), então saem só nesta página. */
@media (max-width: 900px) {
  body:has(.av-na-apuracao) .cpst-stickybar, body:has(.av-na-apuracao) .apr-barra { display: none !important; }
  /* a barra flutuante do Halley também sai: a faixa do Halley já está na apuração, e a tela é pouca (Davy, 22/10) */
  body:has(.av-na-apuracao) .prj-flutuante-raiz { display: none !important; }
  .av-na-apuracao .av-fixo { z-index: 50; }
  /* na aba do chat, o rodapé do site não aparece no fim dos comentários (Davy, 24/10); na aba da apuração continua */
  body:has(.av-pagina[data-av-aba="chat"]) .cpst-footer { display: none !important; }
}
/* Vídeo no topo da coluna do chat ao descer (computador, Davy 20/10): fixo por cima da coluna; o chat desce. */
.av-player.av-no-chat, .av-espera.av-no-chat { position: fixed; z-index: 30; border-radius: 10px 10px 0 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.av-video-no-chat .av-chat { padding-top: var(--av-video-h, 0px); }
/* Rodapé enxuto da página ao vivo: fica a marca, os links de confiança e o copyright. */
.av-com-rodape-enxuto .cpst-footer__top, .av-com-rodape-enxuto .cpst-footer__divider, .av-com-rodape-enxuto .cpst-footer__grid { display: none !important; }
.av-rodape-enxuto { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 18px 16px 10px; border-top: 1px solid rgba(0, 0, 0, .08); }
.av-rodape-enxuto a { font-size: 13px; color: inherit; text-decoration: none; }
.av-rodape-enxuto a:hover { text-decoration: underline; }

/* @ do autor (I-016) */
.av-lista .av-arroba { color: #8a90a0; font-size: 12px; margin-left: 4px; }

/* sem animação para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) { .av-abas-pulso { animation: none; } }