/* === KPI Carousel & Arrows === */
#kpiBtnPrev, #kpiBtnNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
#kpiBtnPrev i, #kpiBtnNext i {
  font-size: 20px;
  line-height: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
#kpiBtnPrev:hover, #kpiBtnNext:hover {
  background-color: #f5f5f5;
  border-color: #aaa;
}
#kpiBtnPrev { left: 10px; }
#kpiBtnNext { right: 10px; }

/* KPI Gauge cards */
.kpi-gauge-card {
  min-width: 190px;
  max-width: 240px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 8px 14px 6px;
  text-align: center;
}
.kpi-gauge-card svg { display: block; margin: 0 auto; }
.kpi-gauge-card .kpi-name {
  font-size: .8rem;
  font-weight: 600;
  color: #333;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-gauge-card .kpi-fraction {
  font-size: .72rem;
  color: #888;
  margin-top: -2px;
}

/* Your Custom CSS Goes here */

/* =============================================
   YELLOW THEME - Bootstrap & Global Overrides
   Primary: #ffc407  Hover: #e6b200  Dark: #d4a800
   Light BG: #FFF8E1  Badge: #FFF3CD
   ============================================= */

.bg-primary,
.badge.bg-primary,
.bg-primary *,
[class*="bg-warning"],
.nav-pills .nav-link.active,
.list-group-item.active,
.progress-bar,
.swal2-styled.swal2-confirm,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.toast-info {
  color: #fff9e6 !important;
}

/* Bootstrap Primary Color Override */
.btn-primary {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
  color: #fff9e6 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: #e6b200 !important;
  border-color: #d4a800 !important;
  color: #fff9e6 !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
  opacity: 0.65;
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.5) !important;
}

/* Bootstrap Outline Primary */
.btn-outline-primary {
  color: #ffc407 !important;
  border-color: #ffc407 !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
  color: #fff9e6 !important;
}
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.5) !important;
}

/* Bootstrap Link/Text Primary */
.text-primary {
  color: #ffc407 !important;
}
a.text-primary:hover, a.text-primary:focus {
  color: #d4a800 !important;
}
.bg-primary {
  background-color: #ffc407 !important;
}
.border-primary {
  border-color: #ffc407 !important;
}

/* Bootstrap Badge Primary */
.badge.bg-primary, .badge-primary {
  background-color: #ffc407 !important;
}

/* Bootstrap Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #E8A000;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #d4a800;
}




/* =============================================
   PREMIUM PAGINATION - DataTables & Bootstrap
   ============================================= */

/* Contenedor general de paginación */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1.5rem !important;
    padding: 0 !important;
}

/* Lista de paginación */
.pagination {
    display: flex !important;
    gap: 6px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Botones individuales (EL DISEÑO REAL) */
.page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-decoration: none !important;
    background-color: #fff !important;
    border: 1px solid #e0e6ed !important;
    border-radius: 8px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    z-index: 1 !important;
}

/* Estado Hover */
.page-link:hover {
    z-index: 2 !important;
    color: #ffc407 !important;
    background-color: #fff9e6 !important;
    border-color: #ffc407 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 196, 7, 0.15) !important;
}

/* Estado Activo (Página Actual) */
.page-item.active .page-link {
    z-index: 3 !important;
    color: #fff !important;
    background-color: #ffc407 !important;
    border-color: #ffc407 !important;
    box-shadow: 0 4px 15px rgba(255, 196, 7, 0.35) !important;
}

/* Estado Deshabilitado */
.page-item.disabled .page-link {
    color: #adb5bd !important;
    pointer-events: none !important;
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    opacity: 0.8 !important;
}

/* Neutralizar COMPLETAMENTE los contenedores originales que ensucian el diseño */
.pagination .page-item,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin: 0 3px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pagination .page-item:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none !important;
    background: transparent !important;
}

/* Form Focus States */
.form-control:focus, .form-select:focus {
    border-color: #ffc407 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.25) !important;
}

/* =============================================
   ACTION BUTTONS - Compact & Hover Effects
   ============================================= */
.btn-accion {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.btn-accion:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

.btn-accion .material-symbols-outlined {
  font-size: 18px !important;
}

/* Bootstrap Nav/Tab Active */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #ffc407 !important;
}
.nav-link {
  color: #ffc407;
}
.nav-link:hover, .nav-link:focus {
  color: #d4a800;
}

/* Bootstrap Spinner */
.spinner-border.text-primary {
  color: #ffc407 !important;
}

/* Bootstrap Progress */
.progress-bar {
  background-color: #ffc407 !important;
}

/* Bootstrap List Group */
.list-group-item.active {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
}

/* Bootstrap Dropdown Active */
.dropdown-item.active, .dropdown-item:active {
  background-color: #ffc407 !important;
  color: #fff9e6 !important;
}

/* Bootstrap Accordion */
.accordion-button:not(.collapsed) {
  color: #d4a800;
  background-color: #FFF8E1;
}
.accordion-button:focus {
  border-color: #ffc407;
  box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.25);
}

