/*
 * DATALYSE MODERN — capa visual final y reversible
 * Base monocromática inspirada en ElevenLabs/ChatGPT. No cambia contratos
 * HTML/JS; Tabler permanece como icon font y solo se normaliza ópticamente.
 */

/* 01 · Tokens */
:root {
  --dt-topbar-h: 44px !important;
  --rp-topbar: var(--dt-topbar-h) !important;
  --dt-blue: #0081e0;
  --dt-cyan: #20bde5;
  --dt-coral: #ff7a59;
  --dt-unread: #006fbe;
  --dt-danger: #d94949;
  --dt-success: #16835b;
  --dt-warning: #b86513;
  --dt-radius-sm: 6px;
  --dt-radius: 8px;
  --dt-radius-lg: 12px;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --el-font: var(--font-sans);
}

[data-bs-theme="light"] {
  color-scheme: light;
  --dt-app: #f7f7f6;
  --dt-sidebar: #f2f2f1;
  --dt-topbar: #fafaf9;
  --dt-surface: #ffffff;
  --dt-surface-2: #eeeeec;
  --dt-overlay: #ffffff;
  --dt-border: rgba(15, 15, 15, .10);
  --dt-border-strong: rgba(15, 15, 15, .18);
  --dt-text: #111110;
  --dt-muted: #5f5f5c;
  --dt-faint: #7a7a76;
  --dt-hover: #ededeb;
  --dt-active: #e7e7e5;
  --dt-focus: rgba(15, 15, 15, .72);
  --dt-focus-ring: rgba(15, 15, 15, .12);
  --dt-cta: #006fbe;
  --dt-cta-rgb: 0, 111, 190;
  --dt-cta-hover: #005fa6;
  --dt-cta-fg: #ffffff;
  --dt-link: #0068b5;
  --dt-link-rgb: 0, 104, 181;
  --dt-backdrop: rgba(15, 15, 15, .44);
  --dt-pop-shadow: 0 18px 45px rgba(15, 15, 15, .14);
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --dt-app: #101010;
  --dt-sidebar: #151515;
  --dt-topbar: #111111;
  --dt-surface: #191919;
  --dt-surface-2: #222222;
  --dt-overlay: #242424;
  --dt-border: rgba(255, 255, 255, .085);
  --dt-border-strong: rgba(255, 255, 255, .16);
  --dt-text: #ededeb;
  --dt-muted: #aaa9a5;
  --dt-faint: #7f7e7a;
  --dt-hover: rgba(255, 255, 255, .055);
  --dt-active: rgba(255, 255, 255, .09);
  --dt-focus: rgba(255, 255, 255, .72);
  --dt-focus-ring: rgba(255, 255, 255, .14);
  --dt-cta: #4bb2f4;
  --dt-cta-rgb: 75, 178, 244;
  --dt-cta-hover: #70c2f7;
  --dt-cta-fg: #07141c;
  --dt-link: #71c4f8;
  --dt-link-rgb: 113, 196, 248;
  --dt-backdrop: rgba(0, 0, 0, .70);
  --dt-pop-shadow: 0 20px 52px rgba(0, 0, 0, .48);
}

[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --el-bg-app: var(--dt-app);
  --el-bg-sidebar: var(--dt-sidebar);
  --el-bg-raised: var(--dt-surface);
  --el-bg-raised-2: var(--dt-surface-2);
  --el-bg-overlay: var(--dt-overlay);
  --el-border: var(--dt-border);
  --el-border-strong: var(--dt-border-strong);
  --el-text: var(--dt-text);
  --el-text-muted: var(--dt-muted);
  --el-text-dim: var(--dt-faint);
  --el-hover: var(--dt-hover);
  --el-active: var(--dt-active);
  --el-accent: var(--dt-cta);
  --el-accent-rgb: var(--dt-cta-rgb);
  --el-accent-hover: var(--dt-cta-hover);
  --el-accent-fg: var(--dt-cta-fg);
  --el-accent-soft: var(--dt-active);
  --el-accent-ring: var(--dt-focus-ring);
  --el-indigo: var(--dt-link);
  --el-danger: var(--dt-danger);
  --el-success: var(--dt-success);
  --el-warning: var(--dt-warning);
  --el-shadow-xs: none;
  --el-shadow-sm: none;
  --el-shadow: var(--dt-pop-shadow);
  --el-shadow-lg: var(--dt-pop-shadow);
  --el-backdrop: var(--dt-backdrop);
  --white-color: var(--dt-surface);
  --hover-color: var(--dt-hover);
  --brand-color: var(--dt-cta);
  --brand-color-hover: var(--dt-cta-hover);
  --text-color: var(--dt-text);
  --text-secondary-color: var(--dt-muted);
  --datalyse-text-color: var(--dt-muted);
  --text-muted-color: var(--dt-muted);
  --bg-color: var(--dt-surface);
  --bg-secondary: var(--dt-app);
  --bg-secondary-color: var(--dt-app);
  --bg-tertiary-color: var(--dt-surface-2);
  --datalyse-backgroud-color: var(--dt-app);
  --datalyse-bg-input: var(--dt-surface);
  --border-color: var(--dt-border);
  --border-strong-color: var(--dt-border-strong);
  --fondoresaltado-color: var(--dt-active);
  --fondoresaltadoclaro-color: var(--dt-hover);
  --fondodestaca-color: var(--dt-surface);
  --module-color: var(--dt-app);
  --rp-accent: var(--dt-cta) !important;
  --rp-accent-soft: color-mix(in srgb, var(--dt-cta) 12%, transparent) !important;
  --rp-accent-fg: var(--dt-cta-fg) !important;
  --bs-body-bg: var(--dt-app);
  --bs-body-color: var(--dt-text);
  --bs-border-color: var(--dt-border);
  --bs-primary: var(--dt-cta);
  --bs-primary-rgb: var(--dt-cta-rgb);
  --bs-link-color: var(--dt-link);
  --bs-link-color-rgb: var(--dt-link-rgb);
  --bs-link-hover-color: var(--dt-cta-hover);
  --bs-focus-ring-color: var(--dt-focus-ring);
  --bs-light-primary: color-mix(in srgb, var(--dt-cta) 10%, transparent);
}

