/* SIGAP visual refresh
 * Capa de overrides propia del proyecto.
 * No modifica Bootstrap, Font Awesome ni librerias de terceros.
 */
:root {
  --sigap-primary: #8c1d40;
  --sigap-primary-dark: #691c32;
  --sigap-primary-hover: #a3234a;
  --sigap-primary-soft: #f3e7eb;
  --sigap-accent: #bc955c;
  --sigap-accent-soft: #eadcc8;
  --sigap-sidebar: #34383d;
  --sigap-sidebar-alt: #3e4349;
  --sigap-text: #343a40;
  --sigap-muted: #6c757d;
  --sigap-bg: #f5f6f8;
  --sigap-border: #e1e5e9;
  --sigap-white: #ffffff;
  --sigap-success: #3f7d62;
  --sigap-danger: #a53a4c;
  --sigap-info: #526e82;
  --sigap-warning: #a97935;
  --sigap-font: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.navbar,
.menu,
.table {
  font-family: var(--sigap-font) !important;
}

body {
  color: var(--sigap-text);
  background: var(--sigap-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.title-menu {
  font-family: var(--sigap-font) !important;
  letter-spacing: -0.015em;
}

/* ===== Encabezado ===== */
#header.header {
  background: var(--sigap-white);
  border-bottom: 1px solid var(--sigap-border);
  box-shadow: 0 2px 12px rgba(22, 28, 35, .06);
}

#header .menutoggle,
#header .btn-menu {
  color: var(--sigap-primary) !important;
  border-radius: 8px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

#header .menutoggle:hover,
#header .btn-menu:hover {
  background: var(--sigap-primary-soft);
  color: var(--sigap-primary-dark) !important;
}

/* ===== Sidebar ===== */
#left-panel,
#left-panel .navbar,
#left-panel .contenedor-menu,
#left-panel .menu {
  background: var(--sigap-sidebar) !important;
}

#left-panel {
  border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 5px 0 18px rgba(21, 25, 29, .10);
}

#left-panel .menu > li.contenedor-logos > a.title-menu {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  color: #f2f3f4 !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .012em;
  border-left: 3px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#left-panel .menu > li.contenedor-logos > a.title-menu:hover {
  background: rgba(255,255,255,.055) !important;
}

#left-panel .menu > li.contenedor-logos.activado > a.title-menu,
#left-panel .menu > li.contenedor-logos.admin.activado > a.title-menu,
#left-panel .menu > li.contenedor-logos.apps.activado > a.title-menu {
  background: var(--sigap-primary) !important;
  border-left-color: var(--sigap-accent);
  color: var(--sigap-white) !important;
}

#left-panel .title-menu > .logo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 8px;
  color: var(--sigap-accent) !important;
  background: rgba(255,255,255,.075);
  font-size: 15px !important;
}

#left-panel .contenedor-logos.activado > .title-menu > .logo {
  color: #fff3df !important;
  background: rgba(255,255,255,.12);
}

#left-panel .derecha {
  margin-left: auto !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
}

#left-panel .Nivel1,
#left-panel .Nivel2 {
  background: var(--sigap-sidebar-alt) !important;
}

#left-panel .Nivel2 {
  background: #393e43 !important;
}

#left-panel .Nivel1 > li > a,
#left-panel .Nivel2 > li > a {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px !important;
  color: #e7e9eb !important;
  background: transparent !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  border-left: 3px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

#left-panel .Nivel2 > li > a {
  padding-left: 48px !important;
  color: #d9dde0 !important;
}

#left-panel .Nivel1 > li > a:hover,
#left-panel .Nivel2 > li > a:hover {
  background: rgba(140,29,64,.28) !important;
  color: var(--sigap-white) !important;
  border-left-color: rgba(188,149,92,.85);
}

#left-panel .Nivel1 > li > a[aria-current="page"],
#left-panel .Nivel2 > li > a[aria-current="page"],
#left-panel .Nivel1 > li.activo > a,
#left-panel .Nivel2 > li.activo > a {
  background: rgba(140,29,64,.42) !important;
  color: var(--sigap-white) !important;
  border-left-color: var(--sigap-accent);
}

#left-panel .Nivel1 .logo,
#left-panel .Nivel1 .izquierda {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 7px;
  background: rgba(255,255,255,.075);
  color: var(--sigap-accent) !important;
  font-size: 13px !important;
}

/* ===== Contenido, tablas y formularios ===== */
.content,
.card,
.modal-content {
  color: var(--sigap-text);
}

.card,
.modal-content {
  border-color: var(--sigap-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(34, 40, 46, .055);
}

thead,
table.dataTable thead th,
table.dataTable thead td {
  background: var(--sigap-primary) !important;
  color: var(--sigap-white) !important;
  border-color: var(--sigap-primary-dark) !important;
}

table.dataTable tbody tr:hover,
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  background: var(--sigap-primary-soft) !important;
}

.form-control:focus,
.input-field:focus {
  border-color: var(--sigap-primary) !important;
  box-shadow: 0 0 0 .16rem rgba(140,29,64,.13) !important;
  outline: 0;
}

.icon,
.input-container .icon {
  background: var(--sigap-primary) !important;
  color: var(--sigap-white) !important;
}

.btn-new,
.app-color,
.app,
.btn-primary {
  background-color: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
  color: #ffffff !important;
}

.btn-new:hover,
.app-color:hover,
.app:hover,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--sigap-primary-dark) !important;
  border-color: var(--sigap-primary-dark) !important;
  color: var(--sigap-white) !important;
}

.list-group-item.active {
  background-color: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
}

.dua,
.amN2 {
  background: var(--sigap-accent-soft) !important;
  color: #4a3a27 !important;
}

.dua:hover {
  background: #dfc9a9 !important;
}

/* ===== Iconografia semantica ===== */
.fa-check-circle,
.fa-check-circle-o,
.fa-check-square,
.fa-check-square-o {
  color: var(--sigap-success);
}

.fa-times-circle,
.fa-times-circle-o,
.fa-exclamation-circle,
.fa-ban {
  color: var(--sigap-danger);
}

.fa-info-circle,
.fa-question-circle {
  color: var(--sigap-info);
}

.fa-exclamation-triangle,
.fa-warning {
  color: var(--sigap-warning);
}

/* Evita que la regla semantica cambie iconos dentro del sidebar. */
#left-panel .fa {
  text-shadow: none;
}

#left-panel .fa-check-circle,
#left-panel .fa-check-circle-o,
#left-panel .fa-check-square,
#left-panel .fa-check-square-o,
#left-panel .fa-times-circle,
#left-panel .fa-times-circle-o,
#left-panel .fa-exclamation-circle,
#left-panel .fa-ban,
#left-panel .fa-info-circle,
#left-panel .fa-question-circle,
#left-panel .fa-exclamation-triangle,
#left-panel .fa-warning {
  color: var(--sigap-accent) !important;
}

/* ===== Utilidades existentes ===== */
.fw {
  font-family: var(--sigap-font) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.azul { color: var(--sigap-info) !important; }
.rojo { color: var(--sigap-danger) !important; }
/* .verde se conserva como estado positivo, no como color institucional. */
.verde { color: var(--sigap-success) !important; }

/* Loader: reemplaza el verde institucional heredado por vino. */
#loader,
#loader::before,
#loader::after {
  border-top-color: var(--sigap-primary) !important;
}

/* Compacto: mantiene iconos legibles y consistentes. */
body.sigap-sidebar-compact #left-panel .title-menu > .logo,
body.sigap-sidebar-compact #left-panel .Nivel1 .logo,
body.sigap-sidebar-compact #left-panel .Nivel1 .izquierda {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 575px) {
  #left-panel .menu > li.contenedor-logos > a.title-menu {
    min-height: 46px;
  }

  #left-panel .Nivel1 > li > a,
  #left-panel .Nivel2 > li > a {
    min-height: 40px;
  }
}

/* =========================================================
   Refinamiento tipografico del menu lateral
   Mantiene Font Awesome intacto y estiliza solo el texto.
   ========================================================= */
#left-panel .contenedor-menu a,
#left-panel .menu a,
#left-panel .Nivel1 a,
#left-panel .Nivel2 a,
#left-panel .title-menu {
  font-family: var(--sigap-font) !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Encabezados principales: Sistemas / Administracion */
#left-panel .menu > li.contenedor-logos > a.title-menu {
  color: #f7f4f5 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .018em !important;
  line-height: 1.35 !important;
}

/* Primer nivel: Usuarios, Empresas, Areas, aplicaciones, etc. */
#left-panel .Nivel1 > li > a {
  color: #f0edef !important;
  font-size: 12.75px !important;
  font-weight: 500 !important;
  letter-spacing: .008em !important;
  line-height: 1.35 !important;
}

/* Segundo nivel: opciones internas de cada sistema. */
#left-panel .Nivel2 > li > a {
  color: #ddd9dc !important;
  font-size: 12.25px !important;
  font-weight: 400 !important;
  letter-spacing: .006em !important;
  line-height: 1.4 !important;
}

/* Hover: aumenta contraste sin convertir todo el renglon en blanco agresivo. */
#left-panel .Nivel1 > li > a:hover,
#left-panel .Nivel2 > li > a:hover {
  color: #ffffff !important;
}

/* Seleccion actual: un poco mas de peso para orientar visualmente. */
#left-panel .Nivel1 > li > a[aria-current="page"],
#left-panel .Nivel2 > li > a[aria-current="page"],
#left-panel .Nivel1 > li.activo > a,
#left-panel .Nivel2 > li.activo > a {
  color: #fffafc !important;
  font-weight: 600 !important;
}

/*
 * IMPORTANTE: .fa debe seguir usando la fuente FontAwesome.
 * Esta regla impide que la tipografia general del reskin la sustituya.
 */
#left-panel .fa,
.fa {
  font-family: FontAwesome !important;
  font-style: normal;
  font-weight: normal;
}

/* Iconos de navegacion: dorado uniforme y menos saturado. */
#left-panel .logo.fa,
#left-panel i.fa {
  color: var(--sigap-accent) !important;
}

/* Flechas de acordeon: neutras para no competir con el icono principal. */
#left-panel .derecha.fa,
#left-panel .fa-chevron-right,
#left-panel .fa-chevron-down {
  color: #ebe7e9 !important;
}

/* =========================================================
   LOADER SIGAP - identidad institucional
   Imagen independiente; no altera logo-gris de notificaciones.
   ========================================================= */
#loader img,
#myloader img {
  position: relative !important;
  z-index: 2;
  width: clamp(60px, 17vw, 91px) !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(19, 39, 42, .14));
  animation: sigap-loader-pulse 1.65s ease-in-out infinite;
}

#loader.lds-dual-ring,
#myloader.lds-dual-ring {
  width: 270px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loader.lds-dual-ring::after,
#myloader.lds-dual-ring::after {
  position: absolute;
  width: 100px;
  height: 100px;
  margin: 0;
  border-width: 3px;
  border-color: rgba(140, 29, 64, .55) rgba(188, 149, 92, .18) rgba(140, 29, 64, .55) rgba(188, 149, 92, .18);
  box-shadow: 0 0 0 1px rgba(140, 29, 64, .035);
  animation-duration: 1.8s;
}

