/*
 * Pesquisa de intenção de voto — urna eletrônica pública.
 *
 * Arquivo estático de propósito: o navegador o guarda em cache e nenhuma requisição da
 * pesquisa gasta PHP montando estilo. Tudo que muda por respondente viaja em atributos
 * `data-` no HTML, nunca em CSS gerado.
 */

:root {
    --politica-urna-fundo: #1b1f23;
    --politica-urna-mostrador: #e9ecef;
    --politica-urna-texto: #f8f9fa;
    --politica-urna-destaque: #ffd43b;
    --politica-urna-confirma: #2f9e44;
    --politica-urna-corrige: #f08c00;
}

/* ------------------------------------------------------------------ */
/* Trilha de progresso                                                 */
/* ------------------------------------------------------------------ */

.pesquisa-trilha {
    margin: 0;
    padding: 0;
}

.pesquisa-trilha-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 9rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .875rem;
}

.pesquisa-trilha-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    font-weight: 700;
}

/*
 * O NUMERO precisa de cor propria em cada estado.
 *
 * O circulo tem fundo branco e o texto herdava a cor do item — que nas etapas atual e
 * concluida e `#fff`. Resultado: numero branco sobre circulo branco, invisivel justo nas duas
 * etapas que o visitante mais olha, porque sao as que dizem onde ele esta e por onde passou.
 */
