@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;
}
/* scrollX clona la tabla hacia la cabecera con esta clase. Si se queda,
   la cabecera es invisible y reserva 160px: el hueco bajo el buscador. */
div.dataTables_scrollHead table.display.cwisp-dt-pending,
div.dataTables_scrollFoot table.display.cwisp-dt-pending,
div.dataTables_scrollBody table.display.cwisp-dt-pending {
  visibility: visible;
  min-height: 0;
}


/* ==========================================================================
   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;
  height: auto;
  padding-top: 0 !important;
  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;
}
/* El alto lo marcan top/bottom. height:100% lo empujaba bajo la ventana
   y el scroll del menú nunca llegaba al botón de encoger. */
#page-container #sidebar.cwisp-sidebar{
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  overflow: hidden;
}
#page-container #sidebar.cwisp-sidebar .cwisp-sidebar-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#page-container #sidebar.cwisp-sidebar .cwisp-sidebar-foot{
  flex: 0 0 auto;
  padding: 6px 10px 10px;
}
#page-container #sidebar.cwisp-sidebar .cwisp-sidebar-foot .sidebar-minify-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: auto;
  margin: 0;
  padding: 8px 12px !important;
}
/* Sin menú fijo el lateral no tiene scroll propio, pero sigue al lado del contenido. */
#page-container:not(.page-sidebar-fixed) #sidebar.cwisp-sidebar{
  position: absolute;
  top: 56px;
  bottom: auto;
  left: 12px;
  float: none;
  height: auto;
  margin: 0;
  overflow: visible;
}
#page-container:not(.page-sidebar-fixed) #sidebar.cwisp-sidebar .cwisp-sidebar-scroll{
  flex: none;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

/* 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;
  }
  /* Encogido en el teléfono: barra de iconos a alto completo, no el cajón ancho apagado. */
  #page-container.page-sidebar-minified #sidebar.sidebar,
  #page-container.page-sidebar-minified #sidebar.cwisp-sidebar{
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding-top: 56px !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.cwisp-update-available,
  #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{
    display: none !important;
  }
  #page-container.page-sidebar-minified #sidebar .nav > li > a{
    justify-content: center;
    gap: 0;
    margin: 4px 8px !important;
    padding: 12px 6px !important;
  }
  #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll{
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }
  #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  #page-container.page-sidebar-minified #sidebar .sidebar-minify-btn{
    margin: 8px 6px 12px !important;
    justify-content: center;
  }
  .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: center !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;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .btn,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .btn:focus,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget a[data-action="togglePicker"]{
  background: #243044 !important;
  color: #e2e9f6 !important;
  border-color: rgba(146,168,208,.28) !important;
  box-shadow: none !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .btn:hover,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget a[data-action="togglePicker"]:hover{
  background: #2e3d58 !important;
  color: #fff !important;
}
/* El tema pinta la barra del reloj en el span, no en el enlace. */
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td span,
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td a,
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td a span{
  background: #243044 !important;
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td span:hover,
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td a:hover,
html[data-cwisp-scheme="dark"] body .bootstrap-datetimepicker-widget .picker-switch td a:hover span{
  background: #2e3d58 !important;
  color: #fff !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .timepicker-hour,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .timepicker-minute,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .timepicker-second,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget .separator{
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget span.timepicker-hour,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget span.timepicker-minute,
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget span.timepicker-second{
  background: #243044 !important;
  color: #e2e9f6 !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{
  border-bottom-color: #1a2336 !important;
}
html[data-cwisp-scheme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after{
  border-top-color: #1a2336 !important;
}
/* Nueva tarea: el calendario se mueve a body; este z-index lo deja sobre la lista. */
body > .bootstrap-datetimepicker-widget{
  z-index: 10070 !important;
}
#frm-edit-tarea .cwisp-tarea-fecha-card,
#frm-edit-tarea .cwisp-tarea-fecha-card .collapse,
#frm-edit-tarea .cwisp-tarea-fecha-card .card-body{
  overflow: visible !important;
  position: relative;
  z-index: 40;
}

/* 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;
}
/* El dropdown de Select2 se anexa a body con z-index 1050, el mismo del modal,
   y queda detrás. 10060 lo pone encima de Bootstrap sin tapar jquery-confirm. */
.select2-container--open,
.select2-dropdown{
  z-index: 10060 !important;
}
.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 .dropdown-item{
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--cw-text);
}
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item b,
.dropdown-menu .dropdown-item small{
  color: inherit;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
  background: rgba(var(--cw-accent-rgb),.12) !important;
  color: var(--cw-text) !important;
}
.dropdown-menu .dropdown-header{
  padding: 8px 12px 4px;
  background: transparent;
  color: var(--cw-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.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);
}

/* GridStack deja 10px por lado. height:100% anula el de abajo y las tarjetas se pegan. */
#content .cwisp-home-grid .grid-stack-item-content.cwisp-grid-item-content{
  height: auto;
}
#content .cwisp-home-grid .panel.cwisp-grid-card{
  margin-bottom: 0;
}

/* Datos del servidor: al achicar el widget se reduce todo el bloque
   (iconos, textos y barras) para que siga cabiendo, sin scroll. */
#content .cwisp-home-grid .panel.cwisp-home-server{
  min-width: 0;
  min-height: 0;
}
#content .cwisp-home-grid .panel.cwisp-home-server > .panel-body{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
}
#content .cwisp-home .cwisp-home-server .widget-list.cwisp-fit-scale{
  width: max-content;
  min-width: max-content;
  max-width: none;
}
/* Resumen del sistema: misma idea, la lista se reduce con el widget. */
#content .cwisp-home-grid .panel.cwisp-home-resumen{
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#content .cwisp-home-grid .panel.cwisp-home-resumen > .panel-heading{
  flex: 0 0 auto;
}
#content .cwisp-home-grid .panel.cwisp-home-resumen > .list-group{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
}
#content .cwisp-home-grid .panel.cwisp-home-resumen > .list-group.cwisp-fit-scale{
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-width: 0;
  max-width: none;
  margin-bottom: 0;
  overflow: hidden;
}
#content .cwisp-home-grid .panel.cwisp-home-resumen > .list-group.cwisp-fit-scale > .list-group-item{
  flex: 1 1 0 !important;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}
/* Resumen de facturación: la lista ocupa todo el cuerpo del widget. */
#content .cwisp-home-grid .panel.cwisp-home-facturacion{
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
#content .cwisp-home-grid .panel.cwisp-home-facturacion > .panel-heading{
  flex: 0 0 auto;
}
#content .cwisp-home-grid .panel.cwisp-home-facturacion > .panel-body{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
}
#content .cwisp-home-grid .panel.cwisp-home-facturacion > .panel-body > .list-group.cwisp-fit-scale{
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-width: 0;
  max-width: none;
  margin-bottom: 0;
  overflow: hidden;
}
#content .cwisp-home-grid .panel.cwisp-home-facturacion > .panel-body > .list-group.cwisp-fit-scale > .list-group-item{
  flex: 1 1 0 !important;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   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 .dropdown-item.active,
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item:active,
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-item i,
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item b,
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-item small{
  color: inherit !important;
}
html[data-cwisp-scheme="dark"] .dropdown-menu .dropdown-header{
  background: transparent !important;
  border: 0 !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;
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(146,168,208,.18) !important;
}

