@charset "UTF-8";
/* ==========================================================================
   ColombiaWisp — UI Redesign 2026 "Nebula" (capa de diseño)
   --------------------------------------------------------------------------
   Cambio visual profundo sobre Color Admin SIN tocar markup ni JS:

     1) Lienzo con malla de degradados (ya no es gris plano).
     2) Tarjetas KPI oscuras en el dashboard (estilo SaaS moderno).
     3) Encabezados de tabla navy en TODAS las tablas.
     4) Botones con degradado + glow (respetan el acento del theme panel).
     5) Inputs estilo "relleno" (filled) con foco blanco + anillo acento.
     6) Sidebar con item activo en degradado completo + perfil en tarjeta.
     7) Paneles flotantes reales (radio 20px, sombras en capas, título
        con barra de acento).
     8) Modo oscuro y acentos del theme panel se siguen respetando
        (todo consume tokens --cw-*).
   ========================================================================== */


/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root{
  --cw-radius-sm: 10px;
  --cw-radius: 16px;
  --cw-radius-lg: 20px;
  --cw-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 44px rgba(15,23,42,.10);

  /* Fallbacks para páginas sin cwisp-theme.js (login cliente, etc.).
     --cw-bg / --cw-card-bg se aliasan a los tokens reales del tema para
     que el modo oscuro propague automáticamente. */
  --cw-accent: #348FE2;
  --cw-accent-dark: #2563A8;
  --cw-accent-rgb: 52,143,226;
  --cw-accent-contrast: #ffffff;
  --cw-sidebar-bg: #0d1424;
  --cw-header-bg: #ffffff;
  --cw-bg: var(--cw-surface-page, #eef1f8);
  --cw-card-bg: var(--cw-surface-panel, #ffffff);
  --cw-text: #1e2a3a;
  --cw-text-muted: #67748a;
  --cw-border: rgba(15,23,42,.08);
  --cw-border-strong: rgba(15,23,42,.16);
  --cw-surface-subtle: #f0f3f9;
  --cw-surface-raised: #ffffff;
  --cw-info: #49b6d6;
  --cw-success: #27a24b;
  --cw-danger: #e04b57;
  --cw-warning: #f19a2a;

  --cw-font: 'Inter','Open Sans','Segoe UI',Roboto,system-ui,-apple-system,sans-serif;
  --cw-shadow-lg: 0 2px 4px rgba(15,23,42,.06), 0 30px 70px rgba(15,23,42,.16);
  --cw-ease: cubic-bezier(.2,.7,.3,1);

  /* Degradados de marca */
  --cw-grad-accent: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-dark));
  --cw-navy-1: #17223a;
  --cw-navy-2: #0f1830;
}

:root[data-cwisp-scheme="dark"]{
  --cw-shadow: 0 1px 2px rgba(0,0,0,.32), 0 22px 52px rgba(0,0,0,.42);
  --cw-shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 34px 80px rgba(0,0,0,.52);
  --cw-surface-subtle: #1d2739;
  --cw-navy-1: #1d2742;
  --cw-navy-2: #141c34;
}

/* Auto-learn: switch compacto (inventario PON), visible en modo oscuro. */
.cwisp-learn-switch.switch{
  width: 42px;
  height: 22px;
  vertical-align: middle;
}
.cwisp-learn-switch .slider{
  background-color: #c5cdd8;
}
.cwisp-learn-switch .slider:before{
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
}
.cwisp-learn-switch input:checked + .slider{
  background-color: var(--cw-accent, #348FE2);
}
.cwisp-learn-switch input:checked + .slider:before{
  transform: translateX(20px);
}
html[data-cwisp-scheme="dark"] .cwisp-learn-switch .slider,
html[data-cwisp-scheme="dark"] .switch .slider{
  background-color: #3a4558;
  box-shadow: inset 0 0 0 1px rgba(146,168,208,.28);
}
html[data-cwisp-scheme="dark"] .cwisp-learn-switch .slider:before,
html[data-cwisp-scheme="dark"] .switch .slider:before{
  background-color: #eef2fa;
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
html[data-cwisp-scheme="dark"] .cwisp-learn-switch input:checked + .slider,
html[data-cwisp-scheme="dark"] .switch input:checked + .slider{
  background-color: var(--cw-accent, #348FE2);
  box-shadow: inset 0 0 0 1px rgba(var(--cw-accent-rgb, 52,143,226),.45);
}

/* Tablas .display: ocultas hasta init.dt (evita FOUC de columnas crudas). */
table.display.cwisp-dt-pending,
.cwisp-dt-pending table.display,
.dataTables_wrapper.cwisp-dt-pending {
  visibility: hidden;
  min-height: 160px;
}


/* ==========================================================================
   1. Tipografía y base
   ========================================================================== */
body{
  font-family: var(--cw-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.panel-title,.modal-title,.page-header,.chart-title{
  font-family: var(--cw-font);
  letter-spacing: -.015em;
}

::selection{ background: rgba(var(--cw-accent-rgb),.25); }


/* ==========================================================================
   2. Lienzo — malla de degradados (adiós al gris plano)
   ========================================================================== */
html[data-cwisp-scheme] body,
html body{
  background-color: var(--cw-bg) !important;
  background-image:
    radial-gradient(1100px 560px at 8% -10%, rgba(var(--cw-accent-rgb),.13), transparent 55%),
    radial-gradient(900px 640px at 96% -4%, rgba(76,110,245,.10), transparent 52%),
    radial-gradient(760px 520px at 55% 110%, rgba(var(--cw-accent-rgb),.06), transparent 55%) !important;
  background-attachment: fixed !important;
}

html[data-cwisp-scheme="dark"] body,
:root[data-cwisp-scheme="dark"] body,
body[data-cwisp-scheme="dark"]{
  background-color: var(--cw-bg) !important;
  background-image:
    radial-gradient(1100px 560px at 8% -10%, rgba(var(--cw-accent-rgb),.10), transparent 55%),
    radial-gradient(900px 640px at 96% -4%, rgba(76,110,245,.09), transparent 52%),
    radial-gradient(760px 520px at 55% 110%, rgba(var(--cw-accent-rgb),.05), transparent 55%) !important;
}

#content{
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Facturación Electrónica: separar breadcrumb / título / tabs (evita recorte) */
.cw-fe-page{
  clear: both;
  padding-top: 4px;
}
.cw-fe-page > .breadcrumb{
  margin-bottom: 8px;
}
.cw-fe-page > .page-header{
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  clear: both;
}
.cw-fe-page > .cwisp-editor-tabs{
  margin-bottom: 16px;
}
.cw-fe-page > .cwisp-editor-tabs .tab-overflow{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cw-fe-page > .cwisp-editor-tabs .nav-tabs{
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 42px;
}
.cw-fe-page > .tab-content{
  clear: both;
  padding-top: 4px;
}


/* ==========================================================================
   3. Header — cristal con línea de acento
   ========================================================================== */
#header.header{
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  box-shadow: 0 10px 34px rgba(15,23,42,.10);
  border-bottom: none !important;
}
#header.header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--cw-accent) 0%,
    rgba(var(--cw-accent-rgb),.55) 34%,
    rgba(var(--cw-accent-rgb),0) 78%);
  opacity: .9;
  pointer-events: none;
}

#header .navbar-nav > li > a{
  border-radius: 10px;
  transition: background .18s ease, color .18s ease;
}
#header .navbar-nav > li > a:hover{
  background: rgba(var(--cw-accent-rgb),.10);
  color: var(--cw-accent);
}

#header .navbar-form .form-control{
  border-radius: 999px !important;
  border: 1px solid var(--cw-border-strong) !important;
  background: var(--cw-surface-subtle) !important;
  padding: 8px 18px !important;
  height: 40px !important;
  width: 300px;
  transition: width .28s var(--cw-ease), border-color .18s ease,
              background .18s ease, box-shadow .18s ease;
}
#header .navbar-form .form-control:focus{
  width: 370px;
  background: var(--cw-card-bg) !important;
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb),.15);
}

#header .navbar-user img{
  border: 2px solid rgba(var(--cw-accent-rgb),.55);
  box-shadow: 0 2px 10px rgba(var(--cw-accent-rgb),.30);
}

/* ==========================================================================
   4. Sidebar — identidad propia: rail flotante con barra de acento
      (rompe con el look genérico de "admin template")
   ========================================================================== */
#page-container #sidebar.sidebar{
  top: 56px;
  left: 12px;
  bottom: 8px;
  width: 280px;
  border-radius: 18px;
  border: 1px solid rgba(146,168,208,.14) !important;
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(var(--cw-accent-rgb),.16), transparent 60%),
    linear-gradient(195deg, #131c33 0%, #0a1122 100%) !important;
  background-attachment: local, local !important;
  box-shadow: 0 24px 60px rgba(2,6,23,.45), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
#page-container .sidebar-bg{
  background: transparent !important;
  box-shadow: none !important;
  border-right: none !important;
}

/* Perfil como tarjeta */
#sidebar .nav > li.nav-profile{
  background: linear-gradient(135deg, rgba(var(--cw-accent-rgb),.14), rgba(255,255,255,.03));
  border: 1px solid rgba(146,168,208,.16);
  border-radius: 14px;
  margin: 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#sidebar .nav-profile .image img{
  border: 2px solid rgba(var(--cw-accent-rgb),.65);
  box-shadow: 0 0 0 3px rgba(var(--cw-accent-rgb),.18);
}
#sidebar .nav-profile .info{
  color: rgba(233,238,248,.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#sidebar .nav-profile .info small{ color: rgba(200,214,238,.55); }

/* Headers de sección con guion de acento */
#sidebar .nav .nav-header{
  color: rgba(200,214,238,.55) !important;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 22px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#sidebar .nav .nav-header::before{
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--cw-accent);
  box-shadow: 0 0 8px rgba(var(--cw-accent-rgb),.8);
  flex: 0 0 auto;
}

/* Enlaces: fila fija icono + texto + caret (sin saltos) */
#sidebar .nav > li > a{
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  margin: 2px 10px;
  padding: 8px 12px;
  color: rgba(233,238,248,.66);
  white-space: nowrap;
  overflow: hidden;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Color Admin mete :before/:after clearfix que rompe el layout en flex */
#sidebar .nav > li > a:before,
#sidebar .nav > li > a:after{
  content: none !important;
  display: none !important;
  clear: none !important;
}
#sidebar .nav > li > a > i{
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: rgba(233,238,248,.60);
  font-size: 13px;
  text-align: center;
  line-height: 1;
  order: 1;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
#sidebar .nav > li > a > span{
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
/* El caret viene primero en el HTML; lo mandamos al final */
#sidebar .nav > li > a > .caret,
#sidebar .nav > li > a > b.caret{
  float: none !important;
  position: static !important;
  order: 3;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
}
#sidebar .nav > li > a > .badge,
#sidebar .nav > li > a > .label{
  order: 3;
  margin-left: auto;
  flex: 0 0 auto;
}
#sidebar .nav > li > a:hover,
#sidebar .nav > li > a:focus{
  background: rgba(255,255,255,.06);
  color: #ffffff;
  transform: translateX(2px);
}
#sidebar .nav > li > a:hover > i{
  background: rgba(var(--cw-accent-rgb),.22);
  color: var(--cw-accent);
}

/* ACTIVO: barra vertical de acento + tinte (en vez de la píldora genérica) */
#sidebar .nav > li.active > a{
  background: rgba(var(--cw-accent-rgb),.13) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cw-accent), inset 0 1px 0 rgba(255,255,255,.04);
}
#sidebar .nav > li.active > a > i,
#sidebar .nav > li.active > a:hover > i{
  background: var(--cw-accent) !important;
  background: var(--cw-grad-accent) !important;
  color: var(--cw-accent-contrast) !important;
  box-shadow: 0 4px 12px rgba(var(--cw-accent-rgb),.45);
}
#sidebar .nav > li.active > a .caret{ color: inherit; }
/* Badges del menú: siempre número blanco sobre rojo sólido
   (el label-danger "soft" del modo claro no se lee en el sidebar oscuro) */
#sidebar .cwisp-badge,
#sidebar .nav .label.label-danger,
#sidebar .nav .badge.badge-danger,
#sidebar .nav .label-danger,
#sidebar .sub-menu .label-danger{
  background: #e04555 !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  min-width: 18px;
  height: 18px;
  padding: 0 6px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
}
#sidebar .nav > li.active > a .cwisp-badge,
#sidebar .nav > li.active > a .label-danger,
#sidebar .nav > li.active > a .badge{
  background: #e04555 !important;
  color: #ffffff !important;
}
#sidebar .nav > li > a > span .cwisp-badge{
  margin-left: 8px;
  vertical-align: middle;
}

/* Aviso "ACTUALIZACIÓN DISPONIBLE": no usar el badge numérico de 18px
   (queda muy delgado). Pill a ancho del ítem, más alto y legible. */
#sidebar .nav > li.cwisp-update-available > a{
  padding-top: 8px;
  padding-bottom: 8px;
}
#sidebar .nav > li.cwisp-update-available .cwisp-update-pill,
#sidebar .nav > li.cwisp-update-available > a > .label.label-danger{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 34px;
  padding: 8px 12px !important;
  line-height: 1.25 !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  white-space: normal;
  text-align: center;
}

/* Submenú: hilo vertical guía en lugar de caja oscura */
#sidebar .sub-menu{
  background: transparent !important;
  border-radius: 0;
  margin: 0 10px 6px 24px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid rgba(146,168,208,.18);
}
#sidebar .sub-menu > li > a{
  border-radius: 9px;
  padding: 7px 10px;
  color: rgba(233,238,248,.55);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
#sidebar .sub-menu > li > a:hover,
#sidebar .sub-menu > li > a:focus{
  background: rgba(255,255,255,.05);
  color: #fff;
  transform: translateX(2px);
}
#sidebar .sub-menu > li.active > a{
  color: var(--cw-accent) !important;
  background: rgba(var(--cw-accent-rgb),.14) !important;
  font-weight: 600;
}

#sidebar .nav > li.expand > a,
#sidebar .nav > li > a .caret{ transition: color .16s ease, transform .16s ease; }
#sidebar .nav > li.expand > a > .caret{ transform: rotate(90deg); }

/* El rail flotante es más ancho: el contenido corre a 304px */
#content.content{
  margin-left: 304px !important;
}
.page-sidebar-minified #content.content,
#page-container.page-sidebar-minified ~ #content.content{
  margin-left: 84px !important;
}

/* Minify real: el rail custom (280px) pisa al theme (.page-sidebar-minified .sidebar).
   Hay que forzar icon-only con la misma especificidad del sidebar flotante. */
#page-container.page-sidebar-minified #sidebar.sidebar,
#page-container.page-sidebar-minified #sidebar.cwisp-sidebar{
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  left: 12px;
  overflow: visible !important;
}
#page-container.page-sidebar-minified .sidebar-bg{
  width: 84px !important;
}
#page-container.page-sidebar-minified #sidebar .cwisp-sidebar-profile,
#page-container.page-sidebar-minified #sidebar .nav-profile,
#page-container.page-sidebar-minified #sidebar .nav-header,
#page-container.page-sidebar-minified #sidebar .nav > li > a > span,
#page-container.page-sidebar-minified #sidebar .nav > li > a > .caret,
#page-container.page-sidebar-minified #sidebar .nav > li > a > b.caret,
#page-container.page-sidebar-minified #sidebar .nav > li.cwisp-update-available{
  display: none !important;
}
#page-container.page-sidebar-minified #sidebar .nav > li > a{
  justify-content: center;
  gap: 0;
  margin: 4px 6px !important;
  padding: 8px 6px !important;
  transform: none !important;
}
#page-container.page-sidebar-minified #sidebar .nav > li > a > i{
  flex: 0 0 28px;
  margin: 0 !important;
}
#page-container.page-sidebar-minified #sidebar .sub-menu{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
#page-container.page-sidebar-minified #sidebar .sidebar-minify-btn{
  margin: 8px 6px 12px !important;
  justify-content: center;
  padding: 8px 6px !important;
}
#page-container.page-sidebar-minified #sidebar .sidebar-minify-btn i{
  transform: scaleX(-1);
}

/* Móvil: off-canvas real + contenido a ancho completo */
@media (max-width: 767px){
  html, body{
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* NO poner overflow en #page-container: recorta position:fixed del sidebar */

  #page-container #sidebar.sidebar,
  #page-container #sidebar.cwisp-sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(92vw, 320px) !important;
    max-width: 92vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 1px solid rgba(146,168,208,.14) !important;
    z-index: 1200 !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform .22s ease !important;
    box-shadow: none !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    overflow: hidden !important;
  }
  #sidebar.cwisp-sidebar .cwisp-sidebar-scroll{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  .theme-panel{
    display: none !important;
  }
  #page-container.page-sidebar-toggled #sidebar.sidebar,
  #page-container.page-sidebar-toggled #sidebar.cwisp-sidebar{
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 18px 0 40px rgba(0,0,0,.35) !important;
  }
  #page-container .sidebar-bg,
  #page-container.page-sidebar-toggled .sidebar-bg{
    display: none !important;
    width: 0 !important;
  }

  /* Overlay para cerrar tocando fuera */
  #page-container.page-sidebar-toggled::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(2,6,23,.45);
    z-index: 1190;
  }

  #content.content,
  .page-sidebar-minified #content.content,
  #page-container.page-sidebar-minified ~ #content.content,
  .page-sidebar-toggled #content.content,
  #page-container.page-sidebar-toggled ~ #content.content{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Header: [☰][Logo encogible] .... [iconos][Avatar completo] */
  #header.header,
  #header,
  .page-sidebar-fixed .header,
  .page-sidebar-minified #header.header,
  #page-container.page-sidebar-minified ~ #header.header{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    padding-left: 4px !important;
    padding-right: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  #header .navbar-header{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  #header .navbar-toggle{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    order: -1 !important;
    float: none !important;
    position: relative !important;
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 1050 !important;
    flex: 0 0 36px !important;
    border: 1px solid rgba(146,168,208,.28) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.06) !important;
    color: inherit !important;
    line-height: 1 !important;
  }
  #header .navbar-toggle:hover,
  #header .navbar-toggle:focus{
    background: rgba(var(--cw-accent-rgb),.14) !important;
    border-color: rgba(var(--cw-accent-rgb),.45) !important;
  }
  #header .navbar-toggle .icon-bar{
    display: block !important;
    width: 16px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px;
    background: var(--cw-text, #2d353c) !important;
  }
  html[data-cwisp-scheme="dark"] #header .navbar-toggle{
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(146,168,208,.28) !important;
  }
  html[data-cwisp-scheme="dark"] #header .navbar-toggle .icon-bar{
    background: #eaf0fb !important;
  }
  #header .navbar-brand{
    order: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: min(42vw, 140px) !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  #header .navbar-brand .logo-admin{
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  #header .navbar-header,
  #header .navbar-brand{
    height: auto !important;
    max-height: 50px !important;
  }
  #header .navbar-nav.navbar-right{
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 0 0 4px !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 50px !important;
  }
  #header .navbar-nav.navbar-right > li{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    margin: 0 !important;
    float: none !important;
  }
  #header .navbar-nav.navbar-right > li > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 1px !important;
    padding: 0 5px !important;
    height: 36px !important;
    line-height: 1 !important;
  }
  #header .navbar-user > a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 2px !important;
    height: 36px !important;
    line-height: 1 !important;
  }
  #header .navbar-user .caret{
    display: none !important;
  }
  #header .navbar-user img,
  #header .navbar-user .avataradmin{
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  #header .searchbars{
    display: none !important;
  }
  #header .navbar-form .form-control,
  #header .searchbars input.form-control{
    width: 120px !important;
    min-width: 96px !important;
    max-width: 38vw !important;
  }
  #header .navbar-form .form-control:focus,
  #header .searchbars input.form-control:focus{
    width: min(56vw, 220px) !important;
  }

  /* ---- Contenedores / paneles ---- */
  #content,
  #content .row,
  #content .panel,
  #content .panel-body,
  #content .table-responsive,
  #content .widget,
  #content .widget-chart{
    max-width: 100% !important;
  }
  #content .panel{
    overflow: visible !important; /* no recortar DT child-rows / Select2 / toolbars */
  }
  #content .panel-heading,
  #content .panel-title{
    overflow: hidden; /* clip solo el heading */
  }
  #content .row > [class*="col-"],
  #content .form-group > [class*="col-"],
  #content .form-horizontal .form-group > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #content .col-form-label,
  #content .control-label,
  #content label.col-form-label{
    text-align: left !important;
    margin-bottom: 4px;
  }

  /* Tabs del editor de cliente */
  #content .cwisp-editor-tabs .tab-overflow,
  #content .cwisp-editor-tabs .nav-tabs{
    max-width: 100%;
  }
  #content .cwisp-editor-tabs .nav-tabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #content .cwisp-editor-tabs .nav-tabs .nav-item{
    flex: 0 0 auto;
  }
  #content .cwisp-editor-tabs .panel-heading-btn{
    display: none !important; /* prev/next cliente: ahorra espacio */
  }
  /* Cliente: en móvil usar desplazamiento táctil, sin flechas superpuestas. */
  #content .cwisp-customer-editor-tabs .tab-overflow{
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #content .cwisp-customer-editor-tabs .nav-tabs{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-behavior: smooth;
  }
  #content .cwisp-customer-editor-tabs .nav-tabs > .prev-button,
  #content .cwisp-customer-editor-tabs .nav-tabs > .next-button{
    display: none !important;
  }
  #content .page-header{
    font-size: 1.15rem !important;
    word-break: break-word;
  }
  #content .breadcrumb{
    float: none !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
  }

  /* ---- Tablas / DataTables: scroll lateral si hace falta; herramientas no se recortan ---- */
  #content .panel-body.table-responsive,
  #content .table-responsive:has(> .dataTables_wrapper),
  #content .table-responsive:has(.dataTables_wrapper){
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  #content .table-responsive{
    -webkit-overflow-scrolling: touch;
  }
  #content div.dataTables_wrapper{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  #content div.dataTables_wrapper .dataTables_scroll{
    width: 100% !important;
  }
  #content div.dataTables_wrapper .dataTables_scrollBody{
    overflow-x: auto !important;
  }
  #content div.dataTables_wrapper .dataTables_scrollHead,
  #content div.dataTables_wrapper .dataTables_scrollFoot{
    overflow: hidden !important;
  }
  #content div.dataTables_wrapper .dataTables_scrollHead table,
  #content div.dataTables_wrapper .dataTables_scrollBody table,
  #content div.dataTables_wrapper .dataTables_scrollFoot table{
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: var(--cwisp-table-min-width, 100%) !important;
    table-layout: fixed !important;
  }
  /* Fallback si scrollX no crea .dataTables_scroll */
  #content div.dataTables_wrapper:not(:has(.dataTables_scroll)){
    overflow-x: auto !important;
  }
  #content table.dataTable th,
  #content table.dataTable td,
  #content table.dataTable.nowrap th,
  #content table.dataTable.nowrap td,
  #content table.dataTable.cwisp-data-table th,
  #content table.dataTable.cwisp-data-table td{
    white-space: nowrap !important;
    box-sizing: border-box !important;
    /* Texto completo: el layout oculta columnas que no caben; no truncar. */
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  #content table.dataTable .cwisp-tools-column,
  #content table.dataTable th.cwisp-tools-column,
  #content table.dataTable td.cwisp-tools-column,
  #content table.dataTable th[data-tools="1"]{
    width: var(--cwisp-tools-width, 220px) !important;
    min-width: var(--cwisp-tools-width, 220px) !important;
    max-width: var(--cwisp-tools-width, 220px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #content table.dataTable .cwisp-tools-column .btn,
  #content table.dataTable .cwisp-tools-column button,
  #content table.dataTable .cwisp-tools-column .btn-group,
  #content table.dataTable .cwisp-tools-column a.btn{
    overflow: visible !important;
  }
  #content table.dataTable.cwisp-mobile-scroll-cols .cwisp-checkbox-column,
  #content table.dataTable.cwisp-data-table .cwisp-checkbox-column{
    display: table-cell !important;
    min-width: var(--cwisp-checkbox-width, 58px) !important;
    width: var(--cwisp-checkbox-width, 58px) !important;
    max-width: var(--cwisp-checkbox-width, 58px) !important;
    text-align: center !important;
    overflow: visible !important;
  }
  #content table.dataTable.cwisp-mobile-scroll-cols .cwisp-checkbox-column input[type="checkbox"],
  #content table.dataTable.cwisp-data-table .cwisp-checkbox-column input[type="checkbox"]{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    margin: 0 !important;
  }
  #content table.dataTable.cwisp-mobile-scroll-cols,
  #content table.dataTable.cwisp-data-table{
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }
  /* Buscadores del pie: que quepan en el ancho de la columna (no la estiren) */
  #content .dataTables_scrollFoot th,
  #content table.dataTable tfoot th{
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden;
    vertical-align: middle !important;
  }
  #content .dataTables_scrollFoot .form-control,
  #content table.dataTable tfoot .form-control{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 30px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
  #content .dataTables_scrollFoot .select2-container,
  #content table.dataTable tfoot .select2-container{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* El control Responsive vive dentro de la primera celda; no agrega columna. */
  #content table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
  #content table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
  #content table.dataTable > tbody > tr > td.dtr-control:before,
  #content table.dataTable > tbody > tr > th.dtr-control:before{
    display: inline-block !important;
  }
  #content table.dataTable > tbody > tr.child{
    display: table-row !important;
  }
  /* Columnas del detalle "+" siempre alineadas a la izquierda. */
  #content table.dataTable > tbody > tr.child > td,
  #content table.dataTable > tbody > tr.child ul.dtr-details,
  #content table.dataTable > tbody > tr.child ul.dtr-details > li,
  #content table.dataTable > tbody > tr.child span.dtr-title,
  #content table.dataTable > tbody > tr.child span.dtr-data{
    text-align: left !important;
  }
  #content table.dataTable > tbody > tr.child ul.dtr-details{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Sin agarre ni arrastre de encabezados en teléfono. */
  #content table.dataTable.cwisp-mobile-scroll-cols thead th{
    cursor: default !important;
    touch-action: pan-x pan-y !important;
    user-select: text !important;
  }
  /* ---- Toolbar móvil reorganizada ---- */
  /* Fila 1: [Nuevo…] + [■][■][■]  |  Fila 2: panel Filtros */
  #content .cwisp-dt-topbar{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
  }
  #content .cwisp-dt-actions{
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  #content .cwisp-dt-actions > .grupotabla,
  #content .cwisp-dt-actions > .btn-group{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #content .cwisp-dt-actions > .btn,
  #content .cwisp-dt-actions .grupotabla > .btn,
  #content .cwisp-dt-actions .grupotabla > a.btn,
  #content .cwisp-dt-actions .btn-group > .btn,
  #content .cwisp-dt-actions .btn-group > a.btn{
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border-left-width: 1px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px !important;
    font-weight: 600;
    padding: 0 12px !important;
    white-space: nowrap;
  }

  /* Densas (Usuarios, etc.): fila 1 acciones, fila 2 iconos con scroll */
  #content .cwisp-dt-actions.cwisp-dt-actions--dense{
    flex-wrap: wrap !important;
    row-gap: 8px;
  }
  #content .cwisp-dt-actions.cwisp-dt-actions--dense > .grupotabla,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense > .btn-group:not(.dt-buttons),
  #content .cwisp-dt-actions > .grupotabla,
  #content .cwisp-dt-actions > .btn-group:not(.dt-buttons){
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #content .cwisp-dt-actions.cwisp-dt-actions--dense > .btn,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense > a.btn{
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Crear factura / acciones: botones a ancho completo, texto legible */
  #content .cwisp-dt-actions .grupotabla > .btn,
  #content .cwisp-dt-actions .grupotabla > a.btn,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense .grupotabla > .btn,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense .grupotabla > a.btn{
    width: 100% !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    justify-content: center;
  }
  #content .cwisp-dt-actions.cwisp-dt-actions--dense .dt-buttons,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense div.dt-buttons{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  #content .cwisp-dt-actions.cwisp-dt-actions--dense .grupotabla > .btn,
  #content .cwisp-dt-actions.cwisp-dt-actions--dense .grupotabla > a.btn{
    width: 100% !important;
    flex: unset !important;
  }

  /* dt-buttons: cuadrados pequeños (solo disparadores, NO el menú colvis) */
  #content .cwisp-dt-actions .dt-buttons,
  #content .cwisp-dt-actions div.dt-buttons{
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }
  #content .cwisp-dt-actions .dt-buttons > .btn-group{
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
    position: relative;
  }
  /* Solo botones directos del toolbar */
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .btn,
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .dt-button,
  #content .cwisp-dt-actions .dt-buttons > .btn,
  #content .cwisp-dt-actions .dt-buttons > .dt-button{
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1 !important;
    overflow: hidden;
    white-space: nowrap;
  }
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .btn > span,
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .dt-button > span{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
  }
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .buttons-collection:not(.buttons-page-length) > span{
    font-size: 0 !important;
    line-height: 0 !important;
  }
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .buttons-collection:not(.buttons-page-length) > span i{
    font-size: 15px !important;
    line-height: 1 !important;
  }
  /* Paginado: solo el número */
  #content .cwisp-dt-actions .dt-buttons > .btn-group > .buttons-page-length > span{
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* Fallback si aún no se reorganizó */
  #content .dt-buttons:not(.cwisp-dt-actions .dt-buttons),
  #content div.dataTables_wrapper > .dt-buttons{
    float: none !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 0 8px !important;
  }
  #content div.dataTables_wrapper > .dt-buttons .btn{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  #content .tooltablas,
  #content div.dataTables_wrapper .tooltablas{
    float: none !important;
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
  }

  /* Panel Filtros (selects / fechas de tooltablas) */
  #content .cwisp-toolbar-filters,
  #content .cwisp-col-filters{
    width: 100%;
    margin: 0;
    border: 1px solid var(--cw-border, #d9dfe3);
    border-radius: 12px;
    background: var(--cw-surface-subtle, #f5f7fb);
    overflow: hidden;
  }
  #content .cwisp-toolbar-filters-toggle,
  #content .cwisp-col-filters-toggle{
    width: 100% !important;
    height: 40px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cw-text, #1f2937) !important;
    font-weight: 650;
    font-size: 13px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px !important;
    box-shadow: none !important;
  }
  #content .cwisp-toolbar-filters-toggle span,
  #content .cwisp-col-filters-toggle span{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #content .cwisp-toolbar-filters-caret,
  #content .cwisp-col-filters-caret{
    opacity: .55;
    transition: transform .18s ease;
  }
  #content .cwisp-toolbar-filters.is-open .cwisp-toolbar-filters-caret,
  #content .cwisp-col-filters.is-open .cwisp-col-filters-caret{
    transform: rotate(180deg);
  }
  #content .cwisp-toolbar-filters-body,
  #content .cwisp-col-filters-body{
    display: none;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--cw-border, #d9dfe3);
  }
  #content .cwisp-toolbar-filters.is-open .cwisp-toolbar-filters-body,
  #content .cwisp-col-filters.is-open .cwisp-col-filters-body{
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  #content .cwisp-toolbar-filters .grupotabla,
  #content .cwisp-toolbar-filters .btn-group,
  #content .cwisp-toolbar-filters .ipvisit-toolbar{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #content .cwisp-toolbar-filters select,
  #content .cwisp-toolbar-filters .select2-container,
  #content .cwisp-toolbar-filters .form-control,
  #content .cwisp-col-filter-row .select2-container,
  #content .cwisp-col-filter-row select{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #content .cwisp-toolbar-filters .select2-container--default .select2-selection--single,
  #content .cwisp-toolbar-filters select.form-control,
  #content .cwisp-col-filter-row .select2-selection--single{
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }
  #content .cwisp-toolbar-filters .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 38px !important;
    padding-left: 12px;
  }
  #content .cwisp-toolbar-filters .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 38px !important;
  }
  #content .cwisp-toolbar-filters .input-daterange,
  #content .cwisp-toolbar-filters .input-group.input-daterange,
  #content .cwisp-toolbar-filters #ipvisit-date-filter{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
  }
  #content .cwisp-toolbar-filters .input-daterange .form-control,
  #content .cwisp-toolbar-filters .input-daterange input,
  #content .cwisp-toolbar-filters #ipvisit-date-filter input{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
  }
  #content .cwisp-toolbar-filters .input-daterange .input-group-addon,
  #content .cwisp-toolbar-filters .ipvisit-date-separator{
    flex: 0 0 auto;
    padding: 0 4px;
    white-space: nowrap;
    background: transparent;
    border: none;
  }
  #content .cwisp-toolbar-filters #ip-version-filter,
  #content .cwisp-toolbar-filters .btn-group[id$="-filter"]{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    flex-direction: row !important;
  }
  #content .cwisp-toolbar-filters #ip-version-filter > .btn,
  #content .cwisp-toolbar-filters .btn-group[id$="-filter"] > .btn{
    height: 38px !important;
    border-radius: 0 !important;
    font-size: 12px !important;
  }
  #content .cwisp-toolbar-filters #ip-version-filter > .btn:first-child,
  #content .cwisp-toolbar-filters .btn-group[id$="-filter"] > .btn:first-child{
    border-radius: 10px 0 0 10px !important;
  }
  #content .cwisp-toolbar-filters #ip-version-filter > .btn:last-child,
  #content .cwisp-toolbar-filters .btn-group[id$="-filter"] > .btn:last-child{
    border-radius: 0 10px 10px 0 !important;
  }
  #content .cwisp-col-filter-row label{
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cw-text-muted, #6b7280);
  }
  #content .dataTables_wrapper.cwisp-has-col-filters table.dataTable tfoot,
  #content .dataTables_wrapper.cwisp-has-col-filters .dataTables_scrollFoot{
    display: none !important;
  }

  #content .dataTables_length,
  #content .dataTables_filter,
  #content .dataTables_info,
  #content .dataTables_paginate{
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    margin: 6px 0 !important;
  }
  #content .dataTables_filter label{
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    gap: 6px;
  }
  #content .dataTables_filter input{
    width: 100% !important;
    margin-left: 0 !important;
    height: 42px !important;
  }
  /* Anular tipografía minúscula de .modomovil en toolbars */
  .modomovil #content .cwisp-dt-actions > .btn,
  .modomovil #content .cwisp-dt-actions .grupotabla > .btn,
  .modomovil #content .cwisp-dt-actions .dt-buttons > .btn-group > .btn,
  .modomovil #content .tooltablas .btn{
    font-size: 13px !important;
  }
  .modomovil #content .cwisp-dt-actions .dt-buttons > .btn-group > .btn{
    padding: 0 !important;
  }
  #content .dataTables_paginate{
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  #content .dataTables_paginate .pagination{
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 !important;
  }
  /* Solo anterior / página actual / siguiente */
  #content .dataTables_paginate .paginate_button.cwisp-page-hide,
  #content .dataTables_paginate .page-item.cwisp-page-hide,
  #content .dataTables_paginate .paginate_button.first,
  #content .dataTables_paginate .paginate_button.last,
  #content .dataTables_paginate .ellipsis{
    display: none !important;
  }
  #content .dataTables_paginate .paginate_button.previous,
  #content .dataTables_paginate .paginate_button.next,
  #content .dataTables_paginate .paginate_button.cwisp-page-current,
  #content .dataTables_paginate .page-item.previous,
  #content .dataTables_paginate .page-item.next,
  #content .dataTables_paginate .page-item.cwisp-page-current{
    display: inline-flex !important;
  }
  #content .dataTables_paginate .cwisp-page-current > a,
  #content .dataTables_paginate .cwisp-page-current > span,
  #content .dataTables_paginate .cwisp-page-current .page-link{
    min-width: 40px;
    text-align: center;
    font-weight: 700;
    pointer-events: none;
  }
  #content .panel-usuarios .box-body .row > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
  }

  /* ---- Forms / filtros ---- */
  #content .form-inline{
    display: block !important;
    width: 100% !important;
  }
  #content .form-inline .form-group,
  #content .form-inline .input-group,
  #content .form-inline .btn,
  #content .form-inline select,
  #content .form-inline .form-control,
  #content .form-inline .select2-container{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
  }
  #content .input-daterange,
  #content .input-group.input-daterange,
  #content .tooltablas .input-daterange{
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #content .input-daterange .form-control,
  #content .input-daterange input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 120px !important;
  }
  #content .input-daterange .input-group-addon,
  #content .input-daterange .input-group-text{
    flex: 0 0 auto;
  }
  #content .top-filter,
  #content .filter-gastos,
  #content .panel-facturas .form-inline{
    width: 100% !important;
  }

  /* ---- Tareas: topbar + tabla usable en teléfono ---- */
  #content .tareas-topbar{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  #content .tareas-topbar .btn-group.radio-group{
    display: flex !important;
    width: 100% !important;
    float: none !important;
  }
  #content .tareas-topbar .radio-group > label.btn{
    flex: 1 1 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    padding: 8px 6px !important;
  }
  #content #dvtablatareas{
    padding: 10px !important;
    overflow: hidden !important;
  }
  #content #dvtablatareas .dataTables_wrapper{
    overflow: visible !important;
  }
  #content #dvtablatareas .dataTables_scrollBody{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #content .tareas-table-filters,
  #content .cwisp-toolbar-filters .tareas-table-filters{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #content .tareas-table-filters #picker-lista-tarea,
  #content .cwisp-toolbar-filters #picker-lista-tarea{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 140px !important;
  }
  #content .tareas-table-filters #sl_state_tarea,
  #content .tareas-table-filters .select2-container,
  #content .cwisp-toolbar-filters #sl_state_tarea + .select2-container{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 140px !important;
  }
  #content .headertarea{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 8px;
    line-height: 42px !important;
  }
  #content .headertarea a{
    width: 40px !important;
    flex: 0 0 40px;
  }
  #content #fechatarea{
    flex: 1 1 auto;
    margin: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
  }
  #content #cronologia_tareas{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
  }
  #content .popover{
    width: min(330px, 92vw) !important;
  }
  #content .popover-header{
    width: auto !important;
  }
  #content .vis-labelset .vis-inner{
    width: 72px !important;
  }
  #content .vis-top{
    padding-left: 4.5rem !important;
  }

  /* ---- Gráficas ---- */
  #content #grafico-flow,
  #content #chart-trafico-home,
  #content .morris-hover,
  #content .cwisp-chart,
  #content [id*="flot-"],
  #content [id*="chart-"],
  #content .widget-chart-content,
  #content .widget-chart .widget-chart-content{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 220px;
    box-sizing: border-box !important;
  }
  #content #grafico-flow{
    min-height: 280px;
    height: 280px !important;
  }
  #content svg,
  #content .morris-wrapper,
  #content .flot-base,
  #content .flot-overlay{
    max-width: 100% !important;
  }
  #content .widget-chart.with-sidebar,
  #content .widget-chart{
    display: block !important;
  }
  #content .widget-chart-sidebar,
  #content .widget-chart .widget-chart-sidebar{
    position: static !important;
    width: 100% !important;
    float: none !important;
    margin-top: 10px;
  }

  /* ---- Home / widgets ---- */
  #content .widget.widget-stats,
  #content .cwisp-home .widget{
    margin-bottom: 10px !important;
  }
  /* En móvil el dashboard usa flujo normal; GridStack queda para tablet/PC. */
  #content .cwisp-home-grid.grid-stack{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #content .cwisp-home-grid.grid-stack > .grid-stack-item{
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #content .cwisp-home-grid .grid-stack-item-content,
  #content .cwisp-home-grid .cwisp-grid-item-content{
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #content .cwisp-home-grid .cwisp-grid-card,
  #content .cwisp-home-grid .panel.cwisp-grid-card{
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  #content .cwisp-home-grid .panel.cwisp-grid-card .panel-body{
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #content .cwisp-home-grid-toolbar{
    display: none !important;
  }
  #content .cwisp-home .widget-chart.with-sidebar{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  #content .cwisp-home #chart-trafico-home{
    height: 180px !important;
    min-height: 160px !important;
  }
  #content .cwisp-home .widget-chart .widget-chart-sidebar{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
  }
  /* Servidor: icono a la izquierda; dato/barra en una segunda línea clara. */
  #content .cwisp-home .cwisp-home-server .widget-list-item{
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "media content"
      "media action" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 10px 12px !important;
  }
  #content .cwisp-home .cwisp-home-server .widget-list-media{
    grid-area: media !important;
    align-self: center !important;
    margin: 0 !important;
  }
  #content .cwisp-home .cwisp-home-server .widget-list-content{
    grid-area: content !important;
    min-width: 0 !important;
  }
  #content .cwisp-home .cwisp-home-server .widget-list-action{
    grid-area: action !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  #content .cwisp-home .cwisp-home-server .widget-list-action > span{
    display: block !important;
    width: 100% !important;
  }
  #content .cwisp-home .cwisp-home-server .home-server-progress{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #content .cwisp-home .cwisp-home-server .widget-list-title{
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  #content .cwisp-home .list-group .list-group-item{
    white-space: normal !important;
  }
  #content .cwisp-home .list-group .list-group-item .pull-right{
    float: none !important;
    display: block !important;
    margin-top: 3px !important;
    text-align: right !important;
  }

  /* ---- Modales ----
     getmodal inyecta: header + <form>(body + footer). Sin flex en el form,
     el footer (Guardar) queda fuera del max-height y en móvil "no se puede guardar". */
  .modal,
  #modaltmp.modal,
  #modaltmp2.modal,
  #modal-loader.modal{
    z-index: 1300 !important;
    padding-right: 0 !important;
  }
  .modal-backdrop,
  body > .modal-backdrop{
    z-index: 1290 !important;
  }
  /* Si el fallback fuerza .show, asegurar visibilidad real en iOS/Android */
  #modaltmp.modal.show,
  #modaltmp2.modal.show{
    display: block !important;
    opacity: 1 !important;
  }
  /* Botones de herramientas DataTables: área táctil usable */
  #content .btn-icon.btn-sm,
  #content table .btn-icon{
    min-width: 36px;
    min-height: 36px;
    touch-action: manipulation;
  }
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-md,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-sm{
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
  }
  /* Evitar centrado vertical de formularios altos (corta el botón Guardar). */
  .modal-dialog-centered{
    display: flex !important;
    align-items: flex-start !important;
    min-height: calc(100% - 16px) !important;
  }
  .modal-content{
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-header{
    flex: 0 0 auto;
  }
  /* Form que envuelve body+footer (patrón legacy getmodal) */
  .modal-content > form{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none;
  }
  /* Payload suelto (panel sin .modal-body) y ficha ONU */
  .modal-content > .panel,
  #modaltmp .modal-content > .panel,
  #modaltmp2 .modal-content > .panel{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
  }
  #modaltmp .cwisp-onu-detail{
    padding: 10px 12px 12px !important;
  }
  #modaltmp .cwisp-onu-detail .panel-body{
    padding: 8px;
  }
  #modaltmp .cwisp-onu-detail table.table > tbody > tr > td{
    padding: 7px 8px;
    font-size: 13px;
    word-break: break-word;
  }
  #modaltmp .cwisp-onu-detail-actions .btn{
    flex: 1 1 100%;
    min-height: 40px;
  }
  .modal-body .row > [class*="col-"],
  .modal-body .form-group > [class*="col-"],
  .modal-body .form-horizontal .form-group > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    text-align: left !important;
  }
  .modal-body .col-form-label,
  .modal-body .control-label{
    text-align: left !important;
  }
  .modal-footer{
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .modal-footer .btn{
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* ---- Ficha cliente / floats legacy ---- */
  #content .cwisp-vu-stack,
  #content .cwisp-vu-stats-controls{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  #content .cwisp-vu-stats-controls .select2-container,
  #content .cwisp-vu-stats-controls select,
  #content .cwisp-vu-stats-controls .dvrange,
  #content .cwisp-vu-stats-controls .input-daterange{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  #content .cwisp-vu-nofloat,
  #content .cwisp-vu-nofloat[style]{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #content .cwisp-vu-resumen-main{
    border-right: none !important;
    margin-bottom: 16px;
  }
  #content .cwisp-vu-id-row{
    width: 100%;
  }
  #content .cwisp-vu-id-row .form-control{
    flex: 1 1 140px;
    max-width: 100% !important;
  }
  #content .cwisp-mobile-filters .form-group{
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
  }
  #content .panel-ingresos .tooltablas .input-daterange input,
  #content .panel-ingresos .input-daterange .form-control{
    max-width: none !important;
  }
  #content #chart-trafico-home{
    height: 220px !important;
  }

  /* ---- Ajustes: hub 2 columnas (sin ::before/::after de .row) ---- */
  #content .cwisp-ajustes-grid,
  #content .row.cwisp-ajustes-grid,
  #content .row:has(> .btnajustes){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    justify-items: center !important;
  }
  #content .cwisp-ajustes-grid::before,
  #content .cwisp-ajustes-grid::after,
  #content .row.cwisp-ajustes-grid::before,
  #content .row.cwisp-ajustes-grid::after,
  #content .row:has(> .btnajustes)::before,
  #content .row:has(> .btnajustes)::after{
    content: none !important;
    display: none !important;
  }
  #content .cwisp-ajustes-grid > .btnajustes,
  #content .row.cwisp-ajustes-grid > .btnajustes,
  #content .row:has(> .btnajustes) > .btnajustes,
  #content .btnajustes.btn,
  html[data-cwisp-scheme] #content .btnajustes,
  #content .btnajustes{
    float: none !important;
    width: 132px !important;
    max-width: 132px !important;
    min-width: 0 !important;
    height: 132px !important;
    max-height: 132px !important;
    flex: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 22px 8px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
  }
  #content .btnajustes.btn > br{
    display: none !important;
  }
  #content .btnajustes.btn > i,
  #content .btnajustes > i{
    font-size: 24px !important;
    margin: 0 0 6px !important;
    line-height: 1 !important;
  }
  #content .btnajustes img{
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    max-width: 64% !important;
    margin: 0 0 6px !important;
    object-fit: contain !important;
  }

  /* Plantillas: 2 columnas + acciones táctiles + tabs */
  #content .tab-pane > .row:has(> .itemplantilla),
  #content .row:has(> .itemplantilla){
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  #content .itemplantilla{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  #content .itemplantilla .contentplantilla{
    height: auto !important;
    min-height: 140px !important;
  }
  #content .itemplantilla .pre{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
    padding: 8px 6px !important;
    background: transparent !important;
  }
  #content .itemplantilla .pre .btn-azul{
    margin: 0 !important;
    font-size: 11px !important;
    white-space: normal !important;
  }
  #content .nav.nav-tabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  #content .nav.nav-tabs > li,
  #content .nav.nav-tabs > .nav-items{
    flex: 0 0 auto !important;
    float: none !important;
  }
  #content .nav.nav-tabs .nav-link{
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  /* Operadores: horario sin floats */
  #content .horario{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  #content .horario > .horario-day,
  #content .horario > .p-5{
    float: none !important;
    flex: 0 0 auto !important;
  }
  #content .horario > .horario-time,
  #content .horario > .col-sm-6{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* WhatsApp Meta intro / CTAs largos */
  #content .wa-meta-intro{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #content .frmajustes .panel-footer,
  #content .frmajustes .form-group:last-child{
    text-align: left !important;
  }
  #content .frmajustes .panel-footer .btn,
  #content .frmajustes .btn{
    margin-bottom: 6px;
  }
}


