/*
 * Página pública (claudiocordeiro.com.br/eleitoral) no tema do site do
 * Cláudio Cordeiro. Cores, fontes e formatos medidos na página
 * claudiocordeiro.com.br/inteligenciapolitica:
 *
 *   roxo  #7E16DD   barra do menu, títulos, botão com texto branco
 *   verde #22CD6F   faixa da logo, item ativo do menu, botão com texto roxo
 *   texto #2D2D2D   sobre fundo branco
 *   Poppins 800 nos títulos e no menu (maiúsculas); Rubik no texto
 *   botões de cantos retos, em maiúsculas
 *
 * Vem depois do resultados.css: aqui só se trocam as cores e os formatos do
 * relatório; o layout dele é o mesmo do painel.
 */

.cc {
    --cc-roxo: #7E16DD;
    --cc-roxo-escuro: #6511B3;
    --cc-verde: #22CD6F;
    --cc-verde-escuro: #1CB060;
    --cc-texto: #2D2D2D;

    /* Bootstrap: o "primary" (links, spinner, etiqueta da região) vira o roxo. */
    --bs-primary: #7E16DD;
    --bs-primary-rgb: 126, 22, 221;
    --bs-link-color: #7E16DD;
    --bs-link-color-rgb: 126, 22, 221;
    --bs-link-hover-color: #6511B3;
    --bs-link-hover-color-rgb: 101, 17, 179;
    --bs-body-color: #2D2D2D;
    --bs-body-color-rgb: 45, 45, 45;
    --bs-body-font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--cc-texto);
    background: #fff;
}

/* Topo: faixa verde com a logo ----------------------------------------- */
.cc-topo {
    background: var(--cc-verde);
    padding: 22px 16px;
    text-align: center;
}
.cc-logo { display: inline-block; }
.cc-logo img { display: block; width: 400px; max-width: 100%; height: auto; }

/* Menu: barra roxa ------------------------------------------------------ */
.cc-menu { background: var(--cc-roxo); }
.cc-menu-interno {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 56px;
}
.cc-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
}
.cc-links a {
    display: block;
    padding: 14px 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color .15s ease;
}
.cc-links a:hover, .cc-links a:focus-visible, .cc-links a.ativo { color: var(--cc-verde); }

.cc-redes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
}
.cc-menu .cc-redes { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.cc-redes a { color: #fff; font-size: 17px; text-decoration: none; transition: color .15s ease; }
.cc-redes a:hover, .cc-redes a:focus-visible { color: var(--cc-verde); }

/* Abertura -------------------------------------------------------------- */
.cc-hero { padding: 44px 0 20px; }
.cc-titulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.cc-titulo span { display: block; }
.cc-roxo { color: var(--cc-roxo); }
.cc-verde { color: var(--cc-verde); }
.cc-subtitulo { max-width: 760px; font-size: 1.05rem; margin: 0; }

.cc-conteudo { padding-top: 16px; padding-bottom: 48px; }

/* Rodapé ---------------------------------------------------------------- */
.cc-rodape {
    background: var(--cc-roxo);
    color: #fff;
    text-align: center;
    padding: 28px 0;
    font-size: .9rem;
}
.cc-redes-rodape { justify-content: center; margin-bottom: 12px; }
.cc-redes-rodape a { font-size: 22px; }

/* Botões no formato do site (cantos retos, maiúsculas) ------------------ */
.cc-botao {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 0; border-radius: 0;
    padding: .6rem 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    --bs-btn-border-width: 0;
}
.cc-botao-roxo { --bs-btn-bg: #7E16DD; --bs-btn-color: #fff; --bs-btn-hover-bg: #6511B3; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #5A0F9F; --bs-btn-active-color: #fff; }

/* Aviso de limite de uso (anti-flood) ---------------------------------- */
.cc-limite {
    max-width: 620px;
    margin: 24px auto;
    padding: 32px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(126, 22, 221, .2);
    border-top: 5px solid var(--cc-verde);
}
.cc-limite-icone { font-size: 2.4rem; color: var(--cc-roxo); }
.cc-limite-titulo {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--cc-roxo);
    margin: 8px 0 12px;
}

/* Relatório nas cores do site ------------------------------------------ */
.cc .rel {
    --rel-azul: #7E16DD;   /* papel "principal": votos, abas, destaques */
    --rel-roxo: #2563eb;   /* zonas: sai do roxo para não confundir com o principal */
    --rel-raio: 4px;
}
.cc .rel-suave-azul { background: rgba(126, 22, 221, .1); color: var(--rel-azul); }
.cc .rel-suave-roxo { background: rgba(37, 99, 235, .12); color: var(--rel-roxo); }
.cc .rel-avatar { background: rgba(126, 22, 221, .1); }
.cc .rel-card-topo { border-top-color: var(--cc-verde); }
.cc .rel-aba:hover { box-shadow: 0 2px 8px rgba(126, 22, 221, .18); }
.cc .rel-aba, .cc .rel-nivel { font-family: 'Poppins', sans-serif; }
.cc .rel-aba.ativa { background: var(--cc-roxo); border-color: var(--cc-roxo); color: #fff; }
.cc .rel-nivel.ativo { background: var(--cc-roxo); border-color: var(--cc-roxo); }

/* Botões do cabeçalho: trocar (roxo), CSV (verde com texto roxo), PDF (roxo escuro). */
.cc .rel-botao { border-radius: 0; text-transform: uppercase; font-weight: 700; font-size: .9rem; }
.cc .rel-botao-azul { --bs-btn-bg: #7E16DD; --bs-btn-hover-bg: #6511B3; --bs-btn-active-bg: #5A0F9F; }
.cc .rel-botao-verde {
    --bs-btn-bg: #22CD6F; --bs-btn-hover-bg: #1CB060; --bs-btn-active-bg: #189A54;
    --bs-btn-color: #7E16DD; --bs-btn-hover-color: #7E16DD; --bs-btn-active-color: #7E16DD;
}
.cc .rel-botao-vermelho { --bs-btn-bg: #5A0F9F; --bs-btn-hover-bg: #4A0C83; --bs-btn-active-bg: #3D0A6C; }

/* Celular --------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .cc-menu-interno { flex-direction: column; padding: 6px 16px 10px; }
    .cc-menu .cc-redes { position: static; transform: none; padding-top: 2px; }
    .cc-links { gap: 0 20px; }
    .cc-links a { font-size: 15px; padding: 8px 0; }
}
@media (max-width: 575.98px) {
    .cc-topo { padding: 16px 16px; }
    .cc-logo img { width: 280px; }
    .cc-links a { font-size: 13px; }
    .cc-links { gap: 0 14px; }
    .cc-hero { padding: 28px 0 8px; }
    .cc-titulo { font-size: 32px; letter-spacing: -.6px; }
    .cc-subtitulo { font-size: .95rem; }
}