/* Tema principal do Painel Comissões */
:root {
  --cor-principal: #30318b; /* Azul principal */
  --cor-principal-hover: #23235e; /* Azul mais escuro para hover */
  --cor-detalhe: #e53e3e; /* Vermelho para detalhes */
}

body {
  background: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

.navbar, .bg-primary {
  background-color: var(--cor-principal) !important;
}

/* Suavizar transições da navbar */
#saudacao-usuario {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Durante o carregamento inicial */
.navbar-loading #saudacao-usuario {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
}

/* Quando carregado */
#saudacao-usuario.loaded {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Placeholder para saudação enquanto carrega */
#saudacao-usuario:empty::before {
  content: "Carregando...";
  opacity: 0.5;
  font-size: 0.9em;
  font-style: italic;
}

/* Evitar flash durante navegação entre páginas */
body.page-transition #saudacao-usuario {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

/* Classe para forçar atualização visual */
.force-refresh {
  animation: refresh-pulse 0.5s ease-in-out;
}

@keyframes refresh-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.btn-primary {
  background-color: var(--cor-principal) !important;
  border-color: var(--cor-principal) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--cor-principal-hover) !important;
  border-color: var(--cor-principal-hover) !important;
}

.text-primary {
  color: var(--cor-principal) !important;
}

.card {
  border: 1px solid var(--cor-principal)22;
  min-width: 0;
}

/* Classes para detalhes vermelhos */
.text-detalhe {
  color: var(--cor-detalhe) !important;
}

.bg-detalhe {
  background-color: var(--cor-detalhe) !important;
}

.border-detalhe {
  border-color: var(--cor-detalhe) !important;
}
.container-fluid {
  max-width: 100vw;
  padding-left: 0;
  padding-right: 0;
}