/* ==========================================================================
   5. Paneles — tarjetas flotantes con barra de acento
   ========================================================================== */
#content .panel{
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius-lg) !important;
  box-shadow: var(--cw-shadow);
  background: var(--cw-card-bg) !important;
  overflow: hidden;
  transition: box-shadow .24s var(--cw-ease), transform .24s var(--cw-ease);
}
/* Almacén / Unidades: no recortar scrollX ni Select2 (después de .panel) */
#content .panel.um-panel,
#content .panel.conv-panel,
#content .panel.calc-panel,
#content .panel.panel-almacen-productos,
#content .panel.panel-almacen-accesorios{
  overflow: visible !important;
}
#content .nav-tabs{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* scrollX: alinear cabecera/cuerpo también en desktop (pestañas ocultas) */
#content .um-panel div.dataTables_wrapper,
#content .conv-panel div.dataTables_wrapper,
#content .panel-almacen-productos div.dataTables_wrapper,
#content .panel-almacen-accesorios div.dataTables_wrapper{
  width: 100% !important;
  max-width: 100% !important;
}
#content .um-panel .dataTables_scrollBody,
#content .conv-panel .dataTables_scrollBody{
  overflow-x: auto !important;
}
#content .um-panel .dataTables_scrollHead,
#content .conv-panel .dataTables_scrollHead,
#content .um-panel .dataTables_scrollFoot,
#content .conv-panel .dataTables_scrollFoot{
  overflow: hidden !important;
}
#content .um-panel table.dataTable tfoot th,
#content .um-panel .dataTables_scrollFoot th{
  white-space: nowrap !important;
  min-width: 0 !important;
  vertical-align: middle;
}
#content .um-panel table.dataTable tfoot .select2-container,
#content .um-panel .dataTables_scrollFoot .select2-container{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
#content .panel:hover{
  box-shadow: var(--cw-shadow-lg);
}

/* Overlay de recarga de paneles (botón reload del theme + loaderin() de
   DataTables): el theme lo pinta blanco (app.min.css) y colombiawisp.css lo
   fija a rgba(255,255,255,.92) !important; en oscuro tapaba la tabla con un
   flash blanco (muy visible en Almacén, que procesa server-side). */
html[data-cwisp-scheme="dark"] .panel.panel-loading .panel-body .panel-loader{
  background: rgba(15,22,38,.86) !important;
  opacity: 1 !important;
}
html[data-cwisp-scheme="dark"] .panel.panel-loading .panel-body .panel-loader.cwisp-panel-loader{
  background: rgba(15,22,38,.90) !important;
}

/* FIX "paneles grises en el inicio": colombiawisp.css redefine --cw-card-bg
   dentro de .cwisp-home como blanco 76% SIN variante oscura, así que en modo
   oscuro los paneles del home quedaban gris translúcido. Se re-aliasan los
   tokens del home a los tokens reales del tema (que sí son scheme-aware). */
html[data-cwisp-scheme="dark"] .cwisp-home{
  --cw-card-bg: #1b2438;
  --cw-card-border: rgba(146,168,208,.18);
  --cw-card-shadow: 0 18px 42px rgba(0,0,0,.45);
  --cw-muted: rgba(220,229,244,.62);
}
/* Panel del home en oscuro: degradado navy sutil (no gris plano) + texto claro.
   Lleva #content para ganar a la regla `#content .panel` (ID > clases). */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel{
  background: linear-gradient(168deg, #222c47 0%, #1a2338 100%) !important;
  color: rgba(230,237,249,.90);
}
/* Los widget-stats del home ya traen su propio degradado de color; no tocarlos */
html[data-cwisp-scheme="dark"] #content .cwisp-home .widget:not(.widget-stats):not(.widget-chart){
  background: linear-gradient(168deg, #222c47 0%, #1a2338 100%);
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel-heading{
  color: #eef2fa;
  border-bottom-color: rgba(146,168,208,.14) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel-title{
  color: #eef2fa !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel-body:not(.bg-dark):not(.widget-chart-content){
  color: rgba(230,237,249,.88);
}
/* Textos muted del home legibles en oscuro */
html[data-cwisp-scheme="dark"] #content .cwisp-home .text-grey,
html[data-cwisp-scheme="dark"] #content .cwisp-home .text-muted{
  color: rgba(214,224,240,.62) !important;
}

/* ==========================================================================
   Textos de widgets del home en oscuro (facturación, finanzas, listas, tablas)
   colombiawisp.css fija colores oscuros pensados para panel blanco; aquí se
   invierten para el fondo navy oscuro.
   ========================================================================== */
/* list-group (Pagos, Notas de crédito, Costo, Gasto, Otros, etc.) */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .list-group-item,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel a.list-group-item,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .list-group-item span,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .list-group-item .pull-right{
  color: rgba(228,235,248,.88) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .list-group-item b{
  color: #f4f8fe !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel a.list-group-item:hover{
  color: #ffffff !important;
  background: rgba(var(--cw-accent-rgb),.10) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item{
  border-bottom-color: rgba(146,168,208,.12) !important;
}
/* Fila de totales (bg-info / bg-blue): fondo acento translúcido + texto claro */
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-info,
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-blue{
  background: rgba(var(--cw-accent-rgb),.20) !important;
  color: #eef3fb !important;
  text-shadow: none;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-info b,
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-info span,
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-blue b,
html[data-cwisp-scheme="dark"] #content .cwisp-home .list-group .list-group-item.bg-blue span{
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .cwisp-recent-user__name,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel-inverse .cwisp-recent-user__name{
  color: rgba(232,237,247,.92) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .cwisp-recent-user__time{
  color: rgba(214,224,240,.62) !important;
}
#content .cwisp-home .cwisp-home-emisor-link{
  color: inherit;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .cwisp-home-emisor-link{
  color: #8fc6ff !important;
}
/* Tablas simples de widgets (no DataTables) dentro del home */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table{
  color: rgba(228,235,248,.88);
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table > tbody > tr > th,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table > tfoot > tr > td,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table > tfoot > tr > th{
  color: rgba(228,235,248,.88) !important;
  border-color: rgba(146,168,208,.12) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .table > tbody > tr > td b{
  color: #f4f8fe !important;
}
/* Footer de panel (barras de totales) */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .panel-footer,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .panel-footer b,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .panel-footer span{
  color: rgba(228,235,248,.90) !important;
  border-top-color: rgba(146,168,208,.14) !important;
}
/* Links sueltos dentro de widgets del home */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel a:not(.btn):not(.list-group-item):not(.widget-list-item){
  color: #7db8f5;
}
/* small / etiquetas secundarias dentro de widgets */
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel small,
html[data-cwisp-scheme="dark"] #content .cwisp-home .panel .small{
  color: rgba(214,224,240,.66) !important;
}

#content .panel > .panel-heading{
  border-radius: var(--cw-radius-lg) var(--cw-radius-lg) 0 0 !important;
  border-bottom: 1px solid var(--cw-border) !important;
  padding: 14px 20px;
}
#content .panel-inverse > .panel-heading{
  background: linear-gradient(90deg,
    rgba(var(--cw-accent-rgb),.12),
    rgba(var(--cw-accent-rgb),.03) 55%,
    transparent 85%) !important;
  color: var(--cw-text) !important;
}
#content .panel-inverse > .panel-heading .panel-title,
#content .panel-inverse > .panel-heading .btn-link,
#content .panel-inverse > .panel-heading a:not(.btn){
  color: var(--cw-text) !important;
}

/* Firma visual: barra de acento junto al título */
#content .panel > .panel-heading .panel-title{
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .04em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 11px;
}
#content .panel > .panel-heading .panel-title::before{
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--cw-grad-accent);
  box-shadow: 0 2px 8px rgba(var(--cw-accent-rgb),.45);
}
#content .panel > .panel-heading .panel-title .badge,
#content .panel > .panel-heading .panel-title .label{ margin-left: 2px; }

#content .panel > .panel-body{ padding: 20px; }

#content .panel .panel-footer{
  background: var(--cw-surface-subtle);
  border-top: 1px solid var(--cw-border);
  border-radius: 0 0 var(--cw-radius-lg) var(--cw-radius-lg) !important;
}

/* ==========================================================================
   6. Widgets / KPIs — tiles con identidad de color (degradados modernos)
   ========================================================================== */
#content .widget{
  border-radius: var(--cw-radius) !important;
  border: 1px solid var(--cw-border);
  box-shadow: var(--cw-shadow);
  background: var(--cw-card-bg);
}

/* Base del tile: navy profundo (para tiles sin clase bg-*) */
.cwisp-home .widget.widget-stats{
  position: relative;
  background: linear-gradient(155deg, var(--cw-navy-1) 0%, var(--cw-navy-2) 100%) !important;
  border: none !important;
  box-shadow: 0 14px 34px rgba(9,14,28,.30), inset 0 1px 0 rgba(255,255,255,.09);
  overflow: hidden;
  transition: transform .2s var(--cw-ease), box-shadow .24s var(--cw-ease);
  color: rgba(255,255,255,.85);
}
.cwisp-home .widget.widget-stats::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px 160px at 100% 0%, rgba(255,255,255,.14), transparent 65%);
  pointer-events: none;
}
.cwisp-home .widget.widget-stats:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(9,14,28,.40), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Identidad de color por tile (bg-*): degradado propio y reconocible */
#content .widget-stats.bg-teal  { background: linear-gradient(150deg,#12b3a6 0%,#0a7a70 100%) !important; }
#content .widget-stats.bg-green { background: linear-gradient(150deg,#2fba5c 0%,#1a7f3e 100%) !important; }
#content .widget-stats.bg-blue  { background: linear-gradient(150deg,#3f95ea 0%,#2253b2 100%) !important; }
#content .widget-stats.bg-indigo{ background: linear-gradient(150deg,#6d66ea 0%,#4237b3 100%) !important; }
#content .widget-stats.bg-purple{ background: linear-gradient(150deg,#a15ee9 0%,#6a2faf 100%) !important; }
#content .widget-stats.bg-pink  { background: linear-gradient(150deg,#ee6ca9 0%,#bd3879 100%) !important; }
#content .widget-stats.bg-red   { background: linear-gradient(150deg,#f05d68 0%,#bb2e3c 100%) !important; }
#content .widget-stats.bg-orange{ background: linear-gradient(150deg,#f6a23d 0%,#cd780b 100%) !important; }
#content .widget-stats.bg-yellow{ background: linear-gradient(150deg,#f3c832 0%,#c79508 100%) !important; }
#content .widget-stats.bg-lime  { background: linear-gradient(150deg,#a0d53e 0%,#6d9a13 100%) !important; }
#content .widget-stats.bg-aqua  { background: linear-gradient(150deg,#47c4e5 0%,#2187aa 100%) !important; }
#content .widget-stats.bg-dark  { background: linear-gradient(150deg,#42516c 0%,#1f2a3c 100%) !important; }

/* Texto legible en tiles de color */
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light),
.cwisp-home .widget-stats{
  color: rgba(255,255,255,.85);
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-title,
.cwisp-home .widget-stats .stats-title{
  color: rgba(255,255,255,.80) !important;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-number,
.cwisp-home .widget-stats .stats-number{
  color: #ffffff !important;
  font-size: clamp(16px, 1.7vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
}
/* Home: meta completa (montos largos) y tarjetas a la misma altura */
#content .cwisp-home > .row.cwisp-home-stats{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#content .cwisp-home > .row.cwisp-home-stats > [class*="col-"]{
  display: flex;
}
#content .cwisp-home > .row.cwisp-home-stats > [class*="col-"] > .widget.widget-stats{
  width: 100%;
  height: 100%;
  min-height: 148px;
}
#content .cwisp-home .widget-stats .stats-meta{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-word;
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-content > div,
.cwisp-home .widget-stats .stats-content > div{
  color: rgba(255,255,255,.85);
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-content b{
  color: #ffffff;
}

/* Ícono: chip de cristal blanco en tiles de color */
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-icon,
.cwisp-home .widget-stats .stats-icon{
  background: rgba(255,255,255,.20) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 16px rgba(0,0,0,.16);
  opacity: 1 !important;
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-icon i,
.cwisp-home .widget-stats .stats-icon i{
  color: #ffffff !important;
}

/* Amarillo/lima: texto oscuro para mantener contraste */
#content .widget-stats.bg-yellow,
#content .widget-stats.bg-yellow .stats-content > div,
#content .widget-stats.bg-yellow .stats-title{ color: rgba(66,50,0,.88) !important; }
#content .widget-stats.bg-yellow .stats-number{ color: #332600 !important; }
#content .widget-stats.bg-yellow .stats-icon{
  background: rgba(0,0,0,.14) !important;
  color: #433500 !important;
  box-shadow: none;
}
#content .widget-stats.bg-yellow .stats-icon i{ color: #433500 !important; }
#content .widget-stats.bg-yellow .stats-progress.progress{ background: rgba(0,0,0,.16) !important; }
#content .widget-stats.bg-yellow .stats-progress .progress-bar{ background: #433500 !important; box-shadow: none; }

/* Progreso dentro de tiles de color / home */
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-yellow) .stats-progress.progress,
.cwisp-home .widget-stats .stats-progress.progress{
  height: 10px;
  background: rgba(255,255,255,.26) !important;
  border-radius: 999px;
  box-shadow: none;
}
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light):not(.bg-yellow) .stats-progress .progress-bar,
.cwisp-home .widget-stats .stats-progress .progress-bar{
  background: #ffffff !important;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,255,255,.45);
}

/* stats-desc: CTA blanca sobre tiles de color (sin pelear con colombiawisp) */
#content .cwisp-home .widget-stats .stats-desc,
#content .widget-stats .stats-desc{
  font-size: 12px;
  font-weight: 600;
  padding: 0 !important;
  border-top: 0 !important;
  margin-top: 8px;
}
#content .cwisp-home .widget-stats .stats-desc a,
#content .widget-stats[class*="bg-"]:not(.bg-white):not(.bg-light) .stats-desc a{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #fff !important;
  background: rgba(255,255,255,.22) !important;
  border-radius: 999px;
  padding: 6px 12px !important;
  text-decoration: none !important;
}
#content .cwisp-home .widget-stats .stats-desc a:hover{
  background: rgba(255,255,255,.32) !important;
  color: #fff !important;
}

/* Widget-stats en tiles claros (fuera de bg-*): ícono con tinte de acento */
#content .widget-stats:not([class*="bg-"]) .stats-icon{
  border-radius: 14px !important;
  background: rgba(var(--cw-accent-rgb),.13) !important;
  color: var(--cw-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--cw-accent-rgb),.22);
  font-size: 20px;
}
#content .widget-stats:not([class*="bg-"]) .stats-number{
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cw-text);
}
#content .widget-stats:not([class*="bg-"]) .stats-desc{ color: var(--cw-text-muted); }

/* Íconos stats-icon-lg (smartolt, dashboard OLT…): el tema los dibuja a 128px
   como marca de agua (opacity .15); al darles chip de cristal quedaban enormes
   tapando las barras. Se contienen a 56px centrados arriba a la derecha. */
#content .widget-stats .stats-icon.stats-icon-lg{
  width: 56px !important;
  height: 56px !important;
  font-size: 24px !important;
  line-height: 56px !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  text-shadow: none !important;
  opacity: 1 !important;
  border-radius: 14px !important;
}
#content .widget-stats .stats-icon.stats-icon-lg i{
  font-size: 24px !important;
  line-height: 56px !important;
  position: static;
}
/* Ícono normal (42px default): glifo proporcional al chip de 56px */
#content .widget-stats .stats-icon:not(.stats-icon-lg){
  font-size: 26px;
}
/* El contenido siempre por encima del ícono (barras visibles) */
#content .widget-stats .stats-content{
  position: relative;
  z-index: 2;
}
/* Restaurar el tamaño de los íconos del home (44px, en flujo flex) */
#content .cwisp-home .widget-stats .stats-icon,
#content .cwisp-home .widget-stats .stats-icon.stats-icon-lg{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  line-height: 44px !important;
}
#content .cwisp-home .widget-stats .stats-icon i,
#content .cwisp-home .widget-stats .stats-icon.stats-icon-lg i{
  font-size: 18px !important;
  line-height: 44px !important;
  position: static;
}

/* Espacio entre ícono y texto en botones: flex + gap.
   (Un margen al <i> no sirve: con texto al lado el <i> sigue siendo
   :only-child porque :only-child solo cuenta elementos, no texto.
   Con flex, el texto es un ítem anónimo y gap separa ícono de texto;
   en botones solo-ícono hay un solo ítem y el gap no hace nada.) */
#content .btn:not(.infouserdara),
.modal .btn:not(.infouserdara),
.swal2-container .btn,
.jconfirm .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Resumen Notificaciones (editar cliente): layout float original — no flex */
#content .btn.infouserdara,
.modal .btn.infouserdara{
  display: block !important;
  gap: 0;
  align-items: unset;
  justify-content: unset;
  flex-direction: unset;
  white-space: normal;
  height: auto !important;
  line-height: normal;
  text-align: left;
  overflow: hidden;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#content .btn.infouserdara > i,
.modal .btn.infouserdara > i{
  float: left;
  margin: 0;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
#content .btn.infouserdara > h4,
.modal .btn.infouserdara > h4{
  display: block;
  float: none;
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.30);
}
#content .btn.infouserdara > small,
.modal .btn.infouserdara > small,
#content .btn.infouserdara > h4 > small,
.modal .btn.infouserdara > h4 > small{
  display: block;
  float: none;
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#content .btn.infouserdara > h4 > small,
.modal .btn.infouserdara > h4 > small{
  display: inline-block;
  padding-left: 0;
  font-weight: 500 !important;
}
/* Botones de ancho completo siguen en bloque */
#content .btn-block,
#content .btn.w-100,
.modal .btn-block,
.modal .btn.w-100{
  display: flex !important;
  width: 100%;
}

/* Progreso en tiles claros: pista visible + barra más gruesa */
#content .widget-stats:not([class*="bg-"]) .stats-progress.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(100,116,139,.20) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
#content .widget-stats:not([class*="bg-"]) .stats-progress .progress-bar{
  background: var(--cw-grad-accent) !important;
  border-radius: 999px;
}

/* Modo oscuro: tile base un poco más claro que el lienzo */
:root[data-cwisp-scheme="dark"] .cwisp-home .widget.widget-stats:not([class*="bg-"]){
  background: linear-gradient(155deg, #20293f 0%, #161e31 100%) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-cwisp-scheme="dark"] #content .widget-stats:not([class*="bg-"]) .stats-progress.progress{
  background: rgba(255,255,255,.14) !important;
}

/* ==========================================================================
   7. Botones — degradado, glow y píldoras
   ========================================================================== */
#content .btn,
#header .btn,
.modal .btn,
.sidebar .btn,
.cwisp-login .btn{
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .16s var(--cw-ease), box-shadow .18s ease,
              background .18s ease, border-color .18s ease, filter .18s ease;
}
#content .btn:active,
.modal .btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary,.btn-info,.btn-accent,
.btn-success,.btn-danger,.btn-warning,
.btn-inverse,.btn-indigo,.btn-purple,.btn-pink{
  border: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.14);
}
.btn-primary:hover,.btn-info:hover,.btn-accent:hover,
.btn-success:hover,.btn-danger:hover,.btn-warning:hover,
.btn-inverse:hover,.btn-indigo:hover,.btn-purple:hover,.btn-pink:hover{
  filter: brightness(1.07);
  box-shadow: 0 10px 24px rgba(15,23,42,.20);
}

/* Acento (mapeado al acento del theme panel) */
.btn-accent,.btn-primary{
  background-color: var(--cw-accent) !important;
  background-image: var(--cw-grad-accent) !important;
  color: var(--cw-accent-contrast) !important;
  text-shadow: none;
  box-shadow: 0 8px 20px rgba(var(--cw-accent-rgb),.38), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-accent:hover,.btn-primary:hover,
.btn-accent:focus,.btn-primary:focus{
  box-shadow: 0 12px 28px rgba(var(--cw-accent-rgb),.48), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Semánticos con degradado propio */
.btn-success{ background: linear-gradient(135deg, #2eb85c, #1e9443) !important; }
.btn-danger { background: linear-gradient(135deg, #f0505e, #c9303f) !important; }
.btn-warning{ background: linear-gradient(135deg, #f8ac37, #e08a12) !important; color: #fff !important; }
.btn-info   { background: linear-gradient(135deg, #4fc3e3, #2d9cc0) !important; }
.btn-inverse{ background: linear-gradient(135deg, #3d4757, #232b39) !important; }

/* Default / white: fantasma elegante */
#content .btn-default,#content .btn-white,
.modal .btn-default,.modal .btn-white,
#header .btn-default,#header .btn-white{
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-border-strong) !important;
  color: var(--cw-text);
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
#content .btn-default:hover,#content .btn-white:hover,
.modal .btn-default:hover,.modal .btn-white:hover{
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent);
  background: rgba(var(--cw-accent-rgb),.06);
}

/* Iconos cuadrados suaves */
#content .btn-icon:not(.btn-xs),.btn-icon:not(.btn-xs){
  border-radius: 10px;
}
.btn-xs{ border-radius: 8px !important; }

.btn-circle{ border-radius: 999px !important; }

.btn-lg{ border-radius: 13px; }
.btn-sm{ border-radius: 9px; }

/* ==========================================================================
   8. Tablas — encabezado navy + filas respirables
   ========================================================================== */
#content .table{
  --cw-cell-y: 12px;
  border-collapse: separate !important;
  border-spacing: 0;
}
#content .table > tbody > tr > td,
#content .table > tbody > tr > th{
  padding-top: var(--cw-cell-y);
  padding-bottom: var(--cw-cell-y);
  border-top: 1px solid var(--cw-border) !important;
  vertical-align: middle;
}

/* THEAD navy — la firma del rediseño */
#content .table > thead > tr > th,
#content .table > thead > tr > td{
  background: linear-gradient(180deg, var(--cw-navy-1), var(--cw-navy-2)) !important;
  color: rgba(233,238,248,.82) !important;
  border-bottom: none !important;
  border-top: none !important;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 12px;
  padding-bottom: 12px;
}
#content .table-bordered > thead > tr > th,
#content .table-bordered > thead > tr > td{
  border-left-color: rgba(255,255,255,.07) !important;
  border-right-color: rgba(255,255,255,.07) !important;
}
#content .table > thead > tr > th a{ color: var(--cw-accent) !important; }

/* Flechas de orden de DataTables sobre navy */
#content table.dataTable thead .sorting:before,
#content table.dataTable thead .sorting:after,
#content table.dataTable thead .sorting_asc:before,
#content table.dataTable thead .sorting_asc:after,
#content table.dataTable thead .sorting_desc:before,
#content table.dataTable thead .sorting_desc:after,
#content table.dataTable thead .sorting_asc_disabled:before,
#content table.dataTable thead .sorting_asc_disabled:after,
#content table.dataTable thead .sorting_desc_disabled:before,
#content table.dataTable thead .sorting_desc_disabled:after{
  color: rgba(233,238,248,.30) !important;
}
#content table.dataTable thead .sorting_asc:before,
#content table.dataTable thead .sorting_desc:after{
  color: var(--cw-accent) !important;
}
#content table.dataTable thead .sorting_asc,
#content table.dataTable thead .sorting_desc,
#content table.dataTable thead .sorting{
  background-color: transparent !important;
}

/* TFOOT discreto */
#content .table > tfoot > tr > th,
#content .table > tfoot > tr > td{
  background: var(--cw-surface-subtle) !important;
  border-top: 1px solid var(--cw-border) !important;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cw-text-muted);
}

/* Columna ordenada (sorting_1): sin relleno propio, uniforme con la fila */
#content table.dataTable > tbody > tr > td.sorting_1,
#content table.dataTable > tbody > tr > th.sorting_1{
  background-color: transparent !important;
}
/* …pero las rayas alternas deben seguir pintando también esa columna */
#content .table-striped > tbody > tr:nth-of-type(odd) > td.sorting_1,
#content .table-striped > tbody > tr:nth-of-type(odd) > th.sorting_1{
  background-color: rgba(var(--cw-accent-rgb),.028) !important;
}
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(odd) > td.sorting_1,
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(odd) > th.sorting_1{
  background-color: rgba(255,255,255,.02) !important;
}

