:root {
  /* Cor institucional, a que mais aparece: fundo do cabecalho dos cards,
     topo das tabelas de listagem, aba selecionada e pagina ativa.
     Deve ser ESCURA — recebe texto claro em cima. */
  --cor-primaria: #0b1f3afa;

  /* Texto e icones que ficam EM CIMA da primaria. So mexa se a primaria
     for clara (ai o texto precisa virar escuro para continuar legivel). */
  --cor-primaria-texto: #ffffff;

  /* Cor de destaque/interacao: hover dos itens de menu, item de menu
     ativo e hover dos dropdowns. Tambem deve ser escura. */
  --cor-secundaria: #ff5a1f;

  /* Texto e icones que ficam EM CIMA da secundaria. */
  --cor-secundaria-texto: #ffffff;

  /* Cor dos botoes de acao (.btn-primary). Normalmente igual a
     secundaria; separada para quem quer botao de outra cor. */
  --cor-botao: #ff5a1f;

  /* Texto do botao. O sb-admin fixa branco, o que quebra em botao claro
     (dourado, amarelo, verde-limao) — por isso e variavel. */
  --cor-botao-texto: #ffffff;

  /* Fundo da area de conteudo do painel. Deve ser bem CLARA — e o papel
     onde os cards brancos se apoiam. */
  --cor-fundo: #fdf8f4;

  /* Menu lateral (sidebar): fundo. Padrao branco (o item ativo/hover usa a
     secundaria). Para um menu escuro, ponha um tom escuro aqui e clareie o
     --cor-menu-texto abaixo. */
  --cor-menu: #0b1f3a;

  /* Texto e icones do menu lateral. Combine com o --cor-menu (fundo claro ->
     texto escuro; fundo escuro -> texto claro). */
  --cor-menu-texto: #ffffff;

  /* Barra do topo (header/topbar): fundo. Padrao branco. */
  --cor-header: #ffffff;

  /* Texto do topo (nome do usuario etc.). */
  --cor-header-texto: #858796;

  /* Cor de selecao dos checkboxes/radios (marcado) e do accent nativo dos
     inputs. Costuma acompanhar a secundaria. */
  --cor-checkbox: #c2410c;
}

/* ============================================================
   TEMA — aplicacao das cores em componentes do sb-admin-2

   sb-admin-2.min.css esta marcado como "NAO ALTERAR" e define as cores
   originais do template. Como ele carrega antes deste arquivo, o jeito
   de aplicar a marca do projeto e sobrescrever aqui.
   ============================================================ */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--cor-botao) !important;
  border-color: var(--cor-botao) !important;
  color: var(--cor-botao-texto, #ffffff) !important;
}

/* estados de interacao: mesma cor, so escurecida — evita ter que
   cadastrar um segundo hex de "sombra" para cada projeto */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  background-color: var(--cor-botao) !important;
  border-color: var(--cor-botao) !important;
  color: var(--cor-botao-texto, #ffffff) !important;
  filter: brightness(0.88);
}

#content-wrapper {
  background-color: var(--cor-fundo) !important;
}

/* barra do topo: sobrescreve o .bg-white do sb-admin (carregado antes) */
.topbar {
  background-color: var(--cor-header) !important;
}

.topbar .nav-link,
.topbar .text-gray-600 {
  color: var(--cor-header-texto) !important;
}

/* selecao dos checkboxes/radios do Bootstrap (custom-control) + accent nativo */
.custom-control-input:checked~.custom-control-label::before {
  background-color: var(--cor-checkbox) !important;
  border-color: var(--cor-checkbox) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--cor-checkbox);
}

.min-h-100vh {
  min-height: 100vh !important;
}

.invalid-form,
.invalid-image {
  border: 1px solid #ff0000;
}

.bg-filtrando {
  background-color: rgba(28, 200, 138, .4);
  /* background-color: #FFF; */
  background-image: linear-gradient(180deg, rgba(28, 200, 138, .3) 10%, rgba(19, 133, 92, .3) 100%);
  background-size: cover;
}

.nav-tabs {
  border-bottom: 0px;
}

/* Layout da paginação START */
#pager {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 4px;
}