/* 02 · Base, contenido y foco */
html,
body,
#main-wrapper,
.page-wrapper,
.body-wrapper {
  color: var(--dt-text);
  background: var(--dt-app) !important;
}

body {
  font-family: var(--el-font) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

.body-wrapper {
  min-height: 100vh;
  padding-top: var(--dt-topbar-h) !important;
  background-image: none !important;
}

#akicontenidonormal:not([data-module="overview"]) {
  padding-top: 20px;
  padding-bottom: 32px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--dt-text) !important;
  letter-spacing: -.018em;
  font-optical-sizing: auto;
}

.card-title,
.modal-title {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

a {
  color: var(--dt-link);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--dt-cta-hover);
}

::selection {
  color: var(--dt-text);
  background: var(--dt-active);
}

:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--dt-focus);
  outline-offset: 2px;
}

/* Un solo borde y un único ring monocromático para controles editables. */
.form-control,
.form-select,
select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
.input-group-text,
.dui-select__trigger,
.select2-selection,
.choices__inner {
  color: var(--dt-text) !important;
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border-strong) !important;
  border-radius: var(--dt-radius) !important;
  box-shadow: none !important;
}

.menu-wrapper.is-select > [data-type="menu-toggle-button"],
.menu-wrapper.is-select > .btn-plain[data-type="menu-toggle-button"],
.modal .menu-wrapper.is-select > [data-type="menu-toggle-button"],
.modal .menu-wrapper.is-select > .btn-plain[data-type="menu-toggle-button"] {
  min-height: 36px;
  color: var(--dt-text) !important;
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border-strong) !important;
  border-radius: var(--dt-radius) !important;
  box-shadow: none !important;
}

.modal .menu-wrapper.is-select:focus-within {
  border: 0 !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  [data-bs-theme="light"] :is(
    .form-control,
    .form-select,
    select,
    textarea.form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    .dui-select__trigger,
    .select2-selection,
    .choices__inner
  ):not(:disabled):hover {
    background: #fff !important;
    border-color: rgba(15, 15, 15, .28) !important;
  }

  [data-bs-theme="light"] .menu-wrapper.is-select > [data-type="menu-toggle-button"]:hover,
  [data-bs-theme="light"] .menu-wrapper.is-select > .btn-plain[data-type="menu-toggle-button"]:hover,
  [data-bs-theme="light"] .modal .menu-wrapper.is-select > [data-type="menu-toggle-button"]:hover,
  [data-bs-theme="light"] .modal .menu-wrapper.is-select > .btn-plain[data-type="menu-toggle-button"]:hover {
    background: #fff !important;
    border-color: rgba(15, 15, 15, .28) !important;
  }
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),
.dui-select__trigger:focus,
.dui-select--open > .dui-select__trigger,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner,
.menu-wrapper.is-select > [data-type="menu-toggle-button"]:focus,
.menu-wrapper.is-select > .btn-plain[data-type="menu-toggle-button"]:focus,
.menu-wrapper.is-select:has(> ul.menu.is-visible) > [data-type="menu-toggle-button"],
.menu-wrapper.is-select:has(> ul.menu.is-visible) > .btn-plain[data-type="menu-toggle-button"],
.daterangepicker input:focus,
.daterangepicker .input-mini.active,
.flatpickr-input:focus,
#salesn-root .salesn-pop input:focus,
#salesn-root .salesn-pop select:focus {
  outline: 0 !important;
  border-width: 1px !important;
  border-color: var(--dt-focus) !important;
  box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}

.dui-dt-search:focus-within,
#salesn-root .salesn-search:focus-within,
.input-group:focus-within {
  border-color: var(--dt-focus) !important;
  box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}

.dui-dt-search input,
#salesn-root .salesn-search input,
#salesn-root .salesn-pop .pfind input,
.dui-select__search,
.menusearchmarccinput {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.form-check-input:focus-visible {
  outline: 0 !important;
  border-color: var(--dt-focus) !important;
  box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--dt-cta) !important;
  border-color: var(--dt-cta) !important;
}

.daterangepicker,
.flatpickr-calendar {
  color: var(--dt-text) !important;
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  color: var(--dt-surface) !important;
  background: var(--dt-text) !important;
  border-color: var(--dt-text) !important;
}

/* 03 · Topbar: 44px desktop, sólido y sin decoración */
.topbar,
.app-header,
.header,
.navbar.topbar {
  height: var(--dt-topbar-h);
  padding: 0 10px !important;
  background: var(--dt-topbar) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.topbar::before,
.topbar::after {
  content: none !important;
  display: none !important;
}

.topbar > .with-vertical,
.topbar .navbar,
#navbarNav,
#navbarNav > div {
  height: 100%;
  min-height: var(--dt-topbar-h) !important;
}

.topbar .navbar {
  position: relative;
  padding: 0 !important;
}

.topbar .navbar .navbar-nav {
  gap: 2px;
}

.topbar-current-title-item {
  display: flex;
  min-width: 0;
  max-width: min(30vw, 280px);
  align-items: center;
}

.topbar-current-title {
  display: block;
  min-width: 0;
  margin-left: 5px;
  padding: 0 5px;
  overflow: hidden;
  color: var(--dt-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-optical-sizing: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-current-title:empty {
  display: none;
}

.topbar .navbar .nav-icon-hover-bg {
  width: 32px;
  height: 32px;
  margin: 0 !important;
  border-radius: 7px !important;
  background: transparent;
  transition: color .12s ease, background-color .12s ease;
}

.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg .nav-link {
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--dt-muted);
  line-height: 1;
  justify-content: center;
}

.topbar .navbar .nav-icon-hover-bg:hover {
  color: var(--dt-text);
  background: var(--dt-hover);
}

.topbar .navbar .nav-icon-hover-bg:active {
  background: var(--dt-active);
}

.topbar .navbar .nav-icon-hover-bg .nav-link:focus-visible,
#topsearchnavv .topbar-search-pill:focus-visible,
#drop1:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}

#topsearchnavv {
  margin: 0 4px 0 0 !important;
}

