/**
 * Estilos do frontend da Divulgação de Resultados (metodologia BEM).
 *
 * Todas as cores, fontes, raios e durações são expostas como custom properties
 * no escopo `.eleag-resultado`, permitindo que o tema sobrescreva a paleta e a
 * tipografia sem editar este arquivo (ver .docs/divulgacao-resultados-tema.md).
 */

/* Bloco raiz do resultado */
.eleag-resultado {
    /* Cores (MT por padrão) */
    --eleag-cor-preto: #272c2e;
    --eleag-cor-destaque: #009a31;
    --eleag-cor-destaque-secundario: #404346;
    --eleag-cor-situacao-neutra: var(--Neutra-Cinza, #707070);
    --eleag-cor-borda: #e3e3e3;
    --eleag-cor-cinza: #707070;
    --eleag-cor-cinza-escuro: #404346;
    --eleag-cor-branco: #ffffff;
    --eleag-cor-suave: #f4f6f9;

    /* Tipografia */
    --eleag-font-titulo: 'Roboto', sans-serif;
    --eleag-font-destaque: 'Lato', sans-serif;

    /* Layout */
    --eleag-radius: 8px;
    --eleag-radius-sm: 5px;

    /* Animações */
    --eleag-duracao: 260ms;
    --eleag-duracao-shimmer: 1.4s;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 24px 0;
    padding: 20px;
    font-family: var(--eleag-font-titulo);
    border: 1px solid var(--eleag-cor-borda);
    border-radius: var(--eleag-radius);
}

.eleag-resultado *,
.eleag-resultado *::before,
.eleag-resultado *::after {
    box-sizing: border-box;
}

/* Garante que elementos com [hidden] fiquem ocultos mesmo quando possuem
   display flex/grid definido por regras internas. */
.eleag-resultado [hidden] {
    display: none !important;
}

/* Título do bloco */
.eleag-resultado__titulo {
    width: 100%;
    padding-bottom: 8px;
}

.eleag-resultado .eleag-resultado__titulo-texto {
    margin: 0;
    font-size: 23px !important;
    line-height: 34px !important;
    font-weight: 600 !important;
    color: var(--eleag-cor-preto);
}

/* Bloco de apuração (percentual + barra + resumo) */
.eleag-resultado__apuracao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--eleag-cor-borda);
}

.eleag-resultado__apuracao-progresso {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eleag-resultado .eleag-resultado__apuracao-texto {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    color: var(--eleag-cor-preto);
}

.eleag-resultado__barra-apuracao {
    display: block;
    width: 100%;
    max-width: 500px;
    height: 4px;
    background: var(--eleag-cor-borda);
    border-radius: 1000px;
    overflow: hidden;
}

.eleag-resultado__barra-apuracao-tint {
    display: block;
    height: 100%;
    width: 0;
    background: var(--eleag-cor-destaque);
    border-radius: 1000px;
    transition: width var(--eleag-duracao) ease;
}

.eleag-resultado .eleag-resultado__apuracao-resumo {
    margin: 0;
    font-size: 14px;
    line-height: 25px;
    color: var(--eleag-cor-cinza);
}

/* Corpo (filtros + status + skeleton + destaques + tabela) */
.eleag-resultado__corpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Totais de votos (válidos, brancos, nulos e anulados). */
.eleag-resultado__votos {
    padding: 20px 0;
    border-top: 1px solid var(--eleag-cor-borda);
    border-bottom: 1px solid var(--eleag-cor-borda);
}

.eleag-resultado__votos-conteudo,
.eleag-resultado__votos-skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}

.eleag-resultado__voto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    min-width: 0;
}

.eleag-resultado__voto-tipo {
    grid-column: 1 / -1;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--eleag-cor-preto);
}

.eleag-resultado__voto-quantidade,
.eleag-resultado__voto-percentual {
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 20px;
    color: var(--eleag-cor-cinza);
}

.eleag-resultado__voto-quantidade {
    font-weight: normal;
}

