/* =====================================================================
   Conecta ICEPi | Tema visual
   =====================================================================
   Camada de tema aplicada por cima do CSS existente. É puramente
   aditiva: carrega por último no base.html e sobrescreve o que vem
   antes, sem remover nada. Para desligar, basta comentar a linha do
   tema no base.html e no base2.html, e o sistema volta exatamente ao
   visual anterior.

   Segue o mesmo padrão adotado no MHDigital. Lá os tokens têm prefixo
   --mh-, aqui --ci-, com os mesmos valores, de modo que os dois
   sistemas ficam com a mesma identidade visual e as seções podem ser
   comparadas lado a lado.

   Nada aqui depende de classe nova nos templates. O tema se apoia nas
   classes que o projeto já usa: custom_01-btn, custom_02-btn,
   custom_03-btn, custom-table_01, custom-table_02, header-logo,
   header-menu, titulo_02, separator e as do Bootstrap.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 | Tokens
   --------------------------------------------------------------------- */
:root {
    --ci-azul:          #0284c7;
    --ci-azul-escuro:   #005f96;
    --ci-azul-hover:    #0369a1;
    --ci-ciano:         #00a0dc;
    --ci-verde:         #22c55e;
    --ci-verde-escuro:  #16a34a;
    --ci-vermelho:      #dc2626;
    --ci-vermelho-esc:  #b91c1c;
    --ci-ambar:         #f59e0b;

    --ci-fundo:         #f8fafc;
    --ci-superficie:    #ffffff;
    --ci-borda:         #e2e8f0;
    --ci-borda-campo:   #cbd5e1;
    --ci-texto:         #334155;
    --ci-texto-suave:   #64748b;
    --ci-texto-forte:   #1e293b;

    --ci-raio:          0.5rem;
    --ci-raio-pequeno:  0.3rem;
    --ci-sombra:        0 1px 3px rgba(15, 23, 42, 0.06);

    /* Densidade. 0.85rem mantém a cara compacta sem comprometer a
       leitura, que é a mesma escolha feita no MHDigital. */
    --ci-fonte-base:    0.85rem;
    --ci-fonte-pequena: 0.78rem;

    /* Altura do cabeçalho fixo. O body precisa de um padding-top igual
       a este valor, porque o header é position fixed e não ocupa espaço
       no fluxo. Mudou a altura do cabeçalho, muda aqui também. */
    --ci-altura-header: 96px;
}

/* ---------------------------------------------------------------------
   2 | Base e tipografia
   --------------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--ci-fundo);
    color: var(--ci-texto);
    font-size: var(--ci-fonte-base);
    padding-top: var(--ci-altura-header);
}

h1, h2, h3, h4, h5, h6 { color: var(--ci-texto-forte); font-weight: 600; }

/* O título de tela do projeto. No HTML ele vem dentro de um <i>, então
   o itálico precisa ser desfeito aqui. */
.titulo_02 {
    font-size: 1.15rem;
    font-weight: 600;
    font-style: normal;
    color: var(--ci-azul-escuro);
    padding: 0.5rem 0 0.25rem;
    letter-spacing: 0.2px;
}

.titulo_02 i, .titulo_02 em { font-style: normal; }

label, .form-label {
    font-size: var(--ci-fonte-pequena);
    font-weight: 600;
    color: var(--ci-texto-suave);
    margin-bottom: 0.15rem;
}

/* Vários templates põem font-weight bold por estilo embutido no label.
   Isso mantém o peso coerente com o resto. */
.form-label[style] { font-weight: 600 !important; }

a { text-decoration: none; }

.conteudo-titulo-texto {
    color: var(--ci-azul-escuro);
    font-size: 1.15rem;
    font-weight: 600;
}

/* Abaixo de 768px os logos das laterais são ocultados pelo header.css e
   a barra de menu vira hambúrguer, o que muda a altura do cabeçalho.
   Como o header é fixo, o padding do body precisa acompanhar. */
@media (max-width: 768px) {
    :root { --ci-altura-header: 132px; }
    body { padding-top: var(--ci-altura-header); }
}

/* ---------------------------------------------------------------------
   3 | Cabeçalho
   --------------------------------------------------------------------- */
/* Faixa institucional: gradiente no lugar do azul chapado, e bem mais
   baixa. Os três logos continuam no lugar, só menores. */
