/* Minha Colinha — a cola que o eleitor leva para a votação. */

.colinha-wrap {
    padding-bottom: 96px;
}

.colinha-hero {
    background: #04182e;
    color: #fff;
    border-radius: .9rem;
    padding: 26px 28px;
    margin-bottom: 24px;
}

.colinha-titulo {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    margin: 0;
    font-size: 2rem;
    letter-spacing: -.5px;
}

.colinha-sub {
    margin: 6px 0 0;
    color: #b9c6d6;
    font-size: .95rem;
    max-width: 46ch;
}

.colinha-uf-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #93a4b8;
    margin-bottom: 4px;
}

.colinha-uf {
    min-width: 190px;
    font-weight: 600;
}

.colinha-contador {
    text-align: center;
    background: rgba(20, 157, 221, .16);
    border: 1px solid rgba(20, 157, 221, .5);
    border-radius: .7rem;
    padding: 8px 16px;
    line-height: 1.1;
}

.colinha-contador strong {
    display: block;
    font-size: 1.6rem;
    color: #48c1f2;
}

.colinha-contador span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #b9c6d6;
}

.colinha-vazio {
    text-align: center;
    padding: 70px 20px;
    color: #7c8b9c;
}

.colinha-vazio i {
    font-size: 2.6rem;
    color: #c3ced9;
    display: block;
    margin-bottom: 10px;
}

/* Um cartão embaixo do outro, na mesma ordem da urna eletrônica:
   deputado federal, deputado estadual, senador, governador e presidente. */
.colinha-cartoes {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin: 0 auto;
}

.colinha-cartao {
    background: #fff;
    border-radius: .8rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    padding: 16px 18px;
    border-top: 4px solid #e7edf4;
    transition: border-color .2s;
}

.colinha-cartao.preenchido {
    border-top-color: var(--cor-candidato, #149ddd);
}

.colinha-cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.colinha-cartao-topo h2 {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #5b6b7d;
    margin: 0;
}

.colinha-limpar {
    border: 0;
    background: transparent;
    color: #9aa8b8;
    font-size: .78rem;
    padding: 2px 6px;
    border-radius: .4rem;
}

.colinha-limpar:hover {
    background: #f1f5f9;
    color: #dc3545;
}

.colinha-cartao-corpo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Caixinhas do número, como no visor da urna. */
.colinha-boxes {
    position: relative;
    display: flex;
    gap: 6px;
}

.colinha-boxes-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    font-size: 16px; /* evita o zoom automático no iOS */
    z-index: 2;
    cursor: pointer;
}

.colinha-box {
    width: 42px;
    height: 54px;
    border-radius: .5rem;
    background: #f4f7fb;
    border: 1.5px solid #dde5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #04182e;
}

.colinha-boxes-input:focus ~ .colinha-box.ativo {
    border-color: #149ddd;
    box-shadow: 0 0 0 3px rgba(20, 157, 221, .16);
}

.colinha-box.cheio {
    background: #fff;
    border-color: #c3d2e2;
}

.colinha-resultado {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    flex: 1 1 200px;
}

.colinha-foto {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cor-candidato, #149ddd);
    background: #eef2f7;
}

.colinha-iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    flex: 0 0 auto;
}

.colinha-nome {
    font-weight: 700;
    color: #22313f;
    line-height: 1.2;
}

.colinha-partido {
    font-size: .8rem;
    color: #7c8b9c;
}

.colinha-chapa {
    font-size: .74rem;
    color: #9aa8b8;
}

.colinha-erro {
    color: #b02a37;
    font-size: .85rem;
}

.colinha-cartao-rodape {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.colinha-busca-abrir,
.colinha-fixar {
    border: 1px solid #dde5ee;
    background: #fff;
    color: #5b6b7d;
    font-size: .8rem;
    border-radius: .5rem;
    padding: 5px 10px;
}

.colinha-busca-abrir:hover,
.colinha-fixar:hover {
    border-color: #149ddd;
    color: #149ddd;
}

.colinha-busca {
    margin-top: 12px;
}

.colinha-busca-lista {
    margin-top: 8px;
    display: grid;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.colinha-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 1px solid #eef2f7;
    background: #fff;
    border-radius: .5rem;
    padding: 6px 10px;
}

.colinha-opcao:hover {
    border-color: #149ddd;
    background: #f7fbfe;
}

.colinha-opcao img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f7;
}

.colinha-opcao .numero {
    font-weight: 700;
    color: #04182e;
    min-width: 3.5ch;
}

.colinha-aviso {
    margin-top: 20px;
    font-size: .8rem;
    color: #8b98a8;
    text-align: center;
}

.colinha-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #04182e;
    color: #cfd9e5;
    padding: 10px 0;
    z-index: 1030;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}

.colinha-barra-info {
    font-size: .8rem;
    color: #93a4b8;
}

.colinha-som[aria-pressed="false"] {
    opacity: .5;
}

.colinha-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 24, 46, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1080;
}

.colinha-modal[hidden] {
    display: none;
}

.colinha-modal-caixa {
    background: #fff;
    border-radius: .8rem;
    padding: 20px;
    width: min(560px, 100%);
}

.colinha-modal-caixa h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   Colinha dentro do iframe do portal (modo incorporado)
   ------------------------------------------------------------------
   No site o rodape de acoes e fixo na janela. Dentro do quadro do portal
   isso atrapalha: o quadro cresce junto com o conteudo, entao a barra fica
   flutuando por cima da lista. Aqui ela volta a ser parte da pagina, logo
   depois dos cartoes. */
.embed-wrap .colinha-wrap {
    padding-bottom: 0;
}

.embed-wrap .colinha-barra {
    position: static;
    margin-top: 20px;
    border-radius: .7rem;
    box-shadow: none;
}

.embed-wrap .colinha-barra .container {
    padding-left: 14px;
    padding-right: 14px;
}