/* ============================================================
   SGE - Sistema de Gerenciamento Eleitoral
   style.css v2.0.0 - Design system padrão TSE (azul)
   Paleta: principal #1565C0 | hover #1E88E5 | escuro #0D47A1
           dourado #FFC107 | fundo #F0F6FF | bordas #C5D9F2
   ============================================================ */

:root {
    --azul-50: #EAF3FF;
    --azul-100: #DEEBFF;
    --azul-200: #BFD9F5;
    --azul-300: #93BDE8;
    --cor-principal: #1565C0;
    --cor-hover: #1E88E5;
    --cor-escuro: #0D47A1;
    --cor-dourado: #FFC107;
    --cor-dourado-escuro: #B26A00;
    --cor-fundo: #F0F6FF;
    --cor-borda: #C5D9F2;
    --cor-texto: #1A2B3C;
    --cor-suave: #E3F0FF;
    --cor-erro: #D32F2F;
    --cor-info: #1565C0;
    --cor-whatsapp: #25D366;
    --raio: 10px;
    --raio-pequeno: 6px;
    --sombra-suave: 0 1px 2px rgba(13,71,161,.06), 0 1px 3px rgba(13,71,161,.08);
    --sombra-media: 0 2px 4px rgba(13,71,161,.08), 0 6px 12px rgba(13,71,161,.08);
    --sombra-forte: 0 6px 14px rgba(13,71,161,.14), 0 14px 28px rgba(13,71,161,.12);
    --sombra-azul: 0 3px 10px rgba(21,101,192,.30);
}

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

body {
    font-family: 'Yantramanav', 'Segoe UI', Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Acessibilidade: anel de foco visível */
:focus-visible {
    outline: 3px solid rgba(21,101,192,.35);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Header superior ---------- */
.header-topo {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 3px solid var(--cor-dourado);
    box-shadow: 0 2px 10px rgba(13,71,161,.08);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.logo {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-escuro);
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Botões (design system) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raio);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
    line-height: 1.2;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(180deg, #1E88E5 0%, #1565C0 100%);
    color: #ffffff;
    box-shadow: var(--sombra-azul);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #1976D2 0%, #0D47A1 100%);
    box-shadow: 0 4px 14px rgba(21,101,192,.40);
    transform: translateY(-1px);
}

.btn-bloco { width: 100%; }

.btn-secundario {
    background: #ffffff;
    color: var(--cor-principal);
    border-color: var(--cor-principal);
    box-shadow: var(--sombra-suave);
}

.btn-secundario:hover { background: var(--cor-suave); }

.btn-perigo {
    background: linear-gradient(180deg, #E53935 0%, #C62828 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(198,40,40,.30);
}

.btn-perigo:hover { background: #B71C1C; transform: translateY(-1px); }

.btn-pequeno { padding: 6px 12px; font-size: .82rem; border-radius: 8px; }
.btn-grande { padding: 13px 24px; font-size: 1rem; }

/* ---------- Badges (design system) ---------- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.badge-ativo { background: #D9F0DE; color: #14532D; border: 1px solid #A9DDB6; }
.badge-inativo { background: #FDE9E9; color: #9B1C1C; border: 1px solid #F6C6C6; }
.badge-rascunho { background: #FFF3D6; color: #7A4E00; border: 1px solid #F2D689; }
.badge-bloqueado { background: #FFE9D9; color: #9C3E00; border: 1px solid #F5C9A8; }
.badge-pendente { background: #FFF3D6; color: #7A4E00; border: 1px solid #F2D689; }

/* ---------- Cards (design system) ---------- */
.card {
    background: #ffffff;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    box-shadow: var(--sombra-media);
    padding: 24px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
    box-shadow: var(--sombra-forte);
    transform: translateY(-2px);
}

.card h3 { color: var(--cor-escuro); margin-bottom: 10px; font-size: 1.15rem; }
.card p { line-height: 1.7; color: #33475B; }

/* ---------- Conteúdo ---------- */
.conteudo { flex: 1; max-width: none; padding: 24px 28px 70px; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-header h2 {
    color: var(--cor-escuro);
    font-size: 1.45rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Footer ---------- */
.rodape {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 40;
    background: linear-gradient(180deg, #0D47A1 0%, #0A3D8A 100%);
    color: #E3F0FF;
    text-align: center;
    font-size: .82rem;
    padding: 10px 16px;
    border-top: 2px solid var(--cor-dourado);
}

/* ---------- FAB WhatsApp (verde oficial, nunca alterar) ---------- */
.fab-whatsapp {
    position: fixed;
    bottom: 56px; right: 20px;
    z-index: 60;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--cor-whatsapp);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition: transform .15s ease;
}

.fab-whatsapp:hover { transform: scale(1.08); }

.fab-whatsapp::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.45);
    animation: fab-pulso 2.2s ease-out infinite;
}

@keyframes fab-pulso {
    0% { transform: scale(.92); opacity: .9; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { opacity: 0; }
}

/* ---------- Página de login / 2FA ---------- */
.pagina-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #0A3D8A 0%, #0D47A1 40%, #1565C0 70%, #1E88E5 100%);
    overflow: hidden;
}

.pagina-login::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,193,7,.18), transparent 65%);
    top: -160px; right: -120px;
}

.pagina-login::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
    bottom: -140px; left: -100px;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(5,35,80,.35);
    padding: 42px 36px 36px;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cor-dourado), #FFB300 30%, var(--cor-principal) 90%);
}

.login-titulo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cor-escuro);
    text-align: center;
    margin-bottom: 8px;
}

