/* ============================================================
 * app.css — SISTEMA DE PALETA E ESTILOS GLOBAIS
 * FUNÇÃO: Define o design system completo do Mapa Eleitoral
 * MOTIVO: Um único arquivo CSS para controle total do visual
 *
 * === COMO MUDAR O TEMA INTEIRO ===
 * Altere APENAS a variável --h-base abaixo.
 * Exemplos:
 *   220 = Azul  (padrão atual — político, confiança)
 *   142 = Verde (esperança, campo)
 *    27 = Laranja (energia, ação)
 *   270 = Roxo  (criatividade, liderança)
 *     0 = Vermelho (urgência, atenção)
 * ============================================================ */

/* === VARIÁVEIS DE TEMA — ALTERE AQUI ====================== */
:root {
    /* MATIZ BASE — este é o único valor que você precisa mudar */
    --h-base: 220;

    /* Saturação e luminosidade base */
    --s-base: 62%;
    --l-base: 42%;

    /* ---- Cores derivadas automaticamente ---- */
    --cor-primaria:        hsl(var(--h-base), var(--s-base), var(--l-base));
    --cor-primaria-clara:  hsl(var(--h-base), calc(var(--s-base) - 10%), 58%);
    --cor-primaria-escura: hsl(var(--h-base), calc(var(--s-base) + 5%),  28%);
    --cor-primaria-10:     hsl(var(--h-base), var(--s-base), 95%);  /* fundo suave */
    --cor-primaria-20:     hsl(var(--h-base), var(--s-base), 88%);  /* hover suave */

    /* Cor de texto sobre fundo primário */
    --cor-texto-sobre-primaria: #ffffff;

    /* Cor de acento (30° à frente no círculo cromático) */
    --cor-acento: hsl(calc(var(--h-base) + 30), 75%, 52%);

    /* ---- Paleta neutra (sempre adaptada ao tema) ---- */
    --cor-fundo:        hsl(var(--h-base), 10%, 97%);
    --cor-fundo-card:   #ffffff;
    --cor-borda:        hsl(var(--h-base), 12%, 88%);
    --cor-texto:        hsl(var(--h-base), 15%, 15%);
    --cor-texto-fraco:  hsl(var(--h-base), 10%, 52%);

    /* ---- Cores semânticas (fixas — não dependem do tema) ---- */
    --cor-sucesso:  hsl(142, 60%, 38%);
    --cor-aviso:    hsl( 38, 92%, 48%);
    --cor-erro:     hsl(  4, 76%, 48%);
    --cor-info:     hsl(210, 80%, 48%);

    /* ---- Espaçamentos e bordas ---- */
    --raio:       0.625rem;   /* 10px */
    --raio-lg:    0.875rem;   /* 14px */
    --sombra-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
    --sombra-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --sombra-lg:  0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

    /* ---- Tipografia ---- */
    --fonte-base:  'Inter', 'Segoe UI', system-ui, sans-serif;
    --fonte-mono:  'Consolas', 'Fira Code', monospace;
}

/* ============================================================
 * RESET E BASE GLOBAL
 * ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fonte-base);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
    min-height: 100dvh;
    /* Espaço para nav mobile fixa na parte inferior */
    padding-bottom: env(safe-area-inset-bottom);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
 * TIPOGRAFIA
 * ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--cor-texto);
}

h1 { font-size: clamp(1.5rem, 4vw, 1.875rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

/* ============================================================
 * LAYOUT — CONTAINERS
 * ============================================================ */

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.pagina {
    padding: 1rem;
    padding-bottom: 5rem; /* espaço para nav mobile */
}

/* ============================================================
 * COMPONENTES — CARDS
 * ============================================================ */

.card {
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    padding: 1.25rem;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--sombra-md);
}

.card-titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto-fraco);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* ============================================================
 * COMPONENTES — BOTÕES
 * ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--raio);
    border: none;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
    min-height: 2.75rem; /* botões grandes para mobile */
}