.eleag-resultado__voto-percentual {
    text-align: right;
    white-space: nowrap;
}

.eleag-resultado__votos-skeleton-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eleag-resultado__votos-skeleton-linha {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--eleag-cor-borda) 25%, var(--eleag-cor-suave) 37%, var(--eleag-cor-borda) 63%);
    background-size: 400% 100%;
    animation: eleag-shimmer var(--eleag-duracao-shimmer) ease infinite;
}

.eleag-resultado__votos-skeleton-linha--titulo {
    width: 72px;
    height: 18px;
}

.eleag-resultado__votos-skeleton-linha--valor {
    width: 128px;
    height: 16px;
}

/* Barra de filtros (cargo, UF, cidade) */
.eleag-resultado__filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

/* Campo de filtro individual (label + select), largura de um card de destaque */
.eleag-resultado__campo {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 4px;
    max-width: calc(50% - 6px);
    min-width: 200px;
}

/* Rótulo do campo */
.eleag-resultado__campo-label {
    font-size: 14px;
    line-height: 25px;
    color: var(--eleag-cor-cinza);
}

/* Select nativo dos filtros (permanece oculto; o combobox assume a interface) */
.eleag-resultado__select {
    padding: 8px 16px;
    border: 1px solid var(--eleag-cor-borda);
    border-radius: var(--eleag-radius-sm);
    background: var(--eleag-cor-branco);
    font-size: 14px;
    color: var(--eleag-cor-cinza-escuro);
}

/* Combobox filtrável (input + lista suspensa) */
.eleag-combo {
    position: relative;
}

.eleag-combo::after {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 22px;
    height: 22px;
    background: url('../assets/chevron-down.svg') center / 15px 9px no-repeat;
    content: '';
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform var(--eleag-duracao) ease;
}

.eleag-combo:has(.eleag-combo__input[aria-expanded='true'])::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Campo de digitação do combobox */
.eleag-combo__input {
    width: 100%;
    padding: 8px 48px 8px 16px;
    border: 1px solid var(--eleag-cor-borda);
    border-radius: var(--eleag-radius-sm);
    background: var(--eleag-cor-branco);
    font-size: 14px;
    line-height: 23px;
    color: var(--eleag-cor-cinza-escuro);
    cursor: pointer;
}

/* Combobox em foco */
.eleag-combo__input:focus {
    outline: none;
    border-color: var(--eleag-cor-destaque);
    box-shadow: 0 0 0 2px rgba(0, 154, 49, 0.15);
}

/* Lista suspensa de opções. O seletor aninhado vence o padding de listas do tema. */
.eleag-resultado .eleag-combo__lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--eleag-cor-branco);
    border: 1px solid var(--eleag-cor-borda);
    border-radius: var(--eleag-radius-sm);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Item de opção do combobox */
/* Seletor aninhado sob `.eleag-resultado` para vencer a especificidade do tema
   em `.single_block_news_text ul li` (classe + 2 tags), que reintroduzia o bullet. */
.eleag-resultado .eleag-combo__item {
    list-style: none;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--eleag-cor-cinza-escuro);
    cursor: pointer;
}

/* Item ativo (teclado) ou sob o ponteiro */
.eleag-combo__item--ativo,
.eleag-combo__item:hover {
    background: var(--eleag-cor-suave);
    color: var(--eleag-cor-destaque);
}

/* Mensagem de status/carregamento e erro */
.eleag-resultado__status {
    color: var(--eleag-cor-cinza);
    font-size: 14px;
    padding: 12px 0;
}

/* Aviso para os motivos oficiais de não atribuição de eleitos. */
.eleag-resultado__atribuicao {
    padding: 12px 16px;
    border-left: 3px solid var(--eleag-cor-situacao-neutra);
    background: var(--eleag-cor-suave);
    color: var(--eleag-cor-cinza-escuro);
}

.eleag-resultado__atribuicao-titulo {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
}