.login-card > p {
    text-align: center;
    color: #5A7084;
    font-size: .92rem;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ---------- Formulários (design system) ---------- */
.form-grupo { margin-bottom: 18px; }

.form-grupo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: .88rem;
    color: var(--cor-escuro);
    letter-spacing: .2px;
}

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    font-family: inherit;
    font-size: .95rem;
    color: var(--cor-texto);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(13,71,161,.04);
    transition: border-color .15s, box-shadow .15s;
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 4px rgba(21,101,192,.14);
}

.form-grupo input.is-invalid { border-color: var(--cor-erro); }

/* ---------- Checkbox "confiar neste navegador" ---------- */
.form-checkbox { margin-top: 6px; }

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500;
    font-size: .88rem;
    color: #4A6178;
    cursor: pointer;
    line-height: 1.45;
}

.checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--cor-principal);
    cursor: pointer;
}

/* ---------- Alertas (design system) ---------- */
.alert {
    border-radius: var(--raio);
    padding: 13px 16px;
    margin-bottom: 16px;
    font-size: .9rem;
    line-height: 1.6;
}

.alert p { margin: 0 0 4px; }
.alert p:last-child { margin-bottom: 0; }

.alert-erro {
    background: #FDF0EF;
    border: 1px solid #F2C4C2;
    border-left: 4px solid var(--cor-erro);
    color: #8F1D1D;
}

.alert-info {
    background: #EDF5FF;
    border: 1px solid #BFD9F5;
    border-left: 4px solid var(--cor-principal);
    color: #0D47A1;
}

.alert-sucesso {
    background: #ECF8EF;
    border: 1px solid #B4DFC0;
    border-left: 4px solid #2E9E5B;
    color: #14532D;
}

.alert-aviso {
    background: #FFF7E0;
    border: 1px solid #F0D894;
    border-left: 4px solid #E0A800;
    color: #7A4E00;
}

.alert-info code {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: .88rem;
    word-break: break-all;
    color: var(--cor-escuro);
    font-weight: 600;
}

/* ---------- Códigos de recuperação ---------- */
.codigos-recuperacao {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.codigos-recuperacao code {
    background: linear-gradient(180deg, #EDF5FF, #DEEBFF);
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cor-escuro);
    letter-spacing: 2px;
    box-shadow: var(--sombra-suave);
}

/* ---------- Tabelas (design system) ---------- */
.tabela-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--cor-borda);
    background: #fff;
    box-shadow: var(--sombra-suave);
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}

.table th,
.table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #E7EFFA;
}

.table thead th {
    background: linear-gradient(180deg, #EDF5FF, #DEEBFF);
    color: var(--cor-escuro);
    font-weight: 700;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: #F4F9FF; }
.table tbody tr:last-child td { border-bottom: none; }

.col-acoes { white-space: nowrap; text-align: right; }

/* ---------- Paginação ---------- */
.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    margin-top: 18px;
    flex-wrap: wrap;
    padding: 0;
}

.page-item.disabled .page-link { opacity: .5; pointer-events: none; }

.page-link {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cor-borda);
    border-radius: 9px;
    color: var(--cor-principal);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    background: #fff;
    box-shadow: var(--sombra-suave);
    transition: background .12s, color .12s, transform .1s;
}

.page-link:hover {
    background: var(--cor-suave);
    color: var(--cor-escuro);
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background: var(--cor-principal);
    color: #fff;
    border-color: var(--cor-principal);
    box-shadow: var(--sombra-azul);
}

/* ---------- QR Code 2FA ---------- */
.qr-code-box {
    display: flex;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--sombra-media);
}

.qr-code-box svg { display: block; }

.chave-manual { margin-bottom: 16px; font-size: .88rem; color: #4A6178; }
.chave-manual summary { cursor: pointer; color: var(--cor-principal); font-weight: 600; }
.chave-manual p { margin: 8px 0 4px; }

.chave-codigo {
    display: block;
    background: var(--cor-suave);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--cor-escuro);
    letter-spacing: 1px;
    word-break: break-all;
    text-align: center;
}

/* ---------- Utilidades ---------- */
.form-padrao .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.form-grupo-largo { grid-column: 1 / -1; }

.form-acoes {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.inline-form { display: inline-block; margin-left: 6px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .conteudo { padding: 20px 16px 70px; }
    .header-inner { padding: 10px 14px; }
    .seletor-eleicao { max-width: 180px; }
}

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- Candidatos: seções e linhas repetíveis ---------- */
.form-secao {
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
    background: #FBFDFF;
}

.form-secao legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--cor-escuro);
    font-size: 1rem;
}

.linha-processo,
.linha-anexo {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    align-items: end;
}

.linha-processo { grid-template-columns: 1fr 1fr 1fr auto; }
.linha-anexo { grid-template-columns: 1fr 2fr auto; }

.btn-remover-linha {
    background: #FDE9E9;
    color: var(--cor-erro);
    border: 1px solid #F6C6C6;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
}

.btn-remover-linha:hover { background: #F6C6C6; }

.foto-preview {
    max-width: 120px;
    max-height: 150px;
    border-radius: 10px;
    border: 2px solid var(--cor-borda);
    box-shadow: var(--sombra-suave);
    margin-top: 8px;
    display: block;
}

.lista-anexos-atuais li { margin-bottom: 8px; }

@media (max-width: 640px) {
    .linha-processo { grid-template-columns: 1fr; }
    .linha-anexo { grid-template-columns: 1fr; }
}