/*
 * Estilos específicos da Apuração das Eleições 2026 (Presidente + Governador).
 * Reaproveita a base visual de library/css/apuracao-prefeito.css (2024) -
 * este arquivo cobre o que é novo: layout de duas colunas (mapa sempre à
 * esquerda + conteúdo à direita), abas de cargo, card de candidato e o
 * card resumo (válidos/seções/brancos/nulos/abstenções), compartilhados
 * entre o painel de Presidente (embutido no template principal) e a lista
 * de candidatos a Governador por estado.
 */

#wrap-header {
  margin-bottom: 0 !important;
}

#wrap {
  padding: 0 !important;
  margin-top: 0 !important;

  .container {
    width: 100% !important;

    #pagina-apuracao-2026 {
      background-color: rgb(58, 78, 98);
      padding: 0 16px 4rem 16px;
    }
  }
}

/* Ativado pelo botão de tela cheia (#btn-fullscreen) */
body.apuracao-fullscreen-ativo #wrap-header,
body.apuracao-fullscreen-ativo #wrap-footer,
body.apuracao-fullscreen-ativo #globalbar,
body.apuracao-fullscreen-ativo #user-container {
  display: none;
}

body.apuracao-fullscreen-ativo #wrap {
  margin: 0;
  padding: 0;
}

body.apuracao-fullscreen-ativo #content {
  width: 100%;
  height: 100%;
}

body.apuracao-fullscreen-ativo .row {
  height: 100%;
  margin: 0;
}

body.apuracao-fullscreen-ativo .row #pagina-apuracao-2026 {
  height: 100%;
}

body.apuracao-fullscreen-ativo,
body.apuracao-fullscreen-ativo #wrap,
body.apuracao-fullscreen-ativo #wrap .container,
body.apuracao-fullscreen-ativo #content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.apuracao-fullscreen-ativo #wrap .container #pagina-apuracao-2026 {
  min-height: 100vh;
  height: 100%;
  padding: 16px 24px;
  padding-top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* centraliza o conteúdo na vertical */
}

body.apuracao-fullscreen-ativo #conteudo-apuracao-2026 {
  /* max-width: none; */
  width: 100%;
}

body.apuracao-fullscreen-ativo #mapa_embed {
  max-width: 900px;
  max-height: 90vh;
}
/* Ativado pelo botão de tela cheia (#btn-fullscreen) */

#conteudo-apuracao-2026 {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 1400px;
  height: stretch;
  margin: 0 auto;
}

@media (max-width: 991px) {
  #conteudo-apuracao-2026 {
    flex-direction: column-reverse;
    align-items: center;
  }
}

#mapa-apuracao {
  width: 100%;
  position: relative;
  flex: 1 1 55%;
  display: flex;
  justify-content: center;
  align-self: center;
  padding-top: 24px;
}

#mapa-apuracao section {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

#mapa_embed {
  width: 100%;
  max-width: 560px;
  height: auto;
}

@media (max-width: 549px) {
  #mapa_embed {
    max-width: 375px;
  }
}

@media (max-width: 424px) {
  #mapa_embed {
    max-width: 300px;
  }
}

#coluna-direita-apuracao {
  flex: 1 1 45%;
  min-width: 320px;
  max-width: 480px;
  width: 100%;
}

@media (max-width: 991px) {
  #coluna-direita-apuracao {
    max-width: 600px;
  }
}

/* Página de detalhes ("ver mais detalhes da apuração") - sem o mapa ao lado,
   coluna ocupa a largura toda (banner/abas continuam em cima, sem mudar de
   lugar, já que ficam dentro de #coluna-direita-apuracao). */
#pagina-apuracao-2026.detalhes-apuracao-ativo #mapa-apuracao {
  display: none;
}

#pagina-apuracao-2026.detalhes-apuracao-ativo #coluna-direita-apuracao {
  max-width: 100%;
}

/* Padrão (mapa visível, coluna estreita) - 3 linhas empilhadas: banner,
   turno+fullscreen, abas de cargo (nessa ordem visual - "order", porque no
   DOM #cargo-tabs fica entre os outros dois pra funcionar também no layout
   de detalhes abaixo). */