.eleag-resultado__atribuicao-motivos {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 13px;
}

/* ==========================================================================
   Skeleton loading
   ========================================================================== */

.eleag-resultado__skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eleag-resultado__skeleton-linha,
.eleag-resultado__skeleton-card {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--eleag-cor-borda) 25%, var(--eleag-cor-suave) 37%, var(--eleag-cor-borda) 63%);
    background-size: 400% 100%;
    animation: eleag-shimmer var(--eleag-duracao-shimmer) ease infinite;
}

.eleag-resultado__skeleton-linha--titulo {
    height: 20px;
    width: 60%;
}

.eleag-resultado__skeleton-linha--barra {
    height: 8px;
    width: 100%;
}

.eleag-resultado__skeleton-linha--tabela {
    height: 48px;
}

.eleag-resultado__skeleton-cards {
    display: flex;
    gap: 12px;
}

.eleag-resultado__skeleton-card {
    flex: 1 1 0;
    height: 87px;
}

@keyframes eleag-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* ==========================================================================
   Cards de destaque (top 2 colocados)
   ========================================================================== */

.eleag-resultado__destaques {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.eleag-resultado__card {
    position: relative;
    flex: 1 1 280px;
    overflow: hidden;
    background: var(--eleag-cor-branco);
    border: 1px solid var(--eleag-cor-borda);
    border-radius: var(--eleag-radius);
}

.eleag-resultado__card-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 18px;
}

.eleag-resultado__card-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 4px;
    background: var(--eleag-cor-borda);
}

.eleag-resultado__card-barra-tint {
    display: block;
    height: 100%;
    width: 0;
    background: var(--eleag-cor-destaque);
    border-radius: 1000px;
    transition: width var(--eleag-duracao) ease;
}

/* Posição fixa (36x36); o tamanho da fonte degrada conforme o nº de dígitos
   para nunca aumentar a caixa (ver data-len no JS). */
.eleag-resultado__card-posicao {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--eleag-cor-destaque);
}

.eleag-resultado__card-posicao-num {
    font-family: var(--eleag-font-destaque);
    font-weight: 800;
    font-size: 16px;
    color: var(--eleag-cor-branco);
    white-space: nowrap;
}

.eleag-resultado__card-posicao-num[data-len="2"] {
    font-size: 14px;
}

.eleag-resultado__card-posicao-num[data-len="3"] {
    font-size: 12px;
}

.eleag-resultado__card-posicao-num[data-len="4"],
.eleag-resultado__card-posicao-num[data-len="5"] {
    font-size: 14px;
}

/* Seletor aninhado sob `.eleag-resultado` para vencer a especificidade do tema
   em `.single_block_news_text img` (classe + tag), que distorcia a foto. */
.eleag-resultado .eleag-resultado__card-foto {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    max-width: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--eleag-cor-suave);
}

.eleag-resultado__card-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.eleag-resultado__card-info > * {
    line-height: normal;
}

