html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* fuerza altura mínima de toda la pantalla */
}

main {
  flex: 1; /* ocupa todo el espacio sobrante */
}

header {
  flex: 0 0 auto; /* altura fija, no se encoge */
}

.navbar-custom {
  background-color: #3a628d !important; /* tu color personalizado */
}

.icon-menu {
  width: 40px; /* ancho del icono */
  height: 40px; /* alto del icono */
  object-fit: contain;
}
.table-container {
  width: 100%;
  overflow-x: auto; /* permite scroll horizontal si es necesario */
  padding: 0; /* elimina padding que reduce el ancho */
  margin: 0;
}

.dataTables_wrapper {
  width: 100%;
}

.dataTables_scrollBody {
  overflow-x: auto !important;
}

/* Opcional: fuerza la tabla a ocupar todo el ancho */
#citasTable {
  width: 100% !important;
}

.filter-box {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.filter-box:hover {
  background-color: #f0f8ff !important;
  border-color: #0d6efd !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-check-input:checked ~ .form-check-label {
  color: #0d6efd;
}

.card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.btn-primary {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
  border: none;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-check-input[type="checkbox"]:checked {
  animation: checkboxPulse 0.3s ease;
}

@keyframes checkboxPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Colorear filas por médico usando variables de Bootstrap */
#citasTable tbody tr.bg-medico-1 {
  --bs-table-bg: #8dafe2;
  --bs-table-striped-bg: #7aa1dd;
  --bs-table-hover-bg: #4370b4;
  --bs-table-color: #fff;
}
#citasTable tbody tr.bg-medico-2 {
  --bs-table-bg: #97ceb4;
  --bs-table-striped-bg: #7fb49b;
  --bs-table-hover-bg: #569678;
  --bs-table-color: #fff;
}
#citasTable tbody tr.bg-medico-3 {
  --bs-table-bg: #feba83;
  --bs-table-striped-bg: #dab89b;
  --bs-table-hover-bg: #926b4c;
  --bs-table-color: #fff;
}
#citasTable tbody tr.bg-medico-4 {
  --bs-table-bg: #d55965;
  --bs-table-striped-bg: #d0858d;
  --bs-table-hover-bg: #a33e48;
  --bs-table-color: #fff;
}
#citasTable tbody tr.bg-medico-5 {
  --bs-table-bg: #b49ae6;
  --bs-table-striped-bg: #a59aba;
  --bs-table-hover-bg: #6a588b;
  --bs-table-color: #fff;
}
#citasTable tbody tr.bg-medico-default {
  --bs-table-bg: #6c757d;
  --bs-table-striped-bg: #6c757d;
  --bs-table-hover-bg: #6c757d;
  --bs-table-color: #fff;
}
/* -------------------------------------- */
/* -------------- Footer ---------------- */
/* -------------------------------------- */

footer.footer {
  background-color: #465f7a !important; /* fuerza el color de fondo */
  color: #d5d4d4 !important; /* fuerza el color del texto */
  text-align: center;
  padding: 1rem 0;
  flex-shrink: 0;
}
footer.footer p {
  color: #d5d4d4 !important;
}

/* -------------------------------------- */
/* -------------------------------------- */