:root {

    --green: #009c3b;

    --green-dark: #007a30;

    --blue: #002776;

    --yellow: #ffdf00;

    --background: #f3f5f7;

    --card: #ffffff;

    --text: #17202a;

    --muted: #667085;

    --border: #e4e7ec;

    --success: #12b76a;

    --warning: #f79009;

    --danger: #f04438;

}


* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


.container {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

header {

    color:
        white;

    padding:
        28px 0 90px;

    background:
        linear-gradient(
            135deg,
            #009c3b 0%,
            #007a30 55%,
            #002776 100%
        );

}


.header-content {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        30px;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.brand h1 {

    margin:
        0;

    font-size:
        28px;

    letter-spacing:
        -.5px;

}


.brand p {

    margin:
        6px 0 0;

    opacity:
        .85;

    font-size:
        14px;

}


.brand-symbol {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.diamond {

    width:
        37px;

    height:
        37px;

    background:
        var(--yellow);

    transform:
        rotate(45deg);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.blue-circle {

    width:
        19px;

    height:
        19px;

    border-radius:
        50%;

    background:
        var(--blue);

}


.official {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        13px;

}


.official span {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        #4ade80;

}


/*
|--------------------------------------------------------------------------
| MAIN
|--------------------------------------------------------------------------
*/

main {

    margin-top:
        -55px;

    padding-bottom:
        50px;

}


/*
|--------------------------------------------------------------------------
| CONTROLS
|--------------------------------------------------------------------------
*/

.controls {

    background:
        var(--card);

    padding:
        18px;

    border-radius:
        16px;

    box-shadow:
        0 12px 35px
        rgba(
            16,
            24,
            40,
            .12
        );

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1.5fr auto;

    gap:
        14px;

    align-items:
        end;

}


.field label {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        11px;

    font-weight:
        800;

    color:
        var(--muted);

    text-transform:
        uppercase;

}


select,
input {

    width:
        100%;

    height:
        46px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        white;

    padding:
        0 13px;

    font:
        inherit;

    font-size:
        14px;

    color:
        var(--text);

    outline:
        none;

}


select:focus,
input:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(
            0,
            156,
            59,
            .1
        );

}


.refresh {

    height:
        46px;

    border:
        0;

    border-radius:
        9px;

    padding:
        0 21px;

    background:
        var(--green);

    color:
        white;

    font-weight:
        800;

    cursor:
        pointer;

}


.refresh:hover {

    background:
        var(--green-dark);

}


/*
|--------------------------------------------------------------------------
| STATUS
|--------------------------------------------------------------------------
*/

.status {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        15px 3px;

    color:
        var(--muted);

    font-size:
        13px;

}


.status-indicator {

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--success);

}


.status-indicator.loading {

    background:
        var(--warning);

}


.status-indicator.warning {

    background:
        var(--warning);

}


.status-indicator.error {

    background:
        var(--danger);

}


.status-separator {

    opacity:
        .35;

}


/*
|--------------------------------------------------------------------------
| ERROR
|--------------------------------------------------------------------------
*/

.error {

    background:
        #fff1f0;

    border:
        1px solid
        #fecdca;

    color:
        #b42318;

    border-radius:
        10px;

    padding:
        16px;

    margin-bottom:
        18px;

    font-size:
        14px;

}


/*
|--------------------------------------------------------------------------
| MÉTRICAS
|--------------------------------------------------------------------------
*/

.metrics {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        14px;

    margin-bottom:
        20px;

}


.metric {

    background:
        var(--card);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.metric-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #edf8f1;

}


.metric span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

    margin-bottom:
        5px;

}


.metric strong {

    display:
        block;

    font-size:
        20px;

}


/*
|--------------------------------------------------------------------------
| RESULTADOS
|--------------------------------------------------------------------------
*/

.results {

    background:
        var(--card);

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    padding:
        24px;

}


.results-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    border-bottom:
        1px solid
        var(--border);

    padding-bottom:
        19px;

}


.turn {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .8px;

}


.results h2 {

    margin:
        5px 0 0;

    font-size:
        23px;

}


.tse-badge {

    background:
        #edf8f1;

    color:
        var(--green-dark);

    font-size:
        11px;

    font-weight:
        900;

    padding:
        7px 10px;

    border-radius:
        7px;

}


/*
|--------------------------------------------------------------------------
| LOADING
|--------------------------------------------------------------------------
*/

.loading {

    min-height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    color:
        var(--muted);

}


.spinner {

    width:
        34px;

    height:
        34px;

    border:
        3px solid
        #e5e7eb;

    border-top-color:
        var(--green);

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;

}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