.eleag-resultado__card-nome {
    overflow: hidden;
    font-family: var(--eleag-font-destaque);
    font-weight: 700;
    font-size: 16px;
    color: var(--eleag-cor-cinza-escuro);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eleag-resultado__card-partido,
.eleag-resultado__card-votos {
    font-size: 12px;
    color: var(--eleag-cor-cinza);
}

.eleag-resultado__card-lateral {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.eleag-resultado__card-badge,
.eleag-resultado__linha-badge {
    padding: 3px 7px;
    border: 1px solid var(--eleag-cor-destaque);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    /* Evita herdar o line-height inflado do tema para listas (`.single_block_news_text ul`),
       que fazia o badge da tabela ocupar 100% da altura da linha. */
    line-height: normal;
    color: var(--eleag-cor-destaque);
    white-space: nowrap;
}

.eleag-resultado__card-percentual {
    font-family: var(--eleag-font-destaque);
    font-weight: 800;
    font-size: 20px;
    color: var(--eleag-cor-destaque);
}

/* Card/percentual/badge/posição na cor neutra quando o 2º colocado não é eleito */
.eleag-resultado__card--secundario .eleag-resultado__card-barra-tint,
.eleag-resultado__card--secundario .eleag-resultado__card-posicao {
    background: var(--eleag-cor-destaque-secundario);
}

.eleag-resultado__card--secundario .eleag-resultado__card-percentual,
.eleag-resultado__card--secundario .eleag-resultado__card-badge {
    color: var(--eleag-cor-destaque-secundario);
    border-color: var(--eleag-cor-destaque-secundario);
}

.eleag-resultado__card-badge--neutro,
.eleag-resultado__linha-badge--neutro {
    color: var(--eleag-cor-situacao-neutra);
    border-color: var(--eleag-cor-situacao-neutra);
}

.eleag-resultado__card--atribuicao-impedida .eleag-resultado__card-barra-tint,
.eleag-resultado__card--atribuicao-impedida .eleag-resultado__card-posicao {
    background: var(--eleag-cor-situacao-neutra);
}

.eleag-resultado__card--atribuicao-impedida .eleag-resultado__card-percentual,
.eleag-resultado__card--atribuicao-impedida .eleag-resultado__card-badge {
    color: var(--eleag-cor-situacao-neutra);
    border-color: var(--eleag-cor-situacao-neutra);
}

/* ==========================================================================
   Tabela paginada
   ========================================================================== */

.eleag-resultado__tabela {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
    overflow: hidden;
}

.eleag-resultado__tabela-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eleag-resultado__tabela-titulo {
    font-size: 12px;
    color: var(--eleag-cor-cinza);
}

.eleag-resultado__tabela-botoes {
    display: flex;
    gap: 4px;
}

.eleag-resultado__tabela-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 2px;
    border: 0;
    border-radius: 4px;
    background: var(--eleag-cor-borda);
    /* Ícone verde (habilitado); vira preto com opacidade reduzida quando desabilitado (ver Figma). */
    color: var(--eleag-cor-destaque);
    cursor: pointer;
}

.eleag-resultado__tabela-botao:disabled {
    color: var(--eleag-cor-preto);
    opacity: 0.38;
    cursor: default;
}

.eleag-resultado__linhas {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eleag-resultado__linha {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 8px 0;
    border-bottom: 1px solid var(--eleag-cor-borda);
}

.eleag-resultado__linha-posicao {
    flex-shrink: 0;
    width: 32px;
    font-family: var(--eleag-font-destaque);
    font-weight: 800;
    font-size: 16px;
    color: var(--eleag-cor-cinza-escuro);
}

/* Seletor aninhado sob `.eleag-resultado` pelo mesmo motivo do `.eleag-resultado__card-foto`. */
.eleag-resultado .eleag-resultado__linha-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    max-width: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--eleag-cor-suave);
}

/* Placeholder quando a foto do candidato falha ao carregar (mantém o círculo de fundo) */
.eleag-resultado__foto--erro {
    opacity: 0;
}

