/*  CSS de customização de classes do Bootstrap
    Created on : 08/04/2025
    Author     : eliara.tavares
*/

/* ========================================
   NAVBAR
   ======================================== */


.navbar {
    background-color: #0C326F;
}

.navbar .navbar-nav {
  width: 100%; /* faz o UL ocupar a largura toda*/
}

.navbar .navbar-nav .nav-link {
    color: #FFFFFF;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 400;
}

.navbar .navbar-nav .nav-link:hover {
    background-color: #E3F2FD;
    color: #0C326F;
    border-radius: 4px;
}

.navbar .navbar-nav .dropdown-menu {
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 12px rgba(19, 81, 180, 0.15);
    min-width: 300px;
    width: auto;
}

.navbar .navbar-nav .dropdown-menu .nav-link {
    color: #1351B4;
    width: 100%;
    display: block;
    border-bottom: 1px solid #e9ecef;
}

.navbar .navbar-nav .dropdown-menu .nav-link:hover {
    background-color: #E3F2FD;
    color: #0C326F;
}

.navbar .navbar-toggler {
    border-color: #FFFFFF;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); 
}



/* Estilos de fonte da navbar em telas menores */
/* @media (max-width: 1200px) {
    .navbar-nav .nav-link {
        font-size: 0.5rem;
    }
}
  
@media (max-width: 576px) {
    .navbar-nav .nav-link {
        font-size: 0.6rem;
    }
} */

/* ========================================
   BOTÕES
   ======================================== */

.btn-primary {
    background-color: #0c326f; /* Cor de fundo do botão primário */
    border-color: #0c326f; /* Cor da borda do botão primário */
    
}

.btn-primary:hover {
    background-color: #071d41; /* Cor de fundo do botão primário ao passar o mouse */
    border-color: #071d41; /* Cor da borda do botão primário ao passar o mouse */      
    
}

button.btn-primary:active {
    background-color: #071d41 !important; /* Cor de fundo do botão primário ao passar o mouse */
    border-color: #071d41 !important; /* Cor da borda do botão primário ao passar o mouse */      
    
}

.togglePassword {
    border-color: #ccc; /* Cor da borda do botão de alternância de senha */
}

/* ========================================
   BACKGROUND
   ======================================== */
.bg-primary {
    background-color: #071d41 !important; /* Cor de fundo primária */
}

/* ========================================
   FOOTER
   ======================================== */

footer.border-top {
    border-top: 5px solid #00aeee !important; /* ou outra cor que contraste com o fundo */
}
footer.bg-primary {
    background-color: #071d41 !important; /* Cor de fundo do rodapé */
} 
footer .row {
    max-width: 100% !important; /* Foi necessário definir pq a classe row do bootstrap está sendo sobrescrita pela classe row do arquivo grid.css */
    margin-left: 0 !important;
    margin-right: 0 !important;    
} 
footer a {
    color: #ffffff !important;; /* Cor do link no rodapé */
    text-decoration: none; /* Remove o sublinhado do link */
} 


/* ========================================
   FORMULÁRIOS
   ======================================== */

.form-control {
    border-radius: 0.25rem; /* Raio da borda dos campos de formulário */
}

/* Estilo para campos de formulário com ícone de informação - Tooltip */
.form-floating {
    position: relative;
}
.form-floating .info-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #6c757d;
    z-index: 5; /* garante que fique acima do input */
}
.form-floating input {
    padding-right: 2.2rem; /* espaço para o ícone */
}
/*Fim do estilo para campos de formulário com ícone de informação - Tooltip */ 

/* ========================================
   CARTÕES
   ======================================== */

.card {
    border-radius: 0.5rem; /* Raio da borda dos cartões */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra dos cartões */
}

.card-header {
    background-color: #f8f9fa; /* Cor de fundo do cabeçalho dos cartões */
}

/* ========================================
   TABELAS
   ======================================== */

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #f2f2f2;
}

/* ========================================
   NAV-PILLS
   ======================================== */

/* Container principal */
#operacaoNav {
  background-color: #1351b4 !important;  /* Cor de fundo principal */
  border: 2px solid #1351b4; /* Borda opcional */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra personalizada */
}

/* Links normais (não ativos) */
#operacaoNav .nav-link {
  color: #ffffff !important; /* Texto branco */
  background-color: transparent !important;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Links ao passar o mouse */
#operacaoNav .nav-link:hover {
  color: #1351b4 !important; /* Texto no hover */
  background-color: #edf5ff !important; /* Fundo no hover */
  border-color: #1351b4;
  transform: translateY(-1px); /* Efeito sutil */
}

/* Link ativo */
#operacaoNav .nav-link.active {
  color: #1351b4 !important; /* Texto azul quando ativo */
  background-color: #edf5ff !important; /* Fundo branco quando ativo */
  border: 1px solid #155bcb;
  font-weight:700; /* Texto mais grosso */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Responsividade */
@media (max-width: 768px) {
  #operacaoNav {
    flex-direction: column;
    gap: 0.5rem !important;  
  }
  
  #operacaoNav .nav-link {
    padding: 0.75rem 2rem;
  }
}