/* Modo oscuro: ninguna celda con fondo claro propio (columna de checkboxes, etc.);
   va ANTES de stripes/hover para que esos efectos sigan funcionando */
html[data-cwisp-scheme="dark"] #content table.dataTable > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content table.dataTable > tbody > tr > th{
  background-color: transparent !important;
}
/* Hover debe ganar al catch-all anterior en oscuro */
html[data-cwisp-scheme="dark"] #content table.dataTable > tbody > tr:hover > td,
html[data-cwisp-scheme="dark"] #content table.dataTable > tbody > tr:hover > th{
  background-color: rgba(var(--cw-accent-rgb),.075) !important;
}

/* Doble moneda VE: secundaria debajo del primario */
#content .cwisp-money-dual{
  display: inline-block;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
#content .cwisp-money-secondary{
  display: inline-block;
  font-size: 11px;
  opacity: .78;
  font-weight: 500;
}
html[data-cwisp-scheme="dark"] #content .cwisp-money-secondary{
  opacity: .7;
  color: #aeb6bf;
}

/* GenieACS / SmartOLT: mismo lenguaje visual que paneles/tickets
   (barra verde + título oscuro; thead mint con texto oscuro). */
#content .cwisp-smartolt .card-header,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header,
html[data-cwisp-scheme="light"] #content .cwisp-smartolt .card-header,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt .card-header{
  background: linear-gradient(90deg,
    rgba(var(--cw-accent-rgb),.12),
    rgba(var(--cw-accent-rgb),.03) 55%,
    transparent 85%) !important;
  color: var(--cw-text) !important;
  border-bottom: 1px solid var(--cw-border) !important;
  padding: 14px 20px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
#content .cwisp-smartolt .card-header strong,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header strong,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt .card-header strong{
  color: var(--cw-text) !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
}
/* Barra de acento como .panel-title::before */
#content .cwisp-smartolt .card-header strong::before{
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--cw-grad-accent, var(--cw-accent));
  box-shadow: 0 2px 8px rgba(var(--cw-accent-rgb),.45);
}
#content .cwisp-smartolt .card-header strong > i{
  color: var(--cw-accent) !important;
}
#content .cwisp-smartolt .card-header .pull-right,
#content .cwisp-smartolt .card-header .text-muted,
#content .cwisp-smartolt .card-header small,
#content .cwisp-smartolt .card-header small.text-muted,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header .pull-right,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header .text-muted,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header small,
html[data-cwisp-scheme] #content .cwisp-smartolt .card-header small.text-muted{
  color: var(--cw-text-muted) !important;
}

/* GenieACS / SmartOLT: DataTables + cards en modo oscuro */
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt .card,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt .cwisp-card{
  background: #1e2429;
  border-color: #2d353c;
}
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt #data-genieacs-devices_wrapper,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt #data-genieacs-devices{
  color: #d1d5db;
}
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt #genieacs-steps-pre{
  background: #151a1e;
  color: #cbd5e1;
  border-color: #2d353c;
}

/* Thead GenieACS = mismo mint/acento que tickets DataTables */
#content .cwisp-smartolt table.table > thead > tr > th,
#content .cwisp-smartolt table.dataTable > thead > tr > th,
#content .cwisp-smartolt #data-genieacs-devices > thead > tr > th,
#content .cwisp-smartolt #data-genieacs-devices_wrapper table.dataTable thead > tr > th,
#content .cwisp-smartolt #data-genieacs-devices_wrapper table.dataTable thead th.sorting,
#content .cwisp-smartolt #data-genieacs-devices_wrapper table.dataTable thead th.sorting_asc,
#content .cwisp-smartolt #data-genieacs-devices_wrapper table.dataTable thead th.sorting_desc,
html[data-cwisp-scheme] #content .cwisp-smartolt table.table > thead > tr > th,
html[data-cwisp-scheme] #content .cwisp-smartolt table.dataTable thead > tr > th,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt table.table > thead > tr > th,
html[data-cwisp-scheme="dark"] #content .cwisp-smartolt table.dataTable thead > tr > th{
  background: linear-gradient(
    180deg,
    rgba(var(--cw-accent-rgb),.20),
    rgba(var(--cw-accent-rgb),.08)
  ) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-border) !important;
  border-bottom: 1px solid var(--cw-border) !important;
  border-top: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
#content .cwisp-smartolt table.dataTable thead .sorting,
#content .cwisp-smartolt table.dataTable thead .sorting_asc,
#content .cwisp-smartolt table.dataTable thead .sorting_desc{
  background-image: none !important;
  color: var(--cw-text) !important;
}
#content .cwisp-smartolt table.dataTable thead .sorting:before,
#content .cwisp-smartolt table.dataTable thead .sorting:after,
#content .cwisp-smartolt table.dataTable thead .sorting_asc:before,
#content .cwisp-smartolt table.dataTable thead .sorting_asc:after,
#content .cwisp-smartolt table.dataTable thead .sorting_desc:before,
#content .cwisp-smartolt table.dataTable thead .sorting_desc:after{
  color: rgba(var(--cw-accent-rgb),.45) !important;
}
#content .cwisp-smartolt table.dataTable thead .sorting_asc:before,
#content .cwisp-smartolt table.dataTable thead .sorting_desc:after{
  color: var(--cw-accent) !important;
}

/* Filas */
#content .table-striped > tbody > tr:nth-of-type(odd) > td,
#content .table-striped > tbody > tr:nth-of-type(odd) > th{
  background: rgba(var(--cw-accent-rgb),.028) !important;
}
#content .table > tbody > tr > td,
#content .table > tbody > tr > th{
  transition: background .14s ease;
}
#content .table-hover > tbody > tr:hover > td,
#content .table-hover > tbody > tr:hover > th,
#content .table > tbody > tr:hover > td,
#content .table > tbody > tr:hover > th{
  background: rgba(var(--cw-accent-rgb),.075) !important;
}

/* Contenedor tipo tarjeta para tablas planas dentro de paneles */
#content .table-responsive{
  border-radius: var(--cw-radius);
  border: 1px solid var(--cw-border);
  background: var(--cw-card-bg);
}
#content .panel .table-responsive{ border: none; }

/* ==========================================================================
   9. Formularios — inputs rellenos (filled) con foco brillante
   ========================================================================== */
#content .form-control,
.modal .form-control,
#header .form-control{
  border-radius: 10px;
  background: var(--cw-surface-subtle);
  border: 1px solid var(--cw-input-border, var(--cw-border)) !important;
  box-shadow: none !important;
  color: var(--cw-text);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#content .form-control:hover,
.modal .form-control:hover{
  background: var(--cw-surface-subtle);
  border-color: var(--cw-border-strong) !important;
}
#content .form-control:focus,
.modal .form-control:focus,
#header .form-control:focus{
  background: var(--cw-card-bg);
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb),.16) !important;
  outline: none;
}
#content .form-control[readonly],
#content .form-control[disabled],
.modal .form-control[disabled]{
  background: var(--cw-surface-subtle);
  opacity: .72;
  border-color: var(--cw-input-border, var(--cw-border)) !important;
}

#content .input-group-addon,
.modal .input-group-addon{
  background: var(--cw-surface-subtle);
  border: 1px solid var(--cw-input-border, var(--cw-border)) !important;
  border-radius: 10px;
  color: var(--cw-text-muted);
}
#content .input-group .form-control:first-child,
#content .input-group-addon:first-child{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#content .input-group .form-control:last-child,
#content .input-group-addon:last-child{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Selects */
#content select.form-control,
.modal select.form-control{
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cw-text-muted) 50%),
    linear-gradient(135deg, var(--cw-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* form-control-with-bg fuerza #fff en colombiawisp.css — respetar tokens */
#content .form-control-with-bg .form-control,
#content .form-control.form-control-with-bg,
#content form.form-control-with-bg .form-control{
  background: var(--cw-surface-subtle) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-input-border, var(--cw-border)) !important;
}
#content .form-control-with-bg .form-control:focus,
#content form.form-control-with-bg .form-control:focus{
  background: var(--cw-card-bg) !important;
}

/* ==========================================================================
   SmartWizard (Nuevo Cliente / wizards Color Admin) — modo oscuro
   El plugin + app.min.css pintan step-content/toolbar/anchors en blanco/gris.
   ========================================================================== */
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default,
html[data-cwisp-scheme="dark"] #content #wizard.sw-main{
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default > ul.step-anchor,
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor{
  background: var(--cw-surface-subtle, #1d2739) !important;
  border-color: var(--cw-border) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a{
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a:hover,
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a:focus{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a .number{
  background: rgba(255,255,255,.12) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a small,
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li > a .info{
  color: #b9c4d4 !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.active{
  background: var(--cw-accent) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.active > a,
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.active > a .info,
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.active > a small{
  color: var(--cw-accent-contrast, #fff) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.active > a .number{
  background: rgba(0,0,0,.22) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.done > a{
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .step-anchor > li.done > a .number{
  background: var(--cw-success, #27a24b) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .sw-container .step-content,
html[data-cwisp-scheme="dark"] #content .sw-theme-default .step-content{
  background: var(--cw-surface-panel, var(--cw-card-bg, #1b2438)) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-border) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main.sw-theme-default .sw-toolbar,
html[data-cwisp-scheme="dark"] #content .sw-theme-default .sw-toolbar{
  background: var(--cw-surface-subtle, #1d2739) !important;
  border-color: var(--cw-border) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .col-form-label,
html[data-cwisp-scheme="dark"] #content .sw-main label,
html[data-cwisp-scheme="dark"] #content .sw-main .control-label,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .col-form-label,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] label{
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main fieldset,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] fieldset{
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main legend,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] legend{
  color: #eaf0fb !important;
  border-color: var(--cw-border) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main hr,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] hr{
  border-top-color: var(--cw-border) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .well,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .well,
html[data-cwisp-scheme="dark"] #content .sw-main .note,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .note{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.18) !important;
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .btn.btn-default,
html[data-cwisp-scheme="dark"] #content .sw-main .btn.btn-white,
html[data-cwisp-scheme="dark"] #content .sw-toolbar .btn.btn-default,
html[data-cwisp-scheme="dark"] #content .sw-toolbar .sw-btn-prev,
html[data-cwisp-scheme="dark"] #content .sw-toolbar .sw-btn-next{
  background: var(--cw-surface-raised, #243044) !important;
  border-color: var(--cw-border) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .checkbox label,
html[data-cwisp-scheme="dark"] #content .sw-main .radio label,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .checkbox label,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .radio label{
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .form-control::placeholder,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .form-control::placeholder{
  color: #8b97ab !important;
}
html[data-cwisp-scheme="dark"] #content .page-header{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .table,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .table{
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .sw-main .table > thead > tr > th,
html[data-cwisp-scheme="dark"] #content .sw-main .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content form[name="form-wizard"] .table > tbody > tr > td{
  border-color: var(--cw-border) !important;
  background: transparent !important;
}

/* Filtro Ingresos/Egresos (y paneles de filtro similares) */
#content .filter-gastos{
  background: var(--cw-surface-subtle) !important;
  border: 1px solid var(--cw-border) !important;
  border-radius: var(--cw-radius-lg, 12px);
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 8px;
  padding-right: 8px;
}
#content .filter-gastos .col-form-label,
#content .filter-gastos label{
  color: var(--cw-text) !important;
}
html[data-cwisp-scheme="dark"] #content .filter-gastos{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .filter-gastos .col-form-label,
html[data-cwisp-scheme="dark"] #content .filter-gastos label{
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-col-filters,
html[data-cwisp-scheme="dark"] #content .cwisp-toolbar-filters{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-col-filters-toggle,
html[data-cwisp-scheme="dark"] #content .cwisp-toolbar-filters-toggle{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-col-filters-body,
html[data-cwisp-scheme="dark"] #content .cwisp-toolbar-filters-body{
  border-top-color: rgba(146,168,208,.18) !important;
}
/* Datepickers: inputs + popup (bootstrap-datepicker / daterange / datetime) */
html[data-cwisp-scheme="dark"] #content .input-daterange .form-control,
html[data-cwisp-scheme="dark"] #content .input-daterange input,
html[data-cwisp-scheme="dark"] #content .input-group.date .form-control,
html[data-cwisp-scheme="dark"] #content input.datetk,
html[data-cwisp-scheme="dark"] #content input.datepicker,
html[data-cwisp-scheme="dark"] .modal input.datetk,
html[data-cwisp-scheme="dark"] .modal .input-daterange .form-control,
html[data-cwisp-scheme="dark"] .modal .input-group.date .form-control{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(146,168,208,.24) !important;
  color: #eaf0fb !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] #content .input-daterange .input-group-addon,
html[data-cwisp-scheme="dark"] #content .input-group.date .input-group-addon,
html[data-cwisp-scheme="dark"] #content .input-daterange .input-group-text,
html[data-cwisp-scheme="dark"] .modal .input-daterange .input-group-addon,
html[data-cwisp-scheme="dark"] .modal .input-group.date .input-group-addon{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(146,168,208,.24) !important;
  color: #c5d0e6 !important;
}
html[data-cwisp-scheme="dark"] #content .input-daterange .form-control:focus,
html[data-cwisp-scheme="dark"] #content input.datetk:focus,
html[data-cwisp-scheme="dark"] .modal input.datetk:focus{
  border-color: rgba(var(--cw-accent-rgb),.65) !important;
  box-shadow: 0 0 0 3px rgba(var(--cw-accent-rgb),.18) !important;
}

html[data-cwisp-scheme="dark"] .datepicker,
html[data-cwisp-scheme="dark"] .datepicker-dropdown,
html[data-cwisp-scheme="dark"] .datepicker.dropdown-menu{
  background: #1a2336 !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  color: #e2e9f6 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.45) !important;
}
html[data-cwisp-scheme="dark"] .datepicker-dropdown:before{
  border-bottom-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] .datepicker-dropdown:after{
  border-bottom-color: #1a2336 !important;
}
html[data-cwisp-scheme="dark"] .datepicker-dropdown.datepicker-orient-top:before{
  border-top-color: rgba(146,168,208,.28) !important;
  border-bottom-color: transparent !important;
}
html[data-cwisp-scheme="dark"] .datepicker-dropdown.datepicker-orient-top:after{
  border-top-color: #1a2336 !important;
  border-bottom-color: transparent !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td,
html[data-cwisp-scheme="dark"] .datepicker table tr th{
  color: #d7e0f2 !important;
  text-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .datepicker .datepicker-switch,
html[data-cwisp-scheme="dark"] .datepicker .prev,
html[data-cwisp-scheme="dark"] .datepicker .next,
html[data-cwisp-scheme="dark"] .datepicker tfoot tr th{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] .datepicker .datepicker-switch:hover,
html[data-cwisp-scheme="dark"] .datepicker .prev:hover,
html[data-cwisp-scheme="dark"] .datepicker .next:hover,
html[data-cwisp-scheme="dark"] .datepicker tfoot tr th:hover{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.day:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td.focused,
html[data-cwisp-scheme="dark"] .datepicker table tr td span:hover{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.old,
html[data-cwisp-scheme="dark"] .datepicker table tr td.new,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.old,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.new{
  color: #7f8aa3 !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.disabled,
html[data-cwisp-scheme="dark"] .datepicker table tr td.disabled:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.disabled,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.disabled:hover{
  color: #5a647a !important;
  background: transparent !important;
}
/* Hoy: el tema usa fondo #e4e7ea; con texto claro queda ilegible */
html[data-cwisp-scheme="dark"] .datepicker table tbody tr td.day.today,
html[data-cwisp-scheme="dark"] .datepicker table tr td.day.today,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today.focused,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today.disabled,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today.disabled:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td.range.today,
html[data-cwisp-scheme="dark"] .datepicker table tr td.range.today:hover{
  background: #f0b429 !important;
  background-image: none !important;
  color: #141c2c !important;
  border-color: #f0b429 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  border-radius: 6px;
}
html[data-cwisp-scheme="dark"] .datepicker table tbody tr td.day.today:before,
html[data-cwisp-scheme="dark"] .datepicker table tr td.day.today:before{
  border-bottom-color: #c48912 !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tbody tr td.day.today.active,
html[data-cwisp-scheme="dark"] .datepicker table tr td.day.today.active,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today.active,
html[data-cwisp-scheme="dark"] .datepicker table tr td.today.active:hover{
  background: var(--cw-accent, #348fe2) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tbody tr td.day.today.active:before{
  border-bottom-color: #fff !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.active,
html[data-cwisp-scheme="dark"] .datepicker table tr td.active:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td.active.disabled,
html[data-cwisp-scheme="dark"] .datepicker table tr td.active.disabled:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.active,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.active:hover,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.active.disabled,
html[data-cwisp-scheme="dark"] .datepicker table tr td span.active.disabled:hover{
  background: var(--cw-accent, #348fe2) !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
  border-radius: 6px;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.range,
html[data-cwisp-scheme="dark"] .datepicker table tr td.range:hover{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] .datepicker table tr td.selected,
html[data-cwisp-scheme="dark"] .datepicker table tr td.selected:hover{
  background: rgba(var(--cw-accent-rgb),.45) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .datepicker .cwisp-prev:before,
html[data-cwisp-scheme="dark"] .datepicker .cwisp-next:before,
html[data-cwisp-scheme="dark"] .datepicker .prev:before,
html[data-cwisp-scheme="dark"] .datepicker .next:before{
  color: #eaf0fb !important;
  border-color: #eaf0fb !important;
}

/* bootstrap-datetimepicker (si aparece en modales) */
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu{
  background: #1a2336 !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table th{
  color: #d7e0f2 !important;
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td span:hover{
  background: rgba(255,255,255,.10) !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td.active,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td.active:hover,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget table td span.active{
  background: var(--cw-accent, #348fe2) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Select2 (skin del tema) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border-radius: 10px !important;
  border: 1px solid var(--cw-input-border, var(--cw-border)) !important;
  background: var(--cw-surface-subtle) !important;
  min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single{
  background: var(--cw-card-bg) !important;
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb),.16);
}
.select2-dropdown{
  border-radius: 12px !important;
  border: 1px solid var(--cw-border) !important;
  box-shadow: var(--cw-shadow-lg);
  overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(var(--cw-accent-rgb),.12) !important;
  color: var(--cw-text) !important;
}
.select2-container--default .select2-results__option--selected{
  background: rgba(var(--cw-accent-rgb),.16) !important;
}

/* Labels y textos de ayuda */
#content .control-label,
#content .form-group label,
.modal .control-label{
  font-weight: 600;
  color: var(--cw-text);
}
#content .help-block{ color: var(--cw-text-muted); }

/* Checkbox / radio con acento */
#content input[type="checkbox"],
#content input[type="radio"],
.modal input[type="checkbox"],
.modal input[type="radio"]{
  accent-color: var(--cw-accent);
}

/* ==========================================================================
   10. Modales, dropdowns, tabs
   ========================================================================== */
.modal-content{
  border-radius: var(--cw-radius-lg) !important;
  border: 1px solid var(--cw-border) !important;
  box-shadow: var(--cw-shadow-lg) !important;
  overflow: hidden;
}
.modal-header{
  background: linear-gradient(90deg,
    rgba(var(--cw-accent-rgb),.10),
    rgba(var(--cw-accent-rgb),.02) 60%,
    transparent) !important;
  border-bottom: 1px solid var(--cw-border) !important;
  padding: 16px 22px;
}
.modal-title{ font-weight: 800; letter-spacing: 0; }
.modal-footer{
  background: var(--cw-surface-subtle);
  border-top: 1px solid var(--cw-border) !important;
}
.modal-backdrop{ backdrop-filter: blur(3px); }

.dropdown-menu{
  border-radius: 13px !important;
  border: 1px solid var(--cw-border) !important;
  box-shadow: var(--cw-shadow-lg) !important;
  padding: 7px;
}
.dropdown-menu > li > a{
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--cw-text);
  transition: background .14s ease, color .14s ease;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  background: rgba(var(--cw-accent-rgb),.10) !important;
  color: var(--cw-accent) !important;
}
.dropdown-menu .divider{
  margin: 6px 4px;
  background: var(--cw-border);
}

/* Tabs tipo subrayado con acento */
#content .nav-tabs{
  border-bottom: 2px solid var(--cw-border);
}
#content .nav-tabs > li > a{
  border: none !important;
  border-radius: 10px 10px 0 0;
  color: var(--cw-text-muted);
  font-weight: 600;
  margin-right: 4px;
  transition: color .16s ease, background .16s ease;
}
#content .nav-tabs > li > a:hover{
  background: rgba(var(--cw-accent-rgb),.06);
  color: var(--cw-accent);
}
#content .nav-tabs > li.active > a,
#content .nav-tabs > li.active > a:hover,
#content .nav-tabs > li.active > a:focus{
  background: transparent !important;
  color: var(--cw-accent) !important;
  box-shadow: inset 0 -3px 0 var(--cw-accent);
  font-weight: 700;
}
#content .tab-content{
  background: transparent;
}

/* Nav-pills */
#content .nav-pills > li.active > a,
#content .nav-pills > li.active > a:hover,
#content .nav-pills > li.active > a:focus{
  background: var(--cw-grad-accent) !important;
  color: var(--cw-accent-contrast) !important;
  box-shadow: 0 6px 16px rgba(var(--cw-accent-rgb),.35);
}
#content .nav-pills > li > a{ border-radius: 10px; font-weight: 600; }

/* ==========================================================================
   11. Badges, labels, alertas, paginación, barras de progreso
   ========================================================================== */
.label,.badge{
  border-radius: 999px !important;
  padding: .35em .8em !important;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .03em;
}

/* Labels/badges sólidos con texto blanco — legibles en tablas (modo claro).
   El estilo "soft" (fondo pálido + texto oscuro) se perdía sobre filas rayadas. */
.label,.badge{ border: 1px solid transparent; }
.label-success,.badge-success{
  background: #2eb85c !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.label-danger,.badge-danger{
  background: #e04555 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.label-warning,.badge-warning{
  background: #f0a020 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.label-info,.badge-info{
  background: #3aafd0 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.label-primary,.badge-primary{
  background: var(--cw-accent) !important;
  color: var(--cw-accent-contrast, #fff) !important;
  border-color: transparent !important;
}
.label-default,.badge-default{
  background: #6b7785 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.label-inverse,.badge-inverse{
  background: #2d353c !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
/* Variantes Color Admin usadas en tablas */
.label-green,.badge-green{ background: #2eb85c !important; color: #fff !important; }
.label-lime,.badge-lime{ background: #90ca4b !important; color: #fff !important; }
.label-aqua,.badge-aqua{ background: #49b6d6 !important; color: #fff !important; }
.label-yellow,.badge-yellow{ background: #e0b000 !important; color: #1a1400 !important; }
.label-purple,.badge-purple{ background: #8753de !important; color: #fff !important; }
.label-pink,.badge-pink{ background: #fb5597 !important; color: #fff !important; }
.label-indigo,.badge-indigo{ background: #6d66ea !important; color: #fff !important; }
#content .states.label,
.modal .states.label{
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
}

/* Alertas suaves con borde lateral */
#content .alert,
.modal .alert{
  border-radius: 13px !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  box-shadow: none;
  font-weight: 500;
}
#content .alert-success{
  background: rgba(39,162,75,.09) !important;
  border-left-color: var(--cw-success) !important;
  color: #1c6f36 !important;
}
#content .alert-danger{
  background: rgba(224,75,87,.08) !important;
  border-left-color: var(--cw-danger) !important;
  color: #a32a35 !important;
}
#content .alert-warning{
  background: rgba(241,154,42,.10) !important;
  border-left-color: var(--cw-warning) !important;
  color: #8f5a08 !important;
}
#content .alert-info{
  background: rgba(73,182,214,.10) !important;
  border-left-color: var(--cw-info) !important;
  color: #1f6b80 !important;
}
#content .alert-secondary{
  background: rgba(108,117,125,.10) !important;
  border-left-color: #6c757d !important;
  color: #495057 !important;
}

/* Paginación */
#content .pagination > li > a,
#content .pagination > li > span{
  border-radius: 9px !important;
  margin: 0 3px;
  border: 1px solid var(--cw-border) !important;
  color: var(--cw-text);
  font-weight: 600;
  min-width: 34px;
  text-align: center;
  transition: all .16s ease;
}
#content .pagination > li > a:hover{
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent);
  background: rgba(var(--cw-accent-rgb),.06);
}
#content .pagination > .active > a,
#content .pagination > .active > span,
#content .pagination > .active > a:hover,
#content .pagination > .active > span:hover{
  background: var(--cw-grad-accent) !important;
  border-color: transparent !important;
  color: var(--cw-accent-contrast) !important;
  box-shadow: 0 6px 14px rgba(var(--cw-accent-rgb),.38);
}

/* Barras de progreso */
#content .progress{
  height: 8px;
  border-radius: 999px;
  background: var(--cw-surface-subtle);
  box-shadow: none;
}
/* Solo barras SIN color semántico propio: no tapar bg-orange/bg-blue/etc. */
#content .progress-bar:not([class*="bg-"]){
  border-radius: 999px;
  background: var(--cw-grad-accent);
}
#content .progress-bar[class*="bg-"]{
  border-radius: 999px;
}

/* Barras del panel "DATOS DEL SERVIDOR" (widget-list): llevan TEXTO dentro,
   necesitan altura real para leerse (Usado/Libre/% CPU) */
#content .widget-list .progress,
#content .widget-list-action .progress{
  height: 18px !important;
  min-width: 180px;
  border-radius: 999px;
  background: rgba(125,145,175,.22) !important;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
#content .cwisp-home .home-server-progress{
  width: 180px;
  min-width: 180px;
  max-width: 180px;
}
#content .widget-list .progress .progress-bar,
#content .widget-list-action .progress .progress-bar{
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
  border-radius: 999px;
  box-shadow: none;
}
#content .widget-list .progress .progress-bar:last-child{
  border-radius: 0 999px 999px 0;
}
#content .widget-list .progress .progress-bar .progress-value{
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.38);
}

/* ==========================================================================
   12. Encabezado de página, breadcrumb y barra de herramientas
   ========================================================================== */
#content .page-header{
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cw-text);
  border-bottom: none !important;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
}
#content .page-header::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 4px;
  border-radius: 3px;
  background: var(--cw-grad-accent);
  box-shadow: 0 2px 8px rgba(var(--cw-accent-rgb),.4);
}
#content .page-header small{
  color: var(--cw-text-muted);
  font-weight: 500;
}

#content .breadcrumb{
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  /* El breadcrumb va flotado (pull-right) y el h2.page-header tiene
     position:relative, que pinta por encima de floats y le robaba los
     clicks. Elevar el breadcrumb restaura la navegación. */
  position: relative;
  z-index: 2;
}
#content .breadcrumb > li + li:before{ color: var(--cw-text-muted); }
#content .breadcrumb > .active{ color: var(--cw-accent); font-weight: 600; }

/* DataTables scrollX: cabecera / cuerpo / pie alineados */
#content div.dataTables_wrapper{
  width: 100% !important;
  max-width: 100% !important;
}
#content div.dataTables_wrapper .dataTables_scroll{
  width: 100% !important;
  clear: both;
}
#content div.dataTables_wrapper .dataTables_scrollBody{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
#content div.dataTables_wrapper .dataTables_scrollHead,
#content div.dataTables_wrapper .dataTables_scrollFoot{
  overflow: hidden !important;
}
#content div.dataTables_wrapper .dataTables_scrollHeadInner,
#content div.dataTables_wrapper .dataTables_scrollFootInner{
  box-sizing: content-box !important;
}
#content div.dataTables_wrapper .dataTables_scrollHead table,
#content div.dataTables_wrapper .dataTables_scrollBody table,
#content div.dataTables_wrapper .dataTables_scrollFoot table{
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
/* El bloque .table-responsive NO hace scroll: toolbar/paginación quedan fijos.
   Si hace falta scroll horizontal, va en .cwisp-dt-table-scroll (solo la tabla). */
#content .panel-body.table-responsive:has(.dataTables_wrapper),
#content .table-responsive:has(.dataTables_wrapper){
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}
#content div.dataTables_wrapper .cwisp-dt-table-scroll{
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}
#content table.dataTable.cwisp-data-table{
  /* Ancho del panel. JS reparte el sobrante entre todas las columnas de datos;
     Herramientas y Checkbox conservan su ancho fijo. */
  width: var(--cwisp-table-min-width, 100%) !important;
  min-width: var(--cwisp-table-min-width, 100%) !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  font-size: 11px !important;
}
#content table.dataTable.cwisp-data-table > thead > tr > th{
  font-size: 9.5px !important;
  letter-spacing: .035em !important;
  padding: 7px 18px 7px 7px !important;
}
#content table.dataTable.cwisp-data-table > tbody > tr > td,
#content table.dataTable.cwisp-data-table > tbody > tr > th{
  padding: 5px 7px !important;
  line-height: 1.25 !important;
}
#content table.dataTable.cwisp-data-table > tfoot > tr > th,
#content table.dataTable.cwisp-data-table > tfoot > tr > td{
  padding: 5px 6px !important;
}
#content table.dataTable.cwisp-data-table > tfoot input.form-control{
  height: 27px !important;
  min-height: 27px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
}
#content table.dataTable.nowrap th,
#content table.dataTable.nowrap td,
#content table.dataTable.cwisp-data-table th,
#content table.dataTable.cwisp-data-table td,
#content .dataTables_scrollFoot th,
#content table.dataTable tfoot th{
  white-space: nowrap !important;
  box-sizing: border-box !important;
  /* Texto completo en celdas visibles; columnas que no caben van al "+". */
  overflow: hidden !important;
  text-overflow: clip !important;
}
/* Resize de columnas (escritorio): borde derecho del th. */
#content table.dataTable.cwisp-col-resizable > thead > tr > th:not(.cwisp-checkbox-column):not(.cwisp-tools-column){
  position: relative;
}
#content table.dataTable.cwisp-col-resizable > thead > tr > th:not(.cwisp-checkbox-column):not(.cwisp-tools-column)::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
body.cwisp-col-resizing{
  cursor: col-resize !important;
  user-select: none !important;
}
body.cwisp-col-resizing *{
  cursor: col-resize !important;
  user-select: none !important;
}
.cwisp-col-resize-ghost{
  position: fixed;
  top: 0;
  width: 2px;
  margin-left: -1px;
  background: #2f6fed;
  z-index: 10050;
  pointer-events: none;
}
#content table.dataTable.cwisp-data-table .cwisp-checkbox-column{
  width: var(--cwisp-checkbox-width, 58px) !important;
  min-width: var(--cwisp-checkbox-width, 58px) !important;
  max-width: var(--cwisp-checkbox-width, 58px) !important;
}
#content table.dataTable.cwisp-data-table .cwisp-tools-column{
  display: table-cell !important;
  width: var(--cwisp-tools-width, 220px) !important;
  min-width: var(--cwisp-tools-width, 220px) !important;
  max-width: var(--cwisp-tools-width, 220px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
#content table.dataTable.cwisp-data-table .cwisp-tools-column .btn-icon,
#content table.dataTable.cwisp-data-table .cwisp-tools-column .btn.btn-sm{
  min-width: 25px !important;
  width: 25px !important;
  min-height: 25px !important;
  height: 25px !important;
  padding: 0 !important;
  margin: 0 1px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 23px !important;
}
#content table.dataTable > tbody > tr.child{
  display: table-row !important;
}
#content table.dataTable > tbody > tr.child td,
#content table.dataTable > tbody > tr.child span.dtr-data{
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#content table.dataTable.dtr-inline > tbody > tr > td.cwisp-checkbox-column.dtr-control{
  position: relative !important;
  padding: 5px 7px 5px 28px !important;
  text-align: center !important;
  cursor: pointer;
}
#content table.dataTable.dtr-inline.collapsed > tbody > tr > td.cwisp-checkbox-column.dtr-control:before{
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  line-height: 14px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.10) !important;
  color: currentColor !important;
  box-shadow: none !important;
  opacity: .85 !important;
  box-sizing: border-box !important;
}
#content table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.cwisp-checkbox-column.dtr-control:before{
  background: var(--cw-accent, #2d8f4f) !important;
  border-color: var(--cw-accent, #2d8f4f) !important;
  color: #fff !important;
  opacity: 1 !important;
}
#content table.dataTable > thead > tr > th.cwisp-checkbox-column{
  padding: 7px !important;
  text-align: center !important;
}
#content table.dataTable .cwisp-checkbox-column input[type="checkbox"]{
  margin: 0 !important;
  vertical-align: middle !important;
}

/* DataTables Responsive: el JS asigna el control a td.dtr-control, que no
   siempre es la primera columna. Centrar el +/- en esa celda y eliminar el
   pseudo-elemento legacy que quedaba suelto en la esquina de td:first-child. */
#content table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:not(.dtr-control):before,
#content table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:not(.dtr-control):before{
  display: none !important;
  content: none !important;
}
#content table.dataTable.dtr-inline > tbody > tr > td.dtr-control,
#content table.dataTable.dtr-inline > tbody > tr > th.dtr-control{
  position: relative !important;
  padding-left: 28px !important;
  overflow: visible !important;
  cursor: pointer;
}
#content table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
#content table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  content: "+" !important;
  display: block !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 14px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.10) !important;
  color: currentColor !important;
  box-shadow: none !important;
  opacity: .85 !important;
  box-sizing: border-box !important;
  z-index: 1;
}
#content table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
#content table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before{
  content: "\2212" !important;
  background: var(--cw-accent, #2d8f4f) !important;
  border-color: var(--cw-accent, #2d8f4f) !important;
  color: #fff !important;
  opacity: 1 !important;
}
#content table.dataTable.dtr-inline.collapsed > tbody > tr > td.cwisp-checkbox-column.dtr-control input[type="checkbox"],
#content table.dataTable.dtr-inline.collapsed > tbody > tr > th.cwisp-checkbox-column.dtr-control input[type="checkbox"]{
  margin-left: 0 !important;
}

/* Los tooltips nunca deben quedar por encima de un botón capturando su clic. */
body > .tooltip,
#content .tooltip,
.modal .tooltip{
  pointer-events: none !important;
}

/* Móvil: scroll solo en el lienzo de la tabla, limitado a 760 px. El toolbar,
   buscador y paginación permanecen fijos al ancho del teléfono. */
@media (max-width: 767px){
  #content div.dataTables_wrapper .cwisp-dt-table-scroll{
    overflow-x: auto !important;
  }
  #content div.dataTables_wrapper .dataTables_scrollBody{
    overflow-x: auto !important;
    overflow-y: visible;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  #content div.dataTables_wrapper .dataTables_scrollHead,
  #content div.dataTables_wrapper .dataTables_scrollFoot{
    max-width: 100% !important;
  }
  #content table.dataTable.cwisp-data-table.cwisp-mobile-scroll-cols,
  #content div.dataTables_wrapper .dataTables_scrollHead table.cwisp-mobile-scroll-cols,
  #content div.dataTables_wrapper .dataTables_scrollBody table.cwisp-mobile-scroll-cols,
  #content div.dataTables_wrapper .dataTables_scrollFoot table.cwisp-mobile-scroll-cols{
    width: var(--cwisp-mobile-table-width, 760px) !important;
    min-width: var(--cwisp-mobile-table-width, 760px) !important;
    max-width: var(--cwisp-mobile-table-width, 760px) !important;
    table-layout: fixed !important;
  }
  #content table.dataTable.cwisp-mobile-scroll-cols .cwisp-tools-column{
    width: var(--cwisp-tools-width, 220px) !important;
    min-width: var(--cwisp-tools-width, 220px) !important;
    max-width: var(--cwisp-tools-width, 220px) !important;
  }
}