@keyframes sigap-loader-pulse {
  0%, 100% { transform: scale(.97); opacity: .88; }
  50% { transform: scale(1); opacity: 1; }
}

@media (max-width: 575.98px) {
  #loader.lds-dual-ring,
  #myloader.lds-dual-ring {
    width: 210px;
    height: 210px;
  }
  #loader.lds-dual-ring::after,
  #myloader.lds-dual-ring::after {
    width: 188px;
    height: 188px;
  }
  #loader img,
  #myloader img {
    width: 140px !important;
  }
}

/* =========================================================
   CATALOGO DE APLICACIONES
   Pulido visual sin cambiar DataTables ni su logica.
   ========================================================= */
#tblAplicaciones {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif;
}

#tblAplicaciones thead th {
  padding: 11px 14px !important;
  font-size: 12.5px;
  font-weight: 600 !important;
  letter-spacing: .025em;
  vertical-align: middle;
}

#tblAplicaciones tbody td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #e8eaed !important;
  color: #303840;
  line-height: 1.45;
}

#tblAplicaciones tbody tr {
  background: #fff;
  transition: background-color .16s ease, box-shadow .16s ease;
}

#tblAplicaciones tbody tr:hover,
#tblAplicaciones tbody tr:hover > .sorting_1 {
  background: #faf6f7 !important;
}

/* Abreviatura / identificador principal */
#tblAplicaciones tbody td:first-child > span.fw:first-child {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--sigap-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .018em;
}

/* Ruta de la aplicacion */
#tblAplicaciones tbody td:first-child > span.fw:last-child {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f2f4f6;
  color: #66717a !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

/* Tipo (WEB, etc.) como etiqueta neutra */
#tblAplicaciones td.dt-center.fw {
  color: #4f5962 !important;
  font-size: 11.5px;
  font-weight: 700 !important;
  letter-spacing: .045em;
}

#tblAplicaciones .badge {
  min-width: 62px;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  box-shadow: none !important;
}

/* Verde sólo conserva significado semántico de activo. */
#tblAplicaciones .badge.bg-success {
  background: #287455 !important;
  color: #fff !important;
}

#tblAplicaciones .badge.bg-danger {
  background: #a83a50 !important;
  color: #fff !important;
}

/* Botones de acciones más sobrios y consistentes */
#tblAplicaciones .btn.btn-sm {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border-width: 1px !important;
  box-shadow: none !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

#tblAplicaciones .btn.btn-sm:hover {
  transform: translateY(-1px);
  filter: brightness(.96);
  box-shadow: 0 4px 10px rgba(36, 42, 48, .10) !important;
}

#tblAplicaciones .btn-info {
  background: #516f80 !important;
  border-color: #516f80 !important;
  color: #fff !important;
}

#tblAplicaciones .btn-danger {
  background: #a83a50 !important;
  border-color: #a83a50 !important;
  color: #fff !important;
}

#tblAplicaciones .btn-success {
  background: #b58a4f !important;
  border-color: #b58a4f !important;
  color: #fff !important;
}

#tblAplicaciones .btn .fa {
  color: #fff !important;
  font-size: 13px !important;
}

/* DataTables - controles de esta vista */
#tblAplicaciones_wrapper .dataTables_filter input,
#tblAplicaciones_wrapper .dataTables_length select {
  min-height: 34px;
  border: 1px solid #d5dbe0;
  border-radius: 7px;
  background: #fff;
  color: #343b42;
}

#tblAplicaciones_wrapper .dataTables_filter input:focus,
#tblAplicaciones_wrapper .dataTables_length select:focus {
  border-color: var(--sigap-primary);
  box-shadow: 0 0 0 .15rem rgba(140,29,64,.11);
  outline: 0;
}

/* =========================================================
   SIGAP - Eliminacion visual del verde heredado
   Capa final: no modifica Bootstrap/Font Awesome/DataTables.
   ========================================================= */
:root {
  /* Las clases heredadas "success/verde" dejan de ser verdes visualmente. */
  --sigap-success: #8c1d40;
}

/* Titulos principales de catalogos y modales */
.card-header {
  background: #fff !important;
  border-bottom: 1px solid #e4d7dc !important;
  padding: 14px 17px !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.modal-header .modal-title {
  margin: 0 !important;
  color: var(--sigap-primary) !important;
  font-family: var(--sigap-font) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

.card-header h3::after,
.modal-header .modal-title::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--sigap-accent);
}

/* Bootstrap / estilos heredados de exito: ahora guinda institucional. */
.bg-success,
.badge.bg-success,
.text-bg-success {
  background-color: var(--sigap-primary) !important;
  color: #fff !important;
}

.text-success,
.link-success,
.verde {
  color: var(--sigap-primary) !important;
}

.border-success {
  border-color: var(--sigap-primary) !important;
}

.btn-success {
  background-color: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--sigap-primary-dark) !important;
  border-color: var(--sigap-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .15rem rgba(140, 29, 64, .13) !important;
}

/* Los botones de habilitar en tablas se distinguen con dorado, no verde. */
table.dataTable .btn-success.btn-sm,
.dt-delete.btn-success {
  background-color: var(--sigap-accent) !important;
  border-color: var(--sigap-accent) !important;
  color: #fff !important;
}

table.dataTable .btn-success.btn-sm:hover,
.dt-delete.btn-success:hover {
  background-color: #a97d43 !important;
  border-color: #a97d43 !important;
}

/* Indicadores circulares heredados; conserva la clase pero cambia la identidad visual. */
.circulo_verde {
  background: var(--sigap-accent) !important;
  box-shadow: 0 0 0 2px rgba(188,149,92,.12) !important;
}

/* Iconos positivos sin verde. */
.fa-check-circle,
.fa-check-circle-o,
.fa-check-square,
.fa-check-square-o,
.fa-check {
  color: var(--sigap-primary) !important;
}

/* Dentro de botones, el icono sigue blanco para contraste. */
.btn .fa-check,
.btn .fa-check-circle,
.btn .fa-check-circle-o,
.btn .fa-check-square,
.btn .fa-check-square-o {
  color: #fff !important;
}

/* Tarjetas de indicadores heredadas que usaban verdes. */
.flat-color-1,
.flat-color-5,
.stat-icon.flat-color-1,
.stat-icon.flat-color-5 {
  color: var(--sigap-primary) !important;
}

/* Switches de catalogos: elimina #00b140 del estado checked. */
input:checked + .slider,
input:checked + .slider.round {
  background-color: var(--sigap-primary) !important;
}

input:focus + .slider,
input:focus + .slider.round {
  box-shadow: 0 0 0 2px rgba(140,29,64,.14) !important;
}

/* Fortaleza de password: "Good" deja de ser verde. */
.Good {
  background-color: var(--sigap-accent) !important;
  color: var(--sigap-accent) !important;
}

/* Pretty Checkbox: si alguna vista usa el tema success, tambien se normaliza. */
.pretty input:checked ~ .state.p-success label::after,
.pretty.p-toggle .state.p-success label::after,
.pretty.p-switch.p-fill input:checked ~ .state.p-success::before,
.pretty.p-switch.p-slim input:checked ~ .state.p-success::before {
  background-color: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
}

.pretty input:checked ~ .state.p-success-o label::before,
.pretty.p-toggle .state.p-success-o label::before,
.pretty input:checked ~ .state.p-success-o .icon,
.pretty.p-toggle .state.p-success-o .icon {
  border-color: var(--sigap-primary) !important;
  color: var(--sigap-primary) !important;
}

/* Aplicaciones: el badge activo ya no conserva verde. */
#tblAplicaciones .badge.bg-success {
  background: var(--sigap-primary) !important;
  color: #fff !important;
}

/* Encabezados DataTables: guinda consistente y texto mas legible. */
table.dataTable thead th,
table.dataTable thead td {
  background: var(--sigap-primary) !important;
  color: #fff !important;
  font-family: var(--sigap-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

@media (max-width: 575px) {
  .card-header h1,
  .card-header h2,
  .card-header h3,
  .card-header h4,
  .modal-header .modal-title {
    font-size: 20px !important;
  }
}

/* =========================================================
   Sidebar compacto - alineacion y estados visuales
   Corrige interferencias de estilos heredados sin tocar HTML/JS.
   ========================================================= */
@media (min-width: 576px) {
  /* El color lo controla el enlace; el LI nunca debe asomarse por debajo. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos:hover,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.activado,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.admin,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.admin.activado,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.apps.activado {
    width: 83px !important;
    max-width: 83px !important;
    background: transparent !important;
  }

  /* Cada cabecera ocupa exactamente todo el ancho compacto. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu {
    box-sizing: border-box !important;
    width: 83px !important;
    min-width: 83px !important;
    max-width: 83px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: var(--sigap-sidebar) !important;
    color: var(--sigap-accent) !important;
    overflow: hidden !important;
  }

  /* Hover sobrio, sin amarillo heredado. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu:hover {
    background: var(--sigap-sidebar-alt) !important;
    color: #f0d8ad !important;
  }

  /* Seccion actualmente abierta/seleccionada. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.activado > a.title-menu,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.admin.activado > a.title-menu,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.apps.activado > a.title-menu {
    background: var(--sigap-primary) !important;
    color: #fff8f4 !important;
  }

  /* Icono perfectamente centrado: sin margenes ni line-height heredados. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu > .logo,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu > .logo.fa {
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    background: rgba(188,149,92,.12) !important;
    color: var(--sigap-accent) !important;
    font-size: 15px !important;
    text-align: center !important;
    transform: none !important;
  }

  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu:hover > .logo,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu:hover > .logo.fa {
    background: rgba(188,149,92,.18) !important;
    color: #dfbf87 !important;
  }

  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.activado > a.title-menu > .logo,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos.activado > a.title-menu > .logo.fa {
    background: rgba(255,255,255,.12) !important;
    color: #fff4df !important;
  }

  /* En compacto no deben quedar flechas/textos ocupando espacio invisible. */
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu > .derecha,
  body.sigap-sidebar-compact #left-panel .menu > li.contenedor-logos > a.title-menu > span:not(.logo) {
    display: none !important;
  }
}

/* =========================================================
   LOADER - CENTRADO REAL EN SU AREA DE DESPLIEGUE
   #myloader ocupa todo #carga-aplicacion y centra imagen + aro.
   No depende del ancho del sidebar ni de coordenadas fijas.
   ========================================================= */
#carga-aplicacion {
  position: relative !important;
  min-height: 100vh;
}

#carga-aplicacion > #myloader.myloader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  background: #fff !important;
  z-index: 50;
  overflow: hidden;
}

/* Imagen y aro comparten exactamente el mismo centro. */
#carga-aplicacion > #myloader.myloader > img {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

#carga-aplicacion > #myloader.myloader.lds-dual-ring::after {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