#topo-apuracao-2026 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;

  img {
    display: block;
    width: 148px;
    height: 148px;
    object-fit: cover;
    border-radius: 0 0 10px 10px;
  }
}

/* #cargo-tabs {
  order: 3;
} */

/* Página de detalhes ("ver mais detalhes da apuração", sem mapa, coluna
   cheia) - tudo numa linha só: banner + abas à esquerda, turno/fullscreen
   empurrados pra direita. Precisa inverter a "order" de #cargo-tabs e
   #linha-turno-fullscreen (no padrão acima o turno vem antes das abas). */
#pagina-apuracao-2026.detalhes-apuracao-ativo #topo-apuracao-2026 {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

/* #pagina-apuracao-2026.detalhes-apuracao-ativo #cargo-tabs {
  order: 2;
} */

#pagina-apuracao-2026.detalhes-apuracao-ativo #linha-turno-fullscreen {
  order: 3;
}

/* #prefeito-2024-container vem de apuracao-prefeito.css, pensado pro banner
   da página de 2024. Aqui ele é só um card no topo da coluna direita - as
   propriedades abaixo sobrescrevem o CSS compartilhado só nesta página
   (apuracao-eleicoes-2026.css não é carregado na página de 2024), então o
   card de lá continua com a aparência original. */
#prefeito-2024-container {
  position: relative;
  background-color: rgb(1, 119, 188);
  width: fit-content;
  height: fit-content;
  padding: 12px;
  padding-left: 100px;

  .logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    width: 70px;
    height: 70px;
    border-radius: 5px;
  }
}

@media (max-width: 992px) {
  #prefeito-2024-container {
    width: 100%;
  }
}

/* Mesma lógica pra #welcome-container e .welcome-container-title-color (tela
   "Selecione um estado" do Governador) - existem em apuracao-prefeito.css
   com fundo azul-marinho e texto claro (pensados pro fundo escuro de 2024);
   aqui o card é branco, então sobrescrevemos só nesta página. */
#welcome-container {
  background-color: #ffffff;
  margin-left: 0;
  margin-top: 0;
}

.welcome-container-title-color {
  font-weight: 900;
  font-size: 20px;
  line-height: 1.2;
  color: rgb(1, 119, 188);
  margin-bottom: 12px;
}

.welcome-container-text-color-governor {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(96, 104, 110);
  text-wrap: pretty;
  margin-bottom: 0 !important;
}

.fs-18 {
  font-size: 18px;
}

.fs-26 {
  font-size: 26px;
}

.fs-34 {
  font-size: 34px;
}

.fs-42 {
  font-size: 42px;
}

.line-height-38 {
  line-height: 38px;
}

.banner-ano-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  width: 100%;
}

#linha-turno-fullscreen {
  /* order: 2; */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* #pagina-apuracao-2026.detalhes-apuracao-ativo #linha-turno-fullscreen {
  margin-left: auto;
} */

/* #botoes-container vem de apuracao-prefeito.css com margin-left:64px,
   pensado pra outro contexto (2024) - aqui ele é a "pílula" branca do
   seletor de turno, ao lado do botão de tela cheia. */
#linha-turno-fullscreen #botoes-container {
  margin-left: 0;
  flex: 1;
}

#btn-fullscreen {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: rgb(23, 74, 120);
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Seletores em formato de pílula (turno e cargo): fundo branco arredondado,
   opção ativa como bloco azul preenchido, inativa em texto cinza - sem
   borda nem espaçamento entre as duas opções. */
#linha-turno-fullscreen #botoes-container,
#cargo-tabs {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

#linha-turno-fullscreen #botoes-container #botao-1,
#linha-turno-fullscreen #botoes-container #botao-2,
.cargo-tab,
.cargo-tab-active {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
}

#linha-turno-fullscreen #botoes-container #botao-1,
.cargo-tab-active {
  background-color: rgb(23, 74, 120);
  color: #ffffff;
}

#linha-turno-fullscreen #botoes-container #botao-2,
.cargo-tab {
  background-color: transparent;
  color: #9aa5b1;
}