/*
|--------------------------------------------------------------------------
| CANDIDATO
|--------------------------------------------------------------------------
*/

.candidate {

    display:
        grid;

    grid-template-columns:
        72px 1fr 145px;

    gap:
        16px;

    align-items:
        center;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--border);

}


.candidate:last-child {

    border-bottom:
        0;

}


/*
|--------------------------------------------------------------------------
| FOTO
|--------------------------------------------------------------------------
*/

.candidate-photo {

    width:
        72px;

    height:
        72px;

    flex:
        0 0 72px;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #f2f4f7;

    border:
        1px solid
        var(--border);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.candidate-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

}


.candidate-photo-placeholder {

    color:
        var(--muted);

    font-size:
        24px;

}


/*
|--------------------------------------------------------------------------
| CONTEÚDO
|--------------------------------------------------------------------------
*/

.candidate-content {

    min-width:
        0;

}


.candidate-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

}


/*
|--------------------------------------------------------------------------
| NOME DE URNA
|--------------------------------------------------------------------------
*/

.candidate-name {

    color:
        var(--text);

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.25;

    margin:
        0;

}


/*
|--------------------------------------------------------------------------
| NOME COMPLETO + NÚMERO
|--------------------------------------------------------------------------
*/

.candidate-meta {

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;

    line-height:
        1.4;

}


.candidate-number {

    color:
        var(--text);

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| VOTAÇÃO
|--------------------------------------------------------------------------
*/

.candidate-votes {

    text-align:
        right;

    white-space:
        nowrap;

    min-width:
        145px;

}


.candidate-votes strong {

    display:
        block;

    color:
        var(--green-dark);

    font-size:
        22px;

    font-weight:
        900;

    line-height:
        1.1;

}


.candidate-votes small {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        12px;

    font-weight:
        600;

}


/*
|--------------------------------------------------------------------------
| BARRA
|--------------------------------------------------------------------------
*/

.bar {

    height:
        6px;

    background:
        #edf0f2;

    border-radius:
        20px;

    overflow:
        hidden;

    margin-top:
        12px;

}


.bar-fill {

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--green),
            #24c96d
        );

    border-radius:
        inherit;

    transition:
        width .4s ease;

}


/*
|--------------------------------------------------------------------------
| SITUAÇÃO
|--------------------------------------------------------------------------
*/

.candidate-status {

    margin-top:
        8px;

    font-size:
        11px;

    color:
        var(--muted);

}


.elected {

    display:
        inline-block;

    margin-top:
        8px;

    padding:
        4px 8px;

    border-radius:
        6px;

    background:
        #ecfdf3;

    color:
        #027a48;

    font-size:
        11px;

    font-weight:
        800;

}


/*
|--------------------------------------------------------------------------
| NOTICE
|--------------------------------------------------------------------------
*/

.notice {

    display:
        flex;

    gap:
        13px;

    margin-top:
        20px;

    padding:
        18px;

    background:
        #eef6ff;

    border:
        1px solid
        #d8eaff;

    border-radius:
        14px;

    color:
        #344054;

}


.notice-icon {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    border-radius:
        50%;

    background:
        var(--blue);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;

}


.notice strong {

    color:
        var(--text);

}


.notice p {

    margin:
        5px 0 0;

    line-height:
        1.6;

    font-size:
        13px;

}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

footer {

    background:
        #111827;

    color:
        #98a2b3;

    text-align:
        center;

    padding:
        30px 0;

    font-size:
        12px;

}


footer strong {

    color:
        white;

}