/* Loader general de entrada: también queda centrado al viewport. */
#loader.loader.lds-dual-ring {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
}

#loader.loader.lds-dual-ring > img,
#loader.loader.lds-dual-ring::after {
  grid-area: 1 / 1 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

#loader.loader.lds-dual-ring::after {
  position: relative !important;
  inset: auto !important;
}

/* =========================================================
   SIGAP - Verde semantico (confirmacion / habilitar)
   Excepcion intencional dentro de la paleta institucional.
   ========================================================= */
:root {
  --sigap-positive: #3f7658;
  --sigap-positive-dark: #315f47;
  --sigap-positive-soft: rgba(63,118,88,.15);
}

/* Indicador circular de relacion/estado correcto. */
.circulo_verde {
  background-color: var(--sigap-positive) !important;
  border-color: var(--sigap-positive) !important;
  box-shadow: 0 0 0 2px var(--sigap-positive-soft) !important;
}

/* Acciones de habilitar/confirmar vuelven a verde, pero en un tono sobrio. */
.btn-success,
table.dataTable .btn-success.btn-sm,
.dt-delete.btn-success {
  background-color: var(--sigap-positive) !important;
  border-color: var(--sigap-positive) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
table.dataTable .btn-success.btn-sm:hover,
.dt-delete.btn-success:hover {
  background-color: var(--sigap-positive-dark) !important;
  border-color: var(--sigap-positive-dark) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .15rem var(--sigap-positive-soft) !important;
}

/* El check dentro del boton siempre debe conservar contraste blanco. */
.btn-success .fa-check,
.btn-success .fa-check-circle,
.btn-success .fa-check-circle-o,
.btn-success .fa-check-square,
.btn-success .fa-check-square-o,
.btn-success span.fa-check {
  color: #fff !important;
}

/* =========================================================
   SIGAP - Paleta semantica de indicadores (2026-08-19)
   Total = turquesa apagado | Activo = verde sobrio | Inactivo = coral
   ========================================================= */
:root {
  --sigap-turquoise: #3f8585;
  --sigap-turquoise-dark: #326d6d;
  --sigap-coral: #c66b61;
  --sigap-coral-dark: #a9554d;
}

/* Totales / informacion general: sustituye el azul electrico heredado. */
.flat-color-3,
.stat-icon.flat-color-3 {
  color: var(--sigap-turquoise) !important;
}

/* Estados activos / correctos: verde semantico sobrio. */
.flat-color-1,
.stat-icon.flat-color-1,
.fa-check-circle,
.fa-check-circle-o,
.fa-check-square,
.fa-check-square-o,
.fa-check {
  color: var(--sigap-positive) !important;
}

/* Estados inactivos / negativos: coral suave en lugar de naranja intenso. */
.flat-color-4,
.stat-icon.flat-color-4,
.fa-times-circle,
.fa-times-circle-o,
.fa-user-times {
  color: var(--sigap-coral) !important;
}

/* Mantener contraste blanco cuando el check vive dentro de un boton. */
.btn .fa-check,
.btn .fa-check-circle,
.btn .fa-check-circle-o,
.btn .fa-check-square,
.btn .fa-check-square-o,
.circulo_verde .fa-check,
.circulo_verde .fa-check-circle {
  color: #fff !important;
}

/* En el sidebar prevalece la paleta propia del menu, no la semantica. */
#left-panel .fa-check-circle,
#left-panel .fa-check-circle-o,
#left-panel .fa-check-square,
#left-panel .fa-check-square-o,
#left-panel .fa-check,
#left-panel .fa-times-circle,
#left-panel .fa-times-circle-o,
#left-panel .fa-user-times {
  color: var(--sigap-accent) !important;
}

/* =========================================================
   CONTROL DE COLAPSADO ADHERIDO AL SIDEBAR
   El mismo #menuToggle vive ahora dentro de #left-panel.
   No duplica lógica JS ni depende del header principal.
   ========================================================= */
@media (min-width: 576px) {
  #left-panel {
    overflow-y: auto;
  }

  #left-panel .sigap-sidebar-tools {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--sigap-sidebar) !important;
    border-bottom: 1px solid rgba(255,255,255,.055);
  }

  #left-panel #menuToggle.sigap-sidebar-toggle {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 8px;
    background: rgba(255,255,255,.055) !important;
    color: var(--sigap-accent) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle:hover,
  #left-panel #menuToggle.sigap-sidebar-toggle:focus-visible {
    background: rgba(188,149,92,.15) !important;
    border-color: rgba(188,149,92,.28) !important;
    color: #efd49f !important;
    outline: none;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle:active {
    transform: scale(.96);
  }

  #left-panel #menuToggle.sigap-sidebar-toggle .fa {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  /* En compacto el control queda centrado en los mismos 83 px. */
  body.sigap-sidebar-compact #left-panel .sigap-sidebar-tools {
    width: 83px !important;
    padding: 6px 0 !important;
    justify-content: center !important;
  }

  /* La flecha cambia de sentido sin requerir otro handler JS. */
  body.sigap-sidebar-compact #left-panel #menuToggle.sigap-sidebar-toggle .fa {
    transform: rotate(180deg);
  }
}

/* En móvil se usa .btn-menu del encabezado; no duplicamos controles. */
@media (max-width: 575px) {
  #left-panel .sigap-sidebar-tools {
    display: none !important;
  }
}

/* =========================================================
   SIGAP - Ajuste final de modales y seleccion persistente
   ========================================================= */

/* Neutraliza el verde heredado de assets/css/style.css sin modificarlo. */
.modal .modal-header,
.modal .modal-header.bg-blue,
.modal-header,
.modal-header.bg-blue {
  display: block;
  background: var(--sigap-primary) !important;
  background-color: var(--sigap-primary) !important;
  color: #fff !important;
  border-bottom-color: var(--sigap-primary-dark) !important;
}

.modal .modal-header .modal-title,
.modal-header .modal-title,
.modal-header.bg-blue .modal-title {
  color: #fff !important;
}

.modal .modal-header .modal-title::after,
.modal-header .modal-title::after,
.modal-header.bg-blue .modal-title::after {
  background: var(--sigap-accent) !important;
}

.modal .modal-header .btn-close,
.modal-header .btn-close,
.modal-header.bg-blue .btn-close {
  opacity: .88;
}

.modal .modal-header .btn-close:hover,
.modal-header .btn-close:hover,
.modal-header.bg-blue .btn-close:hover {
  opacity: 1;
}

/* El elemento administrativo de la ruta actual permanece marcado. */
#left-panel .contenedor-logos.admin .Nivel1 > li.activo > a,
#left-panel .contenedor-logos.admin .Nivel1 > li > a[aria-current="page"] {
  background: rgba(140, 29, 64, .46) !important;
  color: #fffafc !important;
  border-left-color: var(--sigap-accent) !important;
  font-weight: 600 !important;
}

#left-panel .contenedor-logos.admin .Nivel1 > li.activo > a .logo,
#left-panel .contenedor-logos.admin .Nivel1 > li > a[aria-current="page"] .logo {
  background: rgba(188, 149, 92, .17) !important;
  color: var(--sigap-accent) !important;
}

/* =========================================================
   RESPONSIVE SIGAP 2026-08-19
   Capa final propia. No modifica Bootstrap ni terceros.
   ========================================================= */

/* Base fluida y prevención de desbordes accidentales. */
html {
  min-width: 0;
  overflow-x: hidden;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.right-panel {
  min-width: 0 !important;
  max-width: 100%;
}

.content {
  width: 100%;
  min-width: 0;
  padding-left: clamp(12px, 2vw, 30px) !important;
  padding-right: clamp(12px, 2vw, 30px) !important;
}

.content > .animated,
.content > .animated > .row,
.card,
.card-body,
.card-header,
.dataTables_wrapper,
.table-responsive,
#carga-aplicacion {
  min-width: 0;
  max-width: 100%;
}

#carga-aplicacion {
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#carga-aplicacion > * {
  max-width: 100%;
}

/* Tarjetas resumen: rejilla flexible sin depender de col-md-8 heredado. */
#info-cards .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-left: -7px;
  margin-right: -7px;
}

#info-cards .row > [class*="col-"] {
  flex: 1 1 220px;
  width: auto;
  max-width: none;
  padding-left: 7px;
  padding-right: 7px;
  margin-bottom: 14px;
}

#info-cards .card,
#info-cards .card-body {
  height: 100%;
}

#info-cards .stat-widget-five {
  min-width: 0;
}

#info-cards .stat-content,
#info-cards .stat-content .text-left {
  min-width: 0;
}

#info-cards .stat-heading {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Cabeceras de tarjetas: permiten título + acción sin solaparse. */
.card-header.d-flex.justify-content-between {
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
  min-width: 0;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

/* Formularios y controles siempre caben en su contenedor. */
.form-control,
.form-select,
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]) {
  max-width: 100%;
}

.form-row,
.modal .row {
  min-width: 0;
}

/* DataTables: controles flexibles y tabla sin forzar el viewport. */
.dataTables_wrapper {
  width: 100%;
}

.dataTables_wrapper .row {
  row-gap: 10px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  min-width: 0;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  max-width: 100%;
}

table.dataTable,
.table {
  width: 100% !important;
  max-width: 100%;
}

table.dataTable td,
table.dataTable th {
  overflow-wrap: anywhere;
}

/* Acciones: no permitir que varios botones ensanchen una celda. */
table.dataTable td .d-flex {
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center !important;
}

table.dataTable td .d-flex .btn {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Modales adaptables sin perder modal-lg en escritorio. */
.modal-dialog {
  /* max-width: min(96vw, 500px); */
  margin-left: auto;
  margin-right: auto;
}

.modal-dialog.modal-lg {
  max-width: min(94vw, 800px);
}

.modal-content {
  max-height: calc(100dvh - 28px);
  /* overflow: hidden; */
}

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-footer {
  gap: 8px;
  flex-wrap: wrap;
}

/* SweetAlert también debe respetar pantallas pequeñas. */
.swal2-popup {
  max-width: calc(100vw - 24px) !important;
}

/* -------------------------
   Tablet / escritorio
   ------------------------- */
@media (min-width: 576px) {
  body:not(.sigap-sidebar-compact) .right-panel {
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
  }

  body.sigap-sidebar-compact .right-panel {
    width: calc(100% - 83px) !important;
    max-width: calc(100% - 83px) !important;
  }

  /* El header ocupa el viewport; el contenido respeta el sidebar. */
  #header.header {
    width: 100%;
  }
}

/* Ajuste intermedio para pantallas donde sidebar + contenido quedan estrechos. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #info-cards .row > [class*="col-"] {
    flex-basis: 180px;
  }

  .card-body {
    padding: 14px !important;
  }

  .card-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    width: 100%;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dataTables_wrapper .dataTables_filter input {
    flex: 1 1 160px;
    width: auto !important;
    margin-left: 0 !important;
  }
}

/* -------------------------
   Móvil: <= 575px
   ------------------------- */