/* Paneles con tablas: no recortar dropdowns de Colvis / pageLength */
#content .panel:has(.dataTables_wrapper),
#content .panel:has(.dataTables_wrapper) > .panel-body,
#content .dataTables_wrapper,
#content .cwisp-dt-topbar,
#content .cwisp-dt-actions,
#content .dt-buttons,
#content .dt-buttons > .btn-group{
  overflow: visible !important;
}
/* En escritorio Responsive manda columnas al "+"; no debe haber scroll.
   En móvil el bloque anterior conserva el desplazamiento horizontal. */
@media (min-width: 768px){
  #content .dataTables_wrapper .dataTables_scrollBody{
    overflow-x: hidden !important;
  }
}

/* Facturas escritorio: tipo de fecha + rango en una sola línea */
@media (min-width: 768px){
  #content .panel-facturas .facturas-date-filter{
    display: inline-flex !important;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  #content .panel-facturas .facturas-date-filter > .select2-container{
    width: 115px !important;
    min-width: 115px !important;
    flex: 0 0 115px;
  }
  #content .panel-facturas .facturas-date-filter > .input-daterange{
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px;
  }
}

/* Colvis / collections ancladas a body (evita overflow de .table-responsive) */
body > div.dt-button-collection,
body > ul.dt-button-collection,
body > div.dt-button-collection.dropdown-menu,
body > ul.dt-button-collection.dropdown-menu,
div.dt-button-collection.cwisp-dt-collection-fixed,
ul.dt-button-collection.cwisp-dt-collection-fixed,
div.dt-button-collection.dropdown-menu.cwisp-dt-collection-fixed{
  position: fixed !important;
  z-index: 10050 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
}
/* Colvis: estilo aislado; pageLength y exportación conservan su CSS nativo */
div.dt-button-collection.cwisp-colvis-list{
  width: 300px !important;
  min-width: 260px !important;
  max-width: 92vw !important;
  max-height: 70vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px !important;
  z-index: 10050 !important;
  box-sizing: border-box !important;
}
div.dt-button-collection.cwisp-colvis-list > div:last-child{
  width: 100% !important;
  column-count: 1 !important;
  -webkit-columns: 1 !important;
  columns: 1 !important;
}
div.dt-button-collection.cwisp-colvis-list .buttons-columnVisibility{
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 38px !important;
  white-space: normal !important;
  text-align: left !important;
  margin: 0 0 8px 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
div.dt-button-collection.cwisp-colvis-list .buttons-columnVisibility > span{
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
div.dt-button-collection.cwisp-colvis-list .buttons-columnVisibility:last-child{
  margin-bottom: 0 !important;
}
html[data-cwisp-scheme="dark"] div.dt-button-collection,
html[data-cwisp-scheme="dark"] div.dt-button-collection.dropdown-menu,
html[data-cwisp-scheme="dark"] ul.dt-button-collection.dropdown-menu,
html[data-cwisp-scheme="dark"] body > div.dt-button-collection,
html[data-cwisp-scheme="dark"] #content .dt-button-collection{
  background: var(--cw-surface-panel, #1b2438) !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] div.dt-button-collection .dt-button,
html[data-cwisp-scheme="dark"] div.dt-button-collection .buttons-columnVisibility,
html[data-cwisp-scheme="dark"] ul.dt-button-collection .dt-button,
html[data-cwisp-scheme="dark"] #content .dt-button-collection .dt-button{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(146,168,208,.18) !important;
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] div.dt-button-collection .dt-button:hover,
html[data-cwisp-scheme="dark"] div.dt-button-collection .buttons-columnVisibility:hover,
html[data-cwisp-scheme="dark"] #content .dt-button-collection .dt-button:hover{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  border-color: rgba(var(--cw-accent-rgb),.35) !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] div.dt-button-collection .dt-button.active,
html[data-cwisp-scheme="dark"] div.dt-button-collection .buttons-columnVisibility.active,
html[data-cwisp-scheme="dark"] #content .dt-button-collection .dt-button.active{
  background: rgba(var(--cw-accent-rgb),.22) !important;
  border-color: rgba(var(--cw-accent-rgb),.45) !important;
  color: #fff !important;
}
/* Mismo padding en head/body/foot para que scrollX calcule igual */
#content div.dataTables_wrapper table.dataTable > thead > tr > th,
#content div.dataTables_wrapper table.dataTable > tbody > tr > td,
#content div.dataTables_wrapper table.dataTable > tfoot > tr > th{
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#content div.dataTables_wrapper .dataTables_scrollFoot .form-control,
#content div.dataTables_wrapper table.dataTable tfoot .form-control{
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 30px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}
/* Pie con buscadores: no recortar ni bloquear el foco al escribir */
#content div.dataTables_wrapper table.dataTable tfoot > tr > th:has(input),
#content div.dataTables_wrapper table.dataTable tfoot > tr > th:has(select),
#content .dataTables_scrollFoot th:has(input),
#content .dataTables_scrollFoot th:has(select){
  overflow: visible !important;
}
#content div.dataTables_wrapper .dataTables_filter input{
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}
/* Mientras se escribe en filtros: el overlay del panel no debe tapar inputs */
.panel.cwisp-filter-typing .panel-body .panel-loader,
.panel.cwisp-filter-typing.panel-loading .panel-body .panel-loader{
  pointer-events: none !important;
}
.panel.cwisp-filter-typing table.dataTable tfoot,
.panel.cwisp-filter-typing .dataTables_filter,
.panel.cwisp-filter-typing .cwisp-col-filters{
  position: relative;
  z-index: 20;
}
.panel.cwisp-filter-typing table.dataTable tfoot input.form-control,
.panel.cwisp-filter-typing .dataTables_filter input,
.panel.cwisp-filter-typing .cwisp-col-filters input.form-control,
.panel.cwisp-filter-typing .txt-filtro-a{
  pointer-events: auto !important;
  position: relative;
  z-index: 21;
}

/* Franja de herramientas sobre las tablas (buscar / botones / filtros)
   FIX "botones muy abajo": colombiawisp.css la deja position:absolute sin
   offsets y cae sobre la tabla. Vuelve al flujo, flotada a la izquierda,
   compartiendo la fila superior con el buscador (que flota a la derecha). */
#content div.dataTables_wrapper .tooltablas,
#content .tooltablas{
  position: static !important;
  float: left;
  width: auto !important;
  min-height: 38px;
  margin: 0 0 10px 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  /* Alineación uniforme: todo a la misma altura (38px) y centrado vertical */
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  text-align: left;
}
#content div.dataTables_wrapper .dataTables_filter{
  float: right;
  margin: 0 0 10px;
}
/* La tabla baja limpia debajo de la fila de herramientas */
#content div.dataTables_wrapper table.dataTable{
  clear: both;
}
@media (max-width: 767px){
  #content div.dataTables_wrapper .tooltablas,
  #content .tooltablas{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  #content .cwisp-dt-actions .select2-container{
    margin: 0 !important;
  }
}
#content .tooltablas .grupotabla{
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
#content .tooltablas .grupotabla.cwisp-invoice-create-btns{
  gap: 8px;
}
#content .tooltablas .grupotabla.cwisp-invoice-create-btns > .btn{
  border-radius: 10px !important;
}
#content .tooltablas .btn{
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  margin: 0;
  vertical-align: middle;
}
#content .tooltablas .btn-group > .btn{ border-radius: 0; }
#content .tooltablas .btn-group > .btn:first-of-type{ border-radius: 10px 0 0 10px !important; }
#content .tooltablas .btn-group > .btn:last-of-type{ border-radius: 0 10px 10px 0 !important; }
#content .tooltablas .btn-group > .btn:only-of-type,
#content .tooltablas .btn:not(.btn-group > .btn){ border-radius: 10px; }

/* Select2 dentro de la franja: misma altura y centrado */
#content .tooltablas .select2-container{
  margin: 0 0 0 6px;
  vertical-align: middle;
}
#content .tooltablas .select2-container--default .select2-selection--single{
  height: 38px !important;
  display: flex;
  align-items: center;
}
#content .tooltablas .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: normal;
  padding-left: 12px;
}
#content .tooltablas .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 36px !important;
}

/* Selects nativos en la franja */
#content .tooltablas select.form-control{
  height: 38px !important;
  width: auto;
  min-width: 150px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Buscador de DataTables: pill alineada con los botones */
#content div.dataTables_wrapper .dataTables_filter label{
  display: flex;
  align-items: center;
  gap: 8px;
}
#content div.dataTables_wrapper .dataTables_filter input{
  margin-left: 0 !important;
}

/* DataTables: selects y buscador coherentes (con borde visible) */
#content .dataTables_length select,
#content div.dataTables_wrapper .dataTables_filter input{
  margin-left: 6px;
  background: var(--cw-surface-subtle);
  border: 1px solid var(--cw-input-border, var(--cw-border)) !important;
  border-radius: 10px;
  color: var(--cw-text);
  padding: 6px 10px;
  box-shadow: none !important;
}
#content .dataTables_length select:focus,
#content div.dataTables_wrapper .dataTables_filter input:focus{
  background: var(--cw-card-bg);
  border-color: var(--cw-accent) !important;
  outline: none;
}
#content .dataTables_info{ color: var(--cw-text-muted); font-size: 11.5px; }


/* ==========================================================================
   13. Login — tarjeta de cristal sobre el fondo fotográfico
   ========================================================================== */
.login.login-v2 .login-content,
.cwisp-login .login-content{
  background: rgba(10,15,28,.58) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10);
  padding: 30px 36px 26px !important;
  overflow: hidden;
  position: relative;
}
/* Franja de acento superior en la tarjeta */
.login.login-v2 .login-content::before,
.cwisp-login .login-content::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cw-accent) 0%,
    rgba(var(--cw-accent-rgb),.5) 45%,
    rgba(var(--cw-accent-rgb),0) 90%);
}

.login.login-v2 .login-header .brand,
.cwisp-login .login-header .brand{
  text-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.login.login-v2 .login-header,
.cwisp-login .login-header{
  margin-bottom: 36px !important;
  padding-bottom: 12px;
}
.login.login-v2 .login-header .brand,
.cwisp-login .login-header .brand{
  margin-bottom: 10px;
}
.login.login-v2 .login-header .icon,
.cwisp-login .login-header .icon{
  opacity: .55 !important;
  margin-top: 10px;
  margin-bottom: 8px;
}
.login.login-v2 .login-content,
.cwisp-login .login-content{
  margin-top: 20px !important;
}

.login.login-v2 .form-control,
.cwisp-login .form-control{
  border-radius: 12px !important;
  height: 48px;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login.login-v2 .form-control:focus,
.cwisp-login .form-control:focus{
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb),.28) !important;
  background: rgba(0,0,0,.62) !important;
  color: #fff;
}

.login.login-v2 .btn-primary,
.cwisp-login .btn-primary{
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}
.login.login-v2 a,
.cwisp-login a{ color: var(--cw-accent); }
.login.login-v2 a:hover,
.cwisp-login a:hover{ color: var(--cw-accent-dark); text-decoration: none; }

/* Modal de recuperación dentro del login */
.login .modal-content,
.cwisp-login .modal-content{ color: var(--cw-text); }


/* ==========================================================================
   14. Autocompletado jQuery UI, scrollbars y detalles finales
   ========================================================================== */
.ui-autocomplete.ui-widget-content{
  border-radius: 12px !important;
  border: 1px solid var(--cw-border) !important;
  box-shadow: var(--cw-shadow-lg) !important;
  padding: 6px;
  background: var(--cw-card-bg) !important;
  z-index: 1060 !important;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a{
  border-radius: 8px !important;
  padding: 8px 12px !important;
  border: none !important;
  color: var(--cw-text) !important;
  background: transparent !important;
}
.ui-autocomplete .ui-menu-item .ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item .ui-state-focus,
.ui-autocomplete .ui-menu-item a:hover{
  background: rgba(var(--cw-accent-rgb),.10) !important;
  color: var(--cw-accent) !important;
  border: none !important;
  margin: 0 !important;
}

/* Scrollbars finas con acento al pasar el mouse */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: rgba(100,116,139,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(var(--cw-accent-rgb),.55);
  border: 2px solid transparent;
  background-clip: content-box;
}
:root[data-cwisp-scheme="dark"] *::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.28);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Footer */
#footer.footer{
  color: var(--cw-text-muted);
  font-size: 11.5px;
}

/* Datetimepicker en modales: overflow:hidden de .modal-content lo recortaba. */
.modal-content.cwisp-dtp-open,
.modal-content.cwisp-dtp-open > form{
  overflow: visible !important;
}
.modal-content.cwisp-dtp-open .modal-body{
  overflow: visible !important;
}
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu{
  z-index: 2000 !important;
}

/* Gritter (notificaciones) — por encima de modales (1300).
   colombiawisp.css fuerza width:371px y z-index:1070; hay que ganar con body. */
body #gritter-notice-wrapper,
#gritter-notice-wrapper{
  z-index: 1400 !important;
  position: fixed !important;
}
body #gritter-notice-wrapper .gritter-item-wrapper,
.gritter-item-wrapper{
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg) !important;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 767px){
  body #gritter-notice-wrapper,
  #gritter-notice-wrapper{
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    z-index: 1400 !important;
  }
  body #gritter-notice-wrapper .gritter-item-wrapper,
  #gritter-notice-wrapper .gritter-item-wrapper{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
  }
  body #gritter-notice-wrapper .gritter-item,
  #gritter-notice-wrapper .gritter-item{
    padding: 12px 36px 12px 14px !important;
    box-sizing: border-box;
  }
  body #gritter-notice-wrapper .gritter-with-image,
  #gritter-notice-wrapper .gritter-with-image{
    padding-left: 14px !important;
  }
  body #gritter-notice-wrapper .gritter-image,
  #gritter-notice-wrapper .gritter-image{
    display: none !important; /* libera ancho en pantallas chicas */
  }
  body #gritter-notice-wrapper .gritter-title,
  body #gritter-notice-wrapper .gritter-without-image .gritter-item p,
  body #gritter-notice-wrapper .gritter-item p,
  #gritter-notice-wrapper .gritter-title,
  #gritter-notice-wrapper .gritter-without-image .gritter-item p,
  #gritter-notice-wrapper .gritter-item p{
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    padding-right: 0 !important;
  }
  body #gritter-notice-wrapper .gritter-close,
  #gritter-notice-wrapper .gritter-close{
    left: auto !important;
    right: 8px !important;
    top: 8px !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Switches del theme panel / settings */
.switchery{
  border-radius: 999px !important;
}

/* Utilidades */
.text-muted{ color: var(--cw-text-muted) !important; }
a{ transition: color .15s ease; }

/* ==========================================================================
   15. Ajustes específicos de modo oscuro
   ========================================================================== */
/* Badges/labels: fondo más fuerte + texto brillante + borde visible */
:root[data-cwisp-scheme="dark"] .label,
:root[data-cwisp-scheme="dark"] .badge{ font-weight: 800; }
:root[data-cwisp-scheme="dark"] .label-success,
:root[data-cwisp-scheme="dark"] .badge-success{
  background: rgba(var(--cw-success-rgb, 88,201,133),.24) !important;
  color: #9df2bd !important;
  border-color: rgba(var(--cw-success-rgb, 88,201,133),.45) !important;
}
:root[data-cwisp-scheme="dark"] .label-danger,
:root[data-cwisp-scheme="dark"] .badge-danger{
  background: rgba(var(--cw-danger-rgb, 255,123,134),.22) !important;
  color: #ffb3ba !important;
  border-color: rgba(var(--cw-danger-rgb, 255,123,134),.45) !important;
}
:root[data-cwisp-scheme="dark"] .label-warning,
:root[data-cwisp-scheme="dark"] .badge-warning{
  background: rgba(var(--cw-warning-rgb, 242,184,75),.22) !important;
  color: #ffdd9e !important;
  border-color: rgba(var(--cw-warning-rgb, 242,184,75),.45) !important;
}
:root[data-cwisp-scheme="dark"] .label-info,
:root[data-cwisp-scheme="dark"] .badge-info{
  background: rgba(var(--cw-info-rgb, 117,191,255),.22) !important;
  color: #a8ddff !important;
  border-color: rgba(var(--cw-info-rgb, 117,191,255),.45) !important;
}
:root[data-cwisp-scheme="dark"] .label-primary,
:root[data-cwisp-scheme="dark"] .badge-primary{
  background: rgba(var(--cw-accent-rgb),.24) !important;
  color: #b9d9ff !important;
  border-color: rgba(var(--cw-accent-rgb),.48) !important;
}
:root[data-cwisp-scheme="dark"] .label-default,
:root[data-cwisp-scheme="dark"] .badge-default{
  background: rgba(255,255,255,.10) !important;
  color: #c7d2e0 !important;
  border-color: rgba(255,255,255,.18) !important;
}
:root[data-cwisp-scheme="dark"] .label-inverse,
:root[data-cwisp-scheme="dark"] .badge-inverse{
  background: rgba(255,255,255,.16) !important;
  color: #eef3fa !important;
  border-color: rgba(255,255,255,.24) !important;
}

/* Enlaces (columnas clickeables, seleccionables, etc.): más brillantes en oscuro.
   !important necesario: colombiawisp.css fija `td a { color:#333 !important }`. */
html[data-cwisp-scheme="dark"] #content .table a:not(.btn),
html[data-cwisp-scheme="dark"] #content table.table-bordered.dataTable tbody td a:not(.btn),
html[data-cwisp-scheme="dark"] #content table.dataTable tbody td a:not(.btn),
html[data-cwisp-scheme="dark"] #content .panel-body a:not(.btn),
html[data-cwisp-scheme="dark"] #content .page-header a:not(.btn),
html[data-cwisp-scheme="dark"] #content .breadcrumb a{
  color: #8fc6ff !important;
  color: color-mix(in srgb, var(--cw-accent) 58%, #ffffff) !important;
  font-weight: 600;
}
html[data-cwisp-scheme="dark"] #content .table a:not(.btn):hover,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody td a:not(.btn):hover,
html[data-cwisp-scheme="dark"] #content .panel-body a:not(.btn):hover,
html[data-cwisp-scheme="dark"] #content .breadcrumb a:hover{
  color: #c3dfff !important;
  color: color-mix(in srgb, var(--cw-accent) 38%, #ffffff) !important;
}

/* Textos secundarios: subir contraste en oscuro */
html[data-cwisp-scheme="dark"] #content .text-muted{
  color: #b9c4d4 !important;
}

:root[data-cwisp-scheme="dark"] #content .alert-success{ color: #7ce3a0 !important; }
:root[data-cwisp-scheme="dark"] #content .alert-danger { color: #ff9aa4 !important; }
:root[data-cwisp-scheme="dark"] #content .alert-warning{ color: #ffd08a !important; }
:root[data-cwisp-scheme="dark"] #content .alert-info   { color: #93e0f4 !important; }
:root[data-cwisp-scheme="dark"] #content .alert-secondary{
  color: #c3cddc !important;
  background: rgba(146,168,208,.10) !important;
  border-left-color: #8fa3bf !important;
}

:root[data-cwisp-scheme="dark"] #header.header{
  box-shadow: 0 10px 34px rgba(0,0,0,.40);
}

:root[data-cwisp-scheme="dark"] .dropdown-menu,
:root[data-cwisp-scheme="dark"] .ui-autocomplete.ui-widget-content{
  background: var(--cw-surface-raised) !important;
}

/* ==========================================================================
   16. Gráficas del home (widget-chart inverse-mode): fondo oscuro real
   --------------------------------------------------------------------------
   El widget fue diseñado como panel oscuro; en modo oscuro quedaba gris
   claro y las series/etiquetas perdían contraste. Se restaura el fondo
   navy en AMBOS modos y se aclaran series, rejilla y textos del SVG.
   ========================================================================== */
#content .widget-chart .widget-chart-content,
#content .widget-chart .widget-chart-content.bg-dark,
#content .widget-chart.inverse-mode .widget-chart-content{
  background: linear-gradient(165deg, #16203a 0%, #0e1526 100%) !important;
  color: #eef2f9;
  border-radius: var(--cw-radius-lg) !important;
}
#content .widget-chart .chart-title,
#content .widget-chart .chart-title small{
  color: #eef2f9 !important;
}
#content .widget-chart .chart-title small{
  color: rgba(238,242,249,.55) !important;
}

/* Sidebar del widget-chart: un tono más profundo */
#content .widget-chart .widget-chart-sidebar,
#content .widget-chart .widget-chart-sidebar.bg-dark-darker{
  background: #0b1120 !important;
  color: rgba(238,242,249,.82);
}

/* Textos y rejilla del SVG (Morris/nvd3): legibles sobre navy */
#content .widget-chart svg text,
.cwisp-home svg.nvd3-svg text,
#content .donut-trafico svg text{
  fill: rgba(235,240,250,.66) !important;
}
#content .widget-chart svg path[stroke="#eee"],
#content .widget-chart svg path[stroke="#eeeeee"],
#content .widget-chart svg line[stroke="#eee"],
#content .widget-chart svg line[stroke="#eeeeee"],
#content .widget-chart svg path[stroke="#ddd"],
#content .widget-chart svg path[stroke="#dddddd"]{
  stroke: rgba(255,255,255,.10) !important;
}

/* Series azul/teal: versión brillante para fondos oscuros */
#content .widget-chart svg [stroke="#348fe2"],
#content .widget-chart svg [stroke="#348FE2"],
.cwisp-home svg [stroke="#348fe2"],
.cwisp-home svg [stroke="#348FE2"]{ stroke: #5eb0ff !important; }
#content .widget-chart svg [fill="#348fe2"],
#content .widget-chart svg [fill="#348FE2"],
.cwisp-home svg [fill="#348fe2"],
.cwisp-home svg [fill="#348FE2"]{ fill: #5eb0ff !important; }
#content .widget-chart svg [stroke="#00acac"],
#content .widget-chart svg [stroke="#00ACAC"],
.cwisp-home svg [stroke="#00acac"],
.cwisp-home svg [stroke="#00ACAC"]{ stroke: #2fd6ce !important; }
#content .widget-chart svg [fill="#00acac"],
#content .widget-chart svg [fill="#00ACAC"],
.cwisp-home svg [fill="#00acac"],
.cwisp-home svg [fill="#00ACAC"]{ fill: #2fd6ce !important; }

/* Tooltip de Morris sobre el panel oscuro */
#content .morris-hover{
  background: rgba(10,15,28,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  color: #eef2f9 !important;
  box-shadow: var(--cw-shadow-lg);
}
#content .morris-hover.morris-default-style .morris-hover-row-label,
#content .morris-hover.morris-default-style .morris-hover-point{
  color: #eef2f9 !important;
}

/* Leyenda del donut: texto claro */
#content .widget-chart .chart-legend,
#content .widget-chart .chart-legend span{
  color: rgba(238,242,249,.78) !important;
}

/* ==========================================================================
   Checkboxes nativos legibles en modo oscuro (tablas con selección masiva)
   El root declara color-scheme:dark → la caja nativa sale negra e invisible
   sobre filas oscuras. Se fuerza color-scheme light: caja blanca + check acento.
   ========================================================================== */
html[data-cwisp-scheme="dark"] #content input[type="checkbox"],
html[data-cwisp-scheme="dark"] #content input[type="radio"],
html[data-cwisp-scheme="dark"] .modal input[type="checkbox"],
html[data-cwisp-scheme="dark"] .modal input[type="radio"]{
  color-scheme: light;
  accent-color: var(--cw-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
/* Los .checkbox-css dibujan su propia caja con el label; no inflar el input */
html[data-cwisp-scheme="dark"] .checkbox.checkbox-css input[type="checkbox"],
html[data-cwisp-scheme="dark"] .checkbox.checkbox-css input[type="radio"]{
  width: auto;
  height: auto;
}

/* ==========================================================================
   Botones de tablas — export (dt-buttons) + acciones de fila
   ========================================================================== */
/* Altura unificada con el resto de la franja (38px) en ambos modos */
#content .dt-buttons .btn,
#content .dt-buttons button,
#content .dt-buttons a{
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Oscuro: chips fantasma coherentes con el resto de la UI */
html[data-cwisp-scheme="dark"] #content .dt-buttons .btn,
html[data-cwisp-scheme="dark"] #content .dt-buttons button,
html[data-cwisp-scheme="dark"] #content .dt-buttons a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(170,190,225,.24) !important;
  color: #dbe4f3 !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] #content .dt-buttons .btn:hover,
html[data-cwisp-scheme="dark"] #content .dt-buttons button:hover,
html[data-cwisp-scheme="dark"] #content .dt-buttons a:hover{
  background: rgba(var(--cw-accent-rgb),.20) !important;
  border-color: rgba(var(--cw-accent-rgb),.55) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
/* Acciones de fila (iconos): fantasma oscuro con tinte acento al hover */
html[data-cwisp-scheme="dark"] #content table .btn.btn-icon,
html[data-cwisp-scheme="dark"] #content table .btn.btn-default,
html[data-cwisp-scheme="dark"] #content table .btn.btn-white{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(170,190,225,.20) !important;
  color: #d5deee !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] #content table .btn.btn-icon:hover,
html[data-cwisp-scheme="dark"] #content table .btn.btn-default:hover,
html[data-cwisp-scheme="dark"] #content table .btn.btn-white:hover{
  background: rgba(var(--cw-accent-rgb),.22) !important;
  border-color: rgba(var(--cw-accent-rgb),.55) !important;
  color: #ffffff !important;
}
/* Peligro: tinte rojo legible en oscuro */
html[data-cwisp-scheme="dark"] #content table .btn.btn-danger{
  background: rgba(236,69,90,.16) !important;
  border: 1px solid rgba(236,69,90,.38) !important;
  color: #ff8fa3 !important;
}
html[data-cwisp-scheme="dark"] #content table .btn.btn-danger:hover{
  background: rgba(236,69,90,.34) !important;
  border-color: rgba(236,69,90,.60) !important;
  color: #ffffff !important;
}
/* Info de paginación ("Mostrando registros...") legible en oscuro */
html[data-cwisp-scheme="dark"] #content div.dataTables_wrapper .dataTables_info,
html[data-cwisp-scheme="dark"] #content div.dataTables_wrapper .dataTables_length label{
  color: rgba(214,224,240,.72) !important;
}

/* ==========================================================================
   Fondos claros "duros" en modo oscuro (.bg-white / .bg-light) + text-inverse
   Caso: /admin#ajax/trafico usa <div class="tab-content ... bg-white"> y queda
   gris claro en oscuro. Se mapea a la superficie del tema.
   ========================================================================== */
html[data-cwisp-scheme="dark"] #content .bg-white,
html[data-cwisp-scheme="dark"] .modal .bg-white{
  background-color: var(--cw-surface-panel) !important;
  color: #e6ecf7;
}
html[data-cwisp-scheme="dark"] #content .bg-light,
html[data-cwisp-scheme="dark"] .modal .bg-light{
  background-color: rgba(255,255,255,.05) !important;
  color: #e6ecf7;
}
/* text-inverse = "texto oscuro para fondo claro": en oscuro debe invertirse */
html[data-cwisp-scheme="dark"] #content .text-inverse,
html[data-cwisp-scheme="dark"] .modal .text-inverse,
html[data-cwisp-scheme="dark"] .theme-panel .text-inverse,
html[data-cwisp-scheme="dark"] .noty-panel .text-inverse{
  color: #e8edf7 !important;
}
/* Panel de tema (Diseño y Colores) y panel de notificaciones en oscuro */
html[data-cwisp-scheme="dark"] .theme-panel,
html[data-cwisp-scheme="dark"] .theme-panel .theme-panel-content,
html[data-cwisp-scheme="dark"] .noty-panel,
html[data-cwisp-scheme="dark"] .noty-panel .theme-panel-content{
  background: #1a2338 !important;
  color: #e6ecf7;
}
html[data-cwisp-scheme="dark"] .theme-panel h5,
html[data-cwisp-scheme="dark"] .theme-panel .control-label,
html[data-cwisp-scheme="dark"] .theme-panel label{
  color: #e8edf7 !important;
}

/* ==========================================================================
   Select2 en modo oscuro — texto seleccionado, flecha, buscador y opciones
   (la caja ya era oscura pero el texto quedaba #333: ilegible)
   ========================================================================== */
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: rgba(214,224,240,.55) !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-top-color: rgba(220,229,244,.75) !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-bottom-color: rgba(220,229,244,.75) !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field{
  background: rgba(255,255,255,.06) !important;
  color: #eef2fa !important;
  border-color: rgba(146,168,208,.25) !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown,
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results > .select2-results__options{
  color: #eef2fa !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results__option{
  color: #eef2fa !important;
  background-color: transparent;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background: rgba(var(--cw-accent-rgb),.28) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results__option--selected,
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results__option[aria-selected="true"]{
  background: rgba(var(--cw-accent-rgb),.38) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"]{
  color: rgba(238,242,250,.45) !important;
}
/* Chips de selección múltiple */
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: rgba(var(--cw-accent-rgb),.22) !important;
  border-color: rgba(var(--cw-accent-rgb),.45) !important;
  color: #eef2fa !important;
}
html[data-cwisp-scheme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color: rgba(238,242,250,.75) !important;
}

/* ==========================================================================
   TANDA 3 — Loader de navegación, Ajustes, tablas planas, mapa, OpenVPN,
   dropdowns globales y rediseño oscuro del chat de WhatsApp
   ========================================================================== */

/* ── Loader de navegación AJAX: elimina el flash blanco en modo oscuro ──────
   El router vacía #content y muestra #page-content-loader con fondo
   rgba(255,255,255,.94) a pantalla completa (colombiawisp.css ~2944). */
html[data-cwisp-scheme="dark"] body.page-content-loading #page-content-loader.cwisp-content-loader{
  background: rgba(11,18,32,.94) !important;
}
html[data-cwisp-scheme="dark"] #page-content-loader .cwisp-loader-text,
html[data-cwisp-scheme="dark"] .cwisp-inline-loader .cwisp-loader-text{
  color: rgba(230,237,249,.85) !important;
}

/* ── Botones de Ajustes (.btnajustes): ícono ARRIBA del texto ──────────────
   El inline-flex global los ponía en fila (ícono al lado, <br> roto).
   Se fuerza columna y se oculta el <br> (ahora un <br> en flex no aporta). */
#content .btnajustes.btn{
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0;
}
#content .btnajustes.btn > br{ display: none; }
#content .btnajustes.btn > i{ margin: 0 0 8px !important; }
/* Grid de Ajustes: repartir el ancho (sin hueco muerto a la derecha) */
#content .cwisp-ajustes-grid,
#content .row.cwisp-ajustes-grid,
#content .row:has(> .btnajustes){
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: flex-start;
  gap: 12px 8px;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#content .cwisp-ajustes-grid::before,
#content .cwisp-ajustes-grid::after,
#content .row.cwisp-ajustes-grid::before,
#content .row.cwisp-ajustes-grid::after,
#content .row:has(> .btnajustes)::before,
#content .row:has(> .btnajustes)::after{
  content: none !important;
  display: none !important;
}
#content .cwisp-ajustes-grid > .btnajustes,
#content .row.cwisp-ajustes-grid > .btnajustes,
#content .row:has(> .btnajustes) > .btnajustes{
  float: none !important;
  margin: 8px 6px !important;
  flex: 0 0 auto;
}
html[data-cwisp-scheme="dark"] #content .btnajustes.btn.btn-white{
  background: linear-gradient(168deg, rgba(40,50,78,.55), rgba(25,33,53,.68)) !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  color: #dbe4f3 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
html[data-cwisp-scheme="dark"] #content .btnajustes.btn.btn-white:hover{
  border-color: rgba(var(--cw-accent-rgb),.55) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}
html[data-cwisp-scheme="dark"] #content .btnajustes.btn.btn-white > i{
  color: #8fc6ff !important;
}

/* ── Tablas planas (no DataTables) en modo oscuro ──────────────────────────
   Ej.: tablas del asistente/bot y kardex: rayas claras, texto y bordes
   pensados para fondo blanco. */
html[data-cwisp-scheme="dark"] #content .panel-body .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content .panel-body .table > tbody > tr > th{
  color: rgba(228,235,248,.88);
  border-top-color: rgba(146,168,208,.14);
}
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(odd){
  background-color: rgba(255,255,255,.035);
}
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(even){
  background-color: transparent;
}
html[data-cwisp-scheme="dark"] #content .table-bordered,
html[data-cwisp-scheme="dark"] #content .table-bordered > thead > tr > th,
html[data-cwisp-scheme="dark"] #content .table-bordered > tbody > tr > td{
  border-color: rgba(146,168,208,.18);
}
html[data-cwisp-scheme="dark"] #content .table > thead > tr > th{
  border-bottom-color: rgba(146,168,208,.20);
}
html[data-cwisp-scheme="dark"] #content .table-hover > tbody > tr:hover{
  background-color: rgba(var(--cw-accent-rgb),.10);
}
html[data-cwisp-scheme="dark"] #content .panel-body .table a:not(.btn){
  color: #8fc6ff;
}
/* <code> (huellas del bot): rosa Bootstrap ilegible en oscuro */
html[data-cwisp-scheme="dark"] #content code{
  background: rgba(146,168,208,.12);
  color: #9fd0ff;
  border: 1px solid rgba(146,168,208,.16);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ── panel-body.border (kardex): el borde sale blanco en oscuro ──────────── */
html[data-cwisp-scheme="dark"] #content .panel .panel-body.border{
  border-color: rgba(146,168,208,.20) !important;
}

/* ── top-filter (tráfico): franja clara en oscuro ────────────────────────── */
html[data-cwisp-scheme="dark"] #content .top-filter{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(146,168,208,.16);
  border-radius: var(--cw-radius-md, 12px);
  color: #dbe4f3;
}

/* ── Mapa (/ajax/mapa): panel de filtros oscuro + mapa atenuado ──────────── */
html[data-cwisp-scheme="dark"] #content .map-btn{
  background: rgba(18,26,44,.88) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #dbe4f3 !important;
  border: 1px solid rgba(146,168,208,.22);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.40);
}
html[data-cwisp-scheme="dark"] #content .map-btn label,
html[data-cwisp-scheme="dark"] #content .map-btn b{
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] #content .map-btn .form-control{
  background: rgba(255,255,255,.07);
  border-color: rgba(146,168,208,.28);
  color: #e8edf7;
}
/* El lienzo del mapa se deja en colores naturales: el invert dejaba
   las teselas como un negativo ilegible. */
html[data-cwisp-scheme="dark"] #content #google-map-default,
html[data-cwisp-scheme="dark"] #content .map .height-full{
  filter: none;
}