#pager .stepper-before,
#pager .stepper-next,
#pager .stepper {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  cursor: pointer;
}

#pager .stepper-before:hover,
#pager .stepper-next:hover,
#pager .stepper:hover,
#pager .stepper-active {
  color: var(--cor-primaria-texto);
  background-color: var(--cor-primaria);
}

/* o JS das telas de listagem adiciona .stepper tambem no anterior/proxima,
   deixando os tres com a mesma caixa quadrada */
.stepper {
  border-radius: 8px !important;
  margin-right: 4px !important;
  margin-left: 4px !important;
  padding: 8px !important;
  cursor: pointer !important;
  box-shadow: 0px 3px 6px #00000029 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 300 !important;
}

.stepper-active,
.stepper:hover {
  background-color: var(--cor-primaria) !important;
  color: var(--cor-primaria-texto) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: 0px 3px 6px #00000029 !important;
}

/* Layout da paginação END*/

/* GERADOR START*/
.text-titulo {
  font-size: 25px;
  font-weight: 700;
  color: #000 !important;
}

.titulo-info {
  font-size: 18px;
  font-weight: 400;
  color: #000 !important;
  opacity: 0.8;
  margin: 15px 0px 10px 0px;
}

.card-header:first-child {
  border-radius: calc(0.15rem - 1px) calc(0.15rem - 1px) 0 0;
}

.card-header {
  background-color: var(--cor-primaria) !important;
}

.card-header div {
  font-size: 12px;
  color: var(--cor-primaria-texto) !important;
}

.botao- {
  border-radius: 1.35rem !important;
}

.voltar {
  color: #000 !important;
  font-size: 1.875em !important;
}

.table td,
.table th {
  border-top: 0 !important;
}

.table {
  margin-bottom: 5px !important;
  color: var(--cor-primaria) !important;
  font-size: 0.9rem !important;
}

body {
  font-family: Helvetica !important;
}

.body-table {
  padding: 0 !important;
}

.card:not(.o-hidden) {
  background-color: #2a02fc00;
}

.card-table {
  border-radius: 12px 12px 0 0 !important;
}

.tabela-listagem thead tr td:first-child {
  border-radius: calc(0.15rem - 1px) 0 0 0 !important;
}

.tabela-listagem thead tr td:last-child {
  border-radius: 0 calc(0.15rem - 1px) 0 0 !important;
}

.tabela-listagem thead:nth-of-type(1) {
  background-color: var(--cor-primaria) !important;
  font-weight: 700 !important;
  color: var(--cor-primaria-texto) !important;
  line-height: 0.9 !important;
  font-size: 0.8rem !important;
}

.tabela-listagem-avaliacoes thead:nth-of-type(1) {
  background-color: #FFFFFF !important;
  font-weight: 700 !important;
  color: var(--cor-primaria) !important;
  line-height: 0.9 !important;
  font-size: 1rem !important;
  text-align: center !important;
}

.tabela-listagem-cinza thead:nth-of-type(1) {
  background-color: #C0C0C0 !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 0.9 !important;
  font-size: 0.8rem !important;
}

.btn {
  font-size: 0.8rem;
  border-radius: 0.55rem;
  white-space: nowrap !important;
}

.btn-sm {
  padding: 0.25rem 0.8rem !important;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.form-control {
  border-radius: 0.35rem !important;
  color: #4D4F5C !important;
  font-size: 14px;
}

.form-control::placeholder {
  color: #888787;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  border: 1px solid #eeeeee !important;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(5, 56, 207, 0.25) !important;
}

.card-body {
  padding: 1.25rem !important;
}

.label-geral {
  color: #838383c0;
  margin-left: 10px;
  font-size: 15px;
}

.disabled {
  cursor: not-allowed !important;
}

select {
  cursor: pointer;
}

.form-control-user {
  width: 280px !important;
  padding: 1.3rem 1rem !important;
}

.background {
  background-color: var(--cor-menu);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* overlay de escurecimento — útil quando .background usa background-image
.background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / 5%);
  z-index: -1;
} */

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 100px;
  margin-right: 50px;
}

@media (max-width: 767px) {
  .login-container {
    margin-right: 0;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 520px;
    margin: 1.75rem auto;
  }
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--cor-secundaria-texto);
  text-decoration: none;
  background-color: var(--cor-secundaria);
  border-radius: 4px;
}