#topsearchnavv .nav-link.topbar-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  color: var(--dt-muted);
  background: transparent !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 7px;
  box-shadow: none !important;
  font-size: 12px;
}

#topsearchnavv .nav-link.topbar-search-pill:hover {
  color: var(--dt-text);
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
}

#headerCollapse .topbar-sidebar-icon {
  display: none !important;
  width: 16px;
  min-width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

#headerCollapse .topbar-sidebar-icon-collapse,
body[data-sidebartype="mini-sidebar"] #headerCollapse .topbar-sidebar-icon-expand {
  display: inline-flex !important;
}

body[data-sidebartype="mini-sidebar"] #headerCollapse .topbar-sidebar-icon-collapse {
  display: none !important;
}

.topbar .navbar .nav-item.dropdown.ms-2 {
  margin-left: 3px !important;
}

.topbar .navbar .nav-item.dropdown.ms-2 .nav-link {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 2px !important;
  align-items: center;
  justify-content: center;
}

.topbar .navbar img.js-sidebar-avatar {
  width: 28px !important;
  height: 28px !important;
  box-shadow: 0 0 0 1px var(--dt-border-strong) !important;
  transition: box-shadow .12s ease;
}

.topbar .navbar .nav-item.dropdown.ms-2 .nav-link:hover img.js-sidebar-avatar {
  box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}

.topbar .navbar .notification {
  width: 6px !important;
  height: 6px !important;
  top: 5px !important;
  right: 5px !important;
  box-shadow: 0 0 0 2px var(--dt-topbar) !important;
}

/* Panel de notificaciones: aislado de los botones y colores legacy. */
.topbar .dropdown-menu.topbar-notifications-dropdown {
  width: min(392px, calc(100vw - 20px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--dt-text) !important;
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

.topbar-notifications-panel {
  color: var(--dt-text);
  background: var(--dt-overlay);
}

.topbar .dropdown-menu.topbar-notifications-dropdown .card-header {
  padding: 10px 11px !important;
  background: var(--dt-overlay) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dt-border) !important;
}

.topbar-notifications-header,
.topbar-notifications-heading {
  display: flex;
  align-items: center;
}

.topbar-notifications-header {
  min-height: 32px;
  gap: 10px;
  justify-content: space-between;
}

.topbar-notifications-heading {
  min-width: 0;
  gap: 9px;
}

.topbar-notifications-heading-icon {
  display: inline-flex;
  width: 30px;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: var(--dt-text);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 9px;
}

.topbar-notifications-heading-icon .ti {
  font-size: 15px !important;
}

.topbar .dropdown-menu.topbar-notifications-dropdown .card-header-title {
  overflow: hidden;
  color: var(--dt-text) !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-notifications-readall,
.topbar-notifications-viewall,
.notismarc-action,
.notismarc-delete {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}

.topbar-notifications-readall {
  display: inline-flex;
  min-height: 30px;
  padding: 0 8px;
  align-items: center;
  gap: 5px;
  color: var(--dt-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.topbar-notifications-readall .ti {
  font-size: 14px !important;
}

.topbar-notifications-readall:hover {
  color: var(--dt-text);
  background: var(--dt-hover);
  border-color: var(--dt-border);
}

.topbar-notifications-readall:active,
.topbar-notifications-viewall:active,
.notismarc-action:active {
  transform: scale(.975);
}

.topbar-notifications-readall:focus-visible,
.topbar-notifications-viewall:focus-visible,
.notismarc-action:focus-visible,
.notismarc-delete:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--dt-focus-ring);
}

.topbar .topbar-notifications-dropdown #akitodaslasnotisv3 {
  max-height: min(390px, calc(100vh - 190px));
  padding: 5px 6px 3px !important;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--dt-overlay);
  scrollbar-color: var(--dt-border-strong) transparent;
  scrollbar-width: thin;
}

.topbar .topbar-notifications-dropdown #akitodaslasnotisv3 .simplebar-content {
  padding: 5px 6px 3px !important;
}

.topbar .topbar-notifications-dropdown #akitodaslasnotisv3 .list-group-item {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.topbar .topbar-notifications-dropdown .notismarc {
  position: relative;
  display: block;
  width: 100%;
  margin: 2px 0;
  padding: 11px 10px 10px 18px;
  color: var(--dt-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .13s ease, transform .13s ease;
}

.topbar .topbar-notifications-dropdown .notismarc:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

.topbar .topbar-notifications-dropdown .notismarc:active {
  transform: scale(.992);
}

.topbar .topbar-notifications-dropdown .notismarc-unread {
  background: var(--dt-active) !important;
}

.topbar .topbar-notifications-dropdown .notismarc-unread::before {
  position: absolute;
  top: 17px;
  left: 8px;
  width: 4px;
  height: 4px;
  content: "";
  background: var(--dt-text);
  border-radius: 50%;
  opacity: .72;
}

.topbar .topbar-notifications-dropdown .notismarctitle {
  margin: 0 !important;
  overflow-wrap: anywhere;
  color: var(--dt-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.topbar .topbar-notifications-dropdown .notismarc-textsecondary {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--dt-muted) !important;
  font-size: 12px !important;
  line-height: 1.38;
}

.topbar .topbar-notifications-dropdown .notismarc-textsecondary > br:last-child {
  display: none;
}

.topbar .topbar-notifications-dropdown .notismarc-meta {
  display: flex;
  min-height: 28px;
  margin-top: 9px;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.topbar .topbar-notifications-dropdown .notification-time {
  display: flex;
  min-width: 0;
  margin: 0 !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.notismarc-action {
  display: inline-flex;
  min-height: 27px;
  padding: 4px 9px;
  align-items: center;
  justify-content: center;
  color: var(--dt-text) !important;
  background: var(--dt-surface-2) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 7px;
  box-shadow: none !important;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.notismarc-action:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
}

.notismarc-action--approve {
  color: var(--dt-success) !important;
}

.notismarc-action--decline {
  color: var(--dt-danger) !important;
}

[data-bs-theme="dark"] .notismarc-action--approve {
  color: #78d5af !important;
}

[data-bs-theme="dark"] .notismarc-action--decline {
  color: #f08a8a !important;
}

.topbar .topbar-notifications-dropdown .notismarc-meta-end {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 3px;
  color: var(--dt-faint);
}

.topbar .topbar-notifications-dropdown .notismarc-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.notismarc-delete {
  display: inline-flex;
  width: 27px;
  min-width: 27px;
  height: 27px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--dt-faint) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px;
  box-shadow: none !important;
  opacity: .72;
  transition: color .12s ease, background-color .12s ease, opacity .12s ease;
}

.notismarc-delete .ti {
  font-size: 14px !important;
}

.notismarc-delete:hover {
  color: var(--dt-danger) !important;
  background: color-mix(in srgb, var(--dt-danger) 10%, transparent) !important;
  opacity: 1;
}

.topbar .topbar-notifications-dropdown #NO_HAY_NOTISV3 {
  padding: 34px 16px !important;
  color: var(--dt-muted);
  background: transparent !important;
  font-size: 12px;
  line-height: 1.55;
}

.topbar .topbar-notifications-dropdown #NO_HAY_NOTISV3 .ti {
  display: inline-flex;
  margin: 7px 0 3px;
  color: var(--dt-faint);
  font-size: 23px !important;
}