.area-cargo {
  width: 100%;
}

/* Painel com o candidato líder do estado sob o mouse (requisito do documento
   de solicitação: "importante para televisão"). Segue o cursor - a posição
   do mouse dentro do <embed> do SVG é convertida pra coordenada da página
   somando com a posição do próprio <embed> (getBoundingClientRect), ver
   posicionarPainelLiderNoMouse em apuracao-governador.js. */
.candidato-lider-estado {
  display: none;
  /* position:fixed porque a posição é calculada em coordenadas de viewport
     (ver posicionarPainelLiderNoMouse em apuracao-governador.js) - left/top
     são setados via JS a cada hover, não fixos aqui. */
  position: fixed;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  min-width: 240px;
  max-width: 280px;
  z-index: 10;
}

.candidato-lider-cabecalho {
  margin-bottom: 8px;
}

.candidato-lider-estado-nome {
  font-size: 18px;
  font-weight: bold;
  color: #1b1f22;
  margin: 0 0 4px;
}

.candidato-lider-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7a828a;
  letter-spacing: 0.5px;
}

.candidato-lider-vazio {
  font-size: 12px;
  color: #7a828a;
  margin: 4px 0 0;
}

.candidato-lider-linha {
  margin-top: 12px;
}

.candidato-lider-linha-topo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.candidato-lider-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: #e0e7ed;
  color: #9aa5b1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.candidato-lider-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.candidato-lider-textos {
  flex: 1;
  min-width: 0;
}

.candidato-lider-nome {
  font-size: 13px;
  font-weight: bold;
  color: #1b1f22;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.candidato-lider-partido {
  font-size: 11px;
  color: #7a828a;
  margin: 2px 0 0;
}

.candidato-lider-percentual {
  font-size: 15px;
  font-weight: bold;
  color: #1b1f22;
  margin: 0;
  flex-shrink: 0;
}

.candidato-lider-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e0e1e1;
  font-size: 11px;
  color: #7a828a;
}

.candidato-lider-rodape a {
  color: rgb(23, 74, 120);
  font-weight: bold;
  text-decoration: none;
}

#presidente-resumo,
#governador-candidatos-container {
  width: 100%;
}

.text {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .governor {
    color: #ffffff;
  }

  .state {
    color: #ffffff;
  }
}

.no-result {
  margin-top: 20px;
}

/* Card de candidato - avatar circular (foto ou ícone de pessoa quando não
   há foto) + nome/partido/percentual/votos + barra de progresso. */
.candidato-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

.candidato-avatar {
  width: 68px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: #e0e7ed;
  color: #9aa5b1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 12px;
}

.candidato-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.candidato-informacoes {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.candidato-textos {
  display: flex;
  justify-content: space-between;
}

.candidato-situacao-linha {
  margin-top: 8px;
}

.candidato-situacao-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.candidato-textos-lado-direito {
  display: flex;
  flex-direction: column;
  align-items: end;
}

@media (max-width: 420px) {
  .candidato-textos {
    flex-direction: column;
  }

  .candidato-textos-lado-direito {
    align-items: flex-start;
    margin-top: 8px;
  }
}

.progress-bar-nulos {
  background-color: #e0e7ed;
  border-radius: 5px;
  height: 4px;
  overflow: hidden;
}

/* Card resumo (Brasil ou o estado aberto) - válidos/seções/brancos/nulos/
   abstenções + urnas apuradas, no lugar da antiga linha de 4 caixas. */
.resumo-local-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.resumo-local-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.resumo-local-local {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resumo-local-cinza {
  color: rgb(52, 52, 52);
  font-weight: 900;
}

.resumo-local-urnas {
  display: flex;
  text-align: right;
  gap: 10px;

  .left {
    .urnas-apuradas {
      color: rgb(1, 119, 188);
    }
  }

  .right {
    .porcent {
      line-height: 34px;
    }
  }
}

.resumo-local-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  flex-wrap: wrap;

  .porcent {
    color: rgb(23, 74, 120);
    font-weight: 900;
  }
}

.resumo-local-stats > div {
  text-align: left;
}

.ultima-atualizacao-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  gap: 12px;
}