.header-logo {
    background: linear-gradient(90deg, #0284c7 0%, #0077b6 50%, #005f96 100%);
    padding: 0.35rem 0;
    box-shadow: 0 2px 5px rgba(0, 40, 80, 0.12);
}

.header-logo .logo { max-height: 42px; width: auto; }

/* O logo central vem com width 350px por estilo embutido no HTML, por
   isso o !important. */
.header-logo #logo-img,
.header-logo .img-animada {
    width: auto !important;
    max-height: 38px;
}

/* Barra de menu: branca e fina, no lugar do azul claro chapado. */
.header-menu {
    background-color: var(--ci-superficie);
    border-bottom: 1px solid var(--ci-borda);
    padding: 0.15rem 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.header-menu .navbar { padding-top: 0; padding-bottom: 0; }

.header-menu .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color: #475569;
    font-weight: 500;
    font-size: var(--ci-fonte-pequena);
    padding: 0.3rem 0.6rem;
    margin-right: 0.15rem;
    border-radius: var(--ci-raio-pequeno);
}

.navbar-nav .nav-link i { color: var(--ci-azul); margin-right: 0.3rem; }

/* O hover anterior deixava o item com cantos de 10px e fundo azul
   forte. Aqui fica mais leve e no mesmo raio do resto do sistema. */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    background-color: #e0f2fe;
    color: var(--ci-azul-escuro);
    border-radius: var(--ci-raio-pequeno);
}

.navbar-nav .dropdown-menu {
    font-size: var(--ci-fonte-pequena);
    border: 1px solid var(--ci-borda);
    border-radius: var(--ci-raio);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
    padding: 0.25rem;
}

.navbar-nav .dropdown-menu .dropdown-item {
    border-radius: var(--ci-raio-pequeno);
    padding: 0.32rem 0.6rem;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #e0f2fe;
    color: var(--ci-azul-escuro);
}

.dropdown-divider { border-top-color: var(--ci-borda); }

/* ---------------------------------------------------------------------
   4 | Conteúdo e cartões
   --------------------------------------------------------------------- */
.div_conteudo { padding-top: 0.5rem; padding-bottom: 0.75rem; }

.card {
    background: var(--ci-superficie);
    border: 1px solid var(--ci-borda) !important;
    border-radius: var(--ci-raio) !important;
    box-shadow: var(--ci-sombra) !important;
}

/* O projeto aninha card dentro de card em quase toda tela. O de dentro
   perde borda e sombra, para não empilhar moldura sobre moldura. */
.card .card {
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* Essas três classes do Bootstrap aparecem junto com card nos
   templates e brigam com o raio e a sombra definidos acima. */
.card.rounded { border-radius: var(--ci-raio) !important; }
.card.shadow  { box-shadow: var(--ci-sombra) !important; }
.card.border-2 { border-width: 1px !important; }

.separator {
    color: var(--ci-azul-escuro);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0.9rem 0 0.7rem;
}

.separator::before,
.separator::after { border-bottom: 1px solid var(--ci-borda); }

/* ---------------------------------------------------------------------
   5 | Formulários
   --------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--ci-borda-campo);
    border-radius: var(--ci-raio-pequeno);
    font-size: var(--ci-fonte-base);
    color: var(--ci-texto);
    padding: 0.3rem 0.55rem;
}

.form-control-sm,
.form-select-sm {
    font-size: var(--ci-fonte-pequena);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ci-ciano);
    box-shadow: 0 0 0 0.18rem rgba(2, 132, 199, 0.15);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #f1f5f9;
    color: var(--ci-texto-suave);
}

.form-check-input:checked {
    background-color: var(--ci-azul);
    border-color: var(--ci-azul);
}

.form-check-input:focus {
    border-color: var(--ci-ciano);
    box-shadow: 0 0 0 0.18rem rgba(2, 132, 199, 0.15);
}

.input-group-text {
    background-color: #f1f5f9;
    border-color: var(--ci-borda-campo);
    color: var(--ci-texto-suave);
    font-size: var(--ci-fonte-pequena);
}

.row.mb-03 { margin-bottom: 0.6rem; }

/* ---------------------------------------------------------------------
   6 | Botões
   --------------------------------------------------------------------- */
/* custom_01-btn, custom_02-btn e custom_03-btn são os botões padrão do
   projeto. Redefinir as três muda praticamente todos os botões do
   sistema sem tocar em template nenhum. */
.btn {
    font-weight: 600;
    font-size: var(--ci-fonte-pequena);
    border-radius: var(--ci-raio-pequeno);
    padding: 0.35rem 0.8rem;
}

.custom_01-btn {
    background-color: var(--ci-verde);
    border: 1px solid var(--ci-verde-escuro);
    color: #fff;
}

.custom_01-btn:hover,
.custom_01-btn:focus {
    background-color: var(--ci-verde-escuro);
    border-color: #15803d;
    color: #fff;
}

.custom_02-btn {
    background-color: var(--ci-azul);
    border: 1px solid var(--ci-azul);
    color: #fff;
}

.custom_02-btn:hover,
.custom_02-btn:focus {
    background-color: var(--ci-azul-hover);
    border-color: var(--ci-azul-hover);
    color: #fff;
}

/* O vermelho do projeto é a palavra red pura, que é forte demais. */
.custom_03-btn {
    background-color: var(--ci-vermelho);
    border: 1px solid var(--ci-vermelho);
    color: #fff;
}

.custom_03-btn:hover,
.custom_03-btn:focus {
    background-color: var(--ci-vermelho-esc);
    border-color: var(--ci-vermelho-esc);
    color: #fff;
}

.save-button { background-color: var(--ci-verde-escuro); }

.btn-primary {
    background-color: var(--ci-azul);
    border-color: var(--ci-azul);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ci-azul-hover);
    border-color: var(--ci-azul-hover);
}