::-webkit-calendar-picker-indicator {
  border-radius: 50%;
  margin-left: 0.1rem;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

::-webkit-calendar-picker-indicator:hover {
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

/* GERADOR END*/

/* MENU START */
.item-nav-link {
  color: var(--cor-menu-texto) !important;
  width: 100% !important;
  font-weight: 600;
}

/* fundo do menu lateral (o inline em menu.html tambem aponta pra var); icones
   do menu acompanham o texto. Escopado no #accordionSidebar pra nao mexer nos
   icones do topo. */
#accordionSidebar {
  background-color: var(--cor-menu) !important;
}

#accordionSidebar .nav-link i {
  color: var(--cor-menu-texto) !important;
}

.name_usuario {
  color: #27292F !important;
  font-weight: 700;
  font-size: 14px;
}

.item-menu {
  margin: 0px !important;
  width: 100% !important;
  height: 2.5rem !important;
  margin: 0 !important;
  margin-left: 0px !important;
  display: flex !important;
  align-items: center !important;
  border-top-width: 1px !important;
  border-right-width: 0px !important;
  border-left-width: 0px !important;
  border-bottom-width: 1px !important;
  border-radius: 0px 2px 2px 0px !important;
  border-style: solid !important;
  border-color: #fff !important;
}

.item-menu:hover {
  margin-left: 0px !important;
  background-color: var(--cor-secundaria) !important;
  border-top-width: 1px !important;
  border-right-width: 0px !important;
  border-bottom-width: 1px !important;
  border-left-width: 0px !important;
  border-radius: 0px 2px 2px 0px !important;
  border-style: solid !important;
  border-color: #fff !important;
  display: flex !important;
  align-items: center !important;
}

.menu-active {
  margin-left: 0px !important;
  background: var(--cor-secundaria) !important;
  border-top-width: 1px !important;
  border-right-width: 0px !important;
  border-bottom-width: 1px !important;
  border-left-width: 0px !important;
  border-radius: 0px 2px 2px 0px !important;
  border-style: solid !important;
  border-color: #fff !important;
  display: flex !important;
  align-items: center !important;
}

.sidebar {
  width: 20rem !important;
}

/* o icone herda a cor do proprio link: dentro do menu quem manda e
   #accordionSidebar .nav-link i; no topo, a cor do header */
.nav-link i {
  color: inherit !important;
}

.item-menu>a:hover>span {
  color: var(--cor-secundaria-texto) !important;
}

.item-menu>a:hover>i {
  color: var(--cor-secundaria-texto) !important;
}

.menu-active>a>span {
  color: var(--cor-secundaria-texto) !important;
}

.menu-active>a>i {
  color: var(--cor-secundaria-texto) !important;
}

/* MENU END */

/* LOGIN START*/
.footer-login p {
  color: #FFFFFF;
  font-size: small;
}

.footer-login a {
  color: #5e1b92;
}

.footer-login img {
  height: 20px;
  margin-right: 2px;
}

.span-copyright {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-copyright a {
  color: #5e1b92;
}

.span-copyright img {
  width: 90px;
  margin-right: 2px;
  margin-left: 5px;
  margin-bottom: 5px;
}

#olho-senha {
  width: 25px;
  margin-right: 20px;
  margin-left: 0px;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 58%;
  right: 50px;
  color: #555;
  transform: translateY(-50%);
}

@media (max-width: 383px) {
  #olho-senha {
    top: 60%;
  }
}

.swal-title-custom {
  font-size: 20px !important;
}


/* LOGIN END */

/* usuarios START */
.img-avatar {
  position: relative;
  top: 0;
  left: 10px;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50%;
  margin: 0px !important;
  cursor: pointer;
  object-fit: cover;
  margin-bottom: 30px !important;
}

.nav-tabs {
  border-bottom: 0px;
  margin-bottom: -1px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  margin-bottom: 0px;
  border-color: #A0A3AD !important;
}

.nav-tabs .nav-link {
  border: 0;
}

.header-aba {
  border-radius: 0px calc(0.35rem - 1px) 0px 0px !important;
}