.ultima-atualizacao-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bloco abaixo da "última atualização" - padrão: fundo branco, letra cinza,
   botão da seta azul (quadrado de canto arredondado). Hover: o próprio
   quadrado da seta "cresce" (::before) até ocupar todo o espaço branco,
   virando o fundo da linha inteira - texto e ícone ficam por cima (z-index). */
.ver-mais-detalhes {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #7a828a;
  text-decoration: none;
  cursor: pointer;
}

.ver-mais-detalhes::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  right: 16px;
  width: 32px;
  border-radius: 6px;
  background-color: rgb(23, 74, 120);
  transition:
    right 0.3s ease,
    width 0.3s ease,
    top 0.3s ease,
    bottom 0.3s ease,
    border-radius 0.3s ease;
}

.ver-mais-detalhes:hover::before {
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  border-radius: 8px;
}

.ver-mais-detalhes-texto {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.ver-mais-detalhes:hover .ver-mais-detalhes-texto {
  color: #ffffff;
}

.ver-mais-detalhes-seta {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
}

/* Contagem regressiva até a próxima auto-atualização - anel que esvazia
   conforme os segundos passam (var(--progress) definida via JS a cada
   segundo em iniciarContagemRegressivaAtualizacao). */
.update-countdown {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    rgb(23, 74, 120) 0% var(--progress, 100%),
    #e0e7ed var(--progress, 100%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-countdown::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: #ffffff;
  border-radius: 50%;
}

.update-countdown span {
  position: relative;
  font-size: 14px;
  font-weight: bold;
  color: rgb(23, 74, 120);
}

.update-button {
  background-color: rgb(23, 74, 120);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.loader-candidatos {
  width: 60px;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side, rgb(23, 74, 120) 90%, #0000) 0 /
    calc(100% / 3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: apuracao2026-loading 1s steps(4) infinite;
}

@keyframes apuracao2026-loading {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}

/* Página de detalhes - linha de topo (voltar + local + urnas + última
   atualização) e rodapé de estatísticas com ícone. */
.detalhes-topo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 16px;
  gap: 20px;
  flex-wrap: wrap;
}

#seletor-estado-governador-container {
  order: 2;

  .seletor-estado-custom {
    position: relative;
    min-width: 180px;

    & .seletor-estado-botao {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      height: 52px;
      padding: 8px 12px;
      background-color: #ffffff;
      border: none;
      border-radius: 7px;
      cursor: pointer;

      & .seletor-estado-botao-texto {
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        color: rgb(1, 119, 188);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      & .seletor-estado-seta {
        flex-shrink: 0;
        transition: transform 0.15s ease;
      }
    }

    & .seletor-estado-lista {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 20;
      max-height: 260px;
      overflow-y: auto;
      margin: 0;
      padding: 4px 0;
      list-style: none;
      display: none;
      border: none;
      border-radius: 8px;
      background-color: #ffffff;
      /* fundo/borda/sombra a seu gosto */

      /* Firefox */
      scrollbar-width: thin;
      scrollbar-color: rgb(23, 74, 120) transparent;

      /* Scrollbar customizada (Chrome/Edge/Safari) */
      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgb(23, 74, 120);
        border-radius: 3px;
      }

      & .seletor-estado-item {
        padding: 8px 12px;
        cursor: pointer;
        font-weight: 700;
        color: rgb(1, 119, 188);

        &:hover,
        &.seletor-estado-item-ativo {
          /* estado de destaque/selecionado */
          background-color: #f1f1f1;
        }
      }
    }

    &.seletor-estado-aberto {
      & .seletor-estado-seta {
        transform: rotate(180deg);
      }

      & .seletor-estado-lista {
        display: block;
      }
    }
  }
}

.detalhes-stats-row {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px 20px;
  margin-top: 12px;
  gap: 16px;
  flex-wrap: wrap;
}

.detalhes-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detalhes-stat-icone {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: #e7f1f9;
  color: rgb(23, 74, 120);
  display: flex;
  align-items: center;
  justify-content: center;
}