/* 1) Switch: responsivo y sin !important */
.bootstrap-switch {
  width: auto !important;       /* pisa el 59px */
  height: 1.25rem;              /* ~20px */
}
.bootstrap-switch .bootstrap-switch-container {
  width: auto !important;       /* pisa el 100px */
}
.bootstrap-switch .bootstrap-switch-label {
  width: 1.25rem !important;    /* knob proporcional */
  height: 1.25rem !important;
  margin: 0 calc(-0.625rem);    /* compensa centrado */
}

/* 2) Selectpicker: mejor fallback accesible */
select.selectpicker {
  /* Evita display:none; deja el control visible si el JS falla */
  display: inline-block !important; /* pisa el none */
  position: static !important;
  width: 100%;
}
.bootstrap-select .dropdown-menu { min-width: 100%; } /* conservamos el menú */
/* Si quieres ocultar SOLO visualmente, usa una clase utilitaria tipo .visually-hidden en vez de display:none */

/* 3) Sliders: usable en táctil */
.noUi-horizontal { height: 4px; }              /* más “grueso” que 1px */
.noUi-horizontal .noUi-handle {
  height: 18px; width: 18px;                   /* toque más grande */
  box-shadow: 0 1px 6px rgba(0,0,0,.18);       /* menos duro que el default */
}

/* 4) Datetimepicker: theming con variables */
:root{
  --brand: #0064A8;
  --brand-contrast: #fff;
}
.bootstrap-datetimepicker-widget button[data-action]{
  background-color: var(--brand) !important;   /* pisa hardcodes */
  color: var(--brand-contrast) !important;
}
.bootstrap-datetimepicker-widget table td.active > div{
  background-color: var(--brand);
  color: var(--brand-contrast);
}

/* 5) Reducir sombras globales “pesadas” sin romper HTML */
.noUi-handle,
.bootstrap-switch .bootstrap-switch-label {
  box-shadow: 0 1px 8px rgba(0,0,0,.18);       /* más sutil */
}
/* Ocultar submenús por defecto */
.dropdown-submenu .dropdown-menu { display: none; }

/* Mostrar solo cuando JS añade .show */
.dropdown-submenu .dropdown-menu.show { display: block; }