@media (max-width: 575.98px) {
  body {
    padding: 0 !important;
  }

  body.sigap-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Header móvil limpio y estable. Neutraliza posiciones heredadas. */
  #header.header,
  .right-panel header.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 1040 !important;
  }

  #header .top-left,
  #header .top-right,
  .right-panel header.header .top-left,
  .right-panel header.header .top-right {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
  }

  #header .navbar-header,
  .right-panel .navbar-header {
    width: auto !important;
    height: 64px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    background: transparent !important;
  }

  #header .navbar-brand,
  .right-panel .navbar-brand {
    width: min(58vw, 220px) !important;
    max-width: 220px !important;
    height: 56px !important;
    line-height: 56px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }

  #header .navbar-brand img,
  .right-panel .navbar-brand img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 48px !important;
    object-fit: contain;
  }

  #header .btn-menu,
  .right-panel .btn-menu {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    border-radius: 9px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--sigap-primary) !important;
    background: var(--sigap-primary-soft) !important;
    font-size: 18px;
    cursor: pointer;
  }

  /* Todo el contenido empieza debajo del header y usa el ancho completo. */
  .right-panel,
  body.open .right-panel,
  body.sigap-sidebar-compact .right-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 64px !important;
  }

  /* El right-panel que sólo contiene el header no crea espacio doble. */
  body > .right-panel:has(> #header.header) {
    min-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
  }

  .content {
    padding: 12px !important;
  }

  .content + .content {
    padding-top: 0 !important;
  }

  /* Sidebar off-canvas real. */
  #left-panel,
  body.open #left-panel,
  body.sigap-sidebar-compact #left-panel {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: min(88vw, 320px) !important;
    max-width: 320px !important;
    height: calc(100dvh - 64px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 1055 !important;
    box-shadow: 12px 0 28px rgba(17, 23, 28, .24);
  }

  body.sigap-mobile-menu-open #left-panel {
    transform: translateX(0);
  }

  #left-panel .navbar {
    height: auto !important;
    min-height: 100%;
    margin: 0 !important;
    overflow: visible !important;
  }

  #left-panel #main-menu.sigap-main-menu,
  #left-panel .contenedor-menu,
  #left-panel .menu {
    width: 100% !important;
    max-width: 100% !important;
  }

  #left-panel .sigap-sidebar-tools {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--sigap-sidebar) !important;
  }

  #left-panel #menuToggle {
    display: inline-flex !important;
  }

  /* Backdrop generado por menu.js. */
  .sigap-mobile-backdrop {
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 1050;
    background: rgba(16, 22, 27, .46);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }

  body.sigap-mobile-menu-open .sigap-mobile-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Tarjetas: una por fila y cifras legibles. */
  #info-cards .row {
    margin-left: 0;
    margin-right: 0;
  }

  #info-cards .row > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
  }

  #info-cards .card-body {
    padding: 14px !important;
  }

  #info-cards .stat-icon {
    font-size: 34px !important;
  }

  #info-cards .stat-text {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  /* Título y botón Nuevo apilables cuando no caben. */
  .card-header.d-flex.justify-content-between {
    align-items: stretch !important;
    padding: 14px !important;
  }

  .card-header.d-flex.justify-content-between > h3 {
    flex: 1 1 100%;
    font-size: 19px !important;
    line-height: 1.25;
  }

  .card-header.d-flex.justify-content-between > .btn,
  .card-header #add_button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .card-body {
    padding: 12px !important;
  }

  /* DataTables controles en columna para que nada se corte. */
  .dataTables_wrapper .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    float: none !important;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dataTables_wrapper .dataTables_filter input {
    flex: 1 1 100%;
    width: 100% !important;
    margin: 4px 0 0 !important;
  }

  .dataTables_wrapper .dataTables_length select {
    min-width: 78px;
  }

  .dataTables_wrapper .dataTables_paginate {
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .dataTables_wrapper .pagination {
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    min-width: max-content;
  }

  table.dataTable tbody td,
  table.dataTable tbody th {
    font-size: 12.5px;
  }

  /* Modal casi a pantalla completa, pero con aire alrededor. */
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-dialog-centered {
    width: auto !important;
    max-width: none !important;
    margin: 10px !important;
    min-height: calc(100% - 20px);
  }

  .modal-content {
    max-height: calc(100dvh - 20px);
    border-radius: 10px;
  }

  .modal-header {
    padding: 14px 16px !important;
  }

  .modal-title {
    font-size: 17px !important;
    line-height: 1.25;
  }

  .modal-body {
    padding: 14px !important;
  }

  .modal-footer {
    padding: 12px 14px !important;
  }

  .modal-footer .btn {
    flex: 1 1 120px;
    min-height: 42px;
  }

  /* Filas de formularios antiguas se apilan en móvil. */
  .modal .form-row > [class*="col-"],
  .modal .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Loader conserva centrado y no excede viewport. */
  #loader.lds-dual-ring,
  #myloader.lds-dual-ring {
    max-width: 78vw;
    max-height: 78vw;
  }
}

/* Pantallas muy pequeñas. */
@media (max-width: 359.98px) {
  #header .navbar-brand,
  .right-panel .navbar-brand {
    width: 52vw !important;
  }

  .content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .card,
  .modal-content {
    border-radius: 8px;
  }

  #left-panel,
  body.sigap-mobile-menu-open #left-panel {
    width: 94vw !important;
    max-width: 94vw !important;
  }
}

/* Respeta usuarios con reducción de movimiento. */
@media (prefers-reduced-motion: reduce) {
  #left-panel,
  .sigap-mobile-backdrop,
  #left-panel a,
  .btn,
  .card {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   SIGAP - AJUSTE FINAL RESPONSIVE / MINI PESTAÑA / PALETA
   Mantiene intactas las librerías y neutraliza colores heredados.
   ========================================================= */
:root {
  --sigap-turquoise: #3f8585;
  --sigap-turquoise-dark: #326d6d;
  --sigap-coral: #c66b61;
  --sigap-coral-dark: #a9554d;
}

/* ---------------------------------------------------------
   Mini pestaña para comprimir / desplegar el sidebar.
   Reutiliza #menuToggle; no añade un segundo controlador.
   --------------------------------------------------------- */
@media (min-width: 576px) {
  #left-panel .sigap-sidebar-tools {
    position: fixed !important;
    top: 50% !important;
    left: 252px !important;
    width: 28px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    margin: -27px 0 0 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 1060 !important;
    pointer-events: none;
    transition: left .2s ease !important;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle {
    position: absolute !important;
    inset: 0 !important;
    width: 28px !important;
    height: 54px !important;
    min-width: 28px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-right: 0 !important;
    border-radius: 11px 0 0 11px !important;
    background: var(--sigap-primary) !important;
    color: #fff !important;
    box-shadow: -3px 0 10px rgba(20,24,28,.16) !important;
    cursor: pointer;
    transform: none !important;
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease !important;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle:hover,
  #left-panel #menuToggle.sigap-sidebar-toggle:focus-visible {
    background: var(--sigap-primary-dark) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: -4px 0 13px rgba(20,24,28,.22) !important;
    outline: none !important;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle:active {
    background: var(--sigap-primary-hover) !important;
    transform: none !important;
  }

  #left-panel #menuToggle.sigap-sidebar-toggle .fa {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: none;
    transition: transform .2s ease !important;
  }

  body.sigap-sidebar-compact #left-panel .sigap-sidebar-tools {
    left: 55px !important;
    width: 28px !important;
    padding: 0 !important;
  }

  body.sigap-sidebar-compact #left-panel #menuToggle.sigap-sidebar-toggle .fa {
    transform: rotate(180deg) !important;
  }
}

/* En teléfono continúa mandando el botón móvil del header. */
@media (max-width: 575px) {
  #left-panel .sigap-sidebar-tools {
    display: none !important;
  }
}

/* ---------------------------------------------------------
   Paleta global para botones de acciones administrativas.
   --------------------------------------------------------- */
.btn-info,
button.btn-info,
a.btn-info,
.dt-edit.btn-info,
.editarbtn.btn-info {
  background-color: var(--sigap-turquoise) !important;
  border-color: var(--sigap-turquoise) !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  background-color: var(--sigap-turquoise-dark) !important;
  border-color: var(--sigap-turquoise-dark) !important;
  color: #fff !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--sigap-primary-dark) !important;
  border-color: var(--sigap-primary-dark) !important;
  color: #fff !important;
}

.btn-success,
button.btn-success,
a.btn-success,
.circulo_verde {
  background-color: var(--sigap-success) !important;
  border-color: var(--sigap-success) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: #315f47 !important;
  border-color: #315f47 !important;
  color: #fff !important;
}

.btn-danger,
button.btn-danger,
a.btn-danger,
.dt-delete.btn-danger {
  background-color: var(--sigap-coral) !important;
  border-color: var(--sigap-coral) !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: var(--sigap-coral-dark) !important;
  border-color: var(--sigap-coral-dark) !important;
  color: #fff !important;
}

.btn-warning,
button.btn-warning,
a.btn-warning {
  background-color: var(--sigap-accent) !important;
  border-color: var(--sigap-accent) !important;
  color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: #9e7949 !important;
  border-color: #9e7949 !important;
  color: #fff !important;
}

/* Todos los iconos contenidos en botones de acción heredan blanco. */
.btn-info .fa,
.btn-primary .fa,
.btn-success .fa,
.btn-danger .fa,
.btn-warning .fa,
.dt-edit .fa,
.dt-delete .fa,
.editarbtn .fa {
  color: #fff !important;
}

/* Botones pequeños de DataTables: una geometría consistente en todos los catálogos. */
table.dataTable td .d-flex .btn.btn-sm,
table.dataTable td .btn.btn-sm {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  box-shadow: none !important;
}

table.dataTable td .btn.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(32,38,44,.12) !important;
}

/* ---------------------------------------------------------
   Neutralización de colores históricos de catalogos.css.
   Mantiene significado semántico, no colores arbitrarios.
   --------------------------------------------------------- */
.azul {
  color: var(--sigap-turquoise) !important;
}

.verde {
  color: var(--sigap-success) !important;
}

.rojo {
  color: var(--sigap-coral) !important;
}

.icon,
.input-container .icon {
  background: var(--sigap-primary) !important;
  color: #fff !important;
}

.input-field:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(140,29,64,.48) !important;
  box-shadow: 0 0 0 .2rem rgba(140,29,64,.10) !important;
  outline: 0 !important;
}

.app-color,
.app {
  background-color: var(--sigap-primary) !important;
}

.app-color:hover,
.app:hover {
  background-color: var(--sigap-primary-dark) !important;
}

.Good {
  background-color: var(--sigap-success) !important;
  color: var(--sigap-success) !important;
}

.Strong {
  background-color: var(--sigap-turquoise) !important;
  color: var(--sigap-turquoise) !important;
}

.Weak {
  background-color: var(--sigap-accent) !important;
  color: var(--sigap-accent) !important;
}

.Short {
  background-color: var(--sigap-coral) !important;
  color: var(--sigap-coral) !important;
}

