:root {
    --color1: #114b5f; /* Azul escuro */
    --color2: #028090; /* Verde-azulado */
    --color3: #e4fde1; /* Verde bem claro */
    --color4: #456990; /* Azul acinzentado */
    --color5: #f45b69; /* Vermelho/rosa forte */

    /* Cores extraídas do logo */
    --azul-teal: #039de0; /* Relógio (azul/teal) */
    --amarelo-fim: rgba(254, 254, 118, 0.49); /* "Fim" (amarelo) */
    --preto: #1c1e26; /* Fundo (preto) */
    --laranja-claro: #fbbe02; /* "da" (laranja) */
    --laranja-escuro: #fe7903; /* "da Escala" (laranja) */
    --branco: #ffffff; /* "6x1" (branco) */
    --cinza-claro: #f9f9f9; /* Fundo da tabela (cinza claro) */
    --cinza-escuro: #546376; /* Texto da tabela (cinza escuro) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: var(--amarelo-fim);
    padding: 20px;
    color: var(--cinza-escuro);
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

/* Cabeçalho e cards */
header {
    background-color: var(--preto);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.card {
    background-color: var(--branco);
    border: 2px solid var(--laranja-claro);
    border-radius: 10px;
    padding: 15px;
    width: 140px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--laranja-escuro);
    margin-bottom: 5px;
}

.card-value {
    font-size: 1rem;
    font-weight: bold;
}

/* A classe "blue" define os valores em azul */
.card-value.blue {
    color: var(--azul-teal);
}

/* Busca */
.busca-container {
    background-color: var(--branco);
    border: 1px solid var(--laranja-escuro);
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

.busca-header {
    font-weight: bold;
    color: var(--azul-teal);
    font-size: 1.2rem;
    margin-bottom: 15px;
}

#buscaForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.linha-nome {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.linha-nome label {
    font-weight: bold;
    margin-bottom: 5px;
}

.linha-nome input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--laranja-claro);
    border-radius: 3px;
}

.linha-partido-uf {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.linha-partido-uf label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
}

.linha-partido-uf select {
    margin-top: 5px;
    padding: 8px;
    border: 1px solid var(--laranja-claro);
    border-radius: 3px;
    width: 150px;
}

button {
    background-color: var(--azul-teal);
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
}

button:hover {
    background-color: var(--laranja-claro);
}

/* Tabela */
table {
    width: 100%;
    border-collapse: collapse;
}

table thead {
    background-color: var(--cinza-escuro);
    color: var(--branco);
}

table th,
table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--cinza-escuro);
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#spanNaoAssinaram{
    color: red;
    font-weight: bold;
}

/* HEADER - Desktop (Exibido apenas em telas grandes) */
.header-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--preto);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

/* HEADER - Mobile (Escondido por padrão) */
.header-mobile {
    display: none;
}

/* Ajustes para MOBILE */
@media screen and (max-width: 768px) {
    .header-desktop {
        display: none !important; /* Esconde totalmente o header desktop */
    }

    .header-mobile {
        display: flex !important; /* Mostra o header mobile */
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px;
        background-color: var(--preto);
        border-radius: 5px;
        margin-bottom: 20px;
        width: 100%;
    }

    .logo-mobile {
        width: 100px;
    }

    .cards-container-mobile {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        justify-content: center;
        width: 100%;
        max-width: 320px;
    }

    .card {
        width: 100px;
        height: 80px;
        padding: 5px;
        font-size: 0.9rem;
        text-align: center;
    }

    .card-title {
        font-size: 0.8rem;
    }

    .card-value {
        font-size: 1rem;
    }
}