.eleag-resultado__linha-info {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.eleag-resultado__linha-dados {
    display: contents;
}

.eleag-resultado__linha-nome {
    overflow: hidden;
    font-weight: 700;
    font-size: 12px;
    color: var(--eleag-cor-cinza-escuro);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eleag-resultado__linha-partido {
    font-size: 14px;
    color: var(--eleag-cor-cinza);
    white-space: nowrap;
}

.eleag-resultado__linha-valores {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.eleag-resultado__linha-votos {
    font-size: 14px;
    color: var(--eleag-cor-cinza);
    white-space: nowrap;
}

.eleag-resultado__linha-percentual {
    width: 60px;
    font-weight: 800;
    font-size: 14px;
    color: var(--eleag-cor-cinza-escuro);
    text-align: right;
    white-space: nowrap;
}

/* Tabela no breakpoint Medium: informações e valores em duas linhas, conforme o Figma. */
@media (max-width: 1051.98px) {
    .eleag-resultado__tabela {
        padding: 8px;
    }

    .eleag-resultado__linha {
        gap: 8px;
    }

    .eleag-resultado__linha-posicao {
        width: 20px;
        font-size: 12px;
        line-height: normal;
    }

    .eleag-resultado .eleag-resultado__linha-avatar {
        width: 28px;
        height: 28px;
        max-width: 28px;
    }

    .eleag-resultado__linha-info {
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .eleag-resultado__linha-dados {
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
        /* width: 80px; */
        min-width: 0;
    }

    .eleag-resultado__linha-nome {
        max-width: 200px;
        line-height: 14px;
    }

    .eleag-resultado__linha-partido {
        max-width: 200px;
        overflow: hidden;
        line-height: 14px;
        text-overflow: ellipsis;
    }

    .eleag-resultado__linha-valores {
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
    }

    .eleag-resultado__linha-votos,
    .eleag-resultado__linha-percentual {
        line-height: 14px;
    }

    .eleag-resultado__linha-votos {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .eleag-resultado__linha-percentual {
        order: -1;
    }
}

/* ==========================================================================
   Animações de reordenação e paginação
   ========================================================================== */

.eleag-resultado__linha--flip {
    transition: transform var(--eleag-duracao) ease;
}

.eleag-resultado__linha--entra-direita {
    animation: eleag-entra-direita var(--eleag-duracao) ease;
}

.eleag-resultado__linha--entra-esquerda {
    animation: eleag-entra-esquerda var(--eleag-duracao) ease;
}

@keyframes eleag-entra-direita {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes eleag-entra-esquerda {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .eleag-resultado *,
    .eleag-resultado *::before,
    .eleag-resultado *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Botão "Ver cobertura completa"
   ========================================================================== */

.eleag-resultado__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--eleag-radius-sm);
    background: var(--eleag-cor-destaque);
    font-weight: 800;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
}

/* Seletor aninhado para vencer a especificidade do tema em
   `.single_block_news_text a` (classe + tag), que sobrescrevia a cor do texto. */
.eleag-resultado .eleag-resultado__cta {
    color: var(--eleag-cor-branco);
}

.eleag-resultado__cta:hover,
.eleag-resultado__cta:focus,
/* Seletores aninhados para vencer a especificidade do tema em
   `.single_block_news_text a:hover` (classe + pseudo-classe + tag). */
.eleag-resultado .eleag-resultado__cta:hover,
.eleag-resultado .eleag-resultado__cta:focus {
    opacity: 0.9;
    color: var(--eleag-cor-branco);
    text-decoration: none;
}

/* ==========================================================================
   Responsivo (≤ 600px)
   ========================================================================== */

@media (max-width: 600px) {
    .eleag-resultado {
        padding: 12px;
    }

    .eleag-resultado__titulo-texto {
        font-size: 20px;
        line-height: 30px;
    }

    .eleag-resultado__campo {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }

    .eleag-resultado__votos-conteudo,
    .eleag-resultado__votos-skeleton {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .eleag-resultado__card {
        flex: 1 1 100%;
    }

    .eleag-resultado__tabela {
        padding: 8px;
    }

    .eleag-resultado__linha-posicao {
        width: 20px;
        font-size: 12px;
    }

    .eleag-resultado .eleag-resultado__linha-avatar {
        width: 28px;
        height: 28px;
        max-width: 28px;
    }

    .eleag-resultado__linha-info {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        max-width: fit-content;
    }

    .eleag-resultado__linha-dados {
        flex: 1 1 auto;
        width: auto;
        overflow: hidden;
    }

    .eleag-resultado__linha-nome,
    .eleag-resultado__linha-partido {
        width: 100%;
        max-width: 100%;
    }

    .eleag-resultado__linha-valores {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .eleag-resultado__linha-badge {
        padding: 2px 5px;
        font-size: 8px;
    }
}