/* ==========================================================================
   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"] #Chatmessages > li.wa-day-sep span{
  background: #182229 !important;
  color: #d1d7db !important;
}
#content table.dataTable td.sms-when,
#content table.dataTable th.sms-when{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 108px;
  width: 118px;
  line-height: 1.25;
}
#content table.dataTable .sms-when-time{
  display: block;
  font-weight: 600;
}
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;
}
body.modomovil #page-container.page-sidebar-minified #sidebar.sidebar,
body.modomovil #page-container.page-sidebar-minified #sidebar.cwisp-sidebar,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar.sidebar,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar.cwisp-sidebar{
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding-top: 56px !important;
}
body.modomovil #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-profile,
body.modomovil #page-container.page-sidebar-minified #sidebar .nav-profile,
body.modomovil #page-container.page-sidebar-minified #sidebar .nav-header,
body.modomovil #page-container.page-sidebar-minified #sidebar .nav > li > a > span,
body.modomovil #page-container.page-sidebar-minified #sidebar .nav > li > a > .caret,
body.modomovil #page-container.page-sidebar-minified #sidebar .nav > li > a > b.caret,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-profile,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav-profile,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav-header,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav > li > a > span,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav > li > a > .caret,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav > li > a > b.caret{
  display: none !important;
}
body.modomovil #page-container.page-sidebar-minified #sidebar .nav > li > a,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .nav > li > a{
  justify-content: center;
  gap: 0;
  margin: 4px 8px !important;
  padding: 12px 6px !important;
}
body.modomovil #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll{
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none;
}
body.modomovil #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll::-webkit-scrollbar,
html.cwisp-in-app #page-container.page-sidebar-minified #sidebar .cwisp-sidebar-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}
#float-sub-menu.float-sub-menu-container{
  z-index: 1400 !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;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-form-modal h5{
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
  color: inherit;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-form-modal hr{
  margin: 12px 0;
  border-top-color: #e2e7eb;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-grid .row{
  margin-top: 0 !important;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-olt-grid .row > [class*="col-"]{
  margin-bottom: 12px;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-modal-tabs{
  display: flex;
  list-style: none;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 1px solid #d8dee9;
  background: transparent !important;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-modal-tabs > li{
  float: none;
  margin: 0 0 -1px;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-modal-tabs > li > a{
  display: block;
  margin: 0;
  padding: 8px 12px;
  color: #526070;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
}
.jconfirm.cwisp-olt-form-dialog .cwisp-modal-tabs > li.active > a{
  color: var(--cw-accent, #2a72b5);
  background: transparent;
  border-color: transparent transparent currentColor;
}
.jconfirm .cwisp-modal-tab-panels > .cwisp-modal-pane{
  display: none;
}
.jconfirm .cwisp-modal-tab-panels > .cwisp-modal-pane.active{
  display: block;
}
html[data-cwisp-scheme="dark"] .jconfirm .tab-content,
html[data-cwisp-scheme="dark"] .jconfirm .nav-tabs + .tab-content,
html[data-cwisp-scheme="dark"] .jconfirm .tab-pane,
html[data-cwisp-scheme="dark"] .jconfirm .nav-tabs,
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-olt-form-modal,
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-modal-tab-panels,
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-modal-pane{
  background: transparent !important;
  background-color: transparent !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content-pane,
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
  background: #1c2539 !important;
  background-color: #1c2539 !important;
  color: #dbe4f3 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-olt-form-modal h5,
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-olt-form-modal h5 .text-primary{
  color: #e8edf7 !important;
}
html[data-cwisp-scheme="dark"] .jconfirm.jconfirm-modern .jconfirm-content 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-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-modern .jconfirm-content .form-control::placeholder{
  color: rgba(200,214,238,.45) !important;
}
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-modal-tabs{
  border-bottom-color: rgba(146,168,208,.18);
  background: transparent !important;
}
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-modal-tabs > li > a{
  color: #8ea3c4;
}
html[data-cwisp-scheme="dark"] .jconfirm .cwisp-modal-tabs > li.active > a{
  color: var(--cw-accent, #e8edf7);
  background: transparent;
}

/* ── 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"] .jconfirm.cwisp-olt-form-dialog .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 .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;
}
.tkcierre{
  background: #fff4e0 !important;
  border: 1px solid #e0a24a !important;
}
.cwisp-cierre-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #c47b12;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
}
html[data-cwisp-scheme="dark"] .tkcierre{
  background: rgba(232,164,60,.16) !important;
  border-color: rgba(232,164,60,.55) !important;
  color: #ffe7c2;
}
html[data-cwisp-scheme="dark"] .tkcierre .media-heading b,
html[data-cwisp-scheme="dark"] .tkcierre .cw-tk-msg{
  color: #ffe7c2;
}
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.tkcierre{
  background: rgba(232,164,60,.16) !important;
  border-color: rgba(232,164,60,.55) !important;
  color: #ffe7c2;
}
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-file-camera,
.cwisp-facade-viewer-file-pick{ display: none; }
.cwisp-facade-viewer-actions{
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.cwisp-facade-viewer-panel{
  border: 1px solid var(--cw-border, #dbe3ee);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--cw-surface-subtle, #f7f9fc);
}
.cwisp-facade-viewer-panel h5{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.cwisp-facade-viewer-panel h5 i{ margin-right: 6px; color: var(--cw-accent-dark); }
.cwisp-facade-viewer-panel small{
  display: block;
  margin-top: 8px;
  color: var(--cw-muted);
}
.cwisp-facade-viewer-location{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cwisp-facade-viewer-location .cwisp-facade-viewer-coords{
  flex: 1 1 220px;
  min-width: 180px;
}
.cwisp-facade-viewer-upload-status{
  display: inline-block;
  margin-left: 8px;
  color: var(--cw-muted);
  font-size: 12px;
}
html[data-cwisp-scheme="dark"] .cwisp-facade-viewer-panel{
  border-color: #253143;
  background: #1a2433;
}
.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;
}

/* =====================================================================
   Ajustes: estilos por pantalla movidos desde <style> en las vistas
   (correo, sms, migrar, asistente, operadores, plantillas, editor).
   Van al FINAL de extra.css para conservar el orden de cascada que tenían
   como <style> inline (después de colombiawisp.css y extra.css).
   ===================================================================== */

/* ---- ajustes_correo ---- */
.cw-firma-editor{
  border: 1px solid #d3d8de;
  background: #f5f5f5;
  padding: 6px;
  min-height: 220px;
}
.cw-firma-editor .cke{ width: 100% !important; }
.cw-firma-editor textarea{
  width: 100%;
  min-height: 160px;
  display: block;
}
html[data-cwisp-scheme="dark"] .cw-firma-editor{
  background: rgba(255,255,255,.04);
  border-color: rgba(146,168,208,.18);
}