.pesquisa-trilha-atual {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.pesquisa-trilha-atual .pesquisa-trilha-numero {
    background: #fff;
    color: var(--bs-primary, #0d6efd);
}

.pesquisa-trilha-concluido {
    background: var(--politica-urna-confirma);
    color: #fff;
}

/*
 * Etapa concluida: o numero da lugar ao "visto". A marca comunica conclusao sem depender de
 * cor — quem nao distingue verde continua vendo que aquela etapa terminou.
 */
.pesquisa-trilha-concluido .pesquisa-trilha-numero {
    background: #fff;
    color: var(--politica-urna-confirma);
}

/* Estado pendente: o item ja e claro, entao o circulo escurece para se destacar dele. */
.pesquisa-trilha-pendente .pesquisa-trilha-numero {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
    border: .1rem solid currentColor;
}

/* ------------------------------------------------------------------ */
/* Isca anti-robô                                                      */
/* ------------------------------------------------------------------ */

/*
 * Fora da tela em vez de `display:none`: parte dos robôs ignora campo oculto por display,
 * mas preenche o que está no fluxo do documento. `aria-hidden` no contêiner e `tabindex=-1`
 * no campo garantem que leitor de tela e navegação por teclado nunca o alcancem.
 */
.pesquisa-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Autocompletar de profissão                                          */
/* ------------------------------------------------------------------ */

.pesquisa-sugestoes {
    position: absolute;
    z-index: 1056;
    max-height: 15rem;
    overflow-y: auto;
    width: calc(100% - 1.5rem);
}

.pesquisa-sugestoes .list-group-item {
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Urna                                                                */
/* ------------------------------------------------------------------ */

.urna-mostrador {
    background: var(--politica-urna-mostrador);
    border: .35rem solid var(--politica-urna-fundo);
    border-radius: .75rem;
    padding: 1.25rem;
    height: 100%;
    color: #16191c;
    font-family: "Courier New", Courier, monospace;
}

.urna-rotulo {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #495057;
}

.urna-cargo {
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1rem;
    line-height: 1.15;
}

.urna-numero-area {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.urna-numero-rotulo {
    font-size: .9rem;
    text-transform: uppercase;
    margin: 0;
}

/*
 * O campo do número usa `ch` e espaçamento entre caracteres para imitar as casas da urna
 * sem deixar de ser um `<input>` comum — teclado físico, leitor de tela e preenchimento
 * automático continuam funcionando.
 */
.urna-numero {
    font-family: inherit;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: .5rem;
    text-align: center;
    width: auto;
    min-width: 6ch;
    padding: .25rem .5rem;
    border: .15rem solid #16191c;
    border-radius: .35rem;
    background: #fff;
}

/* ------------------------------------------------------------------ corpo em duas colunas */

/*
 * Dados a esquerda, foto a DIREITA e em posicao fixa. A coluna da foto reserva o espaco
 * desde o inicio (`flex: 0 0 <largura>`), mesmo sem candidato: se ela so surgisse ao
 * completar o numero, o bloco saltaria justo quando a pessoa esta conferindo o voto.
 */
.urna-corpo {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: .5rem;
}

.urna-coluna-dados {
    flex: 1 1 auto;
    min-width: 0;
}

.urna-coluna-foto {
    flex: 0 0 8.5rem;
}

.urna-foto-moldura {
    width: 8.5rem;
    height: 11rem;
    border: .15rem solid #16191c;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* `contain` e nao `cover`: a foto oficial do TSE e retrato, e recortar corta a cabeca. */
.urna-foto-moldura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * Foto do VICE: menor, logo abaixo da do titular.
 *
 * So aparece em cargo de chapa (presidente e governador). A largura acompanha a moldura do
 * titular para as duas ficarem alinhadas na coluna da direita.
 */
.urna-foto-vice {
    width: 8.5rem;
    margin-top: .5rem;
    text-align: center;
}

.urna-foto-vice img {
    width: 5rem;
    height: 6.5rem;
    object-fit: contain;
    border: .1rem solid #16191c;
    background: #fff;
}

.urna-foto-vice-rotulo {
    display: block;
    font-size: .7rem;
    line-height: 1.2;
    margin-top: .15rem;
    word-break: break-word;
}

/* ------------------------------------------------------------------ casas do numero */

/*
 * Uma caixinha por digito. Elas sao DECORACAO (`aria-hidden` no template): quem le por
 * leitor de tela ouve o `<input>`, que continua sendo o campo de verdade.
 */
.urna-casas {
    display: inline-flex;
    gap: .35rem;
}

.urna-casa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 3rem;
    border: .15rem solid #16191c;
    border-radius: .25rem;
    background: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* A casa que recebe o proximo digito, para a pessoa saber onde esta. */
.urna-casa-atual {
    border-color: #0b6b3a;
    box-shadow: 0 0 0 .15rem rgba(11, 107, 58, .25);
}

/*
 * Com JavaScript o `<input>` sai da tela mas CONTINUA no formulario e no leitor de tela.
 * `position: absolute` em vez de `display: none` de proposito: campo escondido com `none`
 * nao e focavel nem anunciado, e a urna deixaria de funcionar para quem usa leitor.
 */
.urna .urna-numero-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.urna-ficha {
    margin-top: 1rem;
    min-height: 7rem;
    border-top: .1rem dashed #adb5bd;
    padding-top: .75rem;
}

.urna-ficha-vazia {
    color: #868e96;
    font-size: .95rem;
}

.urna-ficha-foto {
    width: 5.5rem;
    height: 7rem;
    object-fit: cover;
    border: .15rem solid #16191c;
    background: #fff;
}

.urna-ficha-dados {
    font-size: 1rem;
    line-height: 1.5;
}

.urna-ficha-nome {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
}

.urna-ficha-erro {
    color: #c92a2a;
    font-weight: 700;
}

.urna-instrucoes {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    font-size: .85rem;
    color: #343a40;
}

/* ------------------------------------------------------------------ */
/* Teclado                                                             */
/* ------------------------------------------------------------------ */

.urna-teclado {
    background: var(--politica-urna-fundo);
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
}

.urna-teclas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.urna-tecla,
.urna-acao {
    border: none;
    border-radius: .35rem;
    font-weight: 700;
    cursor: pointer;
    padding: .85rem .5rem;
    font-size: 1.35rem;
    background: #495057;
    color: var(--politica-urna-texto);
}

.urna-tecla:hover,
.urna-tecla:focus-visible {
    background: #5c636a;
}

.urna-tecla-vazia {
    display: block;
}

.urna-acoes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-top: .75rem;
}

/*
 * BRANCO, CORRIGE e CONFIRMA em 11px para caberem lado a lado.
 *
 * O tamanho fica AQUI, e nao na regra `.urna-tecla, .urna-acao` acima, por dois motivos:
 * aquela regra vale tambem para as teclas numericas, que devem continuar grandes; e ela ja
 * define `font-size: 1.35rem` mais abaixo no proprio bloco, que venceria por vir depois.
 *
 * `px` e nao `rem` de proposito: os tres rotulos precisam caber na largura do teclado, e em
 * `rem` o tamanho acompanharia a preferencia de fonte do navegador e voltaria a estourar.
 */
.urna-acao {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.urna-branco {
    background: #f8f9fa;
    color: #16191c;
}

.urna-corrige {
    background: var(--politica-urna-corrige);
    color: #16191c;
}

.urna-confirma {
    background: var(--politica-urna-confirma);
    color: #fff;
}

/* O foco tem de aparecer sobre fundo escuro; o contorno padrão do tema some nele. */
.urna-tecla:focus-visible,
.urna-acao:focus-visible {
    outline: .2rem solid var(--politica-urna-destaque);
    outline-offset: .15rem;
}

/* ------------------------------------------------------------------ */
/* Tela FIM                                                            */
/* ------------------------------------------------------------------ */

.urna-fim {
    background: var(--politica-urna-mostrador);
    border: .35rem solid var(--politica-urna-fundo);
    border-radius: .75rem;
    padding: 3.5rem 1rem;
}

.urna-fim-texto {
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(2.5rem, 12vw, 5rem);
    font-weight: 700;
    letter-spacing: .3em;
    margin: 0;
    color: #16191c;
}

/* ------------------------------------------------------------------ */
/* Resultado                                                           */
/* ------------------------------------------------------------------ */

.pesquisa-ranking-foto {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    flex: 0 0 4rem;
}

.pesquisa-sem-foto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.5rem;
}

.pesquisa-lista-cargos {
    max-width: 32rem;
}

.pesquisa-form-codigo {
    max-width: 20rem;
}

.pesquisa-codigo {
    letter-spacing: .6rem;
    font-family: "Courier New", Courier, monospace;
}

@media (prefers-reduced-motion: reduce) {
    .urna-tecla,
    .urna-acao {
        transition: none;
    }
}

/* ------------------------------------------------------------------ meus votos */

/*
 * A foto do voto vinha SEM `object-fit` num quadrado de 64x64. Como a foto oficial do TSE e
 * retrato, o navegador esticava a imagem — era a "distorcao" no fim da pesquisa.
 */
.pesquisa-voto-foto {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    flex: 0 0 4rem;
}

/* A foto e um botao que reabre a urna: some a aparencia de botao, fica a de imagem clicavel. */
.pesquisa-revotar {
    margin: 0;
}

.pesquisa-revotar-botao {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: .375rem;
}

.pesquisa-revotar-botao:hover .pesquisa-voto-foto,
.pesquisa-revotar-botao:focus-visible .pesquisa-voto-foto {
    filter: brightness(.7);
}

/* O selo diz o que o clique faz — imagem clicavel sem sinal nenhum nao se anuncia. */
.pesquisa-revotar-selo {
    position: absolute;
    right: -.25rem;
    bottom: -.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: .8rem;
}

/* ------------------------------------------------------------------ urna no celular */

/*
 * No celular a foto vai para BAIXO dos números, não para cima.
 *
 * O corpo da urna é `display: flex` em duas colunas. Numa tela estreita o flex quebra em
 * linhas, e como a coluna da FOTO vem primeiro no fluxo quando o espaço acaba, ela subia e
 * empurrava as casas do número para debaixo dela — o oposto da urna real, onde o número
 * digitado é a primeira coisa que a pessoa confere.
 *
 * `flex-direction: column` com `order` explícita resolve sem depender da ordem do HTML, que
 * precisa continuar como está: dados antes da foto é a ordem que o leitor de tela anuncia, e
 * ouvir "foto do candidato" antes do número seria a mesma inversão, só que para quem não vê.
 */
@media (max-width: 575.98px) {
    .urna-corpo {
        flex-direction: column;
    }

    .urna-coluna-dados {
        order: 1;
        width: 100%;
    }

    .urna-coluna-foto {
        order: 2;
        flex: 0 0 auto;
        align-self: center;
    }

    /* A moldura acompanha a largura disponível, sem esticar a foto. */
    .urna-foto-moldura {
        width: 7rem;
        height: 9rem;
    }

    .urna-foto-vice {
        width: 7rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* As casas do número encolhem para caber lado a lado em tela estreita. */
    .urna-casa {
        width: 1.9rem;
        height: 2.6rem;
        font-size: 1.6rem;
    }
}