/* SweetAlert2 Override */
.swal2-styled.swal2-confirm {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
  color: #fff9e6 !important;
}
.swal2-styled.swal2-confirm:hover {
  background-color: #e6b200 !important;
  color: #fff9e6 !important;
}
.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.5) !important;
}



/* Select2 Override */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ffc407 !important;
  color: #fff9e6 !important;
}

/* Toastr info override */
.toast-info {
  background-color: #ffc407 !important;
  color: #fff9e6 !important;
}

/* ============================================= */

/* NUEVOS ESTILOS */

/*******************

Preloader

********************/

.preloader {

  width: 100%;

  height: 100%;

  top: 0px;

  position: fixed;

  z-index: 99999;

  background: #fff; }

  .preloader .cssload-speeding-wheel {

    position: absolute;

    top: calc(50% - 3.5px);

    left: calc(50% - 3.5px); }



.loader,

.loader__figure {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%); }



.loader {

  overflow: visible;

  padding-top: 2em;

  height: 0;

  width: 2em; }



.loader__figure {

  height: 0;

  width: 0;

  box-sizing: border-box;

  border: 0 solid #ffc407;

  border-radius: 50%;

  -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

  -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); }



.loader__label {

  float: left;

  margin-left: 50%;

  -webkit-transform: translateX(-50%);

  -moz-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  transform: translateX(-50%);

  margin: 0.5em 0 0 50%;

  font-size: 0.875em;

  letter-spacing: 0.1em;

  line-height: 1.5em;

  color: #ffc407;

  white-space: nowrap;

  -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

  -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); }