/* ---- ajustes_sms ---- */
  .meta-cloud-panel .panel-heading {
    min-height: 54px;
    padding: 15px 20px;
  }
  .meta-cloud-panel .panel-title {
    color: #2d353c;
    font-size: 15px;
    font-weight: 600;
  }
  .meta-cloud-panel .panel-title i {
    margin-right: 7px;
    color: #25b969;
    font-size: 20px;
    vertical-align: -2px;
  }
  .meta-cloud-panel .panel-body {
    padding: 20px;
  }
  .meta-account-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 18px;
  }
  .meta-account-icon {
    display: flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f7ef;
    color: #169b5b;
    font-size: 17px;
  }
  .meta-account-copy {
    min-width: 0;
    text-align: left;
  }
  .meta-account-title {
    margin-bottom: 7px;
    color: #2d353c;
    font-size: 14px;
    font-weight: 600;
  }
  .meta-account-identifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .meta-id-chip {
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid #e2e7eb;
    border-radius: 3px;
    background: #f6f8fa;
    color: #5b6670;
    font-family: monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .meta-id-chip b {
    margin-right: 4px;
    color: #2d353c;
    font-family: Arial, sans-serif;
    font-weight: 600;
  }
  .meta-webhook-state {
    display: flex;
    gap: 11px;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid #e3e8ec;
    border-left: 3px solid #f0ad4e;
    border-radius: 3px;
    background: #fafbfc;
    color: #5b6670;
    text-align: left;
  }
  .meta-webhook-state.is-active {
    border-left-color: #25b969;
  }
  .meta-webhook-state > i {
    margin-top: 2px;
    color: #f0ad4e;
    font-size: 16px;
  }
  .meta-webhook-state.is-active > i {
    color: #25b969;
  }
  .meta-webhook-state strong {
    display: block;
    margin-bottom: 3px;
    color: #2d353c;
    font-size: 13px;
  }
  .meta-webhook-state p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
  }
  .meta-webhook-details {
    display: block;
    margin-top: 5px;
    color: #7a858e;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .meta-cloud-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
  }
  .meta-cloud-actions .btn {
    margin: 0;
  }
  .meta-cloud-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding-top: 15px;
    border-top: 1px solid #edf0f2;
    color: #2d353c;
    text-align: left;
  }
  .meta-cloud-toggle span {
    font-size: 13px;
    font-weight: 600;
  }
  .meta-cloud-toggle small {
    display: block;
    margin-top: 2px;
    color: #8a959e;
    font-weight: 400;
  }
  .meta-cloud-toggle .switch {
    margin: 0;
  }
  .meta-login-intro {
    padding: 12px 5px 20px;
    color: #69757f;
    line-height: 1.6;
  }
  @media (max-width: 480px) {
    .meta-cloud-actions .btn {
      width: 100%;
    }
  }

/* ---- ajustes_migrar ---- */
.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.migrar-form .form-control {
  max-width: 360px;
  margin: 0 auto;
}