/* ── Tarjeta de estado OpenVPN ───────────────────────────────────────────── */
html[data-cwisp-scheme="dark"] #content .openvpn-status-card{
  background: linear-gradient(168deg, #222c47 0%, #1a2338 100%) !important;
  border-color: rgba(146,168,208,.20) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35) !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-status-card .openvpn-status-title{
  color: #eef3fb !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-status-card .openvpn-status-icon{
  background: rgba(255,193,7,.14) !important;
  color: #ffcf5c !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-status-card.is-ok .openvpn-status-icon{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: #5fd4d4 !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-status-card.is-error .openvpn-status-icon{
  background: rgba(255,91,87,.14) !important;
  color: #ff8a86 !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-pill{
  background: rgba(255,255,255,.07) !important;
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-pill.is-ok{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: #5fd4d4 !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-pill.is-bad{
  background: rgba(255,91,87,.14) !important;
  color: #ff8a86 !important;
}
html[data-cwisp-scheme="dark"] #content .openvpn-status-card .btn.btn-white{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(170,190,225,.24) !important;
  color: #d5deee !important;
  box-shadow: none !important;
}

/* ── Separador de fechas (ipvisitadas) ───────────────────────────────────── */
html[data-cwisp-scheme="dark"] #content #ipvisit-date-filter .ipvisit-date-separator{
  background: rgba(255,255,255,.06) !important;
  border-top-color: rgba(146,168,208,.25) !important;
  border-bottom-color: rgba(146,168,208,.25) !important;
  color: #dbe4f3 !important;
}

/* ── Botón lengüeta del panel de tema ────────────────────────────────────── */
html[data-cwisp-scheme="dark"] .theme-panel .theme-collapse-btn,
html[data-cwisp-scheme="dark"] .theme-panel .theme-collapse-btn:hover,
html[data-cwisp-scheme="dark"] .theme-panel .theme-collapse-btn:focus{
  background: #1a2338 !important;
  color: #9fb4d8 !important;
  border-color: rgba(146,168,208,.25) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ── Dropdowns GLOBALES en oscuro (notificaciones del header, menú usuario,
   menú de control del chat, etc.) ────────────────────────────────────────── */
html[data-cwisp-scheme="dark"] .dropdown-menu{
  background: #1c2539 !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.50);
  color: #dbe4f3;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item,
html[data-cwisp-scheme="dark"] .dropdown-menu > li > a{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item:focus,
html[data-cwisp-scheme="dark"] .dropdown-menu > li > a:hover,
html[data-cwisp-scheme="dark"] .dropdown-menu > li > a:focus{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-header{
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(146,168,208,.18) !important;
  color: #9fb4d8 !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .media-heading{
  color: #e8eef8 !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .text-muted{
  color: rgba(200,214,238,.60) !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .divider,
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-divider{
  background: rgba(146,168,208,.16) !important;
  border-top-color: rgba(146,168,208,.16) !important;
}
/* El bloque "NOTIFICACIONES" es un <div> hijo directo del <ul> */
html[data-cwisp-scheme="dark"] .dropdown-menu.media-list > .dropdown-header{
  margin: 0;
  padding: 10px 15px;
}

/* ==========================================================================
   CHAT DE WHATSAPP (#ajax/w) — rediseño completo en modo oscuro
   La vista trae su propio <style> con la paleta clásica clara de WhatsApp;
   aquí se remapea a la paleta Nebula solamente bajo html[data-cwisp-scheme=dark].
   ========================================================================== */
html[data-cwisp-scheme="dark"] #content #frame{
  background: #111b21 !important;
  border: 1px solid #2a3942;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0,0,0,.50) !important;
}
/* Panel lateral */
html[data-cwisp-scheme="dark"] #frame #sidepanel{
  background: #111b21 !important;
  color: #e9edef !important;
  border-right: 1px solid #222d34;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #profile{
  background: #202c33 !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #profile .wrap,
html[data-cwisp-scheme="dark"] #frame #sidepanel #profile .wrap p{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #search{
  background: #111b21 !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #search label{
  background: #202c33 !important;
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #search input{
  background: #202c33 !important;
  color: #e9edef !important;
  border-color: transparent !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #search input:focus{
  background: #2a3942 !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #search input::placeholder{
  color: #667781 !important;
}
html[data-cwisp-scheme="dark"] .loadingchat{
  background: rgba(17, 27, 33, .92) !important;
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] .wa-list-filters{
  background: #111b21 !important;
  border-bottom-color: #222d34 !important;
}
html[data-cwisp-scheme="dark"] .wa-list-filters button,
html[data-cwisp-scheme="dark"] #wa-tag-filter{
  background: #202c33 !important;
  color: #8696a0 !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-container,
html[data-cwisp-scheme] #frame .wa-list-filters .wa-tag-filter-select2,
#frame .wa-list-filters .select2-container,
#frame .wa-list-filters .wa-tag-filter-select2{
  flex: 0 0 118px !important;
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-container--default .select2-selection--single,
html[data-cwisp-scheme] #frame .wa-list-filters .wa-tag-filter-select2 .select2-selection--single,
#frame .wa-list-filters .select2-container--default .select2-selection--single,
#frame .wa-list-filters .wa-tag-filter-select2 .select2-selection--single{
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--wa-shell, #f0f2f5) !important;
  box-shadow: none !important;
  outline: none !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-container--focus .select2-selection--single,
html[data-cwisp-scheme] #frame .wa-list-filters .select2-container--open .select2-selection--single,
#frame .wa-list-filters .select2-container--focus .select2-selection--single,
#frame .wa-list-filters .select2-container--open .select2-selection--single{
  border: 0 !important;
  box-shadow: none !important;
  background: #d9fdd3 !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-selection__rendered,
#frame .wa-list-filters .select2-selection__rendered{
  padding: 0 22px 0 10px !important;
  color: var(--wa-muted, #667781) !important;
  font-size: 12px !important;
  line-height: 26px !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-selection__placeholder,
#frame .wa-list-filters .select2-selection__placeholder{
  color: var(--wa-muted, #667781) !important;
}
html[data-cwisp-scheme] #frame .wa-list-filters .select2-selection__arrow,
#frame .wa-list-filters .select2-selection__arrow{
  height: 26px !important;
  top: 0 !important;
  right: 4px !important;
}
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-container--default .select2-selection--single,
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .wa-tag-filter-select2 .select2-selection--single{
  background: #202c33 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-container--focus .select2-selection--single,
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-container--open .select2-selection--single{
  background: #005c4b !important;
}
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-selection__rendered,
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-selection__placeholder{
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-container--open .select2-selection__rendered,
html[data-cwisp-scheme="dark"] #frame .wa-list-filters .select2-container--open .select2-selection__placeholder{
  color: #d9fdd3 !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.wa-tag-filter-dropdown{
  background: #202c33 !important;
  border-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.wa-tag-filter-dropdown .select2-search__field{
  background: #111b21 !important;
  border-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.wa-tag-filter-dropdown .select2-results__option{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.wa-tag-filter-dropdown .select2-results__option--highlighted{
  background: #005c4b !important;
  color: #d9fdd3 !important;
}
html[data-cwisp-scheme="dark"] .wa-list-filters button.active{
  background: #005c4b !important;
  color: #d9fdd3 !important;
}
/* Lista de conversaciones */
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact{
  background: transparent !important;
  border-bottom-color: rgba(146,168,208,.10) !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact::after{
  background: rgba(146,168,208,.10) !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact:hover{
  background: rgba(255,255,255,.05) !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact.active{
  background: rgba(var(--cw-accent-rgb),.16) !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact .wrap .meta .name{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #contacts ul li.contact .wrap .meta .preview{
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #bottom-bar{
  background: #202c33 !important;
}
html[data-cwisp-scheme="dark"] #frame #sidepanel #bottom-bar button{
  color: #8696a0 !important;
}
/* Cabecera del chat */
html[data-cwisp-scheme="dark"] #frame .content{
  background: #0b141a !important;
}
html[data-cwisp-scheme="dark"] #frame .content .contact-profile{
  background: #202c33 !important;
  border-bottom: 1px solid #2a3942;
}
html[data-cwisp-scheme="dark"] #frame .content .contact-profile p,
html[data-cwisp-scheme="dark"] #frame .content .contact-profile .wa-chat-title,
html[data-cwisp-scheme="dark"] #frame .content .contact-profile .wa-chat-contact,
html[data-cwisp-scheme="dark"] #frame .content .contact-profile strong{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #frame .content .contact-profile small,
html[data-cwisp-scheme="dark"] #frame .content .contact-profile .wa-control-subline{
  color: #8696a0 !important;
}
/* Área de mensajes */
html[data-cwisp-scheme="dark"] #frame .content .messages{
  background: #0b141a !important;
  background-image: radial-gradient(rgba(233,237,239,.04) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}
html[data-cwisp-scheme="dark"] #frame .content .messages ul li{
  color: #e9edef;
}
html[data-cwisp-scheme="dark"] #frame .content .messages ul li.sent p{
  background: #005c4b !important;
  color: #e9edef !important;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.13) !important;
}
html[data-cwisp-scheme="dark"] #frame .content .messages ul li.replies p{
  background: #202c33 !important;
  color: #e9edef !important;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.13) !important;
}
html[data-cwisp-scheme="dark"] #frame .content .messages ul li p a{
  color: #53bdeb !important;
}
html[data-cwisp-scheme="dark"] .bubble-arrow:after{
  border-top-color: #202c33 !important;
}
html[data-cwisp-scheme="dark"] .bubble-arrow.alt:after{
  border-top-color: #005c4b !important;
}
html[data-cwisp-scheme="dark"] .wa-sender{
  color: #99ceb6 !important;
}
html[data-cwisp-scheme="dark"] .wa-message-time,
html[data-cwisp-scheme="dark"] #frame .content .messages .wa-status{
  color: rgba(220,229,244,.60) !important;
}
html[data-cwisp-scheme="dark"] .wa-retry-template{
  color: #8fc6ff !important;
  border-color: rgba(143,198,255,.45) !important;
}
html[data-cwisp-scheme="dark"] .wa-retry-template:hover{
  background: rgba(143,198,255,.12) !important;
}
/* Barra de control (bot/humano) */
html[data-cwisp-scheme="dark"] .wa-control-bar{
  background: rgba(255,255,255,.05) !important;
  color: #d7e0f0 !important;
  border-top: 1px solid rgba(146,168,208,.14);
}
html[data-cwisp-scheme="dark"] .wa-control-bar.is-human{
  background: rgba(73,182,214,.14) !important;
  color: #9fd8ec !important;
}
html[data-cwisp-scheme="dark"] .wa-control-bar.is-pending{
  background: rgba(245,156,26,.14) !important;
  color: #ffcf7a !important;
}
html[data-cwisp-scheme="dark"] .wa-control-status,
html[data-cwisp-scheme="dark"] .wa-control-countdown{
  color: inherit !important;
}
/* Caja de redacción */
html[data-cwisp-scheme="dark"] #frame .content .message-input,
html[data-cwisp-scheme="dark"] .wa-compose-shell{
  background: #202c33 !important;
  border-left-color: #2a3942 !important;
  border-top: 1px solid #2a3942;
}
html[data-cwisp-scheme="dark"] #frame .content .message-input input,
html[data-cwisp-scheme="dark"] #frame .content .message-input textarea,
html[data-cwisp-scheme="dark"] .wa-compose-shell input,
html[data-cwisp-scheme="dark"] .wa-compose-shell textarea{
  background: rgba(255,255,255,.07) !important;
  color: #eef2fa !important;
  border-color: transparent !important;
}
html[data-cwisp-scheme="dark"] #frame .content .message-input input::placeholder,
html[data-cwisp-scheme="dark"] .wa-compose-shell input::placeholder{
  color: rgba(200,214,238,.45) !important;
}
html[data-cwisp-scheme="dark"] .wa-compose-action{
  color: rgba(200,214,238,.70) !important;
}
html[data-cwisp-scheme="dark"] .wa-compose-action:hover{
  color: #ffffff !important;
}
/* Botones de ícono del chat */
html[data-cwisp-scheme="dark"] .wa-icon-button{
  background: transparent !important;
  color: rgba(200,214,238,.75) !important;
}
html[data-cwisp-scheme="dark"] .wa-icon-button:hover{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] #wa-filter-pending.active{
  background: rgba(var(--cw-accent-rgb),.25) !important;
  color: #ffffff !important;
}
/* Selector de emojis */
html[data-cwisp-scheme="dark"] .wa-emoji-picker{
  background: #1c2539 !important;
  border-color: rgba(146,168,208,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.50) !important;
}
html[data-cwisp-scheme="dark"] .wa-emoji-picker button:hover,
html[data-cwisp-scheme="dark"] .wa-emoji-picker button:focus{
  background: rgba(255,255,255,.10) !important;
}
/* Estados vacíos / perfil / avisos del sistema */
html[data-cwisp-scheme="dark"] .wa-empty-state,
html[data-cwisp-scheme="dark"] .wa-empty-state p,
html[data-cwisp-scheme="dark"] .wa-empty-conversations-icon,
html[data-cwisp-scheme="dark"] .wa-empty-avatar{
  color: rgba(200,214,238,.55) !important;
}
html[data-cwisp-scheme="dark"] .wa-profile-avatar{
  background: rgba(var(--cw-accent-rgb),.20) !important;
  color: #8fd8d8 !important;
}
html[data-cwisp-scheme="dark"] .wa-profile-copy strong{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .wa-profile-copy small{
  color: rgba(200,214,238,.60) !important;
}
html[data-cwisp-scheme="dark"] .wa-system-bar{
  background: rgba(73,182,214,.10) !important;
  color: #a9dcea !important;
  border-color: rgba(73,182,214,.25) !important;
}
html[data-cwisp-scheme="dark"] .wa-system-bar.is-warning{
  background: rgba(245,156,26,.12) !important;
  color: #ffcf7a !important;
  border-color: rgba(245,156,26,.30) !important;
}
html[data-cwisp-scheme="dark"] .wa-system-bar a{
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .wa-live-status{
  color: rgba(200,214,238,.65) !important;
}
html[data-cwisp-scheme="dark"] #wa-window-hint{
  color: rgba(200,214,238,.55) !important;
}
/* Vista previa de medios (modal de adjuntos del chat) */
html[data-cwisp-scheme="dark"] .wa-media-preview{
  background: rgba(255,255,255,.05) !important;
  color: #d7e0f0 !important;
}
html[data-cwisp-scheme="dark"] .wa-media-preview .wa-media-empty,
html[data-cwisp-scheme="dark"] .wa-media-preview .wa-media-file-info{
  color: rgba(200,214,238,.65) !important;
}
/* Menú de control de la conversación (usa dropdown global ya oscurecido) */
html[data-cwisp-scheme="dark"] .wa-control-menu .dropdown-menu button{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .wa-control-menu .dropdown-menu button:hover{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .wa-label-sheet,
html[data-cwisp-scheme="dark"] #modalWaTags .modal-content,
html[data-cwisp-scheme="dark"] #modalWaHistory .modal-content,
html[data-cwisp-scheme="dark"] #modalNewWaChat .modal-content,
html[data-cwisp-scheme="dark"] .wa-newchat-sheet{
  background: #202c33 !important;
  color: #e9edef !important;
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .modal-header,
html[data-cwisp-scheme="dark"] #modalNewWaChat .modal-footer{
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .modal-title,
html[data-cwisp-scheme="dark"] #modalNewWaChat label,
html[data-cwisp-scheme="dark"] #modalNewWaChat .close{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .text-muted,
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-empty{
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .form-control,
html[data-cwisp-scheme="dark"] #modalNewWaChat #wa-contact-search,
html[data-cwisp-scheme="dark"] #modalNewWaChat #wa-manual-phone{
  background: #111b21 !important;
  border-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .form-control::placeholder,
html[data-cwisp-scheme="dark"] #modalNewWaChat #wa-contact-search::placeholder,
html[data-cwisp-scheme="dark"] #modalNewWaChat #wa-manual-phone::placeholder{
  color: #667781 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-results{
  background: #111b21 !important;
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-result{
  background: transparent !important;
  border-bottom-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-result strong{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-result small{
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-result:hover,
html[data-cwisp-scheme="dark"] #modalNewWaChat .wa-contact-result:focus{
  background: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .btn-outline-secondary{
  background: #111b21 !important;
  border-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] #modalNewWaChat .input-group-append .btn{
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] .wa-label-sheet .modal-header,
html[data-cwisp-scheme="dark"] .wa-label-create{
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] .wa-label-row{
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .wa-label-row:hover,
html[data-cwisp-scheme="dark"] .wa-label-row:focus{
  background: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] .wa-label-swatch.is-on{
  box-shadow: 0 0 0 2px #e9edef;
}
html[data-cwisp-scheme="dark"] .wa-history-now{
  background: transparent !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .wa-history-sheet,
html[data-cwisp-scheme="dark"] #modalWaHistory .modal-content{
  background: #111b21 !important;
}
html[data-cwisp-scheme="dark"] .wa-history-sheet .modal-header{
  border-bottom-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] .wa-history-stat,
html[data-cwisp-scheme="dark"] .wa-history-count,
html[data-cwisp-scheme="dark"] .wa-history-pill{
  background: #202c33 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .wa-history-stat.is-human{ background: rgba(83,189,235,.16) !important; color: #9fd8ec !important; }
html[data-cwisp-scheme="dark"] .wa-history-stat.is-pending{ background: rgba(255,188,56,.14) !important; color: #ffcf7a !important; }
html[data-cwisp-scheme="dark"] .wa-history-stat.is-bot{ background: rgba(0,168,132,.16) !important; color: #99ceb6 !important; }
html[data-cwisp-scheme="dark"] .wa-history-handler,
html[data-cwisp-scheme="dark"] .wa-history-card,
html[data-cwisp-scheme="dark"] .wa-history-empty{
  background: #202c33 !important;
  border-color: #2a3942 !important;
  color: #e9edef !important;
}
html[data-cwisp-scheme="dark"] .wa-history-item::before{ background: #2a3942 !important; }
html[data-cwisp-scheme="dark"] .wa-history-icon{ box-shadow: 0 0 0 4px #111b21 !important; }
html[data-cwisp-scheme="dark"] .wa-history-pill.is-to{ background: #005c4b !important; color: #d9fdd3 !important; }
html[data-cwisp-scheme="dark"] .wa-history-item{
  border-bottom-color: transparent !important;
}
html[data-cwisp-scheme="dark"] .wa-history-meta,
html[data-cwisp-scheme="dark"] .wa-history-kicker,
html[data-cwisp-scheme="dark"] .wa-history-section,
html[data-cwisp-scheme="dark"] .wa-history-subtitle,
html[data-cwisp-scheme="dark"] .wa-history-day,
html[data-cwisp-scheme="dark"] .wa-label-create-title{
  color: #8696a0 !important;
}
html[data-cwisp-scheme="dark"] #wa-tag-name{
  background: #111b21 !important;
  color: #e9edef !important;
  border-color: #2a3942 !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-whatsapp-chat-open #header,
html[data-cwisp-scheme="dark"] body.cwisp-whatsapp-chat-open #header.header{
  background: #202c33 !important;
  border-bottom: 1px solid #2a3942 !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-whatsapp-chat-open #header .navbar-form .form-control,
html[data-cwisp-scheme="dark"] body.cwisp-whatsapp-chat-open #header #searchcliente{
  background: #111b21 !important;
  color: #e9edef !important;
  border-color: #2a3942 !important;
}

/* Operador solo-chat: al abrir #ajax/w se oculta el chrome del panel. */
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #header,
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #sidebar,
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open .sidebar-bg,
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open .theme-panel,
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open .noty-panel {
  display: none !important;
}
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #page-container {
  padding-left: 0 !important;
  padding-top: 0 !important;
}
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #content.content,
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #content {
  margin: 0 !important;
  padding: 0 !important;
  height: 100dvh;
  min-height: 100dvh;
}
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open #frame {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.cwisp-whatsapp-only.cwisp-whatsapp-chat-open .wa-system-bar {
  display: none !important;
}

/* App / teléfono: el chat ocupa la pantalla (también para admin completo).
   :has(#frame) cubre la carga AJAX sin recargar (el hash a veces no dispara). */
html.cwisp-in-app body:has(#frame) #header,
html.cwisp-in-app body:has(#frame) #header.header,
html.cwisp-in-app body:has(#frame) .theme-panel,
html.cwisp-in-app body:has(#frame) .noty-panel,
html.cwisp-in-app body:has(#frame) #cwisp-asistente-fab,
html.cwisp-in-app body:has(#frame) #cwisp-asistente-panel,
body.modomovil:has(#frame) #header,
body.modomovil:has(#frame) #header.header,
body.modomovil:has(#frame) .theme-panel,
body.modomovil:has(#frame) .noty-panel,
body.modomovil:has(#frame) #cwisp-asistente-fab,
body.modomovil:has(#frame) #cwisp-asistente-panel{
  display: none !important;
}
html.cwisp-in-app body:has(#frame) #page-container,
body.modomovil:has(#frame) #page-container{
  padding-left: 0 !important;
  padding-top: 0 !important;
}
html.cwisp-in-app body:has(#frame) #content.content,
html.cwisp-in-app body:has(#frame) #content,
body.modomovil:has(#frame) #content.content,
body.modomovil:has(#frame) #content{
  margin: 0 !important;
  padding: 0 !important;
}
html.cwisp-in-app body:has(#frame) #frame,
body.modomovil:has(#frame) #frame{
  position: fixed !important;
  top: var(--wa-vvo, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--wa-vvh, 100%) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1100 !important;
}
html.cwisp-in-app body:has(#frame) #frame,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #frame{
  top: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}
html.cwisp-in-app #frame #sidepanel #bottom-bar,
html.cwisp-in-app #frame .message-input{
  padding-bottom: 0 !important;
}
html.cwisp-in-app #frame:not(.chat-open) .wa-fab{
  bottom: 72px !important;
}
html.cwisp-in-app body:has(#frame) .wa-system-bar,
body.modomovil:has(#frame) .wa-system-bar{
  display: none !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open,
body.modomovil.cwisp-whatsapp-chat-open{
  overflow: hidden !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open #header,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #header.header,
html.cwisp-in-app body.cwisp-whatsapp-chat-open .theme-panel,
html.cwisp-in-app body.cwisp-whatsapp-chat-open .noty-panel,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #cwisp-asistente-fab,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #cwisp-asistente-panel,
body.modomovil.cwisp-whatsapp-chat-open #header,
body.modomovil.cwisp-whatsapp-chat-open #header.header,
body.modomovil.cwisp-whatsapp-chat-open .theme-panel,
body.modomovil.cwisp-whatsapp-chat-open .noty-panel,
body.modomovil.cwisp-whatsapp-chat-open #cwisp-asistente-fab,
body.modomovil.cwisp-whatsapp-chat-open #cwisp-asistente-panel{
  display: none !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open #page-container,
body.modomovil.cwisp-whatsapp-chat-open #page-container{
  padding-left: 0 !important;
  padding-top: 0 !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open #content.content,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #content,
body.modomovil.cwisp-whatsapp-chat-open #content.content,
body.modomovil.cwisp-whatsapp-chat-open #content{
  margin: 0 !important;
  padding: 0 !important;
}
body.modomovil.cwisp-whatsapp-chat-open #frame{
  position: fixed !important;
  top: var(--wa-vvo, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--wa-vvh, 100dvh) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1100 !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open #frame{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1100 !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open .wa-system-bar,
body.modomovil.cwisp-whatsapp-chat-open .wa-system-bar{
  display: none !important;
}
html.cwisp-in-app body.cwisp-whatsapp-chat-open #sidebar,
html.cwisp-in-app body.cwisp-whatsapp-chat-open #sidebar.sidebar,
body.modomovil.cwisp-whatsapp-chat-open #sidebar,
body.modomovil.cwisp-whatsapp-chat-open #sidebar.sidebar{
  z-index: 1300 !important;
}
html.cwisp-in-app #page-container #sidebar.sidebar,
html.cwisp-in-app #page-container #sidebar.cwisp-sidebar,
body.modomovil #page-container #sidebar.sidebar,
body.modomovil #page-container #sidebar.cwisp-sidebar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(92vw, 320px) !important;
  max-width: 92vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 1300 !important;
  transform: translate3d(-105%, 0, 0) !important;
}
html.cwisp-in-app #page-container.page-sidebar-toggled #sidebar.sidebar,
html.cwisp-in-app #page-container.page-sidebar-toggled #sidebar.cwisp-sidebar,
body.modomovil #page-container.page-sidebar-toggled #sidebar.sidebar,
body.modomovil #page-container.page-sidebar-toggled #sidebar.cwisp-sidebar{
  transform: translate3d(0, 0, 0) !important;
}
html.cwisp-in-app .theme-panel,
body.modomovil .theme-panel{
  display: none !important;
}

@media (max-width: 767px){
  body.cwisp-whatsapp-chat-open #header,
  body.cwisp-whatsapp-chat-open #header.header,
  body.cwisp-whatsapp-chat-open .theme-panel,
  body.cwisp-whatsapp-chat-open .noty-panel,
  body.cwisp-whatsapp-chat-open #cwisp-asistente-fab,
  body.cwisp-whatsapp-chat-open #cwisp-asistente-panel{
    display: none !important;
  }
  body.cwisp-whatsapp-chat-open #page-container{
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  body.cwisp-whatsapp-chat-open #content.content,
  body.cwisp-whatsapp-chat-open #content{
    margin: 0 !important;
    padding: 0 !important;
  }
  body.cwisp-whatsapp-chat-open #frame{
    position: fixed !important;
    top: var(--wa-vvo, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--wa-vvh, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 1100 !important;
  }
  body.cwisp-whatsapp-chat-open .wa-system-bar{
    display: none !important;
  }
}

/* Menú clic derecho / pulsación larga estilo WhatsApp Web */
#wa-wa-menu.wa-wa-menu{
  position: fixed;
  z-index: 2147483647;
  min-width: 248px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 6px 0;
  border-radius: 14px;
  background: #fff;
  color: #111b21;
  box-shadow: 0 4px 24px rgba(11, 20, 26, .18), 0 0 0 1px rgba(11, 20, 26, .06);
}
#wa-wa-menu.wa-wa-menu[hidden]{ display: none !important; }
#wa-wa-menu .wa-wa-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: #111b21;
  font-size: 14.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
#wa-wa-menu .wa-wa-item i{
  flex: 0 0 20px;
  width: 20px;
  margin-top: 1px;
  color: #54656f;
  font-size: 16px;
  text-align: center;
}
#wa-wa-menu .wa-wa-item-copy{ min-width: 0; }
#wa-wa-menu .wa-wa-item-sub{
  display: block;
  margin-top: 2px;
  color: #667781;
  font-size: 12px;
}
#wa-wa-menu .wa-wa-item:hover,
#wa-wa-menu .wa-wa-item:focus{
  background: rgba(11, 20, 26, .06);
  outline: none;
}
#wa-wa-menu .wa-wa-sep{
  height: 1px;
  margin: 6px 0;
  background: rgba(17, 27, 33, .1);
}
#wa-wa-menu .wa-wa-item.is-danger{ color: #ea0038; }
#wa-wa-menu .wa-wa-item.is-danger i{ color: #ea0038; }
#wa-wa-menu .wa-wa-item.is-danger:hover{ background: rgba(234, 0, 56, .08); }
html[data-cwisp-scheme="dark"] #wa-wa-menu.wa-wa-menu{
  background: #233138;
  color: #e9edef;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04);
}
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item{ color: #e9edef; }
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item i{ color: #8696a0; }
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item-sub{ color: #8696a0; }
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item:hover,
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item:focus{
  background: rgba(255, 255, 255, .08);
}
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-sep{ background: rgba(255, 255, 255, .1); }
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item.is-danger,
html[data-cwisp-scheme="dark"] #wa-wa-menu .wa-wa-item.is-danger i{ color: #f15c6d; }

/* ==========================================================================
   MAPA DE RED GIS (/ajax/mapa → mapa_network + network-map.css) en oscuro.
   La hoja propia define --gis-panel:#fff; aquí se re-tokeniza todo.
   ========================================================================== */
html[data-cwisp-scheme="dark"] .gis-shell{
  --gis-panel: #1b2438;
  --gis-line: rgba(146,168,208,.16);
  --gis-muted: #8ea3c4;
  background: #101a2b !important;
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .gis-ribbon{
  background: #182136 !important;
  border-bottom-color: rgba(146,168,208,.16) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
}
html[data-cwisp-scheme="dark"] .gis-ribbon__label{ color: #7e93b8 !important; }
html[data-cwisp-scheme="dark"] .gis-brand strong{ color: #e8edf7 !important; }
html[data-cwisp-scheme="dark"] .gis-brand small{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-tool{ color: #c9d5ea !important; }
html[data-cwisp-scheme="dark"] .gis-tool:hover{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .gis-tool.is-active{
  border-color: rgba(var(--cw-accent-rgb),.50) !important;
  background: rgba(var(--cw-accent-rgb),.20) !important;
  color: #bfe3ff !important;
}
html[data-cwisp-scheme="dark"] .gis-panel{ background: var(--gis-panel) !important; }
html[data-cwisp-scheme="dark"] .gis-panel--contents{ border-right-color: var(--gis-line) !important; }
html[data-cwisp-scheme="dark"] .gis-panel--inspector{ border-left-color: var(--gis-line) !important; }
html[data-cwisp-scheme="dark"] .gis-panel__head{
  background: #182136 !important;
  border-bottom-color: var(--gis-line) !important;
  color: #9fb4d8 !important;
}
html[data-cwisp-scheme="dark"] .gis-icon-btn{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-icon-btn:hover{ background: rgba(255,255,255,.08) !important; }
html[data-cwisp-scheme="dark"] .gis-search{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25) !important;
  color: #8ea3c4 !important;
}
html[data-cwisp-scheme="dark"] .gis-search input{
  background: transparent !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .gis-search input::placeholder{ color: rgba(200,214,238,.45) !important; }
html[data-cwisp-scheme="dark"] .gis-filters{ border-bottom-color: var(--gis-line) !important; }
html[data-cwisp-scheme="dark"] .gis-filters label,
html[data-cwisp-scheme="dark"] .gis-filter-field label{ color: #8ea3c4 !important; }
/* Select nativo (fallback) + Select2 en filtros GIS */
html[data-cwisp-scheme="dark"] .gis-filters select,
html[data-cwisp-scheme="dark"] .gis-filter-field select{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.35) !important;
  color: #e8edf7 !important;
  color-scheme: dark;
}
html[data-cwisp-scheme="dark"] .gis-filters select option,
html[data-cwisp-scheme="dark"] .gis-filter-field select option{
  background: #1c2539 !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default .select2-selection--single,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default .select2-selection--single{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.35) !important;
}
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #8ea3c4 !important;
}
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: #8ea3c4 transparent transparent transparent !important;
}
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default.select2-container--focus .select2-selection--single,
html[data-cwisp-scheme="dark"] .gis-filters .select2-container--default.select2-container--open .select2-selection--single,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default.select2-container--focus .select2-selection--single,
html[data-cwisp-scheme="dark"] .gis-filter-field .select2-container--default.select2-container--open .select2-selection--single{
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--cw-accent-rgb),.25) !important;
}
/* Dropdown Select2 GIS (filtros / modales) */
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown,
html[data-cwisp-scheme="dark"] #gis-shell .select2-dropdown,
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm .select2-dropdown{
  background: #1c2539 !important;
  border-color: rgba(146,168,208,.28) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown .select2-search--dropdown .select2-search__field,
html[data-cwisp-scheme="dark"] #gis-shell .select2-dropdown .select2-search--dropdown .select2-search__field{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.30) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown .select2-results__option,
html[data-cwisp-scheme="dark"] #gis-shell .select2-dropdown .select2-results__option{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown .select2-results__option--highlighted,
html[data-cwisp-scheme="dark"] #gis-shell .select2-dropdown .select2-results__option--highlighted{
  background: rgba(var(--cw-accent-rgb),.28) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm .select2-container--default .select2-selection--single{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.35) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color: #8ea3c4 transparent transparent transparent !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm select.form-control{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.35) !important;
  color: #e8edf7 !important;
  color-scheme: dark;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm select.form-control option{
  background: #1c2539 !important;
  color: #e8edf7 !important;
}
/* Select2 GIS abierto en body (sin dropdownCssClass: select2.min no lo soporta) */
html[data-cwisp-scheme="dark"] body > .select2-container--open .select2-dropdown,
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown{
  background: #1c2539 !important;
  border-color: rgba(146,168,208,.28) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] body > .select2-container--open .select2-results__option,
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown .select2-results__option{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] body > .select2-container--open .select2-results__option--highlighted,
html[data-cwisp-scheme="dark"] .select2-dropdown.cwisp-gis-select2-dropdown .select2-results__option--highlighted{
  background: rgba(var(--cw-accent-rgb),.28) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] body > .select2-container--open .select2-search__field{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.30) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.cwisp-gis-confirm .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .gis-strand-chip{
  background: #151e30 !important;
  color: #e8edf7 !important;
  border-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] .gis-strand-chip i{
  border-color: rgba(255,255,255,.4) !important;
}
html[data-cwisp-scheme="dark"] .gis-strand-chip.is-selected{
  background: #1c2539 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #1b2438, 0 0 0 5px var(--strand-hex, #2563eb) !important;
}
html[data-cwisp-scheme="dark"] .gis-nap-split-legend{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-color-field{
  background: #151e30 !important;
  border-color: rgba(146,168,208,.35) !important;
}
html[data-cwisp-scheme="dark"] .gis-color-field__hex{ color: #e8edf7 !important; }
html[data-cwisp-scheme="dark"] .gis-color-field__swatch{
  border-color: rgba(255,255,255,.25) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-gis-assign-client{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(146,168,208,.22) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-gis-assign-client span{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .cwisp-gis-assign-client strong{ color: #e8edf7 !important; }
.jconfirm.cwisp-gis-confirm{ z-index: 99999990 !important; }
.select2-dropdown.cwisp-gis-select2-dropdown{
  z-index: 100000001 !important;
}
html[data-cwisp-scheme="dark"] .gis-layers label{
  border-bottom-color: rgba(146,168,208,.10) !important;
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] .gis-layers label:hover{ background: rgba(255,255,255,.05) !important; }
html[data-cwisp-scheme="dark"] .gis-layers b{
  background: rgba(var(--cw-accent-rgb),.18) !important;
  color: #bfe3ff !important;
}
html[data-cwisp-scheme="dark"] .gis-swatch{ box-shadow: 0 0 0 2px #1b2438, 0 0 0 3px currentColor !important; }
html[data-cwisp-scheme="dark"] .gis-legend{
  background: #182136 !important;
  color: #8ea3c4 !important;
  border: 1px solid rgba(146,168,208,.14);
}
html[data-cwisp-scheme="dark"] .gis-legend strong{ color: #c9d5ea !important; }
/* Lienzo del mapa: teselas en colores naturales (sin invert/negativo).
   El chrome GIS (paneles, ribbon, inspector) sí sigue en oscuro. */
html[data-cwisp-scheme="dark"] .gis-map-wrap{ background: #cbd5e1 !important; }
html[data-cwisp-scheme="dark"] #gis-map .leaflet-tile-pane .leaflet-tile,
html[data-cwisp-scheme="dark"] .gis-map-wrap .leaflet-tile-pane .leaflet-tile{
  filter: none !important;
}
html[data-cwisp-scheme="dark"] .gis-basemaps{
  background: rgba(24,33,54,.92) !important;
  border-color: rgba(146,168,208,.25) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
html[data-cwisp-scheme="dark"] .gis-basemaps button{ color: #a9bcd9 !important; }
html[data-cwisp-scheme="dark"] .gis-basemaps button.is-active{
  background: var(--cw-accent) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .gis-label{
  background: rgba(24,33,54,.92) !important;
  border-color: rgba(146,168,208,.25) !important;
  color: #dbe4f3 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.40) !important;
}
/* Controles Leaflet (zoom, atribución, popups, tooltips) */
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-bar a,
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-control-zoom a{
  background: #1c2539 !important;
  color: #c9d5ea !important;
  border-color: rgba(146,168,208,.20) !important;
}
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-bar a:hover,
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-control-zoom a:hover{
  background: rgba(var(--cw-accent-rgb),.20) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-control-attribution{
  background: rgba(24,33,54,.85) !important;
  color: #7e93b8 !important;
}
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-control-attribution a{ color: #8fc6ff !important; }
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-popup-content-wrapper{
  background: #1c2539 !important;
  color: #dbe4f3 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.50);
}
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-popup-tip{ background: #1c2539 !important; }
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-popup-close-button{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-link-picker>strong{ color: #dbe4f3 !important; }
html[data-cwisp-scheme="dark"] .gis-link-picker__item{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.22) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .gis-link-picker__item:hover{
  border-color: #3b82f6 !important;
  background: rgba(59,130,246,.16) !important;
}
html[data-cwisp-scheme="dark"] .gis-link-picker__item small{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-shell .leaflet-tooltip{
  background: rgba(24,33,54,.92) !important;
  border-color: rgba(146,168,208,.25) !important;
  color: #dbe4f3 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.40);
}
/* Inspector lateral */
html[data-cwisp-scheme="dark"] .gis-empty{ color: #7e93b8 !important; }
html[data-cwisp-scheme="dark"] .gis-card-title__icon{
  background: rgba(var(--cw-accent-rgb),.20) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .gis-card-title h4{ color: #e8edf7 !important; }
html[data-cwisp-scheme="dark"] .gis-card-title small{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-fields{ border-color: rgba(146,168,208,.18) !important; }
html[data-cwisp-scheme="dark"] .gis-field{
  background: rgba(255,255,255,.03) !important;
  border-bottom-color: rgba(146,168,208,.10) !important;
}
html[data-cwisp-scheme="dark"] .gis-field span:first-child{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-field span:last-child{ color: #e8edf7 !important; }
html[data-cwisp-scheme="dark"] .gis-actions button{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25) !important;
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] .gis-actions button.primary{
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .gis-actions button.danger{
  background: rgba(236,69,90,.12) !important;
  border-color: rgba(236,69,90,.40) !important;
  color: #ff8fa3 !important;
}
html[data-cwisp-scheme="dark"] .gis-port{
  background: rgba(34,197,94,.18) !important;
  color: #7ee2a8 !important;
}
html[data-cwisp-scheme="dark"] .gis-port.is-used{
  background: rgba(239,68,68,.18) !important;
  color: #ff9d9d !important;
}
/* Tabla inferior */
html[data-cwisp-scheme="dark"] .gis-table-panel{
  background: #1b2438 !important;
  border-top-color: var(--gis-line) !important;
}
html[data-cwisp-scheme="dark"] .gis-table-tabs{
  background: #182136 !important;
  border-bottom-color: var(--gis-line) !important;
}
html[data-cwisp-scheme="dark"] .gis-table-tabs button{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .gis-table-tabs button.is-active{
  border-color: var(--cw-accent) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .gis-table-tabs span{ color: #7e93b8 !important; }
html[data-cwisp-scheme="dark"] .gis-table-scroll th{
  background: #182136 !important;
  color: #9fb4d8 !important;
}
html[data-cwisp-scheme="dark"] .gis-table-scroll td{
  color: #dbe4f3 !important;
  border-top-color: rgba(146,168,208,.12) !important;
}
html[data-cwisp-scheme="dark"] .gis-table-scroll tr:hover td{
  background: rgba(var(--cw-accent-rgb),.10) !important;
}
html[data-cwisp-scheme="dark"] .gis-table-resizer:after{ background: #4a5c80 !important; }
/* Barra de estado */
html[data-cwisp-scheme="dark"] .gis-statusbar{
  background: #0d1526 !important;
  color: #8ea3c4 !important;
}
html[data-cwisp-scheme="dark"] .gis-statusbar span+span{ border-left-color: rgba(146,168,208,.20) !important; }

/* jquery-confirm supervan: labels y textarea (cierre de ticket / anular factura) */
.jconfirm.jconfirm-supervan .cwisp-jconfirm-body{
  text-align: left;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-text{
  color: inherit;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.4;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-label{
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
  color: #f3f4f6 !important;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-select,
.jconfirm.jconfirm-supervan select.form-control{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: #1f2430 !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  height: auto !important;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-select:focus,
.jconfirm.jconfirm-supervan select.form-control:focus{
  border-color: #f5c518 !important;
  outline: none !important;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-textarea,
.jconfirm.jconfirm-supervan textarea.form-control{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 96px;
  box-sizing: border-box;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: #1f2430 !important;
  color: #f8fafc !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
.jconfirm.jconfirm-supervan .cwisp-jconfirm-textarea:focus,
.jconfirm.jconfirm-supervan textarea.form-control:focus{
  border-color: #f5c518 !important;
  outline: none !important;
}
html[data-cwisp-scheme="light"] .jconfirm.jconfirm-supervan .cwisp-jconfirm-label{
  color: #1f2937 !important;
}
html[data-cwisp-scheme="light"] .jconfirm.jconfirm-supervan .cwisp-jconfirm-select,
html[data-cwisp-scheme="light"] .jconfirm.jconfirm-supervan select.form-control,
html[data-cwisp-scheme="light"] .jconfirm.jconfirm-supervan .cwisp-jconfirm-textarea,
html[data-cwisp-scheme="light"] .jconfirm.jconfirm-supervan textarea.form-control{
  background: #fff !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
}
.cwisp-ticket-close-note{
  white-space: normal;
}

/* ==========================================================================
   jquery-confirm GLOBAL (temas light/modern) — mismo lenguaje visual que los
   modales Bootstrap del sistema. Antes solo existía este acabado bajo
   body.cwisp-olt-view-active; aquí se globaliza (supervan conserva su tema).
   ========================================================================== */
.jconfirm.jconfirm-light .jconfirm-bg,
.jconfirm.jconfirm-modern .jconfirm-bg{
  background: rgba(15,23,42,.55) !important;
}
.jconfirm.jconfirm-light .jconfirm-box,
.jconfirm.jconfirm-modern .jconfirm-box{
  display: flex !important;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  padding: 0 !important;
  overflow: hidden;
  color: #172033 !important;
  background: #ffffff !important;
  border: 1px solid #d8dee9;
  border-radius: var(--cw-radius, 16px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
}
.jconfirm.jconfirm-light .jconfirm-box div.jconfirm-title-c,
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{
  flex: 0 0 46px;
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  height: 46px;
  margin: 0 !important;
  padding: 10px 16px !important;
  color: #172033 !important;
  text-align: left !important;
  border-bottom: 1px solid #d8dee9;
  background: #f8fafc;
}
.jconfirm.jconfirm-light .jconfirm-box div.jconfirm-title-c > *,
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c > *{
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}
.jconfirm.jconfirm-light .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{
  display: none !important;
}
.jconfirm.jconfirm-light .jconfirm-closeIcon,
.jconfirm.jconfirm-modern .jconfirm-closeIcon{
  top: 10px !important;
  right: 12px !important;
  color: #6b7280 !important;
}
.jconfirm.jconfirm-light .jconfirm-content-pane,
.jconfirm.jconfirm-modern .jconfirm-content-pane{
  flex: 1 1 auto;
  width: 100%;
  margin: 0 !important;
  padding: 15px 16px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
/* El dropdown de Select2 va a body; no hay que destapar overflow (eso
   agranda el pane, jconfirm recentra y el select se cierra). */
.jconfirm.jconfirm-light .jconfirm-box div.jconfirm-content,
.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
  color: #172033 !important;
  text-align: left;
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 19px;
}
/* Formularios compactos dentro del diálogo */
.jconfirm.jconfirm-light .jconfirm-content label:not(.control-label):not(.form-check-label),
.jconfirm.jconfirm-modern .jconfirm-content label:not(.control-label):not(.form-check-label){
  display: block;
  margin-bottom: 4px;
  color: #172033 !important;
  font-weight: 400 !important;
  font-size: 12px;
}
.jconfirm.jconfirm-light .jconfirm-content .text-muted,
.jconfirm.jconfirm-modern .jconfirm-content .text-muted,
.jconfirm.jconfirm-light .jconfirm-content .form-text,
.jconfirm.jconfirm-modern .jconfirm-content .form-text{
  color: #6b7280 !important;
  font-size: 12px;
}
.jconfirm.jconfirm-light .jconfirm-content .form-control,
.jconfirm.jconfirm-modern .jconfirm-content .form-control{
  color: #172033 !important;
  background: #ffffff !important;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  min-height: 30px;
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 17px;
  box-shadow: none;
}
.jconfirm.jconfirm-light .jconfirm-content textarea.form-control,
.jconfirm.jconfirm-modern .jconfirm-content textarea.form-control{
  height: auto;
  min-height: 58px;
}
.jconfirm.jconfirm-light .jconfirm-content .form-control:focus,
.jconfirm.jconfirm-modern .jconfirm-content .form-control:focus{
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 2px rgba(var(--cw-accent-rgb),.18);
}
.jconfirm.jconfirm-light .jconfirm-content .select2-container--default .select2-selection--single,
.jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single{
  border: 1px solid #d8dee9 !important;
  border-radius: 8px !important;
  min-height: 30px !important;
  height: 30px !important;
}
.jconfirm.jconfirm-light .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__rendered,
.jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 28px !important;
  font-size: 12px;
}
.jconfirm.jconfirm-light .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__arrow,
.jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 28px !important;
}
/* Barra de botones */
.jconfirm.jconfirm-light .jconfirm-buttons,
.jconfirm.jconfirm-modern .jconfirm-buttons{
  flex: 0 0 auto;
  float: none !important;
  margin: 0 !important;
  padding: 12px 14px 10px !important;
  text-align: right !important;
  border-top: 1px solid #d8dee9;
  background: #f8fafc;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button{
  margin: 0 0 0 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-success,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-success{
  min-width: 6rem;
  padding: 8px 10px !important;
  color: var(--cw-accent-contrast) !important;
  background: var(--cw-accent) !important;
  border: 1px solid var(--cw-accent) !important;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-primary:hover,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-primary:hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-success:hover,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-success:hover{
  background: var(--cw-accent-dark, var(--cw-accent)) !important;
  border-color: var(--cw-accent-dark, var(--cw-accent)) !important;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-white,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white{
  min-width: 0;
  padding: 5px 10px !important;
  color: #212529 !important;
  background: #ffffff !important;
  border: 1px solid #d5dbe0 !important;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default:hover,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-white:hover,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white:hover{
  background: rgba(15,23,42,.04) !important;
}
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-danger,
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-danger{
  background: #e04b57 !important;
  border-color: #e04b57 !important;
  color: #ffffff !important;
}
/* Select2: el dropdown se appendea a <body> (z 1050) y .jconfirm usa
   z-index 99999999 — sin esto el listado abre DETRÁS del diálogo. */
.select2-container--open,
.select2-dropdown{
  z-index: 100000000 !important;
}

/* Formularios OLT: caja ancha desde el spinner, sin perspective (select nativo)
   y anclado arriba para que un dropdown no recentre el diálogo. */
.jconfirm.cwisp-olt-form-dialog .jconfirm-scrollpane{
  perspective: none !important;
  -webkit-perspective: none !important;
}
.jconfirm.cwisp-olt-form-dialog .jconfirm-cell{
  vertical-align: top;
}
.jconfirm.cwisp-olt-form-dialog .jconfirm-holder{
  padding-top: 28px;
  padding-bottom: 20px;
}
.jconfirm.cwisp-olt-form-dialog .jconfirm-box,
.jconfirm.cwisp-olt-form-dialog .jconfirm-box-container{
  transform: none !important;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-wan-loading{
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.jconfirm.cwisp-olt-form-dialog .jconfirm-content .form-control{
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  line-height: 20px !important;
  border-radius: 6px !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  height: 28px !important;
  width: 100%;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group-addon{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  min-width: 30px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  border-radius: 6px 0 0 6px !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group > select{
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .form-control{
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 1% !important;
  height: 28px !important;
  min-height: 28px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .select2-container{
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 1% !important;
  max-width: none !important;
  height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  line-height: 28px !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .select2-container .select2-selection--single,
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .select2-container--default .select2-selection--single{
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 6px 6px 0 !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 26px !important;
  font-size: 12px !important;
  padding-left: 8px !important;
  padding-right: 20px !important;
}
html body.cwisp-olt-view-active .jconfirm.cwisp-olt-form-dialog .jconfirm-content .input-group .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 26px !important;
  top: 0 !important;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-form-modal .form-group{
  margin-bottom: 8px;
}

/* ── jquery-confirm en MODO OSCURO ───────────────────────────────────────── */
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-bg,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-bg{
  background: rgba(4,8,16,.72) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box{
  background: #1c2539 !important;
  border: 1px solid rgba(146,168,208,.22) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box div.jconfirm-title-c,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{
  background: #182136 !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-closeIcon,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-closeIcon{
  color: #8ea3c4 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box div.jconfirm-content,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content label,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content label,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content label:not(.control-label):not(.form-check-label),
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content label:not(.control-label):not(.form-check-label){
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .text-muted,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .text-muted,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .form-text,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .form-text{
  color: rgba(200,214,238,.60) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .form-control,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .form-control{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .form-control::placeholder,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .form-control::placeholder{
  color: rgba(200,214,238,.45) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .form-control:focus,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .form-control:focus{
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--cw-accent-rgb),.25) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .select2-container--default .select2-selection--single,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-buttons,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-buttons{
  background: #182136 !important;
  border-top-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-white,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(170,190,225,.24) !important;
  color: #d5deee !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default:hover,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-white:hover,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white:hover{
  background: rgba(var(--cw-accent-rgb),.18) !important;
  border-color: rgba(var(--cw-accent-rgb),.45) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-danger,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-danger{
  background: rgba(236,69,90,.16) !important;
  border: 1px solid rgba(236,69,90,.38) !important;
  color: #ff8fa3 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-danger:hover,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-danger:hover{
  background: rgba(236,69,90,.32) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   TANDA 4 — Julio 28 2026 (tarde)
   Tablas reforzadas, botones ghost globales, vistas de ajustes, switchery,
   CKEditor, pre, licencia, changelog, selects nativos y login v2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4A. TABLAS: filas DataTables transparentes + rayas y bordes con !important
   (datatables.min.css pinta `tbody tr` de blanco; hay que ganarle siempre)
   -------------------------------------------------------------------------- */
/* Tablas planas y DataTables: fondo transparente (Bootstrap/DataTables pintan #fff)
   Incluye odd/even/sorting_1 y modal para evitar flash blanco en la 1ª carga */
html[data-cwisp-scheme="dark"] #content .table,
html[data-cwisp-scheme="dark"] #content .table > tbody,
html[data-cwisp-scheme="dark"] #content .table > tbody > tr,
html[data-cwisp-scheme="dark"] #content .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content .table > tbody > tr > th,
html[data-cwisp-scheme="dark"] #content .table > thead > tr,
html[data-cwisp-scheme="dark"] #content .table > thead > tr > th,
html[data-cwisp-scheme="dark"] #content .table > tfoot > tr,
html[data-cwisp-scheme="dark"] #content .table > tfoot > tr > th,
html[data-cwisp-scheme="dark"] #content .table > tfoot > tr > td,
html[data-cwisp-scheme="dark"] #content table.dataTable,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr,
html[data-cwisp-scheme="dark"] #content table.dataTable.display tbody tr,
html[data-cwisp-scheme="dark"] #content table.dataTable.stripe tbody tr,
html[data-cwisp-scheme="dark"] #content table.dataTable.hover tbody tr,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr.even,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr > td,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr > th,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] #content table.dataTable.display tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] #content table.dataTable.display tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] .modal .table,
html[data-cwisp-scheme="dark"] .modal .table > tbody > tr,
html[data-cwisp-scheme="dark"] .modal .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] .modal table.dataTable,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr,
html[data-cwisp-scheme="dark"] .modal table.dataTable.display tbody tr,
html[data-cwisp-scheme="dark"] .modal table.dataTable.stripe tbody tr,
html[data-cwisp-scheme="dark"] .modal table.dataTable.hover tbody tr,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr.even,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr > td,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr > th,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] .modal table.dataTable.display tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] .modal table.dataTable.display tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp table.dataTable tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp table.dataTable tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp2 table.dataTable tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp2 table.dataTable tbody tr.even > .sorting_1{
  background-color: transparent !important;
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(odd),
html[data-cwisp-scheme="dark"] #content .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-cwisp-scheme="dark"] #content table.dataTable.stripe tbody tr.odd,
html[data-cwisp-scheme="dark"] #content table.dataTable.display tbody tr.odd,
html[data-cwisp-scheme="dark"] #content table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] .modal .table-striped > tbody > tr:nth-of-type(odd),
html[data-cwisp-scheme="dark"] .modal .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-cwisp-scheme="dark"] .modal table.dataTable.stripe tbody tr.odd,
html[data-cwisp-scheme="dark"] .modal table.dataTable.display tbody tr.odd,
html[data-cwisp-scheme="dark"] .modal table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] #modaltmp table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] #modaltmp2 table.dataTable tbody tr.odd{
  background-color: rgba(255,255,255,.035) !important;
  background: rgba(255,255,255,.035) !important;
}
html[data-cwisp-scheme="dark"] #content div.dataTables_processing,
html[data-cwisp-scheme="dark"] .modal div.dataTables_processing{
  background: rgba(17,26,44,.96) !important;
  color: #eaf0fb !important;
  border: 1px solid rgba(146,168,208,.25) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
html[data-cwisp-scheme="dark"] #content .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content .table > tbody > tr > th,
html[data-cwisp-scheme="dark"] #content .table > tfoot > tr > td,
html[data-cwisp-scheme="dark"] #content .table > tfoot > tr > th{
  color: rgba(230,236,248,.92) !important;
  border-color: rgba(146,168,208,.15) !important;
}
/* input-group-addon dentro de tablas (crontab time pickers, etc.) */
html[data-cwisp-scheme="dark"] #content .input-group-addon{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(146,168,208,.28) !important;
  color: #aebdd6 !important;
}
html[data-cwisp-scheme="dark"] #content input[type="time"].form-control{
  color-scheme: dark;
}
html[data-cwisp-scheme="dark"] #content .table > thead > tr > th{
  color: #eaf0fb !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .table-hover > tbody > tr:hover{
  background-color: rgba(var(--cw-accent-rgb),.08) !important;
}
html[data-cwisp-scheme="dark"] #content .table-bordered,
html[data-cwisp-scheme="dark"] #content .table-bordered > thead > tr > th,
html[data-cwisp-scheme="dark"] #content .table-bordered > tbody > tr > td,
html[data-cwisp-scheme="dark"] #content .table-bordered > tfoot > tr > th,
html[data-cwisp-scheme="dark"] #content .table-bordered > tfoot > tr > td{
  border-color: rgba(146,168,208,.18) !important;
}
/* Re-afirmar utilidades de color dentro de celdas (ganan al color forzado) */
html[data-cwisp-scheme="dark"] #content .table td.text-success,
html[data-cwisp-scheme="dark"] #content .table td .text-success,
html[data-cwisp-scheme="dark"] #content .table th.text-success{ color: #3ddc84 !important; }
html[data-cwisp-scheme="dark"] #content .table td.text-danger,
html[data-cwisp-scheme="dark"] #content .table td .text-danger,
html[data-cwisp-scheme="dark"] #content .table th.text-danger{ color: #ff6b7d !important; }
html[data-cwisp-scheme="dark"] #content .table td.text-warning,
html[data-cwisp-scheme="dark"] #content .table td .text-warning{ color: #ffc53d !important; }
html[data-cwisp-scheme="dark"] #content .table td.text-info,
html[data-cwisp-scheme="dark"] #content .table td .text-info{ color: #3bc9db !important; }
html[data-cwisp-scheme="dark"] #content .table td.text-primary,
html[data-cwisp-scheme="dark"] #content .table td .text-primary{ color: #6aa2ff !important; }
html[data-cwisp-scheme="dark"] #content .table td.text-muted,
html[data-cwisp-scheme="dark"] #content .table td .text-muted{ color: rgba(200,214,238,.62) !important; }

/* --------------------------------------------------------------------------
   4B. BOTONES .btn-default / .btn-white: ghost oscuro global en modo oscuro
   (btn-app, meta actions, y cualquier remanente blanco)
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] .btn.btn-default:not(.btnajustes),
html[data-cwisp-scheme="dark"] .btn.btn-white:not(.btnajustes){
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(146,168,208,.32) !important;
  color: #dce6f5 !important;
  text-shadow: none !important;
  box-shadow: none;
}
html[data-cwisp-scheme="dark"] .btn.btn-default:not(.btnajustes):hover,
html[data-cwisp-scheme="dark"] .btn.btn-default:not(.btnajustes):focus,
html[data-cwisp-scheme="dark"] .btn.btn-white:not(.btnajustes):hover,
html[data-cwisp-scheme="dark"] .btn.btn-white:not(.btnajustes):focus{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  border-color: rgba(var(--cw-accent-rgb),.55) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] .btn.btn-default:not(.btnajustes) i,
html[data-cwisp-scheme="dark"] .btn.btn-white:not(.btnajustes) i{
  color: inherit !important;
}
/* btn-app neutros (Ver Antena, etc.): ghost oscuro.
   NO pisar btn-red / btn-warning / btn-green / semánticos (Retirar, Suspender). */
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-default,
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-white{
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
}
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-default:hover,
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-white:hover{
  background: rgba(var(--cw-accent-rgb),.16) !important;
  transform: translateY(-1px);
}
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-red,
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-danger{
  background: linear-gradient(135deg, #f0505e, #c9303f) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-warning{
  background: linear-gradient(135deg, #f8ac37, #e08a12) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-green,
html[data-cwisp-scheme="dark"] .btn.btn-app.btn-success{
  background: linear-gradient(135deg, #2eb85c, #1e9443) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   4C. <pre> y selects nativos en modo oscuro
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content pre,
html[data-cwisp-scheme="dark"] .modal pre{
  background: #111a2c !important;
  border: 1px solid rgba(146,168,208,.20);
  color: #cfe3ff !important;
  border-radius: 10px;
}
/* Wrapper highlight.js (migrar, docs): el margen blanco venía del fondo #f2f3f4 */
html[data-cwisp-scheme="dark"] #content .hljs-wrapper{
  background: #111a2c !important;
  border: 1px solid rgba(146,168,208,.20);
  border-radius: 12px;
  color: #cfe3ff !important;
}
html[data-cwisp-scheme="dark"] #content .hljs-wrapper pre{
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  border-radius: 0;
  padding: 0;
  margin: 0;
  white-space: normal;
}
html[data-cwisp-scheme="dark"] #content .hljs-wrapper h4,
html[data-cwisp-scheme="dark"] #content .hljs-wrapper h5,
html[data-cwisp-scheme="dark"] #content .hljs-wrapper strong{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .hljs-wrapper li,
html[data-cwisp-scheme="dark"] #content .hljs-wrapper p,
html[data-cwisp-scheme="dark"] #content .hljs-wrapper em{
  color: rgba(214,224,240,.88) !important;
}
html[data-cwisp-scheme="dark"] #content .hljs-wrapper code{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  color: #9db8ff !important;
  padding: 1px 5px;
  border-radius: 4px;
}
html[data-cwisp-scheme="dark"] #content select.form-control,
html[data-cwisp-scheme="dark"] .modal select.form-control{
  color-scheme: dark;
}
html[data-cwisp-scheme="dark"] #content select.form-control option{
  background: #1c2539;
  color: #e8edf7;
}

/* --------------------------------------------------------------------------
   4D. Switchery: pista con sombra visible en modo oscuro
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] .switchery{
  border-color: rgba(146,168,208,.40) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.45) !important;
}
html[data-cwisp-scheme="dark"] .switchery > small{
  background: #eef2fa !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
}

/* --------------------------------------------------------------------------
   4E. WhatsApp Cloud (ajustes?sms): tarjeta Meta en modo oscuro
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content .meta-account-title{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .meta-account-icon{
  background: rgba(37,185,105,.16) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 0 1px rgba(37,185,105,.30);
}
html[data-cwisp-scheme="dark"] #content .meta-id-chip{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(146,168,208,.24) !important;
  color: #aebdd6 !important;
}
html[data-cwisp-scheme="dark"] #content .meta-id-chip b{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .meta-webhook-state{
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(146,168,208,.20) !important;
  color: #b8c6de !important;
}
html[data-cwisp-scheme="dark"] #content .meta-webhook-state strong{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .meta-webhook-state code{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  color: #9db8ff !important;
}
html[data-cwisp-scheme="dark"] #content .meta-webhook-details{ color: rgba(200,214,238,.62) !important; }

/* --------------------------------------------------------------------------
   4F. Plantillas: tarjetas de documentos + tab WhatsApp Meta
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content .itemplantilla .contentplantilla{
  background: var(--cw-surface-panel) !important;
  border-color: rgba(146,168,208,.20) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.35) !important;
}
html[data-cwisp-scheme="dark"] #content .itemplantilla .tituloplantilla{
  background: #182136 !important;
  color: #dfe7f5 !important;
  border-color: rgba(146,168,208,.20) !important;
}
html[data-cwisp-scheme="dark"] #content .contentplantilla [style*="background-color: #f3f3f3"],
html[data-cwisp-scheme="dark"] #content .contentplantilla [style*="background-color:#f3f3f3"]{
  background-color: rgba(255,255,255,.05) !important;
  color: #c9d5ea !important;
}
/* Tab WhatsApp Meta */
html[data-cwisp-scheme="dark"] #content .wa-meta-wrap{
  background: transparent !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-intro{
  background: var(--cw-surface-panel) !important;
  border-color: rgba(146,168,208,.20) !important;
  border-left-color: #25b969 !important;
  box-shadow: 0 8px 20px rgba(2,6,23,.30) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-intro h4{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .wa-template-card{
  background: var(--cw-surface-panel) !important;
  border-color: rgba(146,168,208,.20) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.35) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-card:hover{
  border-color: #25b969 !important;
  box-shadow: 0 14px 32px rgba(31,164,99,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-add{
  background: rgba(37,185,105,.06) !important;
  border-color: rgba(53,183,121,.5) !important;
  color: #4ade80 !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-add span{ color: rgba(200,214,238,.62) !important; }
html[data-cwisp-scheme="dark"] #content .wa-template-card h5{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .wa-lang{
  background: rgba(255,255,255,.06) !important;
  color: #aebdd6 !important;
}
html[data-cwisp-scheme="dark"] #content .wa-card-section{
  background: rgba(255,255,255,.045) !important;
  color: #b8c6de !important;
}
html[data-cwisp-scheme="dark"] #content .wa-body-preview{ color: #d7e0f0 !important; }
html[data-cwisp-scheme="dark"] #content .wa-footer-preview{
  color: rgba(200,214,238,.60) !important;
  border-left-color: rgba(146,168,208,.30) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-components span{
  background: rgba(var(--cw-accent-rgb),.12) !important;
  color: #9db8ff !important;
}
html[data-cwisp-scheme="dark"] #content .wa-automation-box{
  border-top-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-automation-box label,
html[data-cwisp-scheme="dark"] #content .wa-doc-toggle{
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] #content .wa-empty-card{
  background: var(--cw-surface-panel) !important;
  border-color: rgba(146,168,208,.30) !important;
  color: rgba(200,214,238,.65) !important;
}

/* --------------------------------------------------------------------------
   4G. Licencia: widget-todolist + alertas con colores inline
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content .widget-todolist{
  background: var(--cw-surface-panel) !important;
  border: 1px solid rgba(146,168,208,.20) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
html[data-cwisp-scheme="dark"] #content .widget-todolist-header{
  background: #182136 !important;
  border-bottom: 1px solid rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .widget-todolist-header-title{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .widget-todolist-header-total span{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .widget-todolist-header-total small{ color: rgba(200,214,238,.60) !important; }
html[data-cwisp-scheme="dark"] #content .widget-todolist-body{ background: transparent !important; }
html[data-cwisp-scheme="dark"] #content .widget-todolist-item{
  border-bottom-color: rgba(146,168,208,.14) !important;
}
html[data-cwisp-scheme="dark"] #content .widget-todolist-title{ color: #eaf0fb !important; }
html[data-cwisp-scheme="dark"] #content .widget-todolist-desc{ color: rgba(214,224,240,.85) !important; }
html[data-cwisp-scheme="dark"] #content [style*="color:#181717"],
html[data-cwisp-scheme="dark"] #content [style*="color: #181717"]{ color: #e8edf7 !important; }
/* Alertas con paleta inline clara → tintes oscuros con la misma semántica */
html[data-cwisp-scheme="dark"] #content .alert[style*="background:#fef2f2"],
html[data-cwisp-scheme="dark"] #content .alert[style*="background: #fef2f2"]{
  background: rgba(224,75,87,.13) !important;
  color: #ffb3ba !important;
  border-color: rgba(224,75,87,.40) !important;
}
html[data-cwisp-scheme="dark"] #content .alert[style*="background:#fef2f2"] [style*="color:#a1261d"],
html[data-cwisp-scheme="dark"] #content .alert[style*="background: #fef2f2"] [style*="color: #a1261d"]{
  color: #ff9d9d !important;
}
html[data-cwisp-scheme="dark"] #content .alert[style*="background:#fff8e1"],
html[data-cwisp-scheme="dark"] #content .alert[style*="background: #fff8e1"]{
  background: rgba(241,154,42,.13) !important;
  color: #ffd9a0 !important;
  border-color: rgba(241,154,42,.40) !important;
}

/* --------------------------------------------------------------------------
   4H. Changelog (actualizar sistema): fondos inline claros
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content .panel .panel-body[style*="background:#fff"],
html[data-cwisp-scheme="dark"] #content .panel .panel-body[style*="background: #fff"]{
  background-color: transparent !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-changelog-entry{
  background: rgba(var(--cw-accent-rgb),.08) !important;
  border-left-color: var(--cw-accent) !important;
}
html[data-cwisp-scheme="dark"] #content .cwisp-changelog-notes{
  color: #d7e0f0 !important;
}

/* --------------------------------------------------------------------------
   4I. CKEditor: chrome oscuro (toolbar, combos, statusbar)
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] .cke{
  border-color: rgba(146,168,208,.28) !important;
  border-radius: 10px;
  overflow: hidden;
}
html[data-cwisp-scheme="dark"] .cke_top{
  background: #182136 !important;
  border-bottom: 1px solid rgba(146,168,208,.20) !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-cwisp-scheme="dark"] .cke_bottom{
  background: #182136 !important;
  border-top: 1px solid rgba(146,168,208,.20) !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-cwisp-scheme="dark"] .cke_toolgroup{
  background: rgba(255,255,255,.05) !important;
  background-image: none !important;
  border-color: rgba(146,168,208,.18) !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_button{
  background-image: none !important;
  filter: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_button_on{
  background: rgba(var(--cw-accent-rgb),.22) !important;
  box-shadow: none !important;
  border-color: rgba(var(--cw-accent-rgb),.4) !important;
}
html[data-cwisp-scheme="dark"] a.cke_button_off:hover,
html[data-cwisp-scheme="dark"] a.cke_button_off:focus,
html[data-cwisp-scheme="dark"] a.cke_button_off:active{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(146,168,208,.30) !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .cke_combo,
html[data-cwisp-scheme="dark"] a.cke_combo_button{
  background: rgba(255,255,255,.05) !important;
  background-image: none !important;
  border-color: rgba(146,168,208,.18) !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .cke_combo_text,
html[data-cwisp-scheme="dark"] .cke_combo_open{ color: #d7e0f0 !important; }
html[data-cwisp-scheme="dark"] .cke_combo_off a.cke_combo_button:hover,
html[data-cwisp-scheme="dark"] .cke_combo_on a.cke_combo_button{
  background: rgba(255,255,255,.10) !important;
}
html[data-cwisp-scheme="dark"] .cke_voice_label,
html[data-cwisp-scheme="dark"] .cke_path,
html[data-cwisp-scheme="dark"] .cke_path_item,
html[data-cwisp-scheme="dark"] .cke_path_empty{
  color: rgba(200,214,238,.65) !important;
  text-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .cke_contents{ border-color: rgba(146,168,208,.18) !important; }
html[data-cwisp-scheme="dark"] .cke_toolbar_separator{ background-color: rgba(146,168,208,.25) !important; }

/* Modo fuente (Source): el textarea hereda color blanco del color-scheme
   dark pero el fondo del skin queda claro/transparente → texto invisible. */
html[data-cwisp-scheme="dark"] textarea.cke_source,
html[data-cwisp-scheme="dark"] .cke_source{
  background: #0f172a !important;
  background-image: none !important;
  color: #e8edf7 !important;
  caret-color: #e8edf7 !important;
  border: 0 !important;
  color-scheme: dark;
}
html[data-cwisp-scheme="dark"] .cke_wysiwyg_frame,
html[data-cwisp-scheme="dark"] .cke_contents iframe{
  background: #fff !important;
}
/* Panel flotante del editor (combos/color) */
html[data-cwisp-scheme="dark"] .cke_panel{
  background: #1c2539 !important;
  border-color: rgba(146,168,208,.30) !important;
}

/* Iconos del toolbar: el skin moono usa un sprite PNG oscuro (icons.png)
   pensado para fondos claros, así que sobre el toolbar oscuro los botones se
   veían como cuadritos negros. Se invierten para que queden claros. */
html[data-cwisp-scheme="dark"] .cke_button_icon,
html[data-cwisp-scheme="dark"] .cke_button_arrow,
html[data-cwisp-scheme="dark"] .cke_combo_arrow,
html[data-cwisp-scheme="dark"] .cke_toolbar_collapse_icon,
html[data-cwisp-scheme="dark"] .cke_menuarrow,
html[data-cwisp-scheme="dark"] .cke_dialog_close_button{
  filter: invert(.92) !important;
}
html[data-cwisp-scheme="dark"] .cke_button_label{
  color: #d7e0f0 !important;
}
html[data-cwisp-scheme="dark"] a.cke_button_disabled .cke_button_icon,
html[data-cwisp-scheme="dark"] .cke_combo_disabled .cke_combo_arrow{
  opacity: .35 !important;
}

/* Diálogos del editor (Link, Smiley/emojis, etc.): chrome oscuro. Sin esto se
   abrían blancos junto al toolbar oscuro (p.ej. el selector de emojis). */
html[data-cwisp-scheme="dark"] .cke_dialog_body{
  background: #171f2d !important;
  border-color: rgba(146,168,208,.30) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
}
html[data-cwisp-scheme="dark"] .cke_dialog_title{
  background: #202a3a !important;
  border-bottom-color: rgba(146,168,208,.20) !important;
  color: #eaf0fb !important;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
html[data-cwisp-scheme="dark"] .cke_dialog_contents,
html[data-cwisp-scheme="dark"] .cke_dialog_contents_body{
  background: #171f2d !important;
  color: #dfe7f5 !important;
}
html[data-cwisp-scheme="dark"] .cke_dialog_footer,
html[data-cwisp-scheme="dark"] .cke_dialog_footer_buttons{
  background: #202a3a !important;
  border-top-color: rgba(146,168,208,.20) !important;
  box-shadow: none !important;
  outline: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_tab{
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border-color: rgba(146,168,208,.22) !important;
  color: #cfd9ea !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_tab_selected{
  background: #171f2d !important;
  border-bottom-color: #171f2d !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] .cke_dialog_ui_input_text input,
html[data-cwisp-scheme="dark"] .cke_dialog_ui_input_password input,
html[data-cwisp-scheme="dark"] .cke_dialog_ui_input_textarea textarea,
html[data-cwisp-scheme="dark"] .cke_dialog_ui_input_select select{
  background: #263246 !important;
  border-color: rgba(146,168,208,.30) !important;
  color: #e8edf7 !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .cke_dialog label,
html[data-cwisp-scheme="dark"] .cke_dialog_ui_labeled_label,
html[data-cwisp-scheme="dark"] .cke_dialog_ui_html{
  color: #cfd9ea !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_ui_button{
  background: rgba(255,255,255,.07) !important;
  background-image: none !important;
  border-color: rgba(146,168,208,.28) !important;
  color: #d7e0f0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_ui_button span{
  text-shadow: none !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_ui_button_ok{
  background: var(--cw-accent, #348fe2) !important;
  border-color: var(--cw-accent, #348fe2) !important;
  color: #ffffff !important;
}
html[data-cwisp-scheme="dark"] a.cke_dialog_ui_button:hover{
  border-color: rgba(146,168,208,.50) !important;
}
/* Tabla del selector de emojis (Smiley): celdas transparentes sobre oscuro */
html[data-cwisp-scheme="dark"] .cke_dialog_contents_body table,
html[data-cwisp-scheme="dark"] .cke_dialog_contents_body td{
  background: transparent !important;
  border-color: rgba(146,168,208,.18) !important;
}

/* --------------------------------------------------------------------------
   4J. Login v2 — aurora animada + tarjeta con anillo de acento
   -------------------------------------------------------------------------- */
.login-cover .login-cover-bg{
  background:
    radial-gradient(900px 500px at 15% 8%, rgba(var(--cw-accent-rgb),.30), transparent 60%),
    radial-gradient(700px 420px at 85% 90%, rgba(88,60,220,.26), transparent 62%),
    linear-gradient(180deg, rgba(6,10,22,.62) 0%, rgba(6,10,22,.82) 100%) !important;
}
.login.login-v2 .login-content,
.cwisp-login .login-content{
  background: rgba(10,15,28,.62) !important;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(var(--cw-accent-rgb),.28) !important;
  border-radius: 24px;
  box-shadow:
    0 44px 100px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 70px rgba(var(--cw-accent-rgb),.10),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.login.login-v2 .login-header .brand{
  font-weight: 800;
  letter-spacing: .01em;
}
.login.login-v2 .login-header,
.cwisp-login .login-header{
  margin-bottom: 44px !important;
  padding-bottom: 16px;
}
.login.login-v2 .login-header .icon,
.cwisp-login .login-header .icon{
  margin-bottom: 10px;
}
.login.login-v2 .login-content,
.cwisp-login .login-content{
  margin-top: 24px !important;
}
.login.login-v2 .login-header .brand img,
.cwisp-login .login-header .brand img{
  filter: drop-shadow(0 6px 22px rgba(var(--cw-accent-rgb),.45));
}
.login.login-v2 .login-header small,
.cwisp-login .login-header small{
  color: rgba(214,224,240,.72) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.login.login-v2 .form-control,
.cwisp-login .form-control{
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(146,168,208,.30) !important;
  border-radius: 13px !important;
  height: 48px;
  color: #f2f6fd !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.22);
}
.login.login-v2 .form-control::placeholder,
.cwisp-login .form-control::placeholder{ color: rgba(200,214,238,.48) !important; }
.login.login-v2 .form-control:focus,
.cwisp-login .form-control:focus{
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--cw-accent-rgb),.30) !important;
  background: rgba(13,20,38,.72) !important;
  color: #ffffff !important;
}
.login.login-v2 .btn-primary,
.cwisp-login .btn-primary{
  height: 48px;
  border-radius: 13px !important;
  border: 0 !important;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(var(--cw-accent-rgb),.38), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
.login.login-v2 .btn-primary:hover,
.cwisp-login .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(var(--cw-accent-rgb),.50), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.login.login-v2 .btn-primary::after,
.cwisp-login .btn-primary::after{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.login.login-v2 .btn-primary:hover::after,
.cwisp-login .btn-primary:hover::after{ left: 130%; }
.login.login-v2 a,
.cwisp-login a{ color: #9db8ff; }
.login.login-v2 a:hover,
.cwisp-login a:hover{ color: #c3d4ff; text-decoration: none; }
.login.login-v2 .m-b-15.m-b-15,
.login.login-v2 .checkbox{ color: rgba(214,224,240,.8); }


/* ==========================================================================
   SmartOLT / ONU modales en MODO OSCURO (rev 54)
   colombiawisp.css fuerza look claro (#fff / #172033 / #6b5500) con
   !important y gana por especificidad a las reglas dark genéricas, dejando
   texto oscuro sobre fondo oscuro. Estas reglas replican los selectores con
   prefijo html[data-cwisp-scheme="dark"] (especificidad estrictamente mayor)
   y cargan después (extra.css va tras colombiawisp.css).
   ========================================================================== */

/* ---------- jConfirm de la vista OLT (WAN/WiFi/TR-069) ---------- */
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box{
  color: #dbe4f3 !important;
  background: #1c2539 !important;
  border-color: rgba(146,168,208,.22) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{
  color: #e8edf7 !important;
  background: #182136 !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-closeIcon{
  color: #8ea3c4 !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .control-label,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content label:not(.control-label):not(.form-check-label){
  color: #c9d5ea !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .cwisp-olt-form-modal h5{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .cwisp-olt-form-modal hr{
  border-top-color: rgba(146,168,208,.18);
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .text-muted,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .form-text{
  color: rgba(200,214,238,.60) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .form-control,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .form-control[readonly]{
  color: #e8edf7 !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25);
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .input-group-addon{
  color: #c9d5ea;
  background: rgba(255,255,255,.08);
  border-color: rgba(146,168,208,.25);
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.25) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}
/* Tabs internas del modal (WAN/WiFi…) */
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .cwisp-modal-tabs{
  background: #1c2539;
  border-bottom-color: rgba(146,168,208,.22);
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .cwisp-modal-tabs > li > a{
  color: #aeb9c9;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .cwisp-modal-tabs > li.active > a{
  color: var(--cw-accent, #348fe2);
  background: #1c2539;
  border-color: rgba(146,168,208,.22) rgba(146,168,208,.22) #1c2539;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-buttons{
  background: #182136 !important;
  border-top-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white{
  color: #d5deee !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(170,190,225,.24) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-default:hover,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button.btn-white:hover{
  background: rgba(var(--cw-accent-rgb),.18) !important;
  border-color: rgba(var(--cw-accent-rgb),.45) !important;
  color: #ffffff !important;
}
/* Mini tablas del modal de perfiles (T-CONT / GEM): jConfirm está fuera de #content. */
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.cwisp-olt-detail-table,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.table-condensed{
  color: #dbe4f3 !important;
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.cwisp-olt-detail-table > thead > tr > th,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.table-condensed > thead > tr > th{
  color: #e8edf7 !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.22) !important;
}
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.cwisp-olt-detail-table > tbody > tr > td,
html[data-cwisp-scheme="dark"] body.cwisp-olt-view-active .jconfirm.jconfirm-modern .jconfirm-content table.table-condensed > tbody > tr > td{
  color: #dbe4f3 !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(146,168,208,.18) !important;
}

/* ---------- Modal Bootstrap ONU CLIENTE (#modaltmp SmartOLT) ---------- */
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt .control-label{
  color: var(--cw-text, #edf2f8);
}
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt .modal-footer{
  background: rgba(255,255,255,.04);
  border-top-color: var(--cw-border, #344156);
}
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt .alert-yellow{
  color: #f2d34d;
  background: rgba(252,209,22,.10);
}
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt .btn-white{
  background: rgba(255,255,255,.07);
  border-color: rgba(170,190,225,.24);
  color: #d5deee;
}
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt .btn-white:hover{
  background: rgba(var(--cw-accent-rgb),.18);
  border-color: rgba(var(--cw-accent-rgb),.45);
  color: #ffffff;
}
html[data-cwisp-scheme="dark"] #modaltmp.cwisp-modal-smartolt select[readonly].select2-hidden-accessible + .select2-container .select2-selection,
html[data-cwisp-scheme="dark"] #modaltmp select[readonly].select2-hidden-accessible + .select2-container .select2-selection{
  background: rgba(255,255,255,.06);
  color: #e8edf7;
}

/* ONU CLIENTE / getmodal: cabecera (y footer) fijos; el cuerpo hace scroll.
   onu_detail se inyecta tras el header. Sin esto, overflow:hidden del
   .modal-content en móvil recorta la tabla y los botones. */
#modaltmp .modal-content,
#modaltmp2 .modal-content{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
#modaltmp .modal-header,
#modaltmp2 .modal-header,
#modaltmp .modal-footer,
#modaltmp2 .modal-footer{
  flex: 0 0 auto;
}
#modaltmp .modal-content > form,
#modaltmp2 .modal-content > form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0;
}
#modaltmp .modal-body,
#modaltmp2 .modal-body,
#modaltmp .modal-content > .panel,
#modaltmp2 .modal-content > .panel{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#modaltmp .cwisp-onu-detail .panel{
  margin-bottom: 0;
}
#modaltmp .cwisp-onu-detail-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
#modaltmp .cwisp-onu-detail-actions .btn{
  margin: 0;
}

/* --------------------------------------------------------------------------
   Modal genérico getmodal (#modaltmp/#modaltmp2) legible en modo oscuro.
   Cubre "Ver equipo" / ONU CLIENTE (ajax/viewuser?action=smartolt ->
   admin.ajax.onu_detail) y cualquier otro modal ajax inyectado por
   getmodal()/getmodal2().

   Diagnóstico: colombiawisp.css ya oscurece .modal-content y .panel vía
   tokens (--cw-surface-panel/--cw-text), y la regla 3073 deja las tablas
   de modales con fondo transparente. PERO el tema base (app.min.css) fija
   color oscuro directamente en `.table td/th`: una regla propia del <td>
   siempre gana a la herencia desde el panel, así que el texto quedaba
   oscuro sobre fondo oscuro. Aquí se fuerza la cadena completa de color
   solo en estos contenedores -> cero impacto fuera de los modales ajax.
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #modaltmp .modal-content,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-content{
  background: var(--cw-surface-panel, #1c2539) !important;
  color: var(--cw-text, #e8edf7);
  border: 1px solid rgba(146,168,208,.22);
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-header,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-header{
  background: var(--cw-surface-subtle, rgba(255,255,255,.045)) !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
  color: var(--cw-text, #eaf0fb);
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-title,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-title,
html[data-cwisp-scheme="dark"] #modaltmp .modal-title i,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-title i{
  color: #eaf0fb;
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-header .close,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-header .close{
  color: #cfe0f7;
  opacity: .85;
  text-shadow: none;
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-header .close:hover,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-header .close:hover{
  color: #ffffff;
  opacity: 1;
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-footer,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-footer{
  background: var(--cw-surface-subtle, rgba(255,255,255,.04));
  border-top-color: rgba(146,168,208,.18);
}

/* panel-default interno (admin.ajax.onu_detail usa panel+tabla, sin modal-body) */
html[data-cwisp-scheme="dark"] #modaltmp .panel,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel{
  background: transparent !important;
  border-color: rgba(146,168,208,.22) !important;
  box-shadow: none;
  color: #e6ecf7;
}
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading{
  background: rgba(255,255,255,.05) !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading h1,
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading h2,
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading h3,
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading h4,
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-heading h5,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading h1,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading h2,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading h3,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading h4,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-heading h5{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .panel > .panel-body,
html[data-cwisp-scheme="dark"] #modaltmp2 .panel > .panel-body{
  color: #e6ecf7;
}

/* Tablas de cualquier modal en oscuro: el fondo ya es transparente (3073);
   falta forzar el TEXTO claro y bordes suaves (misma receta que #content). */
html[data-cwisp-scheme="dark"] .modal .table > tbody > tr > td,
html[data-cwisp-scheme="dark"] .modal .table > tbody > tr > th,
html[data-cwisp-scheme="dark"] .modal .table > tfoot > tr > td,
html[data-cwisp-scheme="dark"] .modal .table > tfoot > tr > th{
  color: rgba(230,236,248,.92) !important;
  border-color: rgba(146,168,208,.15) !important;
}
html[data-cwisp-scheme="dark"] .modal .table > thead > tr > th{
  color: #eaf0fb !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] .modal .table-bordered,
html[data-cwisp-scheme="dark"] .modal .table-bordered > thead > tr > th,
html[data-cwisp-scheme="dark"] .modal .table-bordered > tbody > tr > td,
html[data-cwisp-scheme="dark"] .modal .table-bordered > tfoot > tr > th,
html[data-cwisp-scheme="dark"] .modal .table-bordered > tfoot > tr > td{
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] .modal .table strong,
html[data-cwisp-scheme="dark"] .modal .table b{
  color: inherit;
}

/* DataTables / alerts dentro de getmodal (#modaltmp): Pendiente ARCA, etc. */
html[data-cwisp-scheme="dark"] #modaltmp .modal-body,
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-body{
  color: var(--cw-text, #e8edf7);
}
html[data-cwisp-scheme="dark"] #modaltmp .text-muted,
html[data-cwisp-scheme="dark"] #modaltmp2 .text-muted{
  color: rgba(200,212,232,.62) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp code,
html[data-cwisp-scheme="dark"] #modaltmp2 code{
  background: rgba(255,255,255,.08);
  color: #cfe0f7;
  border-radius: 4px;
  padding: .1em .35em;
}
html[data-cwisp-scheme="dark"] #modaltmp .alert-info,
html[data-cwisp-scheme="dark"] #modaltmp2 .alert-info,
html[data-cwisp-scheme="dark"] .modal .alert-info{
  background: rgba(117,191,255,.12) !important;
  border-color: rgba(117,191,255,.35) !important;
  color: #a8ddff !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .alert-info .text-muted,
html[data-cwisp-scheme="dark"] #modaltmp2 .alert-info .text-muted,
html[data-cwisp-scheme="dark"] .modal .alert-info .text-muted{
  color: rgba(168,221,255,.75) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .table-striped > tbody > tr:nth-of-type(odd),
html[data-cwisp-scheme="dark"] #modaltmp .table-striped > tbody > tr:nth-of-type(odd) > td,
html[data-cwisp-scheme="dark"] #modaltmp2 .table-striped > tbody > tr:nth-of-type(odd),
html[data-cwisp-scheme="dark"] #modaltmp2 .table-striped > tbody > tr:nth-of-type(odd) > td{
  background: rgba(255,255,255,.035) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .table-striped > tbody > tr:nth-of-type(even),
html[data-cwisp-scheme="dark"] #modaltmp .table-striped > tbody > tr:nth-of-type(even) > td,
html[data-cwisp-scheme="dark"] #modaltmp2 .table-striped > tbody > tr:nth-of-type(even),
html[data-cwisp-scheme="dark"] #modaltmp2 .table-striped > tbody > tr:nth-of-type(even) > td{
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] #modaltmp table.dataTable thead th,
html[data-cwisp-scheme="dark"] #modaltmp2 table.dataTable thead th{
  background: rgba(255,255,255,.06) !important;
  color: #eaf0fb !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp div.dataTables_wrapper,
html[data-cwisp-scheme="dark"] #modaltmp2 div.dataTables_wrapper{
  color: rgba(230,236,248,.88);
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_length,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_filter,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_info,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_length,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_filter,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_info,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate{
  color: rgba(230,236,248,.82) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_filter input,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_length select,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_filter input,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_length select{
  background: rgba(0,0,0,.28) !important;
  color: #eaf0fb !important;
  border: 1px solid rgba(146,168,208,.30) !important;
  border-radius: 6px;
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button{
  color: #cfe0f7 !important;
  background: transparent !important;
  border-color: transparent !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button.current,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button.current:hover,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button.current,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button.current:hover{
  background: rgba(var(--cw-accent-rgb, 52,143,226),.28) !important;
  color: #ffffff !important;
  border: 1px solid rgba(var(--cw-accent-rgb, 52,143,226),.45) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button:hover,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button:hover{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button.disabled,
html[data-cwisp-scheme="dark"] #modaltmp .dataTables_paginate .paginate_button.disabled:hover,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button.disabled,
html[data-cwisp-scheme="dark"] #modaltmp2 .dataTables_paginate .paginate_button.disabled:hover{
  color: rgba(200,212,232,.35) !important;
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .modal-body a:not(.btn),
html[data-cwisp-scheme="dark"] #modaltmp2 .modal-body a:not(.btn){
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .btn-primary,
html[data-cwisp-scheme="dark"] #modaltmp2 .btn-primary{
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente .dataTables_wrapper,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable thead th,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable tbody td{
  background-color: transparent !important;
  color: rgba(230,236,248,.92) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable thead th{
  background: rgba(255,255,255,.06) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable.display tbody tr.odd,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable.display tbody tr.odd > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable tbody tr.odd,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable tbody tr.odd > .sorting_1{
  background-color: rgba(255,255,255,.035) !important;
  background: rgba(255,255,255,.035) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable.display tbody tr.even,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable.display tbody tr.even > .sorting_1,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable tbody tr.even,
html[data-cwisp-scheme="dark"] #modaltmp .cw-afip-pendiente table.dataTable tbody tr.even > .sorting_1{
  background-color: transparent !important;
  background: transparent !important;
}

/* Modal agregar/editar factura (viewuser_modal_editinvoice): .invoice y
   .table-invoice vienen con fondo blanco forzado en colombiawisp.css. */
html[data-cwisp-scheme="dark"] #modaltmp .invoice,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice,
html[data-cwisp-scheme="dark"] .modal .invoice{
  background: transparent !important;
  color: var(--cw-text, #e8edf7) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice label,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice label,
html[data-cwisp-scheme="dark"] .modal .invoice label,
html[data-cwisp-scheme="dark"] #modaltmp .invoice .control-label,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice .control-label,
html[data-cwisp-scheme="dark"] .modal .invoice .control-label{
  color: rgba(230,236,248,.88) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .table-invoice thead th,
html[data-cwisp-scheme="dark"] #modaltmp2 .table-invoice thead th,
html[data-cwisp-scheme="dark"] .modal .table-invoice thead th{
  background: rgba(255,255,255,.06) !important;
  color: #eaf0fb !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .table-invoice > tbody > tr > td,
html[data-cwisp-scheme="dark"] #modaltmp2 .table-invoice > tbody > tr > td,
html[data-cwisp-scheme="dark"] .modal .table-invoice > tbody > tr > td{
  background: transparent !important;
  color: rgba(230,236,248,.92) !important;
  border-color: rgba(146,168,208,.14) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice .form-control,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice .form-control,
html[data-cwisp-scheme="dark"] .modal .invoice .form-control,
html[data-cwisp-scheme="dark"] #modaltmp .invoice textarea.form-control,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice textarea.form-control{
  background: rgba(0,0,0,.22) !important;
  color: #eaf0fb !important;
  border-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice .form-control::placeholder,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice .form-control::placeholder{
  color: rgba(200,212,232,.45) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price,
html[data-cwisp-scheme="dark"] .modal .invoice-price,
html[data-cwisp-scheme="dark"] #modaltmp .invoice .invoice-price,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice .invoice-price,
html[data-cwisp-scheme="dark"] .modal .invoice .invoice-price{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(146,168,208,.18) !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price-left,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price-left,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price-right,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price-right,
html[data-cwisp-scheme="dark"] .modal .invoice-price-left,
html[data-cwisp-scheme="dark"] .modal .invoice-price-right{
  background: transparent !important;
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price-row,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price-row,
html[data-cwisp-scheme="dark"] .modal .invoice-price-row,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .sub-price,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .sub-price,
html[data-cwisp-scheme="dark"] .modal .invoice-price .sub-price,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .sub-price small,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .sub-price small,
html[data-cwisp-scheme="dark"] .modal .invoice-price .sub-price small,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .sub-price i,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .sub-price i,
html[data-cwisp-scheme="dark"] .modal .invoice-price .sub-price i,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .spsub,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .spdesc,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .spimp,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .spimp2,
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price .spperc,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .spsub,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .spdesc,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .spimp,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .spimp2,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price .spperc{
  color: rgba(230,236,248,.92) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice-price-value,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice-price-value,
html[data-cwisp-scheme="dark"] .modal .invoice-price-value{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice .well,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice .well,
html[data-cwisp-scheme="dark"] .modal .invoice .well{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.18) !important;
  color: rgba(230,236,248,.92) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp .invoice hr,
html[data-cwisp-scheme="dark"] #modaltmp2 .invoice hr{
  border-top-color: rgba(146,168,208,.2) !important;
}

/* Panel Notas (viewuser documentos): timeline con fondo claro forzado. */
.panel-notas .panel-notas-body{
  background: #d9e0e7;
}
html[data-cwisp-scheme="dark"] .panel-notas .panel-notas-body,
html[data-cwisp-scheme="dark"] .panel-notas .panel-body.inbox{
  background: rgba(0,0,0,.22) !important;
  color: rgba(230,236,248,.92) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-time,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-time .date,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-time .time{
  color: rgba(200,212,232,.72) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-body{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.2) !important;
  color: rgba(230,236,248,.92) !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-body:before{
  border-right-color: rgba(255,255,255,.06) !important;
  border-left-color: rgba(255,255,255,.06) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-header,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-header .username,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-header .username a,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-content,
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-content p{
  color: rgba(230,236,248,.92) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline .timeline-header .text-muted{
  color: rgba(200,212,232,.55) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline:before{
  background: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] .panel-notas .timeline > li:before,
html[data-cwisp-scheme="dark"] .panel-notas .timeline > li:after{
  background: rgba(146,168,208,.45) !important;
  border-color: rgba(146,168,208,.45) !important;
}

/* Utilidades de texto dentro de modales (misma receta que #content) */
html[data-cwisp-scheme="dark"] .modal .text-muted,
html[data-cwisp-scheme="dark"] .modal .table td .text-muted,
html[data-cwisp-scheme="dark"] .modal small.text-muted{
  color: rgba(200,214,238,.62) !important;
}
html[data-cwisp-scheme="dark"] .modal .table td.text-success,
html[data-cwisp-scheme="dark"] .modal .table td .text-success{ color: #3ddc84 !important; }
html[data-cwisp-scheme="dark"] .modal .table td.text-danger,
html[data-cwisp-scheme="dark"] .modal .table td .text-danger{ color: #ff6b7d !important; }
html[data-cwisp-scheme="dark"] .modal .table td.text-warning,
html[data-cwisp-scheme="dark"] .modal .table td .text-warning{ color: #ffc53d !important; }
html[data-cwisp-scheme="dark"] .modal .table td.text-info,
html[data-cwisp-scheme="dark"] .modal .table td .text-info{ color: #3bc9db !important; }
html[data-cwisp-scheme="dark"] .modal .table td.text-primary,
html[data-cwisp-scheme="dark"] .modal .table td .text-primary{ color: #6aa2ff !important; }

/* <code> bootstrap (#c7254e sobre #f9f2f4) desentona y cansa en oscuro */
html[data-cwisp-scheme="dark"] .modal code{
  background: rgba(255,255,255,.07);
  color: #ffd479;
  border-radius: 6px;
}
html[data-cwisp-scheme="dark"] .modal hr{
  border-top-color: rgba(146,168,208,.18);
}
html[data-cwisp-scheme="dark"] .modal .well,
html[data-cwisp-scheme="dark"] .modal .well-sm,
html[data-cwisp-scheme="dark"] .modal .well-lg{
  background: rgba(255,255,255,.05);
  border-color: rgba(146,168,208,.18);
  color: #e6ecf7;
}

/* --------------------------------------------------------------------------
   WhatsApp Meta (ajustes_plantillas): tab de plantillas + modal crear/editar.
   El <style> inline de la vista fija fondos claros (#f5f7f9 / #fff / #f8fafb)
   y, al usar el ID #waTemplateModal, gana a las reglas genéricas de esquema.
   Se fuerza la variante oscura con la misma especificidad + !important.
   -------------------------------------------------------------------------- */
html[data-cwisp-scheme="dark"] #content .wa-meta-wrap{
  background: var(--cw-surface-page, #0f1520) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-intro{
  background: var(--cw-surface-panel, #171f2d) !important;
  border-color: rgba(146,168,208,.20) !important;
  border-left-color: #25b969 !important;
  box-shadow: none;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-intro h4{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-card{
  background: var(--cw-surface-panel, #171f2d) !important;
  border-color: rgba(146,168,208,.20) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] #content .wa-template-card:hover{
  border-color: #1fa463 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
html[data-cwisp-scheme="dark"] #content .wa-template-add{
  background: rgba(31,164,99,.08) !important;
  color: #4bd78b !important;
  border-color: rgba(53,183,121,.45) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-add span{
  color: rgba(200,214,238,.62) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-template-card h5{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #content .wa-lang{
  background: rgba(255,255,255,.07) !important;
  color: rgba(214,224,240,.75) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-card-section{
  background: rgba(255,255,255,.05) !important;
  color: #cfd9ea !important;
}
html[data-cwisp-scheme="dark"] #content .wa-body-preview{
  color: #dfe7f5 !important;
}
html[data-cwisp-scheme="dark"] #content .wa-footer-preview{
  color: rgba(200,214,238,.60) !important;
  border-left-color: rgba(146,168,208,.30) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-components span{
  background: rgba(255,255,255,.07) !important;
  color: rgba(214,224,240,.72) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-automation-box{
  border-top-color: rgba(146,168,208,.16) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-automation-box label,
html[data-cwisp-scheme="dark"] #content .wa-doc-toggle{
  color: rgba(214,224,240,.72) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-empty-card{
  background: var(--cw-surface-panel, #171f2d) !important;
  border-color: rgba(146,168,208,.30) !important;
  color: rgba(214,224,240,.70) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-wrap .select2-container .select2-selection--single{
  background-color: var(--cw-surface-raised, #263246) !important;
  border-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] #content .wa-meta-wrap .select2-container .select2-selection--single .select2-selection__rendered{
  color: #e8edf7 !important;
}

/* Modal crear/editar plantilla WhatsApp Meta */
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-content{
  background: var(--cw-surface-panel, #1c2539) !important;
  color: var(--cw-text, #e8edf7);
  border: 1px solid rgba(146,168,208,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-header{
  background: var(--cw-surface-subtle, #202a3a) !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-title{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-header .close{
  color: #cfe0f7;
  opacity: .85;
  text-shadow: none;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-header .close:hover{
  color: #ffffff;
  opacity: 1;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .modal-footer{
  background: var(--cw-surface-subtle, #202a3a) !important;
  border-top-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .wa-form-card{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .wa-button-box{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .wa-variable-card h5{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .wa-variable-row code{
  background: rgba(23,132,79,.20) !important;
  color: #5eeaa0 !important;
}
html[data-cwisp-scheme="dark"] #waTemplateModal .checkbox label{
  color: #dfe7f5;
}

/* Editor de plantillas SMS/Telegram (#modaltmp.cw-template-editor-modal):
   la vista fija .textarea-sms #fff, chips claros y botón Cancelar blanco. */
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .textarea-sms{
  background: var(--cw-surface-raised, #263246) !important;
  border-color: rgba(146,168,208,.28) !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .textarea-sms:focus{
  border-color: var(--cw-accent, #348fe2) !important;
  box-shadow: 0 0 0 3px rgba(52,143,226,.22) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-heading{
  background: rgba(52,143,226,.10) !important;
  border-color: rgba(146,168,208,.24) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-heading h4{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-heading p{
  color: rgba(200,214,238,.62) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-body label{
  color: #dfe7f5 !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-meta{
  background: rgba(255,255,255,.05) !important;
  color: rgba(200,214,238,.62) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-meta span strong{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-tags > span{
  color: rgba(200,214,238,.62) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-tag{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  border-color: rgba(var(--cw-accent-rgb),.40) !important;
  color: #9ec9f5 !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-tag:hover{
  background: rgba(var(--cw-accent-rgb),.24) !important;
  border-color: var(--cw-accent, #348fe2) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .cw-template-footer{
  background: var(--cw-surface-subtle, #202a3a) !important;
  border-top-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .btn-meta-secondary{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(146,168,208,.30) !important;
  color: #d7e0f0 !important;
}
html[data-cwisp-scheme="dark"] #modaltmp.cw-template-editor-modal .btn-meta-secondary:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(146,168,208,.45) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Visor de correos (ajax/viewuser?action=viewmail): el cuerpo es HTML de
   email con estilos inline claros (#f6f6f6 / card #fff / texto oscuro) que
   en modo oscuro quedaba como un bloque blanco imposible. Como los estilos
   son inline no se pueden pisar con reglas normales: se invierte luminancia
   preservando matices (invert(1) + hue-rotate(180deg)) y las imágenes se
   re-invierten para no negativizar el logo. El fondo propio del contenedor
   rellena los huecos y se invierte junto al contenido.
   ========================================================================== */
html[data-cwisp-scheme="dark"] .modal .cw-mail-body{
  background: #f6f6f6;
  filter: invert(1) hue-rotate(180deg);
}
html[data-cwisp-scheme="dark"] .modal .cw-mail-body img{
  filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------------------------------
   4K. Tickets de soporte (viewticket / zendesk): caja del editor, burbujas de
   la conversación, toolbar wysihtml5 y zebra de "Datos del Ticket". La vista
   traía fondos claros fijos (estilos inline + .tkcliente/.tksoporte/.tknota
   en colombiawisp.css). El CONTENIDO del editor wysihtml5 queda claro a
   propósito: igual que en CKEditor, el modo oscuro aplica al chrome, no al
   documento/mensaje.
   -------------------------------------------------------------------------- */
/* Base claro (antes inline en la vista) */
.cw-tk-editor-box{
  background: #f5f5f5;
  margin-bottom: 20px;
  border: 1px solid rgb(211, 216, 222);
  padding: 0 5px;
}
.cw-tk-upload-box{
  background: #fff;
  padding: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.cw-zd-comment{
  border: 1px solid #ddd;
  border-radius: 4px;
}

html[data-cwisp-scheme="dark"] .cw-tk-editor-box{
  background: rgba(255,255,255,.04);
  border-color: rgba(146,168,208,.18);
}
html[data-cwisp-scheme="dark"] .cw-tk-upload-box{
  background: var(--cw-surface-raised, #263246);
  border-color: rgba(146,168,208,.22);
}
html[data-cwisp-scheme="dark"] .cw-zd-comment{
  border-color: rgba(146,168,208,.22);
}

/* Burbujas de la conversación */
html[data-cwisp-scheme="dark"] .tkcliente{
  background: rgba(52,143,226,.10);
  border-color: rgba(102,177,241,.35) !important;
  color: #e2e9f6;
}
html[data-cwisp-scheme="dark"] .tksoporte{
  background: rgba(255,255,255,.045);
  border-color: rgba(146,168,208,.22) !important;
  color: #e2e9f6;
}
html[data-cwisp-scheme="dark"] .tknota{
  background: rgba(224,69,85,.10);
  border-color: rgba(224,69,85,.42) !important;
  color: #f3d9dd;
}
html[data-cwisp-scheme="dark"] .tkcliente .media-heading b,
html[data-cwisp-scheme="dark"] .tksoporte .media-heading b,
html[data-cwisp-scheme="dark"] .tknota .media-heading b,
html[data-cwisp-scheme="dark"] .tkcliente p > b,
html[data-cwisp-scheme="dark"] .tksoporte p > b{
  color: #eaf0fb;
}
html[data-cwisp-scheme="dark"] .tkcliente a:not(.btn),
html[data-cwisp-scheme="dark"] .tksoporte a:not(.btn),
html[data-cwisp-scheme="dark"] .tknota a:not(.btn){
  color: #8fbef5;
}

/* Zebra de "Datos del Ticket" (bloque info) */
html[data-cwisp-scheme="dark"] .infotk .list-group-item{
  background: rgba(255,255,255,.03);
  border-color: rgba(146,168,208,.14);
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] .list-group .ticket-details-children:nth-child(even){
  background: rgba(255,255,255,.06);
}

/* Toolbar wysihtml5 del editor de respuestas/notas (chrome oscuro) */
html[data-cwisp-scheme="dark"] ul.wysihtml5-toolbar{
  background: #182136;
}

/* Modal "Vista previa" del ticket (#cwisp-preview-modal, botón ojo en la
   lista). colombiawisp.css fija .modal-body #f7f9fc y .media #fff con 3
   clases, ganando a las reglas .tk* de arriba: hay que re-oscurarlo aquí
   con la misma (o mayor) especificidad. El logo del bloque .infotk ya
   resuelve vía BrandAssets::invoiceLogo() en la vista. */
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-content{
  background: var(--cw-surface-panel, #1c2539) !important;
  color: var(--cw-text, #e8edf7);
  border: 1px solid rgba(146,168,208,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-header{
  background: var(--cw-surface-subtle, #202a3a) !important;
  border-bottom-color: rgba(146,168,208,.18) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-title{
  color: #eaf0fb !important;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-header .close{
  color: #cfe0f7;
  opacity: .85;
  text-shadow: none;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-header .close:hover{
  color: #ffffff;
  opacity: 1;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .modal-body{
  background: var(--cw-surface-panel, #171f2d) !important;
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content{
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content h2{
  color: #eaf0fb;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .panel,
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .panel-heading,
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .panel-body{
  background: transparent !important;
  border-color: rgba(146,168,208,.18) !important;
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .panel-title{
  color: #eaf0fb !important;
}
/* Gana a .cwisp-preview-modal .cwisp-preview-content .media { background:#fff } */
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(146,168,208,.22) !important;
  color: #e2e9f6;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media.tkcliente{
  background: rgba(52,143,226,.10) !important;
  border-color: rgba(102,177,241,.35) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media.tksoporte{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(146,168,208,.22) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media.tknota{
  background: rgba(224,69,85,.10) !important;
  border-color: rgba(224,69,85,.42) !important;
  color: #f3d9dd;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media-heading b,
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .media p > b{
  color: #eaf0fb;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content a:not(.btn){
  color: #8fbef5;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .list-group-item{
  background: rgba(255,255,255,.03);
  border-color: rgba(146,168,208,.14);
  color: #dfe7f5;
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .list-group .ticket-details-children:nth-child(even){
  background: rgba(255,255,255,.06);
}
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .attached-document .document-name a,
html[data-cwisp-scheme="dark"] .cwisp-preview-modal .cwisp-preview-content .document-file a{
  color: #8fbef5;
}

/* Mensajes de ticket: JSON/URLs largas no deben romper el recuadro */
.tkcliente,
.tksoporte,
.tknota,
.cwisp-preview-modal .cwisp-preview-content .media{
  max-width: 100%;
  overflow: hidden;
}
.tkcliente .media-body,
.tksoporte .media-body,
.tknota .media-body,
.cwisp-preview-modal .cwisp-preview-content .media-body{
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cw-tk-msg{
  font-size: 12.5px;
  margin-top: 11px;
  min-height: 50px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.cw-tk-msg,
.cw-tk-msg *{
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.cw-tk-json{
  display: block;
  margin: 10px 0 0;
  padding: 10px 12px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 11.5px;
  line-height: 1.45;
  border-radius: 6px;
  background: rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .12);
}
html[data-cwisp-scheme="dark"] .cw-tk-json{
  background: rgba(0, 0, 0, .28);
  border-color: rgba(146, 168, 208, .22);
  color: #d7e3f5;
}
.cwisp-preview-modal .modal-body,
.cwisp-preview-modal .cwisp-preview-content{
  overflow-x: hidden;
  max-width: 100%;
}
.cwisp-preview-modal .media-heading{
  overflow-wrap: anywhere;
}

/* Logo ARCA (texto oscuro sobre fondo transparente): en dark mode se aclara. */
.cw-tax-authority-emblem{
  vertical-align: middle;
}
html[data-cwisp-scheme="dark"] .cw-tax-authority-emblem,
html[data-cwisp-scheme="dark"] img[src*="admin/images/arca.png"],
html[data-cwisp-scheme="dark"] img[src*="/images/arca.png"]{
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* Editor de router: recuperar el ancho completo del panel y del formulario. */
#content .cwisp-router-editor{
  width: auto !important;
  max-width: none !important;
  margin-right: -15px !important;
  margin-left: -15px !important;
}
#content .cwisp-router-editor > .col-sm-12,
#content .cwisp-router-editor > [class*="col-"],
#content .cwisp-router-editor .panel,
#content .cwisp-router-editor .panel-body{
  width: 100% !important;
  max-width: 100% !important;
}
#content .cwisp-router-editor > .col-sm-12{
  flex: 0 0 100% !important;
}
#content .cwisp-router-editor .panel > .d-flex{
  width: 100%;
  min-width: 0;
}
#content .cwisp-router-editor .tab-overflow{
  width: auto !important;
  min-width: 0;
}

@media (min-width: 768px){
  #content .cwisp-router-editor #Router-edit-configuracion{
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: none !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
  }
  #content .cwisp-router-editor #Router-edit-configuracion > .col-md-6{
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    float: none !important;
  }
}

/* Restore backup: la fila completa ES la barra (JS pinta box-shadow + fondo con !important) */
#data-backup tbody tr.cwisp-restore-running {
  --cw-restore-pct: 0;
}
html[data-cwisp-scheme="dark"] #data-backup tbody tr.cwisp-restore-running > td,
:root[data-cwisp-scheme="dark"] #data-backup tbody tr.cwisp-restore-running > td,
body[data-cwisp-scheme="dark"] #data-backup tbody tr.cwisp-restore-running > td {
  color: #fff !important;
}
#data-backup tbody tr.cwisp-restore-locked .cwisp-restore-btn,
#data-backup tbody tr.cwisp-restore-running .cwisp-delete-btn,
#data-backup .cwisp-delete-btn.disabled,
#data-backup tbody tr.cwisp-restore-running button.disabled {
  opacity: .45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Modales operativos: contraste y progreso determinista */
html:not([data-cwisp-scheme="dark"]) .modal-header .modal-title{
  color: #17233a !important;
}
html:not([data-cwisp-scheme="dark"]) .modal-header .modal-title i{
  color: var(--cw-accent-dark, #2563a8) !important;
}
html:not([data-cwisp-scheme="dark"]) .modal-header{
  background: linear-gradient(90deg, rgba(var(--cw-accent-rgb),.14), rgba(var(--cw-accent-rgb),.035) 72%, transparent) !important;
}
.cwisp-progress-card{
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  background: var(--cw-surface-subtle);
}
.cwisp-progress-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--cw-text);
  font-size: 12px;
  font-weight: 650;
}
.cwisp-progress-meta .cwisp-progress-percent{
  flex: 0 0 auto;
  color: var(--cw-accent-dark);
  font-variant-numeric: tabular-nums;
}
.cwisp-progress-card .progress,
.repair-progress-slot .progress{
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100,116,139,.16);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.12);
}
.cwisp-progress-card .progress{
  height: 10px !important;
  margin-bottom: 0;
}
.cwisp-progress-card .progress-bar,
.repair-progress-slot .progress-bar{
  min-width: 0;
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.cwisp-install-log{
  display: block;
  min-height: 150px;
  max-height: 240px;
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid #303b4d;
  border-radius: 8px;
  color: #dbe7f5;
  background: #111827;
  font: 11px/1.55 Consolas, Monaco, "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.25);
}
.repair-progress-slot{
  min-width: 190px;
}
.repair-progress-slot .repair-progress-label{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
}
html[data-cwisp-scheme="dark"] .cwisp-progress-card{
  border-color: rgba(146,168,208,.2);
  background: rgba(255,255,255,.04);
}
html[data-cwisp-scheme="dark"] .cwisp-progress-meta{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .cwisp-progress-meta .cwisp-progress-percent{
  color: #8fc6ff;
}

/* Ficha cliente: galería privada de fachadas tipo cover-flow */
#content .cwisp-facade-card{
  position: relative;
  margin: 18px 0 6px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--cw-border);
  border-top: 3px solid var(--cw-accent);
  border-radius: var(--cw-radius,12px);
  color: var(--cw-text);
  background: var(--cw-card-bg);
  box-shadow: var(--cw-shadow,0 8px 24px rgba(24,39,75,.10));
  outline: none;
}
#content .cwisp-facade-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--cw-accent-rgb),.22), 0 12px 30px rgba(24,39,75,.12);
}
#content .cwisp-facade-header,
#content .cwisp-facade-toolbar,
#content .cwisp-facade-caption{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#content .cwisp-facade-header h4{
  margin: 3px 0 0;
  color: var(--cw-text);
  font-size: 15px;
  font-weight: 800;
}
#content .cwisp-facade-header h4 i{ color: var(--cw-accent-dark); margin-right: 5px; }
#content .cwisp-facade-eyebrow{
  color: var(--cw-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#content .cwisp-facade-counter{
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--cw-accent-dark);
  background: rgba(var(--cw-accent-rgb),.12);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#content .cwisp-facade-toolbar{ margin-top: 12px; }
#content .cwisp-facade-service{ min-width: 0; height: 34px; font-size: 11px; }
#content .cwisp-facade-toolbar .select2-container{ flex: 1 1 auto; min-width: 0; }
#content .cwisp-facade-pick{ flex: 0 0 auto; white-space: nowrap; }
#content .cwisp-facade-stage{
  position: relative;
  height: 230px;
  margin: 13px -8px 0;
  overflow: hidden;
  border-radius: 12px;
  perspective: 1000px;
  touch-action: pan-y;
  border: 1px solid var(--cw-border);
  background: var(--cw-surface-subtle);
}
#content .cwisp-facade-track{
  position: absolute;
  inset: 0 36px;
  transform-style: preserve-3d;
}
#content .cwisp-facade-slide{
  position: absolute;
  top: 16px;
  left: 50%;
  width: min(70%, 280px);
  height: 190px;
  overflow: hidden;
  border: 4px solid var(--cw-card-bg);
  border-radius: 12px;
  background: var(--cw-surface-subtle);
  box-shadow: 0 15px 32px rgba(15,23,42,.24);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.65) translateZ(-180px);
  transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .32s ease, filter .32s ease;
}
#content .cwisp-facade-slide a,
#content .cwisp-facade-slide img{
  display: block;
  width: 100%;
  height: 100%;
}
#content .cwisp-facade-slide img{ object-fit: cover; }
#content .cwisp-facade-slide.is-active{
  z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) rotateY(0) scale(1) translateZ(35px);
}
#content .cwisp-facade-slide.is-left{
  z-index: 3;
  opacity: .72;
  pointer-events: auto;
  filter: saturate(.75);
  transform: translateX(-104%) rotateY(34deg) scale(.78) translateZ(-45px);
}
#content .cwisp-facade-slide.is-right{
  z-index: 3;
  opacity: .72;
  pointer-events: auto;
  filter: saturate(.75);
  transform: translateX(4%) rotateY(-34deg) scale(.78) translateZ(-45px);
}
#content .cwisp-facade-slide.is-far-left{
  z-index: 1;
  opacity: .12;
  transform: translateX(-135%) rotateY(42deg) scale(.6) translateZ(-150px);
}
#content .cwisp-facade-slide.is-far-right{
  z-index: 1;
  opacity: .12;
  transform: translateX(35%) rotateY(-42deg) scale(.6) translateZ(-150px);
}
#content .cwisp-facade-primary-badge{
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #172033;
  background: #fcd116;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  font-size: 9px;
  font-weight: 800;
}
#content .cwisp-facade-nav{
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  transform: translateY(-50%);
  cursor: pointer;
}
#content .cwisp-facade-prev{ left: 7px; }
#content .cwisp-facade-next{ right: 7px; }
#content .cwisp-facade-nav:disabled{ opacity: .3; cursor: default; }
#content .cwisp-facade-empty{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 25px;
  color: var(--cw-muted);
  text-align: center;
}
#content .cwisp-facade-empty.is-visible{ display: flex; }
#content .cwisp-facade-empty i{ margin-bottom: 9px; font-size: 34px; opacity: .55; }
#content .cwisp-facade-empty strong{ color: var(--cw-text); font-size: 13px; }
#content .cwisp-facade-empty span{ max-width: 260px; margin-top: 3px; font-size: 10px; }
#content .cwisp-facade-caption{
  min-height: 38px;
  padding: 7px 3px 0;
}
#content .cwisp-facade-caption > div:first-child{ min-width: 0; }
#content .cwisp-facade-caption b,
#content .cwisp-facade-caption small{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content .cwisp-facade-caption b{ color: var(--cw-text); font-size: 11px; }
#content .cwisp-facade-caption small{ color: var(--cw-muted); font-size: 9px; }
#content .cwisp-facade-caption > div:last-child{ display: flex; gap: 4px; flex: 0 0 auto; }
#content .cwisp-facade-dropzone{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px dashed rgba(var(--cw-accent-rgb),.48);
  border-radius: 10px;
  color: var(--cw-muted);
  background: var(--cw-surface-subtle);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#content .cwisp-facade-dropzone > i{ color: var(--cw-accent-dark); font-size: 20px; }
#content .cwisp-facade-dropzone span{ color: var(--cw-text); font-size: 10px; }
#content .cwisp-facade-dropzone small{ flex-basis: 100%; padding-left: 29px; font-size: 8.5px; }
#content .cwisp-facade-dropzone.is-dragging{
  border-color: var(--cw-accent);
  background: rgba(var(--cw-accent-rgb),.13);
  transform: translateY(-2px);
}
#content .cwisp-facade-dropzone.is-disabled{ opacity: .48; cursor: not-allowed; }
#content .cwisp-facade-upload-row{
  display: grid;
  grid-template-columns: minmax(80px,1fr) minmax(70px,120px);
  gap: 2px 8px;
  align-items: center;
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--cw-surface-subtle);
  font-size: 9px;
}
#content .cwisp-facade-upload-row > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content .cwisp-facade-upload-row .progress{ height: 6px; margin: 0; }
#content .cwisp-facade-upload-row small{ grid-column: 1 / -1; color: var(--cw-muted); }
#content .cwisp-facade-upload-row.is-error small{ color: var(--cw-danger,#ce1126); }
html[data-cwisp-scheme="dark"] #content .cwisp-facade-card{
  border-color: rgba(146,168,208,.2);
  border-top-color: var(--cw-accent);
  background: #17202d;
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}
html[data-cwisp-scheme="dark"] #content .cwisp-facade-stage{ background: rgba(255,255,255,.025); }
html[data-cwisp-scheme="dark"] #content .cwisp-facade-slide{ border-color: #253143; }
@media (max-width: 767px){
  #content .cwisp-facade-card{ margin-top: 15px; padding: 12px; }
  #content .cwisp-facade-toolbar{ align-items: stretch; flex-direction: column; }
  #content .cwisp-facade-pick{ width: 100%; }
  #content .cwisp-facade-stage{ height: 215px; }
  #content .cwisp-facade-slide{ top: 17px; width: 72%; height: 174px; }
  #content .cwisp-facade-slide.is-left{ transform: translateX(-98%) rotateY(30deg) scale(.72); }
  #content .cwisp-facade-slide.is-right{ transform: translateX(-2%) rotateY(-30deg) scale(.72); }
}
@media (prefers-reduced-motion: reduce){
  #content .cwisp-facade-slide,
  #content .cwisp-facade-dropzone{ transition: none; }
}

/* Visor rápido: usa el modal Bootstrap y botones estándar del programa. */
.cwisp-facade-viewer-modal .modal-title i{ margin-right: 7px; color: var(--cw-accent-dark); }
.cwisp-facade-viewer-modal .cwisp-facade-viewer-filter{
  max-width: 440px;
  margin-bottom: 14px;
}
.cwisp-facade-viewer-modal .cwisp-facade-viewer-content > .select2-container{
  display: block;
  max-width: 440px;
  margin-bottom: 14px;
}
.cwisp-facade-viewer-loading,
.cwisp-facade-viewer-empty{
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  color: var(--cw-muted);
  text-align: center;
}
.cwisp-facade-viewer-loading i,
.cwisp-facade-viewer-empty i{ color: var(--cw-accent-dark); font-size: 32px; }
.cwisp-facade-viewer-loading.is-error i{ color: var(--cw-danger,#ce1126); }
.cwisp-facade-viewer-empty{ display: none; }
.cwisp-facade-viewer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 13px;
}
.cwisp-facade-viewer-item{
  position: relative;
  display: block;
  height: 160px;
  overflow: hidden;
  border: 3px solid var(--cw-card-bg);
  border-radius: 11px;
  color: #fff !important;
  background: var(--cw-surface-subtle);
  box-shadow: 0 8px 20px rgba(15,23,42,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cwisp-facade-viewer-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15,23,42,.25);
}
.cwisp-facade-viewer-item img{ width: 100%; height: 100%; object-fit: cover; }
.cwisp-facade-viewer-item:after{
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent,rgba(4,10,20,.88));
}
.cwisp-facade-viewer-item > span{
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 8px;
  left: 9px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cwisp-facade-viewer-item > b{
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #172033;
  background: #fcd116;
  font-size: 8px;
}
html[data-cwisp-scheme="dark"] .cwisp-facade-viewer-item{ border-color: #253143; }
@media (max-width: 575px){
  .cwisp-facade-viewer-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .cwisp-facade-viewer-item{ height: 125px; }
}

/* Visor de fachada dentro del mismo modal Bootstrap usado por getmodal(). */
#cwisp-facade-image-modal{
  z-index: 200000 !important;
}
.modal-backdrop.cwisp-facade-image-backdrop{
  z-index: 199990 !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-body{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(64vh,580px);
  min-height: 280px;
  padding: 12px 52px;
}
#cwisp-facade-image-modal .cwisp-facade-image-canvas{
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius,12px);
  background: var(--cw-surface-subtle);
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}
#cwisp-facade-image-modal .cwisp-facade-image-canvas.is-zoomed{
  cursor: grab;
}
#cwisp-facade-image-modal .cwisp-facade-image-canvas.is-dragging{
  cursor: grabbing;
}
#cwisp-facade-image-modal .cwisp-facade-image-canvas img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
}
#cwisp-facade-image-modal .cwisp-facade-image-loader{
  position: absolute;
  color: var(--cw-accent);
  font-size: 28px;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar{
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  display: inline-flex;
  align-items: stretch;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn,
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn.btn-white,
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn.btn-white:hover,
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn.btn-white:focus{
  min-width: 40px;
  min-height: 38px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #f8fafc !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn + .btn{
  border-left: 1px solid rgba(255,255,255,.18) !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:first-child{
  border-radius: 9px 0 0 9px;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:last-child{
  border-radius: 0 9px 9px 0;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:hover,
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:focus{
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:disabled,
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn[disabled]{
  opacity: .45 !important;
  color: #cbd5e1 !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar i{
  color: inherit !important;
  font-size: 13px;
}
#cwisp-facade-image-modal .cwisp-facade-zoom-reset{
  min-width: 62px;
  font-variant-numeric: tabular-nums;
}
#cwisp-facade-image-modal .cwisp-facade-zoom-value{
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
#cwisp-facade-image-modal .cwisp-facade-image-prev,
#cwisp-facade-image-modal .cwisp-facade-image-next,
#cwisp-facade-image-modal .cwisp-facade-image-prev.btn-white,
#cwisp-facade-image-modal .cwisp-facade-image-next.btn-white{
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.4) !important;
  transform: translateY(-50%);
}
#cwisp-facade-image-modal .cwisp-facade-image-prev:hover,
#cwisp-facade-image-modal .cwisp-facade-image-next:hover,
#cwisp-facade-image-modal .cwisp-facade-image-prev.btn-white:hover,
#cwisp-facade-image-modal .cwisp-facade-image-next.btn-white:hover{
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-prev i,
#cwisp-facade-image-modal .cwisp-facade-image-next i{
  color: inherit !important;
}
#cwisp-facade-image-modal .cwisp-facade-image-prev{ left: 10px; }
#cwisp-facade-image-modal .cwisp-facade-image-next{ right: 10px; }
#cwisp-facade-image-modal .cwisp-facade-image-counter{
  margin-right: auto;
  color: var(--cw-text, #334155);
  font-size: 12px;
  font-weight: 700;
}
html[data-cwisp-scheme="dark"] #cwisp-facade-image-modal .cwisp-facade-image-counter{
  color: #d7e3f6 !important;
}
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-prev,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-next{
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.18) !important;
}
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn.btn-white,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-prev,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-next,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-zoom-value{
  color: #0f172a !important;
}
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn + .btn{
  border-left-color: #e2e8f0 !important;
}
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn:hover,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-prev:hover,
html[data-cwisp-scheme="light"] #cwisp-facade-image-modal .cwisp-facade-image-next:hover{
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
@media (max-width: 575px){
  #cwisp-facade-image-modal .modal-dialog{
    width: auto;
    margin: 8px;
  }
  #cwisp-facade-image-modal .cwisp-facade-image-body{
    height: min(62vh,560px);
    min-height: 260px;
    padding: 8px 40px !important;
  }
  #cwisp-facade-image-modal .cwisp-facade-image-prev,
  #cwisp-facade-image-modal .cwisp-facade-image-next{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  #cwisp-facade-image-modal .cwisp-facade-image-prev{ left: 4px; }
  #cwisp-facade-image-modal .cwisp-facade-image-next{ right: 4px; }
  #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar{
    top: 6px;
  }
  #cwisp-facade-image-modal .cwisp-facade-image-zoom-toolbar .btn{
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
  }
  #cwisp-facade-image-modal .cwisp-facade-zoom-reset{
    min-width: 62px;
  }
}
@media (prefers-reduced-motion: reduce){
  #cwisp-facade-image-modal .cwisp-facade-image-canvas img{
    transition: none;
  }
}

/* File upload NAP: preview tipo Filament FileUpload (tokens --cw-* para claro/oscuro) */
.nap-file-upload{display:block;width:100%}
.nap-file-upload__panel{
  position:relative;
  overflow:hidden;
  border:1px dashed var(--cw-border-strong, #cbd5e1);
  border-radius:12px;
  background:var(--cw-card-bg, var(--cw-surface-panel, #fff));
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.nap-file-upload.is-dragging .nap-file-upload__panel,
.nap-file-upload__panel:hover{
  border-color:rgba(var(--cw-accent-rgb),.55);
  background:color-mix(in srgb, var(--cw-accent) 8%, var(--cw-card-bg, #fff));
  box-shadow:0 0 0 3px rgba(var(--cw-accent-rgb),.12);
}
.nap-file-upload__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:168px;
  padding:22px 16px;
  color:var(--cw-text-muted, var(--cw-muted, #64748b));
  text-align:center;
  cursor:pointer;
}
.nap-file-upload__empty[hidden]{display:none!important}
.nap-file-upload__icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:4px;
  border-radius:999px;
  background:rgba(var(--cw-accent-rgb),.14);
  color:var(--cw-accent, #2563eb);
  font-size:18px;
}
.nap-file-upload__empty strong{color:var(--cw-text, #334155);font-size:13px;font-weight:600}
.nap-file-upload__empty u{color:var(--cw-accent, #2563eb);text-decoration:underline}
.nap-file-upload__empty small{display:block;max-width:280px;color:var(--cw-text-muted, var(--cw-muted, #94a3b8));font-size:11px;line-height:1.35}
.nap-file-upload__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:10px;
}
.nap-file-upload__grid[hidden]{display:none!important}
.nap-file-upload__card,
.nap-file-upload__add{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--cw-border-strong, #e2e8f0);
  border-radius:12px;
  background:#0f172a;
}
.nap-file-upload__card a,
.nap-file-upload__card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.nap-file-upload__card.is-primary{box-shadow:0 0 0 2px #f59e0b}
.nap-file-upload__name{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:22px 8px 7px;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,.82));
  color:#fff;
  font-size:10px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}
.nap-file-upload__name small{display:block;opacity:.8;font-size:9px}
.nap-file-upload__actions{
  position:absolute;
  top:6px;right:6px;
  display:flex;
  gap:4px;
  z-index:2;
}
.nap-file-upload__actions button,
.nap-file-upload__badge{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:11px;
  cursor:pointer;
}
.nap-file-upload__badge{background:#f59e0b;color:#111;cursor:default}
.nap-file-upload__actions .nap-photo-delete,
.nap-file-upload__remove{background:rgba(185,28,28,.92)}
.nap-file-upload__add{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px dashed rgba(var(--cw-accent-rgb),.50);
  background:rgba(var(--cw-accent-rgb),.10);
  color:var(--cw-accent, #2563eb);
  cursor:pointer;
}
.nap-file-upload__add[hidden]{display:none!important}
.nap-file-upload__add i{font-size:16px}
.nap-file-upload__add span{font-size:11px;font-weight:600}
.nap-file-upload__input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.jconfirm .nap-file-upload{margin-top:4px}

html[data-cwisp-scheme="dark"] .nap-file-upload__panel{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] .nap-file-upload.is-dragging .nap-file-upload__panel,
html[data-cwisp-scheme="dark"] .nap-file-upload__panel:hover{
  border-color: rgba(var(--cw-accent-rgb),.55) !important;
  background: rgba(var(--cw-accent-rgb),.12) !important;
  box-shadow: 0 0 0 3px rgba(var(--cw-accent-rgb),.18) !important;
}
html[data-cwisp-scheme="dark"] .nap-file-upload__empty{ color: #8ea3c4 !important; }
html[data-cwisp-scheme="dark"] .nap-file-upload__empty strong{ color: #e8edf7 !important; }
html[data-cwisp-scheme="dark"] .nap-file-upload__empty u{ color: #8fc6ff !important; }
html[data-cwisp-scheme="dark"] .nap-file-upload__empty small{ color: #7e93b8 !important; }
html[data-cwisp-scheme="dark"] .nap-file-upload__icon{
  background: rgba(var(--cw-accent-rgb),.22) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .nap-file-upload__card{
  border-color: rgba(146,168,208,.22) !important;
  background: #0f172a !important;
}
html[data-cwisp-scheme="dark"] .nap-file-upload__add{
  background: rgba(var(--cw-accent-rgb),.12) !important;
  border-color: rgba(var(--cw-accent-rgb),.42) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .nap-photo-thumb{
  border-color: rgba(146,168,208,.28) !important;
}
html[data-cwisp-scheme="dark"] .gis-nap-photos strong{ color: #9fb4d8 !important; }
html[data-cwisp-scheme="dark"] .gis-nap-photos__empty{
  border-color: rgba(146,168,208,.22) !important;
  color: #7e93b8 !important;
  background: rgba(255,255,255,.03) !important;
}
html[data-cwisp-scheme="dark"] .gis-nap-photo{
  border-color: rgba(146,168,208,.22) !important;
  background: #151e30 !important;
}
html[data-cwisp-scheme="dark"] .gis-nap-upload span{
  background: rgba(var(--cw-accent-rgb),.14) !important;
  border-color: rgba(var(--cw-accent-rgb),.40) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .jconfirm .text-muted,
html[data-cwisp-scheme="dark"] .jconfirm .form-text{
  color: #8ea3c4 !important;
}

/* ==========================================================================
   Carga de archivos unificada (public/js/cwisp-uploads.js)
   ========================================================================== */
.cwisp-upload-bar{position:fixed;top:0;left:0;right:0;z-index:2147483000;transform:translateY(-110%);transition:transform .22s ease;pointer-events:none}
.cwisp-upload-bar.is-visible{transform:translateY(0)}
.cwisp-upload-bar__inner{display:flex;align-items:center;gap:12px;max-width:560px;margin:10px auto 0;padding:10px 14px;border-radius:12px;background:#fff;color:#172033;box-shadow:0 10px 30px rgba(15,23,42,.22),0 0 0 1px rgba(15,23,42,.06);font-size:12px}
.cwisp-upload-bar__icon{flex:0 0 auto;font-size:18px;color:#2563eb}
.cwisp-upload-bar.is-done .cwisp-upload-bar__icon{color:#16a34a}
.cwisp-upload-bar.is-error .cwisp-upload-bar__icon{color:#dc2626}
.cwisp-upload-bar__body{flex:1 1 auto;min-width:0}
.cwisp-upload-bar__label{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-weight:600}
.cwisp-upload-bar__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwisp-upload-bar__pct{flex:0 0 auto;font-variant-numeric:tabular-nums;color:#64748b}
.cwisp-upload-bar__track{height:6px;overflow:hidden;border-radius:6px;background:#e2e8f0}
.cwisp-upload-bar__fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#2563eb,#3b82f6);transition:width .15s linear}
.cwisp-upload-bar.is-processing .cwisp-upload-bar__fill{background:repeating-linear-gradient(-45deg,#2563eb 0 10px,#60a5fa 10px 20px);background-size:28px 28px;animation:cwispUploadStripes .9s linear infinite}
.cwisp-upload-bar.is-done .cwisp-upload-bar__fill{background:#16a34a}
.cwisp-upload-bar.is-error .cwisp-upload-bar__fill{background:#dc2626}
@keyframes cwispUploadStripes{to{background-position:28px 0}}
.cwisp-upload-inline{display:none;margin:6px 0 2px}
.cwisp-upload-inline.is-visible{display:block}
.cwisp-upload-inline__track{height:5px;overflow:hidden;border-radius:5px;background:#e2e8f0}
.cwisp-upload-inline__fill{height:100%;width:0;border-radius:5px;background:#2563eb;transition:width .15s linear}
.cwisp-upload-inline.is-processing .cwisp-upload-inline__fill{background:repeating-linear-gradient(-45deg,#2563eb 0 8px,#60a5fa 8px 16px);background-size:22px 22px;animation:cwispUploadStripes .9s linear infinite}
.cwisp-upload-inline.is-done .cwisp-upload-inline__fill{background:#16a34a}
.cwisp-upload-inline.is-error .cwisp-upload-inline__fill{background:#dc2626}
.cwisp-upload-inline__text{display:block;margin-top:3px;color:#64748b;font-size:11px}
.cwisp-upload-inline.is-error .cwisp-upload-inline__text{color:#b91c1c}
button.cwisp-upload-locked,input.cwisp-upload-locked{cursor:progress!important;opacity:.6}
form.cwisp-uploading-form input[type="file"]{pointer-events:none;opacity:.6}
html[data-cwisp-scheme="dark"] .cwisp-upload-bar__inner{background:var(--cw-surface-panel,#171f2d);color:var(--cw-text,#edf2f8);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(146,168,208,.22)}
html[data-cwisp-scheme="dark"] .cwisp-upload-bar__pct,html[data-cwisp-scheme="dark"] .cwisp-upload-inline__text{color:#aeb9c9}
html[data-cwisp-scheme="dark"] .cwisp-upload-bar__track,html[data-cwisp-scheme="dark"] .cwisp-upload-inline__track{background:rgba(146,168,208,.2)}

/* WhatsApp: avatares de contacto (foto o color) en modo oscuro */
html[data-cwisp-scheme="dark"] #frame .wa-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
html[data-cwisp-scheme="dark"] .wa-header-avatar-edit{background:#202a3a;color:#c7d2e3;box-shadow:0 1px 3px rgba(0,0,0,.6)}
html[data-cwisp-scheme="dark"] .wa-avatar-swatch-auto{background:linear-gradient(135deg,#2a3547,#3a4761);color:#c7d2e3}
html[data-cwisp-scheme="dark"] .wa-avatar-sheet .btn-default{background:#232d3d;border-color:rgba(146,168,208,.28);color:#e6edf7}

/* --------------------------------------------------------------------------
   Antena (AirMax / AC / Cambium / MikroTik / Mimosa): skins claras embebidas
   -------------------------------------------------------------------------- */
.cwisp-antena .loaderantena,
#content .loaderantena{
  padding: 50px 0;
  font-size: 13px;
  background: var(--cw-surface-panel, #ffffff);
  color: var(--cw-text, #1e2a3a);
  border-radius: 12px;
}
html[data-cwisp-scheme="dark"] .cwisp-antena,
html[data-cwisp-scheme="dark"] #content .cwisp-antena{
  color: var(--cw-text, #edf2f8);
}
html[data-cwisp-scheme="dark"] .loaderantena,
html[data-cwisp-scheme="dark"] #content .loaderantena,
html[data-cwisp-scheme="dark"] .cwisp-antena .loaderantena,
html[data-cwisp-scheme="dark"] .loaderantena[style*="background:#FFFFFF"],
html[data-cwisp-scheme="dark"] .loaderantena[style*="background: #FFFFFF"],
html[data-cwisp-scheme="dark"] #content .loaderantena[style*="background:#FFFFFF"],
html[data-cwisp-scheme="dark"] #content .loaderantena[style*="background: #FFFFFF"]{
  background: var(--cw-surface-panel, #171f2d) !important;
  color: var(--cw-text, #edf2f8) !important;
  border-radius: 12px;
}
html[data-cwisp-scheme="dark"] .loaderantena .alert-danger,
html[data-cwisp-scheme="dark"] #content .loaderantena .alert-danger{
  background: rgba(224,75,87,.14) !important;
  border-color: rgba(224,75,87,.40) !important;
  color: #ffb3ba !important;
  text-align: left;
}
html[data-cwisp-scheme="dark"] .loaderantena .alert-danger b,
html[data-cwisp-scheme="dark"] #content .loaderantena .alert-danger b{
  color: #ffd0d4 !important;
}

/* AirMax (Ubiquiti M): fondos, labels y tablas forzadas a blanco/gris */
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax{
  background-color: #121824 !important;
  background-image: none !important;
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax td,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax select,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax input{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .menu{
  background-image: none !important;
  background-color: #0f1622 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .centr{
  background-color: #171f2d !important;
  background-image: none !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .linktable,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .popup,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table.linktable th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table.popup th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax span.label,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax span.value{
  color: #c9d4e6 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table.linktable th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table.popup th{
  border-bottom-color: rgba(146,168,208,.28) !important;
  color: #8fc6ff !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax a,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .nav-tabs a{
  color: #7ec8ff !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .legend>table tr td.legendLabel{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .legend>div{
  background: #171f2d !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .dataTable th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax table.dataTable thead th{
  background-color: #1d2742 !important;
  background-image: none !important;
  color: #dbe4f3 !important;
  border-bottom-color: rgba(146,168,208,.22) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .tablauser,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .table-bordered,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .table-bordered > thead > tr > th,
html[data-cwisp-scheme="dark"] .cwisp-antena .airmax .table-bordered > tbody > tr > td{
  border-color: rgba(146,168,208,.18) !important;
  background-color: transparent;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .graph-canvas,
html[data-cwisp-scheme="dark"] .cwisp-antena .graph-border{
  background: #121824;
  color: #c9d4e6;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .tickLabel,
html[data-cwisp-scheme="dark"] .cwisp-antena .flot-text,
html[data-cwisp-scheme="dark"] .cwisp-antena .flot-tick-label{
  color: #aeb9c9 !important;
}

/* Ubiquiti AC (airOS): wrapper blanco y texto #000 */
html[data-cwisp-scheme="dark"] .cwisp-antena .ac{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .ac [style*="background:#FFFFFF"],
html[data-cwisp-scheme="dark"] .cwisp-antena .ac [style*="background: #FFFFFF"],
html[data-cwisp-scheme="dark"] .cwisp-antena .cwisp-antena-ac-skin{
  background: var(--cw-surface-panel, #171f2d) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .appGlobalHeader{
  background: #0f1622;
  color: #e8edf7;
  border-bottom: 1px solid rgba(146,168,208,.18);
  padding: 10px 12px;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .appGlobalHeader__version,
html[data-cwisp-scheme="dark"] .cwisp-antena .appGlobalHeader__versionItem,
html[data-cwisp-scheme="dark"] .cwisp-antena #dashboardTitle,
html[data-cwisp-scheme="dark"] .cwisp-antena .sectionTitle{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .devicePropertiesSection{
  background: #171f2d;
  border: 1px solid rgba(146,168,208,.16);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 8px 10px 12px;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .propertyRow{
  border-bottom: 1px solid rgba(146,168,208,.12);
  padding: 6px 0;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .propertyRowLabel{
  color: #aeb9c9;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .propertyRowValue{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .usage-bar .bar{
  background: rgba(146,168,208,.18);
}
html[data-cwisp-scheme="dark"] .cwisp-antena .usage-bar .label,
html[data-cwisp-scheme="dark"] .cwisp-antena .usage-bar .sign{
  color: #c9d4e6;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .tablauser > thead > tr > th,
html[data-cwisp-scheme="dark"] .cwisp-antena .tablauser > tbody > tr > td{
  color: #dbe4f3;
  border-color: rgba(146,168,208,.18);
  background: transparent;
}

/* Cambium: board blanco, labels #171616 y tablas #eee */
html[data-cwisp-scheme="dark"] .cwisp-antena .board-emp,
html[data-cwisp-scheme="dark"] .cwisp-antena .board-emp[style*="background: #fff"],
html[data-cwisp-scheme="dark"] .cwisp-antena .board-emp [style*="background: #fff"]{
  background: var(--cw-surface-panel, #171f2d) !important;
  color: var(--cw-text, #edf2f8);
}
html[data-cwisp-scheme="dark"] .cwisp-antena .main_text,
html[data-cwisp-scheme="dark"] .cwisp-antena .stat_label,
html[data-cwisp-scheme="dark"] .cwisp-antena .board-emp h3,
html[data-cwisp-scheme="dark"] .cwisp-antena .board-emp td{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .table > tbody > tr > td{
  border-color: rgba(146,168,208,.16) !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .panel.panel-default,
html[data-cwisp-scheme="dark"] .cwisp-antena .panel.panel-blue{
  background: var(--cw-surface-panel, #171f2d);
  color: var(--cw-text, #edf2f8);
  border-color: rgba(146,168,208,.16);
}
html[data-cwisp-scheme="dark"] .cwisp-antena .panel.panel-default > .panel-heading{
  background: #1d2742;
  color: #e8edf7;
  border-bottom-color: rgba(146,168,208,.16);
}
html[data-cwisp-scheme="dark"] .cwisp-antena .panel.panel-default .panel-title{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .nav-emp{
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .cwisp-antena .nav-emp.active{
  color: #ffffff !important;
}

/* Mimosa / MikroTik: filas y select sobre panel oscuro */
html[data-cwisp-scheme="dark"] .cwisp-antena .breadcrumb > .breadcrumb-item,
html[data-cwisp-scheme="dark"] .cwisp-antena .breadcrumb > .breadcrumb-item.active,
html[data-cwisp-scheme="dark"] .cwisp-antena h4{
  color: var(--cw-text, #edf2f8);
}
html[data-cwisp-scheme="dark"] .cwisp-antena #wlanid + .select2-container .select2-selection{
  background: #1d2739;
  border-color: rgba(146,168,208,.28);
  color: #e8edf7;
}