footer a {

    color:
        #7dd3a7;

    text-decoration:
        none;

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 950px
) {

    .controls {

        grid-template-columns:
            1fr 1fr;

    }


    .candidate-search {

        grid-column:
            span 2;

    }


    .refresh {

        grid-column:
            span 2;

    }


    .metrics {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 600px
) {


    .container {

        width:
            min(
                calc(100% - 24px),
                1180px
            );

    }


    header {

        padding:
            22px 0 75px;

    }


    .brand h1 {

        font-size:
            21px;

    }


    .brand p {

        font-size:
            12px;

    }


    .official {

        display:
            none;

    }


    .controls {

        grid-template-columns:
            1fr;

    }


    .candidate-search,
    .refresh {

        grid-column:
            auto;

    }


    .metrics {

        grid-template-columns:
            1fr;

    }


    .results {

        padding:
            18px;

    }


    .results-top {

        gap:
            10px;

    }


    .results h2 {

        font-size:
            19px;

    }


    .candidate-header {

        flex-direction:
            column;

        gap:
            8px;

    }


    .candidate-votes {

        text-align:
            left;

    }

}

/*
|--------------------------------------------------------------------------
| CANDIDATO CLICÁVEL
|--------------------------------------------------------------------------
*/

.candidate-clickable {

    cursor:
        pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.candidate-clickable:hover {

    background:
        #fafdfb;

    transform:
        translateY(-1px);

}


.candidate-clickable:focus {

    outline:
        3px solid
        rgba(
            0,
            156,
            59,
            .18
        );

    outline-offset:
        2px;

}


.candidate-clickable::after {

    content:
        '›';

    color:
        var(--green);

    font-size:
        24px;

    font-weight:
        700;

}


/*
|--------------------------------------------------------------------------
| BOTÃO VOLTAR
|--------------------------------------------------------------------------
*/

.back-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        white;

    text-decoration:
        none;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .3
        );

    border-radius:
        9px;

    padding:
        10px 14px;

    font-size:
        13px;

    font-weight:
        700;

}


.back-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            .1
        );

}


/*
|--------------------------------------------------------------------------
| PERFIL
|--------------------------------------------------------------------------
*/

.profile-page {

    margin-top:
        -55px;

}


.profile-card {

    background:
        var(--card);

    border-radius:
        18px;

    padding:
        28px;

    box-shadow:
        0 12px 35px
        rgba(
            16,
            24,
            40,
            .12
        );

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

}


.profile-photo {

    width:
        145px;

    height:
        145px;

    flex:
        0 0 145px;

    border-radius:
        50%;

    overflow:
        hidden;

    background:
        #f2f4f7;

    border:
        1px solid
        var(--border);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.profile-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.profile-photo span {

    font-size:
        48px;

}


.profile-main {

    min-width:
        0;

}


.profile-label {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.profile-main h2 {

    margin:
        6px 0 0;

    font-size:
        32px;

}


.profile-full-name {

    margin:
        7px 0 0;

    color:
        var(--muted);

}


.profile-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        16px;

}


.profile-tags span {

    background:
        #edf8f1;

    color:
        var(--green-dark);

    border-radius:
        7px;

    padding:
        6px 9px;

    font-size:
        11px;

    font-weight:
        800;

}


/*
|--------------------------------------------------------------------------
| MÉTRICAS PERFIL
|--------------------------------------------------------------------------
*/

.profile-metrics {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        14px;

    margin:
        20px 0;

}


.profile-metric {

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    padding:
        18px;

}


.profile-metric span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

    margin-bottom:
        7px;

}


.profile-metric strong {

    font-size:
        21px;

}


/*
|--------------------------------------------------------------------------
| DETALHES
|--------------------------------------------------------------------------
*/

.detail-card {

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    padding:
        24px;

    margin-bottom:
        20px;

}


.detail-header {

    padding-bottom:
        17px;

    border-bottom:
        1px solid
        var(--border);

}


.detail-header span {

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .8px;

}


.detail-header h2 {

    margin:
        5px 0 0;

    font-size:
        22px;

}


.detail-empty {

    padding:
        50px 20px;

    text-align:
        center;

    color:
        var(--muted);

}


.detail-empty-icon {

    font-size:
        38px;

}


.detail-empty h3 {

    color:
        var(--text);

    margin:
        10px 0 7px;

}


.detail-empty p {

    max-width:
        650px;

    margin:
        7px auto;

    line-height:
        1.6;

    font-size:
        13px;

}


.detail-note {

    color:
        var(--green-dark);

}


/*
|--------------------------------------------------------------------------
| MAPA
|--------------------------------------------------------------------------
*/

.map {

    width:
        100%;

    height:
        500px;

    margin-top:
        20px;

    border-radius:
        12px;

    overflow:
        hidden;

    background:
        #eef2f4;

}


.map-note {

    color:
        var(--muted);

    font-size:
        12px;

    margin:
        10px 0 0;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 700px
) {

    .profile-card {

        flex-direction:
            column;

        text-align:
            center;

    }


    .profile-tags {

        justify-content:
            center;

    }


    .profile-main h2 {

        font-size:
            25px;

    }


    .profile-metrics {

        grid-template-columns:
            1fr 1fr;

    }


    .map {

        height:
            400px;

    }


    .back-button {

        font-size:
            11px;

        padding:
            8px 10px;

    }

}


@media (
    max-width: 450px
) {

    .profile-metrics {

        grid-template-columns:
            1fr;

    }

}