/* ============================================================
   n-epse | Sistema de UI y Componentes Maestros (Biblia del Prototipo)
   ============================================================ */

/* 1. RESET Y ESTILOS GLOBALES DE PAGINA */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif) !important;
  background-color: #f0f2f5 !important;
  background-image: 
    radial-gradient(at 40% 20%, hsla(228, 100%, 74%, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.08) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
  color: var(--n-text-primary, #1A1D26) !important;
  line-height: var(--n-leading-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif) !important;
  font-weight: 500 !important;
  color: var(--n-primary, #021B79) !important;
  letter-spacing: -0.01em;
}

.page-title,
.topheading,
.heding span.topheading,
.heding h1,
.section-title,
.nepse-card-header h1,
.nepse-card-header h2,
.nepse-card-header h3,
.nepse-prefs__section-title,
.nepse-prefs__eyebrow,
.nepse-lang-prefs__label,
.nepse-prefs__field-label,
.nepse-prefs__group-title,
.acc-sec,
legend,
fieldset legend,
.dash-panel-title,
label,
.form-label,
.acs-timezone strong {
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.page-title,
.topheading,
.heding span.topheading,
.heding h1,
.section-title,
.nepse-card-header h1,
.nepse-card-header h2,
.nepse-card-header h3,
.nepse-prefs__section-title,
.acc-sec,
fieldset legend,
.dash-panel-title {
  font-size: 22px !important;
  color: var(--n-primary, #021B79) !important;
  margin: 0 0 8px 0 !important;
  display: block;
}

.nepse-prefs__eyebrow,
.nepse-lang-prefs__label,
.nepse-prefs__field-label,
.nepse-prefs__group-title,
label,
.form-label {
  color: var(--n-primary, #021B79) !important;
}

/* Details Section Headers with Lucide Icons */
.nepse-details-section-header,
.nepse-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--n-border-light, #ECEEF2) !important;
}

.nepse-details-section-header .section-title,
.nepse-section-header .section-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--n-primary, #021B79) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nepse-details-section-header i[data-lucide],
.nepse-details-section-header svg.lucide,
.nepse-section-header i[data-lucide],
.nepse-section-header svg.lucide {
  color: var(--n-primary, #021B79) !important;
  stroke: var(--n-primary, #021B79) !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  stroke-width: 2.2px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* 2. ESTRUCTURA Y LAYOUT PRINCIPAL (Sidebar Fijo + Right Panel) */
.dashboardWrapper {
  display: block !important;
  min-height: 100vh !important;
  width: 100% !important;
  position: relative !important;
  background: transparent !important;
}

.leftPanel {
  width: 300px !important;
  flex-shrink: 0 !important;
}

/* Sidebar Abierto: Fondo gris diferenciado para resaltar modulos */
.leftPanel .sidebar,
.sidebar.nepse-sidebar {
  width: 300px !important;
  max-width: 300px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #e8ecf2 !important; /* Tono gris diferente al fondo de la pantalla */
  border-right: 1px solid rgba(210, 218, 230, 0.8) !important;
  border-radius: 0 !important;
  box-shadow: 2px 0 16px rgba(2, 27, 121, 0.03) !important;
  z-index: 1000 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, left 0.3s ease !important;
}

/* Sidebar Cerrado: Fondo igual al de la pantalla */
.dashboardWrapper.sidebarClose .leftPanel .sidebar,
.dashboardWrapper.sidebarClose .sidebar.nepse-sidebar {
  width: 76px !important;
  max-width: 76px !important;
  padding: 24px 10px !important;
  background: #f0f2f5 !important; /* Mismo fondo que el resto de la pantalla */
  left: 0 !important;
  border-right: 1px solid var(--n-border-light, #ECEEF2) !important;
}

/* SIDEBAR HEADER & LOGOS (Réplica Exacta de prototype/css/app.css) */
.sidebar-header,
.nepse-sidebar-header,
.leftPanel .sidebar .logos {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 4px !important;
  margin: 0 0 24px 0 !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar-logo,
.leftPanel .sidebar .logos img {
  object-fit: contain !important;
}

/* 1. MODO ABIERTO (Sin .sidebarClose): Solo el logotipo extendido completo */
.sidebar-logo.full,
.leftPanel .sidebar .logos img.full {
  display: block !important;
  visibility: visible !important;
  height: 44px !important;
  width: auto !important;
  max-width: 160px !important;
  margin: 0 !important;
  clip-path: none !important;
  border-radius: 0 !important;
  mix-blend-mode: multiply !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.sidebar-logo.icon-only,
.leftPanel .sidebar .logos img.icon-only {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2. MODO CERRADO (.dashboardWrapper.sidebarClose): Solo el isotipo circular 'n' */
.dashboardWrapper.sidebarClose .sidebar-header,
.dashboardWrapper.sidebarClose .nepse-sidebar-header,
.dashboardWrapper.sidebarClose .leftPanel .sidebar .logos {
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto 20px auto !important;
  height: 48px !important;
  width: 100% !important;
}

.dashboardWrapper.sidebarClose .sidebar-logo.full,
.dashboardWrapper.sidebarClose .leftPanel .sidebar .logos img.full {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.dashboardWrapper.sidebarClose .sidebar-logo.icon-only,
.dashboardWrapper.sidebarClose .leftPanel .sidebar .logos img.icon-only {
  display: block !important;
  visibility: visible !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid rgba(210, 218, 230, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.headingsection {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--n-text-muted, #9CA3AF) !important;
  margin: 0 0 12px 8px !important;
  white-space: nowrap !important;
}

.dashboardWrapper.sidebarClose .headingsection {
  display: none !important;
}

/* Navegacion del Sidebar - Modulos con fondo blanco para destacar */
.nepse-nav,
.leftPanel .sidebar ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  width: 100% !important;
}

.nepse-nav li,
.leftPanel .sidebar ul li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

.nepse-nav a,
.leftPanel .sidebar ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.65) !important; /* Capsula clara sobre fondo gris */
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nepse-nav a:hover,
.leftPanel .sidebar ul li a:hover {
  background: #ffffff !important;
  color: var(--n-primary, #021B79) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 12px rgba(2, 27, 121, 0.05) !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

.nepse-nav a.active,
.leftPanel .sidebar ul li a.active {
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 18px rgba(2, 27, 121, 0.18) !important;
  border-color: var(--n-primary, #021B79) !important;
}

.nepse-nav a svg,
.nepse-nav a i[data-lucide],
.leftPanel .sidebar ul li a svg {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  stroke-width: 1.75px !important;
  color: currentColor !important;
  margin: 0 !important;
}

/* Sidebar Colapsado - Simetría exacta (48px circulares) */
.dashboardWrapper.sidebarClose .nepse-nav a {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.dashboardWrapper.sidebarClose .nepse-nav a.active {
  background: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(2, 27, 121, 0.18) !important;
}

.dashboardWrapper.sidebarClose .nepse-nav a span {
  display: none !important;
}

.dashboardWrapper.sidebarClose .nepse-nav a svg,
.dashboardWrapper.sidebarClose .nepse-nav a i[data-lucide] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 auto !important;
}

/* Usuario en Sidebar Footer - Simetría exacta (48px en colapso, tarjeta en abierto) */
.nepse-sidebar-user {
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(210, 218, 230, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nepse-sidebar-user__avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: var(--n-primary, #021B79) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(2, 27, 121, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-sizing: border-box !important;
}

.nepse-sidebar-user__avatar svg,
.nepse-sidebar-user__avatar i {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75px !important;
  color: var(--n-primary, #021B79) !important;
  display: block !important;
  margin: 0 auto !important;
}

.nepse-sidebar-user__meta {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.nepse-sidebar-user__meta strong {
  font-size: 12.5px !important;
  color: var(--n-text-primary, #1A1D26) !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  font-weight: 600 !important;
}

.nepse-sidebar-user__meta span {
  font-size: 11px !important;
  color: var(--n-text-muted, #9CA3AF) !important;
}

/* Usuario en modo Colapsado: Mismo círculo 48px y alineación que los módulos */
.dashboardWrapper.sidebarClose .nepse-sidebar-user {
  justify-content: center !important;
  padding: 16px 0 0 0 !important;
  margin: auto auto 0 auto !important;
  width: 100% !important;
  border-top: 1px solid rgba(210, 218, 230, 0.8) !important;
}

.dashboardWrapper.sidebarClose .nepse-sidebar-user__avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.dashboardWrapper.sidebarClose .nepse-sidebar-user__avatar svg,
.dashboardWrapper.sidebarClose .nepse-sidebar-user__avatar i {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.75px !important;
  color: var(--n-primary, #021B79) !important;
  margin: 0 auto !important;
}

.dashboardWrapper.sidebarClose .nepse-sidebar-user__meta {
  display: none !important;
}

/* 3. PANEL PRINCIPAL Y HEADER SUPERIOR */
.rightPanel {
  margin-left: 300px !important;
  width: calc(100% - 300px) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  padding: 24px 32px 40px !important;
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.dashboardWrapper.sidebarClose .rightPanel {
  margin-left: 76px !important;
  width: calc(100% - 76px) !important;
}

.header.nepse-app-header,
.rightPanel .header {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  z-index: 10 !important;
}

.header.nepse-app-header .innerHeader,
.rightPanel .header .innerHeader {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}

.header.nepse-app-header .leftBar {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: auto !important;
}

/* Boton Toggle Circular Perfecto */
.nepse-shell-toggle,
.header .leftBar button.dahboardToggle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--n-text-secondary, #5C6370) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.nepse-shell-toggle:hover,
.header .leftBar button.dahboardToggle:hover {
  background: #ffffff !important;
  color: var(--n-primary, #021B79) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(2, 27, 121, 0.08) !important;
}

.nepse-shell-toggle svg,
.header .leftBar button.dahboardToggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2px !important;
}

/* Control de iconos de toggle segun estado */
.dashboardWrapper .nepse-toggle-ico--close {
  display: none !important;
}
.dashboardWrapper .nepse-toggle-ico--open {
  display: block !important;
}
.dashboardWrapper.sidebarClose .nepse-toggle-ico--open {
  display: none !important;
}
.dashboardWrapper.sidebarClose .nepse-toggle-ico--close {
  display: block !important;
}

.header.nepse-app-header .searchBar h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--n-text-primary, #1A1D26) !important;
}

.header.nepse-app-header .rightBar,
.header .rightBar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Boton Logout Circular Perfecto (SOLO ICONO) */
.nepse-logout-btn,
.logouticon a {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  user-select: none !important;
}

.nepse-logout-btn:hover,
.logouticon a:hover {
  background: #FFF5F5 !important;
  border-color: rgba(221, 88, 106, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(221, 88, 106, 0.15) !important;
}

.nepse-logout-btn:hover svg,
.logouticon a:hover svg,
.nepse-logout-btn:hover .nepse-logout-ico,
.logouticon a:hover .nepse-logout-ico {
  color: var(--n-rejected, #DD586A) !important;
}

.nepse-logout-btn span,
.logouticon a span,
.nepse-logout-btn .nepse-tip,
.logouticon .nepse-tip {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.nepse-logout-btn svg,
.logouticon a svg,
.nepse-logout-ico {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  display: block !important;
  margin: 0 auto !important;
  pointer-events: none !important;
}

.mainContent,
.rightPanel .mainContent {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. TARJETAS KPI / METRICAS (Basado en .metric-card del prototipo) */
.metric-card,
.nepse-kpi-card,
.maincardbox {
  background: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 24px rgba(2, 27, 121, 0.03) !important;
  padding: 24px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.metric-card:hover,
.nepse-kpi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(2, 27, 121, 0.07) !important;
}

.dash-kpi-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

.maincardbox {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.leftIcon,
.metric-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.leftIcon svg,
.leftIcon i,
.metric-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.75px !important;
  color: currentColor !important;
}

.righttext,
.metric-body {
  display: flex !important;
  flex-direction: column !important;
}

.righttext span,
.metric-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--n-text-secondary, #5C6370) !important;
  margin-bottom: 2px !important;
}

.righttext h2,
.metric-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--n-text-primary, #1A1D26) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* 5. CONTENEDORES DE DATOS Y SECCIONES CON LENGÜETA ESTILO CARPERTA (.data-card y .customcard) */
.data-card,
.customcard,
.folder-container,
.card:not(.nepse-kpi-card):not(.metric-card),
.custom-table-container,
.mainContent .row > div > .card {
  background: #ffffff !important;
  border-radius: 0 28px 28px 28px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  box-shadow: 0 14px 34px rgba(2, 27, 121, 0.04) !important;
  padding: 28px 32px !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  height: auto !important;
  min-height: auto !important;
  position: relative !important;
  overflow: visible !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.data-card::before,
.customcard::before,
.folder-container::before,
.card:not(.nepse-kpi-card):not(.metric-card)::before,
.custom-table-container::before,
.mainContent .row > div > .card::before {
  content: "" !important;
  position: absolute !important;
  top: -24px !important;
  left: -1px !important;
  width: 165px !important;
  height: 25px !important;
  background: #ffffff !important;
  border-radius: 18px 18px 0 0 !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-bottom: none !important;
  z-index: 2 !important;
}

.create {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.heding {
  display: flex;
  align-items: center;
}

/* 6. TABLAS DE DATOS MODERNAS Y COMPACTAS */
.nepse-table-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  border-radius: 16px !important;
  border: 1px solid var(--n-border-light, #ECEEF2) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(2, 27, 121, 0.02) !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

.table,
.dataTable,
.data-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: #ffffff !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td,
.table-bordered thead th,
.table-bordered thead td {
  border: none !important;
}

.table thead,
.dataTable thead,
.data-table thead {
  background: var(--n-bg-subtle, #F7F8FA) !important;
}

.table thead th,
.dataTable thead th,
.data-table thead th {
  background: var(--n-bg-subtle, #F7F8FA) !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid var(--n-border-light, #ECEEF2) !important;
  border-bottom: 1px solid var(--n-border, #E2E5EA) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remover pseudo-elementos de ordenamiento en celdas no ordenables (.no-sort, :not(.sorting):not(.sorting_asc):not(.sorting_desc)) */
.table thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc)::before,
.table thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc)::after,
.dataTable thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc)::before,
.dataTable thead th:not(.sorting):not(.sorting_asc):not(.sorting_desc)::after,
.dataTable thead th.sorting_disabled::before,
.dataTable thead th.sorting_disabled::after,
.dataTable thead th.no-sort::before,
.dataTable thead th.no-sort::after,
.table thead th.no-sort::before,
.table thead th.no-sort::after,
.dataTable thead th.nepse-th-select::before,
.dataTable thead th.nepse-th-select::after,
.table thead th.nepse-th-select::before,
.table thead th.nepse-th-select::after {
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.dataTable thead th.nepse-th-select,
.table thead th.nepse-th-select {
  padding: 8px 6px !important;
  text-align: center !important;
  cursor: default !important;
  width: 60px !important;
  min-width: 60px !important;
}

.nepse-select-all-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 auto !important;
  cursor: pointer !important;
}

.nepse-select-all-wrap input[type="checkbox"] {
  margin: 0 !important;
  cursor: pointer !important;
}

.nepse-select-all-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  color: var(--n-text-secondary, #5C6370) !important;
  line-height: 1 !important;
  user-select: none !important;
  margin-bottom: 0 !important;
}

.nepse-months-select-all {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin: 0 0 12px 0 !important;
}

.table thead tr:first-child th,
.dataTable thead tr:first-child th {
  border-top: none !important;
}

.table thead th:last-child,
.dataTable thead th:last-child,
.data-table thead th:last-child {
  border-right: none !important;
}

.table tbody td,
.dataTable tbody td,
.data-table tbody td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: var(--n-text-primary, #1A1D26) !important;
  border-bottom: 1px solid var(--n-border-light, #ECEEF2) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid var(--n-border-light, #ECEEF2) !important;
  vertical-align: middle !important;
  background: #ffffff !important;
}

.table tbody td:last-child,
.dataTable tbody td:last-child,
.data-table tbody td:last-child {
  border-right: none !important;
}

.table tbody tr,
.dataTable tbody tr,
.data-table tbody tr {
  transition: background 0.15s ease !important;
  background: #ffffff !important;
}

.table tbody tr:hover,
.dataTable tbody tr:hover,
.data-table tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd):hover {
  background: var(--n-primary-50, #EEF0F9) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(247, 248, 250, 0.4) !important;
}

/* 7. BOTONES Y TOOLBARS SOBRIOS (Altura 40px uniforme y estilos unificados) */
.btn-primary,
.btn.bg-blue,
.btn-success:not(.icon-btn),
.custonbtndownlaod.userbtn,
.btn-submit,
.nepse-btn,
.nepse-btn--primary,
button[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action),
input[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action) {
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  border: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(2, 27, 121, 0.18) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.btn-primary:hover,
.btn.bg-blue:hover,
.custonbtndownlaod.userbtn:hover,
.nepse-btn:hover,
.nepse-btn--primary:hover,
button[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action):hover,
input[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action):hover {
  background: var(--n-primary-dark, #001456) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(2, 27, 121, 0.28) !important;
  color: #ffffff !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-cancel,
.nepse-btn--secondary {
  background: #ffffff !important;
  color: var(--n-text-primary, #1A1D26) !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.btn-secondary:hover,
.nepse-btn--secondary:hover {
  background: var(--n-bg-subtle, #F7F8FA) !important;
  border-color: var(--n-border-strong, #CBD5E1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Toolbars de accion y Icon Buttons en circulo azul corporativo */
.toolbar-action-group,
.nepse-toolbar,
ul.markdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none !important;
  margin: 0 !important;
}

ul.markdown li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nepse-toolbar-divider {
  width: 1px !important;
  height: 20px !important;
  background: var(--n-border-strong, #CBD5E1) !important;
  margin: 0 4px !important;
  display: inline-block !important;
}

.icon-btn,
.icon-btn-action,
.nepse-icon-btn,
button.icon-btn,
button.icon-btn-action,
button.nepse-icon-btn,
button[type="submit"].nepse-icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  text-decoration: none !important;
  position: relative !important;
  box-shadow: 0 3px 8px rgba(2, 27, 121, 0.2) !important;
  outline: none !important;
  padding: 0 !important;
}

.icon-btn:hover,
.icon-btn-action:hover,
.nepse-icon-btn:hover,
.icon-btn:focus,
.icon-btn-action:focus,
.nepse-icon-btn:focus,
.icon-btn:active,
.icon-btn-action:active,
.nepse-icon-btn:active,
a.icon-btn:hover,
a.icon-btn-action:hover,
a.nepse-icon-btn:hover,
button.icon-btn:hover,
button.icon-btn-action:hover,
button.nepse-icon-btn:hover {
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(2, 27, 121, 0.35) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.15) !important;
  text-decoration: none !important;
  outline: none !important;
}

.icon-btn svg,
.icon-btn-action svg,
.nepse-icon-btn svg,
.icon-btn:hover svg,
.icon-btn-action:hover svg,
.nepse-icon-btn:hover svg,
a.nepse-icon-btn:hover svg,
a.icon-btn-action:hover svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.75px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Ocultar texto redundante .nepse-tip para botones sintetizados de solo-icono */
.nepse-tip {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* 8. BARRAS DE PROGRESO APILADAS (.stacked-progress-container) */
.stacked-progress-container,
.progress,
table .progress,
table .stacked-progress-container {
  display: flex !important;
  height: 18px !important;
  min-height: 18px !important;
  width: 100% !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.06) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  margin: 4px 0 !important;
}

.progress-bar,
.stacked-segment,
.progress-bar span,
.stacked-segment span {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.progress-bar.bg-success,
.stacked-segment.approved {
  background-color: var(--n-approved, #20967A) !important;
}

.progress-bar.bg-warning,
.stacked-segment.pending {
  background-color: var(--n-pending, #E28C28) !important;
}

.progress-bar.bg-danger,
.stacked-segment.rejected {
  background-color: var(--n-rejected, #DD586A) !important;
}

.progress-bar.bg-primary,
.progress-bar.bg-info {
  background-color: var(--n-primary-light, #3A4A9F) !important;
}

/* 9. BADGES Y ESTADOS PASTEL SOBRIOS (.status-badge, .status-led, .statusActive, .statusDeactive) */
.status-led,
.status-led-approved,
.status-led-pending,
.status-led-rejected,
.status-led-uploaded,
.status-led-expired,
.statusActive,
.statusDeactive,
.badge-approved,
.badge-pending,
.badge-rejected,
.badge-uploaded,
.badge-expired,
.dash-badge {
  display: inline-block !important;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  border-radius: 50% !important;
  vertical-align: middle !important;
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: none !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  overflow: hidden !important;
  user-select: none !important;
  cursor: pointer !important;
}

/* Colores de LED corporativos con brillo suave */
.status-led.approved,
.status-led.status-led-approved,
.status-led-approved,
.statusActive,
.status-approved,
.badge-approved,
.dash-badge.ok {
  background: var(--n-approved, #20967A) !important;
  box-shadow: 0 0 6px rgba(32, 150, 122, 0.4) !important;
}

.status-led.pending,
.status-led.status-led-pending,
.status-led-pending,
.status-pending,
.badge-pending {
  background: var(--n-pending, #E28C28) !important;
  box-shadow: 0 0 6px rgba(226, 140, 40, 0.4) !important;
}

.status-led.rejected,
.status-led.status-led-rejected,
.status-led-rejected,
.statusDeactive,
.status-rejected,
.badge-rejected,
.dash-badge.bad {
  background: var(--n-rejected, #DD586A) !important;
  box-shadow: 0 0 6px rgba(221, 88, 106, 0.4) !important;
}

.status-led.uploaded,
.status-led.status-led-uploaded,
.status-led-uploaded,
.status-uploaded,
.badge-uploaded {
  background: var(--n-uploaded, #6781D8) !important;
  box-shadow: 0 0 6px rgba(103, 129, 216, 0.4) !important;
}

.status-led.expired,
.status-led.status-led-expired,
.status-led-expired,
.status-expired,
.badge-expired {
  background: var(--n-expired, #8C93A0) !important;
  box-shadow: 0 0 6px rgba(140, 147, 160, 0.4) !important;
}

/* 10. INPUTS Y FORMULARIOS EN PILDORA (40px) */
input[type="text"]:not(.nepse-password-wrap input),
input[type="email"],
input[type="password"]:not(.nepse-password-wrap input),
input[type="number"],
input[type="date"],
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.nepse-password-wrap input) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 20px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  color: var(--n-text-primary, #1A1D26) !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(2, 27, 121, 0.02) inset !important;
}

input:focus {
  outline: none !important;
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
}

/* 10.0.1 FILE INPUT ESPECÍFICO NEP-SE */
input[type="file"].form-control,
.form-control[type="file"] {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 21px !important;
  background-color: #ffffff !important;
  font-size: 13.5px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  color: var(--n-text-primary, #1A1D26) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  line-height: 40px !important;
}

input[type="file"].form-control::-webkit-file-upload-button,
input[type="file"].form-control::file-selector-button {
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  margin: 0 14px 0 0 !important;
  padding: 0 18px !important;
  background-color: #EEF2F8 !important;
  color: var(--n-primary, #021B79) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  border: none !important;
  border-right: 1px solid #D0D7E5 !important;
  border-radius: 20px 0 0 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 42px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

input[type="file"].form-control:hover::-webkit-file-upload-button,
input[type="file"].form-control:hover::file-selector-button {
  background-color: #E2E9F5 !important;
  color: #02145A !important;
}

/* 10.0.2 NEP-SE CUSTOM FILE UPLOADER */
.nepse-custom-file {
  position: relative;
  display: block;
  width: 100%;
  height: 44px;
  cursor: pointer;
}

.nepse-custom-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5;
  cursor: pointer;
}

.nepse-custom-file-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  background-color: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(2, 27, 121, 0.02) inset !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.nepse-custom-file-input:focus ~ .nepse-custom-file-label,
.nepse-custom-file:hover .nepse-custom-file-label {
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
}

.nepse-custom-file-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 100% !important;
  padding: 0 18px !important;
  background-color: #EEF2F8 !important;
  color: var(--n-primary, #021B79) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  border-right: 1px solid #D0D7E5 !important;
  border-radius: 21px 0 0 21px !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.nepse-custom-file:hover .nepse-custom-file-btn {
  background-color: #E2E9F5 !important;
  color: #02145A !important;
}

.nepse-custom-file-text {
  flex-grow: 1 !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  color: #6C757D !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  user-select: none !important;
  line-height: 44px !important;
}

.nepse-custom-file-text.has-file {
  color: var(--n-text-primary, #1A1D26) !important;
  font-weight: 600 !important;
}

.nepse-custom-file.has-file .nepse-custom-file-label {
  border-color: #10B981 !important;
  background-color: #F0FDF4 !important;
}

.nepse-custom-file.has-file .nepse-custom-file-btn {
  background-color: #DCFCE7 !important;
  color: #15803D !important;
  border-right-color: #86EFAC !important;
}

.nepse-file-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}

.nepse-file-preview-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #DCFCE7;
  color: #15803D;
  flex-shrink: 0;
}

.nepse-file-preview-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}

.nepse-file-preview-card__name {
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nepse-file-preview-card__meta {
  font-size: 11.5px;
  color: #15803D;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.nepse-file-preview-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  background: #16A34A;
  color: #ffffff;
  border-radius: 10px;
}

.nepse-file-preview-card__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #991B1B;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.nepse-file-preview-card__clear:hover {
  background: #FEE2E2;
  color: #7F1D1D;
}



/* 10.1 SELECTS DESPLEGABLES CON FLECHA LUCIDE CHEVRON INTEGRADA */
select.form-control,
select.form-select,
select.customselecter,
select.nepse-prefs__select,
select.nepse-lang-prefs__select,
select.custonbtndownlaod,
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 20px !important;
  padding: 0 38px 0 16px !important;
  font-size: 14px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  color: var(--n-text-primary, #1A1D26) !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(2, 27, 121, 0.02) inset !important;
}

select:hover {
  border-color: var(--n-primary-light, #3A4A9F) !important;
}

select:focus {
  outline: none !important;
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23021B79' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

select:disabled {
  background-color: #F7F8FA !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

select option {
  background-color: #ffffff !important;
  color: var(--n-text-primary, #1A1D26) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
}

/* Checkbox Cuadrado Estético */
input[type="checkbox"]:not(.switch):not(.CreateWorkerStatus) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--n-border-strong, #C8CCD4) !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  vertical-align: middle !important;
  position: relative !important;
  box-shadow: none !important;
}

input[type="checkbox"]:not(.switch):not(.CreateWorkerStatus)::before,
input[type="checkbox"]:not(.switch):not(.CreateWorkerStatus)::after {
  content: none !important;
  display: none !important;
}

input[type="checkbox"]:not(.switch):not(.CreateWorkerStatus):checked {
  background-color: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary, #021B79) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

input[type="checkbox"]:not(.switch):not(.CreateWorkerStatus):indeterminate {
  background-color: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary, #021B79) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 11. SWITCH TOGGLES (.switch / .CreateWorkerStatus) - Limpieza de artefactos */
input[type="checkbox"].switch,
input[type="checkbox"].CreateWorkerStatus {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 22px !important;
  border-radius: 9999px !important;
  background-color: #E2E5EA !important;
  border: 1px solid #D1D5DB !important;
  cursor: pointer !important;
  position: relative !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  vertical-align: middle !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
}

input[type="checkbox"].switch::after,
input[type="checkbox"].CreateWorkerStatus::after {
  content: none !important;
  display: none !important;
}

input[type="checkbox"].switch::before,
input[type="checkbox"].CreateWorkerStatus::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="checkbox"].switch:checked,
input[type="checkbox"].CreateWorkerStatus:checked {
  background-color: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary, #021B79) !important;
  background-image: none !important;
}

input[type="checkbox"].switch:checked::before,
input[type="checkbox"].CreateWorkerStatus:checked::before {
  transform: translateX(18px) !important;
  background-color: #ffffff !important;
}

input[type="checkbox"].switch:focus-visible,
input[type="checkbox"].CreateWorkerStatus:focus-visible {
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
}

input[type="checkbox"].switch:disabled,
input[type="checkbox"].CreateWorkerStatus:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* 11.1 ICONOS DE ACCIÓN DENTRO DE LAS TABLAS (Sin círculo azul en filas) */
.table tbody td .icon-btn,
.table tbody td .icon-btn-action,
.table tbody td .nepse-icon-btn,
.table tbody td .nepse-kebab-btn,
.dataTable tbody td .icon-btn,
.dataTable tbody td .icon-btn-action,
.dataTable tbody td .nepse-icon-btn,
.dataTable tbody td .nepse-kebab-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--n-text-secondary, #5C6370) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.table tbody td .icon-btn svg,
.table tbody td .icon-btn-action svg,
.table tbody td .nepse-icon-btn svg,
.table tbody td .nepse-kebab-btn svg,
.dataTable tbody td .icon-btn svg,
.dataTable tbody td .icon-btn-action svg,
.dataTable tbody td .nepse-icon-btn svg,
.dataTable tbody td .nepse-kebab-btn svg {
  stroke: var(--n-text-secondary, #5C6370) !important;
  color: var(--n-text-secondary, #5C6370) !important;
}

.table tbody td .icon-btn:hover,
.table tbody td .icon-btn-action:hover,
.table tbody td .nepse-icon-btn:hover,
.table tbody td .nepse-kebab-btn:hover,
.dataTable tbody td .icon-btn:hover,
.dataTable tbody td .icon-btn-action:hover,
.dataTable tbody td .nepse-icon-btn:hover,
.dataTable tbody td .nepse-kebab-btn:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}

.table tbody td .icon-btn:hover svg,
.table tbody td .icon-btn-action:hover svg,
.table tbody td .nepse-icon-btn:hover svg,
.table tbody td .nepse-kebab-btn:hover svg,
.dataTable tbody td .icon-btn:hover svg,
.dataTable tbody td .icon-btn-action:hover svg,
.dataTable tbody td .nepse-icon-btn:hover svg,
.dataTable tbody td .nepse-kebab-btn:hover svg {
  stroke: var(--n-primary, #021B79) !important;
  color: var(--n-primary, #021B79) !important;
}

/* 16. PAGINACIÓN SOBRIA EN NEGRO Y AZUL DE MARCA (.dataTables_paginate) */
.dataTables_wrapper {
  position: relative !important;
  width: 100% !important;
}

.nepse-dt-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 14px !important;
  width: 100% !important;
}

.nepse-dt-footer .dataTables_info,
.dataTables_wrapper .dataTables_info,
.dataTables_info {
  display: block !important;
  padding-top: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
  float: none !important;
}

.nepse-dt-footer .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate,
.dataTables_paginate,
.pagination {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  float: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a,
.dataTables_wrapper .dataTables_paginate a.page-link,
.pagination .page-item .page-link,
.pagination .page-link {
  color: var(--n-text-primary, #1A1D26) !important;
  background: transparent !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a,
.dataTables_wrapper .dataTables_paginate .paginate_button.next a,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  width: auto !important;
  border-radius: 16px !important;
  padding: 6px 14px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
}

/* Estado activo (Página actual): Círculo azul marino corporativo con número blanco */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.active a,
.pagination .page-item.active .page-link {
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(2, 27, 121, 0.25) !important;
  border-radius: 50% !important;
}

/* Hover en números inactivos */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
.dataTables_wrapper .dataTables_paginate .paginate_button a:hover,
.pagination .page-item:not(.active) .page-link:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  text-decoration: none !important;
}

/* Botones deshabilitados (Previous/Next inactivo) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled a,
.pagination .page-item.disabled .page-link {
  color: var(--n-text-muted, #9CA3AF) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* 12. WIZARD & MULTI-STEP FORMS (Contractor/Worker/SubContractor Create & Register) */
.form-wizard-wrapper {
  padding: 10px 0 !important;
}

.form-wizard-content {
  display: none;
}

.form-wizard-content.show {
  display: block;
  animation: nepseFadeIn 0.3s ease;
}

.number {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(2, 27, 121, 0.1) !important;
  margin-bottom: 16px !important;
}

.number .infotext {
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
  margin-left: 6px !important;
}

.Registrationtext {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--n-text-primary, #1A1D26) !important;
  letter-spacing: -0.01em !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

.formsection {
  margin-top: 1.5rem !important;
}

.wrapper {
  background: transparent !important;
  margin-bottom: 16px !important;
}

.wrapper label.form-label,
.wrapper label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--n-text-secondary, #5C6370) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.wrapper input[type="text"],
.wrapper input[type="email"],
.wrapper input[type="password"],
.wrapper input[type="number"],
.wrapper input[type="date"],
.wrapper select {
  width: 100% !important;
  height: 44px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-family: var(--n-font-family) !important;
  color: var(--n-text-primary, #1A1D26) !important;
  background-color: #ffffff !important;
  border: 1px solid var(--n-border-strong, #C8CCD4) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.wrapper input:focus,
.wrapper select:focus {
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
  outline: none !important;
}

.wrapper select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  cursor: pointer !important;
}

.password-container {
  position: relative !important;
}

.password-container .fa-eye,
.password-container .fa-eye-slash {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  color: var(--n-text-muted, #8C93A0) !important;
  z-index: 5 !important;
}

/* 13. BOTONES DE ACCION SINTETIZADOS (SOLO ICONOS CON TOOLTIPS) */
.btn-action-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.btn-action-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  color: var(--n-text-secondary, #5C6370) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  text-decoration: none !important;
  position: relative !important;
}

.btn-action-icon:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  border-color: rgba(2, 27, 121, 0.2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 27, 121, 0.08) !important;
}

.btn-action-icon svg,
.btn-action-icon i[data-lucide] {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.75px !important;
}

.btn-action-icon.danger,
.btn-action-danger {
  color: var(--n-text-secondary, #5C6370) !important;
}

.btn-action-icon.danger:hover,
.btn-action-danger:hover {
  background: var(--n-rejected-bg, #FFF4F5) !important;
  color: var(--n-rejected, #DD586A) !important;
  border-color: var(--n-rejected-border, #F7C1C8) !important;
  box-shadow: 0 4px 10px rgba(221, 88, 106, 0.12) !important;
}

/* Toolbars de Cabecera Flexbox Estandarizados */
.btn-toolbar-action,
.header-actions-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.btn-toolbar-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  color: var(--n-text-secondary, #5C6370) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.btn-toolbar-icon:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  border-color: rgba(2, 27, 121, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(2, 27, 121, 0.08) !important;
}

.btn-toolbar-icon svg,
.btn-toolbar-icon i[data-lucide] {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.75px !important;
}

/* Bloque Limpio de Filtros */
.filter-action-pills {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.filter-action-pills .btn-filter-apply {
  background: var(--n-primary, #021B79) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 27, 121, 0.15) !important;
  transition: all 0.2s ease !important;
}

.filter-action-pills .btn-filter-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(2, 27, 121, 0.25) !important;
}

.filter-action-pills .btn-filter-clear {
  background: #ffffff !important;
  color: var(--n-text-secondary, #5C6370) !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 9999px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Kebab Menu Dropdown para Tablas */
.nepse-kebab {
  position: relative !important;
  display: inline-block !important;
}

.nepse-kebab-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--n-text-secondary, #5C6370) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.nepse-kebab-btn:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  transform: translateY(-1px) !important;
}

.nepse-kebab-btn svg,
.nepse-kebab-btn i[data-lucide] {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.75px !important;
}

.nepse-kebab-menu {
  display: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  z-index: 1050 !important;
  min-width: 170px !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(2, 27, 121, 0.08) !important;
  padding: 6px !important;
  margin-top: 4px !important;
  text-align: left !important;
}

.nepse-kebab.nepse-kebab--dropup .nepse-kebab-menu {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  box-shadow: 0 -10px 24px rgba(2, 27, 121, 0.08) !important;
}

.nepse-kebab.open .nepse-kebab-menu {
  display: flex !important;
  flex-direction: column !important;
  animation: nepseFadeIn 0.2s ease !important;
}

.nepse-kebab-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--n-text-primary, #1A1D26) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nepse-kebab-menu .dropdown-item:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
}

.nepse-kebab-menu .dropdown-divider {
  height: 1px !important;
  margin: 4px 0 !important;
  background-color: var(--n-border-light, #ECEEF2) !important;
  border: none !important;
}

.nepse-kebab-menu .nepse-dropdown-item--danger {
  color: var(--n-rejected, #DD586A) !important;
}

.nepse-kebab-menu .nepse-dropdown-item--danger:hover {
  background: var(--n-rejected-bg, #FFF4F5) !important;
  color: var(--n-rejected, #DD586A) !important;
}

.nepse-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.nepse-row-actions__switch {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

/* Columna Acción: Worker + SubContractor */
#customerDatatable th.nepse-col-actions,
#customerDatatable td.nepse-col-actions,
table.dataTable th.nepse-col-actions,
table.dataTable td.nepse-col-actions {
  width: 1% !important;
  min-width: 200px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* 15. BARRA UNIFICADA DE FILTROS Y CONTROLES DATATABLES (.nepse-unified-toolbar) */
.nepse-unified-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  padding: 10px 16px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 229, 234, 0.8) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(2, 27, 121, 0.03) !important;
}

.nepse-filter-section {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.nepse-filter-section > div {
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
  min-width: 140px !important;
  max-width: 100% !important;
}

.nepse-filter-section > .nepse-filter-actions-col {
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.nepse-filter-section label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--n-text-muted, #717D96) !important;
  margin-bottom: 4px !important;
  display: block !important;
  white-space: nowrap !important;
}

.nepse-filter-section input.form-control {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 18px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  background: #ffffff !important;
  min-width: 110px !important;
}

.nepse-filter-section select.form-control,
.nepse-filter-section select {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 32px 0 12px !important;
  font-size: 13px !important;
  border-radius: 18px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px 14px !important;
  min-width: 110px !important;
}

.nepse-filter-actions-col {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
}

.nepse-dt-controls-section {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.nepse-dt-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.nepse-dt-controls .dataTables_length,
.nepse-dt-controls .dataTables_filter {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
}

.nepse-dt-controls .dataTables_length label,
.nepse-dt-controls .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.nepse-dt-controls .dataTables_length select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 28px 0 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235C6370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 13px 13px !important;
  font-size: 12.5px !important;
  color: var(--n-text-primary, #1A1D26) !important;
  cursor: pointer !important;
  width: auto !important;
}

.nepse-dt-controls .dataTables_filter input {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  background: #ffffff !important;
  font-size: 13px !important;
  color: var(--n-text-primary, #1A1D26) !important;
  box-shadow: 0 2px 6px rgba(2, 27, 121, 0.02) inset !important;
  transition: all 0.2s ease !important;
  width: 170px !important;
}

.nepse-dt-controls .dataTables_filter input:focus {
  width: 210px !important;
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
}

/* 16. BARRA DE PROGRESO Y PORCENTAJES (.progress-cont, .progress, .progress-bar1, .stacked-segment) */
.progress-cont .progress,
.progress {
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 9999px !important;
  display: flex !important;
  overflow: hidden !important;
  background-color: var(--n-bg-subtle, #F7F8FA) !important;
  border: 1px solid rgba(226, 229, 234, 0.8) !important;
  align-items: center !important;
}

.progress-cont .progress .progress-bar1,
.progress-bar1,
.progress-bar,
.stacked-segment {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  position: relative !important;
  float: left !important;
}

.progress-bar1 span,
.progress-bar span,
.stacked-segment span,
.progress-bar1 .text-white {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-0.5px) !important; /* Ajuste finísimo para centrado óptico perfecto */
}

/* Colores de tramos de la barra de progreso apilada (Aprobado, Rechazado, Pendiente, Subido) */
.progress-cont .progress .progress-bar1:first-child,
.progress-bar1.bar-approved,
.progress-bar1:first-child {
  background: var(--n-approved, #20967A) !important;
}

.progress-cont .progress .progress-bar1:nth-child(2),
.progress-bar1.bar-rejected,
.progress-bar1:nth-child(2) {
  background: var(--n-rejected, #DD586A) !important;
}

.progress-cont .progress .progress-bar1:nth-child(3),
.progress-bar1.bar-pending,
.progress-bar1:nth-child(3) {
  background: var(--n-pending, #E28C28) !important;
}

.progress-cont .progress .progress-bar1:nth-child(4),
.progress-bar1.bar-uploaded {
  background: var(--n-uploaded, #6781D8) !important;
}

.progress-cont .progress .progress-bar1:nth-child(5),
.progress-bar1.bar-expired {
  background: var(--n-expired, #8C93A0) !important;
}

/* Puntos indicadores y leyendas de cabecera de tabla (.pro-label) */
.pro-label {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  justify-content: center !important;
  align-items: center !important;
}

.pro-label span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  border-left: none !important;
  height: auto !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--n-text-secondary, #5C6370) !important;
  white-space: nowrap !important;
}

.pro-label span::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.pro-label span.clr-green::before {
  background: var(--n-approved, #20967A) !important;
  box-shadow: 0 0 4px rgba(32, 150, 122, 0.4) !important;
}

.pro-label span.clr-red::before {
  background: var(--n-rejected, #DD586A) !important;
  box-shadow: 0 0 4px rgba(221, 88, 106, 0.4) !important;
}

.pro-label span.clr-yellow::before {
  background: var(--n-pending, #E28C28) !important;
  box-shadow: 0 0 4px rgba(226, 140, 40, 0.4) !important;
}

.pro-label span.clr-blue::before {
  background: var(--n-uploaded, #6781D8) !important;
  box-shadow: 0 0 4px rgba(103, 129, 216, 0.4) !important;
}

.pro-label span.clr-expire::before {
  background: var(--n-expired, #8C93A0) !important;
  box-shadow: 0 0 4px rgba(140, 147, 160, 0.4) !important;
}

/* Clases de utilidad tipográfica de color (.clr-*) */
.clr-green { color: var(--n-approved, #20967A) !important; }
.clr-red { color: var(--n-rejected, #DD586A) !important; }
.clr-yellow { color: var(--n-pending, #E28C28) !important; }
.clr-blue { color: var(--n-uploaded, #6781D8) !important; }
.clr-expire { color: var(--n-expired, #8C93A0) !important; }

/* 17. FOOTER DE DATATABLES EXTERNO AL SCROLL (.nepse-dt-footer) */
.nepse-dt-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 12px 4px 4px 4px !important;
  margin-top: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nepse-dt-footer .dataTables_info {
  display: inline-block !important;
  font-size: 13px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.nepse-dt-footer .dataTables_paginate {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* 18. APEXCHARTS TOOLBAR & DROPDOWN MENUS (Reports & Dashboards) */
.apexcharts-toolbar {
  z-index: 11 !important;
  padding: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  top: 0px !important;
  right: 0px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.apexcharts-toolbar .apexcharts-menu-icon,
.apexcharts-toolbar .apexcharts-reset-icon,
.apexcharts-toolbar .apexcharts-zoom-icon,
.apexcharts-toolbar .apexcharts-zoomin-icon,
.apexcharts-toolbar .apexcharts-zoomout-icon,
.apexcharts-toolbar .apexcharts-pan-icon,
.nepse-chart-btn-circle {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--n-primary, #021B79) !important;
  border: 1px solid var(--n-primary, #021B79) !important;
  box-shadow: 0 2px 6px rgba(2, 27, 121, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 !important;
  margin: 0 2px !important;
}

.apexcharts-toolbar .apexcharts-menu-icon svg,
.apexcharts-toolbar svg,
.nepse-chart-btn-circle svg {
  fill: #ffffff !important;
  width: 15px !important;
  height: 15px !important;
  transition: fill 0.2s ease !important;
}


.apexcharts-toolbar .apexcharts-menu-icon:hover,
.apexcharts-toolbar .apexcharts-reset-icon:hover,
.apexcharts-toolbar .apexcharts-zoom-icon:hover,
.apexcharts-toolbar .apexcharts-zoomin-icon:hover,
.apexcharts-toolbar .apexcharts-zoomout-icon:hover,
.apexcharts-toolbar .apexcharts-pan-icon:hover {
  background: var(--n-primary-dark, #001456) !important;
  border-color: var(--n-primary-dark, #001456) !important;
  box-shadow: 0 4px 12px rgba(2, 27, 121, 0.3) !important;
  transform: translateY(-1px) !important;
}

.apexcharts-toolbar .apexcharts-menu-icon:hover svg,
.apexcharts-toolbar .apexcharts-reset-icon:hover svg,
.apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
.apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
.apexcharts-toolbar .apexcharts-zoomout-icon:hover svg,
.apexcharts-toolbar .apexcharts-pan-icon:hover svg {
  fill: #ffffff !important;
}

.apexcharts-menu {
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: var(--n-radius-lg, 14px) !important;
  box-shadow: 0 10px 25px -5px rgba(2, 27, 121, 0.12), 0 8px 10px -6px rgba(2, 27, 121, 0.08) !important;
  padding: 6px !important;
  min-width: 140px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 99999 !important;
}

.apexcharts-menu.apexcharts-menu-open {
  opacity: 1 !important;
  pointer-events: all !important;
  display: block !important;
}

.apexcharts-menu-item {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--n-text-primary, #1A1D26) !important;
  border-radius: var(--n-radius-md, 8px) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-align: left !important;
}

.apexcharts-menu-item:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  font-weight: 600 !important;
}

/* 19. ACTION KEBAB BUTTONS UNIFORMES (Document Status & Tables) */
.ds-actions-btn.nepse-kebab-btn,
button.ds-actions-btn,
.nepse-kebab-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  color: var(--n-text-secondary, #475569) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.ds-actions-btn.nepse-kebab-btn:hover,
button.ds-actions-btn:hover,
.nepse-kebab-btn:hover {
  background: var(--n-primary-50, #EEF0F9) !important;
  border-color: var(--n-primary, #021B79) !important;
  color: var(--n-primary, #021B79) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 27, 121, 0.12) !important;
}

/* 20. REGLA MAESTRA INAPELABLE: PESO NORMAL GLOBAL EN TODOS LOS TITULOS Y LABELS */
h1, h2, h3, h4, h5, h6,
.topheading,
.page-title,
.section-title,
.dash-panel-title,
.nepse-prefs__section-title,
.nepse-prefs__eyebrow,
.nepse-lang-prefs__label,
.nepse-prefs__field-label,
.nepse-prefs__group-title,
legend,
fieldset legend,
label,
.form-label,
.acs-timezone strong {
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* 21. ESTILIZACION INTEGRADA DE INPUT DE CONTRASEÑA (LOCK LEFT + EYE RIGHT) */
.nepse-password-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

.nepse-password-wrap input[type="password"],
.nepse-password-wrap input[type="text"],
.nepse-password-wrap .form-control,
.nepse-password-wrap input.form-control,
.nepse-password-wrap input {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 44px 0 46px !important;
  padding-left: 46px !important;
  padding-right: 44px !important;
  margin-bottom: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.nepse-password-wrap .nepse-input-ico-left {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--n-text-muted, #94A3B8) !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nepse-password-wrap .btn-eye-toggle,
.nepse-password-wrap button {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--n-text-muted, #94A3B8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

.nepse-password-wrap .btn-eye-toggle:hover,
.nepse-password-wrap button:hover {
  color: var(--n-primary, #021B79) !important;
  background-color: var(--n-primary-50, #EEF0F9) !important;
}

.nepse-password-wrap .btn-eye-toggle:focus,
.nepse-password-wrap button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.nepse-password-wrap .btn-eye-toggle svg,
.nepse-password-wrap button svg,
.nepse-password-wrap button i[data-lucide] {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75px !important;
  stroke: currentColor !important;
}

/* 22. MENÚS Y BOTONES DESPLEGABLES GLOBALES (BOOTSTRAP DROPDOWNS & ACTIONS) */
.dropdown,
.dropup,
.dropend,
.dropstart {
  position: relative !important;
}

.dropdown-menu {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  box-shadow: 0 12px 36px rgba(2, 27, 121, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 8px !important;
  min-width: 180px !important;
  z-index: 1055 !important;
  margin-top: 6px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: nepseDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes nepseDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-menu.dropdown-menu-end,
.dropdown-menu-right {
  right: 0 !important;
  left: auto !important;
}

.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  color: var(--n-text-primary, #1A1D26) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--n-primary-50, #EEF0F9) !important;
  color: var(--n-primary, #021B79) !important;
  font-weight: 600 !important;
  transform: translateX(2px) !important;
  outline: none !important;
}

.dropdown-item svg,
.dropdown-item i[data-lucide] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  stroke-width: 1.75px !important;
  color: currentColor !important;
  flex-shrink: 0 !important;
}

.dropdown-item.nepse-dropdown-item--danger,
.dropdown-item.text-danger,
.dropdown-item.btn-revoke-access {
  color: var(--n-rejected, #DD586A) !important;
}

.dropdown-item.nepse-dropdown-item--danger:hover,
.dropdown-item.nepse-dropdown-item--danger:focus,
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus,
.dropdown-item.btn-revoke-access:hover,
.dropdown-item.btn-revoke-access:focus {
  background: #FFF5F5 !important;
  color: var(--n-rejected, #DD586A) !important;
  font-weight: 600 !important;
}

.dropdown-divider {
  margin: 6px 0 !important;
  border-top: 1px solid var(--n-border-light, #ECEEF2) !important;
  opacity: 1 !important;
  height: 0 !important;
}

.dropdown-header {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--n-text-muted, #717D96) !important;
  padding: 6px 14px 4px !important;
}

/* Botones Dropdown Toggle */
.btn.dropdown-toggle:not(.nepse-kebab-btn):not(.ds-actions-btn):not(.icon-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}

.btn.dropdown-toggle:not(.nepse-kebab-btn):not(.ds-actions-btn):not(.icon-btn)::after {
  display: inline-block !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  content: "" !important;
  border-top: 5px solid currentColor !important;
  border-right: 4px solid transparent !important;
  border-bottom: 0 !important;
  border-left: 4px solid transparent !important;
  transition: transform 0.2s ease !important;
}

.btn.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* 23. ESTILIZACION UNIVERSAL DE POP-UPS, SWEETALERT Y MODALES (CREAR/EDITAR) */

/* 23.1 SWEETALERT (NOTIFICACIONES Y ALERTAS FLOTANTES) */
.swal-overlay,
.swal2-container {
  background-color: rgba(2, 27, 121, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 10000 !important;
}

.swal-modal,
.swal2-popup {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 229, 234, 0.9) !important;
  box-shadow: 0 20px 50px rgba(2, 27, 121, 0.18), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  padding: 32px 28px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  animation: nepseModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes nepseModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.swal-icon {
  margin: 0 auto 16px auto !important;
}

.swal-icon--warning {
  border-color: #F59E0B !important;
}

.swal-icon--warning__body,
.swal-icon--warning__dot {
  background-color: #F59E0B !important;
}

.swal-icon--success {
  border-color: #20967A !important;
}

.swal-icon--success__line {
  background-color: #20967A !important;
}

.swal-icon--success__ring {
  border-color: rgba(32, 150, 122, 0.3) !important;
}

.swal-icon--error {
  border-color: var(--n-rejected, #DD586A) !important;
}

.swal-icon--error__line {
  background-color: var(--n-rejected, #DD586A) !important;
}

.swal-icon--info {
  border-color: var(--n-primary, #021B79) !important;
}

.swal-icon--info::before,
.swal-icon--info::after {
  background-color: var(--n-primary, #021B79) !important;
}

.swal-title,
.swal2-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--n-primary, #021B79) !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.swal-text,
.swal2-html-container {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--n-text-primary, #1A1D26) !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  text-align: center !important;
  line-height: 1.5 !important;
  margin: 0 0 8px 0 !important;
}

.swal-footer {
  margin-top: 24px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

.swal-button-container {
  margin: 0 !important;
}

.swal-button,
.swal2-confirm,
.swal-button--confirm {
  background: linear-gradient(135deg, var(--n-primary, #021B79) 0%, var(--n-primary-light, #3A4A9F) 100%) !important;
  color: #ffffff !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 28px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  box-shadow: 0 4px 14px rgba(2, 27, 121, 0.25) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.swal-button:hover,
.swal2-confirm:hover,
.swal-button--confirm:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(2, 27, 121, 0.35) !important;
  background: linear-gradient(135deg, var(--n-primary-dark, #001456) 0%, var(--n-primary, #021B79) 100%) !important;
}

.swal-button:focus,
.swal2-confirm:focus,
.swal-button--confirm:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--n-primary-50, #EEF0F9) !important;
}

.swal-button--cancel,
.swal2-cancel {
  background: #ffffff !important;
  color: var(--n-text-secondary, #475569) !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  border-radius: 12px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.swal-button--cancel:hover,
.swal2-cancel:hover {
  background: #F7F8FA !important;
  color: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary-light, #3A4A9F) !important;
}

/* 23.2 MODALES DE BOOTSTRAP (CREAR/EDITAR - LOCATION, TAX, DOCUMENT, ETC.) */
.modal-backdrop {
  background-color: rgba(2, 27, 121, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Centrado vertical y horizontal universal de todos los modales */
.modal-dialog {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
  margin: 1.75rem auto !important;
  pointer-events: none !important;
}

.modal-dialog::before {
  display: block !important;
  height: calc(100vh - 3.5rem) !important;
  height: min-content !important;
  content: "" !important;
}

.modal-content {
  pointer-events: auto !important;
  background-color: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 229, 234, 0.9) !important;
  box-shadow: 0 20px 50px rgba(2, 27, 121, 0.18), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  padding: 8px 12px !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
}

.modal-header {
  border-bottom: 1px solid var(--n-border-light, #ECEEF2) !important;
  padding: 16px 20px 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .modal-title,
.modal-header h5.modal-title,
.modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--n-primary, #021B79) !important;
  margin: 0 !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
}

.modal-header .btn-close {
  opacity: 0.65 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  padding: 8px !important;
}

.modal-header .btn-close:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

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

/* Estandarización de Etiquetas dentro de los Modales (Elimina letras diminutas) */
.modal-body label,
.modal-body .form-label,
.modal-body label.small,
.modal-body label.text-muted,
.modal-body .text-muted.small {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--n-primary, #021B79) !important;
  font-family: var(--n-font-family, 'DM Sans', 'Inter', system-ui, sans-serif) !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.modal-body .form-group {
  margin-bottom: 16px !important;
}

.modal-footer {
  border-top: 1px solid var(--n-border-light, #ECEEF2) !important;
  padding: 14px 20px 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* Botones en el Footer de Modales */
.modal-footer .btn-primary,
.modal-footer button[type="submit"],
.modal-footer #btnSave,
.modal-footer #btnUpdate,
.modal-footer .btn-save,
.modal-footer .btn-update {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 24px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, var(--n-primary, #021B79) 0%, var(--n-primary-light, #3A4A9F) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(2, 27, 121, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.modal-footer .btn-primary:hover,
.modal-footer button[type="submit"]:hover,
.modal-footer #btnSave:hover,
.modal-footer #btnUpdate:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(2, 27, 121, 0.35) !important;
  background: linear-gradient(135deg, var(--n-primary-dark, #001456) 0%, var(--n-primary, #021B79) 100%) !important;
}

.modal-footer .btn-secondary,
.modal-footer .btn-close-modal,
.modal-footer [data-bs-dismiss="modal"],
.modal-footer [data-dismiss="modal"] {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  padding: 0 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: #ffffff !important;
  color: var(--n-text-secondary, #475569) !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer [data-bs-dismiss="modal"]:hover,
.modal-footer [data-dismiss="modal"]:hover {
  background: #F7F8FA !important;
  color: var(--n-primary, #021B79) !important;
  border-color: var(--n-primary-light, #3A4A9F) !important;
}


/* ============================================================
   RESPONSIVE MEDIA QUERIES — Escalado Proporcional
   Fases R1–R17 del plan de responsividad
   Breakpoints:
     desktop-xl  ≥1440px  → diseño actual intacto
     desktop     1200–1439px
     laptop      1024–1199px
     tablet       768–1023px
     phone        <768px   → cubierto por dashboard/responsive.css
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   BREAKPOINT: DESKTOP (1200px – 1439px)
   Laptops 14", pantallas HD, monitores compactos
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1439px) {

  /* R2 — Layout: Sidebar + Right Panel */
  .leftPanel,
  .leftPanel .sidebar,
  .sidebar.nepse-sidebar {
    width: 290px !important;
    max-width: 290px !important;
  }

  .rightPanel {
    margin-left: 290px !important;
    width: calc(100% - 290px) !important;
    padding: 20px 24px 32px !important;
  }

  .dashboardWrapper.sidebarClose .leftPanel .sidebar,
  .dashboardWrapper.sidebarClose .sidebar.nepse-sidebar {
    width: 70px !important;
    max-width: 70px !important;
  }

  .dashboardWrapper.sidebarClose .rightPanel {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
  }

  /* Sidebar nav items */
  .nepse-nav a,
  .leftPanel .sidebar ul li a {
    font-size: 13px !important;
    padding: 9px 12px !important;
  }

  /* R3 — KPI Cards */
  .metric-card,
  .nepse-kpi-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .righttext h2,
  .metric-value {
    font-size: 28px !important;
  }

  .leftIcon,
  .metric-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .leftIcon svg,
  .leftIcon i,
  .metric-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .maincardbox {
    gap: 14px !important;
  }

  /* R4 — Data Cards & Folder Tabs */
  .data-card,
  .customcard,
  .folder-container,
  .card:not(.nepse-kpi-card):not(.metric-card),
  .custom-table-container,
  .mainContent .row > div > .card {
    padding: 24px 26px !important;
    border-radius: 0 24px 24px 24px !important;
  }

  .data-card::before,
  .customcard::before,
  .folder-container::before,
  .card:not(.nepse-kpi-card):not(.metric-card)::before,
  .custom-table-container::before,
  .mainContent .row > div > .card::before {
    width: 140px !important;
    height: 23px !important;
    top: -22px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* R5 — Tables */
  .table thead th,
  .dataTable thead th,
  .data-table thead th {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }

  .table tbody td,
  .dataTable tbody td,
  .data-table tbody td {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .nepse-table-scroll {
    border-radius: 14px !important;
  }

  /* R6 — Unified Toolbar */
  .nepse-unified-toolbar {
    padding: 8px 14px !important;
    gap: 10px 14px !important;
    border-radius: 18px !important;
  }

  .nepse-dt-controls .dataTables_filter input {
    width: 150px !important;
  }

  .nepse-dt-controls .dataTables_filter input:focus {
    width: 190px !important;
  }

  /* R8 — Page Headers */
  .page-title,
  .topheading,
  .heding span.topheading,
  .heding h1,
  .section-title,
  .nepse-card-header h1,
  .nepse-card-header h2,
  .nepse-card-header h3,
  .nepse-prefs__section-title,
  .acc-sec,
  fieldset legend,
  .dash-panel-title {
    font-size: 20px !important;
  }

  /* R11 — Dashboard spacing */
  .dash-module-row,
  .dash-module-block {
    padding-top: 24px !important;
    margin-bottom: 36px !important;
  }

  .dash-main-title {
    margin-bottom: 30px !important;
  }

  /* R13 — Dropdowns */
  .dropdown-menu {
    border-radius: 14px !important;
    min-width: 165px !important;
  }

  .dropdown-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* R14 — Progress bars */
  .stacked-progress-container,
  .progress,
  table .progress,
  table .stacked-progress-container {
    height: 16px !important;
    min-height: 16px !important;
  }

  .progress-bar1 span,
  .progress-bar span,
  .stacked-segment span,
  .progress-bar1 .text-white {
    font-size: 10px !important;
  }

  /* R17 — ApexCharts toolbar */
  .apexcharts-toolbar {
    gap: 4px !important;
  }

  .apexcharts-toolbar .apexcharts-menu-icon,
  .apexcharts-toolbar .apexcharts-reset-icon,
  .apexcharts-toolbar .apexcharts-zoom-icon,
  .apexcharts-toolbar .apexcharts-zoomin-icon,
  .apexcharts-toolbar .apexcharts-zoomout-icon,
  .apexcharts-toolbar .apexcharts-pan-icon {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   BREAKPOINT: LAPTOP (1024px – 1199px)
   Laptops 13", tablets landscape, monitores compactos
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {

  /* R2 — Layout: Sidebar + Right Panel */
  .leftPanel,
  .leftPanel .sidebar,
  .sidebar.nepse-sidebar {
    width: 280px !important;
    max-width: 280px !important;
    padding: 20px 12px !important;
  }

  .rightPanel {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
    padding: 18px 20px 28px !important;
  }

  .dashboardWrapper.sidebarClose .leftPanel .sidebar,
  .dashboardWrapper.sidebarClose .sidebar.nepse-sidebar {
    width: 66px !important;
    max-width: 66px !important;
    padding: 20px 8px !important;
  }

  .dashboardWrapper.sidebarClose .rightPanel {
    margin-left: 66px !important;
    width: calc(100% - 66px) !important;
  }

  /* Sidebar nav items */
  .nepse-nav a,
  .leftPanel .sidebar ul li a {
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }

  .nepse-nav a svg,
  .nepse-nav a i[data-lucide],
  .leftPanel .sidebar ul li a svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
  }

  /* Sidebar collapsed circles */
  .dashboardWrapper.sidebarClose .nepse-nav a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .dashboardWrapper.sidebarClose .nepse-sidebar-user__avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .dashboardWrapper.sidebarClose .sidebar-logo.icon-only,
  .dashboardWrapper.sidebarClose .leftPanel .sidebar .logos img.icon-only {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 7px !important;
  }

  /* Sidebar header */
  .sidebar-header,
  .nepse-sidebar-header,
  .leftPanel .sidebar .logos {
    height: 52px !important;
    margin: 0 0 20px 0 !important;
  }

  .sidebar-logo.full,
  .leftPanel .sidebar .logos img.full {
    height: 38px !important;
    max-width: 140px !important;
  }

  /* Section heading */
  .headingsection {
    font-size: 10px !important;
    margin: 0 0 10px 6px !important;
  }

  /* Header toggle & logout */
  .nepse-shell-toggle,
  .header .leftBar button.dahboardToggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .nepse-logout-btn,
  .logouticon a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .header.nepse-app-header .searchBar h2 {
    font-size: 18px !important;
  }

  /* R3 — KPI Cards */
  .metric-card,
  .nepse-kpi-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .righttext h2,
  .metric-value {
    font-size: 26px !important;
  }

  .leftIcon,
  .metric-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .leftIcon svg,
  .leftIcon i,
  .metric-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .righttext span,
  .metric-label {
    font-size: 12px !important;
  }

  .maincardbox {
    gap: 12px !important;
  }

  /* R4 — Data Cards & Folder Tabs */
  .data-card,
  .customcard,
  .folder-container,
  .card:not(.nepse-kpi-card):not(.metric-card),
  .custom-table-container,
  .mainContent .row > div > .card {
    padding: 20px 22px !important;
    border-radius: 0 20px 20px 20px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  .data-card::before,
  .customcard::before,
  .folder-container::before,
  .card:not(.nepse-kpi-card):not(.metric-card)::before,
  .custom-table-container::before,
  .mainContent .row > div > .card::before {
    width: 120px !important;
    height: 21px !important;
    top: -20px !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* R5 — Tables */
  .table thead th,
  .dataTable thead th,
  .data-table thead th {
    padding: 9px 12px !important;
    font-size: 10.5px !important;
  }

  .table tbody td,
  .dataTable tbody td,
  .data-table tbody td {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
  }

  .nepse-table-scroll {
    border-radius: 12px !important;
  }

  /* R6 — Unified Toolbar */
  .nepse-unified-toolbar {
    padding: 8px 12px !important;
    gap: 8px 12px !important;
    border-radius: 16px !important;
  }

  .nepse-filter-section input.form-control {
    height: 34px !important;
    font-size: 12.5px !important;
    min-width: 90px !important;
    border-radius: 17px !important;
  }

  .nepse-filter-section select.form-control,
  .nepse-filter-section select {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12.5px !important;
    min-width: 90px !important;
    border-radius: 17px !important;
  }

  .nepse-filter-actions-col {
    height: 34px !important;
  }

  .nepse-dt-controls .dataTables_filter input {
    width: 130px !important;
    height: 34px !important;
    font-size: 12.5px !important;
    border-radius: 17px !important;
  }

  .nepse-dt-controls .dataTables_filter input:focus {
    width: 170px !important;
  }

  .nepse-dt-controls .dataTables_length select {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 17px !important;
  }

  .nepse-dt-controls .dataTables_length,
  .nepse-dt-controls .dataTables_filter {
    font-size: 12px !important;
  }

  /* R7 — Buttons */
  .btn-primary,
  .btn.bg-blue,
  .btn-success:not(.icon-btn),
  .custonbtndownlaod.userbtn,
  .btn-submit,
  .nepse-btn,
  .nepse-btn--primary,
  button[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action),
  input[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action) {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }

  .btn-secondary,
  .btn-outline-secondary,
  .btn-cancel,
  .nepse-btn--secondary {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }

  .icon-btn,
  .icon-btn-action,
  .nepse-icon-btn,
  button.icon-btn,
  button.icon-btn-action,
  button.nepse-icon-btn,
  button[type="submit"].nepse-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .icon-btn svg,
  .icon-btn-action svg,
  .nepse-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .btn-action-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .btn-action-icon svg,
  .btn-action-icon i[data-lucide] {
    width: 14px !important;
    height: 14px !important;
  }

  .btn-toolbar-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .btn-toolbar-icon svg,
  .btn-toolbar-icon i[data-lucide] {
    width: 16px !important;
    height: 16px !important;
  }

  .toolbar-action-group,
  .nepse-toolbar,
  ul.markdown {
    gap: 6px !important;
  }

  /* R8 — Page Headers */
  .page-title,
  .topheading,
  .heding span.topheading,
  .heding h1,
  .section-title,
  .nepse-card-header h1,
  .nepse-card-header h2,
  .nepse-card-header h3,
  .nepse-prefs__section-title,
  .acc-sec,
  fieldset legend,
  .dash-panel-title {
    font-size: 18px !important;
  }

  .create {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  /* R9 — Forms & Inputs */
  input[type="text"]:not(.nepse-password-wrap input),
  input[type="email"],
  input[type="password"]:not(.nepse-password-wrap input),
  input[type="number"],
  input[type="date"],
  input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.nepse-password-wrap input) {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13.5px !important;
    border-radius: 19px !important;
  }

  select.form-control,
  select.form-select,
  select.customselecter,
  select {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13.5px !important;
    border-radius: 19px !important;
  }

  .nepse-password-wrap input[type="password"],
  .nepse-password-wrap input[type="text"],
  .nepse-password-wrap .form-control,
  .nepse-password-wrap input.form-control,
  .nepse-password-wrap input {
    height: 38px !important;
    min-height: 38px !important;
  }

  .wrapper input[type="text"],
  .wrapper input[type="email"],
  .wrapper input[type="password"],
  .wrapper input[type="number"],
  .wrapper input[type="date"],
  .wrapper select {
    height: 42px !important;
  }

  .number {
    font-size: 12.5px !important;
    padding: 5px 12px !important;
  }

  .Registrationtext {
    font-size: 18px !important;
  }

  /* R10 — Modals */
  .modal-content {
    padding: 6px 10px !important;
    border-radius: 22px !important;
  }

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

  .modal-header .modal-title,
  .modal-header h5.modal-title,
  .modal-title {
    font-size: 17px !important;
  }

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

  .modal-body label,
  .modal-body .form-label,
  .modal-body label.small,
  .modal-body label.text-muted {
    font-size: 13px !important;
  }

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

  .modal-footer .btn-primary,
  .modal-footer button[type="submit"],
  .modal-footer #btnSave,
  .modal-footer #btnUpdate,
  .modal-footer .btn-save,
  .modal-footer .btn-update {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 20px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
  }

  .modal-footer .btn-secondary,
  .modal-footer .btn-close-modal,
  .modal-footer [data-bs-dismiss="modal"],
  .modal-footer [data-dismiss="modal"] {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
  }

  /* SweetAlert */
  .swal-modal,
  .swal2-popup {
    padding: 28px 24px !important;
    border-radius: 22px !important;
  }

  .swal-title,
  .swal2-title {
    font-size: 18px !important;
  }

  .swal-text,
  .swal2-html-container {
    font-size: 14px !important;
  }

  .swal-button,
  .swal2-confirm,
  .swal-button--confirm {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 24px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
  }

  .swal-button--cancel,
  .swal2-cancel {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 20px !important;
    border-radius: 11px !important;
  }

  /* R11 — Dashboard */
  .dash-module-row,
  .dash-module-block {
    padding-top: 20px !important;
    margin-bottom: 28px !important;
  }

  .dash-main-title {
    margin-bottom: 24px !important;
    font-size: 18px !important;
  }

  /* R13 — Dropdowns & Kebab */
  .dropdown-menu {
    border-radius: 12px !important;
    min-width: 155px !important;
    padding: 6px !important;
  }

  .dropdown-item {
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    gap: 8px !important;
  }

  .dropdown-item svg,
  .dropdown-item i[data-lucide] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }

  .nepse-kebab-btn,
  .ds-actions-btn.nepse-kebab-btn,
  button.ds-actions-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .nepse-kebab-btn svg,
  .nepse-kebab-btn i[data-lucide] {
    width: 15px !important;
    height: 15px !important;
  }

  .nepse-kebab-menu {
    min-width: 155px !important;
    border-radius: 10px !important;
  }

  .nepse-kebab-menu .dropdown-item {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  /* R13 — Pagination */
  .dataTables_wrapper .dataTables_paginate .paginate_button,
  .dataTables_wrapper .dataTables_paginate .paginate_button a,
  .dataTables_wrapper .dataTables_paginate a.page-link,
  .pagination .page-item .page-link,
  .pagination .page-link {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    padding: 5px 10px !important;
  }

  .nepse-dt-footer .dataTables_info,
  .dataTables_wrapper .dataTables_info,
  .dataTables_info {
    font-size: 12px !important;
  }

  /* R14 — Progress bars */
  .stacked-progress-container,
  .progress,
  table .progress,
  table .stacked-progress-container {
    height: 15px !important;
    min-height: 15px !important;
  }

  .progress-cont .progress,
  .progress {
    height: 20px !important;
    min-height: 20px !important;
  }

  .progress-bar1 span,
  .progress-bar span,
  .stacked-segment span,
  .progress-bar1 .text-white {
    font-size: 10px !important;
  }

  .status-led,
  .status-led-approved,
  .status-led-pending,
  .status-led-rejected,
  .status-led-uploaded,
  .status-led-expired,
  .statusActive,
  .statusDeactive,
  .badge-approved,
  .badge-pending,
  .badge-rejected,
  .badge-uploaded,
  .badge-expired,
  .dash-badge {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
  }

  /* R17 — ApexCharts */
  .apexcharts-toolbar .apexcharts-menu-icon,
  .apexcharts-toolbar .apexcharts-reset-icon,
  .apexcharts-toolbar .apexcharts-zoom-icon,
  .apexcharts-toolbar .apexcharts-zoomin-icon,
  .apexcharts-toolbar .apexcharts-zoomout-icon,
  .apexcharts-toolbar .apexcharts-pan-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .apexcharts-menu {
    min-width: 135px !important;
    border-radius: 12px !important;
  }

  .apexcharts-menu-item {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }

  /* R12 — Detail views: table-based action buttons in rows */
  .table tbody td .icon-btn,
  .table tbody td .icon-btn-action,
  .table tbody td .nepse-icon-btn,
  .table tbody td .nepse-kebab-btn,
  .dataTable tbody td .icon-btn,
  .dataTable tbody td .icon-btn-action,
  .dataTable tbody td .nepse-icon-btn,
  .dataTable tbody td .nepse-kebab-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
  }

  .table tbody td .icon-btn svg,
  .table tbody td .icon-btn-action svg,
  .table tbody td .nepse-icon-btn svg,
  .dataTable tbody td .icon-btn svg,
  .dataTable tbody td .icon-btn-action svg,
  .dataTable tbody td .nepse-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Sidebar user */
  .nepse-sidebar-user__avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }

  .nepse-sidebar-user__meta strong {
    font-size: 11.5px !important;
  }

  .nepse-sidebar-user__meta span {
    font-size: 10px !important;
  }

  .nepse-sidebar-user {
    gap: 10px !important;
    padding-top: 14px !important;
  }

  /* Checkbox & Switch slightly smaller */
  input[type="checkbox"].switch,
  input[type="checkbox"].CreateWorkerStatus {
    width: 38px !important;
    min-width: 38px !important;
    height: 20px !important;
  }

  input[type="checkbox"].switch::before,
  input[type="checkbox"].CreateWorkerStatus::before {
    width: 14px !important;
    height: 14px !important;
  }

  input[type="checkbox"].switch:checked::before,
  input[type="checkbox"].CreateWorkerStatus:checked::before {
    transform: translateX(18px) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   BREAKPOINT: TABLET (768px – 1023px)
   Tablets portrait, pantallas intermedias
   Sidebar visible pero reducido, panel se expande
   ──────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* R2 — Layout: Sidebar compact + Right Panel expanded */
  .leftPanel,
  .leftPanel .sidebar,
  .sidebar.nepse-sidebar {
    width: 265px !important;
    max-width: 265px !important;
    padding: 16px 10px !important;
  }

  .rightPanel {
    margin-left: 265px !important;
    width: calc(100% - 265px) !important;
    padding: 16px 16px 24px !important;
  }

  .dashboardWrapper.sidebarClose .leftPanel .sidebar,
  .dashboardWrapper.sidebarClose .sidebar.nepse-sidebar {
    width: 60px !important;
    max-width: 60px !important;
    padding: 16px 6px !important;
  }

  .dashboardWrapper.sidebarClose .rightPanel {
    margin-left: 60px !important;
    width: calc(100% - 60px) !important;
  }

  /* Sidebar nav */
  .nepse-nav a,
  .leftPanel .sidebar ul li a {
    font-size: 12px !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  .nepse-nav a svg,
  .nepse-nav a i[data-lucide],
  .leftPanel .sidebar ul li a svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }

  .headingsection {
    font-size: 9px !important;
    margin: 0 0 8px 4px !important;
  }

  .sidebar-header,
  .nepse-sidebar-header,
  .leftPanel .sidebar .logos {
    height: 46px !important;
    margin: 0 0 16px 0 !important;
  }

  .sidebar-logo.full,
  .leftPanel .sidebar .logos img.full {
    height: 32px !important;
    max-width: 120px !important;
  }

  /* Collapsed circles */
  .dashboardWrapper.sidebarClose .nepse-nav a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .dashboardWrapper.sidebarClose .sidebar-logo.icon-only,
  .dashboardWrapper.sidebarClose .leftPanel .sidebar .logos img.icon-only {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 6px !important;
  }

  .dashboardWrapper.sidebarClose .nepse-sidebar-user__avatar {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Header */
  .nepse-shell-toggle,
  .header .leftBar button.dahboardToggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .nepse-logout-btn,
  .logouticon a {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .header.nepse-app-header .searchBar h2 {
    font-size: 16px !important;
  }

  /* R3 — KPI Cards */
  .metric-card,
  .nepse-kpi-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .righttext h2,
  .metric-value {
    font-size: 24px !important;
  }

  .leftIcon,
  .metric-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .leftIcon svg,
  .leftIcon i,
  .metric-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .righttext span,
  .metric-label {
    font-size: 11.5px !important;
  }

  .maincardbox {
    gap: 10px !important;
  }

  /* R4 — Data Cards */
  .data-card,
  .customcard,
  .folder-container,
  .card:not(.nepse-kpi-card):not(.metric-card),
  .custom-table-container,
  .mainContent .row > div > .card {
    padding: 16px 18px !important;
    border-radius: 0 18px 18px 18px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }

  .data-card::before,
  .customcard::before,
  .folder-container::before,
  .card:not(.nepse-kpi-card):not(.metric-card)::before,
  .custom-table-container::before,
  .mainContent .row > div > .card::before {
    width: 100px !important;
    height: 19px !important;
    top: -18px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* R5 — Tables */
  .table thead th,
  .dataTable thead th,
  .data-table thead th {
    padding: 8px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
  }

  .table tbody td,
  .dataTable tbody td,
  .data-table tbody td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .nepse-table-scroll {
    border-radius: 10px !important;
    margin-top: 8px !important;
  }

  /* R6 — Unified Toolbar */
  .nepse-unified-toolbar {
    padding: 6px 10px !important;
    gap: 6px 10px !important;
    border-radius: 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nepse-filter-section {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .nepse-filter-section > div {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 140px !important;
  }

  .nepse-filter-section > .nepse-filter-actions-col {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .nepse-filter-section input.form-control {
    height: 32px !important;
    font-size: 12px !important;
    min-width: 120px !important;
    border-radius: 16px !important;
  }

  .nepse-filter-section select.form-control,
  .nepse-filter-section select {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    min-width: 120px !important;
    border-radius: 16px !important;
  }

  .nepse-dt-controls-section {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .nepse-dt-controls .dataTables_filter input {
    width: 120px !important;
    height: 32px !important;
    font-size: 12px !important;
    border-radius: 16px !important;
  }

  .nepse-dt-controls .dataTables_filter input:focus {
    width: 150px !important;
  }

  .nepse-dt-controls .dataTables_length select {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11.5px !important;
    border-radius: 16px !important;
  }

  /* R7 — Buttons */
  .btn-primary,
  .btn.bg-blue,
  .btn-success:not(.icon-btn),
  .custonbtndownlaod.userbtn,
  .btn-submit,
  .nepse-btn,
  .nepse-btn--primary,
  button[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action),
  input[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action) {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  .btn-secondary,
  .btn-outline-secondary,
  .btn-cancel,
  .nepse-btn--secondary {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
  }

  .icon-btn,
  .icon-btn-action,
  .nepse-icon-btn,
  button.icon-btn,
  button.icon-btn-action,
  button.nepse-icon-btn,
  button[type="submit"].nepse-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .icon-btn svg,
  .icon-btn-action svg,
  .nepse-icon-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  .btn-action-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .btn-action-icon svg,
  .btn-action-icon i[data-lucide] {
    width: 13px !important;
    height: 13px !important;
  }

  .toolbar-action-group,
  .nepse-toolbar,
  ul.markdown {
    gap: 5px !important;
  }

  /* R8 — Page Headers */
  .page-title,
  .topheading,
  .heding span.topheading,
  .heding h1,
  .section-title,
  .nepse-card-header h1,
  .nepse-card-header h2,
  .nepse-card-header h3,
  .nepse-prefs__section-title,
  .acc-sec,
  fieldset legend,
  .dash-panel-title {
    font-size: 17px !important;
  }

  .create {
    gap: 10px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap !important;
  }

  /* R9 — Forms */
  input[type="text"]:not(.nepse-password-wrap input),
  input[type="email"],
  input[type="password"]:not(.nepse-password-wrap input),
  input[type="number"],
  input[type="date"],
  input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.nepse-password-wrap input) {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 18px !important;
    padding: 0 14px !important;
  }

  select.form-control,
  select.form-select,
  select.customselecter,
  select {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 18px !important;
    padding: 0 34px 0 14px !important;
  }

  .nepse-password-wrap input[type="password"],
  .nepse-password-wrap input[type="text"],
  .nepse-password-wrap .form-control,
  .nepse-password-wrap input.form-control,
  .nepse-password-wrap input {
    height: 36px !important;
    min-height: 36px !important;
  }

  .wrapper input[type="text"],
  .wrapper input[type="email"],
  .wrapper input[type="password"],
  .wrapper input[type="number"],
  .wrapper input[type="date"],
  .wrapper select {
    height: 40px !important;
  }

  .wrapper label.form-label,
  .wrapper label {
    font-size: 12.5px !important;
  }

  label,
  .form-label {
    font-size: 12.5px !important;
  }

  .number {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  .number .infotext {
    font-size: 11.5px !important;
  }

  .Registrationtext {
    font-size: 17px !important;
  }

  /* R10 — Modals */
  .modal-content {
    border-radius: 20px !important;
    padding: 4px 8px !important;
  }

  .modal-header .modal-title,
  .modal-header h5.modal-title,
  .modal-title {
    font-size: 16px !important;
  }

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

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

  .modal-body label,
  .modal-body .form-label {
    font-size: 12.5px !important;
  }

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

  .modal-footer .btn-primary,
  .modal-footer button[type="submit"],
  .modal-footer #btnSave,
  .modal-footer #btnUpdate {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .modal-footer .btn-secondary,
  .modal-footer [data-bs-dismiss="modal"],
  .modal-footer [data-dismiss="modal"] {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  .swal-modal,
  .swal2-popup {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .swal-title,
  .swal2-title {
    font-size: 17px !important;
  }

  .swal-text,
  .swal2-html-container {
    font-size: 13.5px !important;
  }

  .swal-button,
  .swal2-confirm,
  .swal-button--confirm {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* R11 — Dashboard */
  .dash-module-row,
  .dash-module-block {
    padding-top: 16px !important;
    margin-bottom: 24px !important;
  }

  .dash-main-title {
    margin-bottom: 20px !important;
    font-size: 17px !important;
  }

  /* R13 — Dropdowns & Kebab */
  .dropdown-menu {
    border-radius: 11px !important;
    min-width: 140px !important;
    padding: 5px !important;
  }

  .dropdown-item {
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
    gap: 7px !important;
  }

  .dropdown-item svg,
  .dropdown-item i[data-lucide] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  .nepse-kebab-btn,
  .ds-actions-btn.nepse-kebab-btn,
  button.ds-actions-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
  }

  .nepse-kebab-btn svg,
  .nepse-kebab-btn i[data-lucide] {
    width: 14px !important;
    height: 14px !important;
  }

  .nepse-kebab-menu {
    min-width: 140px !important;
    border-radius: 9px !important;
  }

  /* Pagination */
  .dataTables_wrapper .dataTables_paginate .paginate_button,
  .dataTables_wrapper .dataTables_paginate .paginate_button a,
  .pagination .page-item .page-link,
  .pagination .page-link {
    width: 30px !important;
    height: 30px !important;
    font-size: 12.5px !important;
    padding: 4px 8px !important;
  }

  .nepse-dt-footer .dataTables_info,
  .dataTables_wrapper .dataTables_info,
  .dataTables_info {
    font-size: 11.5px !important;
  }

  /* R14 — Progress bars */
  .stacked-progress-container,
  .progress,
  table .progress,
  table .stacked-progress-container {
    height: 14px !important;
    min-height: 14px !important;
  }

  .progress-cont .progress,
  .progress {
    height: 18px !important;
    min-height: 18px !important;
  }

  .progress-bar1 span,
  .progress-bar span,
  .stacked-segment span {
    font-size: 9px !important;
  }

  .status-led,
  .status-led-approved,
  .status-led-pending,
  .status-led-rejected,
  .status-led-uploaded,
  .status-led-expired,
  .statusActive,
  .statusDeactive,
  .badge-approved,
  .badge-pending,
  .badge-rejected,
  .badge-uploaded,
  .badge-expired,
  .dash-badge {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
  }

  /* R17 — ApexCharts */
  .apexcharts-toolbar .apexcharts-menu-icon,
  .apexcharts-toolbar .apexcharts-reset-icon,
  .apexcharts-toolbar .apexcharts-zoom-icon,
  .apexcharts-toolbar .apexcharts-zoomin-icon,
  .apexcharts-toolbar .apexcharts-zoomout-icon,
  .apexcharts-toolbar .apexcharts-pan-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .apexcharts-toolbar svg {
    width: 13px !important;
    height: 13px !important;
  }

  .apexcharts-menu {
    min-width: 120px !important;
    border-radius: 10px !important;
  }

  .apexcharts-menu-item {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* R12 — Table action icons */
  .table tbody td .icon-btn,
  .table tbody td .icon-btn-action,
  .table tbody td .nepse-icon-btn,
  .dataTable tbody td .icon-btn,
  .dataTable tbody td .icon-btn-action,
  .dataTable tbody td .nepse-icon-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
  }

  .table tbody td .icon-btn svg,
  .table tbody td .icon-btn-action svg,
  .table tbody td .nepse-icon-btn svg,
  .dataTable tbody td .icon-btn svg,
  .dataTable tbody td .icon-btn-action svg,
  .dataTable tbody td .nepse-icon-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Sidebar user */
  .nepse-sidebar-user__avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .nepse-sidebar-user__avatar svg,
  .nepse-sidebar-user__avatar i {
    width: 16px !important;
    height: 16px !important;
  }

  .nepse-sidebar-user__meta strong {
    font-size: 11px !important;
  }

  .nepse-sidebar-user__meta span {
    font-size: 9.5px !important;
  }

  .nepse-sidebar-user {
    gap: 8px !important;
    padding-top: 12px !important;
  }

  /* Switches */
  input[type="checkbox"].switch,
  input[type="checkbox"].CreateWorkerStatus {
    width: 36px !important;
    min-width: 36px !important;
    height: 19px !important;
  }

  input[type="checkbox"].switch::before,
  input[type="checkbox"].CreateWorkerStatus::before {
    width: 13px !important;
    height: 13px !important;
  }

  input[type="checkbox"].switch:checked::before,
  input[type="checkbox"].CreateWorkerStatus:checked::before {
    transform: translateX(17px) !important;
  }

  /* Filter action pills */
  .filter-action-pills .btn-filter-apply,
  .filter-action-pills .btn-filter-clear {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }

  /* Nepse nav gap */
  .nepse-nav,
  .leftPanel .sidebar ul {
    gap: 5px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   BREAKPOINT: SMALL-PHONE REFINEMENTS (< 768px)
   Complementary to dashboard/responsive.css
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Ensure data cards scale down for narrow phone views */
  .data-card,
  .customcard,
  .folder-container,
  .custom-table-container {
    padding: 14px 14px !important;
    border-radius: 0 14px 14px 14px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  .data-card::before,
  .customcard::before,
  .folder-container::before,
  .custom-table-container::before {
    width: 80px !important;
    height: 17px !important;
    top: -16px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  /* KPI cards compact */
  .metric-card,
  .nepse-kpi-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .righttext h2,
  .metric-value {
    font-size: 22px !important;
  }

  .leftIcon,
  .metric-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  .leftIcon svg,
  .leftIcon i,
  .metric-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .righttext span,
  .metric-label {
    font-size: 11px !important;
  }

  .maincardbox {
    gap: 10px !important;
  }

  /* Page titles */
  .page-title,
  .topheading,
  .heding span.topheading,
  .heding h1 {
    font-size: 16px !important;
  }

  /* Buttons compact */
  .btn-primary,
  .nepse-btn,
  .nepse-btn--primary,
  button[type="submit"]:not(.nepse-icon-btn):not(.icon-btn):not(.icon-btn-action) {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  .btn-secondary,
  .nepse-btn--secondary {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }

  /* Table cells compact */
  .table thead th,
  .dataTable thead th {
    padding: 7px 8px !important;
    font-size: 9.5px !important;
  }

  .table tbody td,
  .dataTable tbody td {
    padding: 7px 8px !important;
    font-size: 11.5px !important;
  }

  /* Unified toolbar stacking */
  .nepse-unified-toolbar {
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    flex-direction: column !important;
  }

  .nepse-filter-section > div {
    flex: 1 1 100% !important;
    min-width: 140px !important;
  }

  .nepse-filter-section > .nepse-filter-actions-col {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* Inputs compact */
  input[type="text"]:not(.nepse-password-wrap input),
  input[type="email"],
  input[type="password"]:not(.nepse-password-wrap input),
  input[type="number"],
  input[type="date"],
  input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not(.nepse-password-wrap input) {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  select.form-control,
  select.form-select,
  select {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13px !important;
  }

  /* Modals */
  .swal-modal,
  .swal2-popup {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .swal-title,
  .swal2-title {
    font-size: 16px !important;
  }

  .modal-content {
    border-radius: 18px !important;
  }

  /* Dashboard modules */
  .dash-module-row,
  .dash-module-block {
    padding-top: 14px !important;
    margin-bottom: 20px !important;
  }

  .dash-main-title {
    margin-bottom: 16px !important;
  }
}

/* ESTILOS PARA NEP-DT-LENGTH (Show entries) Y BUSCADOR ALINEADO INFERIOR */
.nepse-unified-toolbar:has(.nepse-dt-length),
.nepse-unified-toolbar.has-dt-length {
  justify-content: flex-start !important;
}

.nepse-unified-toolbar:has(.nepse-dt-length) .nepse-filter-section,
.nepse-unified-toolbar.has-dt-length .nepse-filter-section {
  flex-basis: 100% !important;
  width: 100% !important;
  order: 1 !important;
}

.nepse-unified-toolbar:has(.nepse-dt-length) .nepse-dt-length,
.nepse-unified-toolbar.has-dt-length .nepse-dt-length,
.nepse-dt-length {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  color: var(--n-text-secondary, #5C6370) !important;
  font-weight: 500 !important;
  flex: 0 0 auto !important;
  order: 2 !important;
  margin-top: 10px !important;
}

.nepse-unified-toolbar:has(.nepse-dt-length) .nepse-dt-controls-section,
.nepse-unified-toolbar.has-dt-length .nepse-dt-controls-section {
  flex: 0 0 auto !important;
  order: 3 !important;
  margin-left: 20px !important;
  margin-top: 10px !important;
  justify-content: flex-start !important;
}

.nepse-dt-length .dataTables_length {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nepse-dt-length .dataTables_length label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.nepse-dt-length .dataTables_length select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 28px 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--n-border, #E2E5EA) !important;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%235C6370' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  color: var(--n-text-primary, #1A1D26) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nepse-dt-length .dataTables_length select:focus {
  outline: none !important;
  border-color: var(--n-primary, #021B79) !important;
  box-shadow: 0 0 0 3px rgba(2, 27, 121, 0.1) !important;
}

@media (max-width: 991px) {
  /* En responsive, Buscar y Show entries comparten línea juntos */
  .nepse-unified-toolbar:has(.nepse-dt-length) .nepse-dt-length,
  .nepse-unified-toolbar.has-dt-length .nepse-dt-length,
  .nepse-dt-length {
    flex-basis: auto !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    margin-top: 10px !important;
  }
  .nepse-unified-toolbar:has(.nepse-dt-length) .nepse-dt-controls-section,
  .nepse-unified-toolbar.has-dt-length .nepse-dt-controls-section,
  .nepse-dt-controls-section {
    flex-basis: auto !important;
    flex: 0 0 auto !important;
    order: 3 !important;
    margin-left: 16px !important;
    margin-top: 10px !important;
    justify-content: flex-start !important;
  }
  .nepse-dt-controls {
    width: auto !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================
   NEPSE MULTI-BRANCH SELECTOR COMPONENT (User/Create, User/Edit, SubContractor/Create)
   ============================================================ */
.nepse-branch-selector-card {
  background: #ffffff !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 2px 8px rgba(2, 27, 121, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.nepse-branch-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.nepse-branch-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #EEF0F9 !important;
  color: #021B79 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.nepse-branch-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #021B79 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.nepse-branch-subtitle {
  font-size: 13.5px !important;
  color: #64748B !important;
  margin: 3px 0 0 0 !important;
  line-height: 1.4 !important;
}

.nepse-branch-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.nepse-branch-counter {
  background: #EEF0F9 !important;
  color: #021B79 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #D4D8EE !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.nepse-branch-counter.is-all {
  background: #EEFBF7 !important;
  color: #20967A !important;
  border-color: #B5EADF !important;
}

.nepse-branch-counter.is-none {
  background: #FFF4F5 !important;
  color: #DD586A !important;
  border-color: #F7C1C8 !important;
}

.nepse-btn-branch-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.nepse-btn-branch-select-all {
  background: #EEF0F9 !important;
  color: #021B79 !important;
  border: 1.5px solid #D4D8EE !important;
}

.nepse-btn-branch-select-all:hover {
  background: #021B79 !important;
  color: #ffffff !important;
  border-color: #021B79 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(2, 27, 121, 0.15) !important;
}

.nepse-btn-branch-deselect-all {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1.5px solid #E2E8F0 !important;
}

.nepse-btn-branch-deselect-all:hover {
  background: #F8FAFC !important;
  color: #1E293B !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

.nepse-branch-search-bar .nepse-search-input-wrapper {
  position: relative !important;
  max-width: 100% !important;
}

.nepse-branch-search-field {
  padding-left: 40px !important;
  padding-right: 38px !important;
  font-size: 14px !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  color: #1E293B !important;
}

.nepse-branch-search-field:focus {
  background: #ffffff !important;
  border-color: #021B79 !important;
  box-shadow: 0 0 0 3px rgba(2, 27, 121, 0.12) !important;
}

.nepse-search-ico {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94A3B8 !important;
  pointer-events: none !important;
}

.btn-clear-search {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #94A3B8 !important;
  padding: 4px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-clear-search:hover {
  color: #1E293B !important;
  background: #EEF0F9 !important;
}

.nepse-branch-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: 4px 2px !important;
}

.nepse-branch-item {
  background: #ffffff !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

.nepse-branch-item:hover {
  border-color: #94A3B8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(2, 27, 121, 0.06) !important;
}

.nepse-branch-item.is-selected {
  border-color: #021B79 !important;
  border-width: 2px !important;
  background: #F4F6FC !important;
  box-shadow: 0 4px 14px rgba(2, 27, 121, 0.10) !important;
}

.nepse-branch-card-label {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
}

.nepse-branch-check {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nepse-branch-check .form-check-input {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.nepse-branch-check .form-check-input:checked {
  background-color: #021B79 !important;
  border-color: #021B79 !important;
}

.nepse-branch-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.nepse-branch-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.nepse-branch-name {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #1E293B !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nepse-badge-principal {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #EEF0F9 !important;
  color: #021B79 !important;
  border: 1px solid #D4D8EE !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.nepse-branch-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.nepse-branch-code-tag {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F1F5F9 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nepse-branch-city {
  font-size: 12.5px !important;
  color: #64748B !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nepse-branch-footer-note {
  background: #F8FAFC !important;
  border: 1px dashed #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
}

.nepse-branch-footer-note span {
  font-size: 13.5px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

/* P10c — hints de permisos usuario (Create/Edit/Details). Gana a .wrapper label 12.5/13px. */
#canBulkActionsBlock .nepse-user-perm-label,
.nepse-user-perm-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #021B79 !important;
  line-height: 1.3 !important;
}

#canBulkActionsBlock .nepse-user-perm-title,
.nepse-user-perm-title {
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #021B79 !important;
  line-height: 1.3 !important;
}

#canBulkActionsBlock .nepse-user-perm-hint,
.nepse-user-perm-hint {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #4B5563 !important;
  max-width: 42rem !important;
}