.topbar-notifications-footer {
  padding: 9px 10px 10px;
  background: var(--dt-overlay);
  border-top: 1px solid var(--dt-border);
}

.topbar-notifications-viewall {
  display: flex;
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--dt-text);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.topbar-notifications-viewall .ti {
  font-size: 14px !important;
  transition: translate .14s ease;
}

.topbar-notifications-viewall:hover {
  color: var(--dt-text);
  background: var(--dt-hover);
  border-color: var(--dt-border-strong);
}

.topbar-notifications-viewall:hover .ti {
  translate: 2px 0;
}

.topbar-planlimit-chip {
  min-height: 28px;
  padding: 3px 9px;
  border-width: 1px;
  box-shadow: none !important;
  transform: none !important;
}

/* 04 · Sidebar compacto y plano */
.left-sidebar {
  width: 224px !important;
  min-width: 224px !important;
  max-width: 224px !important;
  background: var(--dt-sidebar) !important;
  background-image: none !important;
  border-right: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

.left-sidebar .brand-logo {
  height: var(--dt-topbar-h);
  min-height: var(--dt-topbar-h) !important;
  padding: 0 13px !important;
  background: var(--dt-sidebar) !important;
  border-bottom: 0 !important;
}

.left-sidebar .brand-logo .logo-img {
  text-align: left !important;
}

.left-sidebar .brand-logo .logo-img img {
  width: auto;
  max-width: 132px;
  max-height: 21px !important;
  transform: none !important;
}

[data-bs-theme="light"] .left-sidebar .dark-logo,
[data-bs-theme="dark"] .left-sidebar .light-logo {
  display: block !important;
}

[data-bs-theme="light"] .left-sidebar .light-logo,
[data-bs-theme="dark"] .left-sidebar .dark-logo {
  display: none !important;
}

:is(#sidebarnav, #sidebarMasFooter) {
  padding: 4px 0;
}

:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap {
  min-height: 0;
  margin: 0;
  padding: 15px 14px 5px !important;
  color: var(--dt-muted);
  border: 0 !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .005em;
  text-transform: none;
}

:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap .hide-menu {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

:is(#sidebarnav, #sidebarMasFooter) .nav-small-cap-icon {
  display: none !important;
}

:is(#sidebarnav, #sidebarMasFooter) li.nav-small-cap[data-sidebar-subsection="y"] {
  padding-left: 20px !important;
  color: var(--dt-muted);
}

:is(#sidebarnav, #sidebarMasFooter) li.nav-small-cap[data-sidebar-subsection="y"] .hide-menu {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  opacity: 1;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-item {
  margin: 2px 7px;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
  min-height: 35px;
  gap: 9px;
  padding: 7px 9px !important;
  color: var(--dt-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 450;
  transition: color .12s ease, background-color .12s ease !important;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link > span:first-child {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link .popup-badge.spanacuantos {
  top: -7px !important;
  right: -9px !important;
  left: auto !important;
  z-index: 4;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  color: #fff !important;
  background: var(--dt-unread) !important;
  border: 2px solid var(--dt-sidebar) !important;
  border-radius: 999px !important;
  box-sizing: border-box;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 12px;
  transform: none !important;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link.active,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-item.selected > .sidebar-link {
  color: var(--dt-text) !important;
  background: var(--dt-active) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px var(--dt-focus) !important;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-unpin-btn,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-clonebtn,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-editbtn,
:is(#sidebarnav, #sidebarMasFooter) .sidebar-section-delbtn {
  top: 50% !important;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  line-height: 18px !important;
  transform: translateY(-50%) !important;
}

:is(#sidebarnav, #sidebarMasFooter) li.sidebar-item[data-sidebar-in-subsection="y"] {
  margin-left: 14px;
}

:is(#sidebarnav, #sidebarMasFooter) li.sidebar-item[data-sidebar-in-subsection="y"] > .sidebar-link {
  border-left: 0 !important;
  border-radius: 7px;
}

#sidebarMasColapsable,
body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0 !important;
}

#sidebarMasFooter {
  margin-bottom: 14px;
}

#sidebarMasColapsable > .sidebar-link {
  color: var(--dt-muted) !important;
  background: transparent !important;
}

#sidebarMasColapsable > .sidebar-link:hover,
#sidebarMasColapsable > .sidebar-link[aria-expanded="true"] {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

.left-sidebar .simplebar-scrollbar::before {
  width: 4px;
  background: var(--dt-border-strong) !important;
}

@media (min-width: 1300px) {
  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) .left-sidebar,
  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) .left-sidebar:hover {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
  }

  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) .page-wrapper {
    margin-left: 224px !important;
  }

  [data-layout="vertical"] body:not([data-sidebartype="mini-sidebar"]) :is(.topbar, .app-header, .header, .navbar.topbar) {
    left: 224px !important;
    width: calc(100vw - 224px) !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasCats.show {
    left: 232px;
    bottom: 10px;
    width: 210px;
    height: min(400px, calc(100vh - 72px));
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse.show,
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasColapsable > ul.collapse.in {
    left: 442px;
    bottom: 10px;
    width: 300px;
    height: min(400px, calc(100vh - 72px));
  }
}

@media (min-width: 1440px) {
  .topbar .navbar > .navbar-nav:first-child {
    min-width: 0;
    max-width: calc(50% - 118px);
  }

  #topsearchnavv {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(160px, 14vw, 210px);
    margin: 0 !important;
    transform: translate(-50%, -50%);
  }

  #topsearchnavv .nav-link.topbar-search-pill {
    width: 100%;
  }
}

/* Mini-sidebar: conserva rail, tooltips y flyout More. */
[data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .left-sidebar,
[data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .left-sidebar:hover {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

body[data-sidebartype="mini-sidebar"] .page-wrapper {
  margin-left: 60px !important;
}

body[data-sidebartype="mini-sidebar"] :is(.topbar, .app-header, .header, .navbar.topbar) {
  left: 60px !important;
  width: calc(100vw - 60px) !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo {
  justify-content: center !important;
  padding: 0 !important;
}

[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .logo-img img {
  width: 28px !important;
  height: 28px !important;
  max-height: 28px !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-item {
  margin: 2px 6px;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
  min-height: 34px;
  padding: 8px !important;
  justify-content: center !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap {
  min-height: 5px;
  padding: 3px 4px 1px !important;
}

[data-sidebartype="mini-sidebar"] :is(#sidebarnav, #sidebarMasFooter) .nav-small-cap::before {
  content: none !important;
  display: none !important;
}

/* More: una superficie funcional, sin adornos internos. */
#sidebarMasCats.show,
#sidebarMasColapsable > ul.collapse.show,
#sidebarMasColapsable > ul.collapse.in {
  color: var(--dt-text) !important;
  background: var(--dt-overlay) !important;
  border-color: var(--dt-border) !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

#sidebarMasCats .mas-cat-btn,
#sidebarMasList > li.mas-cat-header {
  color: var(--dt-muted) !important;
  border-radius: 7px;
}

#sidebarMasCats .mas-cat-btn:hover,
#sidebarMasCats .mas-cat-btn.active,
#sidebarMasList > li.mas-cat-header:hover,
#sidebarMasList > li.mas-cat-header.open {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  box-shadow: none !important;
}

[data-sidebartype="mini-sidebar"] #sidebarMasCats.show {
  left: 68px;
  bottom: 10px;
  width: 210px;
  height: min(400px, calc(100vh - 72px));
}

[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.show,
[data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.in {
  left: 278px !important;
  bottom: 10px !important;
  width: 292px !important;
  height: min(400px, calc(100vh - 72px));
}

/* 05 · Iconografía Tabler normalizada (forma interna no se altera por CSS). */
:is(
  .topbar,
  .left-sidebar,
  .dropdown-menu,
  .dui-select__dropdown,
  .dui-popover,
  .profdd,
  .btn
) .ti {
  display: inline-flex;
  width: 18px;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: 17px;
  line-height: 18px;
  vertical-align: -.12em;
  transition: color .12s ease, transform .12s ease;
}

:is(#sidebarnav, #sidebarMasFooter) .sidebar-link .ti {
  color: inherit !important;
}

@media (hover: hover) {
  .topbar .nav-link:hover .ti,
  :is(#sidebarnav, #sidebarMasFooter) .sidebar-link:hover .ti:not(.sidebar-unpin-btn),
  .dropdown-item:hover .ti {
    transform: scale(1.025);
  }
}

/* 06 · Superficies y acciones compartidas */
.card {
  background: var(--dt-surface) !important;
  border: 0 !important;
  border-radius: var(--dt-radius-lg) !important;
  box-shadow: none !important;
}

.card-header,
.card-footer {
  color: var(--dt-text);
  background: transparent !important;
  border: 0 !important;
}

.btn {
  min-height: 34px;
  border-radius: var(--dt-radius);
  box-shadow: none !important;
  font-weight: 600;
  transition: color .12s ease, background-color .12s ease, border-color .12s ease, transform .08s ease;
}

.btn-sm {
  min-height: 30px;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
  color: var(--dt-cta-fg) !important;
  background: var(--dt-cta) !important;
  border-color: var(--dt-cta) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--dt-cta-fg) !important;
  background: var(--dt-cta-hover) !important;
  border-color: var(--dt-cta-hover) !important;
}

.btn-outline-primary,
.btn-secondary,
.btn-outline-secondary {
  color: var(--dt-text) !important;
  background: transparent !important;
  border-color: var(--dt-border-strong) !important;
}

.btn-outline-primary:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
}

#webphone_noti_connectedinothersocket .widget-notification-respond-btn {
  color: var(--dt-app) !important;
  background: var(--dt-text) !important;
  border: 1px solid var(--dt-text) !important;
  box-shadow: none !important;
}

#webphone_noti_connectedinothersocket .widget-notification-respond-btn:hover,
#webphone_noti_connectedinothersocket .widget-notification-respond-btn:focus {
  color: var(--dt-app) !important;
  background: var(--dt-text) !important;
  border-color: var(--dt-text) !important;
  box-shadow: none !important;
  opacity: .88;
}

#webphone_noti_connectedinothersocket .widget-notification-hangup-btn {
  color: var(--dt-text) !important;
  background: transparent !important;
  border: 1px solid var(--dt-border-strong) !important;
  box-shadow: none !important;
}

#webphone_noti_connectedinothersocket .widget-notification-hangup-btn:hover,
#webphone_noti_connectedinothersocket .widget-notification-hangup-btn:focus {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
  box-shadow: none !important;
}

#webphone_noti_connectedinothersocket :is(.widget-notification-respond-btn, .widget-notification-hangup-btn) :is(svg, span) {
  color: inherit !important;
  stroke: currentColor;
}

.table {
  --bs-table-hover-bg: var(--dt-hover);
  border-color: var(--dt-border);
}

.table thead th {
  color: var(--dt-muted) !important;
  background: transparent !important;
  border-bottom-color: var(--dt-border-strong) !important;
  font-size: 11px;
}

.table tbody :is(td, th) {
  border-bottom-color: var(--dt-border) !important;
}

.dui-dt,
.dui-dt-table-wrap,
.ag-theme-quartz,
.ag-theme-quartz-dark {
  --ag-accent-color: var(--dt-text);
  --ag-row-hover-color: var(--dt-hover);
  --ag-selected-row-background-color: var(--dt-active);
  --ag-header-background-color: transparent;
}

/* WhatsApp sessions stay neutral; only unread conversations use the blue counter. */
#navbarwhatsap .tabdeWhats {
  position: relative;
  overflow: visible;
  color: var(--dt-muted) !important;
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

#navbarwhatsap .tabdeWhats:hover {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
}