.aba-selecionada:active,
.active.aba-selecionada {
  background-color: var(--cor-primaria) !important;
  color: var(--cor-primaria-texto) !important;
}

.aba-selecionada {
  background-color: #E2E3E6 !important;
  color: var(--cor-primaria) !important;
}

.pointer {
  cursor: pointer !important;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label:after {
  border-radius: 4px !important;
}

/* usuarios END */


/* ============================================================================
   CAMADA DARK-READY
   ----------------------------------------------------------------------------
   O painel nasceu so com tema claro: o sb-admin-2 e os blocos acima fixam
   branco/preto em card, tabela, input, dropdown, modal, menu e rodape. Sem esta
   camada, escurecer --cor-fundo deixa o conteudo claro por cima do fundo escuro.

   COMO FUNCIONA — todas as regras aqui usam  var(--nova, <valor-de-hoje>).
   Enquanto a variavel nao for declarada, o valor computado e o mesmo de antes:
   os temas CLAROS nao mudam um pixel, por construcao. Quem declara as variaveis
   e um bloco unico, html[data-tema="escuro"], la no fim do arquivo.

   COMO LIGAR O MODO ESCURO
   - Em Dev: o Seletor de tema liga sozinho (fundo escuro -> data-tema="escuro").
   - No projeto gerado: fica gravado no <html> de view/dashboard/snippets/header.html.

   Estas regras vem DEPOIS das originais de proposito — mesma especificidade,
   arquivo posterior, entao vencem a cascata sem precisar inflar seletor.
   ============================================================================ */

/* --- canvas e texto padrao ------------------------------------------------ */
/* o <html> nao tem fundo, entao o do body PROPAGA pro canvas; por isso ele tem
   variavel propria em vez de reusar --cor-fundo (que pintaria o canvas no claro) */
body {
  background-color: var(--cor-canvas, #ffffff);
  color: var(--cor-texto-suave, #858796);
}

a {
  color: var(--cor-link, #4e73df);
}

a:hover {
  color: var(--cor-link-hover, #224abe);
}

/* no escuro a sombra padrao (quase preta e translucida) some: sem ela o header
   e os cards perdem qualquer fronteira com o fundo */
.shadow {
  box-shadow: 0 .15rem 1.75rem 0 var(--cor-sombra, rgba(58, 59, 69, .15)) !important;
}

/* --- titulos -------------------------------------------------------------- */
/* .text-gray-800 precisa vir ANTES de .text-titulo: as duas sao (0,1,0) com
   !important, entao a ultima vence — e o h1 das telas usa as duas classes */
.text-gray-800 {
  color: var(--cor-texto, #5a5c69) !important;
}

.text-titulo,
.titulo-info,
.voltar {
  color: var(--cor-texto-forte, #000) !important;
}

/* --- cards ---------------------------------------------------------------- */
/* o card e transparente hoje (alpha 00 na regra original), por isso o default
   aqui e transparent e nao --cor-superficie */
.card:not(.o-hidden) {
  background-color: var(--cor-card-fundo, transparent);
}

.card {
  border-color: var(--cor-borda, #e3e6f0);
}

.card-header {
  background-color: var(--cor-card-header-fundo, var(--cor-primaria)) !important;
  border-bottom: 1px solid var(--cor-borda, #e3e6f0);
}

.card-header div {
  color: var(--cor-card-header-texto, var(--cor-primaria-texto)) !important;
}

.card-footer {
  background-color: var(--cor-superficie-alt, #f8f9fc);
  border-top: 1px solid var(--cor-borda, #e3e6f0);
}

/* rotulo de destaque dentro do corpo do card — escopado pra nao colidir com o
   rotulo do card-header, que ja tem cor propria */
.card-body .text-primary {
  color: var(--cor-texto-destaque, #4e73df) !important;
}

/* icone marca-dagua do stat card: no escuro precisa de um cinza ESCURO, senao
   vira o elemento de maior contraste da tela */
.card-body .text-gray-300 {
  color: var(--cor-icone-suave, #dddfeb) !important;
}

.label-geral {
  color: var(--cor-label, #838383c0);
}

/* --- tabelas -------------------------------------------------------------- */
/* a superficie vai no <table>, nao na celula: pintar td/th cobriria o <tr> e
   mataria zebra e hover. O texto usava --cor-primaria (escura nos temas
   escuros) — agora e a cor de texto, que e o correto conceitualmente */
.table {
  background-color: var(--cor-superficie-tabela, transparent);
  color: var(--cor-texto-tabela, var(--cor-primaria)) !important;
}

/* zebra e hover como OVERLAY (rgba), nao cor solida: assim funcionam sobre
   qualquer superficie sem precisar de um hex por tema. A zebra e a unica
   separacao entre linhas, porque o border-top das celulas e zerado acima */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--cor-linha-zebra, rgba(0, 0, 0, .05));
}

/* !important aqui nao e pra vencer o sb-admin e sim pra nao depender da ordem
   em relacao a zebra, que tem especificidade IGUAL */
.table-hover tbody tr:hover {
  color: var(--cor-linha-hover-texto, #858796) !important;
  background-color: var(--cor-linha-hover, rgba(0, 0, 0, .075)) !important;
}

.tabela-listagem-cinza thead:nth-of-type(1) {
  background-color: var(--cor-thead-alt, #C0C0C0) !important;
  color: var(--cor-thead-alt-texto, #fff) !important;
}

.tabela-listagem-avaliacoes thead:nth-of-type(1) {
  background-color: var(--cor-superficie, #FFFFFF) !important;
}

/* --- paginacao ------------------------------------------------------------ */
/* SEM !important: este seletor (1,1,0) casa tambem com a pagina ativa, que so
   se destaca por causa do !important de .stepper-active — com !important aqui
   o ID venceria e a pagina ativa perderia o destaque em todos os temas */
#pager .stepper-before,
#pager .stepper-next,
#pager .stepper {
  color: var(--cor-pager-texto, var(--cor-primaria));
  border: 1px solid var(--cor-pager-borda, var(--cor-primaria));
  background-color: var(--cor-pager-fundo, transparent);
}

.stepper,
.stepper-active,
.stepper:hover {
  box-shadow: var(--sombra-elevacao, 0px 3px 6px #00000029) !important;
}

/* --- formularios ---------------------------------------------------------- */
/* longhand background-color de proposito: o shorthand apagaria os SVG de
   validacao (.is-valid/.is-invalid) do sb-admin.
   --cor-borda-input e separada de --cor-borda porque o input usa #d1d3e2 e
   card/dropdown usam #e3e6f0 */
.form-control {
  background-color: var(--cor-superficie, #ffffff) !important;
  color: var(--cor-texto, #4D4F5C) !important;
  border-color: var(--cor-borda-input, #d1d3e2) !important;
}

.form-control:focus {
  background-color: var(--cor-superficie, #ffffff) !important;
  color: var(--cor-texto, #4D4F5C) !important;
  border-color: var(--cor-foco-borda, #bac8f3) !important;
  box-shadow: 0 0 0 0.2rem var(--cor-foco, rgba(5, 56, 207, 0.25)) !important;
}

/* obrigatorio junto da regra base: sem ele o !important acima apagaria o cinza
   de campo desabilitado tambem nos temas claros */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--cor-superficie-alt, #eaecf4) !important;
  border: 1px solid var(--cor-borda-suave, #eeeeee) !important;
  opacity: 1 !important;
}

/* regras separadas: um seletor invalido dentro de uma lista agrupada
   invalidaria a regra inteira */
.form-control::placeholder {
  color: var(--cor-texto-suave, #888787);
  opacity: 1;
}

.form-control::-webkit-input-placeholder {
  color: var(--cor-texto-suave, #888787);
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: var(--cor-texto-suave, #888787);
  opacity: 1;
}

/* precisa vir DEPOIS de .form-control: senao o border-color!important de la
   engole a borda vermelha que o setInvalid() do utils.js aplica */
.invalid-form,
.invalid-image,
.form-control.invalid-form,
.form-control.invalid-form:focus {
  border: 1px solid var(--cor-erro, #ff0000) !important;
}

/* SEM !important: com ele esta regra passaria a vencer tambem o realce de foco
   do checkbox nao-marcado, que sumiria em todos os temas.
   O estado MARCADO continua vindo de --cor-checkbox, la em cima */
.custom-control-label::before {
  background-color: var(--cor-superficie, #ffffff);
  border-color: var(--cor-borda-forte, #b7b9cc);
}

.custom-control-input:disabled~.custom-control-label::before,
.custom-control-input[disabled]~.custom-control-label::before {
  background-color: var(--cor-superficie-alt, #eaecf4);
}

.custom-control-input:disabled~.custom-control-label,
.custom-control-input[disabled]~.custom-control-label {
  color: var(--cor-texto-suave, #858796);
}

.bg-filtrando {
  background-color: var(--cor-filtro-fundo, rgba(28, 200, 138, .4));
  background-image: var(--cor-filtro-imagem,
      linear-gradient(180deg, rgba(28, 200, 138, .3) 10%, rgba(19, 133, 92, .3) 100%));
}

::-webkit-calendar-picker-indicator:hover {
  -webkit-box-shadow: 0 0 0 4px var(--cor-hover-sutil, rgba(0, 0, 0, .04));
  box-shadow: 0 0 0 4px var(--cor-hover-sutil, rgba(0, 0, 0, .04));
}

/* --- abas ----------------------------------------------------------------- */
/* a aba ATIVA ja usa --cor-primaria; esta e a inativa, hoje cinza fixo */
.aba-selecionada {
  background-color: var(--cor-aba-inativa, #E2E3E6) !important;
  color: var(--cor-aba-inativa-texto, var(--cor-primaria)) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  border-color: var(--cor-borda, #A0A3AD) !important;
}

/* --- menu lateral --------------------------------------------------------- */
/* o pior ofensor do modo escuro: cada item tinha border-color #fff !important,
   virando uma escada de linhas brancas no menu escuro. Amarrado ao fundo do
   proprio menu, some no escuro e continua invisivel no claro (branco/branco) */
#accordionSidebar .item-menu,
#accordionSidebar .item-menu:hover,
#accordionSidebar .menu-active {
  border-color: var(--cor-menu-borda, var(--cor-menu)) !important;
}

#accordionSidebar hr.sidebar-divider {
  border-top-color: var(--cor-menu-borda, var(--cor-menu)) !important;
}

#accordionSidebar .sidebar-brand,
#accordionSidebar .sidebar-brand-text {
  color: var(--cor-menu-texto) !important;
}

/* icone acompanha o label no hover e no item ativo */
#accordionSidebar .item-menu:hover>a>i,
#accordionSidebar .item-menu:hover>a>span,
#accordionSidebar .menu-active>a>i,
#accordionSidebar .menu-active>a>span {
  color: var(--cor-secundaria-texto) !important;
}


/* --- header / topbar ------------------------------------------------------ */
/* .navbar.topbar (0,2,0) em vez de .topbar (0,1,0): tira a dependencia da ordem
   dos <link> pra vencer o .bg-white que esta na propria tag do <nav> */
.navbar.topbar {
  background-color: var(--cor-header) !important;
}

.topbar.shadow {
  box-shadow: 0 .15rem 1.75rem 0 var(--cor-sombra, rgba(58, 59, 69, .15)) !important;
}

.name_usuario {
  color: var(--cor-header-texto) !important;
}

.topbar .nav-item .nav-link i {
  color: var(--cor-header-texto) !important;
}

.topbar .topbar-divider {
  border-right-color: var(--cor-borda, #e3e6f0);
}

/* o hamburguer herdava o azul do .btn-link e ignorava o tema nas 10 paletas */
.topbar #sidebarToggleTop {
  color: var(--cor-header-icone, #4e73df);
}

.topbar #sidebarToggleTop:hover {
  color: var(--cor-header-icone-hover, #224abe);
  background-color: var(--cor-header-hover, #eaecf4);
}

.topbar #sidebarToggleTop:active {
  background-color: var(--cor-header-hover-ativo, #dddfeb);
}

/* o avatar padrao e um SVG com fill=currentColor; dentro de <img> isso resolve
   pra PRETO e o disco some no header escuro — so um fundo atras resolve */
.topbar .nav-item .nav-link .img-profile {
  background-color: var(--cor-avatar-fundo, transparent);
}

/* --- dropdowns e modais --------------------------------------------------- */
.dropdown-menu {
  background-color: var(--cor-superficie, #fff);
  color: var(--cor-texto-suave, #858796);
  border-color: var(--cor-borda, #e3e6f0);
}

.dropdown-item {
  color: var(--cor-texto, #3a3b45);
}

.dropdown-divider {
  border-top-color: var(--cor-borda, #eaecf4);
}

/* .text-gray-400 tem !important e travaria o icone do "Sair" em cinza claro
   mesmo com o fundo ja na cor secundaria */
.dropdown-item:hover i,
.dropdown-item:focus i {
  color: var(--cor-secundaria-texto) !important;
}

.modal-content {
  background-color: var(--cor-superficie, #fff);
  color: var(--cor-texto-suave, #858796);
}

/* border-color do .modal-content fica de fora: hoje e rgba(0,0,0,.2) e trocar
   por --cor-borda clarearia o contorno nos temas claros */
.modal-header,
.modal-footer {
  border-color: var(--cor-borda, #e3e6f0);
}

/* o :hover e obrigatorio: sem ele o "x" volta a preto puro bem na hora do clique */
.close,
.close:hover {
  color: var(--cor-texto-forte, #000);
  text-shadow: 0 1px 0 var(--cor-superficie, #fff);
}

/* --- sweetalert2 ---------------------------------------------------------- */
/* sweetalert2.css carrega antes deste arquivo e nao usa !important em cor
   nenhuma: mesma especificidade + ordem ja resolve.
   iziToast nao entra: o utils.js sempre passa cor explicita nos toasts */
.swal2-popup {
  background: var(--cor-superficie, #fff);
  color: var(--cor-texto-suave, #858796);
}

.swal2-title {
  color: var(--cor-swal-titulo, #595959);
}

.swal2-html-container {
  color: var(--cor-swal-texto, #545454);
}

.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select {
  border-color: var(--cor-swal-borda, #d9d9d9);
}

/* --- rodape e scroll-to-top ----------------------------------------------- */
footer.sticky-footer.bg-gradient-light {
  background-color: var(--cor-footer-topo, #f8f9fc);
  background-image: linear-gradient(180deg,
      var(--cor-footer-topo, #f8f9fc) 10%,
      var(--cor-footer-base, #c2cbe5) 100%);
  background-size: cover;
}

.scroll-to-top {
  background: var(--cor-scroll-top, rgba(90, 92, 105, .5));
}

.scroll-to-top:hover {
  background: var(--cor-scroll-top-hover, #5a5c69);
}

/* --- login ---------------------------------------------------------------- */
/* box-shadow inset em vez do ::after: o ::after original e inerte (o pai nao
   cria stacking context, entao z-index:-1 pinta atras da propria imagem).
   height auto + min-height evita a foto vazar quando a tela nao cabe */
.background {
  height: auto;
  min-height: 100%;
  box-shadow: inset 0 0 0 100vmax var(--cor-login-scrim, transparent);
}


/* ============================================================================
   TEMA ESCURO — unico lugar onde os valores escuros existem
   ----------------------------------------------------------------------------
   Quase tudo deriva de --cor-fundo com color-mix(), entao basta escolher o
   fundo e o menu no Seletor de tema: superficie, bordas e divisores se ajustam
   sozinhos. Nenhuma destas variaveis precisa entrar no seletor de cores.
   ============================================================================ */
html[data-tema="escuro"] {
  /* faz o navegador desenhar em modo escuro o popup do <select>, o painel do
     date picker, o botao do input[type=file], a scrollbar e o autofill —
     nenhum hex resolve isso */
  color-scheme: dark;

  /* superficies: degraus acima do fundo escolhido */
  --cor-canvas: var(--cor-fundo);
  --cor-superficie: color-mix(in srgb, var(--cor-fundo), #ffffff 7%);
  --cor-superficie-alt: color-mix(in srgb, var(--cor-fundo), #ffffff 12%);
  --cor-superficie-tabela: var(--cor-superficie);

  /* bordas */
  --cor-borda: color-mix(in srgb, var(--cor-fundo), #ffffff 16%);
  --cor-borda-suave: color-mix(in srgb, var(--cor-fundo), #ffffff 11%);
  --cor-borda-input: color-mix(in srgb, var(--cor-fundo), #ffffff 22%);
  --cor-borda-forte: color-mix(in srgb, var(--cor-fundo), #ffffff 30%);
  --cor-menu-borda: var(--cor-menu);

  /* texto — tres degraus: forte (titulos), normal (corpo), suave (labels) */
  --cor-texto-forte: #f4f6fa;
  --cor-texto: #e0e5ee;
  --cor-texto-suave: #99a2b2;
  --cor-label: #99a2b2;
  --cor-texto-tabela: var(--cor-texto);
  --cor-texto-destaque: var(--cor-secundaria);
  --cor-icone-suave: color-mix(in srgb, var(--cor-fundo), #ffffff 22%);

  /* A primaria pura empata com a superficie no escuro (1,06:1 no tema 10) e o
     cabecalho do card desaparece dentro do card. Clarear 18% mantem o matiz da
     marca, sobe a separacao pra ~2:1 e ainda deixa o texto branco em 6,7:1. */
  --cor-card-fundo: var(--cor-superficie);
  --cor-card-header-fundo: color-mix(in srgb, var(--cor-primaria), #ffffff 18%);
  --cor-card-header-texto: var(--cor-primaria-texto);

  /* zebra/hover como overlay claro; o hover fica acima da zebra de proposito */
  --cor-linha-zebra: rgba(255, 255, 255, .05);
  --cor-linha-hover: rgba(255, 255, 255, .10);
  --cor-linha-hover-texto: var(--cor-texto);
  --cor-hover-sutil: rgba(255, 255, 255, .08);
  --cor-thead-alt: color-mix(in srgb, var(--cor-fundo), #ffffff 18%);
  --cor-thead-alt-texto: var(--cor-texto);

  /* paginacao sai da cor institucional (escura) e vai pra superficie */
  --cor-pager-texto: var(--cor-texto);
  --cor-pager-borda: var(--cor-borda);
  --cor-pager-fundo: var(--cor-superficie);

  /* sombra preta e bem mais opaca: e o que devolve a nocao de elevacao */
  --cor-sombra: rgba(0, 0, 0, .55);
  --sombra-elevacao: 0px 3px 6px rgba(0, 0, 0, .55);

  /* foco e erro derivados da marca, nao do azul fixo do bootstrap */
  --cor-foco: color-mix(in srgb, var(--cor-secundaria) 35%, transparent);
  --cor-foco-borda: var(--cor-secundaria);
  --cor-erro: #ff6b6b;

  /* o verde fixo do filtro ativo estoura no escuro: vira tint da secundaria */
  --cor-filtro-fundo: color-mix(in srgb, var(--cor-secundaria) 12%, transparent);
  --cor-filtro-imagem: none;

  /* header */
  --cor-header-icone: var(--cor-header-texto);
  --cor-header-icone-hover: var(--cor-texto-forte);
  --cor-header-hover: rgba(255, 255, 255, .08);
  --cor-header-hover-ativo: rgba(255, 255, 255, .14);
  --cor-avatar-fundo: #dfe4ec;

  /* abas */
  --cor-aba-inativa: var(--cor-superficie-alt);
  --cor-aba-inativa-texto: var(--cor-texto-suave);

  /* links: no escuro o hover tem que CLAREAR, nunca escurecer */
  --cor-link: var(--cor-secundaria);
  --cor-link-hover: color-mix(in srgb, var(--cor-secundaria), #ffffff 30%);

  /* overlays */
  --cor-swal-titulo: var(--cor-texto);
  --cor-swal-texto: var(--cor-texto);
  --cor-swal-borda: var(--cor-borda);

  /* rodape acompanha o par fundo/menu em vez do degrade claro do sb-admin */
  --cor-footer-topo: var(--cor-fundo);
  --cor-footer-base: var(--cor-menu);
  --cor-scroll-top: rgba(255, 255, 255, .16);
  --cor-scroll-top-hover: rgba(255, 255, 255, .28);

  /* logo em silhueta clara; troque por uma marca clara de verdade no projeto */
  --logo-filtro: brightness(0) invert(1);

  --cor-login-scrim: rgba(0, 0, 0, .5);
}