/* MENU NAVBAR - Cor personalizada para o link ativo */
 .second-nav-bar-masterpage .navbar-nav>li.active>a {
     background-color: #0084CF !important;
     color: #fff !important;
 }

 /* Melhor visibilidade para hover */
 .second-nav-bar-masterpage .navbar-nav>li>a:hover {
     background-color: #0084CF !important;
     color: #fff !important;
 }


 /* 
 * Classe utilizada para destacar campos inválidos em formulários.
 * Aplica uma borda vermelha no campo com erro de validação.
 * Ideal para usar em conjunto com a validação do lado servidor (CodeIgniter) ou do lado cliente.
 */
 .is-invalid {
     border-color: #dc3545 !important;
     /* Vermelho padrão Bootstrap para erro */
 }

 /* 
 * Classe para exibir mensagens de erro em vermelho.
 * Geralmente aplicada abaixo do campo com erro, com texto pequeno e chamativo.
 */
 .text-danger {
     color: #dc3545 !important;
     /* Vermelho padrão Bootstrap */
 }



 /* 
 * === CONTEÚDO PRINCIPAL ===
 * Ajusta o espaçamento interno e inferior da seção principal da página
 */
 #content {
     padding: 20px 0 0 0 !important;
     /* Remove o padding inferior, mantém somente o superior */
     margin-bottom: 0 !important;
     /* Elimina qualquer margem inferior */
 }

 /* 
 * === LOADER DA PÁGINA ===
 * Tela de carregamento que cobre toda a viewport
 */
 #page-loader {
     position: fixed;
     /* Fixa na tela inteira */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #ffffff;
     /* Fundo branco */
     display: flex;
     /* Flex para centralização */
     justify-content: center;
     /* Centraliza horizontalmente */
     align-items: center;
     /* Centraliza verticalmente */
     z-index: 9999;
     /* Garante que fique acima de todos os elementos */
     flex-direction: column;
     /* Empilha verticalmente */
 }

 /* 
 * === CAIXA DO LOADER ===
 * Contém o spinner e o texto de carregamento
 */
 .loader-box {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* 
 * === CONTÊINER DO SPINNER ===
 * Define tamanho e posicionamento relativo para o spinner e logo
 */
 .spinner-container {
     position: relative;
     width: 80px;
     height: 80px;
 }

 /* 
 * === SPINNER ANIMADO ===
 * Anel de carregamento giratório
 */
 .spinner {
     width: 80px;
     height: 80px;
     border: 10px solid #e0f7fa;
     /* Cor da borda base */
     border-top: 10px solid #0288d1;
     /* Cor da parte superior (giratória) */
     border-radius: 50%;
     /* Torna o círculo */
     animation: spin 1s linear infinite;
     /* Animação contínua */
 }

 /* 
 * === LOGO CENTRAL NO SPINNER ===
 * Imagem (ex: logo da empresa) no centro do anel
 */
 .loader-logo {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 30px;
     height: 30px;
     transform: translate(-50%, -50%);
     /* Centraliza a logo no meio do spinner */
     object-fit: contain;
     /* Mantém proporção da imagem */
 }

 /* 
 * === TEXTO DE CARREGAMENTO ===
 * Texto opcional abaixo do spinner
 */
 .loading-text {
     font-size: 1.2em;
     color: #0288d1;
     font-family: Arial, sans-serif;
     margin-top: 5px;
     margin-left: 10px;
 }

 /* 
 * === ANIMAÇÃO DO SPINNER ===
 * Rotação contínua do spinner
 */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }