/* ========================================================================== */
/* 1. VARIÁVEIS GLOBAIS E CORES DO SISTEMA (IDENTIDADE GCM/AFAE)              */
/* ========================================================================== */
:root {
    --gcm-azul: #0B1E3F;        /* Azul institucional marinho principal */
    --gcm-azul-claro: #16366f;    /* Tom de azul intermediário para hover/destaques */
    --gcm-dourado: #C5A059;       /* Amarelo/Dourado operacional oficial */
    --gcm-dourado-hover: #d4af37; /* Tom de dourado mais claro para interações */
    --gcm-bg-light: #f4f6f9;      /* Cor de fundo padrão suave para as páginas */
}

/* ========================================================================== */
/* 2. CONFIGURAÇÃO INICIAL DO BODY                                           */
/* ========================================================================== */
body {
    background-color: var(--gcm-bg-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Garante que o rodapé fique sempre fixo na base da tela */
}

/* ========================================================================== */
/* 3. CONFIGURAÇÃO CONTEÚDO PRINCIPAL (MAIN)                                 */
/* ========================================================================== */
main {
    flex: 1; /* Ocupa todo o espaço vertical disponível entre o topo e o rodapé */
}

/* ========================================================================== */
/* 4. CONFIGURAÇÃO BARRA DE NAVEGAÇÃO SUPERIOR (CABEÇALHO)                   */
/* ========================================================================== */
.navbar-gcm {
    background-color: var(--gcm-azul);
    border-bottom: 3px solid var(--gcm-dourado); /* Detalhe em dourado característico */
}

.navbar-gcm .navbar-brand,
.navbar-gcm .nav-link {
    color: #ffffff !important;
}

.navbar-gcm .nav-link:hover,
.navbar-gcm .nav-link.active {
    color: var(--gcm-dourado) !important; /* Destaque ao passar o mouse ou na aba ativa */
}

/* ========================================================================== */
/* 5. CONFIGURAÇÃO LOGOTIPOS DO SISTEMA E DO RODAPÉ                          */
/* ========================================================================== */
.logo-topo {
    height: 67.5px; /* Aumentado 50% em relação aos 45px anteriores */
    width: auto;
}

.logo-rodape {
    height: 52.5px; /* Aumentado 50% em relação aos 35px anteriores */
    width: auto;
}

/* ========================================================================== */
/* 6. CONFIGURAÇÃO CARDS INSTITUCIONAIS                                      */
/* ========================================================================== */
.card-institucional {
    border-top: 4px solid var(--gcm-dourado);
   }

/* ========================================================================== */
/* 7. CONFIGURAÇÃO RODAPÉ DA APLICAÇÃO                                       */
/* ========================================================================== */
footer {
    background-color: var(--gcm-azul);
    color: #ffffff;
    border-top: 3px solid var(--gcm-dourado);
    font-size: 0.9rem;
}

/* ========================================================================== */
/* 8. CONFIGURAÇÃO BOTÕES INSTITUCIONAIS PADRÃO GCM                          */
/* ========================================================================== */
.btn-gcm-primario {
    background-color: var(--gcm-azul) !important;
    border-color: var(--gcm-dourado) !important;
    color: #ffffff !important;
}

.btn-gcm-primario:hover {
    background-color: var(--gcm-azul-claro) !important;
    border-color: var(--gcm-dourado-hover) !important;
    color: #ffffff !important;
}

/* ========================================================================== */
/* 9. CONFIGURAÇÃO RESPONSIVIDADE PARA CELULARES E TABLETS (MAX 768px)       */
/* ========================================================================== */
@media (max-width: 768px) {
    /* Ajuste de margens e paddings gerais para telas pequenas */
    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Reduz o tamanho dos logotipos para evitar quebras no menu mobile */
    .logo-topo {
        height: 44px; 
    }

    .logo-rodape {
        height: 36px; 
    }

    /* Reduz o tamanho de títulos principais em celulares */
    h1.display-6, .h1, h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3, .h3 {
        font-size: 1.15rem;
    }

    /* Ajuste de espaçamento nos cards e formulários */
    .card-body {
        padding: 0.85rem !important;
    }

    /* Tabelas responsivas otimizadas para toque e visualização em celular */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    .table td, .table th {
        padding: 0.4rem 0.25rem;
        font-size: 0.82rem;
        white-space: nowrap; /* Evita quebras esquisitas de texto nas colunas da escala */
    }

    /* Ajusta inputs e selects dentro de tabelas para caberem confortavelmente na tela móvel */
    .table .form-control-sm, 
    .table .form-select-sm {
        font-size: 0.8rem;
        padding: 0.25rem 0.2rem;
        min-width: 55px;
    }

    /* Garante que botões tenham área de toque confortável em telas touch */
    .btn {
        padding: 0.45rem 0.85rem;
        font-size: 0.9rem;
    }
}

/* ========================================================================== */
/* 10. CONFIGURAÇÃO RESPONSIVIDADE PARA SMARTPHONES COMPACTOS (MAX 576px)    */
/* ========================================================================== */
@media (max-width: 576px) {
    /* Ajustes específicos para smartphones muito compactos (ex: iPhone SE) */
    .logo-topo {
        height: 38px;
    }
    
    footer {
        text-align: center;
    }
    
    footer .row > div {
        margin-bottom: 10px;
    }

    /* Ajustes extras para tabelas em telas super estreitas */
    .table td, .table th {
        font-size: 0.78rem;
    }
}