/* Colores Bootstrap heredados que todavía aparecen en badges/labels. */
.bg-info,
.badge.bg-info {
  background-color: var(--sigap-turquoise) !important;
  color: #fff !important;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--sigap-primary) !important;
  color: #fff !important;
}

.bg-success,
.badge.bg-success {
  background-color: var(--sigap-success) !important;
  color: #fff !important;
}

.bg-danger,
.badge.bg-danger {
  background-color: var(--sigap-coral) !important;
  color: #fff !important;
}

.bg-warning,
.badge.bg-warning {
  background-color: var(--sigap-accent) !important;
  color: #fff !important;
}

/* Atributos inline históricos muy concretos del proyecto. */
[style*="color:#235B4E"],
[style*="color: #235B4E"],
[style*="color:#235b4e"],
[style*="color: #235b4e"] {
  color: var(--sigap-primary) !important;
}


/* =========================================================
   SIGAP - CORRECCIÓN MOBILE: MISMA MINI PESTAÑA DEL SIDEBAR
   En teléfonos se oculta el botón heredado del header y se
   reutiliza #menuToggle como pestaña fija en el borde izquierdo.
   ========================================================= */
@media (max-width: 575px) {
  /* El control antiguo del encabezado deja de mostrarse. */
  #header .btn-menu,
  .right-panel .btn-menu {
    display: none !important;
  }

  /* El contenedor interno ya no necesita reservar espacio. */
  #left-panel .sigap-sidebar-tools {
    display: none !important;
  }

  /* menu.js mueve el MISMO #menuToggle al body en móvil. */
  body > #menuToggle.sigap-mobile-edge-toggle {
    position: fixed !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 30px !important;
    height: 58px !important;
    min-width: 30px !important;
    min-height: 58px !important;
    margin: -29px 0 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-left: 0 !important;
    border-radius: 0 11px 11px 0 !important;
    background: var(--sigap-primary) !important;
    color: #fff !important;
    box-shadow: 3px 0 11px rgba(20,24,28,.2) !important;
    z-index: 1070 !important;
    cursor: pointer;
    transform: none !important;
    transition: left .22s ease, background-color .18s ease, box-shadow .18s ease !important;
  }

  body > #menuToggle.sigap-mobile-edge-toggle:hover,
  body > #menuToggle.sigap-mobile-edge-toggle:focus-visible {
    background: var(--sigap-primary-dark) !important;
    color: #fff !important;
    outline: none !important;
  }

  body > #menuToggle.sigap-mobile-edge-toggle .fa {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: FontAwesome !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transform: rotate(180deg);
    transition: transform .22s ease !important;
  }

  /* Al abrir el panel, la pestaña se pega a su borde derecho. */
  body.sigap-mobile-menu-open > #menuToggle.sigap-mobile-edge-toggle {
    left: min(88vw, 320px) !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
    border-right: 0 !important;
    border-radius: 11px 0 0 11px !important;
    box-shadow: -3px 0 11px rgba(20,24,28,.18) !important;
  }

  body.sigap-mobile-menu-open > #menuToggle.sigap-mobile-edge-toggle .fa {
    transform: rotate(0deg) !important;
  }
}

/* =========================================================
   SIGAP - HEADER MÓVIL EN DOS FILAS
   Fila 1: identidad institucional / logo
   Fila 2: usuario y avatar
   Mantiene la mini pestaña del sidebar independiente.
   ========================================================= */