.btn-success {
    background-color: var(--ci-verde);
    border-color: var(--ci-verde-escuro);
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--ci-verde-escuro);
    border-color: #15803d;
}

.btn-danger {
    background-color: var(--ci-vermelho);
    border-color: var(--ci-vermelho);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--ci-vermelho-esc);
    border-color: var(--ci-vermelho-esc);
}

.btn-outline-secondary,
.btn-secondary {
    border-color: var(--ci-borda-campo);
}

.btn-secondary {
    background-color: #64748b;
    border-color: #64748b;
}

.btn-outline-secondary {
    background-color: transparent;
    color: var(--ci-texto-suave);
}

.btn-outline-secondary:hover {
    background-color: #f1f5f9;
    border-color: var(--ci-borda-campo);
    color: var(--ci-azul-escuro);
}

.btn-sm { padding: 0.22rem 0.6rem; }

/* ---------------------------------------------------------------------
   7 | Tabelas
   --------------------------------------------------------------------- */
/* Atenção: custom-table_01 e custom-table_02 definem largura de coluna
   por nth-child no style.css. Nada aqui mexe em largura, só em cor,
   espaçamento e tipografia, para não desalinhar as telas existentes. */
.table,
.custom-table_01,
.custom-table_02 {
    font-size: var(--ci-fonte-pequena);
    margin-bottom: 0;
    color: var(--ci-texto);
}

.table > thead > tr > th,
.table-light th,
.custom-table_01 > thead > tr > th,
.custom-table_02 > thead > tr > th {
    background-color: #f1f5f9;
    color: var(--ci-texto-suave);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--ci-borda-campo);
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
}

.table > tbody > tr > td,
.custom-table_01 > tbody > tr > td,
.custom-table_02 > tbody > tr > td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.table-hover > tbody > tr:hover > * { background-color: #f8fafc; }

.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fbfcfd; }

.table-bordered > :not(caption) > * > * { border-color: var(--ci-borda); }

.table-active > * { background-color: #e0f2fe !important; }

.table-responsive { border-radius: var(--ci-raio); }

/* DataTables, usado em gestão de editais e no relatório de municípios */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--ci-borda-campo);
    border-radius: var(--ci-raio-pequeno);
    font-size: var(--ci-fonte-pequena);
    padding: 0.2rem 0.45rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ci-azul) !important;
    border-color: var(--ci-azul) !important;
    color: #fff !important;
    border-radius: var(--ci-raio-pequeno);
}

/* ---------------------------------------------------------------------
   8 | Rótulos de situação e avisos
   --------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ci-raio-pequeno);
}

.bg-warning { background-color: var(--ci-ambar) !important; color: #fff !important; }
.bg-success { background-color: var(--ci-verde) !important; }
.bg-info    { background-color: var(--ci-ciano) !important; color: #fff !important; }
.bg-danger  { background-color: var(--ci-vermelho) !important; }

.alert {
    border-radius: var(--ci-raio);
    font-size: var(--ci-fonte-pequena);
    border-width: 1px;
    padding: 0.55rem 0.75rem;
}

/* ---------------------------------------------------------------------
   9 | SweetAlert
   --------------------------------------------------------------------- */
.swal2-popup {
    border-radius: var(--ci-raio);
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--ci-fonte-base);
}

.swal2-title { font-size: 1.1rem; color: var(--ci-texto-forte); }

.swal2-styled.swal2-confirm {
    background-color: var(--ci-azul) !important;
    border-radius: var(--ci-raio-pequeno) !important;
    font-weight: 600;
}

.swal2-styled.swal2-cancel {
    background-color: #64748b !important;
    border-radius: var(--ci-raio-pequeno) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   10 | Abas e paginação
   --------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ci-borda); }

.nav-tabs .nav-link {
    font-size: var(--ci-fonte-pequena);
    font-weight: 600;
    color: var(--ci-texto-suave);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link.active {
    color: var(--ci-azul-escuro);
    background: transparent;
    border-bottom-color: var(--ci-azul);
}

.page-link {
    color: var(--ci-azul-escuro);
    font-size: var(--ci-fonte-pequena);
    border-color: var(--ci-borda);
}

.page-item.active .page-link {
    background-color: var(--ci-azul);
    border-color: var(--ci-azul);
}

/* ---------------------------------------------------------------------
   11 | Rodapé
   --------------------------------------------------------------------- */
.home-footer,
.div_footer .rodape {
    background-color: var(--ci-azul-escuro);
}

.div_footer {
    font-size: var(--ci-fonte-pequena);
    color: var(--ci-texto-suave);
}

/* ---------------------------------------------------------------------
   12 | Impressão
   --------------------------------------------------------------------- */
@media print {
    body { background: #fff; font-size: 10pt; padding-top: 0 !important; }
    header.fixed-top, .div_footer, .home-footer { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #000 !important; }
}