.btn-primario {
    background: var(--cor-primaria);
    color: var(--cor-texto-sobre-primaria);
}
.btn-primario:hover {
    background: var(--cor-primaria-escura);
    box-shadow: var(--sombra-md);
    text-decoration: none;
    color: #fff;
}

.btn-secundario {
    background: var(--cor-primaria-10);
    color: var(--cor-primaria-escura);
    border: 1px solid var(--cor-primaria-20);
}
.btn-secundario:hover {
    background: var(--cor-primaria-20);
    text-decoration: none;
}

.btn-perigo {
    background: var(--cor-erro);
    color: #fff;
}
.btn-perigo:hover { filter: brightness(0.9); text-decoration: none; color: #fff; }

.btn-fantasma {
    background: transparent;
    color: var(--cor-texto-fraco);
    border: 1px solid var(--cor-borda);
}
.btn-fantasma:hover { background: var(--cor-fundo); text-decoration: none; }

.btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; min-height: 3.25rem; }
.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.875rem; min-height: 2.25rem; }
.btn-bloco { width: 100%; }

/* WhatsApp */
.btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp:hover { background: #1ebe5d; text-decoration: none; color: #fff; }

/* ============================================================
 * COMPONENTES — FORMULÁRIOS
 * ============================================================ */

.label-campo {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.375rem;
}

.input-campo,
.select-campo,
.textarea-campo {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    font-family: var(--fonte-base);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio);
    background: var(--cor-fundo-card);
    color: var(--cor-texto);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 2.75rem;
    -webkit-appearance: none;
}

.input-campo:focus,
.select-campo:focus,
.textarea-campo:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px hsl(var(--h-base), var(--s-base), 80%);
}

.input-campo.erro { border-color: var(--cor-erro); }

.textarea-campo { resize: vertical; min-height: 7rem; }

.grupo-formulario { margin-bottom: 1.25rem; }

/* ============================================================
 * COMPONENTES — BADGES
 * ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    line-height: 1.5;
}

.badge-verde   { background: hsl(142, 55%, 90%); color: hsl(142, 60%, 28%); }
.badge-azul    { background: hsl(210, 70%, 90%); color: hsl(210, 70%, 30%); }
.badge-amarelo { background: hsl( 38, 90%, 88%); color: hsl( 38, 80%, 30%); }
.badge-laranja { background: hsl( 27, 90%, 88%); color: hsl( 27, 80%, 30%); }
.badge-vermelho{ background: hsl(  4, 70%, 90%); color: hsl(  4, 70%, 30%); }
.badge-cinza   { background: hsl(  0,  0%, 92%); color: hsl(  0,  0%, 40%); }
.badge-primario{ background: var(--cor-primaria-10); color: var(--cor-primaria-escura); }

/* ============================================================
 * COMPONENTES — ALERTAS
 * ============================================================ */

.alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: var(--raio);
    font-size: 0.9375rem;
    border-left: 4px solid;
    margin-bottom: 1rem;
}

.alerta-sucesso { background: hsl(142,55%,94%); border-color: var(--cor-sucesso); color: hsl(142,60%,25%); }
.alerta-erro    { background: hsl(  4,70%,94%); border-color: var(--cor-erro);    color: hsl(  4,70%,28%); }
.alerta-aviso   { background: hsl( 38,90%,92%); border-color: var(--cor-aviso);   color: hsl( 38,80%,28%); }
.alerta-info    { background: hsl(210,70%,93%); border-color: var(--cor-info);    color: hsl(210,70%,28%); }

/* ============================================================
 * LAYOUT — CABEÇALHO MOBILE
 * ============================================================ */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cor-primaria);
    color: #fff;
    box-shadow: var(--sombra-md);
    padding-top: env(safe-area-inset-top, 0); /* Garante que não fique sob a barra do celular */
}