#navbarwhatsap .tabdeWhats.active {
  color: var(--dt-text) !important;
  background: var(--dt-active) !important;
  border-color: var(--dt-border-strong) !important;
  box-shadow: none !important;
}

.sessions-tabs-list > li:has(.tabdeWhats.active) {
  background: transparent !important;
}

[data-bs-theme="light"] .tabdeWhats-badge {
  color: #fff !important;
  background: #222 !important;
}

[data-bs-theme="dark"] .tabdeWhats-badge {
  color: #111 !important;
  background: #ededeb !important;
}

.tabdeWhats-badge {
  position: absolute !important;
  top: -7px;
  right: -8px;
  z-index: 6;
  aspect-ratio: 1 / 1;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--dt-app) !important;
  border-radius: 9999px !important;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center;
  pointer-events: none;
}

.tabdeWhats-badge:not(.u-hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.tabdeWhats-badge.u-hidden {
  display: none !important;
}

.whatsconver [data-totalunreadwhats] {
  z-index: 20 !important;
  color: #fff !important;
  background: #006fbe !important;
  background-color: #006fbe !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
}

.whatsconver .dropdown-chat > .dropdown-toggle {
  display: inline-flex;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  color: var(--dt-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}

.whatsconver .dropdown-chat > .dropdown-toggle:hover,
.whatsconver .dropdown-chat > .dropdown-toggle:focus,
.whatsconver .dropdown-chat > .dropdown-toggle:focus-visible,
.whatsconver .dropdown-chat.show > .dropdown-toggle {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}

.whatsconver .dropdown-chat > .dropdown-toggle .ti {
  color: inherit !important;
  border: 0 !important;
  text-decoration: none !important;
}

.whatsconver .dropdown-chat > .dropdown-toggle::before,
.whatsconver .dropdown-chat > .dropdown-toggle::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.whatsconver.unread-message .chat-user {
  background: var(--dt-active) !important;
  background: color-mix(in srgb, var(--dt-unread) 11%, var(--dt-surface)) !important;
}

.whatsconver.unread-message .chat-title {
  color: var(--dt-text) !important;
  font-weight: 700 !important;
}

.whatsconver.unread-message [data-akilastmsgwhats] {
  color: var(--dt-text) !important;
  font-weight: 600 !important;
}

.whatsconver.unread-message [data-akitimewhats] {
  color: var(--dt-text) !important;
  font-weight: 600;
}

.chat-content-header #akiWhatsbotones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-content-header #akiWhatsbotones .btn.whats-chat-header-action {
  display: inline-flex !important;
  min-height: 29px;
  margin: 0 !important;
  padding: 4px 9px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dt-text) !important;
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border-strong) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.chat-content-header #akiWhatsbotones .btn.whats-chat-header-action:hover,
.chat-content-header #akiWhatsbotones .btn.whats-chat-header-action:focus,
.chat-content-header #akiWhatsbotones .btn.whats-chat-header-action[aria-expanded="true"] {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: var(--dt-border-strong) !important;
  box-shadow: none !important;
}