.migrar-log {
  max-height: 320px;
  overflow-y: auto;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  display: none;
}
.migrar-log .log-line { display: block; }
.migrar-log .log-success { color: #4ec9b0; }
.migrar-log .log-error { color: #f48771; }
.migrar-log .log-warn { color: #dcdcaa; }
.migrar-log .log-info { color: #9cdcfe; }

#btnIniciarMigracion:disabled { cursor: not-allowed; opacity: 0.5; }
.migrar-progress { display:none; margin:12px 0; }
.migrar-progress .progress { height:18px; margin-bottom:4px; }

/* ---- ajustes_logs_asistente ---- */
  #asistente-prompt-form textarea,
  #bot-greeting-form textarea {
    min-height: 110px;
    overflow-y: hidden;
    resize: vertical;
  }
  #content .panel.panel-bot-examples {
    max-width: 100%;
    overflow: hidden !important;
  }

/* ---- ajustes_operadores_form ---- */
  /* ===== Permisos compactos (densidad alta) =====
     Rediseño: cada permiso es un switch inline con su label, SIN card-border
     ni padding grande. Soporta hasta 6 columnas en pantallas grandes. */
  .cwisp-perm-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:4px 10px;
    align-items:center;
  }
  .cwisp-perm-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:4px 8px;
    border-radius:4px;
    background:transparent;
    border:1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
    min-height:30px;
  }
  .cwisp-perm-item:hover{
    background:#f4f7fb;
    border-color:#dbe4ef;
  }
  .cwisp-perm-item.is-on{
    background:#eef6ff;
    border-color:#cfe3fb;
  }
  .cwisp-perm-item .cwisp-perm-label{
    font-size:12px;
    font-weight:500;
    color:#333;
    line-height:1.2;
    flex:1 1 auto;
    white-space:normal;
    word-break:break-word;
    margin:0;
    cursor:pointer;
  }
  .cwisp-perm-item .cwisp-perm-switch{
    flex:0 0 auto;
    min-height:20px;
    line-height:20px;
  }
  /* Switchery pequeño + sin borde extra */
  .cwisp-perm-switch .switchery{
    height:18px !important;
    width:30px !important;
  }
  .cwisp-perm-switch .switchery > small{
    height:18px !important;
    width:18px !important;
  }
  /* Bloque "módulo" dentro de un grupo: título pequeño, items en grid densa */
  .cwisp-perm-module{
    margin-top:8px;
  }
  .cwisp-perm-module-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#888;
    font-weight:700;
    margin:6px 0 4px;
    border-bottom:1px solid #eee;
    padding-bottom:2px;
  }
  .cwisp-perm-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:4px 0;
    flex-wrap:wrap;
  }
  .cwisp-perm-toolbar .btn-link{ padding:2px 6px; font-size:12px; }

  /* ===== Modo oscuro: contraste del bloque de permisos ===== */
  html[data-cwisp-scheme="dark"] .cwisp-perm-item:hover{
    background: rgba(255,255,255,.06);
    border-color: var(--cw-border, #344156);
  }
  html[data-cwisp-scheme="dark"] .cwisp-perm-item.is-on{
    background: rgba(var(--cw-accent-rgb, 52,143,226), .18);
    border-color: rgba(var(--cw-accent-rgb, 52,143,226), .42);
  }
  html[data-cwisp-scheme="dark"] .cwisp-perm-item .cwisp-perm-label{
    color: var(--cw-text, #edf2f8);
  }
  html[data-cwisp-scheme="dark"] .cwisp-perm-module-title{
    color: var(--cw-text-muted, #aeb9c9);
    border-bottom-color: var(--cw-border, #344156);
  }
  html[data-cwisp-scheme="dark"] #accordion-permisos .card-header.bg-black{
    background: var(--cw-surface-subtle, #202a3a) !important;
    color: var(--cw-text, #edf2f8) !important;
    border-color: var(--cw-border, #344156) !important;
  }
  html[data-cwisp-scheme="dark"] #accordion-permisos .card-body.border{
    background: var(--cw-surface-panel, #171f2d);
    border-color: var(--cw-border, #344156) !important;
    color: var(--cw-text, #edf2f8);
  }
  html[data-cwisp-scheme="dark"] #accordion-permisos .btn-link{
    color: var(--cw-info, #75bfff);
  }
  html[data-cwisp-scheme="dark"] .cwisp-perm-toolbar .text-muted{
    color: var(--cw-text-muted, #aeb9c9) !important;
  }

/* ---- ajustes_plantillas ---- */
    .itemplantilla .pre{position:relative;top:-180px;height:100%;left:0px;padding-top:60px;background:rgba(255,255,255,0.73);text-align:center;display:none;}
    .itemplantilla{border:1px solid #464646;width:170px;display:inline-block;margin:10px 10px;cursor:pointer;}
    .contentplantilla{height:185px;border:3px solid #2f2f2f;}
    .contentplantilla:hover{border:3px solid #2196F3;}
    .contentplantilla:hover .pre{display:block;}
    .itemplantilla:hover{border:1px solid #2196F3;}
    .itemplantilla:hover .tituloplantilla{background:#2196F3;}
    .tituloplantilla{display:block;color:#fff;font-size:11px;height:27px;line-height:27px;background:#2f2f2f;text-align:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .wa-meta-wrap{padding:20px !important;background:#f5f7f9;border:1px solid #d9e2ea;border-top:0;}
    .wa-meta-intro{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e4e8ec;border-left:3px solid #25b969;border-radius:4px;padding:16px 18px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
    .wa-meta-intro h4{color:#2d353c;font-size:16px;font-weight:600;}
    .wa-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start;}
    .wa-template-card{position:relative;display:flex;min-width:0;min-height:430px;flex-direction:column;background:#fff;border:1px solid #dce4eb;border-radius:12px;padding:18px;box-shadow:0 3px 10px rgba(0,0,0,.04);transition:all .18s ease;overflow:hidden;}
    .wa-template-card:hover{border-color:#1fa463;box-shadow:0 8px 22px rgba(31,164,99,.14);transform:translateY(-1px);}
    .wa-template-add{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#1c6b44;border:2px dashed #35b779;cursor:pointer;background:#fbfffd;}
    .wa-template-add span{color:#6b7785;font-size:12px;margin-top:4px;}
    .wa-plus{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1fa463;color:#fff;font-size:42px;line-height:1;margin-bottom:14px;box-shadow:0 6px 16px rgba(31,164,99,.25);}
    .wa-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
    .wa-lang{font-size:12px;color:#6c757d;background:#f1f3f5;border-radius:12px;padding:3px 8px;}
    .wa-template-card h5{font-size:16px;margin:0 0 4px 0;word-break:break-word;color:#243342;}
    .wa-category{text-transform:uppercase;font-size:11px;font-weight:700;color:#1fa463;margin-bottom:10px;}
    .wa-card-section{font-size:12px;color:#56616c;background:#f8fafb;border-radius:7px;padding:7px 9px;margin-bottom:8px;}
    .wa-body-preview{display:-webkit-box;min-height:0;overflow:hidden;color:#303b45;font-size:13px;line-height:1.55;margin:2px 0 5px;white-space:pre-line;-webkit-box-orient:vertical;-webkit-line-clamp:5;}
    .wa-body-preview.is-expanded{display:block;overflow:visible;-webkit-line-clamp:unset;}
    .wa-preview-toggle{display:flex;align-items:center;gap:6px;width:max-content;padding:0 0 8px;border:0;background:transparent;color:#1b7f50;font-size:11px;font-weight:700;cursor:pointer;}
    .wa-preview-toggle i{font-size:9px;transition:transform .18s ease;}
    .wa-preview-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
    .wa-footer-preview{font-size:12px;color:#7a838c;border-left:3px solid #cfd8df;padding-left:8px;margin-bottom:8px;}
    .wa-components{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
    .wa-components span{font-size:10px;text-transform:uppercase;background:#eef4f8;color:#50606e;border-radius:10px;padding:3px 7px;}
    .wa-card-actions{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9px;margin-top:12px;}
    .wa-card-actions .btn-azul,.wa-card-actions .btn,.wa-card-actions .btn-meta-danger{width:100%;margin:0;}
    .btn-meta-danger{display:inline-block;min-width:6rem;padding:8px 10px;border:1px solid #ff5b57;border-radius:1.5rem;background:transparent;color:#d93f3b;font-size:12px;line-height:1.6;font-weight:600;text-align:center;cursor:pointer;transition:all 250ms ease;}
    .btn-meta-danger:hover,.btn-meta-danger:focus{border-color:#bd302d;background:rgba(255,91,87,.06);box-shadow:0 0 0 1px #bd302d inset;color:#a92724;outline:none;text-decoration:none;}
    .wa-automation-box{margin-top:auto;border-top:1px solid #edf1f5;padding-top:12px;}
    .wa-automation-box label{font-size:11px;font-weight:700;color:#52616f;margin-bottom:4px;}
    .wa-doc-toggle{display:block;font-weight:400 !important;color:#52616f !important;}
    .wa-event-select{height:31px;font-size:12px;}
    .wa-variable-mapping{margin-top:10px;padding:9px;border:1px solid #e5e9ed;border-radius:4px;background:#f9fafb;}
    .wa-variable-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;padding:0;border:0;background:transparent;color:#34495e;font-size:11px;font-weight:700;cursor:pointer;text-align:left;}
    .wa-variable-toggle i{transition:transform .18s ease;}
    .wa-variable-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
    .wa-variable-content{padding-top:9px;}
    .wa-event-variable-row{margin-bottom:8px;}
    .wa-event-variable-row label{display:block;margin-bottom:3px;}
    .wa-variable-custom{margin-top:5px;height:31px;font-size:12px;}
    .wa-variable-mapping small{display:block;color:#7a8793;line-height:1.35;}
    .wa-automation-box .btn-wa-template-event-save{width:100%;margin-top:9px;}
    .wa-meta-wrap .select2-container{width:100% !important;}
    .wa-meta-wrap .select2-container .select2-selection--single{height:34px;border:1px solid #d3d8de;border-radius:3px;background:#fff;}
    .wa-meta-wrap .select2-container .select2-selection--single .select2-selection__rendered{height:32px;padding-left:12px;color:#495057;font-size:12px;line-height:32px;}
    .wa-meta-wrap .select2-container .select2-selection--single .select2-selection__arrow{height:32px;}
    #waTemplateModal .modal-content{border:0;border-radius:5px;box-shadow:0 12px 35px rgba(0,0,0,.18);}
    #waTemplateModal .modal-header{border-bottom:1px solid #e8ecef;background:#f7f8fa;}
    #waTemplateModal .modal-title{color:#2d353c;font-size:17px;font-weight:600;}
    #waTemplateModal .modal-footer{border-top:1px solid #e8ecef;background:#f7f8fa;}
    #waTemplateModal .select2-container{width:100% !important;}
    #waTemplateModal .select2-container .select2-selection--single{height:34px;border:1px solid #d3d8de;border-radius:3px;}
    #waTemplateModal .select2-selection__rendered{line-height:32px;}
    #waTemplateModal .select2-selection__arrow{height:32px;}
    .wa-empty-card{grid-column:1/-1;background:#fff;border:1px dashed #b8c4cf;border-radius:10px;padding:22px;text-align:center;color:#697781;}
    .wa-form-card{background:#f8fafb;border:1px solid #e3e9ef;border-radius:10px;padding:12px;margin-bottom:12px;}
    .wa-variable-card h5{margin:0 0 10px 0;font-size:14px;}
    .wa-variable-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
    .wa-variable-row code{min-width:52px;text-align:center;background:#eaf7f0;color:#17844f;border-radius:6px;padding:6px 8px;}
    .wa-button-box{border:1px solid #e3e9ef;border-radius:10px;background:#fff;padding:10px;margin-bottom:10px;}
    html[data-cwisp-scheme="dark"] .wa-meta-wrap{background:#111827;border-color:rgba(146,168,208,.18);color:#dbe5f3;}
    html[data-cwisp-scheme="dark"] .wa-meta-intro,
    html[data-cwisp-scheme="dark"] .wa-template-card,
    html[data-cwisp-scheme="dark"] .wa-empty-card{background:#1b2438;border-color:rgba(146,168,208,.20);box-shadow:0 4px 16px rgba(0,0,0,.24);}
    html[data-cwisp-scheme="dark"] .wa-template-add{background:#172235;color:#75d8a5;border-color:#35b779;}
    html[data-cwisp-scheme="dark"] .wa-template-add span,
    html[data-cwisp-scheme="dark"] .wa-footer-preview,
    html[data-cwisp-scheme="dark"] .wa-variable-mapping small{color:#9daac0;}
    html[data-cwisp-scheme="dark"] .wa-meta-intro h4,
    html[data-cwisp-scheme="dark"] .wa-template-card h5,
    html[data-cwisp-scheme="dark"] .wa-variable-toggle,
    html[data-cwisp-scheme="dark"] #waTemplateModal .modal-title{color:#eef3fb;}
    html[data-cwisp-scheme="dark"] .wa-body-preview{color:#dbe5f3;}
    html[data-cwisp-scheme="dark"] .wa-preview-toggle{color:#75d8a5;}
    html[data-cwisp-scheme="dark"] .wa-lang{background:#263248;color:#c4d0e1;}
    html[data-cwisp-scheme="dark"] .wa-card-section,
    html[data-cwisp-scheme="dark"] .wa-components span,
    html[data-cwisp-scheme="dark"] .wa-variable-mapping,
    html[data-cwisp-scheme="dark"] .wa-form-card{background:#202b40;border-color:rgba(146,168,208,.18);color:#cbd7e8;}
    html[data-cwisp-scheme="dark"] .wa-automation-box{border-top-color:rgba(146,168,208,.16);}
    html[data-cwisp-scheme="dark"] .wa-automation-box label,
    html[data-cwisp-scheme="dark"] .wa-doc-toggle{color:#cbd7e8 !important;}
    html[data-cwisp-scheme="dark"] .wa-button-box{background:#182236;border-color:rgba(146,168,208,.18);}
    html[data-cwisp-scheme="dark"] .wa-meta-wrap .form-control,
    html[data-cwisp-scheme="dark"] #waTemplateModal .form-control,
    html[data-cwisp-scheme="dark"] .wa-meta-wrap .select2-container .select2-selection--single,
    html[data-cwisp-scheme="dark"] #waTemplateModal .select2-container .select2-selection--single{background:#121b2b !important;border-color:rgba(146,168,208,.28) !important;color:#e7edf7 !important;}
    html[data-cwisp-scheme="dark"] .wa-meta-wrap .select2-selection__rendered,
    html[data-cwisp-scheme="dark"] #waTemplateModal .select2-selection__rendered{color:#e7edf7 !important;}
    html[data-cwisp-scheme="dark"] #waTemplateModal .modal-content{background:#1b2438;color:#dbe5f3;}
    html[data-cwisp-scheme="dark"] #waTemplateModal .modal-header,
    html[data-cwisp-scheme="dark"] #waTemplateModal .modal-footer{background:#182236;border-color:rgba(146,168,208,.18);}
    html[data-cwisp-scheme="dark"] #waTemplateModal label{color:#dbe5f3;}
    html[data-cwisp-scheme="dark"] #waTemplateModal .close{color:#fff;text-shadow:none;opacity:.8;}
    @media (max-width:575px){
      .wa-meta-wrap{padding:12px !important;}
      .wa-template-grid{grid-template-columns:minmax(0,1fr);}
      .wa-template-card{min-height:0;}
    }
  

/* ---- ajustes_plantillas_modal_editor ---- */
/* ===== Modal: Editor de plantillas SMS / Telegram =====
   Diseño coherente con el theme ColombiaWisp.
   Scope: #modaltmp.cw-template-editor-modal y form.cw-message-template-editor
*/
.textarea-sms{
  width: 100%;
  min-height: 240px;
  padding: 16px 18px;
  resize: vertical;
  border: 1px solid rgba(15,23,42,0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--cw-ink, #0B1220);
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: .2px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea-sms:focus{
  border-color: var(--cw-accent, #348fe2);
  box-shadow: 0 0 0 3px rgba(52,143,226,.14);
}

/* Modal shell */
.cw-template-editor-modal .modal-content{
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11,18,32,.35);
}
.cw-template-editor-modal .modal-header{
  padding: 16px 22px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  background: linear-gradient(135deg, rgba(52,143,226,0.92), rgba(42,114,181,0.92));
  color: #fff;
}
.cw-template-editor-modal .modal-header .modal-title{ color: #fff !important; font-weight: 700; }
.cw-template-editor-modal .modal-header .close{ color: #fff; opacity: .85; }
.cw-template-editor-modal .modal-header .close:hover{ opacity: 1; }
.cw-template-editor-modal .modal-footer{
  background: rgba(15,23,42,0.04);
  border-top: 1px solid rgba(15,23,42,0.10);
  padding: 14px 22px;
}

.cw-message-template-editor .modal-body{ padding: 22px 24px; }

/* Heading con icono del canal */
.cw-template-heading{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(52,143,226,0.06), rgba(252,209,22,0.04));
  border: 1px solid rgba(52,143,226,0.18);
  border-radius: 12px;
}
.cw-template-heading h4{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--cw-ink, #0B1220);
}
.cw-template-heading p{
  margin: 0;
  color: var(--cw-muted, #6b7280);
  font-size: 12px;
  line-height: 1.45;
}
.cw-template-channel-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cw-accent, #348fe2), var(--cw-accent-dark, #2a72b5));
  color: #fff;
  font-size: 22px;
  box-shadow: 0 8px 16px rgba(52,143,226,.30);
}
.cw-template-channel-icon.is-telegram{
  background: linear-gradient(135deg, #229ed9, #1c7faf);
  box-shadow: 0 8px 16px rgba(34,158,217,.30);
}

/* Body / label */
.cw-template-body label{
  font-weight: 700;
  color: var(--cw-ink, #0B1220);
  font-size: 13px;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

/* Meta (info + contador) */
.cw-template-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(15,23,42,0.03);
  border-radius: 8px;
  color: var(--cw-muted, #6b7280);
  font-size: 11.5px;
}
.cw-template-meta small i{ color: var(--cw-accent, #348fe2); }
.cw-template-meta span strong{ color: var(--cw-ink, #0B1220); }

/* Variables chips */
.cw-template-tags{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.cw-template-tags > span{
  width: 100%;
  margin-bottom: 4px;
  color: var(--cw-ink, #0B1220);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cw-template-tag{
  padding: 5px 11px;
  border: 1px solid rgba(52,143,226,0.30);
  border-radius: 999px;
  background: rgba(52,143,226,0.06);
  color: var(--cw-accent, #348fe2);
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.cw-template-tag:hover{
  border-color: var(--cw-accent, #348fe2);
  background: rgba(52,143,226,0.12);
  transform: translateY(-1px);
}
.cw-template-tag:active{ transform: translateY(0); }

/* Footer */
.cw-template-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
}
.cw-template-footer .btn-azul{ margin: 0; }
.cw-template-footer .btnsaveformato{
  background: var(--cw-accent, #348fe2);
  border-color: var(--cw-accent, #348fe2);
  color: #fff;
  border-radius: 14px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 13px;
  transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.cw-template-footer .btnsaveformato:hover{
  background: var(--cw-accent-dark, #2a72b5);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.btn-meta-secondary{
  min-width: 6rem;
  padding: 9px 18px;
  border: 1px solid rgba(15,23,42,0.18);
  border-radius: 14px;
  background: #fff;
  color: var(--cw-muted, #5f6b76);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-meta-secondary:hover{
  background: rgba(15,23,42,0.04);
  color: var(--cw-ink, #0B1220);
  border-color: rgba(15,23,42,0.30);
}

@media (max-width: 575px){
  .cw-template-meta{ flex-direction: column; align-items: flex-start; }
  .cw-template-heading{ flex-direction: column; text-align: center; }
}

/* Modo oscuro: listas widget-list (Ajustes › Servidor › MySQL, etc.) */
html[data-cwisp-scheme="dark"] #content .widget-list .widget-list-item{
  background: var(--cw-surface-panel, #171f2d);
  border-color: var(--cw-border, #344156);
}
html[data-cwisp-scheme="dark"] #content .widget-list .widget-list-item .widget-list-title{ color: var(--cw-text, #edf2f8); }
html[data-cwisp-scheme="dark"] #content .widget-list .widget-list-item .widget-list-desc{ color: var(--cw-text-muted, #aeb9c9); }
html[data-cwisp-scheme="dark"] #content .widget-list.widget-list-rounded{ border-color: var(--cw-border, #344156); }
/* =========================================================================
   Vista móvil del panel (reporte #43) — solo body.modomovil en pantallas chicas.
   El selector "Vista del panel" (auto / móvil / escritorio) vive en el menú
   del operador; en "escritorio" el viewport es de 1280px y estas reglas no aplican.
   ========================================================================= */
@media (max-width: 767px){
  /* Tablas: scroll horizontal dentro del panel, sin romper el ancho de la página */
  body.modomovil #content .dataTables_wrapper,
  body.modomovil #content .table-responsive,
  body.modomovil #content .panel-body > .table-wrapper{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  body.modomovil #content table.dataTable,
  body.modomovil #content .panel-body > table.table{
    font-size: 12px !important;
    min-width: 640px;
  }
  body.modomovil #content table.dataTable td,
  body.modomovil #content table.dataTable th{
    white-space: nowrap;
    padding: 8px 6px !important;
  }
  body.modomovil #content .dataTables_wrapper .dataTables_length,
  body.modomovil #content .dataTables_wrapper .dataTables_filter,
  body.modomovil #content .dataTables_wrapper .dataTables_info,
  body.modomovil #content .dataTables_wrapper .dataTables_paginate{
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    margin: 6px 0 !important;
  }
  body.modomovil #content .dataTables_wrapper .dataTables_filter input{
    width: 100% !important;
    margin-left: 0 !important;
    min-height: 40px;
  }
  body.modomovil #content .dataTables_wrapper .dataTables_paginate .paginate_button{
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px !important;
  }

  /* Toolbars y grupos de botones: en varias líneas, targets táctiles ≥ 40px */
  body.modomovil #content .tooltablas,
  body.modomovil #content .cwisp-dt-actions,
  body.modomovil #content .dt-buttons,
  body.modomovil #content .btn-toolbar,
  body.modomovil #content .panel-heading .panel-heading-btn{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
  }
  body.modomovil #content .btn:not(.btn-icon):not(.btn-xs):not(.btnajustes){
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  body.modomovil #content .btn-icon.btn-sm{
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
  }
  body.modomovil #content .tooltablas .btn{
    font-size: 12px !important;
  }

  /* Formularios: etiquetas arriba de los campos, campos a ancho completo */
  body.modomovil #content .form-group.row > .col-form-label,
  body.modomovil .modal .form-group.row > .col-form-label,
  body.modomovil #content .form-group.row > [class*="col-md-"],
  body.modomovil .modal .form-group.row > [class*="col-md-"],
  body.modomovil #content .form-group.row > [class*="col-lg-"],
  body.modomovil .modal .form-group.row > [class*="col-lg-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  body.modomovil #content .form-group.row > .col-form-label,
  body.modomovil .modal .form-group.row > .col-form-label{
    padding-bottom: 2px !important;
    font-weight: 600;
  }
  body.modomovil #content .form-control,
  body.modomovil .modal .form-control,
  body.modomovil #content .select2-container .select2-selection--single,
  body.modomovil .modal .select2-container .select2-selection--single{
    min-height: 42px !important;
    font-size: 15px !important; /* evita el zoom automático de iOS Safari */
  }
  body.modomovil #content .select2-container,
  body.modomovil .modal .select2-container{
    width: 100% !important;
  }
  body.modomovil #content .input-group{
    flex-wrap: wrap !important;
  }

  /* Modales a pantalla completa */
  body.modomovil .modal-dialog,
  body.modomovil .modal-dialog.modal-lg,
  body.modomovil .modal-dialog.modal-xl,
  body.modomovil .modal-dialog.modal-sm{
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    min-height: 100dvh;
  }
  body.modomovil .modal-content{
    border-radius: 0 !important;
    min-height: 100dvh;
  }
  body.modomovil .modal-body{
    padding: 12px !important;
  }
  body.modomovil .modal-footer{
    flex-wrap: wrap !important;
    gap: 6px;
  }
  body.modomovil .modal-footer .btn{
    flex: 1 1 auto;
  }

  /* Tarjetas / paneles: sin márgenes laterales grandes */
  body.modomovil #content .panel{
    margin-bottom: 12px !important;
  }
  body.modomovil #content .panel-body{
    padding: 12px !important;
  }
  body.modomovil #content .panel-heading{
    flex-wrap: wrap !important;
    gap: 6px;
  }
  body.modomovil #content .panel-heading .panel-title{
    width: 100%;
  }

  /* Pestañas de módulos (nav-tabs): scroll horizontal en una línea */
  body.modomovil #content .nav-tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  body.modomovil #content .nav-tabs .nav-item{
    flex: 0 0 auto;
  }

  /* Estadísticas / widgets en una columna */
  body.modomovil #content .row > [class*="col-md-"]:not(.col-6):not(.col-12),
  body.modomovil #content .row > [class*="col-lg-"]:not(.col-6):not(.col-12){
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Popovers (imprimir/enviar) a ancho cómodo */
  body.modomovil .popover{
    max-width: min(92vw, 320px) !important;
  }

  /* Migas y títulos de página */
  body.modomovil #content .page-header{
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  body.modomovil #content .breadcrumb{
    display: none !important;
  }
}

/* Indicador de modo activo en el menú del operador */
.dropdown-menu .cwisp-view-mode-item.active{
  font-weight: 700;
  background: rgba(var(--cw-accent-rgb),.16) !important;
  color: var(--cw-text) !important;
}
.dropdown-menu .cwisp-view-mode-item.active::after{
  content: "\2713";
  float: right;
  opacity: .8;
}

/* VPN: solo estas pantallas y sus modales. El resto del admin no usa estas clases. */
#content .cwisp-vpn{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#content .cwisp-vpn > .panel,
#content .cwisp-vpn > .alert{
  margin-left: 0;
  margin-right: 0;
}
#content .cwisp-vpn .panel-body{
  overflow: visible;
}
#content .cwisp-vpn .table-responsive{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#content .cwisp-vpn table.dataTable th,
#content .cwisp-vpn table.dataTable td{
  white-space: normal;
  vertical-align: middle;
}
#content .cwisp-vpn table.dataTable td a{
  word-break: break-word;
}
#content .cwisp-vpn td.cwisp-vpn-tools,
#content .cwisp-vpn th.cwisp-vpn-tools{
  white-space: normal !important;
  width: 1%;
  min-width: 108px;
}
#content .cwisp-vpn td.cwisp-vpn-tools .btn{
  margin: 2px;
}
#content .cwisp-vpn .cwisp-vpn-filter{
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 260px;
  margin: 0 !important;
}
#content .cwisp-vpn .cwisp-vpn-filter .select2-container{
  width: 100% !important;
  max-width: 100%;
  margin-left: 0 !important;
}
@media (min-width: 768px){
  #content .cwisp-vpn div.dataTables_wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }
  #content .cwisp-vpn div.dataTables_wrapper > .dt-buttons{
    order: 3;
    float: none !important;
    margin: 0 0 0 auto !important;
  }
  #content .cwisp-vpn div.dataTables_wrapper > .tooltablas{
    order: 1;
    flex: 1 1 280px;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
  }
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_filter{
    order: 2;
    float: none !important;
    margin: 0 !important;
    text-align: left;
  }
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_processing,
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_scroll,
  #content .cwisp-vpn div.dataTables_wrapper > .cwisp-dt-table-scroll,
  #content .cwisp-vpn div.dataTables_wrapper > .table-responsive,
  #content .cwisp-vpn div.dataTables_wrapper > table,
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_info,
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_paginate,
  #content .cwisp-vpn div.dataTables_wrapper > .dataTables_length,
  #content .cwisp-vpn div.dataTables_wrapper > .row{
    order: 10;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px){
  #content .cwisp-vpn .cwisp-vpn-filter,
  #content .cwisp-vpn .tooltablas .cwisp-vpn-filter{
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
  #content .cwisp-vpn .tooltablas .btn{
    flex: 1 1 auto;
  }
}

.cwisp-vpn-form,
.cwisp-vpn-body{
  min-width: 0;
}
.cwisp-vpn-form .modal-body,
.cwisp-vpn-body{
  overflow-x: hidden;
}
.cwisp-vpn-form .cwisp-vpn-field,
.cwisp-vpn-body .cwisp-vpn-field{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0 0 14px;
}
.cwisp-vpn-form .cwisp-vpn-field > label,
.cwisp-vpn-body .cwisp-vpn-field > label{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
  font-weight: 650;
}
.cwisp-vpn-form .cwisp-vpn-field .form-control,
.cwisp-vpn-form .cwisp-vpn-field .select2-container,
.cwisp-vpn-body .cwisp-vpn-field .form-control,
.cwisp-vpn-body .cwisp-vpn-field .select2-container{
  width: 100% !important;
  max-width: 100%;
}
.cwisp-vpn-form .cwisp-vpn-field small,
.cwisp-vpn-body .cwisp-vpn-field small{
  display: block;
  margin: 0;
  line-height: 1.45;
}
.cwisp-vpn-form .cwisp-vpn-section{
  margin: 4px 0 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(146,168,208,.28);
}
.cwisp-vpn-form .cwisp-vpn-section:first-of-type{
  border-top: 0;
  padding-top: 0;
}
.cwisp-vpn-form .cwisp-vpn-section > h5{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
}
.cwisp-vpn-form .cwisp-vpn-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 14px;
}
.cwisp-vpn-form .modal-footer,
.modal-content:has(.cwisp-vpn-body) .modal-footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.cwisp-vpn-form .modal-footer .btn{
  margin: 0;
}
.cwisp-vpn-body .cwisp-vpn-route-add{
  width: 100%;
  flex-wrap: nowrap;
}
.cwisp-vpn-body .cwisp-vpn-route-add .form-control{
  min-width: 0;
  flex: 1 1 auto;
}
.cwisp-vpn-body .table-responsive{
  width: 100%;
  overflow-x: auto;
}
.cwisp-vpn-body .cwisp-vpn-script,
.cwisp-vpn-body textarea.mikrotik-script{
  width: 100%;
  max-width: 100%;
  min-height: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre;
  overflow: auto;
}
.cwisp-vpn-body .d-flex{
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 575px){
  .cwisp-vpn-form .modal-footer .btn,
  .modal-content:has(.cwisp-vpn-body) .modal-footer .btn{
    flex: 1 1 100%;
  }
  .cwisp-vpn-body .cwisp-vpn-route-add{
    flex-wrap: wrap;
  }
  .cwisp-vpn-body .cwisp-vpn-route-add .form-control,
  .cwisp-vpn-body .cwisp-vpn-route-add .input-group-btn,
  .cwisp-vpn-body .cwisp-vpn-route-add .input-group-btn .btn{
    width: 100%;
  }
}

.cwisp-modal-accounting .ipfix-wizard-steps{
  flex-wrap: wrap;
}
.cwisp-modal-accounting .ipfix-wizard-steps li{
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.cwisp-modal-accounting .ipfix-wizard-pane .form-control,
.cwisp-modal-accounting .ipfix-wizard-pane .select2-container{
  width: 100% !important;
  max-width: 100%;
}
.cwisp-modal-accounting .modal-footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.cwisp-modal-accounting .modal-footer .btn{
  margin: 0;
}
@media (max-width: 640px){
  .cwisp-modal-accounting .ipfix-wizard-steps{
    flex-direction: column;
  }
  .cwisp-modal-accounting .modal-footer .btn{
    flex: 1 1 calc(50% - 8px);
  }
}

/* Inicio en teléfono: tarjetas a todo el ancho y el saludo en la misma guía.
   Escritorio no entra en esta consulta. */
@media (max-width: 767.98px){
  #content .cwisp-home{
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
  }
  #content .cwisp-home-hello .page-header{
    margin: 0 0 12px !important;
    padding-bottom: 8px;
    font-size: 20px !important;
    line-height: 1.25;
  }
  #content .cwisp-home-hello .page-header small{
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.3;
  }
  #content .cwisp-home > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }
  #content .cwisp-home > .row.cwisp-home-stats{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }
  #content .cwisp-home > .row > [class*="col-"]{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
  #content .cwisp-home > .row.cwisp-home-stats > [class*="col-"] > .widget.widget-stats{
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon number"
      "icon meta"
      "link link"
      "bar bar";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 14px 12px !important;
    box-sizing: border-box;
  }
  #content .cwisp-home .widget-stats .stats-content{
    display: contents;
  }
  #content .cwisp-home .widget-stats .stats-icon{
    grid-area: icon;
    align-self: start;
    margin-top: 2px !important;
  }
  #content .cwisp-home .widget-stats .stats-title{
    grid-area: title;
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    margin: 0;
  }
  #content .cwisp-home .widget-stats .stats-number{
    grid-area: number;
    font-size: 28px !important;
    line-height: 1.05;
    margin: 0 !important;
  }
  #content .cwisp-home .widget-stats .stats-meta,
  #content .cwisp-home .widget-stats .stats-content > div:not(.stats-title):not(.stats-number):not(.stats-progress):not(.stats-desc){
    grid-area: meta;
    margin: 0;
  }
  #content .cwisp-home .widget-stats .stats-desc{
    grid-area: link;
    margin: 8px 0 4px !important;
  }
  #content .cwisp-home .widget-stats .stats-desc a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px;
    box-sizing: border-box;
  }
  #content .cwisp-home .widget-stats .stats-progress.progress{
    grid-area: bar;
    width: 100%;
    margin: 4px 0 0 !important;
  }
  #content .cwisp-home .widget.widget-stats:hover{
    transform: none;
  }
}

/* scrollX: el thead de medición no debe sumar alto (padding !important lo inflaba). */
#content div.dataTables_scrollBody > table.dataTable > thead > tr > th,
#content div.dataTables_scrollBody > table.dataTable > thead > tr > td {
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
#content div.dataTables_scrollBody .dataTables_sizing {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Ajustes en teléfono: icono + texto en el centro del círculo.
   El padding genérico de .btn (8px 12px) y justify-content:flex-start
   dejaban el icono pegado arriba. */
@media (max-width: 767px){
  body.modomovil #content a.btnajustes.btn:not(.btn-icon):not(.btn-xs),
  #content .cwisp-ajustes-grid > a.btnajustes.btn{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 10px !important;
    line-height: 1.15 !important;
  }
  body.modomovil #content a.btnajustes.btn > i,
  #content .cwisp-ajustes-grid > a.btnajustes.btn > i{
    display: block !important;
    width: auto !important;
    margin: 0 0 6px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

.noty-panel.theme-panel-lg .theme-panel-content{
  padding: 0 !important;
  background: var(--cw-surface-panel, #fff);
}
.noty-panel .cwisp-noty-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  background: var(--cw-surface-panel, #fff);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.noty-panel .cwisp-noty-head-title{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cw-text, #1e2a3a);
}
.noty-panel .cwisp-noty-head-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.noty-panel .cwisp-noty-clear,
.noty-panel .cwisp-noty-close{
  border: 0;
  background: transparent;
  color: rgba(30, 42, 58, .62);
  cursor: pointer;
}
.noty-panel .cwisp-noty-clear{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.noty-panel .cwisp-noty-clear:hover,
.noty-panel .cwisp-noty-close:hover{
  background: rgba(15, 23, 42, .06);
  color: var(--cw-text, #1e2a3a);
  text-decoration: none;
}
.noty-panel .cwisp-noty-close{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.noty-panel .bodypanelboty{
  padding: 12px;
}
.noty-panel .bodypanelboty a{
  display: block;
  margin: 0 0 8px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .035);
  color: inherit;
  text-decoration: none;
}
.noty-panel .bodypanelboty a:hover{
  background: rgba(52, 143, 226, .12);
}
.noty-panel .notification_container{
  border-top: 0;
  padding: 12px;
}
.noty-panel .cwisp-noty-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.noty-panel .cwisp-noty-ico{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 1px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
}
.noty-panel .cwisp-noty-ico i{
  font-size: 15px;
  line-height: 1;
}
.noty-panel .cwisp-noty-copy{
  flex: 1 1 auto;
  min-width: 0;
}
.noty-panel .notification_title{
  padding-bottom: 2px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cw-text, #1e2a3a);
}
.noty-panel .notification_entry{
  color: rgba(30, 42, 58, .72);
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.noty-panel .notification_date{
  width: auto;
  padding-top: 6px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .62;
}
.noty-panel .cwisp-noty-empty{
  margin: 28px 8px;
  padding: 28px 18px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .03);
  text-align: center;
}
.noty-panel .cwisp-noty-empty-ico{
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 143, 226, .12);
  color: #348fe2;
  font-size: 22px;
}
.noty-panel .cwisp-noty-empty-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--cw-text, #1e2a3a);
}
.noty-panel .cwisp-noty-empty-text{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(30, 42, 58, .62);
}
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-head,
html[data-cwisp-scheme="dark"] .noty-panel.theme-panel-lg .theme-panel-content{
  background: #1a2338;
  border-bottom-color: rgba(255, 255, 255, .08);
}
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-head-title,
html[data-cwisp-scheme="dark"] .noty-panel .notification_title,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-empty-title{
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-clear,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-close,
html[data-cwisp-scheme="dark"] .noty-panel .notification_entry,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-empty-text{
  color: rgba(232, 237, 247, .72);
}
html[data-cwisp-scheme="dark"] .noty-panel .bodypanelboty a,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-empty{
  background: rgba(255, 255, 255, .04);
}
html[data-cwisp-scheme="dark"] .noty-panel .bodypanelboty a:hover,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-clear:hover,
html[data-cwisp-scheme="dark"] .noty-panel .cwisp-noty-close:hover{
  background: rgba(52, 143, 226, .18);
  color: #fff;
}
.noty-panel .notification_entry{
  white-space: pre-line;
}
.cwisp-hub-notices{
  margin-left: 304px !important;
  margin-right: 0 !important;
  margin-bottom: 0;
  padding: 20px 30px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.page-sidebar-minified .cwisp-hub-notices{
  margin-left: 84px !important;
}
@media (max-width: 767px){
  .cwisp-hub-notices,
  .page-sidebar-minified .cwisp-hub-notices,
  .page-sidebar-toggled .cwisp-hub-notices{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
.cwisp-hub-notice{
  position: relative;
  margin: 0 0 10px;
  padding: 12px 44px 12px 14px;
  border: 1px solid transparent;
  border-left-width: 6px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #1e2a3a;
}
.cwisp-hub-notice.is-info{
  background: #e8f4fd;
  border-color: #b9ddf6;
  border-left-color: #348fe2;
}
.cwisp-hub-notice.is-warning{
  background: #fff6e5;
  border-color: #f3d7a1;
  border-left-color: #f59c1a;
}
.cwisp-hub-notice.is-payment{
  background: #fdecec;
  border-color: #f3c1c1;
  border-left-color: #ff5b57;
}
.cwisp-hub-notice-title{
  font-weight: 700;
  margin-bottom: 2px;
}
.cwisp-hub-notice-renew{
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 4px;
  background: #00acac;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}
.cwisp-hub-notice-renew:hover{
  background: #008a8a;
  color: #fff !important;
}
.cwisp-hub-notice-x{
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.cwisp-hub-notice-x:hover{
  opacity: 1;
}
html[data-cwisp-scheme="dark"] .cwisp-hub-notice.is-info{
  background: #1a2a3d;
  border-color: #2c4d6e;
  border-left-color: #348fe2;
  color: #e8edf7;
}
html[data-cwisp-scheme="dark"] .cwisp-hub-notice.is-warning{
  background: #3a2d16;
  border-color: #6a5224;
  border-left-color: #f59c1a;
  color: #f6edd8;
}
html[data-cwisp-scheme="dark"] .cwisp-hub-notice.is-payment{
  background: #3a1d1d;
  border-color: #6a3030;
  border-left-color: #ff5b57;
  color: #f8e4e4;
}