.cabecalho-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cabecalho-logo {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.cabecalho-logo span { opacity: 0.75; font-weight: 400; font-size: 0.875rem; }

/* ============================================================
 * LAYOUT — NAVEGAÇÃO INFERIOR (MOBILE-FIRST)
 * ============================================================ */

.nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--cor-fundo-card);
    border-top: 1px solid var(--cor-borda);
    display: flex;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cor-texto-fraco);
    text-decoration: none;
    transition: color 0.15s;
    gap: 0.2rem;
    min-width: 0;
}

.nav-item svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.nav-item.ativo,
.nav-item:hover {
    color: var(--cor-primaria);
    text-decoration: none;
}

.nav-item.ativo svg { stroke: var(--cor-primaria); }

/* ============================================================
 * COMPONENTES — DASHBOARD CARDS
 * ============================================================ */

.grid-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .grid-stats { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .grid-stats { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    padding: 1rem;
    display: grid;
    grid-template-areas: 
        "label icone"
        "valor icone";
    grid-template-columns: 1fr auto;
    align-items: center;
    box-shadow: var(--sombra-sm);
    transition: box-shadow 0.2s;
}

.stat-card:hover { box-shadow: var(--sombra-md); }

.stat-icone {
    grid-area: icone;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--raio);
    background: var(--cor-primaria-10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icone svg { width: 1.25rem; height: 1.25rem; color: var(--cor-primaria); }

.stat-valor {
    grid-area: valor;
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--cor-texto);
    line-height: 1;
}

.stat-label {
    grid-area: label;
    font-size: 0.8125rem;
    color: var(--cor-texto-fraco);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* ============================================================
 * COMPONENTES — ELEITÔMETRO (card especial)
 * ============================================================ */

.eleitometro-card {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    color: #fff;
    border-radius: var(--raio-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sombra-lg);
}

.eleitometro-titulo {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.eleitometro-dias {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.eleitometro-sub {
    font-size: 0.875rem;
    opacity: 0.80;
}

/* Barra de progresso */
.barra-progresso {
    background: rgba(255,255,255,0.2);
    border-radius: 9999px;
    height: 0.5rem;
    overflow: hidden;
    margin-top: 1rem;
}

.barra-preenchimento {
    height: 100%;
    border-radius: 9999px;
    background: #fff;
    transition: width 0.6s ease;
}

/* ============================================================
 * COMPONENTES — TABELAS / LISTAS
 * ============================================================ */

.tabela-simples {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.tabela-simples th {
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cor-texto-fraco);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--cor-borda);
}

.tabela-simples td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: middle;
}

.tabela-simples tbody tr:hover {
    background: var(--cor-primaria-10);
}

/* Lista de pessoas/registros em mobile */
.lista-registros { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }

.item-registro {
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.item-registro:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-sm);
    text-decoration: none;
    color: inherit;
}

.item-avatar {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--cor-primaria-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--cor-primaria);
    font-size: 1.25rem;
}

.item-info { flex: 1; min-width: 0; }
.item-nome { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub  { font-size: 0.8125rem; color: var(--cor-texto-fraco); }

/* ============================================================
 * PÁGINA DE LOGIN
 * ============================================================ */

.login-container {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--cor-primaria-escura) 0%, var(--cor-primaria) 60%, var(--cor-primaria-clara) 100%);
}

.login-card {
    width: 100%;
    max-width: 24rem;
    background: #fff;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    padding: 2rem;
}

.login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-logo h1 {
    font-size: 1.5rem;
    color: var(--cor-primaria);
}

.login-logo p {
    font-size: 0.875rem;
    color: var(--cor-texto-fraco);
    margin-top: 0.25rem;
}

/* ============================================================
 * COMPONENTES — MODAIS E OVERLAYS
 * ============================================================ */

.modal,
.modal-sobreposicao {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1.5rem;
}

/* Quando usado via flex (para centralizar) */
.modal[style*="display: block"],
.modal-sobreposicao[style*="display: block"] {
    display: flex !important;
}


.modal-conteudo {
    background: #fff;
    border-radius: var(--raio-lg);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--sombra-lg);
    overflow: hidden;
    position: relative;
}