.chat-content-header #akiWhatsbotones .btn.whats-chat-header-action:active {
  transform: scale(.975);
}

.chat-content-header #akiWhatsbotones .whats-chat-header-action--menu::before,
.chat-content-header #akiWhatsbotones .whats-chat-header-action--menu::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.chat-content-header #akiWhatsbotones .whats-chat-header-action--menu .ti {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 0 -2px 0 1px;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 15px;
}

#whatsTransferredBanner {
  background: var(--dt-app) !important;
}

#whatsTransferredBanner > div > div[style*="background"] {
  background: var(--dt-active) !important;
}

#whatsTransferredBanner .ti,
#whatsTransferredBanner div[style*="font-weight:600"] {
  color: var(--dt-text) !important;
}

#whatsTransferredBanner div[style*="font-size:13px"] {
  color: var(--dt-muted) !important;
}

.modal-content,
.dui-modal__content,
.dui-bootbox {
  color: var(--dt-text);
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-lg) !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

.modal-backdrop.show,
.dui-modal__backdrop,
.dui-bootbox-backdrop {
  background: var(--dt-backdrop);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 07 · Dropdowns, selects, tooltips y popovers */
:is(
  .dropdown-menu,
  .dui-select__dropdown,
  .dui-dropdown__menu,
  ul.menu.is-visible,
  ul.menu--select.is-visible,
  ul.menusearchmarccmenu.is-visible,
  .select2-dropdown,
  .choices__list--dropdown,
  .choices__list[aria-expanded],
  .dui-popover,
  .popover
) {
  color: var(--dt-text) !important;
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

.dropdown-menu,
.dui-select__dropdown,
ul.menu.is-visible,
ul.menu--select.is-visible,
ul.menusearchmarccmenu.is-visible {
  padding: 5px !important;
}

.dropdown-item,
.dui-select__option,
ul.menu > li > a,
ul.menu > li .menu-option,
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item,
.select2-results__option {
  min-height: 32px;
  margin: 1px 0;
  padding: 6px 9px !important;
  color: var(--dt-text) !important;
  background: transparent !important;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.35;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dui-select__option:hover,
.dui-select__option.highlighted,
ul.menu > li > a:hover,
ul.menu > li .menu-option:hover,
.choices__item--selectable.is-highlighted,
.select2-results__option--highlighted {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
}

.dropdown-item.active,
.dropdown-item:active,
.dui-select__option.selected,
ul.menu > li .menu-option.is-selected,
ul.menu > li > a.is-selected {
  color: var(--dt-text) !important;
  background: var(--dt-active) !important;
  font-weight: 600;
}

.dui-select__trigger {
  min-height: 36px;
  padding: 5px 9px 5px 10px;
}

.dui-select__option {
  gap: 8px;
}

.dui-select__option-check,
.dui-select__option.selected .dui-select__option-check {
  color: var(--dt-text);
}

.dui-select__search-wrap,
ul.menu > li.menusearchmarcc {
  background: var(--dt-overlay) !important;
  border-bottom-color: var(--dt-border) !important;
}

@keyframes dtOpen {
  0% { opacity: 0; scale: .95; translate: 0 -4px; }
  72% { opacity: 1; scale: 1.012; translate: 0 1px; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}

@keyframes dtClose {
  0% { opacity: 1; scale: 1; translate: 0 0; }
  100% { opacity: 0; scale: .985; translate: 0 -2px; }
}

.dropdown-menu.show,
.dui-select__dropdown,
ul.menu.is-visible,
ul.menu--select.is-visible,
ul.menusearchmarccmenu.is-visible,
.dui-tooltip.show,
.dui-popover.show,
.popover.show,
#sidebarMasCats.show,
#sidebarMasColapsable > ul.collapse.show,
#sidebarMasColapsable > ul.collapse.in {
  transform-origin: top center;
  animation: dtOpen .19s cubic-bezier(.16, 1, .3, 1) both !important;
}

.dropdown-menu-end,
.topbar .dropdown-menu {
  transform-origin: top right;
}

.dropup > .dropdown-menu {
  transform-origin: bottom center;
}

.dui-tooltip-top,
.dui-popover-top {
  transform-origin: bottom center;
}

.dui-tooltip-bottom,
.dui-popover-bottom {
  transform-origin: top center;
}

.dui-tooltip-left,
.dui-popover-left {
  transform-origin: right center;
}

.dui-tooltip-right,
.dui-popover-right {
  transform-origin: left center;
}

#sidebarMasCats,
#sidebarMasList {
  transform-origin: bottom left;
}

:is(
  .dropdown-menu,
  .dui-select__dropdown,
  .dui-tooltip,
  .dui-popover,
  ul.menu,
  #sidebarMasCats,
  #sidebarMasColapsable > ul.collapse
).is-closing {
  pointer-events: none !important;
  animation: dtClose .11s cubic-bezier(.4, 0, 1, 1) both !important;
}

.tooltip .tooltip-inner,
.tooltip.sidebar-tip .tooltip-inner,
.dui-tooltip,
.dui-tooltip.sidebar-tip {
  max-width: 250px;
  padding: 5px 8px;
  color: #f4f4f2;
  background: #252525 !important;
  border: 0 !important;
  border-radius: 6px;
  box-shadow: var(--dt-pop-shadow);
  font-size: 11.5px;
}

.dui-popover-header {
  padding: 9px 11px 7px;
  color: var(--dt-text);
  border-bottom: 1px solid var(--dt-border);
  font-size: 12.5px;
}

.dui-popover-body {
  padding: 9px 11px 10px;
  color: var(--dt-muted);
  font-size: 12.5px;
}

/* Perfil: neutro, sin violetas ni tarjetas apiladas. */
.profdd {
  width: 300px;
  padding: 5px !important;
  background: var(--dt-overlay) !important;
  border: 1px solid var(--dt-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--dt-pop-shadow) !important;
}

.profdd-header,
.profdd-link {
  border-radius: 7px;
}

.profdd-plan-row,
.profdd-plan-cap-pill,
.profdd-section,
.profdd-sub-card {
  color: var(--dt-text) !important;
  background: var(--dt-hover) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.profdd-sub-card-icon {
  color: var(--dt-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.profdd-sub-card-icon .ti {
  color: var(--dt-muted) !important;
}

.profdd-plan-icon,
.profdd-plan-name,
.profdd-plan-cap-pill,
.profdd-sub-card-label,
.profdd-sub-card-arrow {
  color: var(--dt-muted) !important;
}

.profdd-btn-primary,
.profdd-cap-cta,
[data-bs-theme="light"] .profdd-btn-primary,
[data-bs-theme="light"] .profdd-cap-cta {
  color: var(--dt-cta-fg) !important;
  background: var(--dt-cta) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.profdd-btn-primary:hover,
.profdd-cap-cta:hover {
  background: var(--dt-cta-hover) !important;
  box-shadow: none !important;
}

.profdd-theme-buttons {
  background: var(--dt-hover);
  border-color: var(--dt-border);
}

li.nav-item.dropdown[data-cap-warn="true"] > a::after {
  animation: none !important;
}

/* 08 · IA: color contenido únicamente en carga, orbes y acciones AI. */
.ia-loader {
  gap: 12px;
  padding: 36px 0;
}

.ia-loader-halo {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--dt-app) 0 54%, transparent 57%),
    conic-gradient(from 20deg, var(--dt-blue), var(--dt-cyan), var(--dt-coral), var(--dt-blue));
  box-shadow: 0 0 18px color-mix(in srgb, var(--dt-coral) 16%, transparent);
  filter: none;
  -webkit-mask: none;
  mask: none;
  animation: dtAiOrbit 1.55s linear infinite, dtAiPulse 1.55s ease-in-out infinite alternate;
}

.ia-loader-halo::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dt-coral);
  box-shadow: 0 0 8px color-mix(in srgb, var(--dt-coral) 60%, transparent);
}

.ia-loader-text {
  color: var(--dt-muted);
  background: linear-gradient(105deg, var(--dt-muted) 30%, var(--dt-text) 45%, var(--dt-cyan) 51%, var(--dt-coral) 56%, var(--dt-muted) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dtAiShimmer 1.7s linear infinite;
  font-size: 13px;
  font-weight: 600;
}

@keyframes dtAiOrbit {
  to { transform: rotate(360deg); }
}

@keyframes dtAiPulse {
  from { box-shadow: 0 0 10px color-mix(in srgb, var(--dt-blue) 12%, transparent); }
  to { box-shadow: 0 0 22px color-mix(in srgb, var(--dt-coral) 24%, transparent); }
}

@keyframes dtAiShimmer {
  from { background-position: 180% 0; }
  to { background-position: -120% 0; }
}

.ai-prompt-magic-btn {
  color: var(--dt-muted) !important;
  background: var(--dt-hover) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

.ai-prompt-magic-btn:hover {
  color: var(--dt-text) !important;
  border-color: var(--dt-border-strong) !important;
  transform: scale(1.025) !important;
}

.ai-prompt-magic-btn.active,
.ai-btn-primary,
.ovd-ai-btn-details {
  color: #fff !important;
  background: linear-gradient(120deg, #0078c9, #13aacf 62%, #ee7657) !important;
  border: 0 !important;
  box-shadow: 0 5px 16px rgba(0, 94, 154, .18) !important;
}

.ai-prompt-generator-panel {
  background: var(--dt-surface) !important;
  border: 1px solid var(--dt-border) !important;
  box-shadow: none !important;
}

.ai-prompt-generator-loading {
  color: var(--dt-text) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--dt-blue) 10%, transparent), color-mix(in srgb, var(--dt-coral) 9%, transparent)) !important;
  border: 0 !important;
}

.ai-spinner,
.ai-spinner-small {
  border-color: var(--dt-border-strong) !important;
  border-top-color: var(--dt-coral) !important;
}

.ovd-ai-banner {
  color: var(--dt-text) !important;
  background: var(--dt-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ovd-ai-banner .ovd-ai-icon {
  background: linear-gradient(135deg, var(--dt-blue), var(--dt-cyan), var(--dt-coral)) !important;
}

.ovd-ai-banner .ovd-ai-icon i {
  color: #fff !important;
}

.ovd-ai-banner .ovd-ai-badge,
.ovd-ai-banner .ovd-ai-text {
  color: var(--dt-muted) !important;
  background: transparent !important;
}

/* 09 · Encabezados locales: el topbar manda en desktop; el título vuelve en móvil. */
.module-page-header {
  display: flex;
  min-height: 34px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-page-title {
  margin: 0;
  color: var(--dt-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.module-page-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .module-page-title--topbar-sync {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* 11 · Responsive y movimiento */
@media (max-width: 1299.98px) {
  :root {
    --dt-topbar-h: 48px !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) .left-sidebar {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    left: -224px !important;
  }

  #main-wrapper.show-sidebar body:not([data-sidebartype="mini-sidebar"]) .left-sidebar,
  #main-wrapper.show-sidebar .left-sidebar {
    left: 0 !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) :is(.topbar, .app-header, .header, .navbar.topbar) {
    left: 0 !important;
    width: 100vw !important;
  }

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

  #main-wrapper:not(.show-sidebar) #headerCollapse .topbar-sidebar-icon-collapse,
  #main-wrapper.show-sidebar #headerCollapse .topbar-sidebar-icon-expand {
    display: none !important;
  }

  #main-wrapper:not(.show-sidebar) #headerCollapse .topbar-sidebar-icon-expand,
  #main-wrapper.show-sidebar #headerCollapse .topbar-sidebar-icon-collapse {
    display: inline-flex !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion.show,
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion.in {
    width: 100% !important;
    max-height: min(56vh, calc(100vh - 210px));
    margin: 4px 0 0 !important;
    padding: 2px 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.mas-cat-header {
    min-height: 35px;
    margin: 2px 0;
    padding: 7px 9px;
    color: var(--dt-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.mas-cat-header:hover,
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.mas-cat-header.open {
    color: var(--dt-text) !important;
    background: var(--dt-hover) !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.mas-cat-header:focus-visible {
    outline: 0 !important;
    box-shadow: inset 0 0 0 1px var(--dt-focus-ring) !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item {
    margin: 2px 0 !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item > .sidebar-link {
    min-height: 35px;
    padding: 7px 9px 7px 28px !important;
    color: var(--dt-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
  }

  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item > .sidebar-link:hover,
  body:not([data-sidebartype="mini-sidebar"]) #sidebarMasList.mas-accordion > li.sidebar-item.selected > .sidebar-link {
    color: var(--dt-text) !important;
    background: var(--dt-hover) !important;
  }
}

@media (pointer: coarse) {
  :root {
    --dt-topbar-h: 48px !important;
  }

  :is(#sidebarnav, #sidebarMasFooter) .sidebar-link {
    min-height: 36px;
  }
}

@media (max-width: 767.98px) {
  .page-wrapper .body-wrapper > :is(.container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl) {
    padding-right: 14px;
    padding-left: 14px;
  }

  #akicontenidonormal:not([data-module="overview"]) {
    padding-top: 14px;
    padding-bottom: 22px;
  }

  .profdd {
    width: min(300px, calc(100vw - 20px));
  }

  .topbar-current-title-item {
    display: none;
  }

  .module-page-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .module-page-title--topbar-sync {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }

  .module-page-title--standalone {
    margin-bottom: 12px !important;
  }

}

@media (max-width: 576px) {
  [data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.show,
  [data-sidebartype="mini-sidebar"] #sidebarMasColapsable > ul.collapse.in {
    left: 68px !important;
    width: calc(100vw - 80px) !important;
    height: 52vh;
    border-radius: 0 0 10px 10px !important;
  }

  [data-sidebartype="mini-sidebar"] #sidebarMasCats.show {
    left: 68px;
    bottom: calc(10px + 52vh);
    width: calc(100vw - 80px);
    height: auto;
    border-radius: 10px 10px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .left-sidebar,
  .left-sidebar *,
  .topbar *,
  .dropdown-menu,
  .dui-select__dropdown,
  .dui-tooltip,
  .dui-popover,
  .popover,
  ul.menu,
  .modal,
  .ia-loader-halo,
  .ia-loader-text,
  .ai-spinner,
  .ai-spinner-small,
  .ai-prompt-generator-panel,
  .ai-prompt-magic-btn {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  :is(.left-sidebar, .topbar, .dropdown-menu) .ti,
  .ai-prompt-magic-btn {
    transform: none !important;
    scale: 1 !important;
    translate: 0 !important;
  }
}

@media print {
  .body-wrapper {
    background-image: none !important;
  }
}