@-webkit-keyframes loader-figure {

  0% {

    height: 0;

    width: 0;

    background-color: #ffc407; }

  29% {

    background-color: #ffc407; }

  30% {

    height: 2em;

    width: 2em;

    background-color: transparent;

    border-width: 1em;

    opacity: 1; }

  100% {

    height: 2em;

    width: 2em;

    border-width: 0;

    opacity: 0;

    background-color: transparent; } }



@-moz-keyframes loader-figure {

  0% {

    height: 0;

    width: 0;

    background-color: #ffc407; }

  29% {

    background-color: #ffc407; }

  30% {

    height: 2em;

    width: 2em;

    background-color: transparent;

    border-width: 1em;

    opacity: 1; }

  100% {

    height: 2em;

    width: 2em;

    border-width: 0;

    opacity: 0;

    background-color: transparent; } }



@keyframes loader-figure {

  0% {

    height: 0;

    width: 0;

    background-color: #ffc407; }

  29% {

    background-color: #ffc407; }

  30% {

    height: 2em;

    width: 2em;

    background-color: transparent;

    border-width: 1em;

    opacity: 1; }

  100% {

    height: 2em;

    width: 2em;

    border-width: 0;

    opacity: 0;

    background-color: transparent; } }



@-webkit-keyframes loader-label {

  0% {

    opacity: 0.25; }

  30% {

    opacity: 1; }

  100% {

    opacity: 0.25; } }



@-moz-keyframes loader-label {

  0% {

    opacity: 0.25; }

  30% {

    opacity: 1; }

  100% {

    opacity: 0.25; } }



@keyframes loader-label {

  0% {

    opacity: 0.25; }

  30% {

    opacity: 1; }

  100% {

    opacity: 0.25; } }

/*******************

FIN Preloader

********************/

/* INDEX */

.img-profile-dropmenu {

  margin-bottom: 10px;

  border-radius: 10px;

  width: 80px;

  height: 80px;

  background-size: cover;

  background-position: center;

}



.img-profile-index {

  border-radius: 10px;

  width: 70px;

  height: 70px;

  background-size: cover;

  background-position: center;

}

.img-profile-editidex{

    display: flex;

    width: 10%;

    

    justify-content: center;

    align-items: center;

}

.img-profile-editidex :hover{

    cursor: pointer;

}

.info-user-name{

    display: flex;

    justify-content: center;

    width: 50%;

    align-items: center;

    text-align: center;

}

.widget-stats-title {

    font-size: 1rem;

    font-weight: 600;

    color: #a1a5b5;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}





.img-background {

  display: flex;

  flex-direction: row;

  justify-content: space-evenly;

  align-items: center;

  padding: 5px 5px;

  background-image: url("../images/index/Klyns1.png");

  background-size: cover;

  background-position: center;

  height: 150px;

  width: 100%;

  border-radius: 10px;

}



.info-user-welcome {

  display: flex;

  background-color: white;

  height: 100%;

  width: 100%;

  border-radius: 10px;

  padding: 25px 30px;

}



/* FIN INDEX */

/* ============================================= */
/* SIDEBAR MENU - YELLOW INDICATOR EFFECTS     */
/* Solo subcategorías - fondo: #fff9e6, letras: #ffc407 */
/* ============================================= */

/* Sub-menu items (subcategorías) */
.app-sidebar .app-menu .sub-menu li {
  position: relative;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  margin-left: 0;
}

.app-sidebar .app-menu .sub-menu li:hover {
  border-left: 3px solid #ffc407 !important;
  background-color: #fff9e6 !important;
}

.app-sidebar .app-menu .sub-menu li:hover > a {
  color: #ffc407 !important;
}

.app-sidebar .app-menu .sub-menu li.active {
  border-left: 3px solid #ffc407 !important;
  background-color: #fff9e6 !important;
}

.app-sidebar .app-menu .sub-menu li.active > a {
  color: #ffc407 !important;
  font-weight: 500 !important;
}

/* Contenedor de submenus - fondo modo claro */
.app-sidebar .app-menu .sub-menu {
  background-color: #f5f7fa !important;
}

/* ============================================= */

/* =============================================
   DARK MODE - Modo Oscuro
   Activar con clase "dark-mode" en el body
   Colores: Fondo #121212, Sidebar/Navbar #1e1e1e, Acento #ffc407
   ============================================= */

/* Variables del modo oscuro */
body.dark-mode {
  --dm-bg-primary: #121212;
  --dm-bg-secondary: #1e1e1e;
  --dm-bg-card: #252525;
  --dm-bg-input: #2a2a2a;
  --dm-text-primary: #e8e8e8;
  --dm-text-secondary: #a0a0a0;
  --dm-border: #333333;
  --dm-accent: #ffc407;
  --dm-accent-hover: #e6b200;
}

/* ── Body y Wrapper Principal ── */
body.dark-mode,
body.dark-mode .app-wrapper {
  background-color: var(--dm-bg-primary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .app-container {
  background-color: var(--dm-bg-primary) !important;
}

/* ── Sidebar ── */
body.dark-mode .app-sidebar {
  background-color: var(--dm-bg-secondary) !important;
  border-right: 1px solid var(--dm-border) !important;
}

body.dark-mode .app-sidebar .logo {
  background-color: var(--dm-bg-secondary) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .app-sidebar .logo .logo-text {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .app-sidebar .app-menu .accordion-menu > li > a {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .app-sidebar .app-menu .accordion-menu > li > a:hover {
  color: var(--dm-accent) !important;
  background-color: rgba(255, 196, 7, 0.1) !important;
}

body.dark-mode .app-sidebar .app-menu .accordion-menu > li > a i {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .app-sidebar .app-menu .accordion-menu > li > a:hover i {
  color: var(--dm-accent) !important;
}

body.dark-mode .app-sidebar .app-menu .sub-menu {
  background-color: var(--dm-bg-primary) !important;
}

body.dark-mode .app-sidebar .app-menu .sub-menu li > a {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .app-sidebar .app-menu .sub-menu li:hover {
  background-color: rgba(255, 196, 7, 0.15) !important;
}

body.dark-mode .app-sidebar .app-menu .sub-menu li:hover > a {
  color: var(--dm-accent) !important;
}

body.dark-mode .app-sidebar .app-menu .sub-menu li.active {
  background-color: rgba(255, 196, 7, 0.2) !important;
}

/* ── Header / Navbar ── */
body.dark-mode .app-header,
body.dark-mode .app-header .navbar,
body.dark-mode .app-header nav,
body.dark-mode .app-header nav.navbar {
  background-color: var(--dm-bg-secondary) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .app-header .container-fluid {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .app-header .navbar-nav .nav-link {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .app-header .navbar-nav .nav-link:hover {
  color: var(--dm-accent) !important;
}

body.dark-mode .app-header .navbar-nav .nav-link i {
  color: var(--dm-text-primary) !important;
}

/* ── Cards y Paneles ── */
body.dark-mode .card,
body.dark-mode .widget,
body.dark-mode .panel {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .card-header {
  background-color: var(--dm-bg-secondary) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .card-body {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .card-footer {
  background-color: var(--dm-bg-secondary) !important;
  border-top: 1px solid var(--dm-border) !important;
}

body.dark-mode .card-title,
body.dark-mode .card-text {
  color: var(--dm-text-primary) !important;
}

/* ── Formularios ── */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode textarea {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-accent) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 196, 7, 0.25) !important;
}

body.dark-mode .form-label,
body.dark-mode label {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .form-check-label {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .input-group-text {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* ── Select2 Dark Mode ── */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .select2-dropdown {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .select2-container--default .select2-results__option {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--dm-accent) !important;
  color: #1a1a2e !important;
}

body.dark-mode .select2-search__field {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
}

/* ── Tablas ── */
body.dark-mode .table {
  color: var(--dm-text-primary) !important;
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .table thead th {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .table tbody tr {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .table tbody tr:nth-of-type(odd) {
  background-color: var(--dm-bg-primary) !important;
}

body.dark-mode .table tbody tr:hover {
  background-color: rgba(255, 196, 7, 0.08) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .table td,
body.dark-mode .table th {
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .table-bordered {
  border-color: var(--dm-border) !important;
}

/* ── DataTables Dark Mode ── */
body.dark-mode .dataTables_wrapper {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* Paginación DataTables - MODO CLARO */
div.dataTables_wrapper div.dataTables_paginate {
  padding-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

/* Paginación DataTables — Neutralizar .paginate_button para que solo .page-link controle el diseño */
div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  padding: 0 !important;
  margin: 0 3px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Paginación DataTables - MODO OSCURO (neutralizado, .page-link controla el diseño) */
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  padding: 0 !important;
  margin: 0 3px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled,
body.dark-mode div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ── Syncfusion Grid Dark Mode ── */
body.dark-mode .e-grid {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-gridheader {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .e-grid .e-headercell {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

/* Syncfusion Grid - MODO CLARO */
.e-grid .e-content {
  background-color: #fff !important;
}

.e-grid .e-rowcell {
  background-color: #fff !important;
  color: #333 !important;
  border-color: #e0e0e0 !important;
}

.e-grid .e-row:hover .e-rowcell {
  background-color: #f5f5f5 !important;
}

.e-grid .e-altrow .e-rowcell {
  background-color: #fafafa !important;
}

.e-grid .e-altrow:hover .e-rowcell {
  background-color: #f0f0f0 !important;
}

/* Paginación Syncfusion - MODO CLARO */
.e-pager .e-numericitem,
.e-pager .e-prevpagenav,
.e-pager .e-nextpagenav,
.e-pager .e-firstpagenav,
.e-pager .e-lastpagenav,
.e-pager .e-pagercontainer .e-link {
  color: #333 !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  min-width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  text-align: center !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

.e-pager .e-numericitem:hover,
.e-pager .e-prevpagenav:hover,
.e-pager .e-nextpagenav:hover {
  background-color: #f5f5f5 !important;
  border-color: #ccc !important;
  color: #333 !important;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #1f1f1f !important;
  font-weight: 600 !important;
}

.e-pager .e-disable,
.e-pager .e-disable:hover {
  color: #999 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Syncfusion Grid - MODO OSCURO */
body.dark-mode .e-grid .e-content {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .e-grid .e-rowcell {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-row:hover .e-rowcell {
  background-color: rgba(255, 196, 7, 0.08) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .e-grid .e-altrow .e-rowcell {
  background-color: var(--dm-bg-primary) !important;
}

body.dark-mode .e-grid .e-altrow:hover .e-rowcell {
  background-color: rgba(255, 196, 7, 0.08) !important;
  color: var(--dm-text-primary) !important;
}

/* Paginación Syncfusion - MODO OSCURO */
body.dark-mode .e-pager {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-pager .e-pagercontainer {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .e-pager .e-numericitem,
body.dark-mode .e-pager .e-prevpagenav,
body.dark-mode .e-pager .e-nextpagenav,
body.dark-mode .e-pager .e-firstpagenav,
body.dark-mode .e-pager .e-lastpagenav,
body.dark-mode .e-pager .e-pagercontainer .e-link {
  color: #e0e0e0 !important;
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  min-width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  text-align: center !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

body.dark-mode .e-pager .e-numericitem:hover,
body.dark-mode .e-pager .e-prevpagenav:hover,
body.dark-mode .e-pager .e-nextpagenav:hover {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
  color: #fff !important;
}

body.dark-mode .e-pager .e-currentitem,
body.dark-mode .e-pager .e-currentitem:hover {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #1a1a2e !important;
  font-weight: 600 !important;
}

body.dark-mode .e-pager .e-disable,
body.dark-mode .e-pager .e-disable:hover {
  color: #666 !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #1a1a1a !important;
}

body.dark-mode .e-grid .e-pager {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-pagercontainer {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .e-grid .e-toolbar {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-toolbar-item .e-tbar-btn {
  background-color: transparent !important;
  color: var(--dm-text-primary) !important;
}

/* ── Modales ── */
body.dark-mode .modal-content {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .modal-header {
  background-color: var(--dm-bg-secondary) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .modal-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .modal-body {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .modal-footer {
  background-color: var(--dm-bg-secondary) !important;
  border-top: 1px solid var(--dm-border) !important;
}

body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Dropdowns ── */
body.dark-mode .dropdown-menu {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .dropdown-item {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: rgba(255, 196, 7, 0.15) !important;
  color: var(--dm-accent) !important;
}

body.dark-mode .dropdown-divider {
  border-color: var(--dm-border) !important;
}

/* ── Tabs y Nav ── */
body.dark-mode .nav-tabs {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .nav-tabs .nav-link {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
  border-color: var(--dm-border) !important;
  color: var(--dm-accent) !important;
}

body.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important;
  color: var(--dm-accent) !important;
}

body.dark-mode .tab-content {
  background-color: var(--dm-bg-card) !important;
}

/* ── Badges ── */
body.dark-mode .badge.bg-secondary {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .badge.bg-light {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
}

/* ── Alerts ── */
body.dark-mode .alert {
  border-color: var(--dm-border) !important;
}

body.dark-mode .alert-info {
  background-color: rgba(255, 196, 7, 0.15) !important;
  color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
}

body.dark-mode .alert-warning {
  background-color: rgba(255, 196, 7, 0.2) !important;
  color: var(--dm-accent) !important;
}

body.dark-mode .alert-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
}

body.dark-mode .alert-success {
  background-color: rgba(40, 167, 69, 0.2) !important;
}

/* ── List Groups ── */
body.dark-mode .list-group-item {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .list-group-item:hover {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .list-group-item.active {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #1a1a2e !important;
}

/* ── Breadcrumb ── */
body.dark-mode .breadcrumb {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .breadcrumb-item a {
  color: var(--dm-accent) !important;
}

body.dark-mode .breadcrumb-item.active {
  color: var(--dm-text-secondary) !important;
}

/* ── Pagination ── */
body.dark-mode .page-link {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
  min-width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
}

body.dark-mode .page-link:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #666 !important;
}

body.dark-mode .page-item.active .page-link {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4) !important;
}

body.dark-mode .page-item.disabled .page-link {
  background-color: #1a1a1a !important;
  color: #555 !important;
  border-color: #333 !important;
  opacity: 0.7 !important;
}

/* ── Textos y Títulos ── */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: var(--dm-text-primary) !important;
}

body.dark-mode p,
body.dark-mode span:not(.badge),
body.dark-mode div {
  color: inherit;
}

body.dark-mode .text-muted {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .text-dark {
  color: var(--dm-text-primary) !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--dm-accent) !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--dm-accent-hover) !important;
}

/* ── Scrollbars ── */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-bg-primary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-accent);
}

/* ── Preloader Dark Mode ── */
body.dark-mode .preloader {
  background: var(--dm-bg-primary) !important;
}

/* ── Componentes específicos del sistema ── */
body.dark-mode .info-user-welcome {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .img-background {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .widget-stats-title {
  color: var(--dm-text-secondary) !important;
}

/* ── SweetAlert2 Dark Mode ── */
body.dark-mode .swal2-popup {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .swal2-title {
  color: var(--dm-text-primary) !important;
}

body.dark-mode .swal2-html-container {
  color: var(--dm-text-secondary) !important;
}

body.dark-mode .swal2-input {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* ── Accordion Dark Mode ── */
body.dark-mode .accordion-item {
  background-color: var(--dm-bg-card) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .accordion-button {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: rgba(255, 196, 7, 0.15) !important;
  color: var(--dm-accent) !important;
}

body.dark-mode .accordion-body {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

/* ── Borders generales ── */
body.dark-mode .border,
body.dark-mode [class*="border-"] {
  border-color: var(--dm-border) !important;
}

body.dark-mode .border-primary {
  border-color: var(--dm-accent) !important;
}

/* ── Botón Toggle Dark Mode (OCULTO - ahora está en el header) ── */
.dark-mode-toggle {
  display: none !important; /* Ocultar el botón flotante */
}

body.dark-mode .dark-mode-toggle {
  display: none !important; /* Asegurar que esté oculto en modo oscuro también */
}

/* ── Modo Oscuro para Login ── */
body.dark-mode .app.app-auth-sign-in {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

body.dark-mode .app-auth-background {
  background: 
    linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(45, 45, 45, 0.7) 100%), 
    url('../images/backgrounds/sign-in.svg') no-repeat !important;
  background-size: 60% !important;
  background-position: center !important;
}

body.dark-mode .app-auth-container {
  background: rgba(45, 45, 45, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 196, 7, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .auth-description {
  color: #e9ecef;
}

body.dark-mode .form-label {
  color: #e9ecef;
}

body.dark-mode .auth-forgot-password {
  color: #ffc407 !important;
}

body.dark-mode .auth-forgot-password:hover {
  color: #ffcd39 !important;
}

body.dark-mode .modal-content {
  background-color: #2d2d2d;
  border: 1px solid rgba(255, 196, 7, 0.2);
}

body.dark-mode .modal-header {
  border-bottom: 1px solid rgba(255, 196, 7, 0.2);
}

body.dark-mode .modal-footer {
  border-top: 1px solid rgba(255, 196, 7, 0.2);
}

/* ── Botón Modo Oscuro Móvil ── */
#darkModeToggleMobile {
  border-color: #ffc407;
  color: #ffc407;
  transition: all 0.3s ease;
}

#darkModeToggleMobile:hover {
  background-color: #ffc407;
  border-color: #ffc407;
  color: #333;
}

body.dark-mode #darkModeToggleMobile {
  border-color: #ffc407;
  color: #ffc407;
  background-color: transparent;
}

body.dark-mode #darkModeToggleMobile:hover {
  background-color: #ffc407;
  border-color: #ffc407;
  color: #333;
}

/* ── Header/Navbar - Forzar colores oscuros ── */
body.dark-mode .app-header,
body.dark-mode .app-header *,
body.dark-mode div.app-header,
body.dark-mode .app-header .navbar,
body.dark-mode .app-header .navbar-light,
body.dark-mode .app-header .navbar-expand,
body.dark-mode .navbar.navbar-light.navbar-expand {
  background-color: #1e1e1e !important;
}

body.dark-mode .app-header .navbar {
  background: #1e1e1e !important;
  border-bottom: 1px solid #333333 !important;
}

body.dark-mode .app-header .d-flex,
body.dark-mode .app-header .navbar-nav,
body.dark-mode .app-header #navbarNav {
  background-color: transparent !important;
}

body.dark-mode .app-header .dropdown-menu {
  background-color: #252525 !important;
  border-color: #333333 !important;
}

body.dark-mode .app-header .dropdown-item {
  color: #e8e8e8 !important;
}

body.dark-mode .app-header .dropdown-item:hover {
  background-color: rgba(255, 196, 7, 0.15) !important;
  color: #ffc407 !important;
}

body.dark-mode .app-header .dropdown-header {
  color: #a0a0a0 !important;
}

/* ── App Header ::before pseudo-elemento ── */
body.dark-mode .app-header::before {
  background-color: #1e1e1e !important;
  background: #1e1e1e !important;
}

/* =============================================
   CORRECCIONES ESPECÍFICAS MODO OSCURO
   ============================================= */

/* ── Botones de Paginación Bootstrap (Directorio, Capacitacion, etc.) ── */
body.dark-mode .pagination .page-link {
  background-color: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
  min-width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

body.dark-mode .pagination .page-link:hover {
  background-color: #3a3a3a !important;
  border-color: #666 !important;
  color: #fff !important;
}

body.dark-mode .pagination .page-item.active .page-link {
  background-color: #ffc407 !important;
  border-color: #ffc407 !important;
  color: #1a1a2e !important;
}

body.dark-mode .pagination .page-item.disabled .page-link {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
  color: #555 !important;
  opacity: 0.7 !important;
}

/* ── Syncfusion Grid - Mejoras Completas ── */

/* Search Input / Buscador */
body.dark-mode .e-grid .e-toolbar .e-input-group,
body.dark-mode .e-grid .e-toolbar .e-input-group input,
body.dark-mode .e-grid .e-input-group,
body.dark-mode .e-grid .e-input-group input.e-input,
body.dark-mode .e-grid .e-toolbar .e-input,
body.dark-mode .e-grid .e-filterbar .e-input-group input,
body.dark-mode .e-input-group input.e-input,
body.dark-mode .e-input-group.e-input-focus input.e-input {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
}

body.dark-mode .e-grid .e-toolbar .e-input-group .e-input-group-icon,
body.dark-mode .e-grid .e-input-group .e-input-group-icon,
body.dark-mode .e-input-group .e-input-group-icon {
  background-color: #2d2d2d !important;
  color: #a0a0a0 !important;
  border-color: #404040 !important;
}

body.dark-mode .e-grid .e-toolbar .e-search-icon,
body.dark-mode .e-grid .e-search-icon::before {
  color: #a0a0a0 !important;
}

/* Pager / Botones de Paginación Syncfusion */
body.dark-mode .e-grid .e-pager .e-numericitem,
body.dark-mode .e-grid .e-pager .e-numericcontainer a,
body.dark-mode .e-pager .e-numericitem,
body.dark-mode .e-pager .e-link,
body.dark-mode .e-pager a.e-link {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
  padding: 4px 10px !important;
}

body.dark-mode .e-grid .e-pager .e-numericitem:hover,
body.dark-mode .e-grid .e-pager .e-numericcontainer a:hover,
body.dark-mode .e-pager .e-numericitem:hover,
body.dark-mode .e-pager a.e-link:hover {
  background-color: #3d3d3d !important;
  color: #ffc407 !important;
}

body.dark-mode .e-grid .e-pager .e-currentitem,
body.dark-mode .e-pager .e-currentitem,
body.dark-mode .e-pager .e-numericitem.e-currentitem {
  background-color: #ffc407 !important;
  color: #1a1a2e !important;
  border-color: #ffc407 !important;
}

/* ── Correcciones adicionales para DataTables ── */
/* Asegurar que todos los elementos de DataTables tengan fondos correctos */
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_scroll {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_scrollBody {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_scrollHead {
  background-color: var(--dm-bg-secondary) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable {
  background-color: var(--dm-bg-card) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable thead th,
body.dark-mode .dataTables_wrapper table.dataTable thead td {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody td {
  background-color: transparent !important;
  color: var(--dm-text-primary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable.stripe tbody tr.odd,
body.dark-mode .dataTables_wrapper table.dataTable.display tbody tr.odd {
  background-color: var(--dm-bg-primary) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable.stripe tbody tr.even,
body.dark-mode .dataTables_wrapper table.dataTable.display tbody tr.even {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: rgba(255, 196, 7, 0.08) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover > td {
  background-color: transparent !important;
}

/* ── Correcciones adicionales para Syncfusion Grid ── */
/* Asegurar que la búsqueda y toolbar tengan fondos correctos */
body.dark-mode .e-grid .e-toolbar {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-toolbar .e-input-group {
  background-color: var(--dm-bg-input) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .e-grid .e-toolbar .e-input-group input {
  background-color: var(--dm-bg-input) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .e-grid .e-gridcontent {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .e-grid .e-table {
  background-color: var(--dm-bg-card) !important;
}

body.dark-mode .e-grid .e-spinner-pane {
  background-color: rgba(26, 26, 30, 0.8) !important;
}

/* Botones de acciones en las tablas */
body.dark-mode .btn.btn-primary,
body.dark-mode .btn-primary {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #1f1f1f !important;
}

body.dark-mode .btn.btn-primary:hover,
body.dark-mode .btn-primary:hover {
  background-color: #ffcd38 !important;
  border-color: #ffcd38 !important;
  color: #1f1f1f !important;
}

body.dark-mode .btn.btn-secondary {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

body.dark-mode .btn.btn-secondary:hover {
  background-color: var(--dm-bg-primary) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-primary) !important;
}

/* Botones de navegación (First, Prev, Next, Last) */
body.dark-mode .e-grid .e-pager .e-first,
body.dark-mode .e-grid .e-pager .e-prev,
body.dark-mode .e-grid .e-pager .e-next,
body.dark-mode .e-grid .e-pager .e-last,
body.dark-mode .e-pager .e-first,
body.dark-mode .e-pager .e-prev,
body.dark-mode .e-pager .e-next,
body.dark-mode .e-pager .e-last,
body.dark-mode .e-pager .e-icon-first,
body.dark-mode .e-pager .e-icon-prev,
body.dark-mode .e-pager .e-icon-next,
body.dark-mode .e-pager .e-icon-last {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
}

body.dark-mode .e-grid .e-pager .e-first:hover,
body.dark-mode .e-grid .e-pager .e-prev:hover,
body.dark-mode .e-grid .e-pager .e-next:hover,
body.dark-mode .e-grid .e-pager .e-last:hover,
body.dark-mode .e-pager .e-first:hover,
body.dark-mode .e-pager .e-prev:hover,
body.dark-mode .e-pager .e-next:hover,
body.dark-mode .e-pager .e-last:hover {
  background-color: #3d3d3d !important;
  color: #ffc407 !important;
}

body.dark-mode .e-grid .e-pager .e-disable,
body.dark-mode .e-pager .e-disable {
  background-color: #1e1e1e !important;
  color: #555555 !important;
  border-color: #333333 !important;
}

/* Pager container y dropdown */
body.dark-mode .e-grid .e-pager .e-pagesizes,
body.dark-mode .e-pager .e-pagesizes,
body.dark-mode .e-pager .e-pagerdropdown {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
}

body.dark-mode .e-grid .e-pager .e-pagerconstant,
body.dark-mode .e-pager .e-pagerconstant,
body.dark-mode .e-pager .e-parentmsgbar {
  color: #a0a0a0 !important;
}

/* Hover de filas - REDUCIR BRILLO */
body.dark-mode .e-grid .e-row:hover .e-rowcell,
body.dark-mode .e-grid .e-row.e-hover .e-rowcell,
body.dark-mode .e-grid tr.e-row:hover td.e-rowcell {
  background-color: rgba(255, 196, 7, 0.08) !important;
}

/* Filas alternas más sutiles */
body.dark-mode .e-grid .e-altrow .e-rowcell {
  background-color: #1a1a1a !important;
}

/* ── DataTables - Mejoras Completas ── */

/* Buscador DataTables */
body.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border: 1px solid #404040 !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #ffc407 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 196, 7, 0.2) !important;
}

body.dark-mode .dataTables_wrapper .dataTables_filter input::placeholder {
  color: #888888 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border: 1px solid #404040 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Botones de Paginación DataTables (neutralizado — .page-link controla) */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 3px !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Hover de filas DataTables - REDUCIR BRILLO */
body.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: rgba(255, 196, 7, 0.08) !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover td {
  background-color: rgba(255, 196, 7, 0.08) !important;
}

/* Filas alternas DataTables */
body.dark-mode .dataTables_wrapper table.dataTable tbody tr.odd {
  background-color: #1a1a1a !important;
}

body.dark-mode .dataTables_wrapper table.dataTable tbody tr.even {
  background-color: #252525 !important;
}

/* Header de tabla DataTables */
body.dark-mode .dataTables_wrapper table.dataTable thead th {
  background-color: #1e1e1e !important;
  color: #e8e8e8 !important;
  border-bottom: 2px solid #404040 !important;
}

/* Texto informativo DataTables */
body.dark-mode .dataTables_wrapper .dataTables_info {
  color: #a0a0a0 !important;
}

/* ── Botones de Paginación Personalizados (btn-outline) ── */
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-primary {
  background-color: #2d2d2d !important;
  color: #e8e8e8 !important;
  border-color: #404040 !important;
}

body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-primary:hover {
  background-color: #3d3d3d !important;
  color: #ffc407 !important;
  border-color: #ffc407 !important;
}

/* ── Tabs (nav-tabs) en modo oscuro ── */
body.dark-mode .nav-tabs .nav-link {
  color: #a0a0a0 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
  color: #ffc407 !important;
  border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link.active {
  color: #ffc407 !important;
  background-color: transparent !important;
  border-bottom: 2px solid #ffc407 !important;
}

/* ============================================= */

/* ── Alineación header + logo en pantallas medianas ──
   A ≤1199px el sidebar se oculta y el logo flota en fixed:
   net position = sidebar(-280px) + logo-transform(+310px) = left:30px, width:280px → termina en 310px
   El header debe empezar justo después con un gap de 10px → left:320px
   También se fija top:30px explícito para que queden alineados verticalmente.
------------------------------------------------- */
@media (max-width: 1199px) {
  .app-header {
    top: 30px !important;
    left: 320px !important;
    width: calc(100% - 350px) !important;
  }
}

/* En dark mode, la logo flotante también usa fondo oscuro */
@media (max-width: 1199px) {
  body.dark-mode .app-sidebar .logo {
    background-color: #1e1e1e !important;
  }
  body.dark-mode .app-header .navbar {
    background-color: #1e1e1e !important;
  }
}

/* ── Móvil pequeño (≤600px): header full-width, logo flotante oculto ──
   Evita que el header quede demasiado angosto y los iconos se salgan.
   El logo del sidebar se oculta para no interferir con el header.
------------------------------------------------- */
@media (max-width: 600px) {
  .app-header,
  .app.menu-off-canvas .app-header,
  .header-transaprent .app-header {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    right: 0 !important;
  }
  .app-header .navbar {
    border-radius: 0 !important;
  }
  /* Ocultar el logo flotante del sidebar en móvil — no cabe */
  .app-sidebar .logo,
  .app.sidebar-hidden .app-sidebar .logo.hidden-sidebar-logo {
    display: none !important;
  }
  /* Dar espacio superior al contenido para que no quede bajo el header fijo */
  .app-container {
    padding-top: 80px !important;
  }
}

/* =============================================
   MODAL DETALLE VACANTES - MODO OSCURO
   ============================================= */

/* ── Secciones de detalle ── */
body.dark-mode .detail-section {
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  color: #e8e8e8 !important;
}

body.dark-mode .detail-section h6 {
  color: #ffffff !important;
  border-bottom-color: #555 !important;
}

/* ── Items de requisitos, evaluaciones e inducciones ── */
body.dark-mode .requisito-item,
body.dark-mode .evaluacion-item, 
body.dark-mode .induccion-item {
  background-color: #333333 !important;
  border-color: #555 !important;
  color: #e8e8e8 !important;
}

body.dark-mode .requisito-item:hover,
body.dark-mode .evaluacion-item:hover,
body.dark-mode .induccion-item:hover {
  background-color: #3a3a3a !important;
}

/* ── Formularios de agregar dentro del modal de detalle ── */
body.dark-mode #formAddRequisito,
body.dark-mode #formAddEvaluacion,
body.dark-mode #formAddInduccion {
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  padding: 15px !important;
  border-radius: 8px !important;
}

body.dark-mode #formAddRequisito .form-control,
body.dark-mode #formAddEvaluacion .form-control,
body.dark-mode #formAddInduccion .form-control,
body.dark-mode #formAddRequisito .form-select,
body.dark-mode #formAddEvaluacion .form-select,
body.dark-mode #formAddInduccion .form-select {
  background-color: #333333 !important;
  border-color: #555 !important;
  color: #e8e8e8 !important;
}

/* ── Textos específicos del modal de detalle ── */
body.dark-mode #modalDetalleVacante .text-muted {
  color: #a0a0a0 !important;
}

body.dark-mode #modalDetalleVacante .text-center {
  color: #e8e8e8 !important;
}

body.dark-mode #modalDetalleVacante p {
  color: #e8e8e8 !important;
}

body.dark-mode #modalDetalleVacante strong {
  color: #ffffff !important;
}

/* ── Select2 específico para modal detalle ── */
body.dark-mode #modalDetalleVacante .select2-container--default .select2-selection--single {
  background-color: #333333 !important;
  border-color: #555 !important;
}

body.dark-mode #modalDetalleVacante .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e8e8e8 !important;
}

body.dark-mode #modalDetalleVacante .select2-dropdown {
  background-color: #2a2a2a !important;
  border-color: #555 !important;
}

body.dark-mode #modalDetalleVacante .select2-container--default .select2-results__option {
  color: #e8e8e8 !important;
  background-color: #2a2a2a !important;
}

body.dark-mode #modalDetalleVacante .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ffc407 !important;
  color: #1a1a2e !important;
}