.btn-acao {
  min-width: 90px;
  height: 33px;
  padding: 0 12px;
  border-radius: 0.25rem;
  font-weight: bold;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #eab308; 
  color: #111827;            
  transition: background-color 0.2s;
}

.btn-acao:hover {
  background-color: #ca8a04;
}

.btn-acao-vermelho {
  min-width: 90px;
  height: 33px;
  padding: 0 12px;
  border-radius: 0.25rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #dc2626; /* bg-red-600 */
  color: #ffffff;            /* white */
  transition: background-color 0.2s;
}

.btn-acao-vermelho:hover {
  background-color: #b91c1c; /* bg-red-700 */
}

.btn-acao-azul {
  min-width: 90px;
  height: 33px;
  padding: 0 12px;
  border-radius: 0.25rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2563EB; /* blue-600 */
  color: #ffffff;            /* white */
  transition: background-color 0.2s;
}

.btn-acao-azul:hover {
  background-color: #1D4ED8; /* blue-700 */
}

.btn-acao-verde {
  min-width: 90px;
  height: 33px;
  padding: 0 12px;
  border-radius: 0.25rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #16A34A; /* green-600 */
  color: #ffffff;            /* white */
  transition: background-color 0.2s;
}

.btn-acao-verde:hover {
  background-color: #15803D; /* green-700 */
}

.divider_yellow {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: none;
  border-top: 1px solid #eab308; /* cor semelhante ao yellow-500 do Tailwind */
}

.card1 {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease-in-out;
}
.card1:hover {
  transform: scale(1.1);
}
.card1 p:first-child {
  font-size: 0.875rem; /* text-sm */
  color: #d1d5db;      /* gray-300 */
}
.card1 p:last-child {
  font-size: 1.5rem;   /* text-2xl */
  font-weight: bold;
}

.card1.no-hover:hover {
  transform: none !important;
}

main {
  overflow-y: auto;
}


/* 1. Container do switch */
.custom-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* 2. Checkbox “invisível” (sr-only) */
.custom-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Track do switch */
.custom-switch-slider {
  width: 44px;              /* w-11 */
  height: 24px;             /* h-6 */
  background-color: #e5e7eb;/* bg-gray-200 */
  border-radius: 9999px;    /* rounded-full */
  position: relative;
  transition: background-color 0.2s;
}

/* 4. Thumb (a “bolinha”) */
.custom-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;              /* h-5/w-5 */
  height: 20px;
  background-color: #ffffff;/* bg-white */
  border-radius: 9999px;    /* rounded-full */
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 5. Estado ligado (checked) */
.custom-switch-input:checked + .custom-switch-slider {
  background-color: #2563eb;/* bg-blue-600 */
}
.custom-switch-input:checked + .custom-switch-slider::after {
  transform: translateX(20px);
}

/* 6. Foco (análogo ao ring) */
.custom-switch-input:focus + .custom-switch-slider {
  box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.5); /* ring-blue-300 */
}

/* 7. Label de texto ao lado */
.custom-switch-label {
  margin-left: 0.75rem;     /* ml-3 */
  font-size: 0.875rem;      /* text-sm */
  font-weight: 500;         /* font-medium */
  color: #e5e7eb;           /* text-gray-200 */
}

/* Switch menor */
/* Switch menor - sobrescrevendo completamente */
.custom-switch.custom-switch-small .custom-switch-slider {
  width: 36px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.2s;
}

.custom-switch.custom-switch-small .custom-switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.custom-switch.custom-switch-small .custom-switch-input:checked + .custom-switch-slider {
  background-color: #2563eb;
}

.custom-switch.custom-switch-small .custom-switch-input:checked + .custom-switch-slider::after {
  transform: translateX(16px);
}

.custom-switch.custom-switch-small .custom-switch-input:focus + .custom-switch-slider {
  box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.5);
}

/* Modo escuro também para o switch pequeno */
@media (prefers-color-scheme: dark) {
  .custom-switch.custom-switch-small .custom-switch-slider {
    background-color: #374151;
  }
  .custom-switch.custom-switch-small .custom-switch-input:checked + .custom-switch-slider {
    background-color: #2563eb;
  }
}

/* /assets/style.css */
.apexcharts-tooltip {
  background: rgba(0,0,0,0.85) !important;  /* fundo escuro */
  color: #fff !important;                   /* texto claro   */
  border-color: #444 !important;            /* borda discreta */
}
/* ================================
   ADICIONE ao final de assets/css/style.css
   (ou cole inteiro se preferir substituir)
   ================================ */

/* Status badges */
.status-em-dia { background-color: #10B981; }
.status-atrasada { background-color: #EF4444; }
.status-nao_auditada { background-color: #F59E0B; }

/* Melhora o contraste da tabela */
#tabela-auditoria th {
  background-color: #1F2937; /* gray-800 */
  color: #FFFFFF;            /* white */
}
#tabela-auditoria td {
  background-color: #111827; /* gray-900 */
  color: #F3F4F6;            /* gray-100 */
}
#tabela-auditoria tr:nth-child(even) td {
  background-color: #1F2937; /* gray-800 */
}
#tabela-auditoria tbody tr:hover td {
  background-color: #374151; /* gray-700 */
}

/* ---------- Estilos para controles do DataTables (select "Exibir" e input "Pesquisar") ---------- */
/* Estiliza o select de "Exibir" e o input de busca do DataTables */
.dataTables_length select,
.dataTables_filter input {
  color: #E5E7EB;              /* cor do texto das opções / input */
  background-color: #374151;   /* cor do fundo do controle */
  border: 1px solid #4B5563;
  padding: .35rem .6rem;
  border-radius: .25rem;
  font-size: 0.9rem;
}

/* Estiliza (quando possível) o texto das <option> */
.dataTables_length select option {
  color: #E5E7EB;
  background-color: #1F2937;
}

/* Placeholder do campo de busca */
.dataTables_filter input::placeholder {
  color: #94A3B8;
  opacity: 1;
}

/* Remove aparência nativa para permitir estilos consistentes */
.dataTables_length select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Ajustes opcionais para o label ao redor (ex.: "Exibir") */
.dataTables_length label,
.dataTables_filter label {
  color: #E5E7EB;
  margin-right: .5rem;
  font-size: 0.95rem;
}

/* Para alinhar melhor com o tema escuro e espaçamento entre controles */
div.dataTables_wrapper div.dataTables_length {
  margin-bottom: .5rem;
}
div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}
/* DataTables: deixa textos dos controles em branco para melhor contraste */
.dataTables_info,
.dataTables_paginate,
.dataTables_length label,
.dataTables_filter label,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
}

/* DataTables: ícone de busca e setas de paginação */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #fff !important;
    border-color: #4b5563 !important; /* border-gray-600 */
}