/* ============================================================
 * UTILITÁRIOS
 * ============================================================ */

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.texto-centro { text-align: center; }
.texto-fraco  { color: var(--cor-texto-fraco); }
.texto-primario { color: var(--cor-primaria); }
.texto-erro     { color: var(--cor-erro); }

.negrito { font-weight: 700; }
.separador { border: none; border-top: 1px solid var(--cor-borda); margin: 1.25rem 0; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.ocultar-mobile { display: none; }

@media (min-width: 768px) {
    .ocultar-mobile { display: initial; }
    .nav-mobile { max-width: 600px; left: 50%; transform: translateX(-50%); border-radius: var(--raio-lg) var(--raio-lg) 0 0; }
    .pagina { padding: 1.5rem; }
}

/* ============================================================
 * ANIMAÇÕES MICRO
 * ============================================================ */

@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animar-entrada { animation: aparecer 0.3s ease both; }

/* Spinner de carregamento */
.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girar 0.75s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
 * RODAPÉ
 * ============================================================ */

.rodape {
    text-align: center;
    font-size: 0.75rem;
    color: var(--cor-texto-fraco);
    padding: 0.5rem 1rem 0.25rem;
}

/* ============================================================
 * COMPONENTES — AUTOCOMPLETE (GLOBAL)
 * ============================================================ */
.wrapper-autocomplete {
    position: relative;
}

.resultados-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2100; /* Acima de modais (2000) */
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    margin-top: 4px;
    box-shadow: var(--sombra-lg);
    max-height: 300px;
    overflow-y: auto;
    animation: aparecer 0.2s ease;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: Aumenta altura para facilitar visualização e rolagem */
@media (max-width: 768px) {
    .resultados-autocomplete {
        max-height: 40vh; /* Aumentado conforme solicitado (35-45vh) */
        box-shadow: 0 12px 30px -5px rgba(0,0,0,0.3);
        overscroll-behavior: contain;
    }
}

.item-busca {
    padding: 0.875rem 1rem; /* Um pouco maior para facilitar o toque */
    cursor: pointer;
    border-bottom: 1px solid var(--cor-fundo);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s;
    user-select: none;
}

.item-busca:last-child {
    border-bottom: none;
}

.item-busca:hover, .item-busca:active {
    background: var(--cor-primaria-10);
}

.item-busca-nome {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cor-texto);
}

.item-busca-info {
    font-size: 0.75rem;
    color: var(--cor-texto-fraco);
}

.btn-limpar-autocomplete {
    position: absolute;
    right: 12px;
    top: 50%; /* Centraliza verticalmente por padrão */
    transform: translateY(-50%);
    background: var(--cor-primaria-10);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cor-texto-fraco);
    font-size: 16px;
    line-height: 1;
    z-index: 10;
    transition: all 0.2s;
}

/* Se tiver label (comum em grupos de formulário), empurra para baixo */
.grupo-formulario.wrapper-autocomplete .btn-limpar-autocomplete,
.campo-grupo.wrapper-autocomplete .btn-limpar-autocomplete {
    top: calc(100% - 1.375rem); /* Ajuste baseado na altura padrão do input (2.75rem / 2) */
}

/* Se houver uma label explícita antes, podemos ser mais precisos se soubermos a altura da label */
.wrapper-autocomplete label + .input-campo + .btn-limpar-autocomplete,
.wrapper-autocomplete .campo-label + .campo-input + .btn-limpar-autocomplete {
     top: calc(0.875rem + 1.375rem + 0.375rem); /* label height + spacing + half input */
}

/* Fallback seguro: se estiver dentro de um grupo com label */
.grupo-formulario .btn-limpar-autocomplete, .campo-grupo .btn-limpar-autocomplete {
    top: 38px;
}

.btn-limpar-autocomplete:hover {
    background: var(--cor-primaria-20);
    color: var(--cor-primaria-escura);
}