@media (max-width: 575.98px) {
  #header.header,
  .right-panel header.header {
    height: 108px !important;
    min-height: 108px !important;
    padding: 5px 12px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 1px !important;
    overflow: visible !important;
  }

  /* Primera fila: logo centrado y contenido. */
  #header .top-left,
  .right-panel header.header .top-left {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #header .navbar-header,
  .right-panel .navbar-header {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #header .navbar-brand:not(.hidden),
  .right-panel .navbar-brand:not(.hidden) {
    width: min(82vw, 265px) !important;
    max-width: 265px !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .navbar-brand:not(.hidden) img,
  .right-panel .navbar-brand:not(.hidden) img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  #header .navbar-brand.hidden,
  .right-panel .navbar-brand.hidden {
    display: none !important;
  }

  /* Segunda fila: usuario debajo del logo. */
  #header .top-right,
  .right-panel header.header .top-right {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #header .header-menu,
  .right-panel .header-menu {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .user-area,
  .right-panel .user-area {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    width: auto !important;
    max-width: calc(100vw - 34px) !important;
    height: 40px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #header .user-area .dropdown-toggle,
  .right-panel .user-area .dropdown-toggle {
    width: auto !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1.15 !important;
    padding: 0 3px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
  }

  #header .user-area .dropdown-toggle h5,
  .right-panel .user-area .dropdown-toggle h5 {
    max-width: calc(100vw - 78px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--sigap-primary-dark) !important;
    font-family: "Century Gothic", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .005em !important;
  }

  #header .user-area .dropdown-toggle h5 b,
  .right-panel .user-area .dropdown-toggle h5 b {
    font-weight: 600 !important;
  }

  #header .user-area .user-avatar,
  .right-panel .user-area .user-avatar {
    float: none !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    object-fit: cover !important;
  }

  #header .user-area .dropdown-toggle::before,
  .right-panel .user-area .dropdown-toggle::before {
    right: -1px !important;
    bottom: 3px !important;
    width: 9px !important;
    height: 9px !important;
    border-width: 2px !important;
    background: var(--sigap-success) !important;
  }

  #header .user-area .user-menu,
  .right-panel .user-area .user-menu {
    top: 42px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 190px !important;
    max-width: min(92vw, 240px) !important;
    border-radius: 8px !important;
  }

  /* El contenido empieza debajo de las dos filas del header. */
  .right-panel,
  body.open .right-panel,
  body.sigap-sidebar-compact .right-panel {
    margin-top: 108px !important;
  }

  /* El wrapper que sólo contiene el header continúa sin duplicar altura. */
  body > .right-panel:has(> #header.header) {
    margin-top: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* Teléfonos muy estrechos: compactar un poco más sin perder legibilidad. */
@media (max-width: 359.98px) {
  #header.header,
  .right-panel header.header {
    height: 102px !important;
    min-height: 102px !important;
  }

  #header .top-left,
  .right-panel header.header .top-left,
  #header .navbar-header,
  .right-panel .navbar-header {
    height: 50px !important;
    min-height: 50px !important;
    flex-basis: 50px !important;
  }

  #header .navbar-brand:not(.hidden),
  .right-panel .navbar-brand:not(.hidden) {
    width: min(88vw, 238px) !important;
    height: 46px !important;
  }

  #header .navbar-brand:not(.hidden) img,
  .right-panel .navbar-brand:not(.hidden) img {
    max-height: 38px !important;
  }

  #header .user-area .dropdown-toggle h5,
  .right-panel .user-area .dropdown-toggle h5 {
    max-width: calc(100vw - 70px) !important;
    font-size: 10px !important;
  }

  #header .user-area .user-avatar,
  .right-panel .user-area .user-avatar {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .right-panel,
  body.open .right-panel,
  body.sigap-sidebar-compact .right-panel {
    margin-top: 102px !important;
  }

  body > .right-panel:has(> #header.header) {
    margin-top: 0 !important;
  }
}

/* ================================================================
   SIGAP - selector de tema claro / oscuro
   Capa final: no modifica Bootstrap ni librerías de terceros.
   ================================================================ */
.theme-toggle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 0 0;
  padding: 0;
  border: 1px solid var(--sigap-border);
  border-radius: 9px;
  background: var(--sigap-white);
  color: var(--sigap-primary);
  box-shadow: 0 2px 8px rgba(22, 28, 35, .06);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--sigap-primary-dark);
  background: var(--sigap-primary-soft);
  border-color: rgba(140, 29, 64, .28);
  box-shadow: 0 3px 11px rgba(22, 28, 35, .10);
  outline: none;
}

.theme-toggle:active {
  transform: scale(.95);
}

.theme-toggle .fa {
  font-family: FontAwesome !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Paleta oscura institucional. Se aclaran los acentos para conservar contraste. */
html[data-theme="dark"] {
  --sigap-primary: #c4466e;
  --sigap-primary-dark: #e07a9a;
  --sigap-primary-hover: #d25b80;
  --sigap-primary-soft: #38232c;
  --sigap-accent: #c9a76d;
  --sigap-accent-soft: #463b2c;
  --sigap-sidebar: #1d2227;
  --sigap-sidebar-alt: #252b31;
  --sigap-text: #edf0f2;
  --sigap-muted: #a9b1b9;
  --sigap-bg: #15191d;
  --sigap-border: #3a424a;
  --sigap-white: #23292f;
  --sigap-success: #67a883;
  --sigap-danger: #d2767f;
  --sigap-info: #62a1a1;
  --sigap-warning: #c9a15f;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  color: var(--sigap-text) !important;
  background: var(--sigap-bg) !important;
}

html[data-theme="dark"] #header.header,
html[data-theme="dark"] .right-panel header.header {
  background: #20262c !important;
  border-bottom-color: var(--sigap-border) !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] #header .user-area .dropdown-toggle h5,
html[data-theme="dark"] .right-panel .user-area .dropdown-toggle h5 {
  color: #eef1f3 !important;
}

html[data-theme="dark"] .theme-toggle {
  background: #2a3138 !important;
  border-color: #46505a !important;
  color: var(--sigap-accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  background: #343c44 !important;
  border-color: #5b6670 !important;
  color: #e0c28e !important;
}

html[data-theme="dark"] .content,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .right-panel,
html[data-theme="dark"] #right-panel,
html[data-theme="dark"] main,
html[data-theme="dark"] section {
  color: var(--sigap-text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .stat-widget-five,
html[data-theme="dark"] .stat-widget-one,
html[data-theme="dark"] .stat-widget-two {
  background-color: #22282e !important;
  color: var(--sigap-text) !important;
  border-color: var(--sigap-border) !important;
}

html[data-theme="dark"] .card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .card-header {
  background: #272e35 !important;
  border-color: var(--sigap-border) !important;
  color: var(--sigap-text) !important;
}

html[data-theme="dark"] .card-header h1,
html[data-theme="dark"] .card-header h2,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .card-header h4,
html[data-theme="dark"] .card-header h5,
html[data-theme="dark"] .card-title {
  color: #e07a9a !important;
}

html[data-theme="dark"] .stat-heading,
html[data-theme="dark"] .stat-text,
html[data-theme="dark"] .stat-content,
html[data-theme="dark"] .stat-content .text-left,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted {
  color: var(--sigap-muted) !important;
}

html[data-theme="dark"] .stat-digit,
html[data-theme="dark"] .count,
html[data-theme="dark"] .count-numbers {
  color: #f3f5f6 !important;
}

/* Formularios */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #1d2328 !important;
  color: #edf0f2 !important;
  border-color: #48525c !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #828c95 !important;
  opacity: 1;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #20272d !important;
  color: #fff !important;
  border-color: var(--sigap-primary) !important;
  box-shadow: 0 0 0 .18rem rgba(196, 70, 110, .18) !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] legend {
  color: #dfe3e6 !important;
}

/* Tablas y DataTables */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable {
  color: #e6eaed !important;
  border-color: var(--sigap-border) !important;
  background: #22282e !important;
}

html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
  color: #e6eaed !important;
  background-color: #22282e !important;
  border-color: #343c44 !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd > *,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > * {
  background-color: #252c32 !important;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] table.dataTable tbody tr:hover > * {
  background-color: #2c343b !important;
  color: #fff !important;
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] .table thead th {
  background: #323940 !important;
  color: #f1f3f4 !important;
  border-color: #46505a !important;
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter,
html[data-theme="dark"] .dataTables_paginate {
  color: var(--sigap-muted) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #dce1e4 !important;
  border-color: transparent !important;
  background: transparent !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important;
  background: #343c44 !important;
  border-color: #46505a !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  background: var(--sigap-primary) !important;
  border-color: var(--sigap-primary) !important;
}

/* Modales y menús */
html[data-theme="dark"] .modal-content {
  background: #22282e !important;
  color: var(--sigap-text) !important;
  border-color: #46505a !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45) !important;
}

html[data-theme="dark"] .modal-header {
  background: #8c1d40 !important;
  border-color: #a44464 !important;
}

html[data-theme="dark"] .modal-header .modal-title {
  color: #fff !important;
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer {
  background: #22282e !important;
  color: var(--sigap-text) !important;
  border-color: var(--sigap-border) !important;
}

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .user-menu.dropdown-menu {
  background: #252c32 !important;
  color: var(--sigap-text) !important;
  border-color: #46505a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu .nav-link {
  color: #e7eaed !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-menu .nav-link:hover {
  background: #333b43 !important;
  color: #fff !important;
}

/* Elementos genéricos que aún puedan venir de la plantilla antigua. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .white-bg {
  background-color: #22282e !important;
}

html[data-theme="dark"] hr {
  border-color: var(--sigap-border) !important;
  opacity: 1;
}

html[data-theme="dark"] a:not(#left-panel a):not(.btn) {
  color: #d986a0;
}

html[data-theme="dark"] a:not(#left-panel a):not(.btn):hover {
  color: #ef9eb7;
}

/* Loader: oscurece únicamente el lienzo, no altera la imagen. */
html[data-theme="dark"] #myloader,
html[data-theme="dark"] .myloader {
  background-color: rgba(21, 25, 29, .93) !important;
}

/* El contenido cargado puede tener su propia identidad; evitamos forzar fondos
   internos para no romper aplicaciones heredadas. Sólo se oscurece el lienzo SIGAP. */
html[data-theme="dark"] #carga-aplicacion {
  background-color: var(--sigap-bg);
}

@media (max-width: 575.98px) {
  #header .header-menu,
  .right-panel .header-menu {
    gap: 6px !important;
    padding: 0 7px !important;
  }

  .theme-toggle {
    width: 31px;
    height: 31px;
    min-width: 31px;
    flex-basis: 31px;
    margin: 0 2px 0 0;
    border-radius: 8px;
  }

  .theme-toggle .fa {
    font-size: 14px !important;
  }

  #header .user-area,
  .right-panel .user-area {
    max-width: calc(100vw - 55px) !important;
    margin: 0 !important;
  }

  #header .user-area .dropdown-toggle h5,
  .right-panel .user-area .dropdown-toggle h5 {
    max-width: calc(100vw - 118px) !important;
  }
}

@media (max-width: 359.98px) {
  .theme-toggle {
    width: 29px;
    height: 29px;
    min-width: 29px;
    flex-basis: 29px;
  }

  #header .user-area .dropdown-toggle h5,
  .right-panel .user-area .dropdown-toggle h5 {
    max-width: calc(100vw - 108px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none !important;
  }
}

/* ========================================================================
   SIGAP DARK MODE V2 - cobertura integral y estados hover consistentes
   Esta capa se carga al final para neutralizar blancos/hover heredados sin
   modificar Bootstrap, DataTables, Font Awesome ni los CSS de terceros.
   ======================================================================== */
html[data-theme="dark"] {
  --sigap-dark-bg: #12171b;
  --sigap-dark-surface: #1b2228;
  --sigap-dark-surface-2: #222a31;
  --sigap-dark-surface-3: #29323a;
  --sigap-dark-hover: #303a43;
  --sigap-dark-border: #39444d;
  --sigap-dark-text: #e8edf0;
  --sigap-dark-muted: #9da8b1;

  --sigap-primary: #c34b70;
  --sigap-primary-dark: #a83a5d;
  --sigap-primary-hover: #d15b7f;
  --sigap-primary-soft: #3b252e;
  --sigap-accent: #c5a063;
  --sigap-turquoise: #589797;
  --sigap-turquoise-dark: #477e7e;
  --sigap-success: #5f9a78;
  --sigap-coral: #cf746d;
  --sigap-coral-dark: #ae5d58;
  --sigap-text: var(--sigap-dark-text);
  --sigap-muted: var(--sigap-dark-muted);
  --sigap-bg: var(--sigap-dark-bg);
  --sigap-border: var(--sigap-dark-border);
  --sigap-white: var(--sigap-dark-surface);
}

/* Superficies principales: ninguna caja de SIGAP debe quedarse blanca. */
html[data-theme="dark"] body,
html[data-theme="dark"] .right-panel,
html[data-theme="dark"] #right-panel,
html[data-theme="dark"] .content,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .animated,
html[data-theme="dark"] .fadeIn,
html[data-theme="dark"] main {
  background-color: var(--sigap-dark-bg) !important;
  color: var(--sigap-dark-text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .stat-widget-one,
html[data-theme="dark"] .stat-widget-two,
html[data-theme="dark"] .stat-widget-five,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_scroll,
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .white-bg,
html[data-theme="dark"] .bg-light {
  background-color: var(--sigap-dark-surface) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] .card-header {
  background-color: var(--sigap-dark-surface-2) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

/* Tipografía y utilidades Bootstrap heredadas. */
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .fw,
html[data-theme="dark"] p,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: var(--sigap-dark-text);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small {
  color: var(--sigap-dark-muted) !important;
}

/* Formularios y controles. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #182026 !important;
  color: var(--sigap-dark-text) !important;
  border-color: #46525d !important;
}

html[data-theme="dark"] option {
  background: #182026 !important;
  color: var(--sigap-dark-text) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #1d262d !important;
  color: #f5f7f8 !important;
  border-color: var(--sigap-primary) !important;
  box-shadow: 0 0 0 .18rem rgba(195, 75, 112, .20) !important;
}

/* Tablas/DataTables: cubre sorting_X, odd/even y hover de plugins antiguos. */
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable tbody,
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] #tblAplicaciones tbody tr {
  background-color: var(--sigap-dark-surface) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th,
html[data-theme="dark"] table.dataTable tbody td.sorting_1,
html[data-theme="dark"] table.dataTable tbody td.sorting_2,
html[data-theme="dark"] table.dataTable tbody td.sorting_3,
html[data-theme="dark"] .table > :not(caption) > * > *,
html[data-theme="dark"] #tblAplicaciones tbody td {
  background-color: var(--sigap-dark-surface) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] table.dataTable tbody tr.odd > *,
html[data-theme="dark"] table.dataTable.display tbody tr.odd > *,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #1e262c !important;
  color: var(--sigap-dark-text) !important;
}

html[data-theme="dark"] table.dataTable.hover tbody tr:hover > *,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > *,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > *,
html[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
html[data-theme="dark"] table.dataTable tbody tr:hover > *,
html[data-theme="dark"] .table-hover > tbody > tr:hover > *,
html[data-theme="dark"] #tblAplicaciones tbody tr:hover,
html[data-theme="dark"] #tblAplicaciones tbody tr:hover > *,
html[data-theme="dark"] #tblAplicaciones tbody tr:hover > .sorting_1 {
  background: var(--sigap-dark-hover) !important;
  background-color: var(--sigap-dark-hover) !important;
  color: #f4f6f7 !important;
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td,
html[data-theme="dark"] .table thead th {
  background-color: var(--sigap-dark-surface-3) !important;
  color: #f2f5f6 !important;
  border-color: #4a5661 !important;
}

/* Particularidades de /aplicaciones que tenían blanco/gris fijo. */
html[data-theme="dark"] #tblAplicaciones tbody td:first-child > span.fw:last-child {
  background: #303941 !important;
  color: #c8d0d6 !important;
}

html[data-theme="dark"] #tblAplicaciones td.dt-center.fw {
  color: #c4ccd2 !important;
}

html[data-theme="dark"] #tblAplicaciones_wrapper .dataTables_filter input,
html[data-theme="dark"] #tblAplicaciones_wrapper .dataTables_length select {
  background: #182026 !important;
  color: var(--sigap-dark-text) !important;
  border-color: #46525d !important;
}

/* Paginación: ningún hover blanco. */
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--sigap-dark-surface-2) !important;
  color: #cfd6db !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .page-link:hover,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sigap-dark-hover) !important;
  color: #ffffff !important;
  border-color: #53606b !important;
}

html[data-theme="dark"] .page-item.active .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--sigap-primary) !important;
  color: #fff !important;
  border-color: var(--sigap-primary) !important;
}

html[data-theme="dark"] .page-item.disabled .page-link,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: #1a2026 !important;
  color: #69747e !important;
  border-color: #303941 !important;
}

/* Menús, tabs, listas y desplegables. */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .user-menu.dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
  background-color: var(--sigap-dark-surface-2) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-menu .nav-link,
html[data-theme="dark"] .list-group-item-action,
html[data-theme="dark"] .nav-tabs .nav-link {
  color: #dce2e6 !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu .nav-link:hover,
html[data-theme="dark"] .dropdown-menu .nav-link:focus,
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus,
html[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: var(--sigap-dark-hover) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #34242b !important;
  color: #e7a0b6 !important;
  border-color: #654050 !important;
}

/* Modales y SweetAlert2. */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .swal2-modal,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
  background-color: var(--sigap-dark-surface) !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] .swal2-title {
  color: #f1f4f5 !important;
}

/* Tooltips y popovers. */
html[data-theme="dark"] .tooltip-inner,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .popover-body,
html[data-theme="dark"] .popover-header {
  background-color: #303941 !important;
  color: #f3f5f6 !important;
  border-color: #4a5661 !important;
}

/* Botones neutros que Bootstrap deja claros. */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary {
  background-color: #303941 !important;
  border-color: #4c5863 !important;
  color: #e5eaed !important;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3a454f !important;
  border-color: #5a6874 !important;
  color: #ffffff !important;
}

/* Links: mantener contraste sin convertir el hover en una superficie blanca. */
html[data-theme="dark"] a:not(#left-panel a):not(.btn):not(.page-link):not(.dropdown-item) {
  color: #d985a0;
}

html[data-theme="dark"] a:not(#left-panel a):not(.btn):not(.page-link):not(.dropdown-item):hover,
html[data-theme="dark"] a:not(#left-panel a):not(.btn):not(.page-link):not(.dropdown-item):focus {
  color: #f0a7bd;
  background-color: transparent !important;
}

/* Loader: elimina los fondos blancos fijos definidos por el tema claro. */
html[data-theme="dark"] #carga-aplicacion > #myloader.myloader,
html[data-theme="dark"] #loader.loader.lds-dual-ring,
html[data-theme="dark"] #myloader,
html[data-theme="dark"] .myloader {
  background: rgba(18, 23, 27, .96) !important;
  background-color: rgba(18, 23, 27, .96) !important;
}

/* Select2, cuando esté presente. */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field {
  background: #182026 !important;
  color: var(--sigap-dark-text) !important;
  border-color: #46525d !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
  background: var(--sigap-dark-surface-2) !important;
  color: var(--sigap-dark-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--sigap-dark-hover) !important;
  color: #fff !important;
}

/* Selección de texto acorde al tema. */
html[data-theme="dark"] ::selection {
  background: #6e3046;
  color: #fff;
}

/* ========================================================================
   SIGAP DARK MODE V3 - Header completo + paleta oscura fiel a la original
   Mantiene los mismos acentos del modo claro y oscurece principalmente
   superficies/fondos. Se carga al final para ganar a reglas heredadas.
   ======================================================================== */
html[data-theme="dark"] {
  /* Identidad original conservada */
  --sigap-primary: #8c1d40;
  --sigap-primary-dark: #691c32;
  --sigap-primary-hover: #a3234a;
  --sigap-primary-soft: #321e26;
  --sigap-accent: #bc955c;
  --sigap-accent-soft: #3a3023;
  --sigap-success: #3f7d62;
  --sigap-info: #3f8585;
  --sigap-turquoise: #3f8585;
  --sigap-warning: #a97935;
  --sigap-danger: #a53a4c;
  --sigap-coral: #a53a4c;

  /* Superficies oscuras neutras, sin dominante azul */
  --sigap-dark-bg: #171719;
  --sigap-dark-surface: #212124;
  --sigap-dark-surface-2: #29292d;
  --sigap-dark-surface-3: #303035;
  --sigap-dark-hover: #39343a;
  --sigap-dark-border: #403b40;
  --sigap-dark-text: #f1edef;
  --sigap-dark-muted: #b8afb3;

  --sigap-sidebar: #27272a;
  --sigap-sidebar-alt: #303034;
  --sigap-text: var(--sigap-dark-text);
  --sigap-muted: var(--sigap-dark-muted);
  --sigap-bg: var(--sigap-dark-bg);
  --sigap-border: var(--sigap-dark-border);
  --sigap-white: var(--sigap-dark-surface);
  color-scheme: dark;
}

/* La regla heredada .right-panel .navbar-header { background:#fff; width:120% }
   queda anulada de forma explícita en ambos temas. */
#header .navbar-header,
.right-panel .navbar-header {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] #header.header,
html[data-theme="dark"] .right-panel header.header,
html[data-theme="dark"] #header .navbar-header,
html[data-theme="dark"] .right-panel .navbar-header,
html[data-theme="dark"] #header .top-left,
html[data-theme="dark"] .right-panel header.header .top-left,
html[data-theme="dark"] #header .top-right,
html[data-theme="dark"] .right-panel header.header .top-right {
  background-color: var(--sigap-dark-surface) !important;
  background-image: none !important;
  color: var(--sigap-dark-text) !important;
  border-color: var(--sigap-dark-border) !important;
}

html[data-theme="dark"] #header.header,
html[data-theme="dark"] .right-panel header.header {
  border-bottom: 1px solid var(--sigap-dark-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.24) !important;
}

/* Header derecho: tema + usuario se comportan como una sola fila. */
#header .header-menu,
.right-panel header.header .header-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#header .theme-toggle,
.right-panel .theme-toggle {
  flex: 0 0 auto !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

#header .user-area,
.right-panel .user-area {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#header .user-area > .dropdown-toggle,
.right-panel .user-area > .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* Botones del encabezado adaptados a la paleta, sin colores ajenos. */
html[data-theme="dark"] .theme-toggle {
  background: var(--sigap-dark-surface-2) !important;
  border: 1px solid var(--sigap-dark-border) !important;
  color: var(--sigap-accent) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
  background: var(--sigap-primary-soft) !important;
  border-color: var(--sigap-primary) !important;
  color: var(--sigap-accent) !important;
}

html[data-theme="dark"] #header .btn-menu,
html[data-theme="dark"] .right-panel .btn-menu {
  background: var(--sigap-primary-soft) !important;
  color: var(--sigap-accent) !important;
  border-color: rgba(188,149,92,.34) !important;
}

html[data-theme="dark"] #header .btn-menu:hover,
html[data-theme="dark"] .right-panel .btn-menu:hover {
  background: var(--sigap-primary) !important;
  color: #fff !important;
}

/* Hovers oscuros: nunca convertir texto claro en invisible sobre blanco. */
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .dropdown-menu .nav-link:hover,
html[data-theme="dark"] .dropdown-menu .nav-link:focus,
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:focus {
  background-color: var(--sigap-dark-hover) !important;
  color: var(--sigap-dark-text) !important;
}

/* Ajuste responsive del encabezado: dos filas limpias y controles en línea. */
@media (max-width: 575px) {
  #header .navbar-header,
  .right-panel .navbar-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  #header .header-menu,
  .right-panel header.header .header-menu {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  #header .theme-toggle,
  .right-panel .theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  #header .user-area,
  .right-panel .user-area {
    max-width: calc(100vw - 58px) !important;
  }

  #header .user-area > .dropdown-toggle,
  .right-panel .user-area > .dropdown-toggle {
    max-width: 100% !important;
  }
}

/* ========================================================================
   SIGAP refinamientos V4 - avatar, menu/hover, scroll, dark text y header
   ======================================================================== */

/* Avatar del usuario: mismo lenguaje visual que el resto de Font Awesome. */
#header .sigap-user-avatar,
.right-panel .sigap-user-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: var(--sigap-primary-soft, #f2e5e9) !important;
  border: 1px solid rgba(140, 29, 64, .22) !important;
  color: var(--sigap-primary, #8c1d40) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#header .sigap-user-avatar .fa,
.right-panel .sigap-user-avatar .fa {
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html[data-theme="dark"] #header .sigap-user-avatar,
html[data-theme="dark"] .right-panel .sigap-user-avatar {
  background: #34242b !important;
  border-color: rgba(188, 149, 92, .32) !important;
  color: var(--sigap-accent, #bc955c) !important;
}

/* Secciones principales del menu son interactivas. */
#left-panel .contenedor-logos.apps,
#left-panel .contenedor-logos.admin,
#left-panel .contenedor-logos > .title-menu {
  cursor: pointer !important;
}

/* Scroll interno: el panel nunca crece fuera de la pantalla. */
#left-panel .menu {
  max-height: calc(100vh - 18px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(188,149,92,.55) transparent;
  padding-bottom: 24px !important;
}

#left-panel .menu::-webkit-scrollbar {
  width: 6px;
}

#left-panel .menu::-webkit-scrollbar-track {
  background: transparent;
}

#left-panel .menu::-webkit-scrollbar-thumb {
  background: rgba(188,149,92,.48);
  border-radius: 999px;
}

#left-panel .menu::-webkit-scrollbar-thumb:hover {
  background: rgba(188,149,92,.72);
}

/* Hover/activo: guinda de fondo y TODO el contenido en blanco.
   Evita que iconos dorados/turquesa desaparezcan o pierdan contraste. */
#left-panel .menu a:hover,
#left-panel .menu a:focus-visible,
#left-panel .menu li.activo > a,
#left-panel .menu li.activadoN1 > a,
#left-panel .menu .contenedor-logos.activado > a.title-menu {
  background-color: var(--sigap-primary, #8c1d40) !important;
  color: #fff !important;
}

#left-panel .menu a:hover .fa,
#left-panel .menu a:focus-visible .fa,
#left-panel .menu li.activo > a .fa,
#left-panel .menu li.activadoN1 > a .fa,
#left-panel .menu .contenedor-logos.activado > a.title-menu .fa,
#left-panel .menu a:hover .logo,
#left-panel .menu a:focus-visible .logo {
  color: #fff !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* Evita fondos de icono demasiado similares al hover. */
#left-panel .menu a:hover .logo,
#left-panel .menu a:focus-visible .logo,
#left-panel .menu li.activo > a .logo,
#left-panel .menu li.activadoN1 > a .logo,
#left-panel .menu .contenedor-logos.activado > a.title-menu .logo {
  background: rgba(255,255,255,.10) !important;
}

/* Boton de tema perfectamente alineado con nombre/avatar. */
#header .theme-toggle,
.right-panel .theme-toggle {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 2px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  line-height: 1 !important;
}

#header .theme-toggle .fa,
.right-panel .theme-toggle .fa {
  line-height: 1 !important;
  margin: 0 !important;
}

/* Modo oscuro: texto funcional siempre claro. */
html[data-theme="dark"] .bienvenido-txt,
html[data-theme="dark"] .bienvenido-txt h1,
html[data-theme="dark"] .bienvenido-txt h2,
html[data-theme="dark"] .bienvenido-txt h3,
html[data-theme="dark"] #left-panel .title-menu,
html[data-theme="dark"] #left-panel .Nivel1 a,
html[data-theme="dark"] #left-panel .Nivel2 a {
  color: var(--sigap-dark-text, #f1edef) !important;
}

html[data-theme="dark"] .bienvenido-txt h1 {
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

/* El hover del menu mantiene la misma identidad también en oscuro. */
html[data-theme="dark"] #left-panel .menu a:hover,
html[data-theme="dark"] #left-panel .menu a:focus-visible,
html[data-theme="dark"] #left-panel .menu li.activo > a,
html[data-theme="dark"] #left-panel .menu li.activadoN1 > a,
html[data-theme="dark"] #left-panel .menu .contenedor-logos.activado > a.title-menu {
  background: var(--sigap-primary, #8c1d40) !important;
  color: #fff !important;
}

html[data-theme="dark"] #left-panel .menu a:hover .fa,
html[data-theme="dark"] #left-panel .menu a:focus-visible .fa,
html[data-theme="dark"] #left-panel .menu li.activo > a .fa,
html[data-theme="dark"] #left-panel .menu li.activadoN1 > a .fa,
html[data-theme="dark"] #left-panel .menu .contenedor-logos.activado > a.title-menu .fa {
  color: #fff !important;
}

@media (max-width: 575px) {
  #left-panel .menu {
    max-height: calc(100dvh - 12px) !important;
    padding-bottom: 42px !important;
  }

  #header .theme-toggle,
  .right-panel .theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
    margin-right: 0 !important;
  }

  #header .sigap-user-avatar,
  .right-panel .sigap-user-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
  }
}

/* ========================================================================
   SIGAP refinamientos V5 - contraste, usuario y alineacion del tema
   ======================================================================== */

/* BIENVENIDO: neutraliza definitivamente el color negro heredado. */
.bienvenido-txt,
.bienvenido-txt h1,
.bienvenido-txt h2,
.bienvenido-txt h3,
html[data-theme="dark"] .bienvenido-txt,
html[data-theme="dark"] .bienvenido-txt h1,
html[data-theme="dark"] .bienvenido-txt h2,
html[data-theme="dark"] .bienvenido-txt h3 {
  color: #fff !important;
}

.bienvenido-txt h1 {
  border-right-color: var(--sigap-primary, #8c1d40) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
}

/* El titulo activo del menu siempre debe contrastar: blanco literal,
   sin depender de una variable redefinida por el tema. */
#left-panel .menu > li.contenedor-logos.activado > a.title-menu,
#left-panel .menu > li.contenedor-logos.admin.activado > a.title-menu,
#left-panel .menu > li.contenedor-logos.apps.activado > a.title-menu,
#left-panel .menu > li.contenedor-logos.activado > a.title-menu span,
#left-panel .menu > li.contenedor-logos.activado > a.title-menu .fa,
html[data-theme="dark"] #left-panel .menu > li.contenedor-logos.activado > a.title-menu,
html[data-theme="dark"] #left-panel .menu > li.contenedor-logos.activado > a.title-menu span,
html[data-theme="dark"] #left-panel .menu > li.contenedor-logos.activado > a.title-menu .fa {
  color: #fff !important;
}

/* Header: tema + usuario comparten una misma linea base y dimensiones. */
#header .header-menu,
.right-panel header.header .header-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

#header .user-area,
.right-panel .user-area {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

#header .user-area > .dropdown-toggle,
.right-panel .user-area > .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  min-height: 40px !important;
  line-height: 1 !important;
}

#header .user-area h5,
.right-panel .user-area h5 {
  display: flex !important;
  align-items: center !important;
  min-height: 38px !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Avatar mas consistente con el resto de iconografia. */
#header .sigap-user-avatar,
.right-panel .sigap-user-avatar {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: var(--sigap-primary-soft, #f2e5e9) !important;
  border: 1px solid rgba(140,29,64,.24) !important;
  color: var(--sigap-primary, #8c1d40) !important;
}

#header .sigap-user-avatar .fa,
.right-panel .sigap-user-avatar .fa {
  font-size: 19px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: inherit !important;
}

/* Desactiva el indicador heredado que se posicionaba lejos del avatar. */
#header .user-area .dropdown-toggle::before,
.right-panel .user-area .dropdown-toggle::before {
  display: none !important;
  content: none !important;
}

/* Nuevo estado conectado visualmente al avatar. */
#header .sigap-user-avatar::after,
.right-panel .sigap-user-avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sigap-success, #3f7d62);
  border: 2px solid #fff;
  box-sizing: border-box;
  pointer-events: none;
}

html[data-theme="dark"] #header .sigap-user-avatar,
html[data-theme="dark"] .right-panel .sigap-user-avatar {
  background: #30232a !important;
  border-color: rgba(188,149,92,.36) !important;
  color: var(--sigap-accent, #bc955c) !important;
}

html[data-theme="dark"] #header .sigap-user-avatar::after,
html[data-theme="dark"] .right-panel .sigap-user-avatar::after {
  border-color: var(--sigap-dark-surface, #211d1f) !important;
}

/* Modo claro/oscuro: misma caja que el avatar y centro optico del glifo. */
#header .theme-toggle,
.right-panel .theme-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  position: relative !important;
  top: 0 !important;
  transform: none;
  line-height: 1 !important;
}

#header .theme-toggle .fa,
.right-panel .theme-toggle .fa {
  width: 19px !important;
  height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  line-height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header .theme-toggle:active,
.right-panel .theme-toggle:active {
  transform: scale(.96) !important;
}

@media (max-width: 575px) {
  #header .header-menu,
  .right-panel header.header .header-menu {
    gap: 7px !important;
  }

  #header .theme-toggle,
  .right-panel .theme-toggle,
  #header .sigap-user-avatar,
  .right-panel .sigap-user-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
    border-radius: 8px !important;
  }

  #header .sigap-user-avatar .fa,
  .right-panel .sigap-user-avatar .fa {
    font-size: 16px !important;
  }

  #header .theme-toggle .fa,
  .right-panel .theme-toggle .fa {
    width: 17px !important;
    height: 17px !important;
    font-size: 15px !important;
    line-height: 17px !important;
  }

  #header .sigap-user-avatar::after,
  .right-panel .sigap-user-avatar::after {
    width: 9px;
    height: 9px;
    right: -2px;
    bottom: -2px;
  }

  #header .user-area h5,
  .right-panel .user-area h5,
  #header .user-area > .dropdown-toggle,
  .right-panel .user-area > .dropdown-toggle {
    min-height: 34px !important;
  }
}

/* ========================================================================
   SIGAP refinamientos V6 - BIENVENIDO contorneado + header centrado
   ======================================================================== */

/* BIENVENIDO: texto blanco estable con contorno institucional.
   El contorno evita depender del color de fondo en claro/oscuro. */
.bienvenido-txt h1,
html[data-theme="dark"] .bienvenido-txt h1 {
  color: #fff !important;
  -webkit-text-stroke: 1px var(--sigap-primary, #8c1d40);
  text-shadow:
    -1px -1px 0 var(--sigap-primary, #8c1d40),
     1px -1px 0 var(--sigap-primary, #8c1d40),
    -1px  1px 0 var(--sigap-primary, #8c1d40),
     1px  1px 0 var(--sigap-primary, #8c1d40),
     0 2px 4px rgba(0,0,0,.16) !important;
}

/* El bloque derecho del header usa un centro geometrico real. */
#header .top-right,
.right-panel header.header .top-right {
  display: flex !important;
  align-items: center !important;
}

#header .header-menu,
.right-panel header.header .header-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-content: center !important;
  min-height: 44px !important;
  line-height: 1 !important;
}

/* Tema: centrar por la propia caja, sin top/offset heredados. */
#header .theme-toggle,
.right-panel .theme-toggle {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
  align-self: center !important;
  vertical-align: middle !important;
  transform: translateY(0) !important;
}

#header .theme-toggle .fa,
.right-panel .theme-toggle .fa {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

#header .theme-toggle:active,
.right-panel .theme-toggle:active {
  transform: scale(.96) !important;
}

/* Movil: centrar tema + usuario/avatar como un unico conjunto. */
@media (max-width: 575px) {
  #header .top-right,
  .right-panel header.header .top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #header .header-menu,
  .right-panel header.header .header-menu {
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #header .user-area,
  .right-panel .user-area {
    width: auto !important;
    max-width: calc(100vw - 62px) !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  #header .user-area > .dropdown-toggle,
  .right-panel .user-area > .dropdown-toggle {
    justify-content: center !important;
    margin: 0 !important;
  }

  #header .theme-toggle,
  .right-panel .theme-toggle {
    margin: 0 !important;
    flex: 0 0 32px !important;
  }
}

/* ========================================================================
   SIGAP refinamientos V7 - alineacion header escritorio/tablet/movil
   ======================================================================== */

/* PC y tablet: conservar el bloque de usuario/tema en el extremo DERECHO. */
@media (min-width: 576px) {
  #header .top-right,
  .right-panel header.header .top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }

  #header .header-menu,
  .right-panel header.header .header-menu {
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* Tema y avatar comparten exactamente el mismo eje vertical. */
#header .header-menu,
.right-panel header.header .header-menu {
  flex-direction: row !important;
  align-items: center !important;
}

#header .theme-toggle,
.right-panel .theme-toggle,
#header .sigap-user-avatar,
.right-panel .sigap-user-avatar {
  box-sizing: border-box !important;
  align-self: center !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#header .theme-toggle,
.right-panel .theme-toggle {
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* El enlace del usuario no introduce desplazamiento vertical respecto al tema. */
#header .user-area,
.right-panel .user-area,
#header .user-area > .dropdown-toggle,
.right-panel .user-area > .dropdown-toggle {
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Solo telefono: centrar como conjunto tema + usuario/avatar. */
@media (max-width: 575px) {
  #header .top-right,
  .right-panel header.header .top-right {
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  #header .header-menu,
  .right-panel header.header .header-menu {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
}


/* ========================================================================
   SIGAP refinamientos V8 - tema integrado al contenedor del usuario
   ======================================================================== */
/* El control claro/oscuro comparte ahora exactamente la misma linea/flex
   que nombre y avatar. No depende de offsets externos del header. */
#header .user-area > a.dropdown-toggle.active,
.right-panel .user-area > a.dropdown-toggle.active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  min-height: 40px !important;
  line-height: 1 !important;
}

#header .user-area .theme-toggle-inline,
.right-panel .user-area .theme-toggle-inline {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
  cursor: pointer !important;
}

#header .user-area .theme-toggle-inline .fa,
.right-panel .user-area .theme-toggle-inline .fa {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
  transform: none !important;
}

/* Nombre y avatar quedan en el mismo eje que el tema. */
#header .user-area > a.dropdown-toggle.active h5,
.right-panel .user-area > a.dropdown-toggle.active h5,
#header .user-area > a.dropdown-toggle.active .sigap-user-avatar,
.right-panel .user-area > a.dropdown-toggle.active .sigap-user-avatar {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* PC/tablet: conservar todo el grupo a la DERECHA. */
@media (min-width: 576px) {
  #header .user-area,
  .right-panel .user-area {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  #header .user-area > a.dropdown-toggle.active,
  .right-panel .user-area > a.dropdown-toggle.active {
    justify-content: flex-end !important;
  }
}

/* Telefono: centrar el conjunto completo tema + nombre + avatar. */
@media (max-width: 575px) {
  #header .user-area,
  .right-panel .user-area {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #header .user-area > a.dropdown-toggle.active,
  .right-panel .user-area > a.dropdown-toggle.active {
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 auto !important;
  }

  #header .user-area .theme-toggle-inline,
  .right-panel .user-area .theme-toggle-inline {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/* =========================================================
   V10 - ESPACIADO DEL BOTON MODO CLARO/OSCURO
   ========================================================= */
#header .user-area > a.dropdown-toggle.active #themeToggle,
.right-panel .user-area > a.dropdown-toggle.active #themeToggle {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

@media (max-width: 575px) {
  #header .user-area > a.dropdown-toggle.active #themeToggle,
  .right-panel .user-area > a.dropdown-toggle.active #themeToggle {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }
}

/* =========================================================
   LOGIN - ALINEACION FINAL A LA DERECHA
   Mantiene logo a la izquierda y herramientas a la derecha.
   ========================================================= */
#header.login-header {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#header.login-header .top-left {
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

#header.login-header .login-header-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: auto !important;
  float: none !important;
  text-align: right !important;
}

#header.login-header .login-header-tools #themeToggle {
  margin-left: auto !important;
  margin-right: 0 !important;
}

@media (max-width: 575px) {
  #header.login-header .login-header-tools {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
  }
}