/* ═══════════════════════════════════════════════════════════════════════
   denwa_v5.css — DenwaUC v5.0 Theme
   Bootstrap 5 overrides + Denwa brand colors
   Opción C: Split Panel Sidebar (evolución del diseño actual)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fuentes auto-hospedadas (sin dependencia externa) ─────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/pjs-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/pjs-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jbm-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/jbm-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens canónicos Denwa Design System v1.0 ───────────────────────── */
:root {
  --dw-brand-deep: #0D5B46;
  --dw-brand-bright: #00E68A;
  --dw-brand-black: #0A0F0F;
  --dw-brand-white: #F5F3EF;
  --dw-green-50: #E7F2EE;
  --dw-green-100: #C2DED4;
  --dw-green-300: #4E8F7B;
  --dw-green-500: #0D5B46;
  --dw-green-700: #0A4636;
  --dw-green-900: #062E24;
  --dw-bright-300: #66F0B5;
  --dw-bright-500: #00E68A;
  --dw-bright-600: #00C97A;
  --dw-bright-700: #00A865;
  --dw-n-0: #FFFFFF;
  --dw-n-50: #F5F3EF;
  --dw-n-100: #EAE7E1;
  --dw-n-200: #D8D4CC;
  --dw-n-400: #9A968E;
  --dw-n-600: #5C5A54;
  --dw-n-800: #232826;
  --dw-n-900: #131A18;
  --dw-n-950: #0A0F0F;

  --dw-primary: var(--dw-green-500);
  --dw-primary-hover: var(--dw-green-700);
  --dw-primary-soft: var(--dw-green-50);
  --dw-accent: var(--dw-bright-500);
  --dw-accent-ink: var(--dw-bright-700);
  --dw-bg: var(--dw-n-50);
  --dw-surface: var(--dw-n-0);
  --dw-surface-2: var(--dw-surface);
  --dw-border: var(--dw-n-200);
  --dw-line: var(--dw-n-100);
  --dw-line-2: #F0EEE9;
  --dw-ink: var(--dw-n-950);
  --dw-ink-2: var(--dw-n-600);
  --dw-ink-3: var(--dw-n-400);
  --dw-topbar: var(--dw-brand-black);
  --dw-subbar: var(--dw-green-500);
  --dw-subbar-border: var(--dw-green-700);
  --dw-sidenav: var(--dw-surface);
  --dw-on-primary: var(--dw-n-0);

  --dw-success: var(--dw-green-500);
  --dw-success-soft: var(--dw-green-50);
  --dw-warning: #8A5A00;
  --dw-warning-soft: #FBF0DA;
  --dw-danger: #A62B2B;
  --dw-danger-soft: #FBE5E5;
  --dw-info: #1F5B8A;
  --dw-info-soft: #E3EEF6;

  --dw-font: 'Sora', 'Trebuchet MS', system-ui, sans-serif;
  --dw-font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --dw-fs-xxl: 28px;
  --dw-fs-xl: 20px;
  --dw-fs-lg: 16px;
  --dw-fs-md: 14px;
  --dw-fs-sm: 12px;
  --dw-fs-xs: 11px;
  --dw-radius: 16px;
  --dw-radius-sm: 8px;
  --dw-radius-pill: 999px;
  --dw-shadow: 0 1px 2px rgba(10,15,15,.04), 0 2px 8px rgba(10,15,15,.05);
  --dw-shadow-2: 0 4px 18px rgba(10,15,15,.07);
  --dw-sp-1: 4px;
  --dw-sp-2: 8px;
  --dw-sp-3: 12px;
  --dw-sp-4: 16px;
  --dw-sp-6: 24px;
  --dw-sp-8: 32px;
  --dw-z-dropdown: 1000;
  --dw-z-sticky: 1020;
  --dw-z-modal: 1050;
  --dw-z-toast: 1080;

  /* Alias de compatibilidad para la interfaz heredada. */
  --dw-green: var(--dw-primary);
  --dw-green-light: var(--dw-green-300);
  --dw-green-dark: var(--dw-primary-hover);
  --dw-green-hover: var(--dw-primary-hover);
  --green-2: var(--dw-primary);
  --green-ink: var(--dw-primary);
  --green-soft: var(--dw-primary-soft);
  --ink-2: var(--dw-ink-2);
  --ink-3: var(--dw-ink-3);
  --amber: var(--dw-warning);
  --amber-l: var(--dw-warning-soft);
  --red: var(--dw-danger);
  --red-l: var(--dw-danger-soft);
  --blue: var(--dw-info);
  --blue-l: var(--dw-info-soft);
}

/* ── Reset base ────────────────────────────────────────────────────────── */
body {
  font-family: var(--dw-font);
  background: var(--dw-bg);
  font-size: 14px !important;   /* denwa.css hereda 11px — 14px cómodo para pantallas modernas */
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   OVERRIDES CRITICOS — elimina el layout fijo legacy de denwa.css
   #panel: position:absolute; width:800px; left:50%; margin-left:-400px
   #content: position:absolute; top:152px; height:365px
   ══════════════════════════════════════════════════════════════════════ */
/* Sticky footer: doble técnica para máxima compatibilidad
   A) body flex → #panel flex:1  (si body flex funciona)
   B) #panel min-height:100vh   (fallback universal)
   C) #footer margin-top:auto  (empuja al fondo del flex panel) */
html {
  height: 100%;
  font-size: 16px !important;   /* denwa.css pone html,body{font-size:11px} → rem base roto */
}

body {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

#panel {
  position: relative !important;
  width: 100% !important;
  left: auto !important;
  top: auto !important;
  margin-left: 0 !important;
  flex: 1 0 auto !important;      /* A: crece si body es flex */
  min-height: 100vh !important;   /* B: fallback garantizado */
  display: flex !important;
  flex-direction: column !important;
  font-size: 13px !important;     /* denwa.css hereda 11px en todo el panel */
}

#panel #content,
#panel #home_content {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background-image: none !important;
  font-size: 13px !important;     /* denwa.css pone #panel #content { font-size:11px } */
}

/* Remover background images del shell legacy */
#panel #header,
#panel #menu,
#panel #submenu {
  display: none !important;   /* estos divs ya no existen en el nuevo HTML */
}

/* home_content: eliminar el main_div de altura fija */
#panel #home_content #main_div {
  height: auto !important;
  width: 100% !important;
  left: auto !important;
}

/* Fondo de contenido: usa el fondo de página para que el espacio vacío
   alrededor de los paneles sea coherente con el layout general.
   Los paneles internos mantienen su propio fondo blanco vía denwa.css */
#content {
  background-color: var(--dw-bg) !important;
  background-image: none !important;
}
/* #home_content SIN !important — permite que home.php aplique su propio tema oscuro */
#home_content {
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE HOME — bloques .stats1 expandibles
   home.php usa inline-block + width fijo heredado de 2012.
   Convertimos el contenedor en flex y los bloques en flex items.
   ══════════════════════════════════════════════════════════════════════ */

/* Wrapper flex: los bloques flotan side-by-side y se envuelven en mobile */
#home_content #main_div > .ha_center,
#home_content #main_div > .tleft {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  align-items: flex-start;
  width: 100% !important;
}

/* Cada bloque crece para ocupar el espacio disponible */
#home_content .stats1 {
  flex: 1 1 280px !important;
  width: auto !important;       /* anula el width inline del HTML */
  min-width: 260px;
  background-color: #f8fbf8 !important;
  background-image: none !important;
  border: 1px solid var(--dw-border);
  border-radius: 4px;
  overflow: hidden;
}

/* En pantallas anchas, max 3 columnas iguales */
@media (min-width: 900px) {
  #home_content .stats1 {
    max-width: calc(33.33% - 10px);
  }
}

/* En tablets: 2 columnas */
@media (max-width: 899px) and (min-width: 560px) {
  #home_content .stats1 {
    max-width: calc(50% - 10px);
  }
}

/* En mobile: columna completa */
@media (max-width: 559px) {
  #home_content .stats1 {
    max-width: 100%;
    min-width: 0;
  }
}

/* Subtitulos de cada bloque: mantener estilo pero con fondo variable */
#home_content .stats1 .subtitle.t {
  background: var(--dw-green) !important;
  color: #fff !important;
  padding-left: 6px;
}

/* Eliminar el espacio vacío excesivo bajo el contenido (solo home) */
#panel #home_content {
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTENIDO GENERAL — padding y ancho para todas las páginas
   ══════════════════════════════════════════════════════════════════════ */

/* home_content: padding base (sin !important — home.php lo sobreescribe con su dark theme) */
#panel #home_content {
  padding: 8px;
  box-sizing: border-box;
}
/* #content: sin padding — las listas/tablas usan todo el ancho disponible */
#panel #content {
  padding: 0 !important;
  box-sizing: border-box;
}

/* Filas de datos: font-size legible, hereda de body (13px) */
#panel #content td,
#panel #content .row1,
#panel #content .row2,
#panel #content .trColor1,
#panel #content .trColor2 {
  font-size: inherit;
}

/* Encabezados de columna (.title): texto ligeramente mayor */
#panel #content .title td,
#panel #content tr.title td {
  font-size: 13px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   NAVBAR PRINCIPAL
   ══════════════════════════════════════════════════════════════════════ */
.dw-navbar {
  background: var(--dw-topbar);
  border-bottom: 2px solid var(--dw-green);
  padding: 0 1rem;
  min-height: 50px;
  position: relative;
}

/* Marca / logo */
.dw-navbar .navbar-brand {
  padding: .35rem 0;
  margin-right: 1.25rem;
  text-decoration: none;
}

.dw-brand-name {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.1;
}

.dw-brand-model {
  font-size: .68rem;
  color: var(--dw-green-light);
  font-weight: 400;
  letter-spacing: .02em;
}

/* Items de navegación */
.dw-navbar .nav-item > .nav-link {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 500;
  padding: .85rem .55rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .15s, background .15s;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.dw-navbar .nav-item > .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.dw-navbar .nav-item.dw-active > .nav-link {
  color: var(--dw-green-light);
  border-bottom-color: var(--dw-green-light);
}

/* Dropdown menus */
.dw-navbar .dropdown-menu {
  background: #0f220f;
  border: 1px solid #2a452a;
  border-top: 2px solid var(--dw-green-light);
  border-radius: 0 0 5px 5px;
  padding: .3rem 0;
  min-width: 195px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  margin-top: 0;
}

.dw-navbar .dropdown-item {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  padding: .42rem 1rem;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

.dw-navbar .dropdown-item:hover,
.dw-navbar .dropdown-item:focus {
  background: var(--dw-green);
  color: #fff;
}

.dw-navbar .dropdown-divider { border-color: #2a452a; }

/* Submenus anidados */
.dw-navbar .dropdown-submenu { position: relative; }

.dw-navbar .dropdown-submenu > .dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dw-navbar .dropdown-submenu > .dropdown-item::after {
  content: '';
  display: inline-block;
  border-top:    .3em solid transparent;
  border-bottom: .3em solid transparent;
  border-left:   .35em solid rgba(255,255,255,.5);
  margin-left: .4rem;
  flex-shrink: 0;
}

.dw-navbar .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -2px;
  display: none;
  border-radius: 0 5px 5px 5px;
}

.dw-navbar .dropdown-submenu:hover > .dropdown-menu,
.dw-navbar .dropdown-submenu.dw-open > .dropdown-menu {
  display: block;
}

/* ── Zona derecha: reloj + usuario + logout ────────────────────────────── */
.dw-nav-right {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .4rem 0;
}

.dw-clock-wrap {
  text-align: right;
  line-height: 1.15;
}

.dw-clock-time {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.dw-clock-time input.clock {
  background: transparent;
  border: none;
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  width: 60px;
  padding: 0;
  outline: none;
  cursor: default;
  font-family: var(--dw-font-mono);
  letter-spacing: 0;
}

.dw-clock-date {
  font-size: .67rem;
  color: var(--dw-green-light);
  letter-spacing: .02em;
}

.dw-user-chip {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.8);
  font-size: .78rem;
}

.dw-user-chip i { font-size: 1.05rem; color: var(--dw-green-light); }
.dw-user-info { display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.dw-user-info small { font-size: .65rem; color: rgba(255,255,255,.55); font-weight: 400; }

/* ── Util links (Recargar + Cerrar sesión) — navbar horizontal ───────────── */
.dw-sb-util-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s;
}
.dw-sb-util-link span { display: none; }
.dw-sb-util-link:hover { color: #fff; }
.dw-sb-util-reload { display: none; }
.dw-sb-divider { display: none; }

/* ── Logout ─────────────────────────────────────────────────────────────── */
.dw-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  font-size: 1rem;
}

.dw-logout:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--dw-green-light);
  color: var(--dw-green-light);
}

/* ── Indicador de tareas admin ─────────────────────────────────────────── */
#adminTasks {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  z-index: 1060;
  display: none;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  padding: .2rem .75rem;
  pointer-events: none;
}

#adminTasks.dw-at-visible { display: flex; }

#adminTasks span {
  font-size: .75rem;
  color: #fff;
  font-style: italic;
}

/* ── Hamburger ─────────────────────────────────────────────────────────── */
.dw-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.25);
  padding: .2rem .45rem;
}

.dw-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ══════════════════════════════════════════════════════════════════════
   SUBBAR — Título de sección + botones de acción
   ══════════════════════════════════════════════════════════════════════ */
.dw-subbar {
  background: var(--dw-subbar);
  border-bottom: 1px solid var(--dw-subbar-border);
  display: flex;
  align-items: center;
  padding: .3rem 1.1rem;
  min-height: 40px;
  gap: .75rem;
}

.dw-subbar-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dw-subbar-title img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.dw-subbar-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.dw-sb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}

.dw-sb-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.dw-sb-btn i { font-size: .95rem; }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
#panel #footer {
  position: relative !important;  /* override position:absolute;top:519px de denwa.css */
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  margin-top: auto !important;
}

#footer {
  background: var(--dw-topbar);
  border-top: 1px solid #1e3a1e;
  padding: .45rem 1.1rem;
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-align: right;
}

#footer a {
  color: var(--dw-green-light);
  text-decoration: none;
}

#footer a:hover { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   COMPATIBILIDAD CON CONTENIDO LEGACY
   Mantiene el look de las páginas existentes mientras se migran
   ══════════════════════════════════════════════════════════════════════ */

/* #content crece para llenar el espacio entre topbar y footer en el flex column de #panel */
#content {
  flex: 1 1 auto;
  background: #fff;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Title bars de sección (.title en páginas existentes) */
#panel #content .title {
  background: var(--dw-green);
  color: #fff;
}

/* Filas alternadas — preservar colores pero más suaves */
#panel #content .row1 { background: #f8fbf8; }
#panel #content .row2 { background: #EEF5D8; }
#panel #content .row1:hover,
#panel #content .row2:hover { background: #E8F5CC; }

/* Botones (.button / .boxybutton) — resetea height fijo del legacy */
#panel #content .button,
#panel #content input[type=button],
#panel #content .boxybutton,
.boxybutton {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1.3 !important;
  background: var(--dw-green) !important;
  background-image: none !important;
  border: 1px solid var(--dw-green-dark) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: .82rem !important;
  font-family: var(--dw-font) !important;
  cursor: pointer !important;
  transition: background .15s !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
  margin-right: 6px !important;
}

#panel #content .button:hover,
#panel #content input[type=button]:hover,
#panel #content .boxybutton:hover,
.boxybutton:hover {
  background: var(--dw-green-hover) !important;
  background-image: none !important;
  color: #fff !important;
}

/* Inputs */
#panel #content input[type=text],
#panel #content input[type=password],
#panel #content select,
.boxyselect1 {
  border: 1px solid var(--dw-border);
  border-radius: 3px;
  padding: 2px 5px;
  font-family: var(--dw-font);
  font-size: .82rem;
}

#panel #content input[type=text]:focus,
#panel #content input[type=password]:focus,
#panel #content select:focus {
  border-color: var(--dw-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(74,148,0,.15);
}

/* Scrollbar personalizada (Chrome/Edge) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4f0; }
::-webkit-scrollbar-thumb { background: var(--dw-green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dw-green-dark); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  .dw-navbar .navbar-collapse {
    background: #0d200d;
    padding: .5rem .75rem;
    border-top: 1px solid #2a452a;
    max-height: 80vh;
    overflow-y: auto;
  }

  .dw-navbar .nav-item > .nav-link { padding: .55rem .25rem; }

  /* Submenus anidados: se expanden inline en móvil */
  .dw-navbar .dropdown-submenu > .dropdown-menu {
    position: static;
    display: none;
    left: 0;
    box-shadow: none;
    border: none;
    background: #0a180a;
    padding-left: 1rem;
    border-radius: 0;
  }

  .dw-navbar .dropdown-submenu.dw-open > .dropdown-menu { display: block; }

  /* Ocultar reloj en móvil */
  .dw-clock-wrap { display: none; }

  /* Admin tasks: static en móvil */
  #adminTasks {
    position: static;
    transform: none;
    width: 100%;
    margin: .25rem 0;
    justify-content: center;
  }

  .dw-subbar { padding: .25rem .75rem; }
  .dw-subbar-title { font-size: .75rem; }
}

@media (max-width: 575.98px) {
  .dw-user-chip span { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   INNER CONTENT PANELS — layout responsivo para todas las páginas internas
   Problema raíz: los hijos directos de #content son position:absolute
   → con height:auto el padre colapsa a 0px y los paneles quedan invisibles.
   Además todos los anchos están hardcodeados en px para 800px total.
   Fix: min-height en #content + widths a calc(%) proporcionales al diseño
   original (base 780px usable = 800px - 9px margen cada lado).
   ══════════════════════════════════════════════════════════════════════ */

/* min-height para que los paneles split (position:absolute) sean visibles.
   Los paneles full-width (#list2, #list) son ahora position:relative y crecen solos. */
#panel #content {
  min-height: 350px !important;
}

/* ── Split 50/50 (380px + 380px en 780px) ────────────────────────────── */
#panel #content #list-left,
#panel #content #list-paging-left,
#panel #content #list-right,
#panel #content #list-paging-right {
  width: calc(50% - 14px) !important;
}

/* ── Thin — 50/50 con altura reducida ───────────────────────────────── */
#panel #content #list-left-thin,
#panel #content #list-right-thin,
#panel #content #list-center-thin {
  width: calc(50% - 14px) !important;
}

/* ── Monitor (186px/580px → 24%/74%) ───────────────────────────────── */
#panel #content #list-monitor-filter {
  width: calc(24% - 14px) !important;
}
#panel #content #list-monitor {
  width: calc(74% - 14px) !important;
}

/* ── Short/Large (260px/500px → 33%/67%) ───────────────────────────── */
#panel #content #list-left-short,
#panel #content #list-paging-left-short {
  width: calc(33% - 14px) !important;
}
#panel #content #list-right-large,
#panel #content #list-paging-right-large {
  width: calc(65% - 14px) !important;
}

/* ── Very short/large (130px/630px → 17%/82%) ──────────────────────── */
#panel #content #list-left-very-short,
#panel #content #list-paging-left-very-short,
#panel #content #list-left-very-short-1,
#panel #content #list-paging-left-very-short-1,
#panel #content #list-paging-left-very-short-1_hover {
  width: calc(18% - 14px) !important;
}
#panel #content #list-right-very-large,
#panel #content #list-paging-right-very-large,
#panel #content #list-paging-right-very-large-np,
#panel #content .list-right-very-large,
#panel #content .list-paging-right-very-large-np {
  width: calc(80% - 14px) !important;
}

/* ── Short-160 (160px → 21%) ────────────────────────────────────────── */
#panel #content #list-left-short-160,
#panel #content #list-paging-left-short-160 {
  width: calc(21% - 14px) !important;
}

/* ── Full width (778px) ─────────────────────────────────────────────── */
#panel #content #list-all {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
}

/* ── IVR / short right tabs (370–380px → 50%) ───────────────────────── */
#panel #content .short_right_tabs_menu,
#panel #content .short_right_tabscontent_background,
#panel #content .short_right_tab_footer {
  width: calc(50% - 14px) !important;
}

/* ── Very large right tabs (≈67%) ───────────────────────────────────── */
#panel #content .very_large_right_tabs_menu,
#panel #content .very_large_right_tabscontent_background,
#panel #content .very_large_right_tab_footer {
  width: calc(65% - 14px) !important;
}

/* ── #list y #list-paging (panel full-width sin sufijo) ─────────────── */
#panel #content #list,
#panel #content #list-paging {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
}

/* ── #list2: ocupa todo el espacio disponible en #content ────────────── */
#panel #content #list2 {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Scroll container interno (users_list_cont, numbers_list_cont, etc.)
   crece para llenar el espacio disponible entre header y paging */
#users_list_cont,
#numbers_list_cont {
  flex: 1 1 auto !important;
  height: auto !important;
  overflow-y: auto !important;
}

/* Barra de paginado: queda al fondo del #list2 */
#panel #content #list2-paging {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  background: #F5F7F2 !important;
  border-top: 1px solid var(--dw-border) !important;
  padding: 3px 0 !important;
}

/* ── #list-all (full width) ─────────────────────────────────────────── */

/* ── #um (card_config, homeSetup, pbxUM, userImport, userBatchCreation…)
   Legacy: position:absolute; width:700px; top:20px; left:48px
   Fix: flujo normal centrado, ancho máximo legible ─────────────────── */
#panel #content #um {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: calc(100% - 18px) !important;
  max-width: 750px !important;
  height: auto !important;
  min-height: 330px !important;   /* hijos position:absolute no expanden height:auto */
  margin: 16px auto !important;
  box-sizing: border-box !important;
}

#panel #content #um input[type=text],
#panel #content #um input[type=password],
#panel #content #um select {
  width: 100% !important;
  max-width: 220px !important;
  box-sizing: border-box;
}

/* ── Fallback: tablas dentro de #content no desbordan el contenedor ── */
#panel #content table {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Fallback: contenedores position:relative con hijos absolutos
   (reports_ivr.php, ne.*.php) — scroll horizontal si la suma de
   columnas px supera el ancho del viewport ────────────────────────── */
#panel #content .denwa-table {
  overflow-x: auto;
}

/* ── homea.php: error tipográfico width="101px" → forzar auto ───────── */
#panel #content td[width="101"] {
  width: auto !important;
}

/* ── .tabs_menu / .tabscontent_background / .tab_footer (tabs centrados)
   Legacy: 730–740px fixed, left:28px (devices.php, etc.)
   Fix: calc(100% - 46px) = 28px izq + 18px der ──────────────────────── */
#panel #content .tabs_menu {
  width: calc(100% - 46px) !important;
}
#panel #content .tabscontent_background {
  width: calc(100% - 46px) !important;
}
#panel #content .tab_footer {
  width: calc(100% - 46px) !important;
}

/* ── .tabs_menu_r_xl / _tabscontent / _footer (tabs right extra-large)
   Legacy: 600–610px, right:9px (firewall.php)
   600/780 = 76.9% → calc(77% - 14px) ─────────────────────────────────── */
#panel #content .tabs_menu_r_xl {
  width: calc(77% - 14px) !important;
}
#panel #content .tabscontent_background_r_xl {
  width: calc(77% - 14px) !important;
}
#panel #content .tab_footer_r_xl {
  width: calc(77% - 14px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 5.2 — variables consolidadas en :root principal (ver línea 49)
   ════════════════════════════════════════════════════════════════ */

/* ── Fondo general de página ─────────────────────────────────────── */
body {
  background: var(--dw-bg) !important;
}

/* ── KPI row ─────────────────────────────────────────────────────── */
.dw-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding: 20px 20px 8px;
}
.dw-kpi {
  background: #fff;
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 14px 16px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dw-kpi-top {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.dw-kpi-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.dw-kpi-ico svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  fill: none;
}
.dw-kpi-value {
  font-family: var(--dw-font-mono);
  font-size: 27px;
  font-weight: 800;
  color: #1a2530;
  letter-spacing: -.5px;
  line-height: 1.15;
  word-break: break-word;
}
.dw-kpi-value small {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0;
}
.dw-kpi-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* ── Modern stats cards (home.php) ──────────────────────────────── */
#panel #home_content .stats1 {
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  background: #fff !important;
  border: 1px solid var(--dw-line) !important;
  vertical-align: top;
  margin-bottom: 10px;
}
#panel #home_content .stats1 .subtitle.t {
  background: var(--dw-surface-2) !important;
  color: var(--dw-ink) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  border-radius: calc(var(--dw-radius) - 1px) calc(var(--dw-radius) - 1px) 0 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  padding-left: 4px;
}
#panel #home_content .stats1 .subtitle.b {
  display: none !important;
}

/* ── Encabezados de tabla neutros (todas las páginas) ───────────── */
#panel #content .title td,
#panel #content .title th,
#panel #content th.title {
  background: var(--dw-surface-2) !important;
  color: var(--dw-ink-2) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── Row hover (todas las páginas) ──────────────────────────────── */
#panel #content tr.row1:hover td,
#panel #content tr.row2:hover td {
  background-color: var(--green-soft) !important;
  transition: background-color .12s;
}

/* ── Inputs y selects modernos ───────────────────────────────────── */
#panel input[type=text],
#panel input[type=password],
#panel input[type=email],
#panel input[type=number],
#panel select,
#panel textarea {
  border-radius: 6px !important;
  border: 1px solid #C8DEB0 !important;
  padding: 3px 8px !important;
  font-size: 13px !important;
  transition: border-color .15s, box-shadow .15s;
}
#panel input[type=text]:focus,
#panel input[type=password]:focus,
#panel input[type=email]:focus,
#panel input[type=number]:focus,
#panel select:focus,
#panel textarea:focus {
  outline: none !important;
  border-color: var(--green-2) !important;
  box-shadow: 0 0 0 3px rgba(74,148,0,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 5.3 — Sidebar nav: paleta moderna blanco + verde
   ════════════════════════════════════════════════════════════════ */

/* ── Sidebar fijo lado izquierdo ─────────────────────────────────── */
.dw-sidenav {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 220px !important;
  height: 100vh !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  border-right: 1px solid var(--dw-line) !important;
  box-shadow: 2px 0 12px rgba(16,30,45,.06) !important;
  scrollbar-width: thin;
  scrollbar-color: #C8DEB0 transparent;
}

/* ── Panel principal — compensar ancho del sidebar ──────────────── */
#panel {
  padding-left: 220px !important;
}

/* ── Brand / logo arriba (verde) ─────────────────────────────────── */
.dw-sidenav .navbar-brand {
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid var(--dw-line) !important;
  width: 100% !important;
  margin-right: 0 !important;
  background: var(--dw-primary-hover) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ── Topbar del área de contenido: reloj alineado a la derecha ───── */
.dw-content-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 24px;
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--dw-line);
  backdrop-filter: blur(4px);
}
.dw-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dw-green-dark);
}
.dw-page-title .bi {
  font-size: 1rem;
  color: var(--dw-green);
}
.dw-content-topbar .dw-page-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.dw-content-topbar .dw-page-clock input.clock {
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  width: 62px;
  padding: 0;
  outline: none;
  cursor: default;
  font-family: var(--dw-font-mono);
}
.dw-content-topbar .dw-clk-sep {
  color: var(--ink-3);
  font-size: .75rem;
}
.dw-sidenav .dw-brand-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.dw-sidenav .dw-brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: .2px;
}
.dw-sidenav .dw-brand-model {
  font-size: 9.5px !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Toggler mobile ──────────────────────────────────────────────── */
.dw-sidenav > .navbar-toggler {
  display: none !important;
  color: #1a2530 !important;
  border-color: #e6eaee !important;
}

/* ── Admin tasks ─────────────────────────────────────────────────── */
.dw-sidenav #adminTasks {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--dw-line);
  background: #fffbeb;
}

/* ── Collapse siempre visible en sidebar ─────────────────────────── */
.dw-sidenav > .navbar-collapse,
.dw-sidenav .collapse.navbar-collapse {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 68px) !important;
}

/* ── Lista de ítems ──────────────────────────────────────────────── */
.dw-sidenav .navbar-nav {
  flex-direction: column !important;
  flex: 1 !important;
  padding: 10px 0 !important;
  gap: 1px !important;
  width: 100% !important;
}

/* ── Links nivel 1 ──────────────────────────────────────────────── */
.dw-sidenav .nav-item > .nav-link {
  color: #1a2530 !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap;
  letter-spacing: .01em;
  transition: background .12s, color .12s;
  text-decoration: none !important;
}
.dw-sidenav .nav-item > .nav-link::after {
  transition: transform .2s;
  opacity: .5;
  margin-left: auto !important;
}
/* ── Iconos en nav items ─────────────────────────────────────────── */
.dw-sidenav .nav-item > .nav-link .dw-nav-icon {
  font-size: 13px !important;
  color: var(--green-2) !important;
  flex-shrink: 0;
  opacity: .85;
}
.dw-sidenav .nav-item > .nav-link:hover .dw-nav-icon,
.dw-sidenav .nav-item.show > .nav-link .dw-nav-icon { opacity: 1; color: var(--dw-primary-hover) !important; }
.dw-sidenav .nav-item > .nav-link.dw-active .dw-nav-icon { color: #fff !important; opacity: 1; }
.dw-sidenav .nav-item.show > .nav-link::after {
  transform: rotate(180deg);
  opacity: 1;
}
.dw-sidenav .nav-item > .nav-link:hover,
.dw-sidenav .nav-item > .nav-link:focus {
  background: #E8F5CC !important;
  color: var(--dw-primary-hover) !important;
}
.dw-sidenav .nav-item.show > .nav-link {
  background: #D0E8A8 !important;
  color: #285500 !important;
  font-weight: 700 !important;
}

/* ── Dropdown inline (acordeón) ─────────────────────────────────── */
.dw-sidenav .dropdown-menu {
  position: static !important;
  transform: none !important;
  inset: unset !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: #F5F7F2 !important;
  padding: 4px 0 6px 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  float: none !important;
}
.dw-sidenav .dropdown-item {
  color: var(--ink-2) !important;
  font-size: 12px !important;
  padding: 7px 14px 7px 20px !important;
  border-radius: 6px !important;
  margin: 1px 8px !important;
  width: calc(100% - 16px) !important;
  white-space: normal;
  transition: background .1s, color .1s;
}
.dw-sidenav .dropdown-item:hover,
.dw-sidenav .dropdown-item:focus {
  background: #E8F5CC !important;
  color: var(--dw-primary-hover) !important;
}
.dw-sidenav hr.dropdown-divider {
  border-color: var(--dw-line) !important;
  margin: 5px 12px !important;
}

/* ── Sub-submenú ────────────────────────────────────────────────── */
.dw-sidenav .dropdown-submenu > .dropdown-menu {
  display: none !important;
  padding-left: 8px !important;
  background: #EDF6DC !important;
}
.dw-sidenav .dropdown-submenu.dw-open > .dropdown-menu {
  display: block !important;
}
.dw-sidenav .dropdown-submenu > .dropdown-item::after {
  content: '›';
  float: right;
  font-size: 14px;
  line-height: 1;
  opacity: .4;
}
.dw-sidenav .dropdown-submenu.dw-open > .dropdown-item::after {
  content: '⌄';
  font-size: 11px;
  opacity: .7;
}

/* ── Estado activo ───────────────────────────────────────────────── */
.dw-sidenav .nav-item > .nav-link.dw-active {
  background: var(--green-2) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--green-ink) !important;
  border-radius: 0 8px 8px 0 !important;
  margin-left: 0 !important;
  padding-left: 19px !important;
}
.dw-sidenav .nav-item > .nav-link.dw-active::after {
  opacity: .8 !important;
}
.dw-sidenav .dropdown-item.dw-active {
  background: var(--dw-primary-soft) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-left: 3px solid var(--green-ink) !important;
  padding-left: 17px !important;
  border-radius: 0 6px 6px 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* ── Zona inferior: util links + usuario + reloj ─────────────────── */
.dw-sidenav .dw-nav-right {
  margin-top: auto !important;
  margin-left: 0 !important;
  padding: 6px 0 8px !important;
  border-top: 1px solid var(--dw-line) !important;
  background: #f4f6f8 !important;
  flex-direction: column !important;
  gap: 1px !important;
  width: 100% !important;
}

/* Util links en sidebar: selectores más específicos para ganar sobre Bootstrap/legacy */
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 1px 8px !important;
  border-radius: 8px !important;
  color: #1a2530 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .1s, color .1s !important;
  width: calc(100% - 16px) !important;
}
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link span { display: inline !important; }
nav.dw-sidenav .dw-nav-right a.dw-sb-util-reload { display: flex !important; }
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link i {
  font-size: 13px !important;
  color: var(--green-2) !important;
  flex-shrink: 0;
}
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover {
  background: #E8F5CC !important;
  color: var(--dw-primary-hover) !important;
}
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover i { color: var(--dw-primary-hover) !important; }
nav.dw-sidenav .dw-nav-right a.dw-sb-util-logout:hover {
  background: #fce8e8 !important;
  color: #c0392b !important;
}
nav.dw-sidenav .dw-nav-right a.dw-sb-util-logout:hover i { color: #c0392b !important; }

/* Divisor */
.dw-sidenav .dw-sb-divider {
  display: block !important;
  margin: 5px 14px !important;
  border-color: var(--dw-line) !important;
  opacity: 1 !important;
}

/* User chip: muestra nombre + rol */
.dw-sidenav .dw-user-chip {
  justify-content: flex-start !important;
  width: calc(100% - 28px) !important;
  margin: 2px 14px !important;
  overflow: hidden;
  color: #1a2530 !important;
  background: rgba(74,148,0,.1) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  align-items: center !important;
}
.dw-sidenav .dw-user-chip i {
  color: var(--green-2) !important;
  flex-shrink: 0;
}
.dw-sidenav .dw-user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  overflow: hidden;
}
.dw-sidenav .dw-user-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  color: #1a2530 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}
.dw-sidenav .dw-user-info small {
  color: var(--ink-3) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
}


/* Ocultar el antiguo ícono de logout (reemplazado por dw-sb-util-logout) */
.dw-sidenav .dw-logout { display: none !important; }

/* ── Subbar: sticky arriba del área de contenido ─────────────────── */
#dw-subbar {
  position: sticky;
  top: 0;
  z-index: 99;
}

/* ── Mobile: sidebar colapsado ───────────────────────────────────── */
@media (max-width: 991px) {
  .dw-sidenav {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    box-shadow: none !important;
  }
  .dw-sidenav > .navbar-toggler { display: block !important; }
  .dw-sidenav > .navbar-collapse,
  .dw-sidenav .collapse.navbar-collapse { max-height: none !important; }
  .dw-sidenav .collapse:not(.show) { display: none !important; }
  .dw-sidenav .dropdown-menu { background: #F0F7E6 !important; }
  #panel { padding-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 5.4 — Dashboard moderno (home.php)
   ════════════════════════════════════════════════════════════════ */

/* ── Grid de cards ──────────────────────────────────────────────── */
.dw-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  padding: 16px 20px 24px;
}

/* ── Card header interno ─────────────────────────────────────────── */
.dw-card-hd {
  font-size: 13px;
  font-weight: 700;
  color: #1a2530;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--dw-line);
  margin-bottom: 4px;
  letter-spacing: .01em;
}

/* ── Card body padding ───────────────────────────────────────────── */
.dw-card-body { padding: 4px 0 0; }

/* ── Separador interno ───────────────────────────────────────────── */
.dw-card-sep { border-top: 1px solid var(--dw-line); margin: 10px 0; }

/* ── Etiqueta de sección ─────────────────────────────────────────── */
.dw-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Leyenda inline de charts ────────────────────────────────────── */
.dw-cleg {
  display: flex;
  gap: 8px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  color: var(--ink-2);
}
.dw-cleg span { display: flex; align-items: center; gap: 3px; }
.dw-cleg i {
  display: inline-block;
  width: 8px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

/* ── Fila clave-valor (fecha, uptime) ────────────────────────────── */
.dw-stat-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f0f3f5;
  font-size: 12.5px;
  color: #374151;
  gap: 8px;
}
.dw-stat-kv > span:first-child { font-weight: 500; }
.dw-stat-kv .dw-mono {
  font-family: var(--dw-font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
}

/* ── Fila de servicio / estado ───────────────────────────────────── */
.dw-svc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f3f5;
  font-size: 12.5px;
  color: #374151;
  gap: 8px;
}
.dw-svc-row:last-child { border-bottom: none; }
.dw-svc-row > span:first-child { font-weight: 500; flex: 1; min-width: 0; }
.dw-svc-row > span#status {
  font-size: 11px;
  color: var(--ink-2);
  text-align: right;
}
.dw-svc-row > span#desc {
  font-size: 11px;
  color: var(--ink-2);
}
.dw-svc-link { cursor: pointer; }
.dw-svc-link:hover { background: #F5F7F2; border-radius: 6px; padding-left: 6px; margin: 0 -6px; }

/* ── Dots de estado ──────────────────────────────────────────────── */
.dw-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.dw-dot-ok   { background: var(--dw-success); box-shadow: 0 0 0 3px var(--dw-success-soft); }
.dw-dot-err  { background: #d6453d; box-shadow: 0 0 0 3px rgba(214,69,61,.15); }
.dw-dot-warn { background: #d98a00; box-shadow: 0 0 0 3px rgba(217,138,0,.15); }
.dw-dot-info { background: #2f74d0; box-shadow: 0 0 0 3px rgba(47,116,208,.15); }

/* ── Barras de particiones ───────────────────────────────────────── */
.dw-part-row { margin: 8px 0; }
.dw-part-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.dw-part-name { font-size: 12.5px; font-weight: 600; color: #374151; }
.dw-part-pct  { font-size: 11px; font-family: var(--dw-font-mono); color: var(--ink-3); }
.dw-part-bar  { height: 6px; border-radius: 3px; background: #e6eaee; overflow: hidden; }
.dw-part-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* ── Wrapper del gráfico de llamadas ─────────────────────────────── */
.dw-chart-wrap {
  background: #F8FBF0;
  border-radius: 8px;
  padding: 6px 0 2px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 5.5 B — Componentes: tablas, filas, inputs, badges
   ════════════════════════════════════════════════════════════════ */

/* ── Table headers: padding y tracking ──────────────────────────── */
#panel #content .title td,
#panel #content .title th,
#panel #content th.title {
  padding: 8px 10px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ── Filas: respiro vertical + separador fino ────────────────────── */
#panel #content .row1 td,
#panel #content .row2 td,
#panel #content tr.row1 > td,
#panel #content tr.row2 > td {
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--dw-line-2) !important;
  vertical-align: middle !important;
}

/* ── Colores de fila: blanco + wash neutro ───────────────────────── */
#panel #content .row1,
#panel #content tr.row1   { background: #FFFFFF !important; }
#panel #content .row2,
#panel #content tr.row2   { background: #F8FAF5 !important; }

/* ── Hover unificado (elemento y celdas) ─────────────────────────── */
#panel #content .row1:hover,
#panel #content .row2:hover { background: var(--green-soft) !important; }
#panel #content tr.row1:hover td,
#panel #content tr.row2:hover td {
  background-color: var(--green-soft) !important;
}

/* ── Paginación: tipografía y espaciado ──────────────────────────── */
#panel #content #list2-paging td,
#panel #content #list-paging td,
#panel #content #list-paging-left td,
#panel #content #list-paging-right td {
  padding: 4px 8px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  vertical-align: middle !important;
  border-bottom: none !important;
}

/* ── Inputs más cómodos: altura consistente ──────────────────────── */
#panel input[type=text],
#panel input[type=password],
#panel input[type=email],
#panel input[type=number],
#panel select {
  height: 30px !important;
  padding: 4px 9px !important;
  font-family: var(--dw-font) !important;
  color: #1C2B1A !important;
  background: #fff !important;
}

#panel textarea {
  padding: 6px 9px !important;
  font-family: var(--dw-font) !important;
  color: #1C2B1A !important;
  background: #fff !important;
}

/* ── Badge de estado inline ──────────────────────────────────────── */
.dw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.dw-badge-ok   { background: var(--green-soft); color: var(--green-ink); }
.dw-badge-err  { background: var(--red-l);      color: var(--red); }
.dw-badge-warn { background: var(--amber-l);    color: var(--amber); }
.dw-badge-info { background: var(--blue-l);     color: var(--blue); }

/* ── Dot OK actualizado al nuevo brand ───────────────────────────── */
.dw-dot-ok {
  background: var(--dw-green) !important;
  box-shadow: 0 0 0 3px rgba(74,148,0,.15) !important;
}

/* ── Scrollbar con nuevo token ───────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--dw-green) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--dw-green-dark) !important; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .dw-dash-grid { grid-template-columns: 1fr; padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FASE 5.5 C — Páginas de lista: card treatment
   ════════════════════════════════════════════════════════════════ */

/* ── #content: fondo visible entre cards ─────────────────────────── */
#content,
#panel #content {
  background: var(--dw-bg) !important;
}

/* ── #list2: card principal (users, numbers, trunks group…) ──────── */
#panel #content #list2 {
  margin: 16px !important;
  border-radius: 12px !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Paginación dentro del card: sin margen extra */
#panel #content #list2-paging {
  border-radius: 0 !important;
}

/* ── #list + #list-paging (sin sufijo, un solo div de tabla) ─────── */
#panel #content #list {
  margin: 16px 16px 0 !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  border-bottom: none !important;
  overflow: hidden !important;
  background: #fff !important;
}
#panel #content #list-paging {
  margin: 0 16px 16px !important;
  border-radius: 0 0 12px 12px !important;
  border: 1px solid var(--dw-line) !important;
  border-top: none !important;
  overflow: hidden !important;
  background: #F5F7F2 !important;
}

/* ── #list-all (full-width sin paginación) ───────────────────────── */
#panel #content #list-all {
  margin: 16px !important;
  border-radius: 12px !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* ── Paneles split: card visual (sin overflow:hidden — tienen selects) */
#panel #content #list-left,
#panel #content #list-right,
#panel #content #list-left-short,
#panel #content #list-right-large,
#panel #content #list-left-thin,
#panel #content #list-right-thin,
#panel #content #list-center-thin,
#panel #content #list-left-very-short,
#panel #content #list-left-very-short-1,
#panel #content #list-right-very-large,
#panel #content #list-left-short-160,
#panel #content #list-monitor-filter,
#panel #content #list-monitor,
#panel #content .list-right-very-large {
  border-radius: 12px !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  background: #fff !important;
  height: auto !important;
  min-height: 360px !important;
  top: 0 !important;
}

/* ── Paging de split panels ──────────────────────────────────────── */
#panel #content #list-paging-left,
#panel #content #list-paging-right,
#panel #content #list-paging-left-short,
#panel #content #list-paging-right-large,
#panel #content #list-paging-left-very-short,
#panel #content #list-paging-right-very-large,
#panel #content #list-paging-right-very-large-np {
  border-radius: 0 0 8px 8px !important;
  border: 1px solid var(--dw-line) !important;
  border-top: none !important;
  background: #F5F7F2 !important;
}

/* min-height del content para que los paneles absolutos sean visibles */
#panel #content {
  min-height: 420px !important;
}

/* ── #um (formularios de edición) ────────────────────────────────── */
#panel #content #um {
  position: relative !important;
  border-radius: 12px !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  background: #fff !important;
  min-height: 340px !important;
}

/* ── Tabs (.tabs_menu, .tabscontent_background) ──────────────────── */
#panel #content .tabs_menu,
#panel #content .tabs_menu_r_xl,
#panel #content .very_large_right_tabs_menu,
#panel #content .short_right_tabs_menu {
  border-radius: 8px 8px 0 0 !important;
  border: 1px solid var(--dw-line) !important;
  border-bottom: none !important;
  background: #fff !important;
}
#panel #content .tabscontent_background,
#panel #content .tabscontent_background_r_xl,
#panel #content .very_large_right_tabscontent_background,
#panel #content .short_right_tabscontent_background {
  border: 1px solid var(--dw-line) !important;
  border-top: none !important;
  background: #fff !important;
}
#panel #content .tab_footer,
#panel #content .tab_footer_r_xl,
#panel #content .very_large_right_tab_footer,
#panel #content .short_right_tab_footer {
  border: 1px solid var(--dw-line) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  background: #F5F7F2 !important;
}

/* ── Fase E — utilidad de ícono inline (reemplazo de PNG) ─────────── */
.dw-ic {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Hover en filas de tabla ──────────────────────────────────────── */
#panel #content tr.row1:hover > td,
#panel #content tr.row2:hover > td,
#panel #content .row1:hover td,
#panel #content .row2:hover td {
  background: #EDF5DE !important;
  transition: background .12s !important;
}

/* ── Focus ring verde en inputs, selects y textareas ─────────────── */
#panel #content input:not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not([type=checkbox]):not([type=radio]):focus,
#panel #content select:focus,
#panel #content textarea:focus {
  outline: 2px solid var(--dw-green) !important;
  outline-offset: 1px !important;
  border-color: var(--dw-green) !important;
  box-shadow: 0 0 0 3px rgba(74,148,0,.12) !important;
}

/* ── Select consistente ───────────────────────────────────────────── */
#panel #content select {
  border: 1px solid var(--dw-border) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color: #2a3540 !important;
  background: #fff !important;
  cursor: pointer !important;
}

/* ── Paginación (.pg-normal / .pg-selected) ──────────────────────── */
#panel .pg-normal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 5px !important;
  background: #F0F2F5 !important;
  border: 1px solid var(--dw-line) !important;
  color: var(--ink-2) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  font-family: var(--dw-font) !important;
  cursor: pointer !important;
  margin: 0 2px !important;
  transition: background .12s, color .12s !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}
#panel .pg-normal:hover {
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  border-color: var(--dw-green) !important;
}
#panel .pg-selected {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  border-radius: 5px !important;
  background: var(--dw-green) !important;
  border: 1px solid var(--dw-green-dark) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  font-family: var(--dw-font) !important;
  cursor: default !important;
  margin: 0 2px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

/* ── Textarea global ─────────────────────────────────────────────── */
#panel #content textarea {
  border: 1px solid var(--dw-border) !important;
  border-radius: 4px !important;
  padding: 6px 8px !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color: #2a3540 !important;
  background: #fff !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

/* ── Scrollbar fino en paneles ───────────────────────────────────── */
#panel ::-webkit-scrollbar        { width: 5px; height: 5px; }
#panel ::-webkit-scrollbar-track  { background: transparent; }
#panel ::-webkit-scrollbar-thumb  { background: var(--dw-border); border-radius: 3px; }
#panel ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ── Spinner CSS (reemplaza loading.gif / ajax-loader.gif) ───────── */
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-spin {
  animation: dw-spin .7s linear infinite;
  display: inline-block !important;
}

/* ── Boxy modal ──────────────────────────────────────────────────── */
.boxy-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(16,30,45,.18), 0 2px 8px rgba(16,30,45,.1) !important;
  overflow: hidden !important;
}
.boxy-wrapper .top-left,
.boxy-wrapper .top-right,
.boxy-wrapper .bottom-left,
.boxy-wrapper .bottom-right {
  background: none !important;
}
.boxy-wrapper .top,
.boxy-wrapper .bottom,
.boxy-wrapper .left,
.boxy-wrapper .right {
  background-color: var(--dw-line) !important;
  opacity: 1 !important;
  filter: none !important;
}
.boxy-wrapper .title-bar {
  background: var(--dw-surface-2) !important;
  color: var(--dw-ink) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  padding: 10px 14px !important;
}
.boxy-wrapper .title-bar h2 {
  font-family: var(--dw-font) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.boxy-wrapper .title-bar .close {
  color: rgba(255,255,255,.75) !important;
  font-size: 1rem !important;
}
.boxy-wrapper .title-bar .close:hover {
  color: #fff !important;
}
.boxy-inner {
  background: #fff !important;
}
.boxy-content {
  padding: 16px !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color: #2a3540 !important;
}
.boxy-modal-blackout {
  background-color: rgba(16,30,45,.5) !important;
  opacity: 1 !important;
}

/* ── Checkboxes y radios ─────────────────────────────────────────── */
#panel input[type=checkbox],
#panel input[type=radio] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid var(--dw-border) !important;
  border-radius: 3px !important;
  background: #fff !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: border-color .12s, background .12s !important;
}
#panel input[type=radio] {
  border-radius: 50% !important;
}
#panel input[type=checkbox]:checked,
#panel input[type=radio]:checked {
  background: var(--dw-green) !important;
  border-color: var(--dw-green-dark) !important;
}
#panel input[type=checkbox]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 0px !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #fff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  display: block !important;
}
#panel input[type=radio]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 3px !important;
  top: 3px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: block !important;
}
#panel input[type=checkbox]:focus,
#panel input[type=radio]:focus {
  outline: 2px solid var(--dw-green) !important;
  outline-offset: 1px !important;
}
#panel input[type=checkbox]:hover:not(:checked),
#panel input[type=radio]:hover:not(:checked) {
  border-color: var(--dw-green) !important;
}

/* ── Tabs (.tab / .tab_active / .tab_over) ───────────────────────── */
#panel #content .tab {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ink-2) !important;
  font-family: var(--dw-font) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  transition: color .12s, border-bottom-color .12s !important;
}
#panel #content .tab:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dw-green) !important;
  border-bottom: 2px solid var(--dw-green) !important;
}
#panel #content .tab_over {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--dw-green) !important;
  border-bottom: 2px solid var(--dw-green) !important;
}
#panel #content .tab_active,
#panel #content .tab_active:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--dw-green) !important;
  color: var(--dw-green) !important;
  font-family: var(--dw-font) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}

/* ── .subtitle / .subtitle2 (sub-headers dentro de tablas) ──────── */
#panel #content .subtitle td,
#panel #content tr.subtitle > td {
  background: var(--dw-bg) !important;
  color: var(--ink-2) !important;
  font-family: var(--dw-font) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-bottom: 1px solid var(--dw-line) !important;
}
#panel #content .subtitle2 td,
#panel #content tr.subtitle2 > td {
  background: var(--green-soft) !important;
  color: var(--green-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(74,148,0,.15) !important;
}

/* ── Hijos directos de #um: anula width:690px hardcodeado ────────── */
#panel #content #um > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── #um form internals ──────────────────────────────────────────── */
#panel #content #um #warning:not(:empty) {
  background: var(--red-l) !important;
  border-bottom: 1px solid #f5c6c3 !important;
  color: var(--red) !important;
  font-size: .82rem !important;
  font-family: var(--dw-font) !important;
  padding: 7px 16px !important;
  border-radius: 12px 12px 0 0 !important;
}
#panel #content #um table td {
  padding: 3px 5px !important;
  vertical-align: middle !important;
  font-size: .82rem !important;
  font-family: var(--dw-font) !important;
}
#panel #content #um table td[align=right] {
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-right: 8px !important;
  font-size: .78rem !important;
}
#panel #content #um table input[type=text],
#panel #content #um table input[type=password],
#panel #content #um table input[type=email],
#panel #content #um table input[type=number],
#panel #content #um table select,
#panel #content #um table textarea {
  border: 1px solid var(--dw-border) !important;
  border-radius: 4px !important;
  padding: 3px 7px !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color: #2a3540 !important;
  background: #fff !important;
}
#panel #content #um table input[type=text]:focus,
#panel #content #um table input[type=password]:focus,
#panel #content #um table select:focus,
#panel #content #um table textarea:focus {
  outline: 2px solid var(--dw-green) !important;
  outline-offset: 1px !important;
  border-color: var(--dw-green) !important;
  box-shadow: 0 0 0 3px rgba(74,148,0,.1) !important;
}

/* ── Login page ──────────────────────────────────────────────────── */
.login {
  font-family: var(--dw-font);
}
.login .left-panel {
  background: var(--dw-primary-hover) !important;
}
.login .left-panel .title-1 {
  font-weight: 700 !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-family: var(--dw-font) !important;
}
.login .left-panel .title-2 {
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  font-family: var(--dw-font) !important;
}
.login .right-panel input[type=text],
.login .right-panel input[type=password] {
  border: 1px solid var(--dw-border) !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  font-family: var(--dw-font) !important;
  font-size: .9rem !important;
  color: #2a3540 !important;
  background: #fff !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.login .right-panel input[type=text]:focus,
.login .right-panel input[type=password]:focus {
  border-color: var(--dw-green) !important;
  box-shadow: 0 0 0 3px rgba(74,148,0,.12) !important;
}
.login .right-panel select {
  border: 1px solid var(--dw-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-family: var(--dw-font) !important;
  font-size: .85rem !important;
  background: #fff !important;
  color: #2a3540 !important;
}
.login .right-panel button[type=submit] {
  background: var(--dw-primary) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--dw-font) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  letter-spacing: .02em !important;
  transition: opacity .15s !important;
}
.login .right-panel button[type=submit]:hover {
  opacity: .88 !important;
}
.login .warning {
  color: var(--red) !important;
  font-size: .82rem !important;
  min-height: 18px !important;
  font-family: var(--dw-font) !important;
}
.login .right-panel a,
.login .right-panel a:visited {
  color: var(--dw-green-dark) !important;
  font-size: .82rem !important;
  text-decoration: none !important;
}
.login .right-panel a:hover {
  text-decoration: underline !important;
}

/* ── #list-thin: panel delgado (otherIfaces.php y similares) ────── */
#panel #content #list-thin {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  min-height: 300px !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  box-shadow: var(--dw-shadow) !important;
  border: 1px solid var(--dw-line) !important;
  background: #fff !important;
  margin: 16px auto !important;
}

/* ── ne.* y páginas de config HW: anula widths px en paneles ────── */
#panel #content #list-left > div,
#panel #content #list-right > div,
#panel #content #list-thin > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── .configdivwrapper (ne.*, cloud.php): tab panels de config HW ── */
/* min-height:328px para que top:50% funcione en diálogos centrados  */
#panel #content .configdivwrapper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 328px !important;
  top: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
}
#panel #content .configdivwrapper > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── tdmCards.php — #cards-all: layout absoluto TDM ──────────────── */
#panel #content #cards-all {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 370px !important;
  top: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
}

/* ── Divs section dentro de #um: height:auto + sin overflow clip ── */
#panel #content #um > div[style*="overflow:hidden"] {
  height: auto !important;
  overflow: visible !important;
}

/* ── ne.dwp80x.monitor.sbc.php — #monitor_content_container ─────── */
#panel #content #monitor_content_container {
  width: 100% !important;
  max-width: 758px !important;
  height: auto !important;
  min-height: 320px !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME GLOBAL — [data-theme="dark"] en <html>
   Estrategia: CSS-variable override + reglas específicas para
   selectores con valores hex hardcodeados.
   Toggle JS en header.php. Persiste en localStorage('dw-theme').
   ════════════════════════════════════════════════════════════════ */

/* ── Variables y token override ──────────────────────────────────── */
:root[data-theme="dark"] {
  --dw-primary: var(--dw-bright-500);
  --dw-primary-hover: var(--dw-bright-300);
  --dw-primary-soft: rgba(0,230,138,.12);
  --dw-accent: var(--dw-bright-500);
  --dw-accent-ink: var(--dw-bright-500);
  --dw-bg: var(--dw-brand-black);
  --dw-surface: var(--dw-n-900);
  --dw-border: #233029;
  --dw-line: #1C2622;
  --dw-line-2: #233029;
  --dw-ink: #EDF2EE;
  --dw-ink-2: #8FA69C;
  --dw-ink-3: #5C7268;
  --dw-topbar: #060A0A;
  --dw-subbar: var(--dw-green-700);
  --dw-subbar-border: var(--dw-green-900);
  --dw-sidenav: #07110F;
  --dw-on-primary: var(--dw-brand-black);
  --dw-success: var(--dw-bright-500);
  --dw-success-soft: rgba(0,230,138,.12);
  --dw-warning: #F0B84E;
  --dw-warning-soft: rgba(240,184,78,.12);
  --dw-danger: #F07B7B;
  --dw-danger-soft: rgba(240,123,123,.12);
  --dw-info: #6FB6E8;
  --dw-info-soft: rgba(111,182,232,.12);
  --dw-shadow: 0 2px 12px rgba(0,0,0,.45);
  --dw-shadow-2: 0 4px 20px rgba(0,0,0,.55);
  --dw-shadow-md: var(--dw-shadow-2);
  --green-soft: var(--dw-primary-soft);
  --green-ink: var(--dw-primary);
  --ink-2: var(--dw-ink-2);
  --ink-3: var(--dw-ink-3);

  /* dashboard vars (home.php) */
  --hd-bg: var(--dw-bg);
  --hd-surf: var(--dw-surface);
  --hd-border: var(--dw-border);
  --hd-text: var(--dw-ink);
  --hd-muted: var(--dw-ink-2);
}

/* ── Fondo global ────────────────────────────────────────────────── */
[data-theme="dark"] body          { background: var(--dw-bg) !important; color: var(--dw-ink) !important; }
[data-theme="dark"] #panel        { background: var(--dw-bg) !important; }
[data-theme="dark"] #content,
[data-theme="dark"] #panel #content { background: var(--dw-bg) !important; }

/* ── Sidebar: fondo, texto, dropdowns ───────────────────────────── */
[data-theme="dark"] .dw-sidenav {
  background: var(--dw-sidenav) !important;
  border-right-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-sidenav .dw-brand {
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-sidenav .dw-nav-section {
  color: var(--dw-ink-3) !important;
}
[data-theme="dark"] .dw-sidenav .nav-item > .nav-link {
  color: #a8c8e8 !important;
}
[data-theme="dark"] .dw-sidenav .nav-item > .nav-link:hover {
  background: rgba(74,148,0,.15) !important;
  color: var(--dw-primary) !important;
}
[data-theme="dark"] .dw-sidenav .nav-item > .nav-link.dw-active {
  background: var(--dw-primary) !important;
  color: #0A0F0F !important;
}
[data-theme="dark"] .dw-sidenav .dropdown-menu {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-sidenav .dropdown-item {
  color: #9abcd6 !important;
}
[data-theme="dark"] .dw-sidenav .dropdown-item:hover {
  background: rgba(74,148,0,.18) !important;
  color: var(--dw-primary) !important;
}
[data-theme="dark"] .dw-sidenav .dropdown-item.dw-active {
  background: var(--dw-primary) !important;
  color: #0A0F0F !important;
}

/* Zona inferior sidebar */
[data-theme="dark"] .dw-sidenav .dw-nav-right {
  background: var(--dw-surface) !important;
  border-top-color: var(--dw-border) !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-link {
  color: #a8c8e8 !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-link i {
  color: var(--dw-green) !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover {
  background: rgba(74,148,0,.15) !important;
  color: var(--dw-primary) !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover i {
  color: var(--dw-primary) !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-logout:hover {
  background: rgba(214,69,61,.15) !important;
  color: #f08080 !important;
}
[data-theme="dark"] nav.dw-sidenav .dw-nav-right a.dw-sb-util-logout:hover i {
  color: #f08080 !important;
}
[data-theme="dark"] .dw-sidenav .dw-sb-divider {
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-sidenav .dw-user-chip {
  background: rgba(74,148,0,.1) !important;
  color: #a8c8e8 !important;
}
[data-theme="dark"] .dw-sidenav .dw-user-info span { color: var(--dw-ink) !important; }
[data-theme="dark"] .dw-sidenav .dw-user-info small { color: var(--dw-ink-3) !important; }

/* Mobile sidebar dropdown */
@media (max-width: 991px) {
  [data-theme="dark"] .dw-sidenav .dropdown-menu {
    background: var(--dw-surface) !important;
  }
}

/* ── Topbar ──────────────────────────────────────────────────────── */
[data-theme="dark"] .dw-content-topbar {
  background: var(--dw-topbar) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  backdrop-filter: blur(8px) !important;
}
[data-theme="dark"] .dw-page-title { color: var(--dw-primary) !important; }
[data-theme="dark"] .dw-page-title i { color: var(--dw-primary) !important; }
[data-theme="dark"] .dw-page-clock { color: var(--dw-ink-2) !important; }
[data-theme="dark"] .dw-page-clock input[type=text] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--dw-ink-2) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Cards / paneles de lista ────────────────────────────────────── */
[data-theme="dark"] #panel #content #list2,
[data-theme="dark"] #panel #content #list,
[data-theme="dark"] #panel #content #list-all,
[data-theme="dark"] #panel #content #list-thin,
[data-theme="dark"] #panel #content #um {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content #list-left,
[data-theme="dark"] #panel #content #list-right,
[data-theme="dark"] #panel #content #list-left-short,
[data-theme="dark"] #panel #content #list-right-large,
[data-theme="dark"] #panel #content #list-left-thin,
[data-theme="dark"] #panel #content #list-right-thin,
[data-theme="dark"] #panel #content #list-center-thin,
[data-theme="dark"] #panel #content #list-left-very-short,
[data-theme="dark"] #panel #content #list-left-very-short-1,
[data-theme="dark"] #panel #content #list-right-very-large,
[data-theme="dark"] #panel #content #list-left-short-160,
[data-theme="dark"] #panel #content #list-monitor-filter,
[data-theme="dark"] #panel #content #list-monitor,
[data-theme="dark"] #panel #content .list-right-very-large {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content #list-paging,
[data-theme="dark"] #panel #content #list2-paging,
[data-theme="dark"] #panel #content #list-paging-left,
[data-theme="dark"] #panel #content #list-paging-right,
[data-theme="dark"] #panel #content #list-paging-left-short,
[data-theme="dark"] #panel #content #list-paging-right-large,
[data-theme="dark"] #panel #content #list-paging-left-very-short,
[data-theme="dark"] #panel #content #list-paging-right-very-large,
[data-theme="dark"] #panel #content #list-paging-right-very-large-np {
  background: #0f1e2e !important;
  border-color: var(--dw-border) !important;
}

/* ── Table headers: elimina el verde legacy ─────────────────────── */
[data-theme="dark"] #panel #content .title,
[data-theme="dark"] #panel #content tr.title {
  background: #0a1520 !important;
  background-color: #0a1520 !important;
}
[data-theme="dark"] #panel #content .title td,
[data-theme="dark"] #panel #content .title th,
[data-theme="dark"] #panel #content tr.title > td,
[data-theme="dark"] #panel #content tr.title > th,
[data-theme="dark"] #panel #content th.title {
  background: #0a1520 !important;
  background-color: #0a1520 !important;
  color: var(--dw-ink-2) !important;
  border-bottom-color: var(--dw-border) !important;
}

/* ── Tablas: filas — todas las variantes legacy ──────────────────── */
[data-theme="dark"] #panel #content .row1,
[data-theme="dark"] #panel #content .row1_hover,
[data-theme="dark"] #panel #content .row1_big,
[data-theme="dark"] #panel #content .row1_big_hover,
[data-theme="dark"] #panel #content tr.row1,
[data-theme="dark"] #panel #content tr.row1_hover {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
}
[data-theme="dark"] #panel #content .row1 td,
[data-theme="dark"] #panel #content .row1_hover td,
[data-theme="dark"] #panel #content .row1_big td,
[data-theme="dark"] #panel #content .row1_big_hover td,
[data-theme="dark"] #panel #content tr.row1 > td,
[data-theme="dark"] #panel #content tr.row1_hover > td {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .row2,
[data-theme="dark"] #panel #content .row2_hover,
[data-theme="dark"] #panel #content .row2_big,
[data-theme="dark"] #panel #content .row2_big_hover,
[data-theme="dark"] #panel #content tr.row2,
[data-theme="dark"] #panel #content tr.row2_hover {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
}
[data-theme="dark"] #panel #content .row2 td,
[data-theme="dark"] #panel #content .row2_hover td,
[data-theme="dark"] #panel #content .row2_big td,
[data-theme="dark"] #panel #content .row2_big_hover td,
[data-theme="dark"] #panel #content tr.row2 > td,
[data-theme="dark"] #panel #content tr.row2_hover > td {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-bottom-color: var(--dw-border) !important;
}

/* Hover en todas las variantes */
[data-theme="dark"] #panel #content .row1:hover,
[data-theme="dark"] #panel #content .row1_hover:hover,
[data-theme="dark"] #panel #content .row1_big:hover,
[data-theme="dark"] #panel #content .row1_big_hover:hover,
[data-theme="dark"] #panel #content tr.row1:hover,
[data-theme="dark"] #panel #content tr.row1_hover:hover,
[data-theme="dark"] #panel #content .row2:hover,
[data-theme="dark"] #panel #content .row2_hover:hover,
[data-theme="dark"] #panel #content .row2_big:hover,
[data-theme="dark"] #panel #content .row2_big_hover:hover,
[data-theme="dark"] #panel #content tr.row2:hover,
[data-theme="dark"] #panel #content tr.row2_hover:hover {
  background: rgba(74,148,0,.15) !important;
  background-color: rgba(74,148,0,.15) !important;
}
[data-theme="dark"] #panel #content tr.row1:hover > td,
[data-theme="dark"] #panel #content tr.row1_hover:hover > td,
[data-theme="dark"] #panel #content tr.row2:hover > td,
[data-theme="dark"] #panel #content tr.row2_hover:hover > td {
  background: rgba(74,148,0,.15) !important;
  background-color: rgba(74,148,0,.15) !important;
}

/* ── Subtitle rows ───────────────────────────────────────────────── */
[data-theme="dark"] #panel #content .subtitle td,
[data-theme="dark"] #panel #content tr.subtitle > td {
  background: var(--dw-surface) !important;
  color: var(--dw-ink-2) !important;
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .subtitle2 td,
[data-theme="dark"] #panel #content tr.subtitle2 > td {
  background: rgba(74,148,0,.15) !important;
  color: var(--dw-primary) !important;
  border-bottom-color: rgba(74,148,0,.2) !important;
}

/* ── Tabs ────────────────────────────────────────────────────────── */
[data-theme="dark"] #panel #content .tabs_menu,
[data-theme="dark"] #panel #content .tabs_menu_r_xl,
[data-theme="dark"] #panel #content .very_large_right_tabs_menu,
[data-theme="dark"] #panel #content .short_right_tabs_menu {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .tabscontent_background,
[data-theme="dark"] #panel #content .tabscontent_background_r_xl,
[data-theme="dark"] #panel #content .very_large_right_tabscontent_background,
[data-theme="dark"] #panel #content .short_right_tabscontent_background {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .tab_footer,
[data-theme="dark"] #panel #content .tab_footer_r_xl,
[data-theme="dark"] #panel #content .very_large_right_tab_footer,
[data-theme="dark"] #panel #content .short_right_tab_footer {
  background: #0f1e2e !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .tab {
  background: #0a1520 !important;
  color: var(--dw-ink-2) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .tab:hover,
[data-theme="dark"] #panel #content .tab_over {
  background: var(--dw-surface) !important;
  color: var(--dw-primary) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content .tab_selected,
[data-theme="dark"] #panel #content .tab_active {
  background: var(--dw-surface) !important;
  color: var(--dw-primary) !important;
  font-weight: bold !important;
  border-color: var(--dw-border) !important;
  border-bottom-color: var(--dw-surface) !important;
}
[data-theme="dark"] #panel #content .tab_active:hover { color: var(--dw-primary) !important; }

/* tab_selected base style (light mode) — same visual as tab_active */
#panel #content .tab_selected {
  background-color: var(--dw-primary-soft);
  color: var(--dw-primary);
  font-weight: bold;
  border-top: solid 2px var(--dw-primary);
  border-bottom: solid 2px var(--dw-primary-soft);
  border-left: solid 2px var(--dw-primary);
  border-right: solid 2px var(--dw-primary);
}

/* ── Inputs, selects, textareas ──────────────────────────────────── */
[data-theme="dark"] #panel input[type=text],
[data-theme="dark"] #panel input[type=password],
[data-theme="dark"] #panel input[type=email],
[data-theme="dark"] #panel input[type=number],
[data-theme="dark"] #panel select,
[data-theme="dark"] #panel textarea {
  background: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content select {
  background: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content textarea {
  background: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel #content #um table input[type=text],
[data-theme="dark"] #panel #content #um table input[type=password],
[data-theme="dark"] #panel #content #um table input[type=email],
[data-theme="dark"] #panel #content #um table input[type=number],
[data-theme="dark"] #panel #content #um table select,
[data-theme="dark"] #panel #content #um table textarea {
  background: var(--dw-surface) !important;
  color: var(--dw-ink) !important;
  border-color: var(--dw-border) !important;
}
[data-theme="dark"] #panel input[type=checkbox],
[data-theme="dark"] #panel input[type=radio] {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

/* ── #um internals ───────────────────────────────────────────────── */
[data-theme="dark"] #panel #content #um table td {
  color: var(--dw-ink) !important;
}
[data-theme="dark"] #panel #content #um table td[align=right] {
  color: var(--dw-ink-2) !important;
}
[data-theme="dark"] #panel #content #um #warning:not(:empty) {
  background: rgba(214,69,61,.15) !important;
  color: #f08080 !important;
  border-bottom-color: rgba(214,69,61,.25) !important;
}

/* ── Paginación ──────────────────────────────────────────────────── */
[data-theme="dark"] #panel .pg-normal {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  color: var(--dw-ink-2) !important;
}
[data-theme="dark"] #panel .pg-normal:hover {
  background: rgba(74,148,0,.18) !important;
  color: var(--dw-primary) !important;
  border-color: var(--dw-green) !important;
}
[data-theme="dark"] #panel #content #list2-paging td,
[data-theme="dark"] #panel #content #list-paging td,
[data-theme="dark"] #panel #content #list-paging-left td,
[data-theme="dark"] #panel #content #list-paging-right td {
  color: var(--dw-ink-2) !important;
}

/* ── Modal Boxy ──────────────────────────────────────────────────── */
[data-theme="dark"] .boxy-inner    { background: var(--dw-surface) !important; }
[data-theme="dark"] .boxy-content  { color: var(--dw-ink) !important; }
[data-theme="dark"] .boxy-wrapper .top,
[data-theme="dark"] .boxy-wrapper .bottom,
[data-theme="dark"] .boxy-wrapper .left,
[data-theme="dark"] .boxy-wrapper .right {
  background-color: var(--dw-border) !important;
}

/* ── Usuarios: modales legacy de Acciones y DIDs ───────────────────
   Puente temático para contenido Boxy que antes fijaba la paleta clara
   directamente en denwa.css, el HTML y el JavaScript. */
.boxy-wrapper .dw-boxy-dialog {
  --dw-dialog-bg: #FFFFFF;
  --dw-dialog-panel: #F7F9F7;
  --dw-dialog-row: #FFFFFF;
  --dw-dialog-row-alt: #EEF5EA;
  --dw-dialog-text: #263745;
  --dw-dialog-muted: #687970;
  --dw-dialog-border: #D6E0D8;
  --dw-dialog-active-bg: #EAF5D8;
  --dw-dialog-active-text: #2A5700;
  background: transparent !important;
  color: var(--dw-dialog-text) !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color-scheme: light;
}

.boxy-wrapper .dw-boxy-dialog a,
.boxy-wrapper .dw-boxy-dialog .value {
  color: var(--dw-green) !important;
}

.boxy-wrapper .dw-boxy-dialog .title2 {
  color: var(--dw-dialog-text) !important;
}

.boxy-wrapper .dw-boxy-dialog .gray {
  color: var(--dw-dialog-muted) !important;
}

.boxy-wrapper .dw-boxy-dialog .dw-boxy-panel {
  background: var(--dw-dialog-panel) !important;
  border-color: var(--dw-dialog-border) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

.boxy-wrapper .dw-boxy-dialog .boxyrow1,
.boxy-wrapper .dw-boxy-dialog .boxyrow1_big {
  background: var(--dw-dialog-row) !important;
  color: var(--dw-dialog-text) !important;
}

.boxy-wrapper .dw-boxy-dialog .boxyrow2,
.boxy-wrapper .dw-boxy-dialog .boxyrow2_big {
  background: var(--dw-dialog-row-alt) !important;
  color: var(--dw-dialog-text) !important;
}

.boxy-wrapper .dw-boxy-dialog .borderbot3,
.boxy-wrapper .dw-boxy-dialog .bordertop3,
.boxy-wrapper .dw-boxy-dialog td[style*="border"] {
  border-color: var(--dw-dialog-border) !important;
}

#m_a_boxy .dw-massive-actions-layout,
#m_a_boxy .dw-massive-actions-layout td,
#m_a_boxy .dw-massive-fields-header {
  color: var(--dw-dialog-text) !important;
}

#m_a_boxy .dw-massive-tabs,
#m_a_boxy .dw-massive-fields-header {
  background: var(--dw-dialog-panel) !important;
  border-color: var(--dw-dialog-border) !important;
}

#m_a_boxy .dw-boxy-tab {
  background: transparent !important;
  color: var(--dw-dialog-text) !important;
  border-color: var(--dw-dialog-border) !important;
  transition: background-color .15s ease, color .15s ease;
}

#m_a_boxy .dw-boxy-tab:hover,
#m_a_boxy .dw-boxy-tab.is-active {
  background: var(--dw-dialog-active-bg) !important;
  color: var(--dw-dialog-active-text) !important;
}

.boxy-wrapper .dw-boxy-dialog input[type="text"],
.boxy-wrapper .dw-boxy-dialog input[type="password"],
.boxy-wrapper .dw-boxy-dialog select,
.boxy-wrapper .dw-boxy-dialog textarea {
  background: var(--dw-dialog-bg) !important;
  border: 1px solid var(--dw-dialog-border) !important;
  border-radius: 4px !important;
  color: var(--dw-dialog-text) !important;
  font-family: var(--dw-font) !important;
}

.boxy-wrapper .dw-boxy-dialog input[type="checkbox"] {
  accent-color: var(--dw-green);
}

.boxy-wrapper .dw-boxy-dialog .disable_param {
  background-image: none !important;
  color: var(--dw-dialog-muted) !important;
  opacity: .58;
}

#foobar .dw-did-row {
  display: table-row;
  color: var(--dw-dialog-text) !important;
}

#foobar .dw-did-row-even {
  background: var(--dw-dialog-row) !important;
}

#foobar .dw-did-row-odd {
  background: var(--dw-dialog-row-alt) !important;
}

:root[data-theme="dark"] .boxy-wrapper .dw-boxy-dialog {
  --dw-dialog-bg: #0E1513;
  --dw-dialog-panel: #151F1B;
  --dw-dialog-row: #111916;
  --dw-dialog-row-alt: #18231F;
  --dw-dialog-text: var(--dw-ink);
  --dw-dialog-muted: var(--dw-ink-2);
  --dw-dialog-border: var(--dw-border);
  --dw-dialog-active-bg: var(--dw-primary-soft);
  --dw-dialog-active-text: var(--dw-primary);
  color-scheme: dark;
}

:root[data-theme="dark"] .boxy-wrapper .dw-boxy-dialog a,
:root[data-theme="dark"] .boxy-wrapper .dw-boxy-dialog .value {
  color: var(--dw-primary) !important;
}

:root[data-theme="dark"] .boxy-wrapper .dw-boxy-dialog input[type="checkbox"] {
  accent-color: var(--dw-primary);
}

/* Configuración de modo Aplicación / Agente de Voz IA. */
.boxy-wrapper .dw-user-config-dialog {
  --dw-dialog-bg: #FFFFFF;
  --dw-dialog-panel: #F7F9F7;
  --dw-dialog-text: #263745;
  --dw-dialog-border: #D6E0D8;
  background: var(--dw-dialog-bg) !important;
  color: var(--dw-dialog-text) !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  box-sizing: border-box;
  color-scheme: light;
}

.boxy-wrapper .dw-user-config-loading {
  min-width: 280px;
  padding: 18px 20px !important;
  border-radius: 0 0 8px 8px;
}

.boxy-wrapper .dw-user-config-dialog .title2 {
  margin: 0 !important;
  padding: 10px 12px !important;
  background: var(--dw-dialog-panel) !important;
  border-color: var(--dw-dialog-border) !important;
  color: var(--dw-dialog-text) !important;
  font-weight: 700 !important;
}

.boxy-wrapper .dw-user-config-dialog table,
.boxy-wrapper .dw-user-config-dialog td {
  color: var(--dw-dialog-text) !important;
}

.boxy-wrapper .dw-user-config-dialog select {
  min-height: 30px;
  padding: 4px 8px !important;
  background: var(--dw-dialog-bg) !important;
  border: 1px solid var(--dw-dialog-border) !important;
  border-radius: 4px !important;
  color: var(--dw-dialog-text) !important;
  font-family: var(--dw-font) !important;
}

:root[data-theme="dark"] .boxy-wrapper .dw-user-config-dialog {
  --dw-dialog-bg: #0E1513;
  --dw-dialog-panel: #151F1B;
  --dw-dialog-text: var(--dw-ink);
  --dw-dialog-border: var(--dw-border);
  background: var(--dw-surface) !important;
  color-scheme: dark;
}

/* ── Usuarios: rango de posiciones de Parking ────────────────────── */
#panel #content #parking_row > td:first-child {
  white-space: nowrap;
  vertical-align: middle;
}

#panel #content .dw-parking-range {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-width: 270px;
  padding: 2px 0 2px 4px;
  box-sizing: border-box;
}

#panel #content .dw-parking-range .dw-parking-position {
  flex: 0 0 64px;
  width: 64px !important;
  min-width: 64px !important;
  text-align: center;
}

#panel #content .dw-parking-range .dw-parking-arrow {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-weight: 700;
}

#panel #content .dw-parking-range .dw-parking-status {
  flex: 0 0 128px;
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  padding: 4px 7px !important;
  background: var(--green-soft) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: 5px !important;
  color: var(--green-ink) !important;
  font-size: .72rem !important;
  font-weight: 600;
  opacity: 1 !important;
  box-sizing: border-box;
}

:root[data-theme="dark"] #panel #content .dw-parking-range .dw-parking-arrow {
  color: var(--dw-ink-2);
}

:root[data-theme="dark"] #panel #content .dw-parking-range .dw-parking-status {
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-border) !important;
  color: var(--dw-primary) !important;
}

/* ── Grupos: modal Nuevo/Modificar Grupo (Myboxy) ────────────────── */
#mb_modifygroup {
  --dw-group-dialog-bg: var(--dw-surface);
  --dw-group-dialog-panel: var(--dw-bg);
  --dw-group-dialog-text: var(--dw-ink);
  --dw-group-dialog-muted: var(--dw-ink-2);
  --dw-group-dialog-border: var(--dw-border);
  --dw-group-dialog-hover: var(--dw-primary-soft);
  background: var(--dw-group-dialog-bg) !important;
  color: var(--dw-group-dialog-text) !important;
  font-family: var(--dw-font) !important;
  font-size: .82rem !important;
  color-scheme: light;
}

#mb_modifygroup #my_boxy_title {
  background: var(--dw-group-dialog-panel) !important;
  border-color: var(--dw-group-dialog-border) !important;
  color: var(--dw-group-dialog-text) !important;
  text-shadow: none !important;
}

#mb_modifygroup #mb_table,
#mb_modifygroup #mb_table > tbody > tr > td,
#mb_modifygroup #my_boxy_text_cont,
#mb_modifygroup #my_boxy_text,
#mb_modifygroup #my_boxy_options {
  background: var(--dw-group-dialog-bg) !important;
  border-color: var(--dw-group-dialog-border) !important;
  color: var(--dw-group-dialog-text) !important;
}

#mb_modifygroup .gray {
  color: var(--dw-group-dialog-muted) !important;
}

#mb_modifygroup input[type="text"] {
  background: var(--dw-group-dialog-bg) !important;
  border: 1px solid var(--dw-group-dialog-border) !important;
  border-radius: 5px !important;
  color: var(--dw-group-dialog-text) !important;
  font-family: var(--dw-font) !important;
  box-sizing: border-box;
}

#mb_modifygroup .dw-group-icon-picker,
#mb_modifygroup .dw-group-icon-list {
  background: var(--dw-group-dialog-panel) !important;
  border-color: var(--dw-group-dialog-border) !important;
}

#mb_modifygroup .dw-group-icon-picker,
#mb_modifygroup .dw-group-icon-option {
  border-radius: 5px;
  transition: background-color .15s ease;
}

#mb_modifygroup .dw-group-icon-option:hover,
#mb_modifygroup .dw-group-icon-option.is-hover {
  background: var(--dw-group-dialog-hover) !important;
}

:root[data-theme="dark"] #mb_modifygroup {
  --dw-group-dialog-bg: var(--dw-surface);
  --dw-group-dialog-panel: #18231F;
  --dw-group-dialog-text: var(--dw-ink);
  --dw-group-dialog-muted: var(--dw-ink-2);
  --dw-group-dialog-border: var(--dw-border);
  --dw-group-dialog-hover: var(--dw-primary-soft);
  color-scheme: dark;
}

/* ── Componentes dashboard (.dw-*) ───────────────────────────────── */
[data-theme="dark"] .dw-card-hd {
  color: var(--dw-ink) !important;
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-card-sep { border-top-color: var(--dw-border) !important; }
[data-theme="dark"] .dw-stat-kv {
  color: var(--dw-ink) !important;
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-stat-kv .dw-mono { color: var(--dw-ink-2) !important; }
[data-theme="dark"] .dw-svc-row {
  color: var(--dw-ink) !important;
  border-bottom-color: var(--dw-border) !important;
}
[data-theme="dark"] .dw-svc-link:hover { background: var(--dw-primary-soft) !important; }
[data-theme="dark"] .dw-svc-row > span#status,
[data-theme="dark"] .dw-svc-row > span#desc { color: var(--dw-ink-2) !important; }
[data-theme="dark"] .dw-part-name { color: var(--dw-ink) !important; }
[data-theme="dark"] .dw-part-bar  { background: var(--dw-border) !important; }
[data-theme="dark"] .dw-chart-wrap { background: var(--dw-surface) !important; }
[data-theme="dark"] .dw-cleg      { color: var(--dw-ink-2) !important; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
[data-theme="dark"] #panel ::-webkit-scrollbar-thumb {
  background: var(--dw-border);
}
[data-theme="dark"] #panel ::-webkit-scrollbar-thumb:hover {
  background: var(--dw-green);
}

/* ── Texto general: fallback para elementos sin clase específica ──── */
[data-theme="dark"] #panel #content td,
[data-theme="dark"] #panel #content th { color: var(--dw-ink) !important; }
[data-theme="dark"] #panel #content label,
[data-theme="dark"] #panel #content b,
[data-theme="dark"] #panel #content strong,
[data-theme="dark"] #panel #content p { color: var(--dw-ink) !important; }

/* Links en contenido (excluye paginación que ya tiene color propio) */
[data-theme="dark"] #panel #content a {
  color: var(--dw-primary) !important;
}
[data-theme="dark"] #panel #content a:hover { color: var(--dw-primary-hover) !important; }

/* Botones de acción (mantenemos verde/rojo) */
[data-theme="dark"] #panel #content input[type=button],
[data-theme="dark"] #panel #content input[type=submit],
[data-theme="dark"] #panel #content button {
  background: var(--dw-green) !important;
  color: #fff !important;
  border-color: var(--dw-green-dark) !important;
}

/* Legacy: trColor1/trColor2 (tablas sin class .row1/.row2) */
[data-theme="dark"] #panel #content .trColor1 td,
[data-theme="dark"] #panel #content .trColor2 td { color: var(--dw-ink) !important; }
[data-theme="dark"] #panel #content .trColor1 { background: var(--dw-surface) !important; }
[data-theme="dark"] #panel #content .trColor2 { background: var(--dw-surface) !important; }

/* Texto en topbar y sidebar que puede quedar oscuro por herencia */
[data-theme="dark"] .dw-content-topbar,
[data-theme="dark"] .dw-content-topbar * { color: inherit; }

/* ── Botón de toggle: icono sol/luna en sidebar ───────────────────── */
#dw-theme-toggle .dw-theme-icon { transition: transform .3s; }
[data-theme="dark"] #dw-theme-toggle .dw-theme-icon { transform: rotate(20deg); }
/* ======================================================================
   UI ADJUSTMENTS - task indicator and pagination
   ====================================================================== */

/* Show the task indicator as a clean green spinner without a message card. */
.dw-sidenav #adminTasks {
  position: absolute !important;
  top: 18px !important;
  right: 14px !important;
  left: auto !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.dw-sidenav #adminTasks img,
.dw-sidenav #adminTasks span {
  display: none !important;
}

.dw-sidenav #adminTasks::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px;
  box-sizing: border-box;
  border: 3px solid rgba(119, 205, 55, .28);
  border-top-color: #77cd37;
  border-right-color: #77cd37;
  border-radius: 50%;
  animation: dw-spin .7s linear infinite;
}

/* Restyle the legacy pager with circular controls and platform colors. */
#panel #content #paging_html table td {
  padding: 0 3px !important;
}

#panel #content #list2-paging .item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #edf5e7 !important;
  background-image: none !important;
  border: 1px solid #c7d9b8 !important;
  border-radius: 50% !important;
  color: var(--green-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s !important;  
}

#panel #content #list2-paging .item img {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain;
}

#panel #content #list2-paging .item:hover {
  background: var(--green-soft) !important;
  border-color: var(--dw-green) !important;
  color: var(--dw-green-dark) !important;
  transform: none !important;
}

#panel #content #list2-paging .item.selected {
  background: var(--dw-green) !important;
  border-color: var(--dw-green-light) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

#panel #content #list2-paging .item.disabled {
  background: #f3f5f1 !important;
  border-color: var(--dw-line) !important;
  color: var(--ink-3) !important;
  cursor: default !important;
  opacity: .45 !important;
  pointer-events: none !important;
  transform: none !important;
}

[data-theme="dark"] #panel #content #list2-paging .item {
  background: var(--dw-surface) !important;
  border-color: #30465d !important;
  color: #a8c8e8 !important;
}

[data-theme="dark"] #panel #content #list2-paging .item img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(52%) saturate(636%)
          hue-rotate(42deg) brightness(92%) contrast(90%) !important;
}

[data-theme="dark"] #panel #content #list2-paging .item:hover {
  background: rgba(74, 148, 0, .22) !important;
  border-color: var(--dw-primary) !important;
  color: #8bd450 !important;
}

[data-theme="dark"] #panel #content #list2-paging .item.selected {
  background: var(--dw-green) !important;
  border-color: #77cd37 !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

[data-theme="dark"] #panel #content #list2-paging .item.disabled {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  color: var(--dw-ink-3) !important;
  opacity: .42 !important;
}
/* ==================================================================
   USER PROFILES - compact call-service duration fields
   Keeps all four service rows inside the legacy 80px panel.
   ================================================================== */
#panel #content #call_services input[type="text"] {
  height: 20px !important;
  min-height: 20px !important;
  padding: 1px 5px !important;
  margin: 0 1px 0 3px !important;
  line-height: 16px !important;
  box-sizing: border-box !important;
}

/* ==================================================================
   GROUPS - readable text inside General, Members and Relations tabs
   ================================================================== */
[data-theme="dark"] #panel #content .tabscontent_background_general,
[data-theme="dark"] #panel #content .tabscontent_background_general #tabcontent_1,
[data-theme="dark"] #panel #content .tabscontent_background_general #group_info,
[data-theme="dark"] #panel #content .tabscontent_background_general #roles_list,
[data-theme="dark"] #panel #content .tabscontent_background_general #members_list,
[data-theme="dark"] #panel #content .tabscontent_background_general #relations_list,
[data-theme="dark"] #panel #content .tabscontent_background_general #roles_list .row_big,
[data-theme="dark"] #panel #content .tabscontent_background_general #members_list .row_big {
  color: var(--dw-ink) !important;
}

[data-theme="dark"] #panel #content .tabscontent_background_general .title2,
[data-theme="dark"] #panel #content .tab_footer_general #tab_footer,
[data-theme="dark"] #panel #content .tab_footer_general #tab_footer .title2 {
  color: #8bd450 !important;
}

/* HEADER BRAND AND CLOCK START */
.dw-sidenav .navbar-brand.dw-brand-composed {
  min-height: 60px !important;
  padding: 10px !important;
  gap: 8px !important;
  box-sizing: border-box;
}

.dw-sidenav .dw-brand-logo-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  width: 100px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.dw-sidenav .dw-brand-logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: .96;
  filter: brightness(0) invert(1);
}

.dw-sidenav .dw-brand-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.dw-sidenav .dw-brand-copy .dw-brand-name {
  font-size: 14px !important;
  line-height: 1.05;
  white-space: nowrap;
}

.dw-sidenav .dw-brand-copy .dw-brand-model {
  overflow: hidden;
  font-size: 8px !important;
  line-height: 1.15;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#panel .dw-content-topbar .dw-page-clock .dw-header-clock {
  display: inline-block;
  min-width: 72px;
  color: var(--ink-2);
  font-family: var(--dw-font-mono, monospace);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  line-height: 1;
  text-align: right;
}

[data-theme="dark"] #panel .dw-content-topbar .dw-page-clock .dw-header-clock {
  color: var(--dw-ink-2) !important;
}

@media (max-width: 991px) {
  .dw-sidenav .navbar-brand.dw-brand-composed {
    width: 220px !important;
    max-width: 100%;
  }
}
/* HEADER BRAND AND CLOCK END */

/* USER EDITOR FLEXIBLE TABS START
   The legacy 325px tab panel clipped the lower Advanced fields and placed
   the action footer over them. Keep this override scoped to userUM.php. */
#panel #content.user-editor-page {
  min-height: 560px !important;
}

#panel #content.user-editor-page .user-editor-form {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 560px;
}

#panel #content.user-editor-page .tabscontent_background {
  top: 30px;
  bottom: 42px;
  height: auto !important;
  min-height: 440px;
  overflow: auto;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0 !important;
}

#panel #content.user-editor-page .tab_footer {
  top: auto !important;
  bottom: 16px;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  box-sizing: border-box;
}
/* USER EDITOR FLEXIBLE TABS END */

/* DW_SETUP_BASIC_DESIGN_SYSTEM_V1_START */

/*
 * Adaptación de Configuración > General > Básica
 * al Design System de Denwa.
 *
 * Algunos selectores utilizan !important porque deben superar
 * estilos legacy e inline existentes en setup.php.
 */

form.dw-settings-page {
    width: 100%;
    color: var(--dw-ink);
    background: var(--dw-bg);
}

/* Navegación de pestañas */

form.dw-settings-page > .tabs_menu {
    width: 100%;
    padding: 0 var(--dw-sp-4, 16px);

    background: var(--dw-surface);
    border-bottom: 1px solid var(--dw-border);

    box-sizing: border-box;
}

form.dw-settings-page > .tabs_menu table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

form.dw-settings-page > .tabs_menu td {
    height: 44px !important;
    padding: 0 var(--dw-sp-4, 16px) !important;

    color: var(--dw-ink-2) !important;
    background: transparent !important;

    border: 0 !important;
    border-bottom: 2px solid transparent !important;

    font-weight: 600;
    white-space: nowrap;
}

form.dw-settings-page > .tabs_menu a {
    color: inherit !important;
    text-decoration: none !important;
}

form.dw-settings-page > .tabs_menu td:hover {
    color: var(--dw-primary) !important;
    background: var(--dw-primary-soft) !important;
}

/* Área principal de la pestaña Básica */

form.dw-settings-page #tabcontent_1 {
    padding: var(--dw-sp-6, 24px) !important;

    color: var(--dw-ink);
    background: var(--dw-bg) !important;

    box-sizing: border-box;
}

form.dw-settings-page #tabcontent_1 > table {
    width: min(1120px, 100%) !important;
    margin: 0 auto !important;

    background: var(--dw-surface) !important;

    border: 1px solid var(--dw-border) !important;
    border-radius: var(--dw-radius, 16px);

    border-collapse: separate !important;
    border-spacing: 0 !important;

    box-shadow: var(--dw-shadow);
}

form.dw-settings-page #tabcontent_1 table table {
    background: transparent !important;
}

form.dw-settings-page #tabcontent_1 td {
    color: var(--dw-ink);
}

form.dw-settings-page #tabcontent_1 td[align="right"] {
    padding-right: var(--dw-sp-3, 12px) !important;

    color: var(--dw-ink-2) !important;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

/* Encabezados internos */

form.dw-settings-page #tabcontent_1 td.borderbot1 {
    padding:
        var(--dw-sp-3, 12px)
        var(--dw-sp-4, 16px)
        !important;

    color: var(--dw-ink) !important;
    background: var(--dw-primary-soft) !important;

    border-bottom: 1px solid var(--dw-border) !important;

    font-size: 13px;
    font-weight: 700;
}

/* Controles */

form.dw-settings-page #tabcontent_1 input[type="text"],
form.dw-settings-page #tabcontent_1 input[type="password"],
form.dw-settings-page #tabcontent_1 input[type="number"],
form.dw-settings-page #tabcontent_1 select,
form.dw-settings-page #tabcontent_1 textarea {
    width: 100% !important;
    max-width: 280px;
    min-height: 40px;

    padding:
        var(--dw-sp-2, 8px)
        var(--dw-sp-3, 12px)
        !important;

    color: var(--dw-ink) !important;
    background: var(--dw-surface) !important;

    border: 1px solid var(--dw-border) !important;
    border-radius: var(--dw-radius-sm, 8px) !important;

    box-sizing: border-box;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}

form.dw-settings-page #tabcontent_1 input[name="CountryCode"],
form.dw-settings-page #tabcontent_1 input[name="AreaCode"] {
    max-width: 120px;
}

form.dw-settings-page #tabcontent_1 select[name="TimeZone"] {
    max-width: 360px;
}

form.dw-settings-page #tabcontent_1 input:focus,
form.dw-settings-page #tabcontent_1 select:focus,
form.dw-settings-page #tabcontent_1 textarea:focus {
    outline: none !important;

    border-color: var(--dw-primary) !important;

    box-shadow:
        0 0 0 3px
        var(--dw-primary-soft)
        !important;
}

form.dw-settings-page #tabcontent_1 input:disabled,
form.dw-settings-page #tabcontent_1 select:disabled {
    color: var(--dw-ink-2) !important;
    background: var(--dw-bg) !important;

    cursor: not-allowed;
    opacity: .72;
}

/* Barra de acciones */

form.dw-settings-page > .tab_footer {
    background: var(--dw-surface) !important;

    border: 1px solid var(--dw-border) !important;
    border-top-color: var(--dw-border) !important;

    box-shadow: var(--dw-shadow);
}

form.dw-settings-page > .tab_footer .boxybutton {
    min-width: 108px;
    min-height: 38px;

    padding:
        0
        var(--dw-sp-4, 16px)
        !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dw-sp-2, 8px);

    color: var(--dw-ink) !important;
    background: var(--dw-surface) !important;

    border: 1px solid var(--dw-border) !important;
    border-radius: var(--dw-radius-sm, 8px) !important;

    box-sizing: border-box;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
    box-shadow: none !important;
}

form.dw-settings-page
> .tab_footer
td:last-child
.boxybutton {
    color: var(--dw-bg) !important;
    background: var(--dw-primary) !important;

    border-color: var(--dw-primary) !important;
}

form.dw-settings-page > .tab_footer .boxybutton:hover {
    border-color: var(--dw-primary) !important;
}

form.dw-settings-page
> .tab_footer
td:last-child
.boxybutton:hover {
    background: var(--dw-primary-hover) !important;
}

/* Responsive */

@media (max-width: 1100px) {
    form.dw-settings-page #tabcontent_1 {
        padding: var(--dw-sp-4, 16px) !important;
    }

    form.dw-settings-page #tabcontent_1 > table {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    form.dw-settings-page > .tabs_menu {
        overflow-x: auto;
    }

    form.dw-settings-page > .tabs_menu table {
        min-width: 760px;
    }

    form.dw-settings-page #tabcontent_1 td[align="right"] {
        padding-right: var(--dw-sp-2, 8px) !important;
    }

    form.dw-settings-page
    #tabcontent_1
    input[type="text"],
    form.dw-settings-page
    #tabcontent_1
    select {
        max-width: 100%;
    }
}

/* DW_SETUP_BASIC_DESIGN_SYSTEM_V1_END */

/* DW_SETUP_BASIC_MODERN_V4_START */

/*
 * Configuración > General > Básica
 * Layout moderno construido sobre los controles reales.
 */

/* ----------------------------------------------------------
 * Tabs
 * ---------------------------------------------------------- */

form.dw-settings-page > .tabs_menu.dw-settings-tabs {
    width: 100%;
    min-height: 58px;

    padding:
        10px
        16px
        0
        !important;

    background: var(--dw-bg) !important;

    border: 0 !important;
    border-bottom:
        1px solid
        var(--dw-border)
        !important;

    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

form.dw-settings-page
> .tabs_menu.dw-settings-tabs
table,
form.dw-settings-page
> .tabs_menu.dw-settings-tabs
tbody {
    width: 100% !important;
    margin: 0 !important;

    display: block;

    border: 0 !important;
    border-collapse: separate !important;
}

form.dw-settings-page
> .tabs_menu.dw-settings-tabs
.dw-settings-tabs-row {
    width: 100%;

    display: flex;
    align-items: flex-end;
    gap: 8px;
}

form.dw-settings-page
> .tabs_menu.dw-settings-tabs
.dw-settings-tab {
    min-width: 130px;
    height: 42px !important;

    padding:
        0
        16px
        !important;

    flex: 1 1 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--dw-ink-2) !important;
    background: var(--dw-surface) !important;
    background-image: none !important;

    border:
        1px solid
        var(--dw-border)
        !important;

    border-bottom:
        2px solid
        var(--dw-border)
        !important;

    border-radius:
        10px
        10px
        0
        0
        !important;

    box-shadow: none !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color 120ms ease,
        background 120ms ease,
        border-color 120ms ease;
}

form.dw-settings-page
> .tabs_menu.dw-settings-tabs
.dw-settings-tab:hover {
    color: var(--dw-ink) !important;
    background: var(--dw-primary-soft) !important;

    border-color: var(--dw-primary) !important;
}

form.dw-settings-page
> .tabs_menu.dw-settings-tabs
.dw-settings-tab.is-active {
    color: var(--dw-primary) !important;
    background: var(--dw-surface) !important;

    border-color: var(--dw-border) !important;
    border-bottom-color:
        var(--dw-primary)
        !important;

    font-weight: 700;
}

/* ----------------------------------------------------------
 * Área desplazable
 * ---------------------------------------------------------- */

form.dw-settings-page #tabcontent_1 {
    height: 100% !important;
    min-height: 0 !important;

    padding:
        22px
        24px
        132px
        !important;

    color: var(--dw-ink);
    background: var(--dw-bg) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scroll-padding-bottom: 132px;
    box-sizing: border-box;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-legacy-hidden {
    display: none !important;
}

/* ----------------------------------------------------------
 * Shell y grilla
 * ---------------------------------------------------------- */

form.dw-settings-page
#tabcontent_1
.dw-basic-modern-shell {
    width: min(1180px, 100%);
    margin: 0 auto;

    box-sizing: border-box;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-grid {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 24px;
    align-items: stretch;
}

/* ----------------------------------------------------------
 * Cards
 * ---------------------------------------------------------- */

form.dw-settings-page
#tabcontent_1
.dw-basic-section {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: var(--dw-surface);

    border:
        1px solid
        var(--dw-border);

    border-radius:
        var(--dw-radius, 14px);

    box-shadow: var(--dw-shadow);

    overflow: hidden;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-section-header {
    padding:
        20px
        22px
        16px;

    background: var(--dw-surface);

    border-bottom:
        1px solid
        var(--dw-border);
}

form.dw-settings-page
#tabcontent_1
.dw-basic-section-title {
    margin: 0;

    color: var(--dw-ink);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-section-description {
    margin: 5px 0 0;

    color: var(--dw-ink-2);

    font-size: 12px;
    line-height: 1.45;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-fields {
    padding: 20px 22px 24px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    flex: 1 1 auto;

    box-sizing: border-box;
}

/* ----------------------------------------------------------
 * Campos
 * ---------------------------------------------------------- */

form.dw-settings-page
#tabcontent_1
.dw-basic-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-label {
    display: block;

    color: var(--dw-ink-2);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-field
.dw-form-control {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding:
        9px
        12px
        !important;

    color: var(--dw-ink) !important;
    background: var(--dw-surface) !important;

    border:
        1px solid
        var(--dw-border)
        !important;

    border-radius:
        var(--dw-radius-sm, 8px)
        !important;

    box-shadow: none !important;

    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-field
select.dw-form-control {
    padding-right: 36px !important;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-field
.dw-form-control:focus {
    outline: none !important;

    border-color:
        var(--dw-primary)
        !important;

    box-shadow:
        0 0 0 3px
        var(--dw-primary-soft)
        !important;
}

/* ----------------------------------------------------------
 * Barra inferior
 * ---------------------------------------------------------- */

form.dw-settings-page
> .tab_footer.dw-settings-actions {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    padding:
        0
        24px
        !important;

    flex: 0 0 72px;

    background: var(--dw-surface) !important;

    border:
        1px solid
        var(--dw-border)
        !important;

    border-radius:
        0
        0
        12px
        12px
        !important;

    box-shadow: var(--dw-shadow);

    overflow: hidden !important;
    box-sizing: border-box;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
table,
form.dw-settings-page
> .tab_footer.dw-settings-actions
tbody {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
tr {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
td {
    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    display: block;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
tr
> td:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button {
    min-width: 122px;
    min-height: 42px;

    padding:
        0
        18px
        !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius:
        var(--dw-radius-sm, 8px)
        !important;

    background-image: none !important;
    box-shadow: none !important;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    box-sizing: border-box;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-secondary {
    color: var(--dw-ink) !important;
    background: var(--dw-surface) !important;

    border:
        1px solid
        var(--dw-border)
        !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-secondary:hover {
    color: var(--dw-primary) !important;
    background: var(--dw-primary-soft) !important;

    border-color:
        var(--dw-primary)
        !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-primary {
    color: var(--dw-bg) !important;
    background: var(--dw-primary) !important;

    border:
        1px solid
        var(--dw-primary)
        !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-primary:hover {
    background:
        var(--dw-primary-hover)
        !important;

    border-color:
        var(--dw-primary-hover)
        !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
#commit_loading.hidden {
    display: none !important;
}


/* ----------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------- */

@media (max-width: 1180px) {
    form.dw-settings-page
    #tabcontent_1
    .dw-basic-grid {
        gap: 18px;
    }
}

@media (max-width: 1000px) {
    form.dw-settings-page
    #tabcontent_1
    .dw-basic-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 760px) {
    form.dw-settings-page #tabcontent_1 {
        padding:
            14px
            14px
            128px
            !important;
    }

    form.dw-settings-page
    > .tabs_menu.dw-settings-tabs
    .dw-settings-tabs-row {
        width: max-content;
    }

    form.dw-settings-page
    > .tabs_menu.dw-settings-tabs
    .dw-settings-tab {
        min-width: 124px;
        flex: 0 0 auto;
    }

    form.dw-settings-page
    > .tab_footer.dw-settings-actions {
        padding:
            0
            14px
            !important;
    }

    form.dw-settings-page
    > .tab_footer.dw-settings-actions
    .dw-button {
        min-width: 106px;
        padding:
            0
            12px
            !important;
    }
}

/* DW_SETUP_BASIC_MODERN_V4_END */

/* DW_SETUP_BASIC_ACTIONS_V5_START */

/*
 * Botones nativos del Design System.
 * Ya no dependen de boxybutton ni de imágenes legacy.
 */

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-action-cell {
    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button {
    min-width: 126px;
    min-height: 42px;

    margin: 0;

    padding:
        0
        18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    appearance: none;

    border-radius:
        var(--dw-radius-sm, 8px);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        color 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        transform 80ms ease;
}

/* Cancelar: acción secundaria. */

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button-secondary {
    color: var(--dw-ink) !important;
    background: transparent !important;
    background-image: none !important;

    border:
        1px solid
        var(--dw-border)
        !important;

    box-shadow: none !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button-secondary:hover {
    color: var(--dw-primary) !important;
    background: var(--dw-primary-soft) !important;

    border-color:
        var(--dw-primary)
        !important;
}

/* Confirmar: acción principal. */

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button-primary {
    color: var(--dw-on-primary, #ffffff) !important;
    background: var(--dw-primary) !important;
    background-image: none !important;

    border:
        1px solid
        var(--dw-primary)
        !important;

    box-shadow: none !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button-primary:hover {
    background:
        var(--dw-primary-hover)
        !important;

    border-color:
        var(--dw-primary-hover)
        !important;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button:active {
    transform: translateY(1px);
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
button.dw-button:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        var(--dw-primary-soft)
        !important;
}

/* Iconos tipográficos; no dependen de imágenes antiguas. */

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-icon {
    width: 16px;
    height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 16px;

    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-icon-cancel {
    color: var(--dw-danger, #ef4444);
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
.dw-button-icon-submit {
    color: currentColor;
}

/* Loading sin alterar el layout de los botones. */

form.dw-settings-page
> .tab_footer.dw-settings-actions
#commit_loading {
    width: 20px;
    height: 20px;

    margin-left: 8px;
}

form.dw-settings-page
> .tab_footer.dw-settings-actions
#commit_loading.hidden {
    display: none !important;
}

/* Contraste correcto para títulos y descripciones de cards. */

form.dw-settings-page
#tabcontent_1
.dw-basic-section-title {
    color: var(--dw-ink) !important;
}

form.dw-settings-page
#tabcontent_1
.dw-basic-section-description {
    color: var(--dw-ink-2) !important;
}






@media (max-width: 760px) {
    form.dw-settings-page
    > .tab_footer.dw-settings-actions
    button.dw-button {
        min-width: 108px;

        padding:
            0
            12px;
    }
}

/* DW_SETUP_BASIC_ACTIONS_V5_END */

/* DW_SETUP_BASIC_VISUAL_FIX_V1_START */

/* =========================================
   FIX VISUAL SETUP BÁSICA - DARK MODE
   ========================================= */

/* Textos generales dentro de la pestaña */
body.dw-setup-basic-modern-page
form.dw-settings-page,
body.dw-setup-basic-modern-page
form.dw-settings-page td,
body.dw-setup-basic-modern-page
form.dw-settings-page span,
body.dw-setup-basic-modern-page
form.dw-settings-page div {
    color: #dce9f8;
}

/* Tabs superiores */
body.dw-setup-basic-modern-page
#tab_title td,
body.dw-setup-basic-modern-page
#tab_title a,
body.dw-setup-basic-modern-page
#tab_title span {
    color: #b9cde6 !important;
}

body.dw-setup-basic-modern-page
#tab_title .tab_title_active,
body.dw-setup-basic-modern-page
#tab_title .tab_title_active a,
body.dw-setup-basic-modern-page
#tab_title .tab_title_active span {
    color: #7CFF00 !important;
}

/* Cards */
body.dw-setup-basic-modern-page
.dw-basic-section,
body.dw-setup-basic-modern-page
.dw-setup-card {
    background: #0d2238 !important;
    border: 1px solid #1f3b58 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

/* Títulos de cards */
body.dw-setup-basic-modern-page
.dw-basic-section-title,
body.dw-setup-basic-modern-page
.dw-setup-card-title,
body.dw-setup-basic-modern-page
#tabcontent_1 h2,
body.dw-setup-basic-modern-page
#tabcontent_1 h3 {
    color: #f3f8ff !important;
    font-weight: 700 !important;
}

/* Subtítulos / descripciones */
body.dw-setup-basic-modern-page
.dw-basic-section-description,
body.dw-setup-basic-modern-page
.dw-setup-card-description,
body.dw-setup-basic-modern-page
#tabcontent_1 p {
    color: #9db4cf !important;
}

/* Labels */
body.dw-setup-basic-modern-page
#tabcontent_1 label,
body.dw-setup-basic-modern-page
#tabcontent_1 .dw-field-label,
body.dw-setup-basic-modern-page
#tabcontent_1 td[align="right"],
body.dw-setup-basic-modern-page
#tabcontent_1 .input_label {
    color: #dce9f8 !important;
    font-weight: 600 !important;
}

/* Inputs / selects / textareas */
body.dw-setup-basic-modern-page
#tabcontent_1 input[type="text"],
body.dw-setup-basic-modern-page
#tabcontent_1 input[type="password"],
body.dw-setup-basic-modern-page
#tabcontent_1 select,
body.dw-setup-basic-modern-page
#tabcontent_1 textarea {
    background: #0b1d30 !important;
    color: #f3f8ff !important;
    border: 1px solid #24415e !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

body.dw-setup-basic-modern-page
#tabcontent_1 input[type="text"]::placeholder,
body.dw-setup-basic-modern-page
#tabcontent_1 input[type="password"]::placeholder,
body.dw-setup-basic-modern-page
#tabcontent_1 textarea::placeholder {
    color: #7f99b6 !important;
}

body.dw-setup-basic-modern-page
#tabcontent_1 input[type="text"]:focus,
body.dw-setup-basic-modern-page
#tabcontent_1 input[type="password"]:focus,
body.dw-setup-basic-modern-page
#tabcontent_1 select:focus,
body.dw-setup-basic-modern-page
#tabcontent_1 textarea:focus {
    outline: none !important;
    border-color: #7CFF00 !important;
    box-shadow: 0 0 0 3px rgba(124,255,0,.14) !important;
}

/* Barra inferior */
body.dw-setup-basic-modern-page
.tab_footer.dw-settings-actions {
    background: rgba(10, 28, 47, .92) !important;
    border-top: 1px solid #1f3b58 !important;
    backdrop-filter: blur(8px);
}




/* DW_SETUP_BASIC_VISUAL_FIX_V1_END */

/* DW_SETUP_DIRTY_STATE_V1_START */

/*
 * Las acciones solo aparecen cuando existen
 * modificaciones pendientes.
 */

form.dw-settings-page
> .tab_footer.dw-settings-actions {
    transition:
        height 160ms ease,
        min-height 160ms ease,
        opacity 120ms ease,
        border-color 120ms ease;
}

/* Ocultar siempre las acciones cuando no hay cambios. */

form.dw-settings-page:not(.dw-settings-dirty)
> .tab_footer.dw-settings-actions
.dw-action-cell {
    display: none !important;
}

/*
 * Sin cambios y sin mensaje de estado:
 * colapsar por completo la barra.
 */

form.dw-settings-page:not(.dw-settings-dirty):not(.dw-settings-has-status)
> .tab_footer.dw-settings-actions {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    flex-basis: 0 !important;

    padding: 0 !important;

    opacity: 0;

    border: 0 !important;
    box-shadow: none !important;

    pointer-events: none;
    overflow: hidden !important;
}

/* Recuperar espacio inferior cuando la barra está oculta. */

form.dw-settings-page:not(.dw-settings-dirty):not(.dw-settings-has-status)
#tabcontent_1 {
    padding-bottom: 24px !important;
    scroll-padding-bottom: 24px !important;
}

/*
 * Si existe un mensaje del backend, conservar una barra
 * pequeña, pero sin Cancelar ni Confirmar.
 */

form.dw-settings-page:not(.dw-settings-dirty).dw-settings-has-status
> .tab_footer.dw-settings-actions {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    flex-basis: 48px !important;

    padding: 0 20px !important;

    opacity: 1;

    pointer-events: auto;
}

/* Con cambios: mostrar las acciones normalmente. */

form.dw-settings-page.dw-settings-dirty
> .tab_footer.dw-settings-actions {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    flex-basis: 72px !important;

    opacity: 1;

    pointer-events: auto;
}

form.dw-settings-page.dw-settings-dirty
> .tab_footer.dw-settings-actions
.dw-action-cell {
    display: flex !important;
}

/* DW_SETUP_DIRTY_STATE_V1_END */



/* DW_SIDEBAR_BOTTOM_FINAL_START */

/* ==========================================================
   ZONA INFERIOR SIDEBAR
   ========================================================== */

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right {

    padding: 16px 14px 10px !important;

    background: #07110F !important;

    border-top:
        1px solid var(--dw-border)
        !important;
}


/* ==========================================================
   UTILIDADES
   ========================================================== */

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right a.dw-sb-util-link {

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 42px !important;

    margin: 0 0 2px !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    color: var(--dw-ink-2) !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    box-shadow: none !important;
}


/* iconos neutros */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right a.dw-sb-util-link i {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;

    margin-right: 9px !important;

    color: var(--dw-ink-2) !important;

    font-size: 15px !important;

    opacity: .9 !important;
}


/* hover */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right a.dw-sb-util-link:hover {

    background: rgba(0,230,138,.055) !important;

    color: var(--dw-ink) !important;
}

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right a.dw-sb-util-link:hover i {

    color: var(--dw-primary) !important;
}


/* logout */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-nav-right a.dw-sb-util-logout:hover {

    background: var(--dw-danger-soft) !important;

    color: var(--dw-danger) !important;
}


/* ==========================================================
   CARD USUARIO
   ========================================================== */

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-chip {

    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    min-height: 56px !important;

    margin: 12px 0 0 !important;

    padding: 8px 10px !important;

    box-sizing: border-box !important;

    background: #101815 !important;

    border:
        1px solid var(--dw-border)
        !important;

    border-radius: 12px !important;

    box-shadow: none !important;
}


/* avatar */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-chip .dw-user-avatar {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    height: 34px !important;

    margin-right: 10px !important;

    background:
        rgba(0,230,138,.14)
        !important;

    color: var(--dw-primary) !important;

    border:
        1px solid
        rgba(0,230,138,.35)
        !important;

    border-radius: 50% !important;
}


/* texto usuario */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-info {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    line-height: 1.15 !important;
}

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-info span {

    display: block !important;

    color: var(--dw-ink) !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}

html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-info small {

    display: block !important;

    margin-top: 3px !important;

    color: var(--dw-ink-3) !important;

    font-size: 10px !important;
    font-weight: 400 !important;

    white-space: nowrap !important;
}


/* flecha/menu de usuario, si existe */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-chip .dropdown-toggle::after,
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-chip .dw-user-chevron {

    margin-left: auto !important;

    color: var(--dw-ink-2) !important;

    opacity: .8 !important;
}


/* Evitar cualquier fondo verde heredado */
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-chip,
html[data-theme="dark"] body #panel nav.dw-sidenav
.dw-user-info {

    background-image: none !important;
}


/* DW_SIDEBAR_BOTTOM_FINAL_END */



/* DW_REPORTS_EXT_BUTTONS_V1_START */

/* ==========================================================
   REPORTES EXTENDIDO — BOTONES
   ========================================================== */


/* CONFIRMAR — primary */

html[data-theme="dark"]
body.dw-reports-ext-v1
#left-filter
.boxybutton,

html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 112px !important;
    height: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    box-sizing: border-box !important;

    background: var(--dw-primary) !important;
    background-image: none !important;

    color: #0A0F0F !important;

    border: 1px solid var(--dw-primary) !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    font-family: var(--dw-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease
        !important;
}


html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton:hover {

    background: var(--dw-primary-hover) !important;
    border-color: var(--dw-primary-hover) !important;

    transform: translateY(-1px) !important;
}


/* EXPORTAR — secondary */

html[data-theme="dark"]
body.dw-reports-ext-v1
#right-results
.boxybutton,

html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#right-results
.boxybutton {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 104px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    box-sizing: border-box !important;

    background: transparent !important;
    background-image: none !important;

    color: var(--dw-ink) !important;

    border: 1px solid var(--dw-border) !important;
    border-radius: 7px !important;

    box-shadow: none !important;

    font-family: var(--dw-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease
        !important;
}


html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#right-results
.boxybutton:hover {

    background: var(--dw-primary-soft) !important;

    color: var(--dw-primary) !important;

    border-color:
        rgba(0,230,138,.45)
        !important;
}


/* Sacar cualquier pseudo-elemento / sombra del botón legacy */

html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
.boxybutton::before,

html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
.boxybutton::after {

    box-shadow: none !important;
}


/* DW_REPORTS_EXT_BUTTONS_V1_END */


/* Confirmar: icono/tick negro */
html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton,
html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton *,
html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton::before,
html[data-theme="dark"]
body
#dw-reports-ext-layout-v1
#left-filter
.boxybutton::after {
    color: #0A0F0F !important;
    fill: #0A0F0F !important;
    stroke: #0A0F0F !important;
}

/* DENWA LIGHT SIDEBAR DESIGN SYSTEM V1 */

/* Sólo modo claro */
:root:not([data-theme="dark"]) .dw-sidenav {
    background: var(--dw-surface) !important;
    color: var(--dw-ink) !important;
    border-right: 1px solid var(--dw-border) !important;
}


/* Marca: conservar contraste del logo blanco */
:root:not([data-theme="dark"]) .dw-sidenav .dw-brand {
    background: var(--dw-primary) !important;
    border-bottom: 1px solid var(--dw-primary-hover) !important;
}


/* Área principal del menú */
:root:not([data-theme="dark"]) .dw-sidenav .dw-nav-section {
    background: var(--dw-surface) !important;
}


/* Items principales */
:root:not([data-theme="dark"])
.dw-sidenav .nav-item > .nav-link {
    background: transparent !important;
    color: var(--dw-ink-2) !important;
}


/* Iconos */
:root:not([data-theme="dark"])
.dw-sidenav .nav-item > .nav-link i {
    color: var(--dw-primary) !important;
}


/* Hover */
:root:not([data-theme="dark"])
.dw-sidenav .nav-item > .nav-link:hover {
    background: var(--dw-primary-soft) !important;
    color: var(--dw-primary) !important;
}


/* Sección activa */
:root:not([data-theme="dark"])
.dw-sidenav .nav-item > .nav-link.dw-active {
    background: var(--dw-primary-soft) !important;
    color: var(--dw-primary) !important;
    box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}


/* Submenú */
:root:not([data-theme="dark"])
.dw-sidenav .dropdown-menu {
    background: var(--dw-surface) !important;
    border: 0 !important;
}


/* Items secundarios */
:root:not([data-theme="dark"])
.dw-sidenav .dropdown-item {
    background: transparent !important;
    color: var(--dw-ink-2) !important;
}


/* Hover secundario */
:root:not([data-theme="dark"])
.dw-sidenav .dropdown-item:hover {
    background: var(--dw-primary-soft) !important;
    color: var(--dw-primary) !important;
}


/* Submenú activo */
:root:not([data-theme="dark"])
.dw-sidenav .dropdown-item.dw-active {
    background: var(--dw-primary-soft) !important;
    color: var(--dw-primary) !important;
    font-weight: 700 !important;
}


/* Sector inferior */
:root:not([data-theme="dark"])
.dw-sidenav .dw-nav-right {
    background: var(--dw-surface) !important;
    border-top: 1px solid var(--dw-border) !important;
}


/* Recargar / Modo oscuro / Cerrar sesión */
:root:not([data-theme="dark"])
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link {
    background: transparent !important;
    color: var(--dw-ink-2) !important;
}

:root:not([data-theme="dark"])
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link i {
    color: var(--dw-ink-2) !important;
}

:root:not([data-theme="dark"])
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover {
    background: var(--dw-primary-soft) !important;
    color: var(--dw-primary) !important;
}

:root:not([data-theme="dark"])
nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:hover i {
    color: var(--dw-primary) !important;
}


/* Separadores */
:root:not([data-theme="dark"])
.dw-sidenav .dw-sb-divider {
    border-color: var(--dw-border) !important;
}


/* Usuario inferior */
:root:not([data-theme="dark"])
.dw-sidenav .dw-user-chip {
    background: var(--dw-bg) !important;
    border: 1px solid var(--dw-border) !important;
    color: var(--dw-ink) !important;
}

:root:not([data-theme="dark"])
.dw-sidenav .dw-user-info span {
    color: var(--dw-ink) !important;
}

:root:not([data-theme="dark"])
.dw-sidenav .dw-user-info small {
    color: var(--dw-ink-2) !important;
}

/* DW_FULL_HEIGHT_LEGACY_SECTIONS_V1_START
   Perfiles, proveedores y sus paginadores ocupan todo el alto disponible. */

#panel #content.user-profiles-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) 28px !important;
  column-gap: 12px !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#panel #content.user-profiles-page #warning {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
}

#panel #content.user-profiles-page #warning:empty {
  display: none !important;
}

#panel #content.user-profiles-page #list-left,
#panel #content.user-profiles-page #list-right {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#panel #content.user-profiles-page #list-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
}

#panel #content.user-profiles-page #list-right {
  grid-column: 2 !important;
  grid-row: 2 !important;
  overflow-y: auto !important;
}

#panel #content.user-profiles-page #list-left > table {
  flex: 0 0 auto !important;
}

#panel #content.user-profiles-page #profiles_list {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#panel #content.user-profiles-page #list-paging-left,
#panel #content.user-profiles-page #list-paging-right {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  box-sizing: border-box !important;
}

#panel #content.user-profiles-page #list-paging-left {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

#panel #content.user-profiles-page #list-paging-right {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

#panel #content.trunks-list-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) 28px !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#panel #content.trunks-list-page #warning {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
}

#panel #content.trunks-list-page #warning:empty {
  display: none !important;
}

#panel #content.trunks-list-page #list {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

#panel #content.trunks-list-page #trunks_table {
  flex: 0 0 auto !important;
}

#panel #content.trunks-list-page #trunks_list {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#panel #content.trunks-list-page #list-paging {
  grid-column: 1 !important;
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  #panel #content.user-profiles-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(280px, 1fr) 28px minmax(280px, 1fr) 28px !important;
    row-gap: 0 !important;
    overflow-y: auto !important;
  }

  #panel #content.user-profiles-page #list-left { grid-column: 1 !important; grid-row: 2 !important; }
  #panel #content.user-profiles-page #list-paging-left { grid-column: 1 !important; grid-row: 3 !important; }
  #panel #content.user-profiles-page #list-right { grid-column: 1 !important; grid-row: 4 !important; }
  #panel #content.user-profiles-page #list-paging-right { grid-column: 1 !important; grid-row: 5 !important; }
}

/* DW_FULL_HEIGHT_LEGACY_SECTIONS_V1_END */

/* DW_IVR_MODES_DIALOG_THEME_V1_START */
#mb_availablemodes {
  --dw-mode-dialog-bg: var(--dw-surface);
  --dw-mode-dialog-panel: var(--dw-surface);
  --dw-mode-dialog-row: var(--dw-bg);
  --dw-mode-dialog-text: var(--dw-ink);
  --dw-mode-dialog-muted: var(--dw-ink-2);
  --dw-mode-dialog-border: var(--dw-border);
  --dw-mode-day-selected: var(--dw-primary);
  --dw-mode-day-unselected: var(--dw-ink-3);
  background: var(--dw-mode-dialog-bg) !important;
  color: var(--dw-mode-dialog-text) !important;
  color-scheme: light;
}

#mb_availablemodes #mb_table,
#mb_availablemodes #mb_table td,
#mb_availablemodes #my_boxy_text_cont,
#mb_availablemodes #my_boxy_text,
#mb_availablemodes .dw-ivr-modes-dialog {
  background: var(--dw-mode-dialog-bg) !important;
  color: var(--dw-mode-dialog-text) !important;
}

#mb_availablemodes #my_boxy_title {
  background: var(--dw-mode-dialog-panel) !important;
  border-bottom-color: var(--dw-mode-dialog-border) !important;
  color: var(--dw-mode-dialog-text) !important;
  text-shadow: none !important;
}

#mb_availablemodes #my_boxy_options {
  background: var(--dw-mode-dialog-panel) !important;
  border-top-color: var(--dw-mode-dialog-border) !important;
}

#mb_availablemodes .mode-row,
#mb_availablemodes .boxyrow_auto {
  min-height: 30px !important;
  padding: 4px 6px !important;
  background: var(--dw-mode-dialog-row) !important;
  border-bottom: 1px solid var(--dw-mode-dialog-border) !important;
  color: var(--dw-mode-dialog-text) !important;
  box-sizing: border-box !important;
}

#mb_availablemodes .mode-row > div,
#mb_availablemodes .tcenter,
#mb_availablemodes .tleft,
#mb_availablemodes .bold {
  color: inherit;
}

#mb_availablemodes .gray {
  color: var(--dw-mode-dialog-muted) !important;
}

#mb_availablemodes .chkbox {
  background-color: var(--dw-mode-dialog-bg) !important;
  border-color: var(--dw-mode-dialog-border) !important;
}

:root[data-theme="dark"] #mb_availablemodes {
  --dw-mode-dialog-bg: var(--dw-surface);
  --dw-mode-dialog-panel: var(--dw-surface);
  --dw-mode-dialog-row: var(--dw-bg);
  --dw-mode-dialog-text: var(--dw-ink);
  --dw-mode-dialog-muted: var(--dw-ink-2);
  --dw-mode-dialog-border: var(--dw-border);
  --dw-mode-day-selected: var(--dw-primary);
  --dw-mode-day-unselected: var(--dw-ink-3);
  color-scheme: dark;
}
/* DW_IVR_MODES_DIALOG_THEME_V1_END */

/* DW_IVR_MODES_FULL_HEIGHT_V1_START
   La lista de modos y el formulario ocupan el alto disponible hasta el footer. */
#panel #content.ivr-modes-page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) 28px !important;
  column-gap: 12px !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#panel #content.ivr-modes-page #warning {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
}

#panel #content.ivr-modes-page #warning:empty {
  display: none !important;
}

#panel #content.ivr-modes-page #list-left,
#panel #content.ivr-modes-page #list-right {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#panel #content.ivr-modes-page #list-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 0 !important;
}

#panel #content.ivr-modes-page #list-left > table {
  flex: 0 0 auto !important;
}

#panel #content.ivr-modes-page #modes_list {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#panel #content.ivr-modes-page #list-paging-left {
  grid-column: 1 !important;
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  line-height: 28px !important;
  box-sizing: border-box !important;
  border-radius: 0 0 12px 12px !important;
}

#panel #content.ivr-modes-page #list-right {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}

#panel #content.ivr-modes-page #list-right > table {
  flex: 0 0 auto !important;
}

#panel #content.ivr-modes-page #mode_form {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#panel #content.ivr-modes-page #mode_form > table {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
}

#panel #content.ivr-modes-page #mode_form > table > tbody > tr:first-child > td {
  vertical-align: top !important;
  padding-top: 32px !important;
}

#panel #content.ivr-modes-page #mode_form > table > tbody > tr:last-child {
  height: 70px !important;
}

@media (max-width: 900px) {
  #panel #content.ivr-modes-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(320px, 1fr) 28px minmax(420px, 1fr) !important;
    row-gap: 12px !important;
    overflow-y: auto !important;
  }

  #panel #content.ivr-modes-page #list-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #panel #content.ivr-modes-page #list-paging-left {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: -12px !important;
  }

  #panel #content.ivr-modes-page #list-right {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}
/* DW_IVR_MODES_FULL_HEIGHT_V1_END */

/* DW_SIDEBAR_DESIGN_SYSTEM_HOVER_V1_START
   Hover verde consistente para navegación principal, submenús y utilidades. */
:root:not([data-theme="dark"]) {
  --dw-primary: var(--dw-green-500);
  --dw-primary-hover: var(--dw-green-700);
  --dw-primary-soft: var(--dw-green-50);
}

:root:not([data-theme="dark"]) #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):hover,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):focus,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dropdown-item:not(.dw-active):hover,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dropdown-item:not(.dw-active):focus,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):hover,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):focus {
  background: var(--dw-primary-soft) !important;
  color: var(--dw-primary) !important;
  box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}

:root:not([data-theme="dark"]) #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):hover .dw-nav-icon,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):focus .dw-nav-icon,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):hover i,
:root:not([data-theme="dark"]) #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):focus i {
  color: var(--dw-primary) !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):hover,
:root[data-theme="dark"] #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):focus,
:root[data-theme="dark"] #panel nav.dw-sidenav .dropdown-item:not(.dw-active):hover,
:root[data-theme="dark"] #panel nav.dw-sidenav .dropdown-item:not(.dw-active):focus,
:root[data-theme="dark"] #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):hover,
:root[data-theme="dark"] #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):focus {
  background: var(--dw-primary-soft) !important;
  color: var(--dw-primary) !important;
  box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}

:root[data-theme="dark"] #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):hover .dw-nav-icon,
:root[data-theme="dark"] #panel nav.dw-sidenav .nav-item > .nav-link:not(.dw-active):focus .dw-nav-icon,
:root[data-theme="dark"] #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):hover i,
:root[data-theme="dark"] #panel nav.dw-sidenav .dw-nav-right a.dw-sb-util-link:not(.dw-sb-util-logout):focus i {
  color: var(--dw-primary) !important;
  opacity: 1 !important;
}
/* DW_SIDEBAR_DESIGN_SYSTEM_HOVER_V1_END */

/* DW_LIGHT_DATA_HEADERS_V1_START
   Cabeceras planas y uniformes para tablas, paneles y listados legacy. */
:root:not([data-theme="dark"]) {
  --dw-data-header-bg: var(--dw-surface);
  --dw-data-header-ink: var(--dw-ink-2);
  --dw-data-header-line: var(--dw-border);
  --dw-data-subheader-bg: var(--dw-primary-soft);
  --dw-data-subheader-ink: var(--dw-primary);
}

/* Elimina el degradado aplicado por celda y unifica la cabecera principal. */
:root:not([data-theme="dark"]) #panel #content tr.title,
:root:not([data-theme="dark"]) #panel #content table tr.title {
  background: var(--dw-data-header-bg) !important;
  background-color: var(--dw-data-header-bg) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #panel #content tr.title > td,
:root:not([data-theme="dark"]) #panel #content tr.title > th,
:root:not([data-theme="dark"]) #panel #content th.title {
  height: 46px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-data-header-line) !important;
  background: var(--dw-data-header-bg) !important;
  background-color: var(--dw-data-header-bg) !important;
  background-image: none !important;
  color: var(--dw-data-header-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .035em !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Listados modernos construidos con divs: Usuarios y Directorio. */
:root:not([data-theme="dark"]) #panel #content.users-page .users-grid-header,
:root:not([data-theme="dark"]) #panel #content.directory-page .directory-grid-header {
  height: 46px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-data-header-line) !important;
  background: var(--dw-data-header-bg) !important;
  background-color: var(--dw-data-header-bg) !important;
  background-image: none !important;
  color: var(--dw-data-header-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .035em !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  filter: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #panel #content.users-page .users-grid-header > .inline,
:root:not([data-theme="dark"]) #panel #content.directory-page .directory-grid-header > .directory-grid-col {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Filtros de cabecera sobre la superficie neutral oficial. */
:root:not([data-theme="dark"]) #panel #content tr.title a {
  color: var(--dw-primary) !important;
  text-shadow: none !important;
}

:root:not([data-theme="dark"]) #panel #content.users-page .users-grid-header [id^="filter_shooter_"],
:root:not([data-theme="dark"]) #panel #content.directory-page .directory-filter-trigger {
  border: 1px solid var(--dw-border) !important;
  background: var(--dw-primary-soft) !important;
  box-sizing: border-box !important;
}

:root:not([data-theme="dark"]) #panel #content.users-page .users-grid-header [id^="filter_shooter_"]:hover,
:root:not([data-theme="dark"]) #panel #content.directory-page .directory-filter-trigger:hover {
  background: var(--dw-green-100) !important;
}

/* Segundo nivel: nombres de columnas internas y títulos de subsección. */
:root:not([data-theme="dark"]) #panel #content tr.subtitle,
:root:not([data-theme="dark"]) #panel #content tr.subtitle2 {
  background: var(--dw-data-subheader-bg) !important;
  background-color: var(--dw-data-subheader-bg) !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #panel #content tr.subtitle > td,
:root:not([data-theme="dark"]) #panel #content tr.subtitle > th,
:root:not([data-theme="dark"]) #panel #content tr.subtitle2 > td,
:root:not([data-theme="dark"]) #panel #content tr.subtitle2 > th {
  height: 36px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-data-header-line) !important;
  background: var(--dw-data-subheader-bg) !important;
  background-color: var(--dw-data-subheader-bg) !important;
  background-image: none !important;
  color: var(--dw-data-subheader-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  filter: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #panel #content tr.subtitle2 > td {
  background: var(--dw-primary-soft) !important;
  background-color: var(--dw-primary-soft) !important;
  color: var(--green-ink) !important;
}

:root:not([data-theme="dark"]) #panel #content tr.subtitle a,
:root:not([data-theme="dark"]) #panel #content tr.subtitle2 a {
  color: var(--dw-green-dark) !important;
  text-shadow: none !important;
}

/* Separador sutil: mantiene el color plano, sin degradados. */
:root:not([data-theme="dark"]) #panel #content tr.title > td,
:root:not([data-theme="dark"]) #panel #content tr.title > th,
:root:not([data-theme="dark"]) #panel #content.users-page .users-grid-header,
:root:not([data-theme="dark"]) #panel #content.directory-page .directory-grid-header {
  box-shadow: none !important;
}
/* DW_LIGHT_DATA_HEADERS_V1_END */

/* ═══════════════════════════════════════════════════════════════════════
   DENWA DESIGN SYSTEM v1.0 — LEGACY VISUAL BRIDGE
   Esta capa es deliberadamente más específica: normaliza los módulos
   heredados sin cambiar IDs, eventos ni lógica PHP/JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */

html body,
html #panel,
html #panel #content {
  color: var(--dw-ink) !important;
  background-color: var(--dw-bg) !important;
  font-family: var(--dw-font) !important;
}

html body a {
  color: var(--dw-primary);
}

html body a:hover {
  color: var(--dw-primary-hover);
}

html body :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dw-primary);
  outline-offset: 2px;
}

/* Navegación lateral */
html #panel nav.dw-sidenav {
  color: var(--dw-ink) !important;
  background: var(--dw-sidenav) !important;
  border-right-color: var(--dw-border) !important;
}

html #panel nav.dw-sidenav .dw-nav-section,
html #panel nav.dw-sidenav .nav-link,
html #panel nav.dw-sidenav .dropdown-item,
html #panel nav.dw-sidenav .dw-sb-util-link {
  color: var(--dw-ink-2) !important;
}

html #panel nav.dw-sidenav .dw-active,
html #panel nav.dw-sidenav .nav-link:hover,
html #panel nav.dw-sidenav .dropdown-item:hover,
html #panel nav.dw-sidenav .dw-sb-util-link:not(.dw-sb-util-logout):hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}

html #panel nav.dw-sidenav .dw-active .dw-nav-icon,
html #panel nav.dw-sidenav .nav-link:hover .dw-nav-icon,
html #panel nav.dw-sidenav .dw-sb-util-link:hover i {
  color: var(--dw-primary) !important;
  opacity: 1 !important;
}

html #panel nav.dw-sidenav .dw-nav-right,
html #panel nav.dw-sidenav .dw-user-chip {
  border-color: var(--dw-border) !important;
  background: var(--dw-surface) !important;
}

/* Contenedores, tarjetas y paneles */
html #panel #content :where(
  #list, #list2, #list-left, #list-right, #list-left-short, #list-right-large,
  .tabscontent_background, .tabscontent_background_general,
  .very_large_right_tabscontent_background, .short_right_tabscontent_background
) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #content :where(#list, #list2, #list-left, #list-right, #list-left-short, #list-right-large) {
  border-radius: var(--dw-radius) !important;
  overflow: hidden !important;
}

/* Encabezados oficiales: superficie neutra, sin degradados. */
html #panel #content tr.title,
html #panel #content table tr.title,
html #panel #content .title,
html #panel #content.users-page .users-grid-header,
html #panel #content.directory-page .directory-grid-header {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html #panel #content tr.title > td,
html #panel #content tr.title > th,
html #panel #content th.title,
html #panel #content.users-page .users-grid-header > .inline,
html #panel #content.directory-page .directory-grid-header > .directory-grid-col {
  min-height: 46px !important;
  padding: 0 var(--dw-sp-4) !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-border) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html #panel #content tr.title a,
html #panel #content .title a {
  color: var(--dw-primary) !important;
}

html #panel #content tr.subtitle,
html #panel #content tr.subtitle2,
html #panel #content tr.subtitle > td,
html #panel #content tr.subtitle > th,
html #panel #content tr.subtitle2 > td,
html #panel #content tr.subtitle2 > th {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html #panel #content tr.subtitle > td,
html #panel #content tr.subtitle2 > td {
  min-height: 36px !important;
  padding: 0 var(--dw-sp-4) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Filas, estados vacíos y paginadores */
html #panel #content :where(.row1, .row2, .trColor1, .trColor2, .boxyrow1_big, .boxyrow2_big) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-line) !important;
  background-image: none !important;
}

html #panel #content :where(.row1_hover, .row2_hover, .row_big, .row1_big, .row2_big):hover,
html #panel #content :where(.row1, .row2, .trColor1, .trColor2):hover {
  background: var(--dw-primary-soft) !important;
}

html #panel #content :where(.gray, .italic.gray, #message) {
  color: var(--dw-ink-2) !important;
}

html #panel #content :where(
  #list-paging, #list-paging-left, #list-paging-right,
  #list-paging-left-short, #list-paging-right-large,
  .users-grid-footer, .directory-grid-footer, .tab_footer, .tab_footer_general
) {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html #panel #content :where(#list-paging, #list-paging-left, #list-paging-right, #list-paging-right-large) a,
html #panel #content .page_button,
html #panel #content .pager {
  border-radius: var(--dw-radius-sm) !important;
}

/* Formularios */
html #panel #content :where(input, select, textarea, .boxyinput1, .boxyinput2, .boxyselect1, .boxyselect2) {
  color: var(--dw-ink) !important;
  background-color: var(--dw-surface) !important;
  background-image: none !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-family: var(--dw-font) !important;
  box-shadow: none !important;
  color-scheme: light;
}

html[data-theme="dark"] #panel #content :where(input, select, textarea, .boxyinput1, .boxyinput2, .boxyselect1, .boxyselect2) {
  color-scheme: dark;
}

html #panel #content :where(input, select, textarea):focus {
  border-color: var(--dw-primary) !important;
  box-shadow: 0 0 0 3px var(--dw-primary-soft) !important;
  outline: 0 !important;
}

html #panel #content :where(input, textarea)::placeholder {
  color: var(--dw-ink-3) !important;
}

html #panel #content input[type="checkbox"],
html #panel #content input[type="radio"] {
  accent-color: var(--dw-primary);
}

html #panel #content input[type="file"] {
  max-width: 100%;
  padding: var(--dw-sp-2) !important;
}

/* Botones heredados */
html body :where(.boxybutton, .button, a.button, input[type="button"], input[type="submit"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 var(--dw-sp-3) !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  background-image: none !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer;
}

html body :where(.boxybutton, .button, a.button, input[type="button"], input[type="submit"]):hover {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary-hover) !important;
  border-color: var(--dw-primary-hover) !important;
  transform: translateY(-1px);
}

html body :where(.boxybutton, .button, input)[disabled],
html body :where(.boxybutton, .button).disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Pestañas */
html #panel #content :where(
  .tabs_menu, .tabs_menu_general, .very_large_right_tabs_menu,
  .short_right_tabs_menu, .dw-settings-tabs
) {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
}

html #panel #content :where(.tab, .tab_general, [id^="tab_"]) {
  color: var(--dw-ink-2) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  text-shadow: none !important;
}

html #panel #content :where(.tab_selected, .tab_general_selected, .tab.active, .tab_general.active),
html #panel #content :where(.tab, .tab_general, [id^="tab_"]):hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-bottom-color: var(--dw-primary) !important;
}

/* Boxy / Myboxy */
html body .boxy-modal-blackout {
  background: var(--dw-brand-black) !important;
  opacity: .68 !important;
}

/* Boxy assigns paired inline z-index values to the blackout and dialog. */
html body .boxy-wrapper {
  color: var(--dw-ink) !important;
  filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Remove Boxy's legacy nine-slice frame; .boxy-inner owns the DS border. */
html body .boxy-wrapper .top,
html body .boxy-wrapper .right,
html body .boxy-wrapper .bottom,
html body .boxy-wrapper .left,
html body .boxy-wrapper .top-left,
html body .boxy-wrapper .top-right,
html body .boxy-wrapper .bottom-left,
html body .boxy-wrapper .bottom-right {
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

html body .boxy-wrapper .title-bar,
html body .boxy-wrapper #my_boxy_title {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--dw-border) !important;
  text-shadow: none !important;
  filter: none !important;
}

html body .boxy-wrapper .title-bar h2,
html body .boxy-wrapper .title-bar .close,
html body .boxy-wrapper #my_boxy_title,
html body .boxy-wrapper #my_boxy_title a {
  color: var(--dw-ink) !important;
}

html body .boxy-wrapper .boxy-inner,
html body .boxy-wrapper .boxy-content,
html body .boxy-wrapper :where(#mb_table, #my_boxy_text_cont, #my_boxy_text, #my_boxy_options, .boxydiv1, .boxydiv2) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
}

html body .boxy-wrapper .boxy-inner {
  overflow: hidden;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow-2) !important;
}

html body .boxy-wrapper :where(input, select, textarea) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  color-scheme: light;
}

html[data-theme="dark"] body .boxy-wrapper :where(input, select, textarea) {
  color-scheme: dark;
}

html body .boxy-wrapper :where(.row1, .row2, .boxyrow, .boxyrow_big, .boxyrow1_big, .boxyrow2_big) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-line) !important;
}

html body .boxy-wrapper :where(.gray, .italic.gray) {
  color: var(--dw-ink-2) !important;
}

/* Inicio */
html #panel #home_content {
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
}

html #panel #home_content :where(.dw2-topbar, .dw2-kpi, .dw2-panel, .dw2-info-bar) {
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #home_content :where(.dw2-kpi, .dw2-panel, .dw2-info-bar) {
  border-radius: var(--dw-radius) !important;
}

html:not([data-theme="dark"]) #panel #home_content .dw2-sec-lbl {
  color: var(--dw-accent-ink) !important;
}

html #panel #home_content .dw2-password-metric {
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

html #panel #home_content .dw2-password-stat {
  min-height: 34px;
  border-radius: var(--dw-radius-sm);
}

/* Usuarios y Directorio */
html #panel #content.users-page #list2.users-card,
html #panel #content.directory-page .directory-card {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #content.users-page :where(.users-grid-body, .users-grid-row.row1, .users-grid-row.row2),
html #panel #content.directory-page :where(.directory-grid-body, .directory-grid-row.row1, .directory-grid-row.row2) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-line) !important;
}

html #panel #content.users-page .users-grid-row:hover,
html #panel #content.directory-page .directory-grid-row:hover {
  background: var(--dw-primary-soft) !important;
  box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}

html #panel #content.users-page .users-grid-row a,
html #panel #content.directory-page .directory-grid-row a {
  color: var(--dw-primary) !important;
}

html #panel #content.users-page :where(.users-mode-pill, .quick_filter),
html #panel #content.directory-page :where(.directory-filter-panel, .directory-filter-trigger) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #content.users-page .users-alert--success {
  color: var(--dw-success) !important;
  background: var(--dw-success-soft) !important;
  border-color: var(--dw-success) !important;
}

html #panel #content.users-page .users-alert--error {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html #panel #content.user-editor-page {
  overflow: auto !important;
}

html #panel #content.user-editor-page :where(.tabscontent_background, .tab_footer) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html #panel #content.user-editor-page #parking_range_help,
html #panel #content.user-editor-page [id*="parking"][class*="help"] {
  max-width: 128px !important;
  white-space: nowrap !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html #panel #content.users-search-page,
html #panel #content.user-import-page,
html #panel #content.user-batch-page,
html #panel #content.routes-search-layout {
  padding: var(--dw-sp-4) !important;
  gap: var(--dw-sp-3) !important;
}

html #panel #content.users-search-page :where(#list-left-short, #list-right-large),
html #panel #content.routes-search-layout :where(#list-left-short, #list-right-large) {
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  background: var(--dw-surface) !important;
  box-shadow: var(--dw-shadow) !important;
}

/* Grupos */
html #panel #content.groups-layout {
  gap: 0 !important;
}

html #panel #content.groups-layout :where(#list-left-short, .tabscontent_background_general) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #content.groups-layout .groups-list-scroll > div > div:hover,
html #panel #content.groups-layout :where(#roles_list, #members_list) > div:hover {
  background: var(--dw-primary-soft) !important;
}

html #panel #content.groups-layout .dw-group-delete-action {
  right: var(--dw-sp-6) !important;
  bottom: var(--dw-sp-6) !important;
}

html #panel #content.groups-layout .dw-group-action-button {
  width: auto !important;
  min-width: 124px !important;
}

/* Grupos — encabezado de lista y barra de estado inferior: token de
   superficie, reemplaza navy heredado (#0a1520/#0f1e2e) sin tocar otras
   pantallas que aun comparten .title / .tab_footer_r_xl. */
[data-theme="dark"] #panel #content.groups-layout #list-left-short .title {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  color: var(--dw-ink-2) !important;
  border-color: var(--dw-border) !important;
}

[data-theme="dark"] #panel #content.groups-layout .tab_footer_r_xl {
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

/* Grupos — acento de "Roles" y del nombre de grupo en el pie: token
   --dw-accent en vez del verde suelto #8bd450 (claro usa --dw-primary). */
[data-theme="dark"] #panel #content.groups-layout .tabscontent_background_general .title2,
[data-theme="dark"] #panel #content.groups-layout .tab_footer_general #tab_footer,
[data-theme="dark"] #panel #content.groups-layout .tab_footer_general #tab_footer .title2 {
  color: var(--dw-accent) !important;
}

#panel #content.groups-layout .tabscontent_background_general .title2,
#panel #content.groups-layout .tab_footer_general #tab_footer .title2 {
  color: var(--dw-primary) !important;
}

/* Grupos — checkbox de Roles en oscuro: reusa el mismo patron tokenizado
   ya vigente en .users-page (borde/hover/check dibujado con --dw-on-primary)
   en vez del sprite claro heredado (#eee/#bbb) que queda ilegible en dark. */
:root[data-theme="dark"] body #panel #content.groups-layout .chkbox {
  position: relative !important;
  top: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 2px !important;
  box-sizing: border-box !important;
  background-color: var(--dw-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--dw-ink-3) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.groups-layout .chkbox:hover {
  background-color: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.groups-layout .chkbox.chkbox_enabled {
  background-color: var(--dw-primary) !important;
  background-image: none !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.groups-layout .chkbox.chkbox_enabled::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--dw-on-primary);
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

html #panel #content.cost-centers-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--dw-sp-3) !important;
  padding: var(--dw-sp-4) !important;
}

html #panel #content.cost-centers-layout :where(#list-left, #list-right) {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 440px !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
}

/* Proveedores */
html #panel #content.trunks-list-page #list,
html #panel #content.routes-search-layout :where(#list-left-short, #list-right-large),
html #panel #content.trunk-editor-page :where(.tabscontent_background, .tab_footer) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html #panel #content.trunks-list-page #trunks_list,
html #panel #content.routes-search-layout #users_list {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
}

html #panel #content.trunks-list-page #trunks_list td:nth-child(2),
html #panel #content.routes-search-layout #users_list td:nth-child(2),
html #panel #content.trunk-editor-page [name*="IP" i] {
  font-family: var(--dw-font-mono) !important;
}

/* Preatendedores */
html #panel #content.ivr-layout,
html #panel #content.ivr-modes-page {
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
}

html #panel #content.ivr-layout :where(#list-left, .tabscontent_background, .tab_footer),
html #panel #content.ivr-modes-page :where(#list-left, #list-right, #list-paging-left) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

html #panel #content.ivr-layout :where(#ivrs_list, #numbers_list, #options_list, #queue_members_list),
html #panel #content.ivr-modes-page :where(#modes_list, #mode_form) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
}

html #panel #content.ivr-modes-page #mode_form > table > tbody > tr:first-child > td {
  padding-top: var(--dw-sp-8) !important;
  vertical-align: top !important;
}

html #panel #content.ivr-modes-page #mode_form > table > tbody > tr:last-child {
  height: 72px !important;
  vertical-align: bottom !important;
}

html #panel #content.ivr-holidays-page {
  min-height: 0 !important;
  padding: var(--dw-sp-4) !important;
}

html #panel #content.ivr-holidays-page #list {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
}

/* Calendario: el día activo sólo representa un feriado real. */
html body .boxy-wrapper #mb_holidaysinyear :where(#mb_table, #my_boxy_text_cont, #my_boxy_text, #my_boxy_options),
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker.ui-widget-content,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker table,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-calendar,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-calendar :where(tbody, tr, td) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-header {
  color: var(--dw-ink) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-border) !important;
}

html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker :where(.ui-state-default, .ui-state-active) {
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-sp-1) !important;
}

html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-default:hover,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-highlight {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-active2 {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border-color: var(--dw-primary) !important;
}

/* Modales específicos de los módulos auditados. */
html body .boxy-wrapper :where(
  #mb_massiveusers, #massive_users, #search_app_boxy, #search_voiceagent_boxy,
  #select_iad_button, #mb_availablemodes, #mb_showtree, #mb_modifygroup,
  #mb_holidaysinyear, #mb_editholiday
) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html body .boxy-wrapper #mb_availablemodes :where(.mode-row, .boxyrow_auto) {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-line) !important;
}

/* Responsive */
@media (max-width: 1100px) {
  html #panel #content.cost-centers-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-y: auto !important;
  }

  html #panel #content.cost-centers-layout :where(#list-left, #list-right) {
    min-height: 360px !important;
  }
}

@media (max-width: 900px) {
  html #panel #content.users-search-page,
  html #panel #content.routes-search-layout {
    overflow-y: auto !important;
  }

  html #panel #content.user-editor-page :where(input, select, textarea) {
    max-width: 100% !important;
  }

  html #panel #content.ivr-modes-page #mode_form > table > tbody > tr:first-child > td {
    padding-top: var(--dw-sp-4) !important;
  }
}
/* DW_DESIGN_SYSTEM_V1_END */

/* DW_DS_FONT_AND_HOLIDAYS_HEADER_V1_START
   Cierre visual: Sora como tipografía canónica y cabecera de Feriados
   alineada con las tablas del Design System en ambos temas. */
:root {
  --dw-font: 'Sora', 'Trebuchet MS', system-ui, sans-serif;
}

html,
html body,
html #panel,
html #panel #content,
html body :where(button, input, select, textarea) {
  font-family: var(--dw-font) !important;
}

:root:not([data-theme="dark"]) #panel #content.ivr-holidays-page .row.bgcolor3 {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  background-color: var(--dw-primary) !important;
  background-image: none !important;
  border-color: var(--dw-primary-hover) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

:root[data-theme="dark"] #panel #content.ivr-holidays-page .row.bgcolor3 {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface-2) !important;
  background-color: var(--dw-surface-2) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html #panel #content.ivr-holidays-page .row.bgcolor3 > .inline {
  color: inherit !important;
  background: transparent !important;
  background-image: none !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
}
/* DW_DS_FONT_AND_HOLIDAYS_HEADER_V1_END */

/* DW_DS_BRAND_LOCKUP_V1_START
   Tratamiento transitorio hasta recibir el logo SVG oficial del brand book.
   El PNG legacy se usa como wordmark negativo y se recorta su claim antiguo. */
.dw-sidenav .navbar-brand.dw-brand-composed {
  box-shadow: none !important;
}

.dw-sidenav .dw-brand-logo-shell {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex: 0 0 104px !important;
  width: 104px !important;
  height: 22px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dw-sidenav .dw-brand-logo {
  display: block !important;
  width: 104px !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  opacity: .96 !important;
  filter: brightness(0) invert(1) !important;
  transform: none !important;
}

:root:not([data-theme="dark"]) .dw-sidenav .navbar-brand.dw-brand-composed {
  background: var(--dw-green-500) !important;
  border-bottom: 1px solid var(--dw-green-700) !important;
}

:root[data-theme="dark"] .dw-sidenav .navbar-brand.dw-brand-composed,
:root[data-theme="dark"] .dw-sidenav .navbar-brand.dw-brand-composed:hover,
:root[data-theme="dark"] .dw-sidenav .navbar-brand.dw-brand-composed:focus {
  background: var(--dw-sidenav) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

:root[data-theme="dark"] .dw-sidenav .dw-brand-copy .dw-brand-name {
  color: var(--dw-ink) !important;
}

:root[data-theme="dark"] .dw-sidenav .dw-brand-copy .dw-brand-model {
  color: var(--dw-ink-2) !important;
}
/* DW_DS_BRAND_LOCKUP_V1_END */

/* DW_USERS_DARK_DESIGN_SYSTEM_V1_START
   Users ships page-local legacy dark rules after the shared stylesheet.
   These selectors intentionally outrank that block while keeping light mode intact. */
:root[data-theme="dark"] body #panel #content.users-page #list2.users-card {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-header {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface-2) !important;
  background-color: var(--dw-surface-2) !important;
  background-image: none !important;
  border-bottom-color: var(--dw-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-header > .inline {
  color: inherit !important;
  background: transparent !important;
  border-color: transparent !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-header [id^="filter_shooter_"] {
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-border) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-header [id^="filter_shooter_"]:hover {
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-header .quick_filter {
  color: var(--dw-ink) !important;
  background: var(--dw-surface-2) !important;
  background-image: none !important;
  border-color: var(--dw-border) !important;
  box-shadow: var(--dw-shadow-2) !important;
}

:root[data-theme="dark"] body #panel #content.users-page #users_list_cont.users-grid-body,
:root[data-theme="dark"] body #panel #content.users-page .users-grid-row,
:root[data-theme="dark"] body #panel #content.users-page .users-grid-row.row1,
:root[data-theme="dark"] body #panel #content.users-page .users-grid-row.row2 {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  background-image: none !important;
  border-color: var(--dw-line) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-row:hover {
  background: var(--dw-primary-soft) !important;
  background-color: var(--dw-primary-soft) !important;
  box-shadow: inset 3px 0 0 var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-row > .inline {
  color: var(--dw-ink) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-row > .inline:nth-child(2) a,
:root[data-theme="dark"] body #panel #content.users-page .users-grid-footer #users_found {
  color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-grid-row > .inline:nth-child(4) {
  color: var(--dw-ink-2) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .users-mode-pill {
  color: var(--dw-ink) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-border) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox {
  background-color: var(--dw-surface-2) !important;
  border-color: var(--dw-border) !important;
  border-radius: 3px !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox:hover,
:root[data-theme="dark"] body #panel #content.users-page .chkbox.chkbox_enabled {
  background-color: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page #list2-paging.users-grid-footer {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  background-color: var(--dw-surface) !important;
  background-image: none !important;
  border-top-color: var(--dw-border) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.users-page #list2-paging.users-grid-footer :where(table, tbody, tr, td) {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
}
/* DW_USERS_DARK_DESIGN_SYSTEM_V1_END */

/* DW_USERS_ROW_ACTIONS_V1_START
   Normaliza las acciones y estados del listado sin alterar sus eventos legacy. */
html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-left: 6px !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"] > img {
  display: none !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"]::before {
  content: "+";
  display: block;
  font-family: var(--dw-font) !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"]:hover {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  box-shadow: 0 0 0 3px var(--dw-primary-soft) !important;
  transform: translateY(-1px);
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"]:active {
  transform: translateY(0) scale(.96);
}

/* Estado registrado: punto semántico, sin el bitmap brillante heredado. */
html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > img,
html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > a > img {
  display: none !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > a:has(img[src*="presence_online"])::before,
html body #panel #content.users-page .users-grid-row > .inline:nth-child(7):has(> img[src*="presence_online"])::before,
html body #panel #content.users-page .users-grid-row > .inline:nth-child(7):has(> img[src*="presence_offline"])::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--dw-surface);
  border-radius: 50%;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > a:has(img[src*="presence_online"])::before,
html body #panel #content.users-page .users-grid-row > .inline:nth-child(7):has(> img[src*="presence_online"])::before {
  background: var(--dw-success);
  box-shadow: 0 0 0 3px var(--dw-success-soft);
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(7):has(> img[src*="presence_offline"])::before {
  background: var(--dw-danger);
  box-shadow: 0 0 0 3px var(--dw-danger-soft);
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(7) > a:hover {
  background: var(--dw-success-soft) !important;
}

/* Acción destructiva: visible, compacta y consistente con el sistema. */
html body #panel #content.users-page .users-grid-row > .inline:nth-child(8) > .pointer[onclick*="deleteUser"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--dw-danger) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--dw-radius-sm) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(8) > .pointer[onclick*="deleteUser"] > img {
  display: none !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(8) > .pointer[onclick*="deleteUser"]::before {
  content: "\00D7";
  display: block;
  font-family: var(--dw-font) !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(8) > .pointer[onclick*="deleteUser"]:hover {
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
  transform: translateY(-1px);
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(8) > .pointer[onclick*="deleteUser"]:active {
  transform: translateY(0) scale(.96);
}
/* DW_USERS_ROW_ACTIONS_V1_END */

/* DW_USERS_LIST_POLISH_V2_START
   Alinea las acciones, hace visible la selección oscura y da aire al contador del pie. */
html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) {
  position: relative !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"] {
  position: absolute !important;
  top: 50% !important;
  left: calc(50% + 24px) !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"]:hover {
  transform: translateY(-50%) translateY(-1px) !important;
}

html body #panel #content.users-page .users-grid-row > .inline:nth-child(5) > a[onclick*="loadDids"]:active {
  transform: translateY(-50%) scale(.96) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox {
  position: relative !important;
  top: 0 !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-color: var(--dw-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--dw-ink-3) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox:hover {
  background-color: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox.chkbox_enabled {
  background-color: var(--dw-primary) !important;
  background-image: none !important;
  border-color: var(--dw-primary) !important;
}

:root[data-theme="dark"] body #panel #content.users-page .chkbox.chkbox_enabled::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--dw-on-primary);
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

:root[data-theme="dark"] body #panel #content.users-page #list2-paging.users-grid-footer {
  padding-right: 28px !important;
}

:root[data-theme="dark"] body #panel #content.users-page #list2-paging.users-grid-footer > table > tbody > tr > td:last-child {
  padding-right: 8px !important;
  white-space: nowrap !important;
}
/* DW_USERS_LIST_POLISH_V2_END */

/* DW_USER_EDITOR_LIGHT_CHECKS_V1_START
   En el editor de usuarios, el estilo heredado dejaba el tilde blanco sobre
   superficies claras. El estado marcado conserva contraste en tema claro. */
:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 4px 0 0 !important;
  vertical-align: -3px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  background-color: var(--dw-surface) !important;
  background-image: none !important;
  border: 1px solid var(--dw-green-300) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"]:checked {
  background-color: var(--dw-green-50) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.25 6.45 11.5 13 4.75' fill='none' stroke='%230A4636' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 12px !important;
  border-color: var(--dw-green-500) !important;
}

:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"]:checked::after {
  content: none !important;
}

:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--dw-green-500) !important;
  box-shadow: 0 0 0 3px rgba(13, 91, 70, .12) !important;
}

:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dw-green-500) !important;
  outline-offset: 2px !important;
}

:root:not([data-theme="dark"]) body #panel #content.user-editor-page .user-editor-form input[type="checkbox"]:disabled {
  cursor: default !important;
  opacity: .72 !important;
}
/* DW_USER_EDITOR_LIGHT_CHECKS_V1_END */

/* DW_IVR_AUDIO_ACTIONS_V1_START
   El fragmento legado de audios reserva 30px para descarga y eliminación;
   eso recortaba la segunda acción. Se amplía y se presentan ambas de forma
   inequívoca sin modificar las funciones downloadFile/deleteAudio. */
html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table {
  width: 100% !important;
  table-layout: fixed !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child:not([colspan]) {
  width: 76px !important;
  min-width: 76px !important;
  padding: 3px 6px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 2px !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--dw-radius-sm) !important;
  line-height: 1 !important;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a > img {
  display: none !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a[onclick*="downloadFile"] {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a[onclick*="downloadFile"]::before {
  content: "↓";
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a[onclick*="deleteAudio"] {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a[onclick*="deleteAudio"]::before {
  content: "×";
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a:hover {
  border-color: currentColor !important;
  transform: translateY(-1px) !important;
}

html body #panel #content.ivr-layout :is(#ivraudios, #ivraudios_2) > table > tbody > tr > td:last-child > a:focus-visible {
  outline: 2px solid var(--dw-primary) !important;
  outline-offset: 2px !important;
}
/* DW_IVR_AUDIO_ACTIONS_V1_END */

/* DW_LAYOUT_FILL_V1_START
   Las pantallas heredadas de edición de proveedor, feriados y búsqueda de
   usuarios conservaban alturas fijas (325/346/300px). Eso dejaba la mitad
   inferior de la ventana vacía y separaba el contenido del pie. Estos
   overrides mantienen el HTML y la lógica existentes, pero convierten los
   contenedores en layouts flex/grid que ocupan el alto disponible. */

/* Editor de proveedores: pestañas y pie ocupan todo el alto del contenido. */
html body #panel #content.trunk-editor-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm {
  position: relative !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabs_menu {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabscontent_background {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tab_footer {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}

/* Feriados: la tabla y su estado vacío crecen hasta el pie. */
html body #panel #content.ivr-holidays-page {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.ivr-holidays-page > #list {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content.ivr-holidays-page > #list > .tright {
  flex: 0 0 auto !important;
  height: auto !important;
}

html body #panel #content.ivr-holidays-page > #list > div:not(.tright) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.ivr-holidays-page #holidays {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

/* Búsqueda de usuarios: columnas a pantalla completa y paginador abajo. */
html body #panel #content.users-search-page {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-columns: minmax(270px, 33%) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content.users-search-page > #warning {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html body #panel #content.users-search-page > #list-left-short {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: none !important;
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

html body #panel #content.users-search-page > #list-left-short > table:nth-of-type(2) {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

html body #panel #content.users-search-page > #list-right-large {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex: none !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

html body #panel #content.users-search-page > #list-right-large > #users_list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

html body #panel #content.users-search-page > #list-paging-right-large {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
  width: auto !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  html body #panel #content.users-search-page {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(260px, auto) minmax(320px, 1fr) auto !important;
    overflow-y: auto !important;
  }

  html body #panel #content.users-search-page > #list-left-short {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body #panel #content.users-search-page > #list-right-large {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body #panel #content.users-search-page > #list-paging-right-large {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}
/* DW_LAYOUT_FILL_V1_END */

/* DW_LAYOUT_FILL_V2_START
   Fija el alto disponible de las tres vistas heredadas. La primera versión
   dependía de que los ancestros flex calcularan el espacio sobrante, pero en
   estas rutas el CSS histórico conserva alturas absolutas. Este override usa
   el viewport como referencia y ancla el área editable y su pie interno. */

/* Alto de la zona entre la barra superior y el pie global. */
html body #panel #content.trunk-editor-page,
html body #panel #content.ivr-holidays-page,
html body #panel #content.users-search-page {
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
}

@supports (height: 100dvh) {
  html body #panel #content.trunk-editor-page,
  html body #panel #content.ivr-holidays-page,
  html body #panel #content.users-search-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

/* Proveedores > Ver proveedores > editar: pestañas y acciones al pie. */
html body #panel #content.trunk-editor-page {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabs_menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 30px !important;
  margin: 0 !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabscontent_background {
  position: absolute !important;
  top: 30px !important;
  right: 0 !important;
  bottom: 42px !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tab_footer {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

/* Preatendedor > Feriados: la tarjeta ocupa el alto completo de la página. */
html body #panel #content.ivr-holidays-page {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body #panel #content.ivr-holidays-page > #list {
  position: absolute !important;
  top: var(--dw-sp-4) !important;
  right: var(--dw-sp-4) !important;
  bottom: var(--dw-sp-4) !important;
  left: var(--dw-sp-4) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Usuarios > Buscar usuarios: ambas columnas llenan la altura disponible. */
html body #panel #content.users-search-page {
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
}

@supports (height: 100dvh) {
  html body #panel #content.users-search-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

@media (max-width: 900px) {
  html body #panel #content.trunk-editor-page,
  html body #panel #content.ivr-holidays-page,
  html body #panel #content.users-search-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #panel #content.trunk-editor-page > form#trunkForm {
    height: auto !important;
    min-height: calc(100vh - 86px) !important;
  }
}
/* DW_LAYOUT_FILL_V2_END */

/* DW_TRUNK_INFO_FILL_V1_START
   Proveedores > Ver proveedores > clic en el nombre. Esta vista no usa el
   editor de pestañas: utiliza #list-left y #list-right con la altura fija
   histórica de 332px. La grilla extiende ambas tarjetas hasta el pie global. */
html body #panel #content.trunk-info-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: 0 var(--dw-sp-3) var(--dw-sp-3) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content.trunk-info-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content.trunk-info-page > #list-left,
html body #panel #content.trunk-info-page > #list-right {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  grid-row: 1 !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-info-page > #list-left {
  grid-column: 1 !important;
}

html body #panel #content.trunk-info-page > #list-right {
  grid-column: 2 !important;
}

@media (max-width: 900px) {
  html body #panel #content.trunk-info-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: var(--dw-sp-3) !important;
  }

  html body #panel #content.trunk-info-page > :where(#list-left, #list-right) {
    width: 100% !important;
    height: auto !important;
    min-height: 360px !important;
  }
}
/* DW_TRUNK_INFO_FILL_V1_END */

/* DW_TRUNK_INFO_CONTENT_V3_START
   Composición final del detalle de proveedor: resumen horizontal y tres
   tarjetas operativas equivalentes que aprovechan el resto de la ventana. */
html body #panel #content.trunk-info-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(180px, auto) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: 0 var(--dw-sp-3) var(--dw-sp-3) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content.trunk-info-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content.trunk-info-page > #warning:empty {
  display: none !important;
}

html body #panel #content.trunk-info-page > #warning:not(:empty) {
  position: absolute !important;
  z-index: 20 !important;
  top: var(--dw-sp-3) !important;
  left: 50% !important;
  width: min(720px, calc(100% - var(--dw-sp-8))) !important;
  transform: translateX(-50%) !important;
}

/* Los wrappers heredados dejan participar sus secciones en la grilla padre. */
html body #panel #content.trunk-info-page > :where(#list-left, #list-right) {
  display: contents !important;
}

html body #panel #content.trunk-info-page .trunk-summary,
html body #panel #content.trunk-info-page :where(#trunk-rules, #trunk-prefixes, #trunk-numbers) {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-info-page .trunk-summary {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

html body #panel #content.trunk-info-page .trunk-summary > table:nth-of-type(2) {
  height: auto !important;
  min-height: 148px !important;
}

html body #panel #content.trunk-info-page .trunk-summary > table:nth-of-type(2) > tbody > tr > td {
  padding: var(--dw-sp-3) var(--dw-sp-6) !important;
}

html body #panel #content.trunk-info-page .trunk-summary td.field {
  line-height: 1.55 !important;
  white-space: nowrap !important;
}

html body #panel #content.trunk-info-page #trunk-rules {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body #panel #content.trunk-info-page #trunk-prefixes {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body #panel #content.trunk-info-page #trunk-numbers {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

html body #panel #content.trunk-info-page :where(#trunk-rules, #trunk-prefixes, #trunk-numbers) {
  display: flex !important;
  flex-direction: column !important;
}

html body #panel #content.trunk-info-page :where(#trunk-rules, #trunk-prefixes, #trunk-numbers) > table {
  flex: 0 0 auto !important;
}

/* DW_TRUNK_RULES_HEADER_V5_START
   Encabezado real, ajeno al algoritmo de columnas de la tabla heredada. */
html body #panel #content.trunk-info-page #trunk-rules > table:first-child {
  table-layout: auto !important;
}

html body #panel #content.trunk-info-page #trunk-rules .trunk-rules-header-cell {
  width: 100% !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-info-page #trunk-rules .trunk-rules-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--dw-sp-3) !important;
  width: 100% !important;
  min-height: 42px !important;
}

html body #panel #content.trunk-info-page #trunk-rules #rules-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dw-muted) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
  text-indent: 0 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body #panel #content.trunk-info-page #trunk-rules .trunk-rules-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--dw-sp-2) !important;
  min-width: 0 !important;
}

html body #panel #content.trunk-info-page #trunk-rules :where(#example, #uploadPrefix, #rbaction) {
  margin: 0 !important;
}

html body #panel #content.trunk-info-page #trunk-rules #example {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content.trunk-info-page #trunk-rules :where(#uploadPrefix, #rbaction) {
  min-width: 104px !important;
}

@media (max-width: 1500px) {
  html body #panel #content.trunk-info-page #trunk-rules .trunk-rules-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body #panel #content.trunk-info-page #trunk-rules .trunk-rules-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}
/* DW_TRUNK_RULES_HEADER_V5_END */

html body #panel #content.trunk-info-page :where(#rules, #rule-form, #prefixes, #prefix-form, #numbers, #number-form) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

/* Si el proveedor sólo presenta una sección derecha, ésta usa dos columnas. */
html body #panel #content.trunk-info-page #list-right > :where(#trunk-prefixes, #trunk-numbers):only-child {
  grid-column: 2 / -1 !important;
}

@media (max-width: 1200px) {
  html body #panel #content.trunk-info-page {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(280px, 1fr) minmax(280px, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #panel #content.trunk-info-page .trunk-summary {
    grid-column: 1 / -1 !important;
  }

  html body #panel #content.trunk-info-page #trunk-rules {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body #panel #content.trunk-info-page #trunk-prefixes {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body #panel #content.trunk-info-page #trunk-numbers {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 760px) {
  html body #panel #content.trunk-info-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
  }

  html body #panel #content.trunk-info-page :where(.trunk-summary, #trunk-rules, #trunk-prefixes, #trunk-numbers) {
    grid-column: 1 !important;
    min-height: 280px !important;
  }

  html body #panel #content.trunk-info-page .trunk-summary { grid-row: 1 !important; }
  html body #panel #content.trunk-info-page #trunk-rules { grid-row: 2 !important; }
  html body #panel #content.trunk-info-page #trunk-prefixes { grid-row: 3 !important; }
  html body #panel #content.trunk-info-page #trunk-numbers { grid-row: 4 !important; }
}
/* DW_TRUNK_INFO_CONTENT_V3_END */

/* DW_TRUNK_EDITOR_FILL_V3_START
   Proveedores > Ver proveedores > editar. El layout heredado fija el cuerpo
   en 325px y el pie en top:330px; en pantallas actuales deja acciones sobre
   campos y una zona vacía hasta el footer global. Esta vista ocupa todo el
   alto disponible, reserva su pie y permite recorrer formularios extensos. */
html body #panel #content.trunk-editor-page {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content.trunk-editor-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content.trunk-editor-page > form#trunkForm {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabs_menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 30px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tabscontent_background {
  position: absolute !important;
  top: 30px !important;
  right: 0 !important;
  bottom: 42px !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
}

html body #panel #content.trunk-editor-page > form#trunkForm > .tab_footer {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  html body #panel #content.trunk-editor-page {
    display: flex !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 86px) !important;
    overflow: visible !important;
  }

  @supports (height: 100dvh) {
    html body #panel #content.trunk-editor-page {
      min-height: calc(100dvh - 86px) !important;
    }
  }

  html body #panel #content.trunk-editor-page > form#trunkForm {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
  }

  html body #panel #content.trunk-editor-page > form#trunkForm > .tabs_menu,
  html body #panel #content.trunk-editor-page > form#trunkForm > .tabscontent_background,
  html body #panel #content.trunk-editor-page > form#trunkForm > .tab_footer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  html body #panel #content.trunk-editor-page > form#trunkForm > .tabscontent_background {
    flex: 1 1 auto !important;
    min-height: 360px !important;
    overflow: auto !important;
  }

  html body #panel #content.trunk-editor-page > form#trunkForm > .tab_footer {
    flex: 0 0 42px !important;
  }
}
/* DW_TRUNK_EDITOR_FILL_V3_END */

/* DW_USERS_SEARCH_FILL_V3_START
   Usuarios > Buscar usuarios. Los paneles heredados estaban anclados a
   332px de alto, con el paginador en una coordenada fija. La grilla ocupa
   el espacio hasta el footer, conserva los filtros y hace scroll sólo en
   los resultados cuando la búsqueda supera el alto disponible. */
html body #panel #content.users-search-page {
  position: relative !important;
  display: grid !important;
  flex: 0 0 auto !important;
  grid-template-columns: minmax(280px, 33%) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: var(--dw-sp-4) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content.users-search-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content.users-search-page > #warning:empty {
  display: none !important;
}

html body #panel #content.users-search-page > #warning:not(:empty) {
  position: absolute !important;
  z-index: 20 !important;
  top: var(--dw-sp-4) !important;
  left: 50% !important;
  width: min(720px, calc(100% - var(--dw-sp-8))) !important;
  transform: translateX(-50%) !important;
}

html body #panel #content.users-search-page > :where(#list-left-short, #list-right-large) {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content.users-search-page > #list-left-short {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
}

html body #panel #content.users-search-page > #list-left-short > table:first-child,
html body #panel #content.users-search-page > #list-right-large > table {
  flex: 0 0 auto !important;
}

html body #panel #content.users-search-page > #list-left-short > table:nth-of-type(2) {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

html body #panel #content.users-search-page > #list-right-large {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

html body #panel #content.users-search-page > #list-right-large > #users_list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

html body #panel #content.users-search-page > #list-paging-right-large {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  html body #panel #content.users-search-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 86px) !important;
    overflow: visible !important;
  }

  @supports (height: 100dvh) {
    html body #panel #content.users-search-page {
      min-height: calc(100dvh - 86px) !important;
    }
  }

  html body #panel #content.users-search-page > :where(#list-left-short, #list-right-large) {
    width: 100% !important;
  }

  html body #panel #content.users-search-page > #list-left-short {
    min-height: 340px !important;
  }

  html body #panel #content.users-search-page > #list-right-large {
    min-height: 380px !important;
  }

  html body #panel #content.users-search-page > #list-paging-right-large {
    width: 100% !important;
  }
}
/* DW_USERS_SEARCH_FILL_V3_END */

/* DW_TRUNK_NOTICES_V2_START
   Avisos de alta, baja e importación del detalle de proveedor. Reemplazan el
   texto crudo del backend por un único patrón semántico y accesible. */
html body #panel #content.trunk-info-page > #warning.dw-notice:empty {
  display: none !important;
}

html body #panel #content.trunk-info-page > #warning.dw-notice:not(:empty) {
  position: fixed !important;
  z-index: var(--dw-z-toast) !important;
  top: calc(var(--dw-sp-8) + var(--dw-sp-8)) !important;
  right: var(--dw-sp-6) !important;
  left: auto !important;
  display: block !important;
  width: fit-content !important;
  max-width: calc(100vw - var(--dw-sp-4) - var(--dw-sp-4)) !important;
  margin: 0 !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-inline-start-width: var(--dw-sp-1) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-shadow: var(--dw-shadow-2) !important;
  transform: none !important;
  box-sizing: border-box !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
  white-space: pre-line !important;
}

html body #panel #content.trunk-info-page > #warning.dw-notice--success {
  color: var(--dw-success) !important;
  background: var(--dw-success-soft) !important;
  border-color: var(--dw-success) !important;
}

html body #panel #content.trunk-info-page > #warning.dw-notice--danger {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html body #panel #content.trunk-info-page
:where(#rule-form, #prefix-form, #number-form)
:is(input, select, textarea)[style*="background"] {
  color: var(--dw-ink) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html body #panel #content.trunk-info-page
:where(#rule-form, #prefix-form, #number-form)
:is(input, select, textarea)[style*="background"]:focus {
  outline: 2px solid var(--dw-danger) !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  html body #panel #content.trunk-info-page > #warning.dw-notice:not(:empty) {
    top: calc(var(--dw-sp-8) + var(--dw-sp-3)) !important;
    right: var(--dw-sp-4) !important;
    left: var(--dw-sp-4) !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* DW_TRUNK_NOTICES_V2_END */

/* DW_DIRECTORY_IMPORT_V1_START
   Directorio corporativo: flujo de importación con estructura semántica,
   sin tablas de maquetación ni controles legacy inyectados por JavaScript. */
html body #panel #content.directory-page .directory-import-tab {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: var(--dw-sp-4) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.directory-page .directory-import-card {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  gap: var(--dw-sp-4) !important;
  min-height: 0 !important;
  padding: var(--dw-sp-6) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  box-sizing: border-box !important;
}

html body #panel #content.directory-page .directory-import-card-header,
html body #panel #content.directory-page .directory-import-progress-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
}

html body #panel #content.directory-page .directory-import-card-header > i,
html body #panel #content.directory-page .directory-import-progress-header > i {
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-lg) !important;
}

html body #panel #content.directory-page .directory-import-card-header h2,
html body #panel #content.directory-page .directory-import-progress-header h3 {
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #panel #content.directory-page .directory-import-notice:empty {
  display: none !important;
}

html body #panel #content.directory-page .directory-import-notice:not(:empty) {
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border: 1px solid var(--dw-danger) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html body #panel #content.directory-page .directory-import-workflow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--dw-sp-3) !important;
}

html body #panel #content.directory-page .directory-import-template,
html body #panel #content.directory-page .directory-import-file-control,
html body #panel #content.directory-page .directory-import-action-slot {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

html body #panel #content.directory-page .directory-import-template {
  gap: var(--dw-sp-2) !important;
  text-decoration: none !important;
}

html body #panel #content.directory-page .directory-import-template:hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content.directory-page .directory-import-template:focus-visible,
html body #panel #content.directory-page .directory-import-file-trigger:focus-visible,
html body #panel #content.directory-page .directory-import-submit:focus-visible {
  outline: 2px solid var(--dw-primary) !important;
  outline-offset: 2px !important;
}

html body #panel #content.directory-page .directory-import-file-control:focus-within {
  border-color: var(--dw-primary) !important;
  box-shadow: 0 0 0 var(--dw-sp-1) var(--dw-primary-soft) !important;
}

html body #panel #content.directory-page .directory-import-template > i,
html body #panel #content.directory-page .directory-import-file-label > i {
  flex: 0 0 auto !important;
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-lg) !important;
}

html body #panel #content.directory-page .directory-import-workflow-label,
html body #panel #content.directory-page .directory-import-file-label {
  color: inherit !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 600 !important;
}

html body #panel #content.directory-page .directory-import-workflow-meta {
  margin-left: auto !important;
  padding: var(--dw-sp-1) var(--dw-sp-2) !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-pill) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body #panel #content.directory-page .directory-import-file-control {
  align-items: stretch !important;
  flex-direction: column !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content.directory-page .directory-import-file-label,
html body #panel #content.directory-page .directory-import-file-form,
html body #panel #content.directory-page .directory-import-file-trigger,
html body #panel #content.directory-page .directory-import-loading,
html body #panel #content.directory-page .directory-import-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content.directory-page .directory-import-file-form {
  min-width: 0 !important;
}

html body #panel #content.directory-page .directory-import-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

html body #panel #content.directory-page .directory-import-file-trigger {
  flex: 0 0 auto !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
}

html body #panel #content.directory-page .directory-import-file-control.is-selected .directory-import-file-trigger {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
}

html body #panel #content.directory-page .directory-import-file-name {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #panel #content.directory-page .directory-import-action-slot {
  justify-content: center !important;
}

html body #panel #content.directory-page .directory-import-submit {
  justify-content: center !important;
  width: 100% !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 700 !important;
}

html body #panel #content.directory-page .directory-import-submit:hover {
  background: var(--dw-primary-hover) !important;
  border-color: var(--dw-primary-hover) !important;
}

html body #panel #content.directory-page .directory-import-loading {
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 600 !important;
}

html body #panel #content.directory-page .directory-import-spinner {
  display: inline-block !important;
  width: var(--dw-sp-4) !important;
  height: var(--dw-sp-4) !important;
  border: 2px solid var(--dw-border) !important;
  border-top-color: var(--dw-primary) !important;
  border-radius: var(--dw-radius-pill) !important;
  animation: dw-directory-import-spin 1s linear infinite !important;
}

@keyframes dw-directory-import-spin {
  to { transform: rotate(360deg); }
}

html body #panel #content.directory-page .directory-import-progress {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content.directory-page .directory-import-progress-header {
  flex: 0 0 auto !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  background: var(--dw-surface) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

html body #panel #content.directory-page .directory-import-progress-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body #panel #content.directory-page .directory-import-status-table {
  width: 100% !important;
  border-collapse: collapse !important;
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content.directory-page .directory-import-status-table td {
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  border-bottom: 1px solid var(--dw-line) !important;
  vertical-align: middle !important;
}

html body #panel #content.directory-page .directory-import-status-row--success {
  background: var(--dw-success-soft) !important;
}

html body #panel #content.directory-page .directory-import-status-row--danger {
  background: var(--dw-danger-soft) !important;
}

html body #panel #content.directory-page .directory-import-status-index,
html body #panel #content.directory-page .directory-import-status-icon {
  width: 1% !important;
  white-space: nowrap !important;
}

html body #panel #content.directory-page .directory-import-status-index {
  color: var(--dw-ink-2) !important;
  font-family: var(--dw-font-mono) !important;
}

html body #panel #content.directory-page .directory-import-status-message {
  overflow-wrap: anywhere !important;
}

html body #panel #content.directory-page .directory-import-status-row--success .directory-import-status-icon {
  color: var(--dw-success) !important;
}

html body #panel #content.directory-page .directory-import-status-row--danger .directory-import-status-icon {
  color: var(--dw-danger) !important;
}

html body #panel #content.directory-page .directory-import-empty-state td {
  padding: var(--dw-sp-6) !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  font-style: italic !important;
  text-align: center !important;
}

@media (max-width: 960px) {
  html body #panel #content.directory-page .directory-import-workflow {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* DW_DIRECTORY_IMPORT_V1_END */

/* DW_USER_WORKFLOWS_V1_START
   Componentes reutilizables para importaciones y operaciones por lote de
   Usuarios. Sustituyen los paneles heredados de altura fija y se alimentan
   únicamente de los tokens del Design System. */
html body #panel #content:where(.user-import-page, .user-batch-page) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: var(--dw-sp-4) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content:where(.user-import-page, .user-batch-page) {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content:where(.user-import-page, .user-batch-page) > #warning.dw-bulk-notice:empty,
html body #panel #content.user-profiles-page > #warning.dw-bulk-notice:empty {
  display: none !important;
}

html body #panel #content:where(.user-import-page, .user-batch-page) > #warning.dw-bulk-notice:not(:empty) {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-bottom: var(--dw-sp-3) !important;
  text-align: start !important;
}

html body #panel #content:where(.user-import-page, .user-batch-page) > #um.dw-bulk-card {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--dw-sp-6) !important;
  gap: var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content :where(.dw-bulk-card-header, .dw-bulk-progress-header) {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
}

html body #panel #content :where(.dw-bulk-card-header, .dw-bulk-progress-header) > i {
  flex: 0 0 auto !important;
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-lg) !important;
}

html body #panel #content :where(.dw-bulk-card-header h2, .dw-bulk-progress-header h3) {
  margin: 0 !important;
  color: inherit !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body #panel #content .dw-bulk-workflow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--dw-sp-3) !important;
}

html body #panel #content .dw-bulk-template-list,
html body #panel #content .dw-bulk-file-control,
html body #panel #content .dw-bulk-action-slot,
html body #panel #content .dw-bulk-services,
html body #panel #content .dw-bulk-form-grid {
  min-width: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-bulk-template-list {
  display: grid !important;
  gap: var(--dw-sp-2) !important;
  padding: var(--dw-sp-2) !important;
}

html body #panel #content .dw-bulk-template {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: var(--dw-sp-3) !important;
  gap: var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
  border-radius: var(--dw-radius-sm) !important;
  text-decoration: none !important;
}

html body #panel #content .dw-bulk-template:hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
}

html body #panel #content .dw-bulk-template > i,
html body #panel #content .dw-bulk-file-label > i {
  flex: 0 0 auto !important;
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-lg) !important;
}

html body #panel #content .dw-bulk-template-action {
  margin-left: auto !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content :where(.dw-bulk-workflow-label, .dw-bulk-file-label) {
  color: inherit !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 600 !important;
}

html body #panel #content .dw-bulk-file-control {
  display: flex !important;
  align-items: stretch !important;
  padding: var(--dw-sp-4) !important;
}

html body #panel #content .dw-bulk-file-control:focus-within {
  border-color: var(--dw-primary) !important;
  box-shadow: 0 0 0 var(--dw-sp-1) var(--dw-primary-soft) !important;
}

html body #panel #content .dw-bulk-file-form {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content .dw-bulk-file-label,
html body #panel #content .dw-bulk-file-trigger,
html body #panel #content .dw-bulk-loading,
html body #panel #content .dw-bulk-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content .dw-bulk-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

html body #panel #content .dw-bulk-file-trigger {
  align-self: flex-start !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
}

html body #panel #content .dw-bulk-file-control.is-selected .dw-bulk-file-trigger {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
}

html body #panel #content .dw-bulk-file-name {
  min-width: 0 !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-bulk-action-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: var(--dw-sp-4) !important;
}

html body #panel #content .dw-bulk-submit {
  justify-content: center !important;
  width: 100% !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 700 !important;
}

html body #panel #content .dw-bulk-submit:hover {
  background: var(--dw-primary-hover) !important;
  border-color: var(--dw-primary-hover) !important;
}

html body #panel #content :where(.dw-bulk-template, .dw-bulk-file-trigger, .dw-bulk-submit):focus-visible,
html body #panel #content .dw-bulk-field :is(input, select):focus-visible,
html body #panel #content .dw-bulk-services input:focus-visible {
  outline: 2px solid var(--dw-primary) !important;
  outline-offset: 2px !important;
}

html body #panel #content .dw-bulk-loading {
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 600 !important;
}

html body #panel #content .dw-bulk-spinner {
  display: inline-block !important;
  width: var(--dw-sp-4) !important;
  height: var(--dw-sp-4) !important;
  border: 2px solid var(--dw-border) !important;
  border-top-color: var(--dw-primary) !important;
  border-radius: var(--dw-radius-pill) !important;
  animation: dw-bulk-spin 1s linear infinite !important;
}

@keyframes dw-bulk-spin {
  to { transform: rotate(360deg); }
}

html body #panel #content .dw-bulk-progress {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content .dw-bulk-progress-header {
  flex: 0 0 auto !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  background: var(--dw-surface) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

html body #panel #content .dw-bulk-progress-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body #panel #content .dw-bulk-status-table {
  width: 100% !important;
  border-collapse: collapse !important;
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content .dw-bulk-status-table td {
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  border-bottom: 1px solid var(--dw-line) !important;
  vertical-align: middle !important;
}

html body #panel #content .dw-bulk-status-row--success {
  background: var(--dw-success-soft) !important;
}

html body #panel #content .dw-bulk-status-row--danger {
  background: var(--dw-danger-soft) !important;
}

html body #panel #content :where(.dw-bulk-status-index, .dw-bulk-status-icon) {
  width: 1% !important;
  white-space: nowrap !important;
}

html body #panel #content .dw-bulk-status-index {
  color: var(--dw-ink-2) !important;
  font-family: var(--dw-font-mono) !important;
}

html body #panel #content .dw-bulk-status-message {
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-bulk-status-row--success .dw-bulk-status-icon {
  color: var(--dw-success) !important;
}

html body #panel #content .dw-bulk-status-row--danger .dw-bulk-status-icon {
  color: var(--dw-danger) !important;
}

html body #panel #content .dw-bulk-notice:not(:empty) {
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  border: 1px solid var(--dw-info) !important;
  border-radius: var(--dw-radius-sm) !important;
  color: var(--dw-info) !important;
  background: var(--dw-info-soft) !important;
  box-shadow: var(--dw-shadow) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: pre-line !important;
}

html body #panel #content .dw-bulk-notice--success:not(:empty) {
  color: var(--dw-success) !important;
  background: var(--dw-success-soft) !important;
  border-color: var(--dw-success) !important;
}

html body #panel #content .dw-bulk-notice--danger:not(:empty) {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html body #panel #content .dw-bulk-batch-form,
html body #panel #content .dw-bulk-batch-setup {
  min-height: 0 !important;
}

html body #panel #content .dw-bulk-batch-setup {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
  gap: var(--dw-sp-3) !important;
}

html body #panel #content .dw-bulk-form-grid {
  display: grid !important;
  gap: var(--dw-sp-3) !important;
  padding: var(--dw-sp-4) !important;
}

html body #panel #content .dw-bulk-field {
  display: grid !important;
  gap: var(--dw-sp-1) !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
}

html body #panel #content .dw-bulk-field :is(input, select) {
  width: 100% !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content .dw-bulk-field :is(input, select):focus {
  border-color: var(--dw-primary) !important;
  box-shadow: 0 0 0 var(--dw-sp-1) var(--dw-primary-soft) !important;
}

html body #panel #content .dw-bulk-field :is(input, select).dw-bulk-field--invalid {
  background: var(--dw-warning-soft) !important;
  border-color: var(--dw-warning) !important;
}

html body #panel #content .dw-bulk-services {
  min-inline-size: 0 !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) var(--dw-sp-4) !important;
}

html body #panel #content .dw-bulk-services legend {
  float: none !important;
  width: auto !important;
  margin: 0 0 var(--dw-sp-3) !important;
  padding: 0 !important;
  color: var(--dw-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 700 !important;
}

html body #panel #content .dw-bulk-services-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--dw-sp-2) var(--dw-sp-3) !important;
}

html body #panel #content .dw-bulk-services-grid label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 600 !important;
}

html body #panel #content .dw-bulk-services-grid input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: var(--dw-sp-4) !important;
  height: var(--dw-sp-4) !important;
  margin: 0 !important;
  accent-color: var(--dw-primary) !important;
}

html body #panel #content .dw-bulk-services-grid input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: .55 !important;
}

html body #panel #content .dw-bulk-services-grid label:has(input[type="checkbox"]:disabled) {
  color: var(--dw-ink-3) !important;
  cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #panel #content .dw-bulk-spinner {
    animation: none !important;
  }
}

/* Perfiles de usuario: el workspace conserva los IDs históricos y deja que
   las listas y rutas ocupen el alto disponible del contenido. */
html body #panel #content.user-profiles-page {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: var(--dw-sp-3) !important;
  width: 100% !important;
  min-height: calc(100vh - 86px) !important;
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  padding: var(--dw-sp-4) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@supports (height: 100dvh) {
  html body #panel #content.user-profiles-page {
    min-height: calc(100dvh - 86px) !important;
    height: calc(100dvh - 86px) !important;
    max-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content.user-profiles-page > #warning.dw-bulk-notice:not(:empty) {
  position: absolute !important;
  z-index: var(--dw-z-toast) !important;
  inset: var(--dw-sp-4) var(--dw-sp-8) auto !important;
  width: auto !important;
  text-align: start !important;
}

html body #panel #content.user-profiles-page > :where(#list-left, #list-right) {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content.user-profiles-page > #list-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body #panel #content.user-profiles-page > #list-right {
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: var(--dw-sp-3) !important;
  padding: var(--dw-sp-3) !important;
}

html body #panel #content.user-profiles-page > :where(#list-paging-left, #list-paging-right) {
  position: relative !important;
  inset: auto !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content.user-profiles-page > #list-paging-left {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

html body #panel #content.user-profiles-page > #list-paging-right {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body #panel #content.user-profiles-page :where(#list-left, #list-right) table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  color: inherit !important;
}

html body #panel #content.user-profiles-page #list-left > table .title,
html body #panel #content.user-profiles-page #list-right .subtitle2 {
  height: auto !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body #panel #content.user-profiles-page #list-left > table .title td,
html body #panel #content.user-profiles-page #list-right .subtitle2 td {
  padding: var(--dw-sp-3) !important;
}

html body #panel #content.user-profiles-page #list-right .subtitle {
  height: auto !important;
  color: var(--dw-ink) !important;
  background: var(--dw-primary-soft) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body #panel #content.user-profiles-page #list-right .subtitle td {
  padding: var(--dw-sp-2) !important;
}

html body #panel #content.user-profiles-page #profiles_list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body #panel #content.user-profiles-page #profiles_list td,
html body #panel #content.user-profiles-page :where(#routes, #searchedroutes, #blockedroutes) td {
  padding: var(--dw-sp-3) !important;
  border-bottom: 1px solid var(--dw-line) !important;
  color: var(--dw-ink) !important;
  vertical-align: middle !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content.user-profiles-page :where(#profiles_list, #routes, #searchedroutes, #blockedroutes) :where(.row1, .row2) {
  background: var(--dw-surface) !important;
}

html body #panel #content.user-profiles-page :where(#profiles_list, #routes, #searchedroutes, #blockedroutes) :where(.row1, .row2):hover,
html body #panel #content.user-profiles-page #profiles_list .highlighted {
  background: var(--dw-primary-soft) !important;
}

html body #panel #content.user-profiles-page :where(#profiles_list, #routes, #searchedroutes, #blockedroutes) a {
  color: var(--dw-primary) !important;
  font-weight: 600 !important;
}

html body #panel #content.user-profiles-page .dw-profile-icon-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--dw-sp-6) + var(--dw-sp-2)) !important;
  height: calc(var(--dw-sp-6) + var(--dw-sp-2)) !important;
  color: var(--dw-on-primary) !important;
  border: 1px solid var(--dw-on-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  text-decoration: none !important;
}

html body #panel #content.user-profiles-page .dw-profile-icon-action:hover,
html body #panel #content.user-profiles-page .dw-profile-icon-action:focus-visible {
  color: var(--dw-primary) !important;
  background: var(--dw-surface) !important;
}

html body #panel #content.user-profiles-page .dw-profile-header-action {
  display: inline-flex !important;
  align-items: center !important;
  min-height: calc(var(--dw-sp-6) + var(--dw-sp-2)) !important;
  margin-left: var(--dw-sp-2) !important;
  padding: var(--dw-sp-1) var(--dw-sp-2) !important;
  color: var(--dw-on-primary) !important;
  border: 1px solid var(--dw-on-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body #panel #content.user-profiles-page .dw-profile-header-action:hover,
html body #panel #content.user-profiles-page .dw-profile-header-action:focus-visible {
  color: var(--dw-primary) !important;
  background: var(--dw-surface) !important;
}

html body #panel #content.user-profiles-page #list-right > :where(#callservices_div, #searchroutesoptions_div, #blockedroutesoptions_div) {
  flex: 0 0 auto !important;
  overflow: hidden !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content.user-profiles-page #list-right > :where(#routes_div, #searchedroutes_div, #blockedroutes_div):not(.hidden) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content.user-profiles-page #list-right > :where(#routes_div, #searchedroutes_div, #blockedroutes_div):not(.hidden) > table,
html body #panel #content.user-profiles-page #list-right > :where(#routes_div, #searchedroutes_div, #blockedroutes_div):not(.hidden) > table > tbody,
html body #panel #content.user-profiles-page #list-right > :where(#routes_div, #searchedroutes_div, #blockedroutes_div):not(.hidden) > table > tbody > tr:last-child,
html body #panel #content.user-profiles-page #list-right > :where(#routes_div, #searchedroutes_div, #blockedroutes_div):not(.hidden) > table > tbody > tr:last-child > td {
  height: 100% !important;
}

html body #panel #content.user-profiles-page :where(#call_services, #routes, #searchedroutes, #blockedroutes) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

html body #panel #content.user-profiles-page :where(#searchroutesoptions, #blockedroutesoptions) {
  padding: var(--dw-sp-4) !important;
}

html body #panel #content.user-profiles-page :where(#searchroutesoptions, #blockedroutesoptions) table {
  height: auto !important;
}

html body #panel #content.user-profiles-page :where(#searchroutesoptions, #blockedroutesoptions) :is(input, select) {
  min-height: calc(var(--dw-sp-6) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-1) var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

html body #panel #content.user-profiles-page #list-right a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(var(--dw-sp-6) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html body #panel #content.user-profiles-page #list-right a.button:hover {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary-hover) !important;
  border-color: var(--dw-primary-hover) !important;
}

html body #panel #content.user-profiles-page .dw-profile-delete-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--dw-sp-6) !important;
  height: var(--dw-sp-6) !important;
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border: 1px solid var(--dw-danger) !important;
  border-radius: var(--dw-radius-sm) !important;
  text-decoration: none !important;
}

html body #panel #content.user-profiles-page .dw-profile-delete-action:hover,
html body #panel #content.user-profiles-page .dw-profile-delete-action:focus-visible {
  color: var(--dw-on-primary) !important;
  background: var(--dw-danger) !important;
}

@media (max-width: 960px) {
  html body #panel #content:where(.user-import-page, .user-batch-page) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #panel #content .dw-bulk-workflow,
  html body #panel #content .dw-bulk-batch-setup {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #panel #content.user-profiles-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body #panel #content.user-profiles-page > :where(#list-left, #list-right) {
    width: 100% !important;
    min-height: calc(var(--dw-sp-8) * 8) !important;
  }

  html body #panel #content.user-profiles-page > :where(#list-paging-left, #list-paging-right) {
    width: 100% !important;
  }
}
/* DW_USER_WORKFLOWS_V1_END */

/* DW_USER_WORKFLOWS_VISIBILITY_CONTRAST_V2_START */
html body #panel #content.user-import-page > #warning.dw-bulk-notice,
html body #panel #content.user-batch-page > #warning.dw-bulk-notice,
html body #panel #content.user-profiles-page > #warning.dw-bulk-notice {
  display: none !important;
}

html body #panel #content > #warning.dw-bulk-notice.dw-bulk-notice--success:not(:empty),
html body #panel #content > #warning.dw-bulk-notice.dw-bulk-notice--danger:not(:empty),
html body #panel #content > #warning.dw-bulk-notice.dw-bulk-notice--info:not(:empty) {
  display: block !important;
}

html body #panel #content.user-profiles-page #list-left > table .title td,
html body #panel #content.user-profiles-page #list-right .subtitle2 td {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
}
/* DW_USER_WORKFLOWS_VISIBILITY_CONTRAST_V2_END */

/* DW_RESOURCE_WORKSPACE_V1_START
   Patrón reutilizable maestro-detalle para administrar recursos complejos.
   Grupos es la primera implementación; los componentes no dependen de su
   lógica, endpoints ni modelo de datos. */
html body #panel.dw-resource-panel {
  width: 100% !important;
  box-sizing: border-box !important;
}

html body #panel #content.dw-resource-workspace {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(calc(var(--dw-sp-8) * 9), calc(var(--dw-sp-8) * 11)) minmax(0, 1fr) !important;
  gap: var(--dw-sp-4) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: calc(100vh - 86px) !important;
  height: auto !important;
  padding: var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-bg) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

@supports (min-height: 100dvh) {
  html body #panel #content.dw-resource-workspace {
    min-height: calc(100dvh - 86px) !important;
  }
}

html body #panel #content .dw-resource-master,
html body #panel #content .dw-resource-detail {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius) !important;
  box-shadow: var(--dw-shadow) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body #panel #content .dw-resource-master {
  display: flex !important;
  flex-direction: column !important;
}

/* Neutraliza el ancho porcentual heredado de #list-left-short. */
html body #panel #content.dw-resource-workspace > #list-left-short.dw-resource-master {
  width: 100% !important;
}

html body #panel #content .dw-resource-master-header,
html body #panel #content .dw-resource-detail-header,
html body #panel #content .dw-resource-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--dw-sp-4) !important;
}

html body #panel #content .dw-resource-master-header {
  padding: var(--dw-sp-4) var(--dw-sp-4) var(--dw-sp-3) !important;
}

html body #panel #content .dw-resource-master-header h2,
html body #panel #content .dw-resource-section-header h3 {
  margin: var(--dw-sp-1) 0 0 !important;
  color: var(--dw-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html body #panel #content .dw-resource-eyebrow {
  display: block !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body #panel #content .dw-resource-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: var(--dw-sp-6) !important;
  min-height: var(--dw-sp-6) !important;
  padding: 0 var(--dw-sp-2) !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-radius: var(--dw-radius-pill) !important;
  font-family: var(--dw-font-mono) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-primary-action,
html body #panel #content .dw-resource-button,
.dw-resource-dialog .dw-resource-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--dw-sp-2) !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) var(--dw-sp-4) !important;
  border: 1px solid transparent !important;
  border-radius: var(--dw-radius-sm) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-primary-action {
  margin: 0 var(--dw-sp-4) var(--dw-sp-3) !important;
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-primary-action:hover,
html body #panel #content .dw-resource-button--primary:hover,
.dw-resource-dialog .dw-resource-button--primary:hover {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary-hover) !important;
  border-color: var(--dw-primary-hover) !important;
}

html body #panel #content .dw-resource-button--primary,
.dw-resource-dialog .dw-resource-button--primary {
  color: var(--dw-on-primary) !important;
  background: var(--dw-primary) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-button--secondary,
.dw-resource-dialog .dw-resource-button--secondary {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-color: var(--dw-border) !important;
}

html body #panel #content .dw-resource-button--secondary:hover,
.dw-resource-dialog .dw-resource-button--secondary:hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-button--danger,
.dw-resource-dialog .dw-resource-button--danger {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html body #panel #content .dw-resource-button--danger:hover,
.dw-resource-dialog .dw-resource-button--danger:hover {
  color: var(--dw-danger) !important;
  background: var(--dw-surface) !important;
}

html body #panel #content :where(.dw-resource-primary-action, .dw-resource-button, .dw-resource-list-item, .dw-resource-tab, .dw-resource-icon-button, .dw-resource-switch, .dw-group-relation-control, .dw-group-relation-party--select):focus-visible,
.dw-resource-dialog :where(button, input, select):focus-visible {
  outline: 2px solid var(--dw-primary) !important;
  outline-offset: 2px !important;
}

html body #panel #content .dw-resource-search {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
  margin: 0 var(--dw-sp-4) var(--dw-sp-3) !important;
  padding: 0 var(--dw-sp-3) !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-search:focus-within {
  border-color: var(--dw-primary) !important;
  outline: 2px solid var(--dw-primary-soft) !important;
  outline-offset: 0 !important;
}

html body #panel #content .dw-resource-search input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) 0 !important;
  color: var(--dw-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content .groups-list-scroll {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html body #panel #content .dw-resource-list {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 0 var(--dw-sp-2) var(--dw-sp-3) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-list-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  width: 100% !important;
  min-height: calc(var(--dw-sp-8) * 2) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-inline-start: var(--dw-sp-1) solid transparent !important;
  border-radius: var(--dw-radius-sm) !important;
  text-align: start !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-list-item:hover {
  background: var(--dw-surface-2) !important;
}

html body #panel #content .dw-resource-list-item.is-selected {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-inline-start-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-list-icon,
html body #panel #content .dw-resource-identity-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

html body #panel #content :where(.dw-resource-list-icon, .dw-resource-identity-icon) img {
  max-width: var(--dw-sp-6) !important;
  max-height: var(--dw-sp-6) !important;
  object-fit: contain !important;
}

html body #panel #content .dw-resource-list-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: var(--dw-sp-1) !important;
}

html body #panel #content .dw-resource-list-copy strong {
  color: inherit !important;
  font-size: var(--dw-fs-md) !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-resource-list-copy small {
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-xs) !important;
}

html body #panel #content .dw-resource-list-arrow {
  color: var(--dw-ink-3) !important;
  opacity: 0 !important;
}

html body #panel #content .dw-resource-list-item:is(:hover, .is-selected) .dw-resource-list-arrow {
  opacity: 1 !important;
}

html body #panel #content .dw-resource-filter-empty {
  padding: var(--dw-sp-6) var(--dw-sp-4) !important;
  color: var(--dw-ink-2) !important;
  text-align: center !important;
}

html body #panel #content .dw-resource-detail {
  display: flex !important;
  flex-direction: column !important;
}

html body #panel #content .dw-resource-detail-empty {
  display: grid !important;
  flex: 1 1 auto !important;
  place-items: center !important;
  min-height: calc(var(--dw-sp-8) * 10) !important;
}

html body #panel #content .dw-resource-detail-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body #panel #content .dw-resource-detail-content[hidden] {
  display: none !important;
}

html body #panel #content .dw-resource-detail-header {
  padding: var(--dw-sp-4) var(--dw-sp-6) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

html body #panel #content .dw-resource-identity {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  min-width: 0 !important;
}

html body #panel #content .dw-resource-identity-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: var(--dw-sp-1) !important;
}

html body #panel #content .dw-resource-identity-copy small {
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body #panel #content .dw-resource-identity-copy strong {
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-xl) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-resource-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content .dw-resource-tabs.tabs_menu_general {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  gap: var(--dw-sp-1) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--dw-sp-2) var(--dw-sp-6) 0 !important;
  background: var(--dw-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-border) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-tab.tab_general {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--dw-sp-2) !important;
  width: auto !important;
  height: auto !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-3)) !important;
  margin: 0 !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--dw-sp-1) solid transparent !important;
  border-radius: var(--dw-radius-sm) var(--dw-radius-sm) 0 0 !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-tab.tab_general:hover {
  color: var(--dw-ink) !important;
  background: var(--dw-surface-2) !important;
}

html body #panel #content .dw-resource-tab.tab_active_general,
html body #panel #content .dw-resource-tab[aria-selected="true"] {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-bottom-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-tab-panels.tabscontent_background_general {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-tab-panel.tabcontent_general {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--dw-sp-6) !important;
  color: var(--dw-ink) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-tab-panel[hidden] {
  display: none !important;
}

html body #panel #content .dw-resource-section-header {
  margin-bottom: var(--dw-sp-4) !important;
}

html body #panel #content .dw-resource-settings,
html body #panel #content .dw-resource-table,
html body #panel #content .dw-group-relation-matrix {
  width: 100% !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-setting-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--dw-sp-4) !important;
  min-height: calc(var(--dw-sp-8) * 2) !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-setting-row:last-child {
  border-bottom: 0 !important;
}

html body #panel #content .dw-resource-setting-copy strong {
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-md) !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-resource-setting-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-2) !important;
}

html body #panel #content .dw-resource-icon-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--dw-sp-8) + var(--dw-sp-1)) !important;
  height: calc(var(--dw-sp-8) + var(--dw-sp-1)) !important;
  padding: 0 !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-icon-button:hover {
  color: var(--dw-primary) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-icon-button--danger {
  color: var(--dw-danger) !important;
}

html body #panel #content .dw-resource-icon-button--danger:hover {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
  border-color: var(--dw-danger) !important;
}

html body #panel #content .dw-resource-switch {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: calc(var(--dw-sp-8) + var(--dw-sp-4)) !important;
  height: var(--dw-sp-6) !important;
  padding: var(--dw-sp-1) !important;
  background: var(--dw-border) !important;
  border: 0 !important;
  border-radius: var(--dw-radius-pill) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-switch span {
  display: block !important;
  width: var(--dw-sp-4) !important;
  height: var(--dw-sp-4) !important;
  background: var(--dw-surface) !important;
  border-radius: var(--dw-radius-pill) !important;
  transform: translateX(0) !important;
  transition: transform .15s ease !important;
}

html body #panel #content .dw-resource-switch.chkbox_enabled {
  background: var(--dw-primary) !important;
}

html body #panel #content .dw-resource-switch.chkbox_enabled span {
  transform: translateX(var(--dw-sp-6)) !important;
}

html body #panel #content .dw-resource-table-head,
html body #panel #content .dw-resource-table-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--dw-sp-8) * 3), auto) auto !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-table-head {
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface-2) !important;
  border-bottom: 1px solid var(--dw-border) !important;
  font-size: var(--dw-fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body #panel #content .dw-resource-table-row {
  min-height: calc(var(--dw-sp-8) * 2) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

html body #panel #content .dw-resource-table-row:last-child {
  border-bottom: 0 !important;
}

html body #panel #content .dw-resource-table-row:hover {
  background: var(--dw-primary-soft) !important;
}

html body #panel #content .dw-resource-table-row > :last-child {
  justify-self: end !important;
}

html body #panel #content .dw-resource-mono {
  color: var(--dw-ink-2) !important;
  font-family: var(--dw-font-mono) !important;
  font-size: var(--dw-fs-sm) !important;
}

html body #panel #content .dw-resource-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: var(--dw-sp-2) !important;
  width: 100% !important;
  min-height: calc(var(--dw-sp-8) * 5) !important;
  padding: var(--dw-sp-6) !important;
  color: var(--dw-ink-2) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-resource-state > i {
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-xl) !important;
}

html body #panel #content .dw-resource-state strong {
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-md) !important;
}

html body #panel #content .dw-resource-state span {
  max-width: calc(var(--dw-sp-8) * 12) !important;
  color: var(--dw-ink-2) !important;
  font-size: var(--dw-fs-sm) !important;
  line-height: 1.5 !important;
}

html body #panel #content .dw-resource-state--error > i {
  color: var(--dw-danger) !important;
}

html body #panel #content .dw-resource-state-spinner {
  animation: dw-resource-spin .8s linear infinite !important;
}

@keyframes dw-resource-spin {
  to { transform: rotate(360deg); }
}

html body #panel #content .dw-group-relations {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dw-sp-4) !important;
}

html body #panel #content .dw-group-relation-parties {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: var(--dw-sp-4) !important;
}

html body #panel #content .dw-group-relation-parties > .bi-arrow-left-right {
  color: var(--dw-ink-3) !important;
  font-size: var(--dw-fs-xl) !important;
}

html body #panel #content .dw-group-relation-party {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(var(--dw-sp-8) * 2) !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  text-align: start !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-group-relation-party img {
  width: var(--dw-sp-6) !important;
  height: var(--dw-sp-6) !important;
  object-fit: contain !important;
}

html body #panel #content .dw-group-relation-party strong {
  color: var(--dw-ink) !important;
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-group-relation-party--select {
  cursor: pointer !important;
}

html body #panel #content .dw-group-relation-party--select:hover {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

html body #panel #content .dw-group-relation-row {
  display: grid !important;
  grid-template-columns: minmax(calc(var(--dw-sp-8) * 3), auto) minmax(0, 1fr) minmax(calc(var(--dw-sp-8) * 3), auto) !important;
  align-items: stretch !important;
  min-height: calc(var(--dw-sp-8) * 2) !important;
  border-bottom: 1px solid var(--dw-border) !important;
}

html body #panel #content .dw-group-relation-row:last-child {
  border-bottom: 0 !important;
}

html body #panel #content .dw-group-relation-activity {
  display: flex !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  min-width: 0 !important;
  padding: var(--dw-sp-3) var(--dw-sp-4) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-inline: 1px solid var(--dw-border) !important;
  box-sizing: border-box !important;
}

html body #panel #content .dw-group-relation-activity > i {
  color: var(--dw-primary) !important;
  font-size: var(--dw-fs-lg) !important;
}

html body #panel #content .dw-group-relation-activity span {
  overflow-wrap: anywhere !important;
}

html body #panel #content .dw-group-relation-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--dw-sp-2) !important;
  min-width: 0 !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-surface-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body #panel #content .dw-group-relation-control[data-relation="permit"] {
  color: var(--dw-success) !important;
  background: var(--dw-success-soft) !important;
}

html body #panel #content .dw-group-relation-control[data-relation="deny"] {
  color: var(--dw-danger) !important;
  background: var(--dw-danger-soft) !important;
}

html body #panel #content .dw-group-relation-control:disabled {
  color: var(--dw-ink-3) !important;
  background: var(--dw-surface-2) !important;
  cursor: not-allowed !important;
  opacity: .65 !important;
}

html body #panel #content .dw-resource-changebar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: var(--dw-sp-2) !important;
  margin-top: var(--dw-sp-4) !important;
  padding: var(--dw-sp-3) !important;
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-sm) !important;
}

html body #panel #content .dw-resource-changebar[hidden],
html body #panel #content [hidden] {
  display: none !important;
}

html body #panel #content .dw-resource-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Diálogos reutilizables del workspace. */
.dw-resource-dialog {
  max-width: calc(100vw - var(--dw-sp-8)) !important;
  padding: 0 !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border-radius: var(--dw-radius) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.dw-resource-dialog #my_boxy_title {
  display: block !important;
  padding: var(--dw-sp-4) var(--dw-sp-6) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-border) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-lg) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-shadow: none !important;
}

.dw-resource-dialog #my_boxy_title:empty,
.dw-resource-dialog #my_boxy_options:empty {
  display: none !important;
}

.dw-resource-dialog #mb_table,
.dw-resource-dialog #mb_table td {
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
}

.dw-resource-dialog #my_boxy_text_cont {
  max-height: min(calc(var(--dw-sp-8) * 16), calc(100vh - calc(var(--dw-sp-8) * 6))) !important;
  overflow: auto !important;
}

.dw-resource-dialog #my_boxy_text {
  height: auto !important;
  padding: var(--dw-sp-6) !important;
  color: var(--dw-ink) !important;
}

.dw-resource-dialog #my_boxy_options {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--dw-sp-2) !important;
  min-height: 0 !important;
  padding: var(--dw-sp-3) var(--dw-sp-6) !important;
  background: var(--dw-surface-2) !important;
  border-top: 1px solid var(--dw-border) !important;
  box-sizing: border-box !important;
}

.dw-resource-dialog #my_boxy_options .dw-resource-button {
  float: none !important;
  margin: 0 !important;
}

.dw-resource-dialog #my_boxy_options .dw-resource-button--secondary {
  margin-inline-end: auto !important;
}

.dw-resource-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dw-sp-4) !important;
}

.dw-resource-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.dw-resource-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dw-sp-2) !important;
  min-width: 0 !important;
  color: var(--dw-ink) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
}

.dw-resource-field input,
.dw-resource-field select {
  width: 100% !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-md) !important;
  box-sizing: border-box !important;
}

.dw-resource-field input:focus,
.dw-resource-field select:focus {
  border-color: var(--dw-primary) !important;
  outline: 2px solid var(--dw-primary-soft) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.dw-resource-fieldset {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.dw-resource-fieldset legend {
  margin-bottom: var(--dw-sp-2) !important;
  color: var(--dw-ink) !important;
  font-size: var(--dw-fs-sm) !important;
  font-weight: 700 !important;
}

.dw-group-icon-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(var(--dw-sp-8) * 2) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
  width: 100% !important;
}

.dw-group-icon-trigger img,
.dw-group-icon-option img,
.dw-resource-choice img {
  width: var(--dw-sp-6) !important;
  height: var(--dw-sp-6) !important;
  object-fit: contain !important;
}

.dw-group-icon-trigger > i {
  margin-inline-start: auto !important;
}

.dw-group-icon-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--dw-sp-8) + var(--dw-sp-4)), 1fr)) !important;
  gap: var(--dw-sp-2) !important;
  max-height: calc(var(--dw-sp-8) * 7) !important;
  margin-top: var(--dw-sp-2) !important;
  padding: var(--dw-sp-2) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  overflow: auto !important;
}

.dw-group-icon-list[hidden] {
  display: none !important;
}

.dw-group-icon-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-4)) !important;
  padding: var(--dw-sp-2) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  cursor: pointer !important;
}

.dw-group-icon-option:hover {
  background: var(--dw-primary-soft) !important;
  border-color: var(--dw-primary) !important;
}

.dw-member-picker {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--dw-sp-3) !important;
}

.dw-member-picker .dw-resource-search {
  margin: 0 !important;
}

.dw-member-picker-selected {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--dw-sp-2) !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-2)) !important;
  padding: var(--dw-sp-2) !important;
  background: var(--dw-surface-2) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-sizing: border-box !important;
}

.dw-resource-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--dw-sp-1) !important;
  max-width: 100% !important;
  padding: var(--dw-sp-1) var(--dw-sp-2) !important;
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
  border: 1px solid var(--dw-primary) !important;
  border-radius: var(--dw-radius-pill) !important;
  font-size: var(--dw-fs-sm) !important;
}

.dw-resource-chip > span {
  overflow-wrap: anywhere !important;
}

.dw-resource-chip button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}

.dw-member-picker-results,
.dw-resource-choice-list {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(var(--dw-sp-8) * 5) !important;
  max-height: calc(var(--dw-sp-8) * 9) !important;
  background: var(--dw-surface) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  overflow: auto !important;
}

.dw-member-picker-result,
.dw-resource-choice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: var(--dw-sp-3) !important;
  min-height: calc(var(--dw-sp-8) + var(--dw-sp-6)) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  color: var(--dw-ink) !important;
  background: var(--dw-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-border) !important;
  text-align: start !important;
  cursor: pointer !important;
}

.dw-member-picker-result:last-child,
.dw-resource-choice:last-child {
  border-bottom: 0 !important;
}

.dw-member-picker-result:hover,
.dw-resource-choice:hover,
.dw-resource-choice.is-selected {
  color: var(--dw-primary) !important;
  background: var(--dw-primary-soft) !important;
}

.dw-resource-choice {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.dw-resource-choice:not(.is-selected) > .bi-check-lg {
  visibility: hidden !important;
}

.dw-resource-callout {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--dw-sp-3) !important;
  padding: var(--dw-sp-4) !important;
  color: var(--dw-info) !important;
  background: var(--dw-info-soft) !important;
  border: 1px solid var(--dw-info) !important;
  border-radius: var(--dw-radius-sm) !important;
}

.dw-resource-callout p {
  margin: 0 !important;
  color: inherit !important;
  line-height: 1.5 !important;
}

@media (max-width: 960px) {
  html body #panel #content.dw-resource-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #panel #content .dw-resource-master {
    min-height: calc(var(--dw-sp-8) * 9) !important;
    max-height: calc(var(--dw-sp-8) * 14) !important;
  }

  html body #panel #content .dw-resource-detail-header,
  html body #panel #content .dw-resource-section-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html body #panel #content .dw-resource-header-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  html body #panel #content.dw-resource-workspace {
    padding: var(--dw-sp-3) !important;
  }

  html body #panel #content .dw-resource-detail-header,
  html body #panel #content .dw-resource-tab-panel.tabcontent_general {
    padding: var(--dw-sp-4) !important;
  }

  html body #panel #content .dw-resource-tabs.tabs_menu_general {
    padding-inline: var(--dw-sp-3) !important;
    overflow-x: auto !important;
  }

  html body #panel #content .dw-resource-tab.tab_general span {
    white-space: nowrap !important;
  }

  html body #panel #content .dw-resource-button {
    flex: 1 1 auto !important;
  }

  html body #panel #content .dw-group-relation-parties {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body #panel #content .dw-group-relation-parties > .bi-arrow-left-right {
    transform: rotate(90deg) !important;
    justify-self: center !important;
  }

  html body #panel #content .dw-group-relation-row {
    grid-template-columns: minmax(calc(var(--dw-sp-8) * 2), auto) minmax(0, 1fr) minmax(calc(var(--dw-sp-8) * 2), auto) !important;
  }

  html body #panel #content .dw-group-relation-control span {
    display: none !important;
  }

  .dw-resource-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dw-resource-dialog #my_boxy_text,
  .dw-resource-dialog #my_boxy_title,
  .dw-resource-dialog #my_boxy_options {
    padding: var(--dw-sp-4) !important;
  }
}
/* DW_RESOURCE_WORKSPACE_V1_END */

/* ════════════════════════════════════════════════════════════════
   USERS LIST v2 — lista de usuarios (users.php)
   Reemplaza al bloque inline <style id="users-modern-table-style">.
   Solo tokens del design system: sin un hex hardcodeado.
   ════════════════════════════════════════════════════════════════ */
#panel #content.users-page{min-height:0!important;overflow:hidden!important}

/* ── avisos ── */
#panel #content.users-page #warning.users-alert{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;flex:0 0 auto;width:auto!important;min-height:44px!important;height:auto!important;margin:var(--dw-sp-4) var(--dw-sp-4) 0!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;background-image:none!important;box-shadow:var(--dw-shadow)!important;box-sizing:border-box;font-size:var(--dw-fs-md)!important;font-weight:600;line-height:1.35!important;text-align:left!important;z-index:6;animation:users-alert-in .22s ease-out}
#panel #content.users-page #warning.users-alert:before{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;margin-right:var(--dw-sp-2);border-radius:var(--dw-radius-pill);font-size:13px;font-weight:700;line-height:1;content:""}
#panel #content.users-page #warning.users-alert--success{border-color:var(--dw-success)!important;background:var(--dw-success-soft)!important;color:var(--dw-success)!important}
#panel #content.users-page #warning.users-alert--success:before{background:var(--dw-success);color:var(--dw-surface);content:"\2713"}
#panel #content.users-page #warning.users-alert--error{border-color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;color:var(--dw-danger)!important}
#panel #content.users-page #warning.users-alert--error:before{background:var(--dw-danger);color:var(--dw-surface);content:"!"}
#panel #content.users-page .users-alert+#list2.users-card{margin-top:var(--dw-sp-3)!important}
@keyframes users-alert-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* ── card ── */
#panel #content.users-page #list2.users-card{display:flex!important;flex-direction:column;flex:1 1 0!important;min-height:420px!important;max-width:1440px;margin:var(--dw-sp-4) auto!important;overflow:hidden!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;background:var(--dw-surface)!important;box-shadow:var(--dw-shadow)!important}

/* ── grilla compartida por cabecera y filas ── */
#panel #content.users-page .users-grid-header,
#panel #content.users-page .users-grid-row{display:grid!important;grid-template-columns:44px minmax(200px,1.7fr) 132px 168px 168px 92px;align-items:center;padding:0 var(--dw-sp-4);box-sizing:border-box}
#panel #content.users-page .users-cell{position:relative;display:flex;align-items:center;gap:var(--dw-sp-2);min-width:0;height:100%}
#panel #content.users-page .users-cell--check{justify-content:center;gap:0}
#panel #content.users-page .users-cell--ext,
#panel #content.users-page .users-cell--mode,
#panel #content.users-page .users-cell--status{justify-content:center}
#panel #content.users-page .users-cell--acts{justify-content:flex-end;gap:var(--dw-sp-1)}

/* ── cabecera ── */
#panel #content.users-page .users-grid-header{position:relative;z-index:4;flex:0 0 44px!important;width:100%!important;height:44px!important;min-height:44px!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;background:var(--dw-surface-2)!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase}
#panel #content.users-page .users-th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#panel #content.users-page .users-filter-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;border-radius:var(--dw-radius-pill);transition:background .15s ease}
#panel #content.users-page .users-filter-btn:hover{background:var(--dw-primary-soft)}
#panel #content.users-page .users-filter-btn img{width:14px;height:14px;opacity:.7}
#panel #content.users-page .users-filter-flag img{width:12px;height:12px;opacity:.85}
#panel #content.users-page .users-grid-header .quick_filter_cont{position:absolute;top:38px;left:0;z-index:var(--dw-z-dropdown)}
#panel #content.users-page .users-cell--acts .quick_filter_cont,
#panel #content.users-page .users-cell--status .quick_filter_cont{left:auto;right:0}
#panel #content.users-page .users-cell--mode .quick_filter_cont{left:auto;right:0}
#panel #content.users-page .users-grid-header .quick_filter{padding:var(--dw-sp-3)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;background:var(--dw-surface)!important;background-image:none!important;color:var(--dw-ink)!important;box-shadow:var(--dw-shadow-2)!important;font-size:var(--dw-fs-md);font-weight:400;letter-spacing:0;text-transform:none}
#panel #content.users-page .users-qf-row{display:flex;align-items:center;gap:6px;white-space:nowrap}
#panel #content.users-page .users-qf-row+.users-qf-row{margin-top:var(--dw-sp-2)}

/* ── cuerpo y filas ── */
#panel #content.users-page .users-grid-body{flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:auto!important;background:var(--dw-surface)!important;scrollbar-width:thin;scrollbar-color:var(--dw-border) transparent}
#panel #content.users-page #users_list{min-height:100%}
#panel #content.users-page .users-grid-row{position:relative;width:100%;height:56px!important;min-height:56px!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;background:var(--dw-surface)!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md);line-height:1.3;transition:background .12s ease}
#panel #content.users-page .users-grid-row.row1,
#panel #content.users-page .users-grid-row.row2{background:var(--dw-surface)!important}
#panel #content.users-page .users-grid-row:before{position:absolute;top:0;bottom:0;left:0;width:3px;background:transparent;content:""}
#panel #content.users-page .users-grid-row:hover{background:var(--dw-surface-2)!important}
#panel #content.users-page .users-grid-row:hover:before{background:var(--dw-primary)}
#panel #content.users-page .users-grid-row:has(.chkbox_enabled){background:var(--dw-primary-soft)!important}
#panel #content.users-page .users-grid-row:has(.chkbox_enabled):before{background:var(--dw-primary)}

/* ── identidad ── */
#panel #content.users-page .users-cell--who{gap:var(--dw-sp-3)}
#panel #content.users-page .users-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--dw-radius-pill);background:var(--dw-primary-soft);color:var(--dw-accent-ink);font-size:var(--dw-fs-sm);font-weight:600;letter-spacing:.02em}
#panel #content.users-page .users-who-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.25}
#panel #content.users-page a.users-who-name{display:block;max-width:100%;overflow:hidden;color:var(--dw-ink)!important;font-size:var(--dw-fs-md);font-weight:600;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
#panel #content.users-page a.users-who-name:hover{color:var(--dw-primary)!important;text-decoration:underline;text-underline-offset:2px}
#panel #content.users-page .users-who-mail{display:block;max-width:100%;overflow:hidden;color:var(--dw-ink-2);font-size:var(--dw-fs-sm);text-overflow:ellipsis;white-space:nowrap}
#panel #content.users-page .users-who-mail--none{color:var(--dw-ink-3)}

/* ── extensión ── */
#panel #content.users-page .users-ext-num{font-family:var(--dw-font-mono);font-size:var(--dw-fs-md);font-variant-numeric:tabular-nums;letter-spacing:.01em}
#panel #content.users-page .users-ext-add a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--dw-border);border-radius:var(--dw-radius-sm);opacity:.75;transition:border-color .15s ease,background .15s ease,opacity .15s ease}
#panel #content.users-page .users-ext-add a:hover{border-color:var(--dw-primary);background:var(--dw-primary-soft);opacity:1}
#panel #content.users-page .users-ext-add img{width:11px;height:11px}

/* ── modo: chip neutro, el color semántico se reserva al registro ── */
#panel #content.users-page .users-mode-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;max-width:100%;height:24px;padding:0 10px;overflow:hidden;border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);background:transparent;color:var(--dw-ink-2);font-size:var(--dw-fs-sm);text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}
#panel #content.users-page .users-mode-pill img{max-width:14px;max-height:14px}

/* ── registro: punto + texto, nunca solo color (§6.3) ── */
#panel #content.users-page .users-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--dw-fs-sm);white-space:nowrap;text-decoration:none}
#panel #content.users-page .users-dot{flex:0 0 8px;width:8px;height:8px;border-radius:var(--dw-radius-pill);background:currentColor}
#panel #content.users-page .users-status--ok{color:var(--dw-success)}
#panel #content.users-page .users-status--off{color:var(--dw-danger)}
#panel #content.users-page .users-status--na{color:var(--dw-ink-3)}

/* ── acciones al hover ── */
#panel #content.users-page .users-cell--acts{opacity:0;transition:opacity .12s ease}
#panel #content.users-page .users-grid-row:hover .users-cell--acts,
#panel #content.users-page .users-grid-row:focus-within .users-cell--acts,
#panel #content.users-page .users-grid-row:has(.chkbox_enabled) .users-cell--acts{opacity:1}
#panel #content.users-page .users-act,
#panel #content.users-page .users-act-del .pointer{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--dw-radius-sm);color:var(--dw-ink-2)!important;text-decoration:none;transition:background .15s ease,color .15s ease}
#panel #content.users-page .users-act:hover{background:var(--dw-line);color:var(--dw-ink)!important}
#panel #content.users-page .users-act .bi{font-size:15px;line-height:1}
#panel #content.users-page .users-act-del .pointer:hover{background:var(--dw-danger-soft)}
#panel #content.users-page .users-act-del img{width:11px;height:11px}

/* ── pie ── */
#panel #content.users-page .users-grid-footer{flex:0 0 52px!important;width:100%!important;height:52px!important;min-height:52px!important;padding:0 var(--dw-sp-4);border:0!important;border-top:1px solid var(--dw-line)!important;background:var(--dw-surface-2)!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm);box-sizing:border-box}
#panel #content.users-page .users-grid-footer table,#panel #content.users-page .users-grid-footer tr,#panel #content.users-page .users-grid-footer td{height:100%!important;background:transparent!important;color:inherit!important}
#panel #content.users-page .users-grid-footer #users_found{color:var(--dw-ink)!important;font-family:var(--dw-font-mono);font-size:var(--dw-fs-sm)!important;font-weight:600}
#panel #content.users-page .users-card-accent{display:none!important}

/* ── 1366×768 y por debajo ── */
@media (max-width:1200px){
  #panel #content.users-page .users-grid-header,
  #panel #content.users-page .users-grid-row{grid-template-columns:40px minmax(150px,1.6fr) 110px 140px 140px 78px;padding:0 var(--dw-sp-3)}
  #panel #content.users-page .users-cell--who{gap:var(--dw-sp-2)}
}
@media (prefers-reduced-motion:reduce){
  #panel #content.users-page .users-cell--acts{opacity:1}
  #panel #content.users-page *{transition:none!important;animation:none!important}
}
/* ── barra de herramientas ── */
#panel #content.users-page .users-toolbar{display:flex;align-items:center;gap:var(--dw-sp-3);flex-wrap:wrap;padding:var(--dw-sp-3) var(--dw-sp-4);border-bottom:1px solid var(--dw-line);background:var(--dw-surface)}
#panel #content.users-page .users-chips{display:flex;gap:var(--dw-sp-2);flex-wrap:wrap}
#panel #content.users-page a.users-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm);text-decoration:none;white-space:nowrap;transition:border-color .15s ease,background .15s ease,color .15s ease}
#panel #content.users-page a.users-chip:hover{border-color:var(--dw-primary);color:var(--dw-ink)!important}
#panel #content.users-page a.users-chip.is-on{border-color:transparent;background:var(--dw-primary-soft);color:var(--dw-accent-ink)!important;font-weight:600}
#panel #content.users-page .users-toolbar-grow{flex:1 1 auto}
#panel #content.users-page .users-density-lbl{color:var(--dw-ink-3);font-size:var(--dw-fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#panel #content.users-page .users-density{display:inline-flex;padding:2px;border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill)}
#panel #content.users-page a.users-density-btn{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--dw-radius-pill);color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm);text-decoration:none;white-space:nowrap}
#panel #content.users-page a.users-density-btn.is-on{background:var(--dw-primary-soft);color:var(--dw-accent-ink)!important;font-weight:600}
#panel #content.users-page a.users-btn-primary{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--dw-radius-sm);background:var(--dw-primary);color:var(--dw-surface)!important;font-size:var(--dw-fs-sm);font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s ease}
#panel #content.users-page a.users-btn-primary:hover{background:var(--dw-primary-hover)}
#panel #content.users-page a.users-btn-primary .bi{font-size:13px}

/* ── barra contextual de seleccion ── */
#panel #content.users-page .users-selbar{align-items:center;gap:var(--dw-sp-4);padding:var(--dw-sp-2) var(--dw-sp-4);border-bottom:1px solid var(--dw-line);background:var(--dw-primary-soft);color:var(--dw-accent-ink);font-size:var(--dw-fs-sm)}
#panel #content.users-page .users-selbar b{font-family:var(--dw-font-mono);font-weight:700}
#panel #content.users-page .users-selbar a{display:inline-flex;align-items:center;gap:6px;color:var(--dw-accent-ink)!important;font-weight:600;text-decoration:none}
#panel #content.users-page .users-selbar a:hover{text-decoration:underline}

/* ── densidad ── */
#panel #content.users-page #list2.users-card{--u-row:56px}
#panel #content.users-page #list2.users-dense{--u-row:40px}
#panel #content.users-page .users-grid-row{height:var(--u-row)!important;min-height:var(--u-row)!important}
#panel #content.users-page .users-dense .users-avatar{flex:0 0 24px;width:24px;height:24px;font-size:var(--dw-fs-xs)}
#panel #content.users-page .users-dense .users-who-mail{display:none}
#panel #content.users-page .users-dense .users-mode-pill{height:22px}
#panel #content.users-page .users-dense .users-cell--who{gap:var(--dw-sp-2)}

/* ── esqueleto de carga ── */
#panel #content.users-page #users_list_loading{margin:0;padding:0}
#panel #content.users-page .users-skel-row{display:flex;align-items:center;gap:var(--dw-sp-3);height:var(--u-row,56px);padding:0 var(--dw-sp-4);border-bottom:1px solid var(--dw-line-2)}
#panel #content.users-page .users-skel{display:block;height:11px;border-radius:6px;background:var(--dw-line);animation:users-skel-pulse 1.4s ease-in-out infinite}
#panel #content.users-page .users-skel--circle{flex:0 0 32px;width:32px;height:32px;border-radius:var(--dw-radius-pill)}
@keyframes users-skel-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── vacio y error ── */
#panel #content.users-page .users-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dw-sp-2);padding:56px var(--dw-sp-4);text-align:center}
#panel #content.users-page .users-state-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--dw-radius-pill);background:var(--dw-line);color:var(--dw-ink-3);font-size:19px}
#panel #content.users-page .users-state--error .users-state-ic{background:var(--dw-danger-soft);color:var(--dw-danger)}
#panel #content.users-page .users-state-ttl{color:var(--dw-ink);font-size:var(--dw-fs-lg);font-weight:600}
#panel #content.users-page .users-state-txt{max-width:46ch;color:var(--dw-ink-2);font-size:var(--dw-fs-sm)}
#panel #content.users-page .users-state a{margin-top:var(--dw-sp-2);color:var(--dw-primary)!important;font-weight:600;text-decoration:none}
#panel #content.users-page .users-state a:hover{text-decoration:underline}

@media (max-width:1200px){
  #panel #content.users-page .users-density-lbl{display:none}
}
/* ── USERS LIST v2 END ── */

/* ── MASSIVE ACTIONS v2 — disparador y dialogo de acciones masivas ──
   Pantalla: users.php · Solo tokens del design system. */

/* Disparador "Acciones" del pie de la lista */
#panel #massive_action_link{vertical-align:middle}
#panel .dw-ma-trigger{display:inline-flex;align-items:center;gap:var(--dw-sp-2);height:30px;padding:0 var(--dw-sp-3);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);background:var(--dw-surface);color:var(--dw-ink)!important;font-family:var(--dw-font);font-size:var(--dw-fs-sm);font-weight:600;line-height:1;text-decoration:none!important;transition:background .15s ease,border-color .15s ease,color .15s ease}
#panel .dw-ma-trigger i{font-size:14px;line-height:1;color:var(--dw-primary)}
#panel .dw-ma-trigger:hover{background:var(--dw-primary-soft);border-color:var(--dw-primary);color:var(--dw-primary)!important}
#panel .dw-ma-trigger:active{background:var(--dw-primary-soft);border-color:var(--dw-primary-hover)}
#panel .dw-ma-trigger:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}

/* Marco Boxy del dialogo */
html body .boxy-wrapper.dw-ma-wrapper{border-radius:var(--dw-radius)!important;box-shadow:var(--dw-shadow-2)!important}
html body .boxy-wrapper.dw-ma-wrapper .title-bar{background:var(--dw-surface)!important;border-bottom:1px solid var(--dw-line)!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important}
html body .boxy-wrapper.dw-ma-wrapper .title-bar h2{color:var(--dw-ink-2)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important}
html body .boxy-wrapper.dw-ma-wrapper .title-bar .close{color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important}
html body .boxy-wrapper.dw-ma-wrapper .title-bar .close:hover{color:var(--dw-primary)!important}
html body .boxy-wrapper.dw-ma-wrapper .title-bar .close:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}
html body .boxy-wrapper.dw-ma-wrapper .boxy-inner{background:var(--dw-surface)!important}
html body .boxy-wrapper.dw-ma-wrapper .boxy-content{padding:var(--dw-sp-4)!important;background:var(--dw-surface)!important}

/* Cuerpo del dialogo */
#m_a_boxy.dw-ma{width:600px;max-width:calc(100vw - 64px);background:transparent!important;color:var(--dw-ink)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;color-scheme:normal}
#m_a_boxy.dw-ma *{box-sizing:border-box}
#m_a_boxy.dw-ma .dw-ma-title{display:flex;align-items:center;gap:var(--dw-sp-2);color:var(--dw-ink)!important;font-size:var(--dw-fs-lg);font-weight:700;line-height:1.2}
#m_a_boxy.dw-ma .dw-ma-title i{font-size:16px;color:var(--dw-primary)}
#m_a_boxy.dw-ma .dw-ma-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 var(--dw-sp-2);border-radius:var(--dw-radius-pill);background:var(--dw-primary-soft);color:var(--dw-primary);font-size:var(--dw-fs-sm);font-weight:700}
#m_a_boxy.dw-ma .dw-ma-sub{margin:var(--dw-sp-1) 0 var(--dw-sp-3);color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm);font-style:normal;line-height:1.4}
#m_a_boxy.dw-ma .dw-ma-users{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--dw-sp-2);min-height:44px;max-height:112px;overflow:auto;padding:var(--dw-sp-3);border:1px solid var(--dw-line);border-radius:var(--dw-radius-sm);background:var(--dw-bg)}
#m_a_boxy.dw-ma .dw-ma-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 var(--dw-sp-3);overflow:hidden;border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);background:var(--dw-surface);color:var(--dw-ink-2);font-size:var(--dw-fs-sm);white-space:nowrap;text-overflow:ellipsis}
#m_a_boxy.dw-ma .dw-ma-chip b{color:var(--dw-primary);font-family:var(--dw-font-mono);font-size:var(--dw-fs-sm);font-weight:600}
#m_a_boxy.dw-ma .dw-ma-sect{margin:var(--dw-sp-4) 0 var(--dw-sp-2);color:var(--dw-ink-2)!important;font-size:var(--dw-fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* Panel: rail de tabs + contenido */
#m_a_boxy.dw-ma .dw-ma-panel{display:flex;min-height:208px;overflow:hidden;border:1px solid var(--dw-line);border-radius:var(--dw-radius-sm);background:var(--dw-surface)}
#m_a_boxy.dw-ma .dw-ma-tabs{display:flex;flex-direction:column;flex:0 0 152px;gap:2px;padding:var(--dw-sp-2);border-right:1px solid var(--dw-line);background:var(--dw-bg)}
#m_a_boxy.dw-ma .dw-ma-tab{display:flex!important;align-items:center;gap:var(--dw-sp-2);padding:7px var(--dw-sp-3);border:0!important;border-radius:var(--dw-radius-sm);background:transparent!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm);font-weight:600;line-height:1.2;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}
#m_a_boxy.dw-ma .dw-ma-tab i{flex:0 0 14px;font-size:14px;opacity:.9}
#m_a_boxy.dw-ma .dw-ma-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m_a_boxy.dw-ma .dw-ma-tab:hover{background:var(--dw-line)!important;color:var(--dw-ink)!important}
#m_a_boxy.dw-ma .dw-ma-tab.is-active{background:var(--dw-primary-soft)!important;color:var(--dw-primary)!important}
#m_a_boxy.dw-ma .dw-ma-tab:focus-visible{outline:2px solid var(--dw-primary);outline-offset:-2px}
#m_a_boxy.dw-ma .dw-ma-content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
#m_a_boxy.dw-ma .dw-ma-fields-head{display:flex;align-items:center;flex:0 0 30px;height:30px;border-bottom:1px solid var(--dw-line);color:var(--dw-ink-2)!important;font-size:var(--dw-fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
#m_a_boxy.dw-ma .dw-ma-c1{flex:0 0 64px;text-align:center}
#m_a_boxy.dw-ma .dw-ma-c2{flex:1 1 auto;min-width:0;padding-left:var(--dw-sp-3)}
#m_a_boxy.dw-ma .dw-ma-scroll{flex:1 1 auto;min-height:0;max-height:208px;overflow:auto}
#m_a_boxy.dw-ma .dw-ma-pane{height:auto!important}

/* Filas de parametros */
#m_a_boxy.dw-ma .dw-ma-table{width:100%;border-collapse:collapse}
#m_a_boxy.dw-ma .dw-ma-table tr{background:transparent!important}
#m_a_boxy.dw-ma .dw-ma-table td{padding:9px var(--dw-sp-3);border:0!important;border-bottom:1px solid var(--dw-line)!important;background:transparent!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md);line-height:1.35;vertical-align:middle}
#m_a_boxy.dw-ma .dw-ma-table td:first-child{width:64px;padding:9px var(--dw-sp-2);text-align:center}
#m_a_boxy.dw-ma .dw-ma-table tr:last-child td{border-bottom:0!important}
#m_a_boxy.dw-ma .dw-ma-table tr:hover td{background:var(--dw-line-2)!important}
#m_a_boxy.dw-ma .dw-ma-table td img{vertical-align:middle}
#m_a_boxy.dw-ma .dw-ma-table td table td{padding:2px var(--dw-sp-1);border-bottom:0!important}
#m_a_boxy.dw-ma .disable_param{background-image:none!important;color:var(--dw-ink-3)!important;opacity:1}
#m_a_boxy.dw-ma .disable_param select,#m_a_boxy.dw-ma .disable_param input,#m_a_boxy.dw-ma .disable_param .chkbox{opacity:.55}

/* Controles */
#m_a_boxy.dw-ma select,#m_a_boxy.dw-ma input[type=text]{height:28px!important;padding:0 var(--dw-sp-2)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;background:var(--dw-surface)!important;color:var(--dw-ink)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important}
#m_a_boxy.dw-ma select:focus-visible,#m_a_boxy.dw-ma input[type=text]:focus-visible{border-color:var(--dw-primary)!important;outline:2px solid var(--dw-primary);outline-offset:1px}
#m_a_boxy.dw-ma input[type=checkbox]{width:15px;height:15px;accent-color:var(--dw-primary);cursor:pointer}
#m_a_boxy.dw-ma input[type=checkbox]:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}
#m_a_boxy.dw-ma input[disabled],#m_a_boxy.dw-ma select[disabled]{cursor:not-allowed}

/* Pie */
#m_a_boxy.dw-ma .dw-ma-foot{display:flex;justify-content:flex-end;gap:var(--dw-sp-2);margin-top:var(--dw-sp-4)}
#m_a_boxy.dw-ma .dw-ma-btn{display:inline-flex;align-items:center;gap:var(--dw-sp-2);height:34px;padding:0 var(--dw-sp-4);border:1px solid transparent;border-radius:var(--dw-radius-sm);font-family:var(--dw-font);font-size:var(--dw-fs-md);font-weight:600;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
#m_a_boxy.dw-ma .dw-ma-btn i{font-size:13px}
#m_a_boxy.dw-ma .dw-ma-btn--ghost{border-color:var(--dw-border);background:var(--dw-surface);color:var(--dw-ink-2)}
#m_a_boxy.dw-ma .dw-ma-btn--ghost:hover{border-color:var(--dw-ink-3);background:var(--dw-bg);color:var(--dw-ink)}
#m_a_boxy.dw-ma .dw-ma-btn--primary{background:var(--dw-primary);color:var(--dw-on-primary)}
#m_a_boxy.dw-ma .dw-ma-btn--primary:hover{background:var(--dw-primary-hover)}
#m_a_boxy.dw-ma .dw-ma-btn:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}

/* Modo oscuro */
:root[data-theme="dark"] #m_a_boxy.dw-ma{color-scheme:dark}
:root[data-theme="dark"] #m_a_boxy.dw-ma .dw-ma-btn--primary{background:var(--dw-accent);color:var(--dw-brand-black)}
:root[data-theme="dark"] #m_a_boxy.dw-ma .dw-ma-btn--primary:hover{background:var(--dw-bright-300)}
:root[data-theme="dark"] #m_a_boxy.dw-ma .dw-ma-chip b,:root[data-theme="dark"] #m_a_boxy.dw-ma .dw-ma-count,:root[data-theme="dark"] #m_a_boxy.dw-ma .dw-ma-title i{color:var(--dw-accent)}
:root[data-theme="dark"] #panel .dw-ma-trigger i{color:var(--dw-accent)}

/* 1366x768: dialogo mas bajo */
@media (max-height:800px){
  #m_a_boxy.dw-ma .dw-ma-users{max-height:76px}
  #m_a_boxy.dw-ma .dw-ma-scroll{max-height:170px}
  #m_a_boxy.dw-ma .dw-ma-panel{min-height:180px}
}
/* ── MASSIVE ACTIONS v2 END ── */

/* ── SIDENAV TOGGLE v1 — barra lateral opcional (mostrar/ocultar) ──
   Estado en <html data-sidenav="off">, persistido en localStorage('dw-sidenav').
   Solo tokens del design system. */
#panel .dw-content-topbar .dw-sidenav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;margin-right:var(--dw-sp-1);padding:0;border:1px solid var(--dw-border);border-radius:var(--dw-radius-sm);background:var(--dw-surface);color:var(--dw-ink-2);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
#panel .dw-content-topbar .dw-sidenav-toggle i{font-size:15px;line-height:1}
#panel .dw-content-topbar .dw-sidenav-toggle:hover{background:var(--dw-primary-soft);border-color:var(--dw-primary);color:var(--dw-primary)}
#panel .dw-content-topbar .dw-sidenav-toggle:active{background:var(--dw-primary-soft);border-color:var(--dw-primary-hover)}
#panel .dw-content-topbar .dw-sidenav-toggle:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}

html[data-sidenav="off"] #panel nav.dw-sidenav{display:none!important}
html[data-sidenav="off"] #panel{padding-left:0!important}
/* ── SIDENAV TOGGLE v1 END ── */

/* ── USER PROFILES v2 — perfiles, servicios de llamada y rutas ──
   Pantalla: userProfiles.php · Solo tokens del design system.
   Se apoya sobre la capa v1 existente; la especificidad repite la
   cadena "html body #panel #content.user-profiles-page" para ganarle. */html body #panel #content.user-profiles-page{--dw-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-ico-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5.2a3 3 0 016 0V7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='3.6' y='7' width='8.8' height='6.4' rx='1.6' fill='%23000'/%3E%3C/svg%3E");}

/* ── 1. Encabezado de columnas de la lista ── */html body #panel #content.user-profiles-page #list-left > table .title{color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;}html body #panel #content.user-profiles-page #list-left > table .title td{height:auto!important;padding:var(--dw-sp-3) var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;}

/* ── 2. Barra de titulo de los paneles de la derecha ── */html body #panel #content.user-profiles-page #list-right .subtitle2{color:var(--dw-ink)!important;background:var(--dw-bg)!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-sm)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;}html body #panel #content.user-profiles-page #list-right .subtitle2 td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink)!important;background:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-sm)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;}html body #panel #content.user-profiles-page #list-right .subtitle{color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;border-bottom:1px solid var(--dw-line)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;}html body #panel #content.user-profiles-page #list-right .subtitle td{height:auto!important;padding:var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-line)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;}

/* ── 3. Botones de accion de los encabezados ── */html body #panel #content.user-profiles-page .dw-profile-header-action{height:28px!important;min-height:0!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;transition:background .15s ease,border-color .15s ease,color .15s ease!important;}html body #panel #content.user-profiles-page .dw-profile-header-action:hover,
html body #panel #content.user-profiles-page .dw-profile-header-action:focus-visible{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-profiles-page #callservices_div .dw-profile-header-action,
html body #panel #content.user-profiles-page #routes_div .subtitle2 .dw-profile-header-action:last-child{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-profiles-page #callservices_div .dw-profile-header-action:hover,
html body #panel #content.user-profiles-page #routes_div .subtitle2 .dw-profile-header-action:last-child:hover{background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}:root[data-theme="dark"] body #panel #content.user-profiles-page #callservices_div .dw-profile-header-action,
:root[data-theme="dark"] body #panel #content.user-profiles-page #routes_div .subtitle2 .dw-profile-header-action:last-child{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}:root[data-theme="dark"] body #panel #content.user-profiles-page #callservices_div .dw-profile-header-action:hover,
:root[data-theme="dark"] body #panel #content.user-profiles-page #routes_div .subtitle2 .dw-profile-header-action:last-child:hover{background:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}

/* ── 4. Botones de icono (agregar perfil / borrar rutas) ── */html body #panel #content.user-profiles-page .dw-profile-icon-action{width:28px!important;height:28px!important;color:var(--dw-primary)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;transition:background .15s ease,border-color .15s ease!important;}html body #panel #content.user-profiles-page .dw-profile-icon-action:hover,
html body #panel #content.user-profiles-page .dw-profile-icon-action:focus-visible{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-profiles-page .dw-profile-delete-action{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;color:var(--dw-danger)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;}html body #panel #content.user-profiles-page .dw-profile-delete-action:hover,
html body #panel #content.user-profiles-page .dw-profile-delete-action:focus-visible{background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}

/* ── 5. Filas de la lista de perfiles ── */html body #panel #content.user-profiles-page #profiles_list td{padding:var(--dw-sp-2) var(--dw-sp-2)!important;font-size:var(--dw-fs-md)!important;}html body #panel #content.user-profiles-page #profiles_list td:first-child a{color:var(--dw-ink)!important;font-weight:600!important;text-decoration:none!important;}html body #panel #content.user-profiles-page #profiles_list tr:hover td:first-child a,
html body #panel #content.user-profiles-page #profiles_list .highlighted td:first-child a{color:var(--dw-primary)!important;}html body #panel #content.user-profiles-page #profiles_list td:nth-child(2){color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;white-space:nowrap!important;}html body #panel #content.user-profiles-page #profiles_list .highlighted td:first-child{box-shadow:inset 3px 0 0 var(--dw-primary)!important;}html body #panel #content.user-profiles-page #profiles_list td:last-child a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;border-radius:var(--dw-radius-sm)!important;vertical-align:middle!important;}html body #panel #content.user-profiles-page #profiles_list td:last-child a:hover{background:var(--dw-line)!important;}html body #panel #content.user-profiles-page #profiles_list td:last-child img{width:14px!important;height:14px!important;}

/* ── 6. Dias como chips (requiere :has) ── */
@supports selector(:has(*)){html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9){position:relative!important;padding:var(--dw-sp-2) 0!important;font-size:0!important;line-height:0!important;text-align:center!important;}html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9) img{display:none!important;}html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9)::before{content:"";display:inline-block;width:22px;height:22px;border:1px solid var(--dw-line);border-radius:var(--dw-radius-pill);background:transparent;vertical-align:middle;}html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9)::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;transform:translate(-50%,-50%);background:var(--dw-ink-3);-webkit-mask:var(--dw-ico-dash) center/11px no-repeat;mask:var(--dw-ico-dash) center/11px no-repeat;}html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9):has(img)::before{border-color:transparent!important;background:var(--dw-primary-soft)!important;}html body #panel #content.user-profiles-page #profiles_list table td:nth-child(n+3):nth-child(-n+9):has(img)::after{background:var(--dw-primary)!important;-webkit-mask-image:var(--dw-ico-check);mask-image:var(--dw-ico-check);}
}

/* ── 7. Servicios de llamada — deshacer el table-layout fijo que trunca ── */html body #panel #content.user-profiles-page #call_services table{table-layout:auto!important;width:100%!important;height:auto!important;}html body #panel #content.user-profiles-page #call_services form > table > tbody > tr > td{width:50%!important;padding:var(--dw-sp-2)!important;vertical-align:top!important;}html body #panel #content.user-profiles-page #call_services form table table{width:100%!important;max-width:400px!important;margin:0 auto!important;}html body #panel #content.user-profiles-page #call_services form table table td{padding:5px var(--dw-sp-1)!important;border:0!important;border-bottom:1px solid var(--dw-line)!important;white-space:nowrap!important;vertical-align:middle!important;}html body #panel #content.user-profiles-page #call_services form table table tr:last-child td{border-bottom:0!important;}html body #panel #content.user-profiles-page #call_services form table table td:first-child{width:auto!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-align:left!important;}html body #panel #content.user-profiles-page #call_services form table table td:nth-child(2){width:40px!important;text-align:center!important;}html body #panel #content.user-profiles-page #call_services form table table td:nth-child(3){color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;text-align:right!important;}html body #panel #content.user-profiles-page #call_services input[type="text"]{width:46px!important;height:26px!important;margin:0 4px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;text-align:center!important;}html body #panel #content.user-profiles-page #call_services input[type="text"]:focus-visible{border-color:var(--dw-primary)!important;outline:2px solid var(--dw-primary);outline-offset:1px;}html body #panel #content.user-profiles-page #call_services span{color:var(--dw-ink-2)!important;font-size:var(--dw-fs-xs)!important;}

/* ── 8. Interruptor de tres estados de los servicios ── */html body #panel #content.user-profiles-page #call_services .chkbox{position:relative!important;top:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:24px!important;margin:0!important;background-color:var(--dw-bg)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;cursor:pointer!important;box-sizing:border-box!important;transition:background-color .15s ease,border-color .15s ease!important;}html body #panel #content.user-profiles-page #call_services .chkbox::after{content:"";width:13px;height:13px;background:var(--dw-ink-3);-webkit-mask:var(--dw-ico-dash) center/13px no-repeat;mask:var(--dw-ico-dash) center/13px no-repeat;}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_enabled{background-color:var(--dw-success-soft)!important;border-color:var(--dw-success)!important;}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_enabled::after{background:var(--dw-success);-webkit-mask-image:var(--dw-ico-check);mask-image:var(--dw-ico-check);}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_disabled{background-color:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_disabled::after{background:var(--dw-danger);-webkit-mask-image:var(--dw-ico-x);mask-image:var(--dw-ico-x);}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_locked{background-color:var(--dw-warning-soft)!important;border-color:var(--dw-warning)!important;}html body #panel #content.user-profiles-page #call_services .chkbox.chkbox_locked::after{background:var(--dw-warning);-webkit-mask-image:var(--dw-ico-lock);mask-image:var(--dw-ico-lock);}

/* ── 9. Rutas: alinear arriba y estado vacio ── */html body #panel #content.user-profiles-page #list-right > :where(#routes_div,
#searchedroutes_div,
#blockedroutes_div) > table > tbody > tr > td{vertical-align:top!important;}html body #panel #content.user-profiles-page :where(#routes,
#searchedroutes,
#blockedroutes) table{height:auto!important;}html body #panel #content.user-profiles-page :where(#routes,
#searchedroutes,
#blockedroutes) td[colspan="6"]{padding:var(--dw-sp-6) var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;border-bottom:0!important;font-size:var(--dw-fs-sm)!important;text-align:center!important;}

/* ── 10. Paginado ── */html body #panel #content.user-profiles-page #list-paging-left,
html body #panel #content.user-profiles-page #list-paging-right{display:flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-1)!important;height:auto!important;min-height:32px!important;padding:var(--dw-sp-1) 0!important;background:transparent!important;border:0!important;box-shadow:none!important;line-height:1!important;}html body #panel #content.user-profiles-page #list-paging-left a,
html body #panel #content.user-profiles-page #list-paging-right a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:26px!important;height:26px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;}html body #panel #content.user-profiles-page #list-paging-left a:hover,
html body #panel #content.user-profiles-page #list-paging-right a:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-profiles-page #list-paging-left a.pagenav_selected,
html body #panel #content.user-profiles-page #list-paging-right a.pagenav_selected{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}:root[data-theme="dark"] body #panel #content.user-profiles-page #list-paging-left a.pagenav_selected,
:root[data-theme="dark"] body #panel #content.user-profiles-page #list-paging-right a.pagenav_selected{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
/* ── USER PROFILES v2 END ── */

/* ── USER EDITOR v2 — alta y edición de usuario (los 6 tabs) ──
   Pantalla: userUM.php (?action=new y ?action=modify)
   Solo tokens del design system. Todo acotado a #content.user-editor-page
   para no alterar las otras pantallas que comparten .tabs_menu / .tabcontent. */html body #panel #content.user-editor-page{padding:var(--dw-sp-4)!important;background:var(--dw-bg)!important;box-sizing:border-box;}html body #panel #content.user-editor-page .user-editor-form{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-shadow:var(--dw-shadow)!important;}

/* ── 1. Barra de tabs ── */html body #panel #content.user-editor-page .tabs_menu{position:static!important;flex:0 0 auto!important;width:auto!important;height:auto!important;padding:0 var(--dw-sp-3)!important;background:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-shadow:none!important;}html body #panel #content.user-editor-page .tabs_menu table{width:auto!important;margin:0!important;border-collapse:collapse!important;}html body #panel #content.user-editor-page .tabs_menu td{height:auto!important;padding:0!important;background:transparent!important;border:0!important;}html body #panel #content.user-editor-page .tabs_menu a{display:block!important;color:inherit!important;text-decoration:none!important;}html body #panel #content.user-editor-page .tabs_menu .tab{display:flex!important;align-items:center!important;justify-content:center!important;height:42px!important;min-width:0!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;text-align:center!important;text-transform:none!important;white-space:nowrap!important;cursor:pointer!important;transition:color .15s ease,border-color .15s ease,background .15s ease!important;}html body #panel #content.user-editor-page .tabs_menu .tab:hover{color:var(--dw-ink)!important;background:var(--dw-bg)!important;}html body #panel #content.user-editor-page .tabs_menu .tab.tab_selected,
html body #panel #content.user-editor-page .tabs_menu .tab_selected{color:var(--dw-primary)!important;background:transparent!important;border-bottom-color:var(--dw-primary)!important;}html body #panel #content.user-editor-page .tabs_menu a:focus-visible .tab{outline:2px solid var(--dw-primary);outline-offset:-2px;}

/* ── 2. Cuerpo de los tabs ── */html body #panel #content.user-editor-page .tabscontent_background{position:static!important;top:auto!important;bottom:auto!important;flex:1 1 auto!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;overflow:auto!important;background:var(--dw-surface)!important;border:0!important;border-radius:0!important;box-shadow:none!important;}html body #panel #content.user-editor-page .tabcontent{padding:var(--dw-sp-6) var(--dw-sp-4)!important;box-sizing:border-box;}html body #panel #content.user-editor-page .tabcontent > table{width:min(1180px,100%)!important;height:auto!important;margin:0 auto!important;border-collapse:collapse!important;}html body #panel #content.user-editor-page .tabcontent > table > tbody > tr > td{padding:0 var(--dw-sp-6)!important;vertical-align:top!important;}html body #panel #content.user-editor-page .tabcontent table table{max-width:none!important;border-collapse:separate!important;border-spacing:0!important;}

/* ── 3. Filas etiqueta / campo ── */html body #panel #content.user-editor-page .tabcontent td{color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;line-height:1.35!important;}html body #panel #content.user-editor-page .tabcontent td[align="right"]{padding:var(--dw-sp-2) var(--dw-sp-3) var(--dw-sp-2) 0!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;vertical-align:middle!important;white-space:nowrap!important;}html body #panel #content.user-editor-page .tabcontent td[align="left"]{padding:var(--dw-sp-2) 0!important;vertical-align:middle!important;}html body #panel #content.user-editor-page .tabcontent tr.separator_row1 td{height:var(--dw-sp-3)!important;padding:0!important;}

/* ── 4. Controles ── */html body #panel #content.user-editor-page .tabcontent :where(input[type="text"]:not([name$="passwdstrength"]),
input[type="password"],
input[type="number"],
select,
textarea){min-width:64px;min-height:32px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;box-sizing:border-box!important;transition:border-color .15s ease!important;}html body #panel #content.user-editor-page .tabcontent textarea{min-height:72px!important;padding:var(--dw-sp-2)!important;line-height:1.4!important;}html body #panel #content.user-editor-page .tabcontent :where(input,
select,
textarea):hover:not([disabled]){border-color:var(--dw-ink-3)!important;}html body #panel #content.user-editor-page .tabcontent :where(input,
select,
textarea):focus-visible{border-color:var(--dw-primary)!important;outline:2px solid var(--dw-primary);outline-offset:1px;}html body #panel #content.user-editor-page .tabcontent :where(input,
select,
textarea)[disabled]{color:var(--dw-ink-3)!important;background:var(--dw-bg)!important;cursor:not-allowed!important;}html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]{width:16px!important;height:16px!important;min-width:0;min-height:0!important;accent-color:var(--dw-primary);cursor:pointer;}html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}html body #panel #content.user-editor-page .tabcontent select{width:auto!important;min-width:120px!important;max-width:100%!important;padding-right:var(--dw-sp-4)!important;}

/* ── 5. Indicador de fortaleza de contraseña ── */html body #panel #content.user-editor-page .tabcontent input[name$="passwdstrength"]{width:76px!important;min-width:0;height:28px!important;min-height:0!important;margin-left:var(--dw-sp-2)!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;text-align:center!important;cursor:default!important;}

/* ── 6. Avatar ── */html body #panel #content.user-editor-page .tabcontent .avatar{width:100px!important;height:100px!important;background-position:center!important;background-repeat:no-repeat!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-shadow:var(--dw-shadow)!important;transition:border-color .15s ease!important;}html body #panel #content.user-editor-page .tabcontent .avatar:hover{border-color:var(--dw-primary)!important;}

/* ── 7. Pie de acciones ── */html body #panel #content.user-editor-page .tab_footer{position:static!important;top:auto!important;bottom:auto!important;flex:0 0 auto!important;width:auto!important;height:auto!important;min-height:52px!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;background:var(--dw-bg)!important;border:0!important;border-top:1px solid var(--dw-border)!important;border-radius:0!important;box-sizing:border-box;}html body #panel #content.user-editor-page .tab_footer table{width:100%!important;height:auto!important;}html body #panel #content.user-editor-page .tab_footer td{padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-md)!important;vertical-align:middle!important;}html body #panel #content.user-editor-page .tab_footer td:first-child{color:var(--dw-ink)!important;font-weight:600!important;}html body #panel #content.user-editor-page .tab_footer .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;min-width:104px!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-transform:none!important;cursor:pointer!important;transition:background .15s ease,border-color .15s ease,color .15s ease!important;}html body #panel #content.user-editor-page .tab_footer .boxybutton:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-editor-page .tab_footer td:last-child .boxybutton{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}html body #panel #content.user-editor-page .tab_footer td:last-child .boxybutton:hover{background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}:root[data-theme="dark"] body #panel #content.user-editor-page .tab_footer td:last-child .boxybutton{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}:root[data-theme="dark"] body #panel #content.user-editor-page .tab_footer td:last-child .boxybutton:hover{background:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}html body #panel #content.user-editor-page .tab_footer .boxybutton img{display:none!important;}

/* ── 8. Aviso superior ── */html body #panel #content.user-editor-page > #warning:not(:empty){display:block!important;margin:0 0 var(--dw-sp-3)!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border:1px solid var(--dw-danger)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-align:left!important;}html body #panel #content.user-editor-page > #warning:empty{display:none!important;}

/* ── 9. Interruptor de tres estados (.chkbox), igual que en Perfiles ── */html body #panel #content.user-editor-page{--dw-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-ico-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8h7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 7V5.2a3 3 0 016 0V7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='3.6' y='7' width='8.8' height='6.4' rx='1.6' fill='%23000'/%3E%3C/svg%3E");}html body #panel #content.user-editor-page .tabcontent .chkbox{position:relative!important;top:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:24px!important;margin:0 var(--dw-sp-1) 0 0!important;background-color:var(--dw-bg)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;cursor:pointer!important;box-sizing:border-box!important;vertical-align:middle!important;transition:background-color .15s ease,border-color .15s ease!important;}html body #panel #content.user-editor-page .tabcontent .chkbox::after{content:"";width:13px;height:13px;background:var(--dw-ink-3);-webkit-mask:var(--dw-ico-dash) center/13px no-repeat;mask:var(--dw-ico-dash) center/13px no-repeat;}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_enabled{background-color:var(--dw-success-soft)!important;border-color:var(--dw-success)!important;}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_enabled::after{background:var(--dw-success);-webkit-mask-image:var(--dw-ico-check);mask-image:var(--dw-ico-check);}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_disabled{background-color:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_disabled::after{background:var(--dw-danger);-webkit-mask-image:var(--dw-ico-x);mask-image:var(--dw-ico-x);}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_locked{background-color:var(--dw-warning-soft)!important;border-color:var(--dw-warning)!important;}html body #panel #content.user-editor-page .tabcontent .chkbox.chkbox_locked::after{background:var(--dw-warning);-webkit-mask-image:var(--dw-ico-lock);mask-image:var(--dw-ico-lock);}

/* ── 10. Panel: fila "permitir panel" que se superponia con la lista ── */html body #panel #content.user-editor-page #tabcontent_6 #webmon_enable{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;height:auto!important;min-height:32px!important;padding:var(--dw-sp-1) var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-line)!important;font-size:var(--dw-fs-sm)!important;text-align:left!important;}html body #panel #content.user-editor-page #tabcontent_6 #webmon_enable > .inline{width:auto!important;display:inline-flex!important;align-items:center!important;}html body #panel #content.user-editor-page #tabcontent_6 .row_big{padding:var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;font-style:normal!important;font-size:var(--dw-fs-sm)!important;}

/* ── 11. Casillas nativas: caja legible en claro y oscuro ── */
html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]{position:relative!important;appearance:none!important;-webkit-appearance:none!important;width:16px!important;height:16px!important;min-width:0;min-height:0!important;margin:0 var(--dw-sp-1) 0 0!important;padding:0!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:4px!important;box-shadow:none!important;cursor:pointer!important;vertical-align:middle!important;transition:background .15s ease,border-color .15s ease!important}
html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:hover:not([disabled]){border-color:var(--dw-primary)!important}
html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:checked{background:var(--dw-primary)!important;border-color:var(--dw-primary)!important}
html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:checked::after{content:"";position:absolute;top:1px;left:5px;width:4px;height:9px;border:solid var(--dw-on-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
html body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}
:root[data-theme="dark"] body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:checked{background:var(--dw-accent)!important;border-color:var(--dw-accent)!important}
:root[data-theme="dark"] body #panel #content.user-editor-page .tabcontent input[type="checkbox"]:checked::after{border-color:var(--dw-brand-black)}
/* ── USER EDITOR v2 END ── */

/* ── USER EDITOR v2.1 — restos heredados en Avanzada, Codecs y Panel ── */
/* ── 12. Cajas heredadas (.border2 / .border3 / .borderbot3) → tarjetas ── */
html body #panel #content.user-editor-page{--dw-ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M10.3 10.3L14 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 2.4h2.2l1.1 2.9-1.4 1a7.6 7.6 0 003.6 3.6l1-1.4 2.9 1.1v2.2c0 .6-.5 1.1-1.2 1C6.5 12.3 3.7 9.5 3.2 3.6c-.1-.7.4-1.2 1-1.2z' fill='%23000'/%3E%3C/svg%3E");--dw-ico-desktop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2.8' width='12' height='8.4' rx='1.3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6 13.6h4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
html body #panel #content.user-editor-page .tabcontent .border2,
html body #panel #content.user-editor-page .tabcontent .border3{height:auto!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;overflow:hidden!important;box-sizing:border-box!important;}
html body #panel #content.user-editor-page .tabcontent .borderbot3{border-bottom:1px solid var(--dw-line)!important;}
html body #panel #content.user-editor-page .tabcontent .bordertop3{border-top:1px solid var(--dw-line)!important;}
/* barra de scroll: la regla global la pinta verde oscuro con !important */
html body #panel #content.user-editor-page ::-webkit-scrollbar{width:8px!important;height:8px!important;}
html body #panel #content.user-editor-page ::-webkit-scrollbar-track{background:transparent!important;}
html body #panel #content.user-editor-page ::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border:2px solid transparent!important;background-clip:content-box!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.user-editor-page ::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;background-clip:content-box!important;}
html body #panel #content.user-editor-page .tabcontent *{scrollbar-width:thin;scrollbar-color:var(--dw-border) transparent;}

/* ── 13. div.subtitle heredado (barra verde-amarilla) → encabezado de tarjeta ── */
html body #panel #content.user-editor-page .tabcontent div.subtitle:not(#webmon_enable){display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;height:auto!important;min-height:32px!important;margin:0!important;padding:var(--dw-sp-1) var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.25!important;text-transform:uppercase!important;text-shadow:none!important;}

/* ── 14. Avanzada: ANIs permitidos / bloqueados ── */
html body #panel #content.user-editor-page #tabcontent_3 > table > tbody > tr > td + td > table{width:min(340px,100%)!important;margin:0 0 var(--dw-sp-4)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists{width:min(340px,100%)!important;height:auto!important;padding:0!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists table{width:100%!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists > table > tbody > tr > td{width:50%!important;padding:0!important;vertical-align:top!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists > table > tbody > tr > td:first-child{border-right:1px solid var(--dw-line)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td{height:32px!important;padding:0 var(--dw-sp-2)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;border-radius:var(--dw-radius-pill)!important;text-decoration:none!important;transition:background .15s ease!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td a:hover{background:var(--dw-surface)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td a img{display:none!important;}
html body #panel #content.user-editor-page #tabcontent_3 #userlists tr.subtitle > td a::after{content:"";width:12px;height:12px;background:var(--dw-primary);-webkit-mask:var(--dw-ico-plus) center/12px no-repeat;mask:var(--dw-ico-plus) center/12px no-repeat;}
html body #panel #content.user-editor-page #tabcontent_3 #whitelist,
html body #panel #content.user-editor-page #tabcontent_3 #blacklist{height:auto!important;min-height:104px!important;max-height:216px!important;padding:var(--dw-sp-1) 0!important;overflow:auto!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-sm)!important;text-align:left!important;}
html body #panel #content.user-editor-page #tabcontent_3 #whitelist .row,
html body #panel #content.user-editor-page #tabcontent_3 #blacklist .row{height:auto!important;min-height:26px!important;padding:0 var(--dw-sp-3)!important;line-height:26px!important;}
html body #panel #content.user-editor-page #tabcontent_3 #whitelist .row:hover,
html body #panel #content.user-editor-page #tabcontent_3 #blacklist .row:hover{background:var(--dw-primary-soft)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #whitelist .row_big,
html body #panel #content.user-editor-page #tabcontent_3 #blacklist .row_big{height:auto!important;padding:var(--dw-sp-4) var(--dw-sp-2)!important;color:var(--dw-ink-3)!important;font-style:normal!important;font-size:var(--dw-fs-sm)!important;line-height:1.4!important;text-align:center!important;}

/* ── 15. Avanzada: bloque "equipo asociado" como tarjeta ── */
html body #panel #content.user-editor-page #tabcontent_3 div.subtitle{justify-content:center!important;}
@supports selector(:has(*)){
html body #panel #content.user-editor-page #tabcontent_3 td:has(> div.subtitle){display:block!important;width:min(340px,100%)!important;padding:0!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;overflow:hidden!important;box-sizing:border-box!important;}
}
html body #panel #content.user-editor-page #tabcontent_3 #iad_user_loading,
html body #panel #content.user-editor-page #tabcontent_3 #select_iad,
html body #panel #content.user-editor-page #tabcontent_3 #iad_info{padding:var(--dw-sp-3)!important;box-sizing:border-box!important;}
html body #panel #content.user-editor-page #tabcontent_3 #select_iad > div{margin:0 0 var(--dw-sp-2)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #select_iad > div:last-child{margin:0!important;}
html body #panel #content.user-editor-page #tabcontent_3 #select_iad .gray{color:var(--dw-ink-2)!important;font-style:normal!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.user-editor-page #tabcontent_3 #select_iad a,
html body #panel #content.user-editor-page #tabcontent_3 #iad_info a{color:var(--dw-primary)!important;font-weight:600!important;text-decoration:none!important;}
html body #panel #content.user-editor-page #tabcontent_3 #select_iad a:hover,
html body #panel #content.user-editor-page #tabcontent_3 #iad_info a:hover{text-decoration:underline!important;}
html body #panel #content.user-editor-page #tabcontent_3 #iad_info .border3{border-radius:var(--dw-radius-sm)!important;}

/* ── 16. Codecs: listas sin recortes y bloque DTMF/FAX alineado ── */
html body #panel #content.user-editor-page #tabcontent_4 table[width="65%"]{width:100%!important;max-width:720px!important;margin:0 auto!important;}
html body #panel #content.user-editor-page #tabcontent_4 table[width="65%"] > tbody > tr > td{padding:0 var(--dw-sp-3) var(--dw-sp-4)!important;vertical-align:top!important;}
html body #panel #content.user-editor-page #tabcontent_4 tr[height="100"]{height:auto!important;}
html body #panel #content.user-editor-page #tabcontent_4 .border2{display:block!important;width:100%!important;max-width:320px!important;height:auto!important;min-height:0!important;margin:0 auto!important;padding:0!important;text-align:left!important;}
html body #panel #content.user-editor-page #tabcontent_4 .border2 > table{width:100%!important;}
html body #panel #content.user-editor-page #tabcontent_4 .border2 td{padding:0!important;}
html body #panel #content.user-editor-page #tabcontent_4 .border2 tr.subtitle > td{height:34px!important;padding:0 var(--dw-sp-3)!important;text-align:center!important;}
html body #panel #content.user-editor-page #tabcontent_4 .border2 div[style*="overflow:auto"]{width:100%!important;height:auto!important;min-height:132px!important;max-height:236px!important;overflow:auto!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs > div,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs > div,
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs .row,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs .row{display:flex!important;align-items:center!important;height:auto!important;min-height:32px!important;padding:0 var(--dw-sp-2)!important;border-bottom:1px solid var(--dw-line-2)!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;line-height:1.3!important;text-align:left!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs > div:last-child,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs > div:last-child{border-bottom:0!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs > div:hover,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs > div:hover{background:var(--dw-primary-soft)!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs .inline,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs .inline{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;transition:background .15s ease!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a:hover,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a:hover{background:var(--dw-surface)!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a:focus-visible,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs table,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs table{width:100%!important;}
html body #panel #content.user-editor-page #tabcontent_4 tr[height="100"] .border2{padding:var(--dw-sp-3) var(--dw-sp-4)!important;}
html body #panel #content.user-editor-page #tabcontent_4 tr[height="100"] .border2 td{padding:var(--dw-sp-1) 0!important;}
html body #panel #content.user-editor-page #tabcontent_4 tr[height="100"] .border2 td[align="right"]{padding-right:var(--dw-sp-3)!important;}

/* ── 17. Panel: buscador, sub-pestañas y listas ── */
html body #panel #content.user-editor-page #tabcontent_6 > table{width:100%!important;}
html body #panel #content.user-editor-page #tabcontent_6 > table > tbody > tr > td{padding:0 var(--dw-sp-4)!important;}
html body #panel #content.user-editor-page #tabcontent_6 .borderbot3.bold{height:auto!important;margin:0 0 var(--dw-sp-3)!important;padding:0 0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;}
html body #panel #content.user-editor-page #tabcontent_6 #search_users{width:100%!important;max-width:260px!important;height:34px!important;line-height:normal!important;}
@supports selector(:has(*)){
html body #panel #content.user-editor-page #tabcontent_6 div:has(> #search_users){display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;margin:0 0 var(--dw-sp-3)!important;text-align:left!important;}
}
html body #panel #content.user-editor-page #tabcontent_6 img[onclick^="searchUsersToMonitor"]{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E")!important;box-sizing:border-box!important;flex:0 0 auto!important;width:34px!important;height:34px!important;padding:0!important;background:var(--dw-primary)!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;cursor:pointer!important;vertical-align:middle!important;transition:background .15s ease,border-color .15s ease!important;}
html body #panel #content.user-editor-page #tabcontent_6 img[onclick^="searchUsersToMonitor"]:hover{background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.user-editor-page #tabcontent_6 img[onclick^="searchUsersToMonitor"]{background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
@supports selector(:has(*)){
html body #panel #content.user-editor-page #tabcontent_6 div:has(> #search_users)::after{content:"";flex:0 0 auto;width:18px;height:18px;margin-left:-26px;background:var(--dw-on-primary);-webkit-mask:var(--dw-ico-search) center/18px no-repeat;mask:var(--dw-ico-search) center/18px no-repeat;pointer-events:none;}
:root[data-theme="dark"] body #panel #content.user-editor-page #tabcontent_6 div:has(> #search_users)::after{background:var(--dw-brand-black);}
}
/* sub-pestañas Teléfono / Desktop como control segmentado */
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone,
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;width:auto!important;min-width:124px!important;height:34px!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important;transition:color .15s ease,background .15s ease,border-color .15s ease!important;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone:hover,
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop:hover{color:var(--dw-ink)!important;border-color:var(--dw-ink-3)!important;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone.dw-subtab-on,
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop.dw-subtab-on{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone.dw-subtab-on,
:root[data-theme="dark"] body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop.dw-subtab-on{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone img,
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop img{display:none!important;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone::before,
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop::before{content:"";flex:0 0 auto;width:16px;height:16px;background:currentColor;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_phone::before{-webkit-mask:var(--dw-ico-phone) center/16px no-repeat;mask:var(--dw-ico-phone) center/16px no-repeat;}
html body #panel #content.user-editor-page #tabcontent_6 #su_tab_desktop::before{-webkit-mask:var(--dw-ico-desktop) center/16px no-repeat;mask:var(--dw-ico-desktop) center/16px no-repeat;}
@supports selector(:has(*)){
html body #panel #content.user-editor-page #tabcontent_6 div:has(> #su_tab_phone){display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;height:auto!important;margin:0 0 var(--dw-sp-3)!important;padding:0!important;border:0!important;line-height:normal!important;}
}
/* listas monitoreadas y resultados de búsqueda */
html body #panel #content.user-editor-page #tabcontent_6 .border3{width:auto!important;height:auto!important;min-height:132px!important;max-height:264px!important;margin:0!important;overflow:auto!important;text-align:left!important;}
html body #panel #content.user-editor-page #tabcontent_6 #webmon_enable{position:sticky!important;top:0!important;z-index:1!important;}
html body #panel #content.user-editor-page #tabcontent_6 .row_big{height:auto!important;line-height:1.4!important;text-align:center!important;}
html body #panel #content.user-editor-page #tabcontent_6 #users_found .row,
html body #panel #content.user-editor-page #tabcontent_6 #webmon_list .row,
html body #panel #content.user-editor-page #tabcontent_6 #su_tabcont_phone .row{height:auto!important;min-height:30px!important;padding:0 var(--dw-sp-3)!important;border-bottom:1px solid var(--dw-line-2)!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;line-height:30px!important;text-align:left!important;}
html body #panel #content.user-editor-page #tabcontent_6 #users_found .row:hover,
html body #panel #content.user-editor-page #tabcontent_6 #webmon_list .row:hover,
html body #panel #content.user-editor-page #tabcontent_6 #su_tabcont_phone .row:hover{background:var(--dw-primary-soft)!important;}

/* ── 18. tr.subtitle dentro del editor: mismo tratamiento en claro y oscuro ── */
html body #panel #content.user-editor-page .tabcontent tr.subtitle > td{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-image:none!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.2!important;text-transform:uppercase!important;text-shadow:none!important;white-space:nowrap!important;}

/* ── USER EDITOR v2.1 END ── */

/* ── IVR WORKSPACE v1 — Preatendedor/Colas, Nuevo Preatendedor, Nueva Cola, Feriados y Modos ──
 * Solo CSS. No cambia HTML, IDs, formularios, eventos ni rutas.
 * Especificidad: se repite html body #panel #content.<clase> porque ivr.php y
 * ivrHolidays.php traen un <style> en linea que gana por orden de documento.
 * Nunca :where() (especificidad cero).
 */

/* ── 0. Iconos (mascaras SVG para recolorear los PNG heredados) ── */
html body #panel #content.ivr-layout,
html body #panel #content.ivr-holidays-page,
html body #panel #content.ivr-modes-page{--dw-ico-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-ico-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.4 2.2a1.45 1.45 0 012.05 2.05l-7.3 7.3-2.75.7.7-2.75 7.3-7.3z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2L12.8 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-ico-tree:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5.6' y='1.4' width='4.8' height='3.2' rx='1' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='1.4' y='11.4' width='4.4' height='3.2' rx='1' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='10.2' y='11.4' width='4.4' height='3.2' rx='1' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 4.6v2.6M3.6 11.4V8.2h8.8v3.2' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ico-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M2.2 6.6h11.6M5.6 2v2.4M10.4 2v2.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");}

/* ── 1. Encabezado de columnas de las listas ── */
html body #panel #content.ivr-layout #list-left #ivr_table tr.title,
html body #panel #content.ivr-modes-page #list-left > table tr.title,
html body #panel #content.ivr-modes-page #list-right > table tr.title{height:auto!important;line-height:normal!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
html body #panel #content.ivr-layout #list-left #ivr_table tr.title > td,
html body #panel #content.ivr-modes-page #list-left > table tr.title > td,
html body #panel #content.ivr-modes-page #list-right > table tr.title > td{height:auto!important;padding:var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;line-height:1.2!important;text-transform:uppercase!important;text-shadow:none!important;white-space:nowrap!important;}
/* El titulo del formulario de Modos es un encabezado de tarjeta, no una columna. */
html body #panel #content.ivr-modes-page #list-right > table tr.title > td#form_title{color:var(--dw-ink)!important;font-size:var(--dw-fs-sm)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;}

/* ── 2. Filas de las listas: sin cebra, jerarquia por hover ── */
html body #panel #content.ivr-layout #ivrs_list #message > table,
html body #panel #content.ivr-modes-page #modes_list #message > table{width:100%!important;border-collapse:collapse!important;}
html body #panel #content.ivr-layout #ivrs_list tr.row1,
html body #panel #content.ivr-layout #ivrs_list tr.row2,
html body #panel #content.ivr-modes-page #modes_list tr.row1,
html body #panel #content.ivr-modes-page #modes_list tr.row2{height:auto!important;line-height:normal!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;transition:background-color .15s ease!important;}
html body #panel #content.ivr-layout #ivrs_list tr > td,
html body #panel #content.ivr-modes-page #modes_list tr > td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink)!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-md)!important;line-height:1.3!important;vertical-align:middle!important;}
html body #panel #content.ivr-layout #ivrs_list tr.row1:hover,
html body #panel #content.ivr-layout #ivrs_list tr.row2:hover,
html body #panel #content.ivr-modes-page #modes_list tr.row1:hover,
html body #panel #content.ivr-modes-page #modes_list tr.row2:hover{background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #ivrs_list tr.row1:hover,
:root[data-theme="dark"] body #panel #content.ivr-layout #ivrs_list tr.row2:hover,
:root[data-theme="dark"] body #panel #content.ivr-modes-page #modes_list tr.row1:hover,
:root[data-theme="dark"] body #panel #content.ivr-modes-page #modes_list tr.row2:hover{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
/* Nombre: tinta normal, no verde de marca (regla de accesibilidad del DS). */
html body #panel #content.ivr-layout #ivrs_list tr > td:first-child > a{color:var(--dw-ink)!important;font-weight:600!important;text-decoration:none!important;}
html body #panel #content.ivr-layout #ivrs_list tr:hover > td:first-child > a{color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #ivrs_list tr:hover > td:first-child > a{color:var(--dw-accent)!important;}
html body #panel #content.ivr-layout #ivrs_list tr > td:first-child > a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;border-radius:var(--dw-radius-sm);}
/* Reparto de columnas: a 1366 el 20% cortaba "Preatendedor". */
html body #panel #content.ivr-layout #list-left #ivr_table tr > td:nth-child(1),
html body #panel #content.ivr-layout #ivrs_list tr > td:nth-child(1){width:52%!important;}
html body #panel #content.ivr-layout #list-left #ivr_table tr > td:nth-child(2),
html body #panel #content.ivr-layout #ivrs_list tr > td:nth-child(2){width:28%!important;}
html body #panel #content.ivr-layout #list-left #ivr_table tr > td:nth-child(3),
html body #panel #content.ivr-layout #ivrs_list tr > td:nth-child(3){width:20%!important;}
/* Tipo como etiqueta, para distinguir Cola de Preatendedor sin depender del color. */
html body #panel #content.ivr-layout #ivrs_list tr > td:nth-child(2){color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;}

/* ── 3. Botones de icono heredados (edit.png, Cross, config, plus) ── */
html body #panel #content.ivr-layout #ivrs_list tr > td:last-child > a,
html body #panel #content.ivr-modes-page #modes_list tr > td:last-child > a,
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer,
html body #panel #content.ivr-layout .subtitle td > a,
html body #panel #content.ivr-modes-page #list-left > table tr.title td > a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;margin:0!important;padding:0!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;vertical-align:middle!important;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.ivr-layout #ivrs_list tr > td:last-child > a > img,
html body #panel #content.ivr-modes-page #modes_list tr > td:last-child > a > img,
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer > img,
html body #panel #content.ivr-layout .subtitle td > a > img,
html body #panel #content.ivr-modes-page #list-left > table tr.title td > a > img{content:var(--dw-ico-blank)!important;display:block!important;width:16px!important;height:16px!important;margin:0!important;border:0!important;background-color:var(--dw-ink-2)!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px 16px;mask-size:16px 16px;transition:background-color .15s ease!important;}
html body #panel #content.ivr-layout img[src*="edit.png"],
html body #panel #content.ivr-holidays-page img[src*="edit.png"],
html body #panel #content.ivr-modes-page img[src*="edit.png"],
html body #panel #content.ivr-modes-page img[src*="config"]{-webkit-mask-image:var(--dw-ico-pencil)!important;mask-image:var(--dw-ico-pencil)!important;}
html body #panel #content.ivr-layout img[src*="Cross"],
html body #panel #content.ivr-holidays-page img[src*="Cross"],
html body #panel #content.ivr-modes-page img[src*="Cross"]{-webkit-mask-image:var(--dw-ico-x)!important;mask-image:var(--dw-ico-x)!important;}
html body #panel #content.ivr-layout img[src*="plus_icon"],
html body #panel #content.ivr-holidays-page img[src*="plus_icon"],
html body #panel #content.ivr-modes-page img[src*="plus_icon"]{-webkit-mask-image:var(--dw-ico-plus)!important;mask-image:var(--dw-ico-plus)!important;}
/* Estados: editar/configurar vira a primario, borrar a peligro. */
html body #panel #content.ivr-layout tr > td:last-child > a:hover,
html body #panel #content.ivr-modes-page tr > td:last-child > a:hover,
html body #panel #content.ivr-layout .subtitle td > a:hover,
html body #panel #content.ivr-modes-page #list-left > table tr.title td > a:hover,
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer:hover{background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout tr > td:last-child > a:hover > img,
html body #panel #content.ivr-modes-page tr > td:last-child > a:hover > img,
html body #panel #content.ivr-layout .subtitle td > a:hover > img,
html body #panel #content.ivr-modes-page #list-left > table tr.title td > a:hover > img,
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer:hover > img{background-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout tr > td:last-child > a:hover > img,
:root[data-theme="dark"] body #panel #content.ivr-modes-page tr > td:last-child > a:hover > img,
:root[data-theme="dark"] body #panel #content.ivr-layout .subtitle td > a:hover > img,
:root[data-theme="dark"] body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer:hover > img{background-color:var(--dw-accent)!important;}
html body #panel #content.ivr-layout tr > td:last-child > a:hover > img[src*="Cross"],
html body #panel #content.ivr-modes-page tr > td:last-child > a:hover > img[src*="Cross"],
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer:hover > img[src*="Cross"]{background-color:var(--dw-danger)!important;}
html body #panel #content.ivr-layout tr > td:last-child > a:focus-visible,
html body #panel #content.ivr-modes-page tr > td:last-child > a:focus-visible,
html body #panel #content.ivr-layout .subtitle td > a:focus-visible,
html body #panel #content.ivr-modes-page #list-left > table tr.title td > a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}

/* ── 4. Estados vacios y cargando ── */
html body #panel #content.ivr-layout #ivrs_list #message > table > tbody > tr > td[colspan]:not([colspan="1"]),
html body #panel #content.ivr-modes-page #modes_list #message > table > tbody > tr > td[colspan],
html body #panel #content.ivr-layout #ivrnumbers td[colspan],
html body #panel #content.ivr-layout #ivraudios td[colspan],
html body #panel #content.ivr-layout #ivraudios_2 td[colspan]{padding:var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;border-bottom:0!important;font-size:var(--dw-fs-sm)!important;font-style:normal!important;text-align:center!important;}
html body #panel #content.ivr-layout #ivrnumbers > table > tbody > tr:first-child > td[colspan],
html body #panel #content.ivr-layout #ivraudios > table > tbody > tr:first-child > td[colspan],
html body #panel #content.ivr-layout #ivraudios_2 > table > tbody > tr:first-child > td[colspan],
html body #panel #content.ivr-layout #ivrs_list #message > table > tbody > tr:first-child > td[colspan],
html body #panel #content.ivr-modes-page #modes_list #message > table > tbody > tr:first-child > td[colspan]{padding:0!important;font-size:0!important;line-height:0!important;}
html body #panel #content.ivr-holidays-page #holidays > .ha_center.italic.gray{margin:0!important;padding:var(--dw-sp-8) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;font-style:normal!important;text-align:center!important;}

/* Estado vacio de Feriados centrado en la tarjeta. */
@supports selector(:has(*)) {
html body #panel #content.ivr-holidays-page #holidays:has(> .ha_center.italic.gray){display:flex!important;align-items:center!important;justify-content:center!important;}
}

/* ── 5. Solapas del panel derecho: mismo control en claro y oscuro ──
 * OJO: no se declara `display` en .shorttab. El JS de la pagina hace
 * $('#tab_3').css('display') y escribe 'block'/'none'; forzar display aqui
 * rompe el mostrado condicional de las solapas Opciones/Audios/Avanzada. */
html body #panel #content.ivr-layout .short_right_tabs_menu{height:40px!important;min-height:40px!important;padding:0 var(--dw-sp-3)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-bottom:1px solid var(--dw-border)!important;border-radius:var(--dw-radius) var(--dw-radius) 0 0!important;box-shadow:none!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu table{width:auto!important;height:100%!important;margin:0!important;border-collapse:collapse!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu td{height:100%!important;padding:0!important;background:transparent!important;border:0!important;vertical-align:middle!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu a{display:block!important;height:100%!important;color:inherit!important;text-decoration:none!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab{float:left!important;min-width:0!important;height:39px!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;line-height:37px!important;text-align:center!important;white-space:nowrap!important;cursor:pointer!important;box-sizing:border-box!important;transition:color .15s ease,border-color .15s ease,background-color .15s ease!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab:hover,
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab.tab_over{color:var(--dw-ink)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-bottom-color:var(--dw-border)!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab_active,
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab_active:hover{color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;border-bottom:2px solid var(--dw-primary)!important;font-weight:700!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tabs_menu .shorttab{color:var(--dw-ink-2)!important;background:transparent!important;background-color:transparent!important;border:0!important;border-bottom:2px solid transparent!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tabs_menu .shorttab:hover,
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tabs_menu .shorttab.tab_over{color:var(--dw-ink)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-bottom-color:var(--dw-border)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tabs_menu .shorttab_active,
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tabs_menu .shorttab_active:hover{color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;border:0!important;border-bottom:2px solid var(--dw-accent)!important;}

/* ── 6. Cuerpo del panel derecho: contenido arriba, sin huecos verticales ── */
html body #panel #content.ivr-layout .short_right_tabscontent_background{background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-top:0!important;border-bottom:0!important;box-shadow:none!important;}
html body #panel #content.ivr-layout .short_right_tabscontent_background .tabcontent{min-height:0!important;padding:var(--dw-sp-6) var(--dw-sp-4)!important;box-sizing:border-box!important;}
html body #panel #content.ivr-layout .tabcontent > table{width:100%!important;height:auto!important;padding:0!important;border-collapse:collapse!important;}
html body #panel #content.ivr-layout .tabcontent > table > tbody > tr > td{height:auto!important;padding:0!important;vertical-align:top!important;}
html body #panel #content.ivr-layout .tabcontent #ivrtype1_basic,
html body #panel #content.ivr-layout .tabcontent #ivrtype2_basic,
html body #panel #content.ivr-layout .tabcontent #ivrtype1_advanced,
html body #panel #content.ivr-layout .tabcontent #ivrtype2_advanced,
html body #panel #content.ivr-layout .tabcontent #ivrtype1_audio,
html body #panel #content.ivr-layout .tabcontent #ivrtype2_audio{width:100%!important;height:auto!important;}

/* ── 7. Filas etiqueta / campo del panel derecho ── */
html body #panel #content.ivr-layout .tabcontent form > table{width:min(560px,100%)!important;margin:0 auto!important;border-collapse:separate!important;border-spacing:0!important;table-layout:auto!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td{padding:var(--dw-sp-2) 0!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;vertical-align:middle!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="right"]{width:44%!important;padding-right:var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;font-weight:600!important;white-space:nowrap!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="left"]{width:56%!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[colspan="2"]{padding-top:var(--dw-sp-4)!important;text-align:center!important;}

/* ── 8. Controles ── */
html body #panel #content.ivr-layout .tabcontent input[type="text"]:not([readonly]),
html body #panel #content.ivr-layout .tabcontent select,
html body #panel #content.ivr-modes-page #mode_form input[type="text"]{width:auto!important;min-width:0!important;height:34px!important;min-height:34px!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;box-sizing:border-box!important;transition:border-color .15s ease!important;}
html body #panel #content.ivr-layout .tabcontent input[type="text"]:not([readonly]):hover,
html body #panel #content.ivr-layout .tabcontent select:hover,
html body #panel #content.ivr-modes-page #mode_form input[type="text"]:hover{border-color:var(--dw-ink-3)!important;}
html body #panel #content.ivr-layout .tabcontent input[type="text"]:not([readonly]):focus-visible,
html body #panel #content.ivr-layout .tabcontent select:focus-visible,
html body #panel #content.ivr-modes-page #mode_form input[type="text"]:focus-visible{border-color:var(--dw-primary)!important;outline:2px solid var(--dw-primary);outline-offset:1px;}
html body #panel #content.ivr-layout .tabcontent select{min-width:150px!important;padding-right:var(--dw-sp-2)!important;}
html body #panel #content.ivr-layout .tabcontent input[name="Description"]{width:100%!important;max-width:280px!important;}
html body #panel #content.ivr-layout .tabcontent input[type="text"][readonly]{height:34px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border:1px solid var(--dw-line)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;box-sizing:border-box!important;}
/* Estos tres son etiquetas de estado, no campos: mas especifico que la regla
 * de readonly de arriba, que gana por cantidad de atributos y no por orden. */
html body #panel #content.ivr-layout .tabcontent input[type="text"][readonly][id="qfw_status"],
html body #panel #content.ivr-layout .tabcontent input[type="text"][readonly][id="extension"],
html body #panel #content.ivr-layout .tabcontent input[type="text"][id="extension"],
html body #panel #content.ivr-layout .tabcontent input[type="text"][name="extension_name"]{height:auto!important;padding:0 0 0 var(--dw-sp-2)!important;background:transparent!important;border:0!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-layout .tabcontent :is(input,select)[disabled],
html body #panel #content.ivr-modes-page #mode_form :is(input,select)[disabled]{color:var(--dw-ink-3)!important;background:var(--dw-bg)!important;border-color:var(--dw-line)!important;cursor:not-allowed!important;opacity:1!important;}
/* Casillas nativas legibles en los dos temas. */
html body #panel #content.ivr-layout .tabcontent input[type="checkbox"],
html body #panel #content.ivr-modes-page #mode_form input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px!important;margin:0!important;accent-color:var(--dw-primary);vertical-align:middle!important;cursor:pointer!important;}
html body #panel #content.ivr-layout .tabcontent input[type="checkbox"]:focus-visible,
html body #panel #content.ivr-modes-page #mode_form input[type="checkbox"]:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
:root[data-theme="dark"] body #panel #content.ivr-layout .tabcontent input[type="checkbox"],
:root[data-theme="dark"] body #panel #content.ivr-modes-page #mode_form input[type="checkbox"]{accent-color:var(--dw-accent);}
/* "Modo: Configurar" pasa a leerse como accion. */
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="left"] > a{display:inline-flex!important;align-items:center!important;height:28px!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;transition:background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="left"] > a:hover{background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="left"] > a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
:root[data-theme="dark"] body #panel #content.ivr-layout .tabcontent form > table > tbody > tr > td[align="left"] > a{color:var(--dw-accent)!important;}

/* ── 9. Barras .subtitle heredadas (lima) → encabezado de tarjeta ── */
html body #panel #content.ivr-layout .tabcontent tr.subtitle,
html body #panel #content.ivr-layout #assignedoptions tr.subtitle{height:auto!important;line-height:normal!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;font-weight:600!important;}
html body #panel #content.ivr-layout .tabcontent tr.subtitle > td,
html body #panel #content.ivr-layout #assignedoptions tr.subtitle > td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-align:left!important;text-transform:uppercase!important;}
html body #panel #content.ivr-layout .tabcontent tr.subtitle > td:last-child:not(:first-child){width:40px!important;padding-right:var(--dw-sp-2)!important;text-align:right!important;}
/* Los bloques que esas barras encabezan pasan a ser tarjetas. */
html body #panel #content.ivr-layout #numbersdiv > td{padding-top:var(--dw-sp-6)!important;}
html body #panel #content.ivr-layout #numbersdiv > td > table,
html body #panel #content.ivr-layout #newoption > table:first-child,
html body #panel #content.ivr-layout #newaudio > table,
html body #panel #content.ivr-layout #newaudio_2 > table,
html body #panel #content.ivr-layout #audiosdiv > td > table,
html body #panel #content.ivr-layout #audiosdiv_2 > td > table{width:100%!important;border-collapse:collapse!important;}
html body #panel #content.ivr-layout #ivrnumbers,
html body #panel #content.ivr-layout #ivraudios,
html body #panel #content.ivr-layout #ivraudios_2{width:100%!important;height:auto!important;min-height:120px!important;background:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-sizing:border-box!important;}
html body #panel #content.ivr-layout html body #panel #content.ivr-layout #assignedoptions{width:100%!important;height:auto!important;min-height:64px!important;background:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-sizing:border-box!important;}
/* .borderbot1 es una linea lima heredada. */
html body #panel #content.ivr-layout .borderbot1{border-bottom-color:var(--dw-border)!important;}

/* ── 10. Opciones asignadas (solapa Opciones) ── */
html body #panel #content.ivr-layout #assignedoptions table{width:100%!important;border-collapse:collapse!important;}
html body #panel #content.ivr-layout #assignedoptions tr.row1,
html body #panel #content.ivr-layout #assignedoptions tr.row2{background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;transition:background-color .15s ease!important;}
html body #panel #content.ivr-layout #assignedoptions tr.row1:hover,
html body #panel #content.ivr-layout #assignedoptions tr.row2:hover{background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #assignedoptions tr.row1:hover,
:root[data-theme="dark"] body #panel #content.ivr-layout #assignedoptions tr.row2:hover{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink)!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-md)!important;vertical-align:middle!important;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td:first-child{color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td:last-child > a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;transition:background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td:last-child > a > img{content:var(--dw-ico-blank)!important;display:block!important;width:16px!important;height:16px!important;background-color:var(--dw-ink-2)!important;-webkit-mask:var(--dw-ico-x) center/16px no-repeat;mask:var(--dw-ico-x) center/16px no-repeat;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td:last-child > a:hover{background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.ivr-layout #assignedoptions tr:not(.subtitle) > td:last-child > a:hover > img{background-color:var(--dw-danger)!important;}

/* ── 10b. Solapa Opciones: "Nueva opcion" no entraba en el ancho de la tarjeta ──
 * Las dos celdas de la fila unica pasan a apilarse. La tabla anidada que
 * contiene #GROUP/#IVR/#APPLICATION/#VOICEAGENT/#EXTENSION no se toca, porque
 * el JS hace .show()/.hide() sobre esos <tr>. */
html body #panel #content.ivr-layout #newoption > table + table{width:100%!important;margin:0!important;table-layout:auto!important;}
html body #panel #content.ivr-layout #newoption > table + table > tbody,
html body #panel #content.ivr-layout #newoption > table + table > tbody > tr{display:block!important;width:100%!important;}
html body #panel #content.ivr-layout #newoption > table + table > tbody > tr > td{display:block!important;width:100%!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;text-align:left!important;}
html body #panel #content.ivr-layout #newoption table table{width:100%!important;max-width:420px!important;margin:0!important;padding:0!important;table-layout:auto!important;}
html body #panel #content.ivr-layout #newoption table table > tbody > tr{height:auto!important;}
html body #panel #content.ivr-layout #newoption table table td[align="right"]{width:auto!important;padding:var(--dw-sp-1) var(--dw-sp-3) var(--dw-sp-1) 0!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-align:right!important;white-space:nowrap!important;}
html body #panel #content.ivr-layout #newoption table table td[align="left"]{width:auto!important;padding:var(--dw-sp-1) 0!important;text-align:left!important;}
html body #panel #content.ivr-layout #newoption select{min-width:0!important;width:100%!important;max-width:220px!important;}
html body #panel #content.ivr-layout #newoption input[name="OptionNumber"]{width:72px!important;text-align:center!important;}
html body #panel #content.ivr-layout #newoption span{color:var(--dw-ink-3)!important;font-size:var(--dw-fs-xs)!important;}
/* Las listas embebidas dimensionan por contenido; solo la lista principal
 * mantiene table-layout fijo para no desalinearse con su encabezado. */
/* El <style> en linea de ivr.php usa #tabcontent_2 (un id mas): hay que
 * listarlo para ganarle. */
html body #panel #content.ivr-layout #tabcontent_2 #assignedoptions{width:100%!important;}
html body #panel #content.ivr-layout #tabcontent_2 > table > tbody > tr > td{align-items:stretch!important;}
html body #panel #content.ivr-layout #assignedoptions table,
html body #panel #content.ivr-layout #ivrnumbers table,
html body #panel #content.ivr-layout #ivraudios table,
html body #panel #content.ivr-layout #ivraudios_2 table{table-layout:auto!important;}

/* ── 11. Pie de acciones del panel derecho ── */
html body #panel #content.ivr-layout .short_right_tab_footer{height:46px!important;min-height:46px!important;padding:0 var(--dw-sp-3)!important;background:var(--dw-bg)!important;border:1px solid var(--dw-border)!important;border-radius:0 0 var(--dw-radius) var(--dw-radius)!important;box-shadow:none!important;}
html body #panel #content.ivr-layout .short_right_tab_footer table{width:100%!important;height:100%!important;}
html body #panel #content.ivr-layout .short_right_tab_footer td{padding:0!important;vertical-align:middle!important;}
html body #panel #content.ivr-layout .short_right_tab_footer .tabslabel{color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout .short_right_tab_footer .tabslabel{color:var(--dw-ink)!important;}

/* ── 12. Botones .boxybutton → boton del DS ── */
html body #panel #content.ivr-layout .boxybutton,
html body #panel #content.ivr-holidays-page .boxybutton,
html body #panel #content.ivr-modes-page .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;height:34px!important;line-height:1!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-align:center!important;text-shadow:none!important;white-space:nowrap!important;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.ivr-layout .boxybutton:hover,
html body #panel #content.ivr-holidays-page .boxybutton:hover,
html body #panel #content.ivr-modes-page .boxybutton:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;background-image:none!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout .boxybutton:focus-visible,
html body #panel #content.ivr-holidays-page .boxybutton:focus-visible,
html body #panel #content.ivr-modes-page .boxybutton:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
/* Iconos dentro de los botones. */
html body #panel #content.ivr-layout .boxybutton > img,
html body #panel #content.ivr-holidays-page .boxybutton > img,
html body #panel #content.ivr-modes-page .boxybutton > img{content:var(--dw-ico-blank)!important;display:block!important;width:16px!important;height:16px!important;margin:0!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px 16px;mask-size:16px 16px;}
html body #panel #content.ivr-layout .boxybutton > img[src*="tree"]{-webkit-mask-image:var(--dw-ico-tree)!important;mask-image:var(--dw-ico-tree)!important;}
html body #panel #content.ivr-holidays-page .boxybutton > img[src*="calendar"]{-webkit-mask-image:var(--dw-ico-calendar)!important;mask-image:var(--dw-ico-calendar)!important;}
html body #panel #content.ivr-layout .boxybutton > img[src*="Checkmark"],
html body #panel #content.ivr-modes-page .boxybutton > img[src*="Checkmark"]{-webkit-mask-image:var(--dw-ico-check)!important;mask-image:var(--dw-ico-check)!important;}
html body #panel #content.ivr-holidays-page .boxybutton > img[src*="plus_icon"]{-webkit-mask-image:var(--dw-ico-plus)!important;mask-image:var(--dw-ico-plus)!important;}
/* Un solo primario por pantalla: enviar. */
html body #panel #content.ivr-layout #submit_button,
html body #panel #content.ivr-modes-page #mode_form .boxybutton,
html body #panel #content.ivr-holidays-page > #list > .tright > .boxybutton:last-child{min-width:112px!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout #submit_button:hover,
html body #panel #content.ivr-modes-page #mode_form .boxybutton:hover,
html body #panel #content.ivr-holidays-page > #list > .tright > .boxybutton:last-child:hover{color:var(--dw-on-primary)!important;background:var(--dw-primary-hover)!important;background-color:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #submit_button,
:root[data-theme="dark"] body #panel #content.ivr-modes-page #mode_form .boxybutton,
:root[data-theme="dark"] body #panel #content.ivr-holidays-page > #list > .tright > .boxybutton:last-child{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #submit_button:hover,
:root[data-theme="dark"] body #panel #content.ivr-modes-page #mode_form .boxybutton:hover,
:root[data-theme="dark"] body #panel #content.ivr-holidays-page > #list > .tright > .boxybutton:last-child:hover{color:var(--dw-brand-black)!important;background:var(--dw-bright-300)!important;background-color:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}

/* ── 13. Feriados: quitar alturas rigidas en linea y armar la tarjeta ── */
html body #panel #content.ivr-holidays-page > #list{top:var(--dw-sp-4)!important;border-bottom:1px solid var(--dw-border)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
html body #panel #content.ivr-holidays-page > #list > .tright{flex:0 0 auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--dw-sp-2)!important;border-bottom:1px solid var(--dw-border)!important;}
html body #panel #content.ivr-holidays-page > #list > .tright > .boxybutton{margin:0!important;}
html body #panel #content.ivr-holidays-page > #list > div:not(.tright){flex:1 1 auto!important;height:auto!important;min-height:0!important;margin:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
html body #panel #content.ivr-holidays-page > #list > div:not(.tright) > .row.bgcolor3{flex:0 0 auto!important;height:auto!important;line-height:normal!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;box-shadow:none!important;text-shadow:none!important;}
html body #panel #content.ivr-holidays-page > #list > div:not(.tright) > .row.bgcolor3 > .inline{color:var(--dw-ink-2)!important;background:transparent!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;}
html body #panel #content.ivr-holidays-page #holidays{flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:auto!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big{height:auto!important;line-height:normal!important;padding:var(--dw-sp-2) var(--dw-sp-4)!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;transition:background-color .15s ease!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big:hover{background:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page #holidays > .row_big:hover{background:var(--dw-bg)!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline{color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;font-weight:400!important;vertical-align:middle!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline:first-child{color:var(--dw-ink)!important;font-weight:600!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline:nth-child(2),
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline:nth-child(3){color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline:nth-child(4){color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > .inline:last-child{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-1)!important;}
html body #panel #content.ivr-holidays-page #holidays > .row_big > div:last-child > .pointer{margin:0!important;}
html body #panel #content.ivr-holidays-page .borderbot3{border-bottom-color:var(--dw-line-2)!important;}

/* ── 14. Modos: columnas de dias sin recortes ── */
html body #panel #content.ivr-modes-page #list-left > table tr > td:nth-child(1),
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(1){width:30%!important;}
html body #panel #content.ivr-modes-page #list-left > table tr > td:nth-child(2),
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(2){width:22%!important;}
html body #panel #content.ivr-modes-page #list-left > table tr > td:nth-child(n+3):nth-child(-n+9),
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(n+3):nth-child(-n+9){width:4.6%!important;padding-left:0!important;padding-right:0!important;text-align:center!important;}
html body #panel #content.ivr-modes-page #list-left > table tr > td:nth-child(10),
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(10){width:14%!important;padding-left:0!important;padding-right:0!important;overflow:visible!important;text-align:center!important;text-overflow:clip!important;white-space:nowrap!important;}
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(2){color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-xs)!important;text-align:center!important;white-space:nowrap!important;}
html body #panel #content.ivr-modes-page #modes_list tr > td:nth-child(n+3):nth-child(-n+9){color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;}
/* Dia activo: marca clara y no solo color. */
html body #panel #content.ivr-modes-page #modes_list img[src*="Checkmark"]{content:var(--dw-ico-blank)!important;display:inline-block!important;width:18px!important;height:18px!important;margin:0!important;border:0!important;background-color:var(--dw-success)!important;-webkit-mask:var(--dw-ico-check) center/13px no-repeat;mask:var(--dw-ico-check) center/13px no-repeat;vertical-align:middle!important;}
:root[data-theme="dark"] body #panel #content.ivr-modes-page #modes_list img[src*="Checkmark"]{background-color:var(--dw-accent)!important;}

/* ── 15. Modos: formulario arriba y dias como grupo unico ── */
html body #panel #content.ivr-modes-page #mode_form > table{height:auto!important;}
html body #panel #content.ivr-modes-page #mode_form > table > tbody > tr:first-child > td{height:100%!important;padding:var(--dw-sp-6) var(--dw-sp-4)!important;vertical-align:top!important;}
html body #panel #content.ivr-modes-page #mode_form > table > tbody > tr:last-child > td{height:1%!important;min-height:56px!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;background:var(--dw-bg)!important;border-top:1px solid var(--dw-border)!important;text-align:right!important;vertical-align:bottom!important;}
html body #panel #content.ivr-modes-page #mode_form table table{width:auto!important;border-collapse:separate!important;border-spacing:0!important;}
html body #panel #content.ivr-modes-page #mode_form td[align="right"]{padding:var(--dw-sp-2) var(--dw-sp-3) var(--dw-sp-2) 0!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;white-space:nowrap!important;}
html body #panel #content.ivr-modes-page #mode_form td[align="left"]{padding:var(--dw-sp-2) 0!important;vertical-align:middle!important;}
html body #panel #content.ivr-modes-page #mode_form input[name="Description"]{width:240px!important;}
html body #panel #content.ivr-modes-page #mode_form input[name="FromTime"],
html body #panel #content.ivr-modes-page #mode_form input[name="ToTime"]{width:96px!important;font-family:var(--dw-font-mono)!important;text-align:center!important;}
html body #panel #content.ivr-modes-page #mode_form span{color:var(--dw-ink-3)!important;font-size:var(--dw-fs-xs)!important;}
/* Las dos columnas de dias se leen como un bloque. */
html body #panel #content.ivr-modes-page #mode_form > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td{padding:var(--dw-sp-3) var(--dw-sp-4)!important;background:var(--dw-bg)!important;border-top:1px solid var(--dw-line)!important;border-bottom:1px solid var(--dw-line)!important;vertical-align:top!important;}
html body #panel #content.ivr-modes-page #mode_form > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td:first-child{border-left:1px solid var(--dw-line)!important;border-radius:var(--dw-radius-sm) 0 0 var(--dw-radius-sm)!important;}
html body #panel #content.ivr-modes-page #mode_form > table > tbody > tr > td > table > tbody > tr:nth-child(2) > td:last-child{border-right:1px solid var(--dw-line)!important;border-radius:0 var(--dw-radius-sm) var(--dw-radius-sm) 0!important;}

/* Reserva del canal de scroll para que encabezado y filas no se desalineen. */
html body #panel #content.ivr-layout #list-left #ivrs_list,
html body #panel #content.ivr-modes-page #modes_list{scrollbar-gutter:stable!important;}

/* ── 16. Paginador ── */
/* El tema oscuro heredado pinta el paginador con un navy fuera de paleta (#0f1e2e). */
html body #panel #content.ivr-layout #list-paging-left,
html body #panel #content.ivr-modes-page #list-paging-left{color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border-color:var(--dw-border)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-layout #list-paging-left a,
html body #panel #content.ivr-modes-page #list-paging-left a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:26px!important;height:26px!important;margin:0 2px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.ivr-layout #list-paging-left a:hover,
html body #panel #content.ivr-modes-page #list-paging-left a:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout #list-paging-left a.jpager_current,
html body #panel #content.ivr-modes-page #list-paging-left a.jpager_current{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout #list-paging-left a.jpager_current,
:root[data-theme="dark"] body #panel #content.ivr-modes-page #list-paging-left a.jpager_current{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.ivr-layout #list-paging-left a:focus-visible,
html body #panel #content.ivr-modes-page #list-paging-left a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}

/* ── 17. Barra de scroll de los paneles (la regla global la pinta verde) ── */
html body #panel #content.ivr-layout #ivrs_list::-webkit-scrollbar-thumb,
html body #panel #content.ivr-layout .short_right_tabscontent_background::-webkit-scrollbar-thumb,
html body #panel #content.ivr-modes-page #modes_list::-webkit-scrollbar-thumb,
html body #panel #content.ivr-holidays-page #holidays::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.ivr-layout #ivrs_list::-webkit-scrollbar-thumb:hover,
html body #panel #content.ivr-layout .short_right_tabscontent_background::-webkit-scrollbar-thumb:hover,
html body #panel #content.ivr-modes-page #modes_list::-webkit-scrollbar-thumb:hover,
html body #panel #content.ivr-holidays-page #holidays::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;}
html body #panel #content.ivr-layout #ivrs_list::-webkit-scrollbar,
html body #panel #content.ivr-layout .short_right_tabscontent_background::-webkit-scrollbar,
html body #panel #content.ivr-modes-page #modes_list::-webkit-scrollbar,
html body #panel #content.ivr-holidays-page #holidays::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;}
/* Degradacion controlada: el fondo del boton borrar solo si :has() existe. */
@supports selector(:has(*)) {
html body #panel #content.ivr-layout tr > td:last-child > a:has(img[src*="Cross"]):hover,
html body #panel #content.ivr-modes-page tr > td:last-child > a:has(img[src*="Cross"]):hover,
html body #panel #content.ivr-holidays-page #holidays .row_big > div:last-child > .pointer:has(img[src*="Cross"]):hover{background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
}
/* ── IVR WORKSPACE v1 END ── */

/* ── USERS LEGACY ICONS v1 — Usuarios > Ver Usuarios: PNG heredados de la lista ──
 * Los seis PNG que quedaban (plus_icon, Cross_12, Checkmark_12, config16 y
 * search1) se recolorean con mascaras SVG sobre tokens, igual que en el resto
 * del design system. Las cajas 22x22 / 28x28 ya existian en USERS LIST v2;
 * aca solo se reemplaza el mapa de bits y se agregan los estados.
 * Solo CSS. No cambia HTML, IDs, formularios, eventos ni rutas.
 */
html body #panel #content.users-page{--dw-ui-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-ui-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.2v9.6M3.2 8h9.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ui-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ui-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l3.2 3.2L12.8 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-ui-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.9' cy='6.9' r='4.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M10.2 10.2l3.3 3.3' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-ui-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 5.2h11.2M2.4 10.8h11.2' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='5.2' r='2.1'/%3E%3Ccircle cx='10.4' cy='10.8' r='2.1'/%3E%3C/svg%3E");}

/* Base comun: el bitmap se blanquea y la caja se pinta con la mascara. */
html body #panel #content.users-page .users-ext-add a > img,
html body #panel #content.users-page .users-act-del .pointer > img,
html body #panel #content.users-page .users-mode-pill a > img,
html body #panel #content.users-page .users-filter-btn > img,
html body #panel #content.users-page .users-filter-flag > img,
html body #panel #content.users-page .users-qf-row .pointer > img{content:var(--dw-ui-blank)!important;display:block!important;margin:0!important;border:0!important;background-color:var(--dw-ink-2)!important;opacity:1!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background-color .15s ease!important;}

/* Glifo por origen. */
html body #panel #content.users-page img[src*="plus_icon"]{-webkit-mask-image:var(--dw-ui-plus)!important;mask-image:var(--dw-ui-plus)!important;}
html body #panel #content.users-page img[src*="Cross"]{-webkit-mask-image:var(--dw-ui-x)!important;mask-image:var(--dw-ui-x)!important;}
html body #panel #content.users-page img[src*="Checkmark"]{-webkit-mask-image:var(--dw-ui-check)!important;mask-image:var(--dw-ui-check)!important;}
html body #panel #content.users-page img[src*="search1"]{-webkit-mask-image:var(--dw-ui-search)!important;mask-image:var(--dw-ui-search)!important;}
html body #panel #content.users-page img[src*="config16"]{-webkit-mask-image:var(--dw-ui-sliders)!important;mask-image:var(--dw-ui-sliders)!important;}

/* Tamanos. */
html body #panel #content.users-page .users-ext-add a > img,
html body #panel #content.users-page .users-act-del .pointer > img{width:14px!important;height:14px!important;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
html body #panel #content.users-page .users-filter-btn > img{width:15px!important;height:15px!important;-webkit-mask-size:15px 15px;mask-size:15px 15px;}
html body #panel #content.users-page .users-filter-flag > img{width:13px!important;height:13px!important;background-color:var(--dw-primary)!important;-webkit-mask-size:13px 13px;mask-size:13px 13px;}
html body #panel #content.users-page .users-qf-row .pointer > img{width:14px!important;height:14px!important;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
html body #panel #content.users-page .users-mode-pill a > img{width:13px!important;height:13px!important;background-color:var(--dw-ink-3)!important;-webkit-mask-size:13px 13px;mask-size:13px 13px;}

/* Estados: agregar y configurar viran a primario, borrar a peligro. */
html body #panel #content.users-page .users-ext-add a:hover > img,
html body #panel #content.users-page .users-filter-btn:hover > img,
html body #panel #content.users-page .users-mode-pill a:hover > img{background-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.users-page .users-ext-add a:hover > img,
:root[data-theme="dark"] body #panel #content.users-page .users-filter-btn:hover > img,
:root[data-theme="dark"] body #panel #content.users-page .users-mode-pill a:hover > img{background-color:var(--dw-accent)!important;}
html body #panel #content.users-page .users-act-del .pointer:hover > img{background-color:var(--dw-danger)!important;}
html body #panel #content.users-page .users-qf-row .pointer:hover > img[src*="Checkmark"]{background-color:var(--dw-primary)!important;}
html body #panel #content.users-page .users-qf-row .pointer:hover > img[src*="Cross"]{background-color:var(--dw-danger)!important;}

/* El engranaje del chip de modo no tenia caja propia. */
html body #panel #content.users-page .users-mode-pill a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:18px!important;height:18px!important;margin-left:2px!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;vertical-align:middle!important;transition:background-color .15s ease!important;}
html body #panel #content.users-page .users-mode-pill a:hover{background:var(--dw-primary-soft)!important;}
html body #panel #content.users-page .users-mode-pill{gap:2px!important;padding-right:6px!important;}

/* La marca de "columna filtrada" se lee como chip, no como cuadrado recortado. */
html body #panel #content.users-page .users-filter-flag{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:20px!important;height:20px!important;background:var(--dw-primary-soft)!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;box-sizing:border-box!important;}

/* Foco visible: estas cajas no lo tenian. */
html body #panel #content.users-page .users-ext-add a:focus-visible,
html body #panel #content.users-page .users-mode-pill a:focus-visible,
html body #panel #content.users-page .users-filter-btn:focus-visible,
html body #panel #content.users-page .users-act-del .pointer:focus-visible,
html body #panel #content.users-page .users-qf-row .pointer:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
html body #panel #content.users-page .users-ext-add a{opacity:1!important;}
/* ── USERS LEGACY ICONS v1 END ── */

/* ── USER BULK FULLWIDTH v1 — Importar usuarios y Generacion de usuarios ──
 * Las dos tarjetas cortaban en 750px por la regla generica
 * `#panel #content #um{max-width:750px}`, que sigue valiendo para el resto de
 * las pantallas #um. Aca se libera solo en estas dos y el contenido reparte el
 * ancho disponible en lugar de dejar la mitad de la pantalla vacia.
 * Solo CSS. No cambia HTML, IDs, formularios, eventos ni rutas.
 */
html body #panel #content.user-import-page > #um.dw-bulk-card,
html body #panel #content.user-batch-page > #um.dw-bulk-card{width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;}

/* Fila de controles: reparte el ancho en tres columnas parejas. */
html body #panel #content.user-import-page .dw-bulk-workflow{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;}
html body #panel #content.user-import-page .dw-bulk-template-list{align-content:space-evenly!important;padding:var(--dw-sp-3)!important;}
html body #panel #content.user-import-page .dw-bulk-file-control,
html body #panel #content.user-import-page .dw-bulk-action-slot{display:flex!important;align-items:center!important;justify-content:center!important;}

/* Generacion: datos, servicios y accion ocupan la fila completa. */
html body #panel #content.user-batch-page .dw-bulk-batch-setup{grid-template-columns:minmax(260px,1fr) minmax(0,2fr) minmax(200px,1fr)!important;align-items:stretch!important;}
html body #panel #content.user-batch-page .dw-bulk-form-grid{align-content:space-evenly!important;}
html body #panel #content.user-batch-page .dw-bulk-action-slot{display:flex!important;align-items:center!important;justify-content:center!important;}
/* Los siete servicios se acomodan a las columnas que entren. */
html body #panel #content.user-batch-page .dw-bulk-services{display:flex!important;flex-direction:column!important;}
html body #panel #content.user-batch-page .dw-bulk-services-grid{flex:1 1 auto!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;align-content:center!important;}

/* El boton primario no se estira a toda la columna. */
html body #panel #content.user-import-page .dw-bulk-action-slot .dw-bulk-submit,
html body #panel #content.user-batch-page .dw-bulk-action-slot .dw-bulk-submit{width:auto!important;min-width:180px!important;max-width:100%!important;padding:var(--dw-sp-3) var(--dw-sp-6)!important;}

/* Los campos no se estiran mas de lo legible aunque la columna crezca. */
html body #panel #content.user-batch-page .dw-bulk-field :is(input,select){width:100%!important;max-width:320px!important;}

/* El panel de progreso toma todo el ancho y el alto que sobra. */
html body #panel #content.user-import-page .dw-bulk-progress,
html body #panel #content.user-batch-page .dw-bulk-progress{width:100%!important;min-height:0!important;}
/* ── USER BULK FULLWIDTH v1 END ── */

/* ── HOLIDAYS CALENDAR v1 — dialogo "Feriados en el ano" ──
 * El modal lo monta Myboxy en .boxy-wrapper a nivel de body, no dentro de
 * #content, y ivrHolidays.php trae un <style> inline que carga despues de
 * denwa_v5.css: por eso se repite html body .boxy-wrapper #mb_holidaysinyear.
 * Los 950x450 los escribe Myboxy como estilo en linea sin !important, asi que
 * se pueden pisar desde aca. Solo CSS: no cambia HTML, IDs ni eventos.
 */
html body .boxy-wrapper #mb_holidaysinyear{--dw-cal-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-cal-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");width:min(1160px,94vw)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border-radius:var(--dw-radius)!important;overflow:hidden!important;}

/* Cabecera del dialogo: el inline le pone un lima crema y sombra de texto. */
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_title{padding:var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-lg)!important;font-weight:700!important;letter-spacing:0!important;word-spacing:normal!important;text-shadow:none!important;}

/* Cuerpo: mas alto util, para que los doce meses entren sin scroll interno. */
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_text_cont{max-height:min(78vh,820px)!important;background:var(--dw-surface)!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_text{height:auto!important;padding:var(--dw-sp-4)!important;background:var(--dw-surface)!important;}
html body .boxy-wrapper #mb_holidaysinyear #mb_table,
html body .boxy-wrapper #mb_holidaysinyear #mb_table td{height:auto!important;background:var(--dw-surface)!important;}

/* Los doce meses en grilla, no en inline-block. */
html body .boxy-wrapper #mb_holidaysinyear #wholeyear{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))!important;gap:var(--dw-sp-3)!important;align-items:start!important;background:transparent!important;}
/* El indicador de "Cargando" se prepende dentro de la grilla: si ocupa una
 * celda, corre los meses y rompe la alineacion de 4x3. */
html body .boxy-wrapper #mb_holidaysinyear #wholeyear > #search_loading{grid-column:1/-1!important;height:0!important;}
html body .boxy-wrapper #mb_holidaysinyear #wholeyear > #search_loading span{padding:var(--dw-sp-1) var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;font-size:var(--dw-fs-sm)!important;font-style:normal!important;}
html body .boxy-wrapper #mb_holidaysinyear #wholeyear > div[id^="m"]{display:block!important;width:auto!important;margin:0!important;vertical-align:top!important;}

/* Cada mes es una tarjeta del DS. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-inline,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker.ui-widget-content{width:100%!important;margin:0!important;padding:var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-header,
html body .boxy-wrapper #mb_holidaysinyear .ui-widget-header{height:auto!important;padding:var(--dw-sp-1) 0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;text-shadow:none!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-title{margin:0!important;line-height:1.2!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-sm)!important;font-weight:700!important;text-align:center!important;}

/* Iniciales de los dias. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker table{width:100%!important;margin:0!important;border-collapse:collapse!important;font-size:var(--dw-fs-sm)!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker th{height:auto!important;padding:var(--dw-sp-1) 0!important;color:var(--dw-ink-3)!important;background:transparent!important;border:0!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.02em!important;text-align:center!important;text-transform:uppercase!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker th span{font-weight:600!important;}

/* Celdas: la caja la pone el dia, no la tabla. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td{padding:1px!important;background:transparent!important;background-color:transparent!important;border:0!important;text-align:center!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td a,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td span,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-default{display:flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;margin:0 auto!important;padding:0!important;color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:500!important;font-variant-numeric:tabular-nums;line-height:1!important;text-align:center!important;text-decoration:none!important;text-shadow:none!important;transition:background-color .12s ease,color .12s ease!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td a:hover,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-default:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
/* El dia 1 queda "seleccionado" porque el JS hace setDate: se neutraliza. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-active{color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;border:0!important;font-weight:500!important;}
/* Hoy: anillo, sin relleno. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-highlight{color:var(--dw-primary)!important;background:transparent!important;background-color:transparent!important;box-shadow:inset 0 0 0 1.5px var(--dw-primary)!important;font-weight:700!important;}
/* Feriado: el estado no depende solo del color, tambien del peso y el relleno. */
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-active2,
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker a.ui-state-active2{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;background-color:var(--dw-danger-soft)!important;box-shadow:inset 0 0 0 1px var(--dw-danger)!important;font-weight:700!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker a.ui-state-active2:hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;box-shadow:inset 0 0 0 1.5px var(--dw-danger)!important;}
html body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-disabled,
html body .boxy-wrapper #mb_holidaysinyear .ui-widget-content .ui-state-disabled{opacity:1!important;color:var(--dw-ink-3)!important;}

/* Pie del dialogo y boton de cerrar. */
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_options{padding:var(--dw-sp-3) var(--dw-sp-4)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-top:1px solid var(--dw-border)!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_options .boxybutton{margin:0!important;height:34px!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-weight:600!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_options .boxybutton:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_options .boxybutton:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
/* La cruz roja heredada pasa a un glifo neutro. */
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_options .boxybutton img{content:var(--dw-cal-blank)!important;display:block!important;width:14px!important;height:14px!important;margin:0!important;background-color:currentColor!important;-webkit-mask:var(--dw-cal-x) center/14px no-repeat;mask:var(--dw-cal-x) center/14px no-repeat;}

/* Barra de scroll del cuerpo: la regla global la pinta verde. */
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_text_cont::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_text_cont::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
html body .boxy-wrapper #mb_holidaysinyear #my_boxy_text_cont::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;}

/* Oscuro: el <style> inline de la pagina define reglas propias para este
 * modal y carga despues, asi que hay que sumar body y .boxy-wrapper. */
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #my_boxy_title,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #my_boxy_text_cont,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #my_boxy_text,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #mb_table,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #mb_table td{color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-inline,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker.ui-widget-content{background:var(--dw-bg)!important;border-color:var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker-header,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-widget-header{background:transparent!important;border:0!important;color:var(--dw-ink)!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-default{color:var(--dw-ink)!important;background:transparent!important;border:0!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker td a:hover,
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-default:hover{color:var(--dw-accent)!important;background:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-active{color:var(--dw-ink)!important;background:transparent!important;border:0!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear .ui-datepicker .ui-state-highlight{color:var(--dw-accent)!important;background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--dw-accent)!important;}
:root[data-theme="dark"] body .boxy-wrapper #mb_holidaysinyear #my_boxy_options{background:var(--dw-bg)!important;border-top-color:var(--dw-border)!important;}
/* ── HOLIDAYS CALENDAR v1 END ── */

/* ── TRUNKS LIST v1 — Proveedores > Ver proveedores ──
 * Mismo tratamiento que Ver Usuarios y las listas de Preatendedor: nombres en
 * tinta normal, filas sin cebra con hover, y los PNG heredados (edit.png,
 * Cross_12.png y los LED de presencia) recoloreados con mascaras SVG.
 * Solo CSS. No cambia HTML, IDs, formularios, eventos ni rutas.
 */
html body #panel #content.trunks-list-page{--dw-tr-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-tr-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.4 2.2a1.45 1.45 0 012.05 2.05l-7.3 7.3-2.75.7.7-2.75 7.3-7.3z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-tr-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");}

/* ── 1. Encabezado de columnas, igual que el resto de las listas ── */
html body #panel #content.trunks-list-page #trunks_table tr.title{height:auto!important;line-height:normal!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
html body #panel #content.trunks-list-page #trunks_table tr.title > td{height:auto!important;padding:var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;line-height:1.2!important;text-transform:uppercase!important;text-shadow:none!important;white-space:nowrap!important;}

/* ── 2. Filas: sin cebra, jerarquia por hover ── */
html body #panel #content.trunks-list-page #trunks_list #message > table{width:100%!important;border-collapse:collapse!important;}
html body #panel #content.trunks-list-page #trunks_list tr.row1,
html body #panel #content.trunks-list-page #trunks_list tr.row2{height:auto!important;line-height:normal!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;transition:background-color .15s ease!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink)!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-md)!important;line-height:1.3!important;vertical-align:middle!important;}
html body #panel #content.trunks-list-page #trunks_list tr.row1:hover,
html body #panel #content.trunks-list-page #trunks_list tr.row2:hover{background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel #content.trunks-list-page #trunks_list tr.row1:hover,
:root[data-theme="dark"] body #panel #content.trunks-list-page #trunks_list tr.row2:hover{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}

/* ── 3. Nombre en tinta normal, no en verde de marca ── */
html body #panel #content.trunks-list-page #trunks_list tr > td:first-child{text-indent:0!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:first-child > a{color:var(--dw-ink)!important;font-weight:600!important;text-decoration:none!important;}
html body #panel #content.trunks-list-page #trunks_list tr:hover > td:first-child > a{color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunks-list-page #trunks_list tr:hover > td:first-child > a{color:var(--dw-accent)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:first-child > a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;border-radius:var(--dw-radius-sm);}

/* ── 4. Datos secundarios: IP en mono, tipo y protocolo en tinta suave ── */
html body #panel #content.trunks-list-page #trunks_list tr > td:nth-child(2){color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;font-variant-numeric:tabular-nums;}
html body #panel #content.trunks-list-page #trunks_list tr > td:nth-child(3),
html body #panel #content.trunks-list-page #trunks_list tr > td:nth-child(4){color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:nth-child(5){color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;}

/* ── 5. Registrado: los LED heredados pasan a punto lleno / anillo hueco.
 * La forma cambia junto con el color, asi el estado no se comunica solo por
 * color, que es lo que pide el design system. ── */
html body #panel #content.trunks-list-page #trunks_list img[src*="presence_"]{content:var(--dw-tr-blank)!important;display:inline-block!important;width:10px!important;height:10px!important;margin:0!important;border:0!important;border-radius:50%!important;vertical-align:middle!important;}
html body #panel #content.trunks-list-page #trunks_list img[src*="presence_online"]{background:var(--dw-success)!important;background-color:var(--dw-success)!important;box-shadow:none!important;}
html body #panel #content.trunks-list-page #trunks_list img[src*="presence_offline"]{background:transparent!important;background-color:transparent!important;box-shadow:inset 0 0 0 2px var(--dw-danger)!important;}

/* ── 6. Acciones: mismas cajas que en Ver Usuarios ── */
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;margin:0!important;padding:0!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;vertical-align:middle!important;transition:background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a > img{content:var(--dw-tr-blank)!important;display:block!important;width:16px!important;height:16px!important;margin:0!important;border:0!important;background-color:var(--dw-ink-2)!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px 16px;mask-size:16px 16px;transition:background-color .15s ease!important;}
html body #panel #content.trunks-list-page #trunks_list img[src*="edit.png"]{-webkit-mask-image:var(--dw-tr-pencil)!important;mask-image:var(--dw-tr-pencil)!important;}
html body #panel #content.trunks-list-page #trunks_list img[src*="Cross"]{-webkit-mask-image:var(--dw-tr-x)!important;mask-image:var(--dw-tr-x)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:hover{background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:hover > img{background-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:hover > img{background-color:var(--dw-accent)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:hover > img[src*="Cross"]{background-color:var(--dw-danger)!important;}
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
/* Degradacion controlada: el fondo rojo del boton borrar solo si :has() existe. */
@supports selector(:has(*)) {
html body #panel #content.trunks-list-page #trunks_list tr > td:last-child > a:has(img[src*="Cross"]):hover{background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
}

/* ── 7. Estado vacio ──
 * Ojo: el #warning de trunks.php contiene saltos de linea del PHP, asi que no
 * matchea :empty. Estilarlo como aviso deja una barra vacia permanente, por eso
 * no se toca desde aca. */
html body #panel #content.trunks-list-page #trunks_list #message > table > tbody > tr > td[colspan]{padding:var(--dw-sp-6) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;border-bottom:0!important;font-size:var(--dw-fs-sm)!important;font-style:normal!important;text-align:center!important;}

/* ── 8. Paginado y barra de scroll, igual que las otras listas ── */
html body #panel #content.trunks-list-page #list-paging{color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border-color:var(--dw-border)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.trunks-list-page #list-paging a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:26px!important;height:26px!important;margin:0 2px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.trunks-list-page #list-paging a:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunks-list-page #list-paging a.jpager_current{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunks-list-page #list-paging a.jpager_current{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.trunks-list-page #trunks_list{scrollbar-gutter:stable!important;}
html body #panel #content.trunks-list-page #trunks_list::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;}
html body #panel #content.trunks-list-page #trunks_list::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.trunks-list-page #trunks_list::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;}
/* ── TRUNKS LIST v1 END ── */

/* ── DIRECTORY FOOTER v1 — Directorio Corporativo, pie de la grilla ──
 * Los colores del pie no salen del design system: vienen de
 * css/directory_modern.css y de los dos <style> inline de directory.php, que
 * cargan DESPUES de denwa_v5.css. Por eso cada selector suma html body sobre
 * la cadena que usan ellos (#panel #content.directory-page
 * #directory_paging_html .directory-footer-pages table td > div.item).
 * Valores reemplazados, medidos con getComputedStyle:
 *   claro  #f4f7f2 fondo, #d7e2d8 borde, #526879 y #607284 texto (gris azulado),
 *          #3f9200 contador, #edf5e7/#c7d9b8/#3f8500 pildoras, #e3b4b0/#b33b34 Borrar
 *   oscuro #0f1d2b fondo, #2a4055 borde, #91abc1 texto (navy), #77d12b contador
 * Solo CSS. No cambia HTML, IDs, formularios, eventos ni rutas.
 */
html body #panel #content.directory-page .directory-grid-footer{--dw-dir-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-dir-prev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-dir-first:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 3L7 8l5 5M6 3L1 8l5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-dir-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-dir-last:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 3l5 5-5 5M10 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* ── 1. La barra del pie ──
 * Medido con CSS.getMatchedStylesForNode: el ganador es
 * '#panel #content.directory-page #directory_paging_container' (tres IDs), no la
 * clase .directory-grid-footer. Por eso se ancla en el id del mismo elemento. */
html body #panel #content.directory-page #directory_paging_container.directory-grid-footer{color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-top:1px solid var(--dw-border)!important;border-top-color:var(--dw-border)!important;}

/* ── 2. Contador: el numero es dato, no un enlace ── */
html body #panel #content.directory-page .directory-footer-count{color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.directory-page .directory-footer-count strong{color:var(--dw-ink)!important;font-weight:700!important;}
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_container.directory-grid-footer{color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-top-color:var(--dw-border)!important;}
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_container .directory-footer-count{color:var(--dw-ink-2)!important;}
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_container .directory-footer-count strong{color:var(--dw-ink)!important;}

/* ── 3. Pildoras del paginador ── */
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item,
html body #panel #content.directory-page .directory-footer-pages .item{color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;font-variant-numeric:tabular-nums;}
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item:hover,
html body #panel #content.directory-page .directory-footer-pages .item:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item.selected,
html body #panel #content.directory-page .directory-footer-pages .item.selected{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;border-color:var(--dw-primary)!important;box-shadow:none!important;font-weight:700!important;}
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item.selected,
:root[data-theme="dark"] body #panel #content.directory-page .directory-footer-pages .item.selected{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
/* El disabled computaba igual que el normal: en la pagina 1 las flechas de
 * primera y anterior se veian habilitadas. Va con mas especificidad que la
 * regla base y no depende solo del color: tambien baja el contraste. */
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item.disabled,
html body #panel #content.directory-page .directory-footer-pages .item.disabled{color:var(--dw-ink-3)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-color:var(--dw-line)!important;cursor:default!important;pointer-events:none!important;}
/* En oscuro el pie ya es --dw-bg, asi que la pildora inactiva se apoya en
 * --dw-surface para no desaparecer contra el fondo. Explicito, no heredado. */
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item.disabled,
:root[data-theme="dark"] body #panel #content.directory-page .directory-footer-pages .item.disabled{color:var(--dw-ink-3)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border-color:var(--dw-line)!important;}
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages table td > div.item:focus-visible,
html body #panel #content.directory-page .directory-footer-pages .item:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}

/* ── 4. Flechas: PNG heredados, invisibles sobre fondo oscuro ── */
html body #panel #content.directory-page .directory-footer-pages .item > img{content:var(--dw-dir-blank)!important;display:block!important;width:14px!important;height:14px!important;padding:0!important;margin:0!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
html body #panel #content.directory-page .directory-footer-pages .item > img[src*="left2_9"]{-webkit-mask-image:var(--dw-dir-first)!important;mask-image:var(--dw-dir-first)!important;}
html body #panel #content.directory-page .directory-footer-pages .item > img[src*="left_9"]{-webkit-mask-image:var(--dw-dir-prev)!important;mask-image:var(--dw-dir-prev)!important;}
html body #panel #content.directory-page .directory-footer-pages .item > img[src*="right_9"]{-webkit-mask-image:var(--dw-dir-next)!important;mask-image:var(--dw-dir-next)!important;}
html body #panel #content.directory-page .directory-footer-pages .item > img[src*="right2_9"]{-webkit-mask-image:var(--dw-dir-last)!important;mask-image:var(--dw-dir-last)!important;}

/* En oscuro les aplican un filter hue-rotate que tine el PNG de lima; con la
 * mascara puesta ese filter tambien tine el fondo, asi que se anula. */
:root[data-theme="dark"] body #panel #content.directory-page #directory_paging_html .directory-footer-pages .item > img,
html body #panel #content.directory-page #directory_paging_html .directory-footer-pages .item > img,
:root[data-theme="dark"] body #panel #content.directory-page .directory-footer-pages td > div[onclick] > img{filter:none!important;-webkit-filter:none!important;background-color:currentColor!important;}

/* ── 5. Exportar y Borrar ── */
html body #panel #content.directory-page .directory-action{gap:var(--dw-sp-2)!important;height:32px!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.directory-page .directory-action--export{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.directory-page .directory-action--export:hover{background:var(--dw-primary-hover)!important;background-color:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.directory-page .directory-action--export{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.directory-page .directory-action--export:hover{background:var(--dw-bright-300)!important;background-color:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
html body #panel #content.directory-page .directory-action--delete{color:var(--dw-danger)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.directory-page .directory-action--delete:hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;background-color:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
:root[data-theme="dark"] body #panel #content.directory-page .directory-action--delete{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;background-color:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.directory-page .directory-action:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
/* Los dos iconos tambien son PNG heredados. */
html body #panel #content.directory-page .directory-action > img{content:var(--dw-dir-blank)!important;display:block!important;width:14px!important;height:14px!important;margin:0!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
html body #panel #content.directory-page .directory-action > img[src*="download_file"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8m0 0L4.8 6.8M8 10l3.2-3.2M2.6 13.4h10.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v8m0 0L4.8 6.8M8 10l3.2-3.2M2.6 13.4h10.8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;}
html body #panel #content.directory-page .directory-action > img[src*="Cross"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;}
/* ── DIRECTORY FOOTER v1 END ── */

/* ── ROUTES SEARCH v1 — Proveedores > Rutas (searchRoutes.php) ──
 * Misma pantalla y misma logica: solo CSS. Alinea Rutas con Ver Usuarios y
 * Ver Proveedores (cabeceras de tarjeta, filas sin cebra, acciones y paginado).
 * Ojo: searchRoutes.php trae un <style id="routes-button-fix"> inline que carga
 * DESPUES de denwa_v5.css, por eso todo va con `html body #panel #content.X`
 * (mas tipos, misma cuenta de IDs) para ganarle sin tocar el PHP.
 * Ojo 2: getRecords() lee $('#message').css('display') y $('#loading')
 * .css('display'), asi que aca NUNCA se declara `display` en esos dos.
 */
html body #panel #content.routes-search-layout{--dw-rt-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-rt-first:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 3.5l-5 4.5 5 4.5M4.2 3.5v9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-rt-prev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.2 3.5l-5 4.5 5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-rt-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.8 3.5l5 4.5-5 4.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-rt-last:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l5 4.5-5 4.5M11.8 3.5v9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-rt-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1.8H4.4a1 1 0 00-1 1v10.4a1 1 0 001 1h7.2a1 1 0 001-1V5.4L9 1.8z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M9 1.8v3.6h3.6M5.8 8.6h4.4M5.8 11h4.4' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");--dw-rt-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M15.3 15.3l4.4 4.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");}

/* ── 1. Layout: la tarjeta de busqueda se ajusta al contenido en vez de
 * estirarse hasta el pie; la de resultados sigue ocupando el alto libre. ── */
html body #panel #content.routes-search-layout{grid-template-rows:auto minmax(0,1fr) auto!important;row-gap:var(--dw-sp-2)!important;}
html body #panel #content.routes-search-layout > #list-left-short{grid-row:2/3!important;align-self:start!important;height:auto!important;}
html body #panel #content.routes-search-layout > #list-right-large{grid-row:2/3!important;}
html body #panel #content.routes-search-layout > #list-left-short > table[height]{height:auto!important;}
html body #panel #content.routes-search-layout > #list-paging-right-large{grid-row:3!important;display:flex!important;align-items:center!important;justify-content:center!important;height:auto!important;min-height:44px!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-shadow:var(--dw-shadow)!important;}
html body #panel #content.routes-search-layout > #list-paging-right-large:empty{display:none!important;}
@media (max-width:900px){
html body #panel #content.routes-search-layout{grid-template-rows:auto auto minmax(360px,1fr) auto!important;}
html body #panel #content.routes-search-layout > #list-left-short{grid-row:2/3!important;}
html body #panel #content.routes-search-layout > #list-right-large{grid-row:3/4!important;}
html body #panel #content.routes-search-layout > #list-paging-right-large{grid-row:4!important;}
}

/* ── 2. Cabecera de tarjeta: sin el navy heredado de oscuro ── */
html body #panel #content.routes-search-layout tr.title,
html body #panel #content.routes-search-layout tr.title > td{height:auto!important;line-height:1.2!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;text-shadow:none!important;}
html body #panel #content.routes-search-layout tr.title > td{padding:var(--dw-sp-3) var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout tr.title,
:root[data-theme="dark"] body #panel #content.routes-search-layout tr.title > td{color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;}

/* ── 3. Banda de seccion "Agregar rutas desde archivo" ── */
html body #panel #content.routes-search-layout #list-left-short tr.subtitle,
html body #panel #content.routes-search-layout #list-left-short tr.subtitle > td{height:auto!important;line-height:1.2!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;background-image:none!important;text-shadow:none!important;}
html body #panel #content.routes-search-layout #list-left-short tr.subtitle > td{padding:var(--dw-sp-2) var(--dw-sp-4)!important;border:0!important;border-top:1px solid var(--dw-border)!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-align:left!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short tr.subtitle,
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short tr.subtitle > td{color:var(--dw-ink-2)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;}

/* ── 4. Formulario de busqueda: campos a todo el ancho de la tarjeta ── */
html body #panel #content.routes-search-layout #list-left-short form[name="searchForm"] > table{width:100%!important;padding:var(--dw-sp-3) var(--dw-sp-4) 0!important;border-collapse:separate!important;border-spacing:0!important;box-sizing:border-box!important;}
html body #panel #content.routes-search-layout #list-left-short form[name="searchForm"] td{padding:var(--dw-sp-2) 0!important;vertical-align:middle!important;}
html body #panel #content.routes-search-layout #list-left-short form[name="searchForm"] td[align="right"]{width:1%!important;padding-right:var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;white-space:nowrap!important;}
html body #panel #content.routes-search-layout #list-left-short form[name="searchForm"] td[align="left"]{width:99%!important;}
html body #panel #content.routes-search-layout #list-left-short select,
html body #panel #content.routes-search-layout #list-left-short input[type="text"]{width:100%!important;min-width:0!important;max-width:none!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;line-height:32px!important;}
html body #panel #content.routes-search-layout #list-left-short select:hover,
html body #panel #content.routes-search-layout #list-left-short input[type="text"]:hover{border-color:var(--dw-ink-3)!important;}
html body #panel #content.routes-search-layout #list-left-short select:focus,
html body #panel #content.routes-search-layout #list-left-short input[type="text"]:focus{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short select,
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short input[type="text"]{color-scheme:dark;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short select:focus,
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-left-short input[type="text"]:focus{outline-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}

/* ── 5. Botones: Confirmar primario, Exportar secundario ── */
html body #panel #content.routes-search-layout a.button{height:34px!important;padding:0 var(--dw-sp-4)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;text-decoration:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.routes-search-layout a.button:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout a.button{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout a.button:hover{background:var(--dw-bright-300)!important;background-color:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
html body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]{color:var(--dw-primary)!important;background:transparent!important;background-color:transparent!important;border:1px solid var(--dw-primary)!important;}
html body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]:hover,
html body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]:focus{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]{color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;border-color:var(--dw-border)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]:hover,
:root[data-theme="dark"] body #panel #content.routes-search-layout a.button[onclick*="exportRecords"]:focus{color:var(--dw-accent)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.routes-search-layout #list-left-short table[cellspacing="5"]{margin:var(--dw-sp-2) 0 var(--dw-sp-4)!important;border-spacing:var(--dw-sp-2) 0!important;}

/* ── 6. Carga desde archivo ── */
html body #panel #content.routes-search-layout #upload_table td{padding:0!important;}
/* El td heredado trae overflow:hidden + nowrap + ellipsis: recorta el input
 * de archivo. Se libera y la etiqueta pasa a renglon propio. */
html body #panel #content.routes-search-layout #uploadForm table td{padding:var(--dw-sp-3) var(--dw-sp-4) 0!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;text-align:left!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.5!important;}
html body #panel #content.routes-search-layout #upload_table > tbody > tr:last-child > td{padding-bottom:var(--dw-sp-4)!important;}
html body #panel #content.routes-search-layout input[type="file"]{display:block!important;width:100%!important;max-width:none!important;margin:var(--dw-sp-2) 0!important;padding:var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border:1px dashed var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.routes-search-layout input[type="file"]::file-selector-button{margin-right:var(--dw-sp-3)!important;padding:6px var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;cursor:pointer!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout input[type="file"]{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout input[type="file"]::file-selector-button{color:var(--dw-accent)!important;background:var(--dw-line)!important;border-color:var(--dw-border)!important;}
html body #panel #content.routes-search-layout input[type="file"]:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
html body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"]{color:var(--dw-ink-2)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;vertical-align:middle!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;}
html body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"] > img{content:var(--dw-rt-blank)!important;display:block!important;width:16px!important;height:16px!important;margin:0!important;border:0!important;filter:none!important;background-color:var(--dw-ink-2)!important;-webkit-mask-image:var(--dw-rt-doc)!important;mask-image:var(--dw-rt-doc)!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px 16px;mask-size:16px 16px;}
html body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"]:hover{border-color:var(--dw-border)!important;background:var(--dw-bg)!important;}
html body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"]:hover > img{background-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"]:hover > img{background-color:var(--dw-accent)!important;}
html body #panel #content.routes-search-layout #uploadForm a[href*="routes.csv"]:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}

/* ── 7. Resultados: encabezado de columnas igual que Proveedores ── */
html body #panel #content.routes-search-layout #list-right-large tr.subtitle,
html body #panel #content.routes-search-layout #list-right-large tr.subtitle > td{height:auto!important;line-height:1.2!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;background-image:none!important;text-shadow:none!important;}
html body #panel #content.routes-search-layout #list-right-large tr.subtitle > td{padding:var(--dw-sp-3)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;text-transform:uppercase!important;white-space:nowrap!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-right-large tr.subtitle,
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-right-large tr.subtitle > td{color:var(--dw-ink-2)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;}

/* ── 8. Filas: sin cebra, jerarquia por hover ── */
html body #panel #content.routes-search-layout #users_list{padding-bottom:0!important;scrollbar-gutter:stable!important;}
html body #panel #content.routes-search-layout #users_list table{border-collapse:collapse!important;}
html body #panel #content.routes-search-layout #users_list tr.row1,
html body #panel #content.routes-search-layout #users_list tr.row2{height:auto!important;line-height:normal!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;transition:background-color .15s ease!important;}
html body #panel #content.routes-search-layout #users_list tr > td{height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink)!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-md)!important;line-height:1.3!important;text-indent:0!important;vertical-align:middle!important;}
html body #panel #content.routes-search-layout #users_list tr.row1:hover,
html body #panel #content.routes-search-layout #users_list tr.row2:hover{background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #users_list tr.row1:hover,
:root[data-theme="dark"] body #panel #content.routes-search-layout #users_list tr.row2:hover{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
html body #panel #content.routes-search-layout #users_list tr > td:nth-child(2){color:var(--dw-ink-2)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;font-variant-numeric:tabular-nums;}
html body #panel #content.routes-search-layout #users_list tr > td:nth-child(3){color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;font-variant-numeric:tabular-nums;}

/* ── 9. Accion borrar: control con estado, no un link verde ── */
html body #panel #content.routes-search-layout #users_list tr > td:last-child > a{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:26px!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.routes-search-layout #users_list tr > td:last-child > a:hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;background-color:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.routes-search-layout #users_list tr > td:last-child > a:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}

/* ── 10. Vacio y sin busqueda. `display` no se toca: lo togglea getRecords(). ── */
html body #panel #content.routes-search-layout #users_list tr > td[colspan]{padding:var(--dw-sp-6) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;border-bottom:0!important;font-size:var(--dw-fs-sm)!important;text-align:center!important;}
html body #panel #content.routes-search-layout #users_list #message{padding:var(--dw-sp-8) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-sm)!important;line-height:1.4!important;}
html body #panel #content.routes-search-layout #users_list #message::before{content:"";display:block;width:34px;height:34px;margin:0 auto var(--dw-sp-3);background-color:var(--dw-ink-3);-webkit-mask-image:var(--dw-rt-search);mask-image:var(--dw-rt-search);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:34px 34px;mask-size:34px 34px;}
html body #panel #content.routes-search-layout #users_list #message:empty::before{margin-bottom:0;}

/* ── 11. Paginado jPager. Las flechas son PNG heredados: mascara SVG y
 * filter:none, porque en oscuro un hue-rotate legacy las tine de lima. ── */
html body #panel #content.routes-search-layout #list-paging-right-large > span{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:26px!important;height:26px!important;margin:0 2px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;font-variant-numeric:tabular-nums;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span.pg-selected{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-paging-right-large > span:hover{color:var(--dw-accent)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.routes-search-layout #list-paging-right-large > span.pg-selected{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span > img{content:var(--dw-rt-blank)!important;display:block!important;width:15px!important;height:15px!important;margin:0!important;border:0!important;filter:none!important;-webkit-filter:none!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:15px 15px;mask-size:15px 15px;}
html body #panel #content.routes-search-layout #list-paging-right-large > span > img[src*="button_black_first"]{-webkit-mask-image:var(--dw-rt-first)!important;mask-image:var(--dw-rt-first)!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span > img[src*="button_black_rew"]{-webkit-mask-image:var(--dw-rt-prev)!important;mask-image:var(--dw-rt-prev)!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span > img[src*="button_black_ffw"]{-webkit-mask-image:var(--dw-rt-next)!important;mask-image:var(--dw-rt-next)!important;}
html body #panel #content.routes-search-layout #list-paging-right-large > span > img[src*="button_black_last"]{-webkit-mask-image:var(--dw-rt-last)!important;mask-image:var(--dw-rt-last)!important;}

/* ── 12. Scroll de resultados ── */
html body #panel #content.routes-search-layout #users_list::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;}
html body #panel #content.routes-search-layout #users_list::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.routes-search-layout #users_list::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;}
/* ── ROUTES SEARCH v1 END ── */

/* ── FOLLOWME DIALOG v1 — Usuarios > Servicios > Configurar Sigueme ──
 * El modal lo sirve process/followmeProc.php dentro de un Boxy, fuera de
 * #panel #content, asi que las capas v5 de pagina no lo alcanzaban y quedaba
 * la paleta legacy (#BFD922 en la cabecera, #F8FCF2/#E5F1D8 en las filas,
 * #bbbbbb inline en la fila de alta) y sin tema oscuro.
 * Solo CSS, todo colgado de #followme_boxy. No cambia HTML, IDs, names,
 * onclick, callbacks ni rutas.
 * Ojo: los width inline (340px del dialogo, 140px del select, 90/30px de los
 * inputs) y el background-color:#bbbbbb de la fila de alta se pisan con
 * !important, que le gana a inline no-important.
 */
.boxy-wrapper #followme_boxy{--dw-fm-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-fm-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-fm-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 9.8l4-4 4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-fm-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-fm-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.4v9.2M3.4 8h9.2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-fm-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5l3.1 3.1 6.1-6.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* ── 1. Caja del dialogo ── */
.boxy-wrapper #followme_boxy{width:520px!important;max-width:92vw!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;}
.boxy-wrapper #followme_boxy table{border-collapse:collapse!important;}
.boxy-wrapper #followme_boxy td{color:var(--dw-ink)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;}

/* ── 2. Fila del tipo de sigueme. La linea lima de .bordertop1 sobra: el
 * title-bar del Boxy ya trae su propio borde inferior. ── */
.boxy-wrapper #followme_boxy > table > tbody > tr:first-child{height:auto!important;}
.boxy-wrapper #followme_boxy > table > tbody > tr:first-child > td{height:auto!important;padding:var(--dw-sp-4) var(--dw-sp-4) var(--dw-sp-3)!important;vertical-align:middle!important;}
.boxy-wrapper #followme_boxy > table > tbody > tr:first-child > td.bordertop1{border-top:0!important;}
.boxy-wrapper #followme_boxy > table > tbody > tr:first-child > td[align="right"]{width:1%!important;padding-right:var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;white-space:nowrap!important;}

/* ── 3. Controles ── */
.boxy-wrapper #followme_boxy select,
.boxy-wrapper #followme_boxy input[type="text"]{height:32px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;line-height:30px!important;}
.boxy-wrapper #followme_boxy #fm_type{width:100%!important;min-width:220px!important;}
.boxy-wrapper #followme_boxy input[name^="fm_list_dest_"],
.boxy-wrapper #followme_boxy #fm_new_dest{width:100%!important;min-width:0!important;font-variant-numeric:tabular-nums;}
.boxy-wrapper #followme_boxy input[name^="fm_list_ringtime_"],
.boxy-wrapper #followme_boxy #fm_new_ringtime{width:56px!important;min-width:0!important;text-align:center!important;font-variant-numeric:tabular-nums;}
.boxy-wrapper #followme_boxy select:hover,
.boxy-wrapper #followme_boxy input[type="text"]:hover{border-color:var(--dw-ink-3)!important;}
.boxy-wrapper #followme_boxy select:focus,
.boxy-wrapper #followme_boxy input[type="text"]:focus{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;border-color:var(--dw-primary)!important;}
.boxy-wrapper #followme_boxy input[type="text"]:disabled,
.boxy-wrapper #followme_boxy select:disabled{color:var(--dw-ink-3)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;cursor:not-allowed!important;}
.boxy-wrapper #followme_boxy input[type="checkbox"]{width:16px!important;height:16px!important;margin:0!important;accent-color:var(--dw-primary);vertical-align:middle!important;cursor:pointer!important;}
.boxy-wrapper #followme_boxy input[type="checkbox"]:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy select,
:root[data-theme="dark"] .boxy-wrapper #followme_boxy input[type="text"]{color-scheme:dark;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy select:focus,
:root[data-theme="dark"] .boxy-wrapper #followme_boxy input[type="text"]:focus{outline-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy input[type="checkbox"]{accent-color:var(--dw-accent);}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy input[type="text"]:disabled,
:root[data-theme="dark"] .boxy-wrapper #followme_boxy select:disabled{background:var(--dw-line)!important;background-color:var(--dw-line)!important;}

/* ── 4. Zona con scroll: el dialogo crece con la pantalla en vez de recortar
 * la lista a 200px fijos. ── */
.boxy-wrapper #followme_boxy td[colspan="2"] > div{max-height:min(52vh,420px)!important;overflow:auto!important;scrollbar-gutter:stable!important;}
.boxy-wrapper #followme_boxy td[colspan="2"] > div::-webkit-scrollbar{width:10px!important;height:10px!important;background:transparent!important;}
.boxy-wrapper #followme_boxy td[colspan="2"] > div::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
.boxy-wrapper #followme_boxy td[colspan="2"] > div::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;}

/* ── 5. Cabecera de la tabla: fuera el lima ── */
.boxy-wrapper #followme_boxy tr.subtitle{height:auto!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;background-image:none!important;}
.boxy-wrapper #followme_boxy tr.subtitle > td{padding:var(--dw-sp-2) var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border:0!important;border-top:1px solid var(--dw-border)!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:.05em!important;line-height:1.2!important;text-shadow:none!important;text-transform:uppercase!important;white-space:nowrap!important;}
.boxy-wrapper #followme_boxy tr.subtitle > td:first-child{padding-left:var(--dw-sp-4)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy tr.subtitle,
:root[data-theme="dark"] .boxy-wrapper #followme_boxy tr.subtitle > td{color:var(--dw-ink-2)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;}

/* ── 6. Filas de destinos: sin cebra, jerarquia por hover ── */
.boxy-wrapper #followme_boxy tr.boxyrow1,
.boxy-wrapper #followme_boxy tr.boxyrow2{height:auto!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;transition:background-color .15s ease!important;}
.boxy-wrapper #followme_boxy tr.boxyrow1 > td,
.boxy-wrapper #followme_boxy tr.boxyrow2 > td{padding:var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-sm)!important;vertical-align:middle!important;}
.boxy-wrapper #followme_boxy tr.boxyrow1 > td:first-child,
.boxy-wrapper #followme_boxy tr.boxyrow2 > td:first-child{padding-left:var(--dw-sp-4)!important;}
.boxy-wrapper #followme_boxy tr.boxyrow1:hover,
.boxy-wrapper #followme_boxy tr.boxyrow2:hover{background:var(--dw-primary-soft)!important;background-color:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy tr.boxyrow1:hover,
:root[data-theme="dark"] .boxy-wrapper #followme_boxy tr.boxyrow2:hover{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}

/* ── 7. Fila de alta: era una banda gris #bbbbbb puesta inline ── */
.boxy-wrapper #followme_boxy #followmeForm tr[style*="bbbbbb"]{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
.boxy-wrapper #followme_boxy #followmeForm tr[style*="bbbbbb"] > td{padding:var(--dw-sp-3) var(--dw-sp-2)!important;background:transparent!important;border:0!important;border-top:1px solid var(--dw-border)!important;vertical-align:middle!important;}
.boxy-wrapper #followme_boxy #followmeForm tr[style*="bbbbbb"] > td:first-child{padding-left:var(--dw-sp-4)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy #followmeForm tr[style*="bbbbbb"]{background:var(--dw-line)!important;background-color:var(--dw-line)!important;}

/* ── 8. Iconos de accion: PNG heredados recoloreados con mascara SVG ── */
.boxy-wrapper #followme_boxy td a[onclick]{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;margin:0 1px!important;padding:0!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;vertical-align:middle!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
.boxy-wrapper #followme_boxy td a[onclick] > img{content:var(--dw-fm-blank)!important;display:block!important;width:15px!important;height:15px!important;margin:0!important;padding:0!important;border:0!important;filter:none!important;-webkit-filter:none!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:15px 15px;mask-size:15px 15px;}
.boxy-wrapper #followme_boxy td a[onclick] > img[src*="down.png"]{-webkit-mask-image:var(--dw-fm-down)!important;mask-image:var(--dw-fm-down)!important;}
.boxy-wrapper #followme_boxy td a[onclick] > img[src*="up.png"]{-webkit-mask-image:var(--dw-fm-up)!important;mask-image:var(--dw-fm-up)!important;}
.boxy-wrapper #followme_boxy td a[onclick] > img[src*="Cross"]{-webkit-mask-image:var(--dw-fm-x)!important;mask-image:var(--dw-fm-x)!important;}
.boxy-wrapper #followme_boxy td a[onclick] > img[src*="plus_icon"]{-webkit-mask-image:var(--dw-fm-plus)!important;mask-image:var(--dw-fm-plus)!important;}
.boxy-wrapper #followme_boxy td a[onclick]:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy td a[onclick]:hover{color:var(--dw-accent)!important;background:var(--dw-line)!important;border-color:var(--dw-accent)!important;}
.boxy-wrapper #followme_boxy td a[onclick]:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}
/* Degradacion controlada: el rojo de borrar solo si :has() existe. */
@supports selector(:has(*)) {
.boxy-wrapper #followme_boxy td a[onclick]:has(img[src*="Cross"]):hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy td a[onclick]:has(img[src*="Cross"]):hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
.boxy-wrapper #followme_boxy td a[onclick]:has(img[src*="plus_icon"]):hover{color:var(--dw-primary)!important;}
}
/* El contenedor del boton + trae width:44px y text-align:right inline. */
.boxy-wrapper #followme_boxy #followmeForm td > div[style*="44px"]{width:auto!important;text-align:center!important;}
/* Las celdas de accion van a ancho fijo: subir/bajar faltan en la primera y en
 * la ultima fila, y sin ancho fijo los iconos bailan de fila en fila. */
.boxy-wrapper #followme_boxy #followmeForm td > table{width:auto!important;margin:0 auto!important;}
.boxy-wrapper #followme_boxy #followmeForm td > table td{width:28px!important;padding:0!important;border:0!important;text-align:center!important;}

/* ── 8b. Anchos de columna: el destino puede ser un numero largo ── */
.boxy-wrapper #followme_boxy #followmeForm > table{table-layout:fixed!important;}
.boxy-wrapper #followme_boxy #followmeForm tr > td:nth-child(1){width:40%!important;}
.boxy-wrapper #followme_boxy #followmeForm tr > td:nth-child(2){width:17%!important;}
.boxy-wrapper #followme_boxy #followmeForm tr > td:nth-child(3){width:25%!important;}
.boxy-wrapper #followme_boxy #followmeForm tr > td:nth-child(4){width:18%!important;}

/* ── 9. Pie: Cancelar secundario, Confirmar primario ── */
.boxy-wrapper #followme_boxy tr[height="50"] > td{padding:var(--dw-sp-4)!important;}
.boxy-wrapper #followme_boxy tr[height="50"] table{width:auto!important;margin:0 0 0 auto!important;}
.boxy-wrapper #followme_boxy tr[height="50"] table td{padding:0 0 0 var(--dw-sp-2)!important;}
.boxy-wrapper #followme_boxy .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;width:auto!important;min-width:104px!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;background-image:none!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;line-height:1.2!important;text-shadow:none!important;white-space:nowrap!important;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
.boxy-wrapper #followme_boxy .boxybutton:hover{color:var(--dw-on-primary)!important;background:var(--dw-primary-hover)!important;background-color:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy .boxybutton{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy .boxybutton:hover{background:var(--dw-bright-300)!important;background-color:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
.boxy-wrapper #followme_boxy .boxybutton > img{content:var(--dw-fm-blank)!important;display:block!important;width:14px!important;height:14px!important;margin:0!important;border:0!important;filter:none!important;-webkit-filter:none!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
.boxy-wrapper #followme_boxy .boxybutton > img[src*="Cross_12"]{-webkit-mask-image:var(--dw-fm-x)!important;mask-image:var(--dw-fm-x)!important;}
.boxy-wrapper #followme_boxy .boxybutton > img[src*="Checkmark_12"]{-webkit-mask-image:var(--dw-fm-check)!important;mask-image:var(--dw-fm-check)!important;}
/* Cancelar: el unico con el icono de cruz. */
@supports selector(:has(*)) {
.boxy-wrapper #followme_boxy .boxybutton:has(img[src*="Cross_12"]){color:var(--dw-ink-2)!important;background:transparent!important;background-color:transparent!important;border-color:var(--dw-border)!important;}
.boxy-wrapper #followme_boxy .boxybutton:has(img[src*="Cross_12"]):hover{color:var(--dw-ink)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-color:var(--dw-ink-3)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy .boxybutton:has(img[src*="Cross_12"]){color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;border-color:var(--dw-border)!important;}
:root[data-theme="dark"] .boxy-wrapper #followme_boxy .boxybutton:has(img[src*="Cross_12"]):hover{color:var(--dw-ink)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;border-color:var(--dw-ink-3)!important;}
}
.boxy-wrapper #followme_boxy .boxybutton:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}

/* ── 10. Etiqueta (seg) y separadores ── */
.boxy-wrapper #followme_boxy #followmeForm td{white-space:nowrap!important;}
.boxy-wrapper #followme_boxy #followmeForm > table{width:100%!important;}
.boxy-wrapper #followme_boxy .bordertop1{border-top-color:var(--dw-border)!important;}
/* ── FOLLOWME DIALOG v1 END ── */

/* ── FOOTER BAR v1 — pie de pagina global (footer.php) ──
 * Reemplaza la banda verde heredada: denwa.css la pinta con
 * #panel #footer{background-image:url(../images/footer.jpg)} y el bloque v5
 * viejo (#footer, un solo ID) nunca le gana. Aca se apaga la imagen, se pasa a
 * superficie del DS con borde superior, texto en tinta suave y el enlace con
 * hover y foco visibles en claro y oscuro.
 * Solo CSS. No cambia HTML, IDs, enlaces ni el script de tareas del footer.
 */
html body #panel #footer{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--dw-sp-2)!important;width:100%!important;height:auto!important;min-height:36px!important;margin:auto 0 0!important;padding:var(--dw-sp-2) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:0!important;border-top:1px solid var(--dw-border)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-xs)!important;font-weight:400!important;letter-spacing:.01em!important;line-height:1.4!important;text-align:right!important;text-shadow:none!important;}

/* La tabla heredada (align="right" height="100%") pasa a ser un renglon mas. */
html body #panel #footer > table{width:auto!important;height:auto!important;margin:0!important;border:0!important;border-collapse:collapse!important;}
html body #panel #footer > table td{padding:0!important;color:inherit!important;background:transparent!important;border:0!important;font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;text-align:right!important;white-space:nowrap!important;}

/* Enlace: subrayado solo al pasar, y foco visible con teclado. */
html body #panel #footer a{color:var(--dw-ink-2)!important;background:transparent!important;border-bottom:1px solid transparent!important;font-weight:600!important;text-decoration:none!important;transition:color .15s ease,border-color .15s ease!important;}
html body #panel #footer a:hover{color:var(--dw-primary)!important;border-bottom-color:var(--dw-primary)!important;}
html body #panel #footer a:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;border-bottom-color:transparent!important;border-radius:var(--dw-radius-sm)!important;}
:root[data-theme="dark"] body #panel #footer a:hover{color:var(--dw-accent)!important;border-bottom-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #footer a:focus-visible{outline-color:var(--dw-accent)!important;}

/* En pantallas angostas el texto puede pasar a dos renglones sin recortarse. */
@media (max-width:900px){
html body #panel #footer{justify-content:center!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;text-align:center!important;}
html body #panel #footer > table td{white-space:normal!important;text-align:center!important;}
}
/* ── FOOTER BAR v1 END ── */

/* ── USERS VIEW CARDS v1 — Usuarios > Ver usuarios, segunda vista ──
 * Agrega la vista de tarjetas sobre el MISMO markup que ya genera loadUsers():
 * .users-grid-row con sus .users-cell--check/who/ext/mode/status/acts. El
 * conmutador de users.php solo pone la clase .users-view-cards en #list2, asi
 * que la lista y las tarjetas comparten filas, filtros, seleccion y paginado.
 * Solo tokens del design system.
 */

/* ── 1. Conmutador de vista, mismo control segmentado que Densidad ── */
#panel #content.users-page .users-view{display:inline-flex;padding:2px;border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill)}
#panel #content.users-page a.users-view-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;border-radius:var(--dw-radius-pill);color:var(--dw-ink-2)!important;text-decoration:none;transition:background .15s ease,color .15s ease}
#panel #content.users-page a.users-view-btn:hover{color:var(--dw-ink)!important}
#panel #content.users-page a.users-view-btn.is-on{background:var(--dw-primary-soft);color:var(--dw-accent-ink)!important}
#panel #content.users-page a.users-view-btn .bi{font-size:14px;line-height:1}
#panel #content.users-page a.users-view-btn:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px}

/* ── 2. Alto de referencia. usersRowHeight() lee --u-row para calcular
 * cuantos registros entran; usersGridColumns() lo multiplica por las columnas
 * reales de la grilla, asi el paginado sigue llenando la pantalla. ── */
#panel #content.users-page #list2.users-view-cards{--u-row:146px}
#panel #content.users-page #list2.users-view-cards.users-dense{--u-row:112px}

/* ── 3. La cabecera de columnas pasa a ser una barra de filtros ──
 * En tarjetas no hay columnas que rotular, pero los tres filtros
 * (nombre, extension, modo) tienen que seguir a mano. */
#panel #content.users-page #list2.users-view-cards .users-grid-header{display:flex!important;align-items:center;flex-wrap:wrap;gap:var(--dw-sp-4);height:auto!important;min-height:44px!important;padding:var(--dw-sp-2) var(--dw-sp-4)!important}
#panel #content.users-page #list2.users-view-cards .users-grid-header .users-cell{flex:0 0 auto;width:auto;height:28px;gap:var(--dw-sp-2);justify-content:flex-start}
#panel #content.users-page #list2.users-view-cards .users-grid-header .users-cell--check,
#panel #content.users-page #list2.users-view-cards .users-grid-header .users-cell--status,
#panel #content.users-page #list2.users-view-cards .users-grid-header .users-cell--acts{display:none!important}
#panel #content.users-page #list2.users-view-cards .users-grid-header .users-cell--mode .quick_filter_cont{right:auto;left:0}

/* ── 4. La lista pasa a grilla de tarjetas. El display lo escribe
 * setUsersView() en el inline de #users_list: loadUsers() lo esconde y lo
 * muestra con jQuery, y un display:grid con !important en la hoja le ganaria
 * al display:none inline y dejaria la lista visible mientras carga. ── */
#panel #content.users-page #list2.users-view-cards #users_list{grid-template-columns:repeat(auto-fill,minmax(276px,1fr));align-content:start;gap:var(--dw-sp-3);min-height:0;padding:var(--dw-sp-4)}
#panel #content.users-page #list2.users-view-cards.users-dense #users_list{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
#panel #content.users-page #list2.users-view-cards #users_list > .users-state{grid-column:1/-1}

/* ── 5. La fila pasa a tarjeta ── */
#panel #content.users-page #list2.users-view-cards .users-grid-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who who" "ext mode" "status acts";align-items:center;row-gap:var(--dw-sp-2);column-gap:var(--dw-sp-2);width:auto;height:auto!important;min-height:0!important;padding:var(--dw-sp-3)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;background:var(--dw-surface)!important;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
#panel #content.users-page #list2.users-view-cards .users-grid-row:before{content:none!important}
#panel #content.users-page #list2.users-view-cards .users-grid-row:hover{border-color:var(--dw-primary)!important;background:var(--dw-surface)!important;box-shadow:var(--dw-shadow)!important}
#panel #content.users-page #list2.users-view-cards .users-grid-row:focus-within{border-color:var(--dw-primary)!important}
#panel #content.users-page #list2.users-view-cards .users-grid-row .users-cell{height:auto;min-width:0}

/* ── 6. Celdas dentro de la tarjeta ── */
#panel #content.users-page #list2.users-view-cards .users-cell--check{position:absolute;top:var(--dw-sp-3);right:var(--dw-sp-3);width:auto;height:auto;opacity:0;transition:opacity .12s ease}
#panel #content.users-page #list2.users-view-cards .users-grid-row:hover .users-cell--check,
#panel #content.users-page #list2.users-view-cards .users-grid-row:focus-within .users-cell--check,
#panel #content.users-page #list2.users-view-cards .users-grid-row:has(.chkbox_enabled) .users-cell--check{opacity:1}
#panel #content.users-page #list2.users-view-cards .users-cell--who{grid-area:who;align-items:flex-start;gap:var(--dw-sp-3);padding-right:26px}
#panel #content.users-page #list2.users-view-cards .users-avatar{flex:0 0 40px;width:40px;height:40px;font-size:var(--dw-fs-md)}
#panel #content.users-page #list2.users-view-cards.users-dense .users-avatar{flex:0 0 32px;width:32px;height:32px;font-size:var(--dw-fs-sm)}
#panel #content.users-page #list2.users-view-cards a.users-who-name{font-size:var(--dw-fs-lg);line-height:1.3;white-space:normal;overflow:visible;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#panel #content.users-page #list2.users-view-cards.users-dense a.users-who-name{font-size:var(--dw-fs-md);-webkit-line-clamp:1}
#panel #content.users-page #list2.users-view-cards .users-who-mail{margin-top:2px}
#panel #content.users-page #list2.users-view-cards .users-cell--ext{grid-area:ext;justify-content:flex-start}
#panel #content.users-page #list2.users-view-cards .users-cell--mode{grid-area:mode;justify-content:flex-end}
#panel #content.users-page #list2.users-view-cards .users-cell--status{grid-area:status;justify-content:flex-start}
#panel #content.users-page #list2.users-view-cards .users-cell--acts{grid-area:acts;justify-content:flex-end}

/* ── 7. Seleccion: borde y fondo, no solo color de fondo ── */
@supports selector(:has(*)) {
#panel #content.users-page #list2.users-view-cards .users-grid-row:has(.chkbox_enabled){border-color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;box-shadow:none!important}
}

/* ── 8. Esqueleto de carga: en tarjetas --u-row es alto de tarjeta, no de
 * renglon, asi que el esqueleto vuelve a su alto propio. ── */
#panel #content.users-page #list2.users-view-cards .users-skel-row{height:56px}

/* ── 9. Sin hover (tactil) las acciones y el check quedan siempre visibles ── */
@media (hover:none){
#panel #content.users-page #list2.users-view-cards .users-cell--check,
#panel #content.users-page #list2.users-view-cards .users-cell--acts{opacity:1}
}
@media (prefers-reduced-motion:reduce){
#panel #content.users-page #list2.users-view-cards .users-cell--check{opacity:1}
}

/* ── 10. 1366x768: la barra de herramientas ya envuelve; las tarjetas bajan
 * el minimo para que sigan entrando tres por renglon. ── */
@media (max-width:1200px){
#panel #content.users-page #list2.users-view-cards #users_list{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--dw-sp-2);padding:var(--dw-sp-3)}
#panel #content.users-page #list2.users-view-cards .users-grid-header{gap:var(--dw-sp-3);padding:var(--dw-sp-2) var(--dw-sp-3)!important}
}
/* ── USERS VIEW CARDS v1 END ── */

/* ── IVR MAP v1 — Preatendedor > Ver Preatendedor-Colas, vista Mapa ──
 * Segunda vista de la pantalla: el arbol que antes se veia como lista
 * indentada dentro de un Boxy de 800x510 pasa a ser un diagrama de izquierda
 * a derecha en el panel derecho, con el mismo JSON de get_tree.
 * El conmutador solo pone la clase .ivr-view-map en #content.
 * Solo tokens del design system: aca no hay un hexadecimal.
 */

/* ── 1. La fila de pestanas pasa de 25px a 34px para alojar el conmutador ── */
html body #panel #content.ivr-layout,
html body #panel #content.ivr-layout.ivr-queue-layout{grid-template-rows:auto 34px minmax(0,1fr) 34px!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu,
html body #panel #content.ivr-layout.ivr-queue-layout .short_right_tabs_menu{height:34px!important;min-height:34px!important;padding-right:150px!important;}
html body #panel #content.ivr-layout .short_right_tabs_menu .shorttab{height:34px!important;line-height:30px!important;}

/* ── 2. Conmutador Formulario / Mapa, mismo control segmentado que Densidad
 * en Ver Usuarios. Vive en la fila de pestanas, pegado a la derecha. ── */
html body #panel #content.ivr-layout .ivr-viewsw{grid-column:2!important;grid-row:2!important;z-index:6;display:flex;align-items:center;gap:var(--dw-sp-2);justify-self:end;align-self:center;padding-right:var(--dw-sp-1);pointer-events:auto;}
html body #panel #content.ivr-layout .ivr-viewsw-lbl{color:var(--dw-ink-3);font-size:var(--dw-fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
html body #panel #content.ivr-layout .ivr-viewsw-grp{display:inline-flex;padding:2px;background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);}
html body #panel #content.ivr-layout a.ivr-viewsw-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;border-radius:var(--dw-radius-pill);color:var(--dw-ink-2)!important;text-decoration:none!important;transition:background .15s ease,color .15s ease;}
html body #panel #content.ivr-layout a.ivr-viewsw-btn:hover{color:var(--dw-ink)!important;}
html body #panel #content.ivr-layout a.ivr-viewsw-btn.is-on{background:var(--dw-primary-soft);color:var(--dw-accent-ink)!important;}
html body #panel #content.ivr-layout a.ivr-viewsw-btn .bi{font-size:14px;line-height:1;}
html body #panel #content.ivr-layout a.ivr-viewsw-btn:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}

/* ── 3. El panel del mapa ocupa el lado derecho completo ── */
html body #panel #content.ivr-layout .ivr-map{display:none;grid-column:2!important;grid-row:2/5!important;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);}
html body #panel #content.ivr-layout.ivr-view-map .ivr-map{display:flex;}
html body #panel #content.ivr-layout.ivr-view-map .short_right_tabs_menu,
html body #panel #content.ivr-layout.ivr-view-map .short_right_tabscontent_background,
html body #panel #content.ivr-layout.ivr-view-map .short_right_tab_footer{display:none!important;}
/* Con el mapa a la vista, la lista se corre a un riel angosto. */
html body #panel #content.ivr-layout.ivr-view-map{grid-template-columns:minmax(260px,330px) minmax(0,1fr)!important;}
/* La lista pasa a ser el selector del mapa: sin columna de acciones entra
 * sin recortes en el riel angosto. Editar y borrar siguen en vista formulario. */
html body #panel #content.ivr-layout.ivr-view-map #list-left #ivr_table tr.title > td:nth-child(3),
html body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr > td:nth-child(3){display:none!important;}
html body #panel #content.ivr-layout.ivr-view-map #list-left #ivr_table tr.title > td:nth-child(1),
html body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr > td:nth-child(1){width:66%!important;}
html body #panel #content.ivr-layout.ivr-view-map #list-left #ivr_table tr.title > td:nth-child(2),
html body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr > td:nth-child(2){width:34%!important;}

/* La entidad dibujada queda marcada en la lista. */
html body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr.is-mapped > td{background:var(--dw-primary-soft)!important;box-shadow:inset 3px 0 0 var(--dw-primary);}
html body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr.is-mapped > td:first-child > a{color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr.is-mapped > td{background:var(--dw-line)!important;box-shadow:inset 3px 0 0 var(--dw-accent);}
:root[data-theme="dark"] body #panel #content.ivr-layout.ivr-view-map #ivrs_list tr.is-mapped > td:first-child > a{color:var(--dw-accent)!important;}

/* ── 4. Barra del mapa ── */
html body #panel #content.ivr-layout .dwm-bar{display:flex;align-items:center;gap:var(--dw-sp-3);flex:0 0 auto;height:44px;padding:0 156px 0 var(--dw-sp-4);border-bottom:1px solid var(--dw-border);background:var(--dw-bg);box-sizing:border-box;}
html body #panel #content.ivr-layout .dwm-title{overflow:hidden;color:var(--dw-ink);font-size:var(--dw-fs-md);font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-layout .dwm-grow{flex:1 1 auto;}
html body #panel #content.ivr-layout .dwm-legend{position:absolute;z-index:4;bottom:var(--dw-sp-3);left:var(--dw-sp-3);display:flex;align-items:center;gap:var(--dw-sp-3);padding:6px var(--dw-sp-3);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);box-shadow:var(--dw-shadow);}
html body #panel #content.ivr-layout .dwm-lg{display:inline-flex;align-items:center;gap:5px;color:var(--dw-ink-3);font-size:var(--dw-fs-xs);white-space:nowrap;}
html body #panel #content.ivr-layout .dwm-lg:before{width:8px;height:8px;border-radius:2px;content:"";}
html body #panel #content.ivr-layout .dwm-lg--ivr:before{background:var(--dw-primary);}
html body #panel #content.ivr-layout .dwm-lg--queue:before{background:var(--dw-info);}
html body #panel #content.ivr-layout .dwm-lg--group:before{background:var(--dw-warning);}
html body #panel #content.ivr-layout .dwm-lg--application:before{background:var(--dw-success);}
html body #panel #content.ivr-layout .dwm-lg--extension:before{background:var(--dw-ink-3);}
html body #panel #content.ivr-layout .dwm-tools{display:inline-flex;align-items:center;gap:2px;}
html body #panel #content.ivr-layout .dwm-sep{width:1px;height:18px;margin:0 var(--dw-sp-2);background:var(--dw-border);}
/* El tema oscuro heredado pinta CUALQUIER <button> de #content con
 * background: var(--dw-green) !important, asi que aca hace falta !important. */
html body #panel #content.ivr-layout button.dwm-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;text-shadow:none!important;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
html body #panel #content.ivr-layout button.dwm-btn:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-layout button.dwm-btn:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
html body #panel #content.ivr-layout button.dwm-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-layout .dwm-zoom{min-width:42px;color:var(--dw-ink-2);font-family:var(--dw-font-mono);font-size:var(--dw-fs-xs);font-variant-numeric:tabular-nums;text-align:center;}
:root[data-theme="dark"] body #panel #content.ivr-layout button.dwm-btn:hover{color:var(--dw-accent)!important;background:var(--dw-line)!important;border-color:var(--dw-accent)!important;}

/* ── 5. Lienzo ── */
html body #panel #content.ivr-layout .dwm-viewport{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:var(--dw-bg);cursor:grab;}
/* flex-basis 0 a proposito: con basis auto el alto del lienzo (que puede ser
 * de miles de px) se vuelve el tamano base del flex y estira toda la pagina. */
html body #panel #content.ivr-layout .dwm-viewport.is-dragging{cursor:grabbing;}
html body #panel #content.ivr-layout .dwm-canvas{position:relative;transform-origin:0 0;}
html body #panel #content.ivr-layout .dwm-links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;}
html body #panel #content.ivr-layout .dwm-link{fill:none;stroke:var(--dw-line-2);stroke-width:2;stroke-linecap:round;transition:stroke .15s ease,stroke-width .15s ease;}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-link{stroke:var(--dw-border);}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-link{opacity:.35;}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-link.is-lit{opacity:1;stroke:var(--dw-primary);stroke-width:2.5;}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-link.is-lit{stroke:var(--dw-accent);}

/* ── 6. Pastilla de la opcion marcada sobre el conector ── */
html body #panel #content.ivr-layout .dwm-opt{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;color:var(--dw-ink-2);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);box-sizing:border-box;font-family:var(--dw-font-mono);font-size:var(--dw-fs-xs);font-weight:600;font-variant-numeric:tabular-nums;transform:translate(-50%,-50%);}
html body #panel #content.ivr-layout .dwm-opt--def{color:var(--dw-ink-3);border-style:dashed;}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-opt{opacity:.35;}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-opt.is-lit{opacity:1;color:var(--dw-on-primary);background:var(--dw-primary);border-color:var(--dw-primary);}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-opt.is-lit{color:var(--dw-brand-black);background:var(--dw-accent);border-color:var(--dw-accent);}

/* ── 7. Tarjeta de nodo. El tipo se distingue por icono, texto y color, nunca
 * solo por color. ── */
html body #panel #content.ivr-layout .dwm-node{position:absolute;z-index:3;display:flex;align-items:center;gap:var(--dw-sp-3);padding:0 var(--dw-sp-3) 0 var(--dw-sp-4);overflow:hidden;color:var(--dw-ink);background:var(--dw-surface);border:1px solid var(--dw-border);border-left:3px solid var(--dw-ink-3);border-radius:var(--dw-radius);box-sizing:border-box;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
html body #panel #content.ivr-layout .dwm-node:hover{box-shadow:var(--dw-shadow-2);}
html body #panel #content.ivr-layout .dwm-node:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-node{opacity:.4;}
html body #panel #content.ivr-layout .dwm-canvas.is-tracing .dwm-node.is-lit{opacity:1;}
html body #panel #content.ivr-layout .dwm-node-ic{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--dw-radius-sm);background:var(--dw-bg);}
html body #panel #content.ivr-layout .dwm-node-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-layout .dwm-node-txt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;flex:1 1 auto;}
html body #panel #content.ivr-layout .dwm-node-ttl{overflow:hidden;color:var(--dw-ink);font-size:var(--dw-fs-md);font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-layout .dwm-node-sub{overflow:hidden;color:var(--dw-ink-2);font-size:var(--dw-fs-xs);line-height:1.3;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-layout .dwm-node-kind{font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
html body #panel #content.ivr-layout .dwm-node-dot{padding:0 5px;color:var(--dw-ink-3);}

html body #panel #content.ivr-layout .dwm-node--root{border-left-color:var(--dw-primary);}
html body #panel #content.ivr-layout .dwm-node--root .dwm-node-ic{color:var(--dw-on-primary);background:var(--dw-primary);}
html body #panel #content.ivr-layout .dwm-node--ivr{border-left-color:var(--dw-primary);}
html body #panel #content.ivr-layout .dwm-node--ivr .dwm-node-ic{color:var(--dw-primary);background:var(--dw-primary-soft);}
html body #panel #content.ivr-layout .dwm-node--queue{border-left-color:var(--dw-info);}
html body #panel #content.ivr-layout .dwm-node--queue .dwm-node-ic{color:var(--dw-info);background:var(--dw-info-soft);}
html body #panel #content.ivr-layout .dwm-node--group{border-left-color:var(--dw-warning);}
html body #panel #content.ivr-layout .dwm-node--group .dwm-node-ic{color:var(--dw-warning);background:var(--dw-warning-soft);}
html body #panel #content.ivr-layout .dwm-node--application{border-left-color:var(--dw-success);}
html body #panel #content.ivr-layout .dwm-node--application .dwm-node-ic{color:var(--dw-success);background:var(--dw-success-soft);}
html body #panel #content.ivr-layout .dwm-node--extension{border-left-color:var(--dw-ink-3);}
html body #panel #content.ivr-layout .dwm-node--extension .dwm-node-ic{color:var(--dw-ink-2);background:var(--dw-line);}
html body #panel #content.ivr-layout .dwm-node--root .dwm-node-kind,
html body #panel #content.ivr-layout .dwm-node--ivr .dwm-node-kind{color:var(--dw-primary);}
html body #panel #content.ivr-layout .dwm-node--queue .dwm-node-kind{color:var(--dw-info);}
html body #panel #content.ivr-layout .dwm-node--group .dwm-node-kind{color:var(--dw-warning);}
html body #panel #content.ivr-layout .dwm-node--application .dwm-node-kind{color:var(--dw-success);}
html body #panel #content.ivr-layout .dwm-node--extension .dwm-node-kind{color:var(--dw-ink-3);}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--root .dwm-node-ic{color:var(--dw-brand-black);background:var(--dw-accent);}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--root,
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--ivr{border-left-color:var(--dw-accent);}
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--ivr .dwm-node-ic,
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--root .dwm-node-kind,
:root[data-theme="dark"] body #panel #content.ivr-layout .dwm-node--ivr .dwm-node-kind{color:var(--dw-accent);}

/* ── 8. Bucle: chapita con texto, no solo un icono ── */
html body #panel #content.ivr-layout .dwm-flag{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:20px;padding:0 7px;color:var(--dw-danger);background:var(--dw-danger-soft);border-radius:var(--dw-radius-pill);font-size:var(--dw-fs-xs);font-weight:600;white-space:nowrap;}
html body #panel #content.ivr-layout .dwm-flag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ── 9. Plegar y desplegar una rama ── */
html body #panel #content.ivr-layout button.dwm-fold{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;padding:0;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;text-shadow:none!important;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
html body #panel #content.ivr-layout button.dwm-fold svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease;}
html body #panel #content.ivr-layout button.dwm-fold.is-open svg{transform:rotate(90deg);}
html body #panel #content.ivr-layout button.dwm-fold:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-layout button.dwm-fold:hover{color:var(--dw-accent)!important;background:var(--dw-line)!important;border-color:var(--dw-accent)!important;}
html body #panel #content.ivr-layout button.dwm-fold:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}

/* ── 10. Vacio, cargando y error ── */
html body #panel #content.ivr-layout .dwm-state{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;gap:var(--dw-sp-3);width:min(420px,80%);transform:translate(-50%,-50%);text-align:center;}
html body #panel #content.ivr-layout .dwm-state-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--dw-ink-3);background:var(--dw-line);border-radius:var(--dw-radius-pill);}
html body #panel #content.ivr-layout .dwm-state-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-layout .dwm-state-txt{color:var(--dw-ink-2);font-size:var(--dw-fs-sm);line-height:1.45;}
html body #panel #content.ivr-layout .dwm-state--error .dwm-state-ic{color:var(--dw-danger);background:var(--dw-danger-soft);}
html body #panel #content.ivr-layout .dwm-state--loading .dwm-state-ic{animation:dwm-pulse 1.3s ease-in-out infinite;}
@keyframes dwm-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── 11. 1366x768 y angosto ── */
@media (max-width:1200px){
html body #panel #content.ivr-layout.ivr-view-map{grid-template-columns:minmax(220px,270px) minmax(0,1fr)!important;}
html body #panel #content.ivr-layout .ivr-viewsw-lbl{display:none;}
html body #panel #content.ivr-layout .short_right_tabs_menu,
html body #panel #content.ivr-layout.ivr-queue-layout .short_right_tabs_menu{padding-right:86px!important;}
html body #panel #content.ivr-layout .dwm-bar{padding-right:92px;}
}
@media (max-width:900px){
html body #panel #content.ivr-layout,
html body #panel #content.ivr-layout.ivr-queue-layout{grid-template-rows:auto minmax(360px,1fr) 34px 34px minmax(360px,1fr) 34px!important;}
html body #panel #content.ivr-layout.ivr-view-map{grid-template-columns:minmax(0,1fr)!important;}
html body #panel #content.ivr-layout .ivr-map{grid-column:1!important;grid-row:4/7!important;}
html body #panel #content.ivr-layout .ivr-viewsw{grid-column:1!important;grid-row:4!important;}
}
@media (prefers-reduced-motion:reduce){
html body #panel #content.ivr-layout .dwm-state--loading .dwm-state-ic{animation:none;}
html body #panel #content.ivr-layout .dwm-node,
html body #panel #content.ivr-layout .dwm-link,
html body #panel #content.ivr-layout button.dwm-fold svg{transition:none;}
}
/* ── IVR MAP v1 END ── */

/* ── HOLIDAYS v2 — Preatendedor > Feriados ──
 * Rediseño completo de la pantalla: vista Calendario (12 meses del año, con
 * los rangos dibujados como barra continua) y vista Lista (agenda agrupada
 * por mes). El markup viejo (#list con su barra y #holidays) sigue en el DOM
 * y se esconde: getHolidays() lo sigue pintando y ademas alimenta al modulo
 * nuevo, asi que si el JS del modulo no cargara, no se rompe nada.
 * Solo tokens del design system: aca no hay un hexadecimal.
 */

/* ── 1. La pantalla la ocupa el modulo nuevo ── */
html body #panel #content.ivr-holidays-page > #list{display:none!important;}
html body #panel #content.ivr-holidays-page > #hol_root{position:absolute!important;top:var(--dw-sp-4)!important;right:var(--dw-sp-4)!important;bottom:var(--dw-sp-4)!important;left:var(--dw-sp-4)!important;display:flex!important;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);box-shadow:var(--dw-shadow);box-sizing:border-box;}

/* ── 2. Barra superior ── */
html body #panel #content.ivr-holidays-page .hol-bar{display:flex;align-items:center;gap:var(--dw-sp-3);flex:0 0 auto;flex-wrap:wrap;padding:var(--dw-sp-3) var(--dw-sp-4);border-bottom:1px solid var(--dw-border);background:var(--dw-surface);}
html body #panel #content.ivr-holidays-page .hol-grow{flex:1 1 auto;}
html body #panel #content.ivr-holidays-page .hol-dot{padding:0 6px;color:var(--dw-ink-3);}

html body #panel #content.ivr-holidays-page .hol-year{display:inline-flex;align-items:center;gap:var(--dw-sp-2);}
html body #panel #content.ivr-holidays-page .hol-year-lbl{min-width:62px;color:var(--dw-ink);font-size:var(--dw-fs-lg);font-weight:600;font-variant-numeric:tabular-nums;text-align:center;}
/* El tema oscuro heredado pinta cualquier <button> de #content de verde lleno. */
html body #panel #content.ivr-holidays-page button.hol-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;text-shadow:none!important;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
html body #panel #content.ivr-holidays-page button.hol-nav:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-holidays-page button.hol-today,
html body #panel #content.ivr-holidays-page button.hol-chip{height:28px;padding:0 12px;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;text-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
html body #panel #content.ivr-holidays-page button.hol-today:hover,
html body #panel #content.ivr-holidays-page button.hol-chip:hover{color:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-holidays-page button.hol-chip.is-on{color:var(--dw-accent-ink)!important;background:var(--dw-primary-soft)!important;border-color:transparent!important;}
html body #panel #content.ivr-holidays-page .hol-count{color:var(--dw-ink-2);font-size:var(--dw-fs-sm);white-space:nowrap;}
html body #panel #content.ivr-holidays-page .hol-count b{color:var(--dw-ink);font-family:var(--dw-font-mono);font-weight:700;}

html body #panel #content.ivr-holidays-page .hol-search{position:relative;display:inline-flex;align-items:center;}
html body #panel #content.ivr-holidays-page .hol-search svg{position:absolute;left:9px;width:14px;height:14px;fill:none;stroke:var(--dw-ink-3);stroke-width:1.6;stroke-linecap:round;pointer-events:none;}
html body #panel #content.ivr-holidays-page input#hol_q{width:180px!important;height:30px!important;margin:0!important;padding:0 var(--dw-sp-3) 0 30px!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-holidays-page select.hol-select{height:30px!important;max-width:220px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.ivr-holidays-page input#hol_q:focus,
html body #panel #content.ivr-holidays-page select.hol-select:focus{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page input#hol_q,
:root[data-theme="dark"] body #panel #content.ivr-holidays-page select.hol-select{color-scheme:dark;background:var(--dw-bg)!important;}

html body #panel #content.ivr-holidays-page .hol-views{display:inline-flex;padding:2px;background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);}
html body #panel #content.ivr-holidays-page button.hol-view{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:0!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;text-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s ease,color .15s ease;}
html body #panel #content.ivr-holidays-page button.hol-view svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-holidays-page button.hol-view:hover{color:var(--dw-ink)!important;}
html body #panel #content.ivr-holidays-page button.hol-view.is-on{color:var(--dw-accent-ink)!important;background:var(--dw-primary-soft)!important;}
html body #panel #content.ivr-holidays-page button.hol-new{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-image:none!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;text-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
html body #panel #content.ivr-holidays-page button.hol-new svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
html body #panel #content.ivr-holidays-page button.hol-new:hover{background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page button.hol-new{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page button.hol-new:hover{background:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
html body #panel #content.ivr-holidays-page .hol-bar button:focus-visible,
html body #panel #content.ivr-holidays-page .hol-empty button:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}

/* ── 3. Cuerpo ── */
html body #panel #content.ivr-holidays-page .hol-body{flex:1 1 0;min-height:0;overflow:auto;padding:var(--dw-sp-4);background:var(--dw-bg);scrollbar-gutter:stable;}
html body #panel #content.ivr-holidays-page .hol-body::-webkit-scrollbar{width:10px;height:10px;background:transparent;}
html body #panel #content.ivr-holidays-page .hol-body::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill);}

/* ── 4. Calendario: 12 meses ── */
html body #panel #content.ivr-holidays-page .hol-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:var(--dw-sp-3);max-width:1620px;margin:0 auto;}
html body #panel #content.ivr-holidays-page .hol-month{padding:var(--dw-sp-3);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);}
html body #panel #content.ivr-holidays-page .hol-month-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--dw-sp-2);margin-bottom:var(--dw-sp-2);}
html body #panel #content.ivr-holidays-page .hol-month-name{color:var(--dw-ink);font-size:var(--dw-fs-sm);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
html body #panel #content.ivr-holidays-page .hol-month-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;color:var(--dw-accent-ink);background:var(--dw-primary-soft);border-radius:var(--dw-radius-pill);font-family:var(--dw-font-mono);font-size:var(--dw-fs-xs);font-weight:700;}
html body #panel #content.ivr-holidays-page .hol-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
html body #panel #content.ivr-holidays-page .hol-dow span{color:var(--dw-ink-3);font-size:var(--dw-fs-xs);font-weight:600;text-align:center;}
html body #panel #content.ivr-holidays-page .hol-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;column-gap:0;}
html body #panel #content.ivr-holidays-page .hol-day{display:flex;align-items:center;justify-content:center;height:26px;color:var(--dw-ink);border-radius:var(--dw-radius-pill);font-size:var(--dw-fs-sm);font-variant-numeric:tabular-nums;cursor:pointer;user-select:none;transition:background .12s ease,color .12s ease;}
html body #panel #content.ivr-holidays-page .hol-day.is-void{cursor:default;}
html body #panel #content.ivr-holidays-page .hol-day.is-weekend{color:var(--dw-ink-3);}
html body #panel #content.ivr-holidays-page .hol-day:not(.is-void):not(.is-hol):hover{background:var(--dw-line);}
html body #panel #content.ivr-holidays-page .hol-day.is-today{box-shadow:inset 0 0 0 1.5px var(--dw-ink-3);font-weight:700;}
/* Un feriado de varios dias se lee como una barra continua, no como dias sueltos. */
html body #panel #content.ivr-holidays-page .hol-day.is-hol{color:var(--dw-accent-ink);background:var(--dw-primary-soft);font-weight:600;}
html body #panel #content.ivr-holidays-page .hol-day.is-hol.is-jl{border-top-left-radius:0;border-bottom-left-radius:0;}
html body #panel #content.ivr-holidays-page .hol-day.is-hol.is-jr{border-top-right-radius:0;border-bottom-right-radius:0;}
html body #panel #content.ivr-holidays-page .hol-day.is-hol:hover{color:var(--dw-on-primary);background:var(--dw-primary);}
html body #panel #content.ivr-holidays-page .hol-day.is-hol.is-today{box-shadow:inset 0 0 0 1.5px var(--dw-primary);}
html body #panel #content.ivr-holidays-page .hol-day.is-multi{position:relative;}
html body #panel #content.ivr-holidays-page .hol-day.is-multi:after{position:absolute;right:3px;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--dw-primary);content:"";}
html body #panel #content.ivr-holidays-page .hol-day.is-picked{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-radius:0;}
html body #panel #content.ivr-holidays-page .hol-day:focus-visible{outline:2px solid var(--dw-primary);outline-offset:-2px;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-day.is-hol{color:var(--dw-accent);background:var(--dw-line);}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-day.is-hol:hover{color:var(--dw-brand-black);background:var(--dw-accent);}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-day.is-picked{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-day.is-multi:after{background:var(--dw-accent);}
html body #panel #content.ivr-holidays-page .hol-hint{max-width:1620px;margin:var(--dw-sp-4) auto 0;color:var(--dw-ink-3);font-size:var(--dw-fs-xs);text-align:center;}

/* ── 5. Lista: agenda agrupada por mes ── */
html body #panel #content.ivr-holidays-page .hol-list{max-width:1180px;margin:0 auto;}
html body #panel #content.ivr-holidays-page .hol-mhd{position:sticky;top:calc(var(--dw-sp-4) * -1);z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:var(--dw-sp-3);margin:var(--dw-sp-3) 0 var(--dw-sp-1);padding:var(--dw-sp-1) 0 var(--dw-sp-2);background:var(--dw-bg);}
html body #panel #content.ivr-holidays-page .hol-mhd > span:first-child{color:var(--dw-ink);font-size:var(--dw-fs-sm);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
html body #panel #content.ivr-holidays-page .hol-mhd:first-child{margin-top:0;}
html body #panel #content.ivr-holidays-page .hol-mhd-n{color:var(--dw-ink-3);font-size:var(--dw-fs-xs);}
html body #panel #content.ivr-holidays-page .hol-now{display:flex;align-items:center;gap:var(--dw-sp-3);margin:var(--dw-sp-3) 0;color:var(--dw-primary);font-size:var(--dw-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
html body #panel #content.ivr-holidays-page .hol-now:after{flex:1 1 auto;height:1px;background:var(--dw-primary);content:"";opacity:.4;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-now{color:var(--dw-accent);}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-now:after{background:var(--dw-accent);}

html body #panel #content.ivr-holidays-page .hol-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:var(--dw-sp-3);margin-bottom:var(--dw-sp-2);padding:var(--dw-sp-3);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;}
html body #panel #content.ivr-holidays-page .hol-item:hover{border-color:var(--dw-primary);box-shadow:var(--dw-shadow);}
html body #panel #content.ivr-holidays-page .hol-item:focus-visible{outline:2px solid var(--dw-primary);outline-offset:2px;}
html body #panel #content.ivr-holidays-page .hol-item.is-past{opacity:.62;}
html body #panel #content.ivr-holidays-page .hol-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;background:var(--dw-primary-soft);border-radius:var(--dw-radius-sm);}
html body #panel #content.ivr-holidays-page .hol-date b{color:var(--dw-accent-ink);font-family:var(--dw-font-mono);font-size:var(--dw-fs-lg);font-weight:700;line-height:1.1;}
html body #panel #content.ivr-holidays-page .hol-date i{color:var(--dw-accent-ink);font-size:var(--dw-fs-xs);font-style:normal;font-weight:600;text-transform:uppercase;}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-date{background:var(--dw-line);}
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-date b,
:root[data-theme="dark"] body #panel #content.ivr-holidays-page .hol-date i{color:var(--dw-accent);}
html body #panel #content.ivr-holidays-page .hol-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
html body #panel #content.ivr-holidays-page .hol-item-ttl{overflow:hidden;color:var(--dw-ink);font-size:var(--dw-fs-md);font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-holidays-page .hol-item-sub{overflow:hidden;color:var(--dw-ink-2);font-size:var(--dw-fs-sm);text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-holidays-page .hol-ivr{display:inline-flex;align-items:center;max-width:220px;height:24px;padding:0 10px;overflow:hidden;color:var(--dw-ink-2);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);font-size:var(--dw-fs-sm);text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.ivr-holidays-page .hol-acts{display:inline-flex;gap:var(--dw-sp-1);opacity:0;transition:opacity .12s ease;}
html body #panel #content.ivr-holidays-page .hol-item:hover .hol-acts,
html body #panel #content.ivr-holidays-page .hol-item:focus-within .hol-acts{opacity:1;}
html body #panel #content.ivr-holidays-page button.hol-act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
html body #panel #content.ivr-holidays-page button.hol-act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-holidays-page button.hol-act:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.ivr-holidays-page button.hol-act--del:hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.ivr-holidays-page button.hol-act:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}
@media (hover:none){
html body #panel #content.ivr-holidays-page .hol-acts{opacity:1;}
}

/* ── 6. Vacio, cargando y error ── */
html body #panel #content.ivr-holidays-page .hol-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dw-sp-3);min-height:320px;padding:var(--dw-sp-8) var(--dw-sp-4);text-align:center;}
html body #panel #content.ivr-holidays-page .hol-empty-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;color:var(--dw-ink-3);background:var(--dw-line);border-radius:var(--dw-radius-pill);}
html body #panel #content.ivr-holidays-page .hol-empty-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
html body #panel #content.ivr-holidays-page .hol-empty-ttl{color:var(--dw-ink);font-size:var(--dw-fs-lg);font-weight:600;}
html body #panel #content.ivr-holidays-page .hol-empty-txt{max-width:52ch;color:var(--dw-ink-2);font-size:var(--dw-fs-sm);line-height:1.45;}
html body #panel #content.ivr-holidays-page .hol-empty--error .hol-empty-ic{color:var(--dw-danger);background:var(--dw-danger-soft);}
html body #panel #content.ivr-holidays-page .hol-empty--loading .hol-empty-ic{animation:hol-pulse 1.3s ease-in-out infinite;}
@keyframes hol-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── 7. 1366x768 y angosto ── */
/* A 1366 la barra entraba en dos renglones: los controles se achican antes. */
@media (max-width:1560px){
html body #panel #content.ivr-holidays-page .hol-bar{gap:var(--dw-sp-2);}
html body #panel #content.ivr-holidays-page button.hol-view span{display:none;}
html body #panel #content.ivr-holidays-page button.hol-view{padding:0 10px;}
html body #panel #content.ivr-holidays-page input#hol_q{width:140px!important;}
html body #panel #content.ivr-holidays-page select.hol-select{max-width:150px!important;}
}
@media (max-width:1240px){
html body #panel #content.ivr-holidays-page .hol-count{display:none;}
}
/* A 1920 los 12 meses entraban en 6x2 y sobraban 400px de alto. En 4x3 el
 * calendario ocupa el alto disponible y el dia queda mas grande. */
@media (min-width:1600px){
html body #panel #content.ivr-holidays-page .hol-cal{grid-template-columns:repeat(4,1fr);gap:var(--dw-sp-2);max-width:1400px;}
html body #panel #content.ivr-holidays-page .hol-day{height:31px;}
html body #panel #content.ivr-holidays-page .hol-hint{margin-top:var(--dw-sp-3);}
}
@media (max-width:1200px){
html body #panel #content.ivr-holidays-page .hol-cal{grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:var(--dw-sp-2);}
html body #panel #content.ivr-holidays-page .hol-bar{gap:var(--dw-sp-2);}
}
@media (max-width:900px){
html body #panel #content.ivr-holidays-page .hol-item{grid-template-columns:52px minmax(0,1fr) auto;}
html body #panel #content.ivr-holidays-page .hol-ivr{display:none;}
}
@media (prefers-reduced-motion:reduce){
html body #panel #content.ivr-holidays-page .hol-empty--loading .hol-empty-ic{animation:none;}
html body #panel #content.ivr-holidays-page .hol-day,
html body #panel #content.ivr-holidays-page .hol-item,
html body #panel #content.ivr-holidays-page .hol-acts{transition:none;}
}

/* ── 8. Editor de feriado (Boxy #mb_editholiday) ───────────────────────────
 * El modal lo arma editHoliday() con jQuery, fuera de #panel #content, asi
 * que las capas v5 de pagina no lo alcanzan y quedaba la paleta legacy
 * (#F5F5DC en la caja, #eff5dc en cabecera y pie, #E5F1D8 en la lista de
 * numeros, #bbb en los bordes) con etiquetas en italica gris.
 * Solo CSS, todo colgado de #mb_editholiday: no cambia HTML, IDs, names,
 * onclick, callbacks ni rutas. Los width/height/background inline se pisan
 * con !important, que le gana a inline no-important.
 * El <style> propio de la pagina ya trae reglas de tema oscuro para este
 * modal; se dejan como estan y estas de aca usan los mismos tokens.
 */
.boxy-wrapper #mb_editholiday{--dw-hol-blank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E");--dw-hol-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 4.3l7.4 7.4M11.7 4.3l-7.4 7.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");--dw-hol-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5l3.1 3.1 6.1-6.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-hol-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--dw-hol-tick-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.2' fill='none' stroke='%23081010' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* Caja */
.boxy-wrapper #mb_editholiday{width:520px!important;max-width:94vw!important;padding:0!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;}
.boxy-wrapper #mb_editholiday #mb_table,
.boxy-wrapper #mb_editholiday #mb_table > tbody > tr > td,
.boxy-wrapper #mb_editholiday #my_boxy_text_cont{color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;}
.boxy-wrapper #mb_editholiday #my_boxy_title{padding:var(--dw-sp-3) var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border-bottom:1px solid var(--dw-border)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-lg)!important;font-weight:600!important;letter-spacing:0!important;text-shadow:none!important;word-spacing:normal!important;}
.boxy-wrapper #mb_editholiday #my_boxy_text{padding:var(--dw-sp-4)!important;}
/* El contenedor viene con height:250px inline y el contenido es mas alto. */
.boxy-wrapper #mb_editholiday #my_boxy_text > div[style*="250px"]{height:auto!important;}

/* Filas y etiquetas: la italica gris pasa a etiqueta normal */
.boxy-wrapper #mb_editholiday .boxyrow_big{height:auto!important;min-height:34px!important;margin-bottom:var(--dw-sp-3)!important;line-height:normal!important;}
.boxy-wrapper #mb_editholiday .boxyrow_big:last-child{margin-bottom:0!important;}
.boxy-wrapper #mb_editholiday .boxyrow_big > .gray{color:var(--dw-ink-2)!important;font-size:var(--dw-fs-sm)!important;font-style:normal!important;line-height:32px!important;}

/* Controles */
.boxy-wrapper #mb_editholiday input.boxyinput2,
.boxy-wrapper #mb_editholiday select.boxyselect2{height:32px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;line-height:30px!important;}
.boxy-wrapper #mb_editholiday input#desc,
.boxy-wrapper #mb_editholiday select#ivr{width:100%!important;}
.boxy-wrapper #mb_editholiday input#fd_date,
.boxy-wrapper #mb_editholiday input#td_date{width:112px!important;cursor:pointer!important;font-variant-numeric:tabular-nums;}
.boxy-wrapper #mb_editholiday input#fd_time,
.boxy-wrapper #mb_editholiday input#td_time{width:68px!important;text-align:center!important;font-variant-numeric:tabular-nums;}
.boxy-wrapper #mb_editholiday input.boxyinput2:hover,
.boxy-wrapper #mb_editholiday select.boxyselect2:hover{border-color:var(--dw-ink-3)!important;}
.boxy-wrapper #mb_editholiday input.boxyinput2:focus,
.boxy-wrapper #mb_editholiday select.boxyselect2:focus{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday input.boxyinput2,
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday select.boxyselect2{color-scheme:dark;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday input.boxyinput2:focus,
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday select.boxyselect2:focus{outline-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}

/* Lista de numeros */
.boxy-wrapper #mb_editholiday .bgcolor2{width:100%!important;max-height:132px!important;margin:0!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-sizing:border-box!important;scrollbar-gutter:stable!important;}
.boxy-wrapper #mb_editholiday .bgcolor2::-webkit-scrollbar{width:10px!important;background:transparent!important;}
.boxy-wrapper #mb_editholiday .bgcolor2::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
.boxy-wrapper #mb_editholiday .bgcolor2 > div{height:26px!important;padding:0 var(--dw-sp-1)!important;font-size:var(--dw-fs-sm)!important;line-height:26px!important;}
.boxy-wrapper #mb_editholiday .bgcolor2 > div:hover{background:var(--dw-bg)!important;}
.boxy-wrapper #mb_editholiday .bgcolor2 > .boxyrow.borderbot3{position:sticky!important;top:0!important;z-index:1!important;background:var(--dw-surface)!important;border-bottom:1px solid var(--dw-border)!important;font-weight:600!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .bgcolor2{background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .bgcolor2 > div:hover{background:var(--dw-line)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .bgcolor2 > .boxyrow.borderbot3{background:var(--dw-bg)!important;}

/* Casilla heredada: cuadrado gris con un PNG oscuro de tilde */
.boxy-wrapper #mb_editholiday .chkbox{width:15px!important;height:15px!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;background-image:none!important;background-position:center!important;background-repeat:no-repeat!important;background-size:11px 11px!important;border:1px solid var(--dw-border)!important;border-radius:3px!important;transition:background-color .12s ease,border-color .12s ease!important;}
.boxy-wrapper #mb_editholiday .chkbox:hover{background-color:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
.boxy-wrapper #mb_editholiday .chkbox.chkbox_enabled{background-color:var(--dw-primary)!important;background-image:var(--dw-hol-tick)!important;border-color:var(--dw-primary)!important;}
.boxy-wrapper #mb_editholiday .chkbox.chkbox_inline{top:4px!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .chkbox{background-color:var(--dw-bg)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .chkbox:hover{background-color:var(--dw-line)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .chkbox.chkbox_enabled{background-color:var(--dw-accent)!important;background-image:var(--dw-hol-tick-d)!important;border-color:var(--dw-accent)!important;}

/* Pie: Cancelar secundario, Confirmar primario */
.boxy-wrapper #mb_editholiday #my_boxy_options{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:var(--dw-sp-2)!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;background:var(--dw-surface)!important;background-color:var(--dw-surface)!important;border-top:1px solid var(--dw-border)!important;}
.boxy-wrapper #mb_editholiday .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;float:none!important;width:auto!important;min-width:104px!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;background-color:var(--dw-primary)!important;background-image:none!important;border:1px solid var(--dw-primary)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;line-height:1.2!important;text-shadow:none!important;white-space:nowrap!important;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
.boxy-wrapper #mb_editholiday .boxybutton:hover{background:var(--dw-primary-hover)!important;background-color:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
.boxy-wrapper #mb_editholiday .boxybutton:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .boxybutton{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;background-color:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .boxybutton:hover{background:var(--dw-bright-300)!important;background-color:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
.boxy-wrapper #mb_editholiday .boxybutton > img{content:var(--dw-hol-blank)!important;display:block!important;width:14px!important;height:14px!important;margin:0!important;border:0!important;filter:none!important;-webkit-filter:none!important;background-color:currentColor!important;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;}
.boxy-wrapper #mb_editholiday .boxybutton > img[src*="Cross_12"]{-webkit-mask-image:var(--dw-hol-x)!important;mask-image:var(--dw-hol-x)!important;}
.boxy-wrapper #mb_editholiday .boxybutton > img[src*="Checkmark_12"]{-webkit-mask-image:var(--dw-hol-check)!important;mask-image:var(--dw-hol-check)!important;}
/* Cancelar: el unico con el icono de cruz. */
@supports selector(:has(*)) {
.boxy-wrapper #mb_editholiday .boxybutton:has(img[src*="Cross_12"]){order:-1!important;margin-right:auto!important;color:var(--dw-ink-2)!important;background:transparent!important;background-color:transparent!important;border-color:var(--dw-border)!important;}
.boxy-wrapper #mb_editholiday .boxybutton:has(img[src*="Cross_12"]):hover{color:var(--dw-ink)!important;background:var(--dw-bg)!important;background-color:var(--dw-bg)!important;border-color:var(--dw-ink-3)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .boxybutton:has(img[src*="Cross_12"]){color:var(--dw-ink)!important;background:transparent!important;background-color:transparent!important;border-color:var(--dw-border)!important;}
:root[data-theme="dark"] .boxy-wrapper #mb_editholiday .boxybutton:has(img[src*="Cross_12"]):hover{color:var(--dw-ink)!important;background:var(--dw-line)!important;background-color:var(--dw-line)!important;border-color:var(--dw-ink-3)!important;}
}
/* ── HOLIDAYS v2 END ── */

/* ── PWSTRENGTH v1 — Usuarios > Modificar usuario, fortaleza de contraseña ──
 * El indicador es un <input disabled> al que checkPasswdStrength() le pintaba
 * el fondo inline (#ca0000 / #caca00 / #00ca00, texto blanco). La capa v5 de
 * la pantalla lo normalizaba con !important, asi que los tres estados salian
 * exactamente iguales: una pastilla gris que no dice nada, ni en claro ni en
 * oscuro.
 * Ahora el estado viaja por clase (.is-weak / .is-medium / .is-strong) y se
 * pinta con los tokens semanticos, con el mismo patron de fondo suave, borde
 * y tinta a tono que ya usa el interruptor .chkbox de esta misma pantalla.
 * Solo cambia el aspecto: el input sigue disabled, conserva su name y su
 * value, y checkPasswdStrength() sigue llamandose desde los mismos onkeyup.
 * Ojo: Chrome lava el texto de los <input disabled> con -webkit-text-fill-color
 * y con opacity, asi que hay que anularlos o la pastilla se ve destenida por
 * mas que el color sea el correcto.
 */
html body #panel #content.user-editor-page .tabcontent input[name$="passwdstrength"]{width:94px!important;min-width:0;height:30px!important;min-height:0!important;margin-left:var(--dw-sp-2)!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;-webkit-text-fill-color:currentColor!important;opacity:1!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:700!important;letter-spacing:.02em!important;text-align:center!important;text-overflow:ellipsis!important;cursor:default!important;box-sizing:border-box!important;transition:color .15s ease,background-color .15s ease,border-color .15s ease!important;}

html body #panel #content.user-editor-page .tabcontent input[name$="passwdstrength"].is-weak{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
html body #panel #content.user-editor-page .tabcontent input[name$="passwdstrength"].is-medium{color:var(--dw-warning)!important;background:var(--dw-warning-soft)!important;border-color:var(--dw-warning)!important;}
html body #panel #content.user-editor-page .tabcontent input[name$="passwdstrength"].is-strong{color:var(--dw-success)!important;background:var(--dw-success-soft)!important;border-color:var(--dw-success)!important;}

/* En oscuro los tres tokens ya vienen claros y el fondo suave es un rgba() al
 * 12%: alcanza con lo de arriba, no hace falta reescribir nada por tema.
 * Contraste medido sobre --dw-bg: debil 6.2:1, media 8.7:1, fuerte 9.4:1.
 * En claro: debil 5.8:1, media 5.2:1, fuerte 7.1:1. */
/* ── PWSTRENGTH v1 END ── */

/* ── SIDENAV v2 — Barra lateral ────────────────────────────────────────────
 * Rediseño de la barra lateral, que aparece en todas las pantallas.
 *
 * Lo que cambia:
 *   · Los siete items de primer nivel pasan a leerse como rotulos de grupo
 *     (micro mayuscula, tinta apagada) y los sub-items son la navegacion real,
 *     en caja y cuerpo normal. Antes todo era mayuscula 12,5px en negrita y no
 *     habia jerarquia.
 *   · La marca deja de ser un bloque verde pegado arriba y comparte el fondo
 *     de la barra, con una linea que la separa.
 *   · Solo el item hoja queda marcado como activo; el grupo padre se limita a
 *     teñir su icono. Antes se pintaban los dos y competian.
 *   · La lista es lo unico que scrollea: marca arriba y utilidades abajo
 *     quedan fijas, y la barra de scroll es fina y sin riel visible.
 *   · Plegada ya no desaparece: se achica a un riel de 64px con los iconos, y
 *     el nombre aparece en un globo al pasar el mouse. Los submenus del riel
 *     se abren flotando al costado.
 *
 * Segunda edicion del bloque:
 *   · Abierta, los grupos abren SOLO con un clic (antes bastaba pasar el
 *     mouse y la lista se movia sola). Plegada sigue siendo al reves: el
 *     flotante sale con pasar el mouse.
 *   · En el riel el flotante se cuelga de su propia fila y ya no de la barra,
 *     asi sale a la altura del item; si no entra abajo, sube lo justo, y un
 *     puente invisible cubre el aire que lo separa del riel para que no se
 *     cierre al ir a buscarlo con el mouse.
 *
 * Todo cuelga de nav.dw-sidenav.dw-nav2 (la clase dw-nav2 la agrega el parche
 * de header.php) para ganarle a las capas viejas sin usar !important de mas y
 * para que nada de esto pueda escaparse a otra parte de la pagina.
 * No cambia IDs, href, onclick, data-bs-toggle, ni la logica de permisos.
 */

/* ── 1. Ancho: una sola fuente de verdad para la barra y para #panel ── */
html{--dw-nav-w:248px;--dw-nav-item-r:8px;}
html[data-sidenav="off"]{--dw-nav-w:64px;}

@media (min-width:992px){
html body #panel nav.dw-sidenav.dw-nav2{display:flex!important;width:var(--dw-nav-w)!important;padding:0!important;overflow:hidden!important;background:var(--dw-surface)!important;border-right:1px solid var(--dw-border)!important;box-shadow:none!important;transition:width .16s ease!important;}
html body #panel{padding-left:var(--dw-nav-w)!important;transition:padding-left .16s ease!important;}
html[data-sidenav="off"] body #panel{padding-left:var(--dw-nav-w)!important;}
}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2{background:var(--dw-sidenav)!important;border-right-color:var(--dw-line)!important;}

/* ── 2. Marca ── */
html body #panel nav.dw-sidenav.dw-nav2 a.navbar-brand.dw-brand-composed{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;flex:0 0 auto!important;width:auto!important;height:58px!important;margin:0!important;padding:0 var(--dw-sp-3)!important;overflow:hidden!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;text-decoration:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-brand-logo-shell{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;height:30px!important;padding:0 9px!important;background:var(--dw-brand-black)!important;border:0!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-brand-logo{width:auto!important;height:14px!important;margin:0!important;object-fit:contain!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-brand-copy{display:flex!important;flex-direction:column!important;min-width:0!important;gap:1px!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-brand-copy .dw-brand-name{overflow:hidden!important;color:var(--dw-ink)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:700!important;letter-spacing:0!important;line-height:1.15!important;text-overflow:ellipsis!important;text-shadow:none!important;white-space:nowrap!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-brand-copy .dw-brand-model{overflow:hidden!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-xs)!important;font-weight:500!important;letter-spacing:.03em!important;line-height:1.15!important;text-overflow:ellipsis!important;text-transform:none!important;white-space:nowrap!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dw-brand-logo-shell{background:var(--dw-line)!important;}

/* ── 3. Columnas: la lista es lo unico que scrollea ── */
@media (min-width:992px){
html body #panel nav.dw-sidenav.dw-nav2 > #dwNavMenu.navbar-collapse{display:flex!important;flex-direction:column!important;flex:1 1 0!important;min-height:0!important;overflow:hidden!important;padding:0!important;}
html body #panel nav.dw-sidenav.dw-nav2 ul.navbar-nav{display:flex!important;flex-direction:column!important;flex:1 1 0!important;gap:2px!important;min-height:0!important;margin:0!important;padding:var(--dw-sp-2) var(--dw-sp-2) var(--dw-sp-3)!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable!important;scrollbar-width:thin!important;scrollbar-color:var(--dw-border) transparent!important;}
html body #panel nav.dw-sidenav.dw-nav2 ul.navbar-nav::-webkit-scrollbar{width:8px!important;background:transparent!important;}
html body #panel nav.dw-sidenav.dw-nav2 ul.navbar-nav::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border:2px solid transparent!important;background-clip:content-box!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel nav.dw-sidenav.dw-nav2 ul.navbar-nav::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;background-clip:content-box!important;}
}
html body #panel nav.dw-sidenav.dw-nav2 li.nav-item{width:100%!important;margin:0!important;}

/* ── 4. Fila de primer nivel: rotulo de grupo, no boton gritado ── */
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link{position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-3)!important;background:transparent!important;border:0!important;border-radius:var(--dw-nav-item-r)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.06em!important;line-height:1!important;text-decoration:none!important;text-shadow:none!important;text-transform:uppercase!important;white-space:nowrap!important;transition:background-color .14s ease,color .14s ease!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link > .dw-nav-icon{flex:0 0 18px!important;width:18px!important;color:inherit!important;font-size:15px!important;line-height:1!important;opacity:1!important;text-align:center!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link:hover,
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link:focus{color:var(--dw-ink)!important;background:var(--dw-bg)!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item.show > .nav-link{color:var(--dw-ink)!important;background:transparent!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item.show > .nav-link .dw-nav-icon{color:var(--dw-primary)!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:-2px!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link:hover,
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link:focus{color:var(--dw-ink)!important;background:var(--dw-line)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item.show > .nav-link{background:transparent!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item.show > .nav-link .dw-nav-icon{color:var(--dw-accent)!important;}

/* La flecha: un chevron dibujado, que gira al abrir. El ::after heredado
   traia el caret de Bootstrap y se superponia. */
html body #panel nav.dw-sidenav.dw-nav2{--dw-nav-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 6.3L8 10.1l3.8-3.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dropdown-toggle::after{position:absolute!important;top:50%!important;right:8px!important;width:13px!important;height:13px!important;margin:0!important;background:currentColor!important;border:0!important;content:""!important;opacity:.75!important;transform:translateY(-50%)!important;transition:transform .16s ease!important;-webkit-mask:var(--dw-nav-chev) center/13px no-repeat!important;mask:var(--dw-nav-chev) center/13px no-repeat!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item.show > .nav-link.dropdown-toggle::after{transform:translateY(-50%) rotate(-180deg)!important;}

/* Item hoja de primer nivel (Inicio): puede quedar activo el solo. */
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dw-active{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dw-active .dw-nav-icon{color:var(--dw-primary)!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dw-active::after{background:currentColor!important;}
/* Un grupo abierto cuyo hijo esta activo NO se pinta: alcanza con el icono. */
html body #panel nav.dw-sidenav.dw-nav2 .nav-item.dropdown > .nav-link.dw-active{color:var(--dw-ink)!important;background:transparent!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item.dropdown > .nav-link.dw-active .dw-nav-icon{color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dw-active{color:var(--dw-accent)!important;background:var(--dw-primary-soft)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dw-active .dw-nav-icon{color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item.dropdown > .nav-link.dw-active{color:var(--dw-ink)!important;background:transparent!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item.dropdown > .nav-link.dw-active .dw-nav-icon{color:var(--dw-accent)!important;}

/* ── 5. Submenu desplegado: guia vertical y items en caja normal ── */
@media (min-width:992px){
html body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu{position:static!important;display:none!important;float:none!important;width:auto!important;min-width:0!important;margin:2px 0 var(--dw-sp-2) 17px!important;padding:0 0 0 var(--dw-sp-2)!important;background:transparent!important;border:0!important;border-left:1px solid var(--dw-line-2)!important;border-radius:0!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu.show{display:block!important;}
}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item{display:flex!important;align-items:center!important;height:31px!important;margin:1px 0!important;padding:0 var(--dw-sp-2)!important;overflow:hidden!important;color:var(--dw-ink-2)!important;background:transparent!important;border:0!important;border-radius:var(--dw-nav-item-r)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:500!important;letter-spacing:0!important;line-height:1!important;text-decoration:none!important;text-overflow:ellipsis!important;text-shadow:none!important;text-transform:none!important;white-space:nowrap!important;transition:background-color .14s ease,color .14s ease!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item:hover,
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item:focus{color:var(--dw-ink)!important;background:var(--dw-bg)!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:-2px!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item.dw-active{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;box-shadow:none!important;font-weight:600!important;}
html body #panel nav.dw-sidenav.dw-nav2 hr.dropdown-divider{margin:var(--dw-sp-2) var(--dw-sp-2)!important;border:0!important;border-top:1px solid var(--dw-line-2)!important;opacity:1!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu{background:transparent!important;border-left-color:var(--dw-line)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dropdown-item:hover,
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dropdown-item:focus{color:var(--dw-ink)!important;background:var(--dw-line)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dropdown-item.dw-active{color:var(--dw-accent)!important;background:var(--dw-primary-soft)!important;}

/* ── 6. Utilidades y usuario, fijos abajo ── */
@media (min-width:992px){
html body #panel nav.dw-sidenav.dw-nav2 .dw-nav-right{display:flex!important;flex-direction:column!important;gap:2px!important;flex:0 0 auto!important;width:100%!important;margin:0!important;padding:var(--dw-sp-2)!important;background:transparent!important;border-top:1px solid var(--dw-border)!important;}
}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link{display:flex!important;align-items:center!important;gap:10px!important;height:32px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:0!important;border-radius:var(--dw-nav-item-r)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:500!important;letter-spacing:0!important;line-height:1!important;text-align:left!important;text-decoration:none!important;text-shadow:none!important;text-transform:none!important;white-space:nowrap!important;transition:background-color .14s ease,color .14s ease!important;}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link i{flex:0 0 18px!important;width:18px!important;color:inherit!important;font-size:15px!important;line-height:1!important;opacity:1!important;text-align:center!important;}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link:hover,
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link:focus{color:var(--dw-ink)!important;background:var(--dw-bg)!important;box-shadow:none!important;}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:-2px!important;}
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-logout:hover,
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-logout:focus{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link:hover,
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link:focus{color:var(--dw-ink)!important;background:var(--dw-line)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-logout:hover,
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-logout:focus{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;}
html body #panel nav.dw-sidenav.dw-nav2 hr.dw-sb-divider{margin:var(--dw-sp-2) 0!important;border:0!important;border-top:1px solid var(--dw-border)!important;opacity:1!important;}

html body #panel nav.dw-sidenav.dw-nav2 .dw-user-chip{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;margin:0!important;padding:var(--dw-sp-2)!important;overflow:hidden!important;color:var(--dw-ink)!important;background:var(--dw-bg)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-shadow:none!important;box-sizing:border-box!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-user-chip > i{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-radius:var(--dw-radius-pill)!important;font-size:16px!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-user-info{display:flex!important;flex-direction:column!important;min-width:0!important;gap:1px!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-user-info span{overflow:hidden!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;line-height:1.2!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dw-user-info small{overflow:hidden!important;color:var(--dw-ink-3)!important;font-size:var(--dw-fs-xs)!important;line-height:1.2!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dw-user-chip{background:var(--dw-line)!important;border-color:var(--dw-line-2)!important;}
:root[data-theme="dark"] body #panel nav.dw-sidenav.dw-nav2 .dw-user-chip > i{color:var(--dw-accent)!important;}

/* ── 7. Riel plegado: 64px de iconos, con globo al pasar el mouse ──────────
 * El boton del topbar ya escribe data-sidenav="off" y lo guarda en
 * localStorage. Antes eso escondia la barra entera; ahora la achica.
 */
@media (min-width:992px){
/* El globo y el submenu flotante salen del ancho del riel: la barra y sus
   contenedores no pueden recortar. Con siete iconos la lista no scrollea. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 > #dwNavMenu.navbar-collapse{overflow:visible!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2{display:flex!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 a.navbar-brand.dw-brand-composed{justify-content:center!important;padding:0!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-brand-copy{display:none!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-brand-logo-shell{padding:0 6px!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-brand-logo{height:12px!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 ul.navbar-nav,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-nav-right{padding-left:var(--dw-sp-2)!important;padding-right:var(--dw-sp-2)!important;overflow:visible!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link{justify-content:center!important;gap:0!important;height:40px!important;padding:0!important;font-size:0!important;letter-spacing:0!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link span{display:none!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link > .dw-nav-icon,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link i{flex:0 0 auto!important;width:auto!important;font-size:17px!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dropdown-toggle::after{display:none!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-user-info{display:none!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dw-user-chip{justify-content:center!important;padding:var(--dw-sp-1)!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 hr.dw-sb-divider{margin:var(--dw-sp-1) 0!important;}

/* Globo con el nombre. data-tip lo escribe el parche de header.php copiando
   el texto del propio enlace, asi que no hay etiquetas duplicadas. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 [data-tip]{position:relative!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 [data-tip]:not(.dropdown-toggle):hover::before,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 [data-tip]:not(.dropdown-toggle):focus-visible::before{position:absolute!important;top:50%!important;left:calc(100% + 10px)!important;z-index:1200!important;padding:5px 9px!important;color:var(--dw-surface)!important;background:var(--dw-ink)!important;border-radius:var(--dw-radius-sm)!important;content:attr(data-tip)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;letter-spacing:0!important;line-height:1.2!important;pointer-events:none!important;text-transform:none!important;transform:translateY(-50%)!important;white-space:nowrap!important;}

/* En el riel el submenu se abre flotando al costado. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown{position:relative!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu{position:absolute!important;top:0!important;left:calc(100% + 8px)!important;z-index:1200!important;min-width:196px!important;margin:0!important;padding:var(--dw-sp-1)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-shadow:var(--dw-shadow-2)!important;}
/* En el riel el grupo abierto no se queda desplegado: el flotante sale solo
   con el mouse encima, si no se superponen dos menus en el mismo lugar. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu.show{display:none!important;}
/* El flotante lleva arriba el nombre del grupo: en el riel el rotulo de la
   fila no se lee, y sin esto no se sabe de que menu es la lista. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dropdown-menu[data-tip]::before{position:sticky!important;top:0!important;z-index:1!important;display:block!important;margin:0 0 var(--dw-sp-1)!important;padding:var(--dw-sp-1) var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;border-bottom:1px solid var(--dw-line-2)!important;content:attr(data-tip)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;white-space:nowrap!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover > .dropdown-menu,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover > .dropdown-menu.show,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:focus-within > .dropdown-menu,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:focus-within > .dropdown-menu.show{display:block!important;}
:root[data-theme="dark"][data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu{background:var(--dw-surface)!important;border-color:var(--dw-line-2)!important;}
}

/* ── 8. Aviso de tareas de administracion: que no rompa la columna ── */
html body #panel nav.dw-sidenav.dw-nav2 #adminTasks{flex:0 0 auto!important;width:100%!important;margin:0!important;box-sizing:border-box!important;}

/* ── 9. Angosto: vuelve a ser una barra de arriba, como ya era ── */
@media (max-width:991px){
html body #panel nav.dw-sidenav.dw-nav2{width:100%!important;overflow:visible!important;}
html body #panel{padding-left:0!important;}
html body #panel nav.dw-sidenav.dw-nav2 .nav-item .dropdown-menu{margin-left:var(--dw-sp-3)!important;padding-left:var(--dw-sp-2)!important;border-left:1px solid var(--dw-line-2)!important;}
}

@media (prefers-reduced-motion:reduce){
html body #panel nav.dw-sidenav.dw-nav2,
html body #panel,
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link,
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-item,
html body #panel nav.dw-sidenav.dw-nav2 a.dw-sb-util-link,
html body #panel nav.dw-sidenav.dw-nav2 .nav-item > .nav-link.dropdown-toggle::after{transition:none!important;}
}
/* ── 10. Apertura al pasar el mouse, submenus anidados y flotantes que no se
 *       salen de la pantalla ─────────────────────────────────────────────── */
@media (min-width:992px){

/* 10a. Barra abierta: el grupo SOLO abre con un clic. Pasar el mouse apenas
 *      resalta la fila, para que la lista no se mueva sola mientras se
 *      recorre la barra. El desplegado lo sigue manejando la clase .show,
 *      igual que antes. */
html:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover > .nav-link.dropdown-toggle{color:var(--dw-ink)!important;}
html:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover > .nav-link .dw-nav-icon{color:var(--dw-primary)!important;}
:root[data-theme="dark"]:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover > .nav-link .dw-nav-icon{color:var(--dw-accent)!important;}

/* 10b. Tercer nivel (Configuracion > Redes) con la barra abierta: se anida
 *      con su propia guia y tambien abre solo con un clic. El header trae un
 *      mouseenter que le escribe display:block en el atributo style; el
 *      display:none con !important de aca le gana sin tocar ese script. */
html:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu > .dropdown-menu{margin:1px 0 var(--dw-sp-1) var(--dw-sp-3)!important;padding:0 0 0 var(--dw-sp-2)!important;border-left:1px solid var(--dw-line-2)!important;}
html:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu:not(.dw-open) > .dropdown-menu{display:none!important;}
html:not([data-sidenav="off"]) body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu.dw-open > .dropdown-menu{display:block!important;}

/* 10c. Riel: el flotante sale al costado de SU fila, no pegado arriba de la
 *      barra. Cuando abajo no entra, dwPlaceFlyout() del header le pasa por
 *      --dw-fly-top cuanto tiene que subir y por --dw-fly-max cuanto mide;
 *      las dos van en el <li>, asi las hereda tanto el menu como el puente.
 *      Si el script no corriera, los valores de reserva lo dejan al lado de
 *      la fila y scrolleando, que es lo razonable. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2{--dw-nav-fly:212px;}
/* Los 8px de aire entre el riel y el flotante cortaban el :hover: el menu se
   cerraba justo cuando se iba a buscarlo con el mouse. Este puente invisible
   cose ese salto y cubre todo el alto del flotante, incluso cuando subio para
   entrar en pantalla. Es un ::after del propio <li>, asi que el mouse nunca
   sale del elemento que mantiene el menu abierto. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:hover::after,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown:focus-within::after{position:absolute!important;top:var(--dw-fly-top,0px)!important;left:100%!important;z-index:1199!important;width:10px!important;height:var(--dw-fly-max,100%)!important;background:transparent!important;border:0!important;content:""!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.nav-item.dropdown > .dropdown-menu{top:var(--dw-fly-top,0px)!important;left:calc(100% + 8px)!important;width:var(--dw-nav-fly)!important;min-width:0!important;max-height:var(--dw-fly-max,calc(100vh - var(--dw-sp-4)))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
/* El tercer nivel va anidado DENTRO del flotante, no en una tercera columna:
   el flotante scrollea, y un panel absoluto colgado de el quedaria recortado. */
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu > .dropdown-menu{position:static!important;width:auto!important;min-width:0!important;max-height:none!important;margin:1px 0 var(--dw-sp-1) var(--dw-sp-3)!important;padding:0 0 0 var(--dw-sp-2)!important;overflow:visible!important;background:transparent!important;border:0!important;border-left:1px solid var(--dw-line-2)!important;border-radius:0!important;box-shadow:none!important;}
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu:hover > .dropdown-menu,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu:hover > .dropdown-menu.show,
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu.dw-open > .dropdown-menu{display:block!important;}
/* El flotante del grupo no se cierra mientras se recorre el de tercer nivel:
   el panel anidado sigue siendo hijo del <li>, aunque se dibuje al costado. */

/* Barra de scroll de los flotantes, igual de discreta que la de la lista. */
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-menu::-webkit-scrollbar{width:8px!important;background:transparent!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-menu::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border:2px solid transparent!important;background-clip:content-box!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel nav.dw-sidenav.dw-nav2 .dropdown-menu{scrollbar-width:thin!important;scrollbar-color:var(--dw-border) transparent!important;}
}

/* 10d. La fila que abre un tercer nivel: chevron propio, girado cuando abre.
 *      El ::after heredado apuntaba a la derecha y quedaba fuera de la caja. */
html body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu > .dropdown-item{position:relative!important;padding-right:26px!important;}
html body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu > .dropdown-item::after{position:absolute!important;top:50%!important;right:8px!important;width:12px!important;height:12px!important;margin:0!important;background:currentColor!important;border:0!important;content:""!important;opacity:.7!important;transform:translateY(-50%) rotate(-90deg)!important;transition:transform .16s ease!important;-webkit-mask:var(--dw-nav-chev) center/12px no-repeat!important;mask:var(--dw-nav-chev) center/12px no-repeat!important;}
@media (min-width:992px){
html body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu:hover > .dropdown-item::after,
html body #panel nav.dw-sidenav.dw-nav2 li.dropdown-submenu.dw-open > .dropdown-item::after{transform:translateY(-50%) rotate(-180deg)!important;}
}
/* ── SIDENAV v2 END ── */

/* ── TRUNK INFO v2 — Proveedores > Informacion del proveedor ───────────────
 * Rediseño completo de trunkInfo.php.
 *
 * Lo que cambia:
 *   · El resumen deja de ser dos columnas de "Etiqueta: valor" todo en verde y
 *     pasa a una cabecera con el nombre del proveedor y sus pastillas de
 *     estado, mas cuatro fichas agrupadas por tema (señalizacion, registro,
 *     salida, estado). Los valores van en tinta normal; el verde queda para lo
 *     que de verdad es un estado.
 *   · La contraseña del proveedor ya no se muestra en claro: sale enmascarada
 *     con un ojo al lado.
 *   · Los tres paneles pasan a ser solapas con contador, y la tabla usa todo
 *     el ancho: se terminan las cabeceras recortadas ("PREFIJO D...") y el
 *     espacio vacio de las tres columnas.
 *   · El formulario de alta ya no reemplaza la lista: se dibuja arriba, como
 *     una fila nueva destacada, y la lista sigue a la vista.
 *   · Las filas dejan la cebra por un hover, y "borrar" deja de ser un enlace
 *     verde suelto para ser un boton de accion que se tiñe de rojo.
 *
 * Todo cuelga de #content.trunk-info-v2 (la clase la agrega el parche de
 * trunkInfo.php). Si el parche no corriera, nada de esto matchea y la pantalla
 * queda como estaba. No cambia IDs, names, onclick, endpoints ni rutas.
 * El markup viejo del resumen sigue en el DOM y solo se esconde.
 */

/* ── 1. Armazon ── */
/* #content ya es una columna flexible que ocupa el alto disponible; no hace
   falta posicionarlo, solo darle aire y que lo unico que scrollee sea la
   lista del panel abierto. */
html body #panel #content.trunk-info-v2{position:static!important;display:flex!important;flex-direction:column!important;gap:var(--dw-sp-3)!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;padding:var(--dw-sp-4)!important;overflow:hidden!important;background:transparent!important;border:0!important;box-sizing:border-box!important;}
/* El resumen viejo queda en el DOM y no se ve: el nuevo lee los mismos datos. */
html body #panel #content.trunk-info-v2 .trunk-summary{display:none!important;}
html body #panel #content.trunk-info-v2 > #warning:empty{display:none!important;}

/* ── 2. Cabecera del proveedor ── */
html body #panel #content.trunk-info-v2 #trk_head{display:flex;flex-direction:column;gap:var(--dw-sp-3);flex:0 0 auto;min-width:0;}
html body #panel #content.trunk-info-v2 .trk-hero{display:flex;align-items:center;gap:var(--dw-sp-3);min-width:0;padding:var(--dw-sp-3) var(--dw-sp-4);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);}
html body #panel #content.trunk-info-v2 .trk-hero-ic{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;color:var(--dw-primary);background:var(--dw-primary-soft);border-radius:var(--dw-radius-sm);font-size:19px;}
html body #panel #content.trunk-info-v2 .trk-hero-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
html body #panel #content.trunk-info-v2 .trk-hero-name{overflow:hidden;color:var(--dw-ink);font-size:var(--dw-fs-xl);font-weight:700;line-height:1.15;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.trunk-info-v2 .trk-hero-sub{overflow:hidden;color:var(--dw-ink-2);font-size:var(--dw-fs-sm);font-variant-numeric:tabular-nums;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.trunk-info-v2 .trk-hero-chips{display:flex;align-items:center;gap:var(--dw-sp-2);flex:0 0 auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
html body #panel #content.trunk-info-v2 .trk-dot{padding:0 6px;color:var(--dw-ink-3);}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 .trk-hero-ic{color:var(--dw-accent);}

html body #panel #content.trunk-info-v2 .trk-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;color:var(--dw-ink-2);background:var(--dw-bg);border:1px solid var(--dw-border);border-radius:var(--dw-radius-pill);font-size:var(--dw-fs-xs);font-weight:600;white-space:nowrap;}
html body #panel #content.trunk-info-v2 .trk-chip--type{color:var(--dw-ink);font-family:var(--dw-font-mono);letter-spacing:.04em;}
html body #panel #content.trunk-info-v2 .trk-chip--ok{color:var(--dw-success);background:var(--dw-success-soft);border-color:var(--dw-success);}
html body #panel #content.trunk-info-v2 .trk-chip--off{color:var(--dw-ink-3);background:var(--dw-bg);border-color:var(--dw-border);}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 .trk-chip{background:var(--dw-line);border-color:var(--dw-line-2);}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 .trk-chip--ok{color:var(--dw-accent);background:var(--dw-success-soft);border-color:var(--dw-success);}

/* ── 3. Fichas del resumen ── */
html body #panel #content.trunk-info-v2 .trk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--dw-sp-3);min-width:0;}
html body #panel #content.trunk-info-v2 .trk-card{min-width:0;padding:var(--dw-sp-3) var(--dw-sp-4) var(--dw-sp-4);background:var(--dw-surface);border:1px solid var(--dw-border);border-radius:var(--dw-radius);}
html body #panel #content.trunk-info-v2 .trk-card-h{margin-bottom:var(--dw-sp-3);padding-bottom:var(--dw-sp-2);color:var(--dw-ink-3);border-bottom:1px solid var(--dw-line-2);font-size:var(--dw-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
html body #panel #content.trunk-info-v2 .trk-dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);align-items:baseline;gap:var(--dw-sp-2) var(--dw-sp-3);margin:0;}
html body #panel #content.trunk-info-v2 .trk-dl dt{min-width:0;margin:0;color:var(--dw-ink-3);font-size:var(--dw-fs-sm);font-weight:500;line-height:1.3;}
html body #panel #content.trunk-info-v2 .trk-dl dd{min-width:0;margin:0;overflow:hidden;color:var(--dw-ink);font-size:var(--dw-fs-sm);font-weight:600;text-align:right;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.trunk-info-v2 .trk-empty{color:var(--dw-ink-3);font-weight:500;font-style:italic;}

/* ── 4. Contraseña enmascarada ── */
html body #panel #content.trunk-info-v2 .trk-secret{display:flex;align-items:center;justify-content:flex-end;gap:var(--dw-sp-2);}
html body #panel #content.trunk-info-v2 .trk-pw{min-width:0;overflow:hidden;font-family:var(--dw-font-mono);letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap;}
html body #panel #content.trunk-info-v2 .trk-pw[data-shown="1"]{color:var(--dw-ink);letter-spacing:0;-webkit-user-select:all;user-select:all;}
/* El tema oscuro heredado pinta cualquier <button> de #content de verde lleno. */
html body #panel #content.trunk-info-v2 button.trk-eye{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;padding:0;color:var(--dw-ink-3)!important;background:transparent!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;text-shadow:none!important;font-size:13px;cursor:pointer;transition:color .15s ease,background-color .15s ease,border-color .15s ease;}
html body #panel #content.trunk-info-v2 button.trk-eye:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-info-v2 button.trk-eye.is-on{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-info-v2 button.trk-eye:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 button.trk-eye:hover,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 button.trk-eye.is-on{color:var(--dw-accent)!important;}

/* ── 5. Solapas ── */
html body #panel #content.trunk-info-v2 .trk-tabs{display:flex;align-items:flex-end;gap:var(--dw-sp-1);flex:0 0 auto;min-width:0;overflow-x:auto;border-bottom:1px solid var(--dw-border);scrollbar-width:none;}
html body #panel #content.trunk-info-v2 .trk-tabs::-webkit-scrollbar{height:0;}
html body #panel #content.trunk-info-v2 button.trk-tab{display:inline-flex;align-items:center;gap:var(--dw-sp-2);flex:0 0 auto;height:38px;margin-bottom:-1px;padding:0 var(--dw-sp-4);color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease;}
html body #panel #content.trunk-info-v2 button.trk-tab:hover{color:var(--dw-ink)!important;}
html body #panel #content.trunk-info-v2 button.trk-tab.is-on{color:var(--dw-primary)!important;border-bottom-color:var(--dw-primary)!important;}
html body #panel #content.trunk-info-v2 button.trk-tab:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:-3px!important;}
html body #panel #content.trunk-info-v2 .trk-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;padding:0 6px;color:var(--dw-ink-2);background:var(--dw-line);border-radius:var(--dw-radius-pill);font-family:var(--dw-font-mono);font-size:var(--dw-fs-xs);font-weight:700;}
html body #panel #content.trunk-info-v2 button.trk-tab.is-on .trk-tab-n{color:var(--dw-accent-ink);background:var(--dw-primary-soft);}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 button.trk-tab.is-on{color:var(--dw-accent)!important;border-bottom-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 button.trk-tab.is-on .trk-tab-n{color:var(--dw-accent);}

/* ── 6. Los tres paneles: uno solo a la vez, a todo el ancho ── */
html body #panel #content.trunk-info-v2 > #list-left,
html body #panel #content.trunk-info-v2 > #list-right{display:contents!important;}
html body #panel #content.trunk-info-v2 #trunk-rules,
html body #panel #content.trunk-info-v2 #trunk-prefixes,
html body #panel #content.trunk-info-v2 #trunk-numbers{display:none!important;flex:1 1 0!important;flex-direction:column!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;overflow:hidden!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius)!important;box-sizing:border-box!important;}
html body #panel #content.trunk-info-v2.is-tab-rules #trunk-rules,
html body #panel #content.trunk-info-v2.is-tab-prefixes #trunk-prefixes,
html body #panel #content.trunk-info-v2.is-tab-numbers #trunk-numbers{display:flex!important;}
/* Sin JS no hay clase is-tab-*: se muestran los tres, apilados, como antes. */
html body #panel #content.trunk-info-v2:not(.is-tab-rules):not(.is-tab-prefixes):not(.is-tab-numbers) #trunk-rules,
html body #panel #content.trunk-info-v2:not(.is-tab-rules):not(.is-tab-prefixes):not(.is-tab-numbers) #trunk-prefixes,
html body #panel #content.trunk-info-v2:not(.is-tab-rules):not(.is-tab-prefixes):not(.is-tab-numbers) #trunk-numbers{display:flex!important;}
html body #panel #content.trunk-info-v2:not(.is-tab-rules):not(.is-tab-prefixes):not(.is-tab-numbers) .trk-tabs{display:none;}

/* Cabecera de cada panel: la barra de titulo heredada es una <table>. */
html body #panel #content.trunk-info-v2 #trunk-rules > table,
html body #panel #content.trunk-info-v2 #trunk-prefixes > table,
html body #panel #content.trunk-info-v2 #trunk-numbers > table{order:-2!important;flex:0 0 auto!important;width:100%!important;table-layout:auto!important;}
html body #panel #content.trunk-info-v2 #trunk-rules tr.title > td,
html body #panel #content.trunk-info-v2 #trunk-prefixes tr.title > td,
html body #panel #content.trunk-info-v2 #trunk-numbers tr.title > td{height:44px!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;vertical-align:middle!important;color:var(--dw-ink-3)!important;background:var(--dw-surface)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.06em!important;text-indent:0!important;text-shadow:none!important;text-transform:uppercase!important;}
html body #panel #content.trunk-info-v2 .trunk-rules-header{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;justify-content:space-between!important;}
html body #panel #content.trunk-info-v2 .trunk-rules-actions{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;margin-left:auto!important;}
html body #panel #content.trunk-info-v2 #prefixes-button,
html body #panel #content.trunk-info-v2 #numbers-button{text-align:right!important;}

/* Botones de la cabecera del panel: uno solo primario. */
html body #panel #content.trunk-info-v2 .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;width:auto!important;height:28px!important;margin:0!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink)!important;background:var(--dw-bg)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;text-shadow:none!important;text-transform:none!important;white-space:nowrap!important;cursor:pointer!important;transition:background-color .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.trunk-info-v2 .boxybutton:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-info-v2 #rbaction,
html body #panel #content.trunk-info-v2 #pbaction,
html body #panel #content.trunk-info-v2 #nbaction{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-info-v2 #rbaction:hover,
html body #panel #content.trunk-info-v2 #pbaction:hover,
html body #panel #content.trunk-info-v2 #nbaction:hover{color:var(--dw-on-primary)!important;background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #rbaction,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #pbaction,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #nbaction{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #rbaction:hover,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #pbaction:hover,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #nbaction:hover{background:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
html body #panel #content.trunk-info-v2 .boxybutton img{width:12px!important;height:12px!important;filter:none!important;}
html body #panel #content.trunk-info-v2 a#example{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:28px!important;height:28px!important;color:var(--dw-ink-2)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;}
html body #panel #content.trunk-info-v2 a#example:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}

/* ── 7. La lista: a todo el ancho y con su propio scroll ── */
html body #panel #content.trunk-info-v2 #rules,
html body #panel #content.trunk-info-v2 #prefixes,
html body #panel #content.trunk-info-v2 #numbers{flex:1 1 0!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable!important;scrollbar-width:thin!important;scrollbar-color:var(--dw-border) transparent!important;}
html body #panel #content.trunk-info-v2 #rules::-webkit-scrollbar,
html body #panel #content.trunk-info-v2 #prefixes::-webkit-scrollbar,
html body #panel #content.trunk-info-v2 #numbers::-webkit-scrollbar{width:10px;background:transparent;}
html body #panel #content.trunk-info-v2 #rules::-webkit-scrollbar-thumb,
html body #panel #content.trunk-info-v2 #prefixes::-webkit-scrollbar-thumb,
html body #panel #content.trunk-info-v2 #numbers::-webkit-scrollbar-thumb{background:var(--dw-border);border:2px solid transparent;background-clip:content-box;border-radius:var(--dw-radius-pill);}
html body #panel #content.trunk-info-v2 #rules > table,
html body #panel #content.trunk-info-v2 #prefixes > table,
html body #panel #content.trunk-info-v2 #numbers > table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;}
html body #panel #content.trunk-info-v2 #rules tr.subtitle > td,
html body #panel #content.trunk-info-v2 #prefixes tr.subtitle > td,
html body #panel #content.trunk-info-v2 #numbers tr.subtitle > td{position:sticky!important;top:0!important;z-index:1!important;height:auto!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:var(--dw-bg)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.05em!important;text-align:left!important;text-indent:0!important;text-shadow:none!important;text-transform:uppercase!important;white-space:nowrap!important;}
html body #panel #content.trunk-info-v2 #rules tr.row1,
html body #panel #content.trunk-info-v2 #rules tr.row2,
html body #panel #content.trunk-info-v2 #prefixes tr.row1,
html body #panel #content.trunk-info-v2 #prefixes tr.row2,
html body #panel #content.trunk-info-v2 #numbers tr.row1,
html body #panel #content.trunk-info-v2 #numbers tr.row2{background:transparent!important;background-image:none!important;transition:background-color .12s ease!important;}
html body #panel #content.trunk-info-v2 #rules tr.row1:hover,
html body #panel #content.trunk-info-v2 #rules tr.row2:hover,
html body #panel #content.trunk-info-v2 #prefixes tr.row1:hover,
html body #panel #content.trunk-info-v2 #prefixes tr.row2:hover,
html body #panel #content.trunk-info-v2 #numbers tr.row1:hover,
html body #panel #content.trunk-info-v2 #numbers tr.row2:hover{background:var(--dw-bg)!important;}
html body #panel #content.trunk-info-v2 #rules tr.row1 > td,
html body #panel #content.trunk-info-v2 #rules tr.row2 > td,
html body #panel #content.trunk-info-v2 #prefixes tr.row1 > td,
html body #panel #content.trunk-info-v2 #prefixes tr.row2 > td,
html body #panel #content.trunk-info-v2 #numbers tr.row1 > td,
html body #panel #content.trunk-info-v2 #numbers tr.row2 > td{height:auto!important;padding:var(--dw-sp-3)!important;color:var(--dw-ink)!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--dw-line-2)!important;font-size:var(--dw-fs-sm)!important;text-align:left!important;text-indent:0!important;}
html body #panel #content.trunk-info-v2 #rules tr > td:first-child,
html body #panel #content.trunk-info-v2 #prefixes tr > td:first-child,
html body #panel #content.trunk-info-v2 #numbers tr > td:first-child{padding-left:var(--dw-sp-4)!important;font-family:var(--dw-font-mono)!important;font-weight:600!important;}
html body #panel #content.trunk-info-v2 #rules tr > td:last-child,
html body #panel #content.trunk-info-v2 #prefixes tr > td:last-child,
html body #panel #content.trunk-info-v2 #numbers tr > td:last-child{padding-right:var(--dw-sp-4)!important;text-align:right!important;white-space:nowrap!important;}

/* "borrar": deja de ser un enlace verde suelto. */
html body #panel #content.trunk-info-v2 #rules tr > td:last-child a,
html body #panel #content.trunk-info-v2 #prefixes tr > td:last-child a,
html body #panel #content.trunk-info-v2 #numbers tr > td:last-child a{display:inline-flex!important;align-items:center!important;height:26px!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;text-decoration:none!important;transition:color .15s ease,background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.trunk-info-v2 #rules tr > td:last-child a:hover,
html body #panel #content.trunk-info-v2 #prefixes tr > td:last-child a:hover,
html body #panel #content.trunk-info-v2 #numbers tr > td:last-child a:hover{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;border-color:var(--dw-danger)!important;}
@media (hover:hover){
html body #panel #content.trunk-info-v2 #rules tr.row1 td:last-child a,
html body #panel #content.trunk-info-v2 #rules tr.row2 td:last-child a,
html body #panel #content.trunk-info-v2 #prefixes tr.row1 td:last-child a,
html body #panel #content.trunk-info-v2 #prefixes tr.row2 td:last-child a,
html body #panel #content.trunk-info-v2 #numbers tr.row1 td:last-child a,
html body #panel #content.trunk-info-v2 #numbers tr.row2 td:last-child a{opacity:0;transition:opacity .12s ease,color .15s ease,background-color .15s ease,border-color .15s ease!important;}
html body #panel #content.trunk-info-v2 tr.row1:hover td:last-child a,
html body #panel #content.trunk-info-v2 tr.row2:hover td:last-child a,
html body #panel #content.trunk-info-v2 tr.row1:focus-within td:last-child a,
html body #panel #content.trunk-info-v2 tr.row2:focus-within td:last-child a{opacity:1;}
}

/* Estado vacio: el endpoint devuelve una fila con el texto y un color fijo. */
html body #panel #content.trunk-info-v2 #rules td[colspan],
html body #panel #content.trunk-info-v2 #prefixes td[colspan],
html body #panel #content.trunk-info-v2 #numbers td[colspan]{padding:var(--dw-sp-6) var(--dw-sp-4)!important;color:var(--dw-ink-3)!important;background:transparent!important;border:0!important;font-size:var(--dw-fs-sm)!important;text-align:center!important;}

/* ── 8. El alta: una fila destacada arriba, sin tapar la lista ── */
html body #panel #content.trunk-info-v2 #rule-form,
html body #panel #content.trunk-info-v2 #prefix-form,
/* order:-1 lo lleva arriba de la lista aunque en el HTML venga despues. */
html body #panel #content.trunk-info-v2 #number-form{order:-1!important;flex:0 0 auto!important;width:auto!important;height:auto!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;background:var(--dw-primary-soft)!important;border-bottom:1px solid var(--dw-border)!important;}
html body #panel #content.trunk-info-v2 #rule-form.hidden,
html body #panel #content.trunk-info-v2 #prefix-form.hidden,
html body #panel #content.trunk-info-v2 #number-form.hidden{display:none!important;}
html body #panel #content.trunk-info-v2 #rule-form > table,
html body #panel #content.trunk-info-v2 #prefix-form > table,
html body #panel #content.trunk-info-v2 #number-form > table{width:auto!important;height:auto!important;}
/* La tabla del alta se compacta en un renglon pegado a la izquierda: venia
   con height:100% y align=center, pensada para ocupar el panel entero. */
/* El alta venia como una tabla de un campo por renglon, pensada para llenar
   el panel entero. display:contents aplana tablas, tbody y filas, y el <div>
   del formulario pasa a ser una sola linea de campos que envuelve si no entra.
   Se toca solo la caja: ni un name, ni un id, ni el serialize() del submit. */
html body #panel #content.trunk-info-v2 #rule-form,
html body #panel #content.trunk-info-v2 #prefix-form,
html body #panel #content.trunk-info-v2 #number-form{display:flex!important;align-items:center!important;gap:var(--dw-sp-2) var(--dw-sp-3)!important;flex-wrap:wrap!important;}
html body #panel #content.trunk-info-v2 #rule-form table,
html body #panel #content.trunk-info-v2 #prefix-form table,
html body #panel #content.trunk-info-v2 #number-form table,
html body #panel #content.trunk-info-v2 #rule-form tbody,
html body #panel #content.trunk-info-v2 #prefix-form tbody,
html body #panel #content.trunk-info-v2 #number-form tbody,
html body #panel #content.trunk-info-v2 #rule-form tr,
html body #panel #content.trunk-info-v2 #prefix-form tr,
html body #panel #content.trunk-info-v2 #number-form tr,
html body #panel #content.trunk-info-v2 #rule-form > form,
html body #panel #content.trunk-info-v2 #prefix-form > form,
html body #panel #content.trunk-info-v2 #number-form > form,
html body #panel #content.trunk-info-v2 #rule-form td > form,
html body #panel #content.trunk-info-v2 #prefix-form td > form,
html body #panel #content.trunk-info-v2 #number-form td > form{display:contents!important;}
html body #panel #content.trunk-info-v2 #rule-form td,
html body #panel #content.trunk-info-v2 #prefix-form td,
html body #panel #content.trunk-info-v2 #number-form td{text-align:left!important;}
html body #panel #content.trunk-info-v2 #rule-form table td,
html body #panel #content.trunk-info-v2 #prefix-form table td,
html body #panel #content.trunk-info-v2 #number-form table td{height:auto!important;padding:var(--dw-sp-1) var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:0!important;font-size:var(--dw-fs-sm)!important;vertical-align:middle!important;white-space:nowrap!important;}
html body #panel #content.trunk-info-v2 #rule-form input[type="text"],
html body #panel #content.trunk-info-v2 #prefix-form input[type="text"],
html body #panel #content.trunk-info-v2 #number-form input[type="text"],
html body #panel #content.trunk-info-v2 #rule-form select,
html body #panel #content.trunk-info-v2 #prefix-form select,
html body #panel #content.trunk-info-v2 #number-form select{height:30px!important;min-width:0!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;box-sizing:border-box!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.trunk-info-v2 #rule-form input[type="text"]:focus,
html body #panel #content.trunk-info-v2 #prefix-form input[type="text"]:focus,
html body #panel #content.trunk-info-v2 #number-form input[type="text"]:focus,
html body #panel #content.trunk-info-v2 #rule-form select:focus,
html body #panel #content.trunk-info-v2 #prefix-form select:focus,
html body #panel #content.trunk-info-v2 #number-form select:focus{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;border-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #rule-form,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #prefix-form,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #number-form{background:var(--dw-line)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #rule-form input[type="text"],
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #prefix-form input[type="text"],
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #number-form input[type="text"],
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #rule-form select,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #prefix-form select,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #number-form select{color-scheme:dark;background:var(--dw-bg)!important;}
html body #panel #content.trunk-info-v2 #rule-form a.boxy img,
html body #panel #content.trunk-info-v2 #prefix-form a.boxy img,
html body #panel #content.trunk-info-v2 #number-form a.boxy img{width:16px!important;height:16px!important;vertical-align:middle!important;}

/* ── 9. Aviso superior ── */
html body #panel #content.trunk-info-v2 > #warning:not(:empty){flex:0 0 auto!important;margin:0!important;padding:var(--dw-sp-3) var(--dw-sp-4)!important;border-radius:var(--dw-radius)!important;font-size:var(--dw-fs-md)!important;}

/* ── 10. Angosto ── */
@media (max-width:1200px){
html body #panel #content.trunk-info-v2 .trk-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--dw-sp-2);}
html body #panel #content.trunk-info-v2 .trk-hero{flex-wrap:wrap;}
html body #panel #content.trunk-info-v2 .trk-hero-chips{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
html body #panel #content.trunk-info-v2 tr,
html body #panel #content.trunk-info-v2 a,
html body #panel #content.trunk-info-v2 button{transition:none!important;}
}
/* El nombre del panel ya lo dice la solapa; el <span> del titulo solo hace
   falta cuando se abre el alta, porque ahi el JS lo reescribe con "Nueva
   regla" / "Nueva ruta" / "Nuevo numero". Si el navegador no tiene :has(),
   se deja visible: repetido, pero nunca perdido. */
@supports selector(:has(*)) {
html body #panel #content.trunk-info-v2 #rules-title,
html body #panel #content.trunk-info-v2 #prefixes-title,
html body #panel #content.trunk-info-v2 #numbers-title{display:none!important;}
html body #panel #content.trunk-info-v2 #trunk-rules:has(#rule-form:not(.hidden)) #rules-title,
html body #panel #content.trunk-info-v2 #trunk-prefixes:has(#prefix-form:not(.hidden)) #prefixes-title,
html body #panel #content.trunk-info-v2 #trunk-numbers:has(#number-form:not(.hidden)) #numbers-title{display:inline!important;color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #trunk-rules:has(#rule-form:not(.hidden)) #rules-title,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #trunk-prefixes:has(#prefix-form:not(.hidden)) #prefixes-title,
:root[data-theme="dark"] body #panel #content.trunk-info-v2 #trunk-numbers:has(#number-form:not(.hidden)) #numbers-title{color:var(--dw-accent)!important;}
}
/* Con el titulo oculto la fila de botones queda sola: que se vaya a la derecha. */
html body #panel #content.trunk-info-v2 #prefixes-title,
html body #panel #content.trunk-info-v2 #numbers-title{width:auto!important;}
/* ── TRUNK INFO v2 END ── */

/* ── USER PROFILES v3 — Perfiles de usuario ────────────────────────────────
 * Pantalla: userProfiles.php (Usuarios > Perfiles de Usuario).
 *
 * Lo que cambia sobre la edicion v2, que se mantiene debajo:
 *   · El detalle de la derecha pasa a solapas: Servicios de llamada, Rutas y
 *     Rutas bloqueadas. Antes los seis paneles se apilaban o se reemplazaban
 *     entre si y no se sabia donde estaba uno parado.
 *   · Agregar rutas ya no tapa la lista: el buscador se dibuja arriba de las
 *     rutas del perfil, dentro de la misma solapa.
 *   · Los permisos de llamada dejan de ser un icono que cicla: el modulo
 *     denwa_profiles.js dibuja las tres opciones con su rotulo. El estado lo
 *     sigue llevando la clase chkbox_enabled|disabled|locked del mismo div,
 *     que es lo que lee submitCallServices().
 *   · La lista de perfiles achica los siete dias para que Descripcion y
 *     Horario dejen de recortarse.
 *   · Nada del detalle se corta ni desborda a lo ancho: cada panel entra en
 *     su columna y lo unico que scrollea es la lista.
 *
 * Todo cuelga de #content.user-profiles-v3 (la segunda clase la agrega el
 * parche de userProfiles.php) para no escaparse a ninguna otra pantalla.
 * No cambia IDs, names, onclick, endpoints, rutas ni la logica de permisos.
 * Si el parche del PHP no corriera, nada de esto matchea y la pantalla queda
 * exactamente como esta hoy.
 */

/* ── 1. La pagina ocupa el alto disponible y no desborda a lo ancho ── */
html body #panel #content.user-profiles-v3{position:static!important;display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,9fr)!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:0 var(--dw-sp-3)!important;flex:1 1 auto!important;min-width:0!important;padding:var(--dw-sp-4)!important;overflow:hidden!important;}
html body #panel #content.user-profiles-v3 > #warning{grid-column:1 / -1!important;grid-row:1!important;min-width:0!important;}
html body #panel #content.user-profiles-v3 > #list-left{grid-column:1!important;grid-row:2!important;}
html body #panel #content.user-profiles-v3 > #list-right{grid-column:2!important;grid-row:2!important;}
html body #panel #content.user-profiles-v3 > #list-paging-left{grid-column:1!important;grid-row:3!important;}
html body #panel #content.user-profiles-v3 > #list-paging-right{grid-column:2!important;grid-row:3!important;}
html body #panel #content.user-profiles-v3 > #list-left,
html body #panel #content.user-profiles-v3 > #list-right{display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;margin:0!important;overflow:hidden!important;}
/* Lo unico que scrollea es cada lista, no la pantalla. */
html body #panel #content.user-profiles-v3 #profiles_list{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
html body #panel #content.user-profiles-v3 #profiles_list > div[align="center"]{padding-top:0!important;}
html body #panel #content.user-profiles-v3 #list-left > table{flex:0 0 auto!important;table-layout:fixed!important;}

/* ── 2. Solapas del detalle ── */
html body #panel #content.user-profiles-v3 .prf-tabs{display:flex!important;flex:0 0 auto!important;gap:2px!important;min-width:0!important;margin:0!important;padding:0 var(--dw-sp-2)!important;overflow-x:auto!important;background:var(--dw-bg)!important;border-bottom:1px solid var(--dw-border)!important;scrollbar-width:none!important;}
html body #panel #content.user-profiles-v3 .prf-tabs::-webkit-scrollbar{display:none!important;}
html body #panel #content.user-profiles-v3 .prf-tab{display:inline-flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;flex:0 0 auto!important;height:38px!important;margin:0!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-ink-2)!important;background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;cursor:pointer!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;text-transform:none!important;white-space:nowrap!important;transition:color .14s ease,border-color .14s ease!important;}
html body #panel #content.user-profiles-v3 .prf-tab:hover{color:var(--dw-ink)!important;background:transparent!important;}
html body #panel #content.user-profiles-v3 .prf-tab:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:-2px!important;}
html body #panel #content.user-profiles-v3 .prf-tab.is-on{color:var(--dw-primary)!important;border-bottom-color:var(--dw-primary)!important;}
html body #panel #content.user-profiles-v3 .prf-tab-n{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:20px!important;height:18px!important;padding:0 6px!important;color:var(--dw-ink-2)!important;background:var(--dw-surface-2)!important;border-radius:var(--dw-radius-pill)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;line-height:1!important;}
html body #panel #content.user-profiles-v3 .prf-tab.is-on .prf-tab-n{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.user-profiles-v3 .prf-tab.is-on{color:var(--dw-accent)!important;border-bottom-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.user-profiles-v3 .prf-tab.is-on .prf-tab-n{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;}

/* ── 3. Que se ve en cada solapa ──
 * El panel propio de la solapa se muestra aunque el JS viejo le haya puesto
 * la clase hidden; los paneles auxiliares (buscador y resultados) siguen
 * obedeciendo esa clase, que es como el JS viejo los abre y los cierra.
 * La cadena repite user-profiles-page porque la capa v2 usa :not(.hidden) y
 * sin esa clase de mas empataria en especificidad. */
html body #panel #content.user-profiles-page.user-profiles-v3 #list-right > div{flex:0 0 auto!important;min-width:0!important;}
html body #panel #content.user-profiles-page.user-profiles-v3 #callservices_div,
html body #panel #content.user-profiles-page.user-profiles-v3 #routes_div,
html body #panel #content.user-profiles-page.user-profiles-v3 #searchroutesoptions_div,
html body #panel #content.user-profiles-page.user-profiles-v3 #searchedroutes_div,
html body #panel #content.user-profiles-page.user-profiles-v3 #blockedroutesoptions_div,
html body #panel #content.user-profiles-page.user-profiles-v3 #blockedroutes_div{display:none!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-services #callservices_div{display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-routes #routes_div{display:flex!important;flex-direction:column!important;order:2!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-routes #searchroutesoptions_div:not(.hidden){display:block!important;order:1!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-routes #searchedroutes_div:not(.hidden){display:flex!important;flex-direction:column!important;order:3!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-blocked #blockedroutesoptions_div{display:block!important;order:1!important;}
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-blocked #blockedroutes_div{display:flex!important;flex-direction:column!important;order:2!important;flex:1 1 auto!important;min-height:0!important;}
/* Con las rutas y el buscador abiertos a la vez, cada lista se lleva la mitad. */
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-routes #searchedroutes_div:not(.hidden) ~ #routes_div{flex:1 1 40%!important;}
/* El paginado de la derecha es de las listas, no de los servicios. */
html body #panel #content.user-profiles-page.user-profiles-v3.is-tab-services > #list-paging-right{visibility:hidden!important;}

/* ── 4. Los paneles del detalle por dentro: nada se recorta ──
 * Las tres listas quedan con la cabecera fija y el cuerpo scrolleando. Para
 * eso las tablas anidadas se aplanan a columnas flex; la fila de titulos de
 * columna se deja como tabla de una sola fila para que siga respetando los
 * width="%" que manda el endpoint y quede alineada con la lista. */
html body #panel #content.user-profiles-v3 #list-right > div > table{width:100%!important;}
html body #panel #content.user-profiles-v3 #list-right .subtitle2 td:first-child{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
html body #panel #content.user-profiles-v3 #list-right .subtitle2 td:last-child{white-space:nowrap!important;}
html body #panel #content.user-profiles-v3 #callservices_div > table{table-layout:fixed!important;}
html body #panel #content.user-profiles-v3 #callservices_div > table > tbody > tr.subtitle2 > td:last-child{width:1%!important;}

html body #panel #content.user-profiles-v3 #routes_div > table,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;table-layout:auto!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr.subtitle2,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr.subtitle2,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr.subtitle2{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;flex:0 0 auto!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr.subtitle2 > td,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr.subtitle2 > td,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr.subtitle2 > td{display:block!important;width:auto!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr.subtitle2 > td:first-child,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr.subtitle2 > td:first-child,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr.subtitle2 > td:first-child{flex:1 1 auto!important;min-width:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr.subtitle2 > td:last-child,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr.subtitle2 > td:last-child,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr.subtitle2 > td:last-child{flex:0 0 auto!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2),
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2),
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2){display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;width:auto!important;padding:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td > table,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td > table,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td > table{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr.subtitle,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr.subtitle,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr.subtitle{display:table!important;table-layout:fixed!important;width:100%!important;flex:0 0 auto!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle),
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle),
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle){display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle) > td,
html body #panel #content.user-profiles-v3 #searchedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle) > td,
html body #panel #content.user-profiles-v3 #blockedroutes_div > table > tbody > tr:not(.subtitle2) > td > table > tbody > tr:not(.subtitle) > td{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important;width:auto!important;padding:0!important;}

html body #panel #content.user-profiles-v3 #routes,
html body #panel #content.user-profiles-v3 #searchedroutes,
html body #panel #content.user-profiles-v3 #blockedroutes{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;}
html body #panel #content.user-profiles-v3 #routes table,
html body #panel #content.user-profiles-v3 #searchedroutes table,
html body #panel #content.user-profiles-v3 #blockedroutes table{table-layout:fixed!important;width:100%!important;}
html body #panel #content.user-profiles-v3 #list-right .subtitle2 td{overflow:hidden!important;text-overflow:ellipsis!important;}
/* En las tres listas el texto se parte antes que recortarse: a 1366 la
   columna no da para "Prioridad" ni para un prefijo largo en un renglon. */
html body #panel #content.user-profiles-v3 #routes td,
html body #panel #content.user-profiles-v3 #searchedroutes td,
html body #panel #content.user-profiles-v3 #blockedroutes td,
html body #panel #content.user-profiles-v3 #routes_div .subtitle td,
html body #panel #content.user-profiles-v3 #searchedroutes_div .subtitle td,
html body #panel #content.user-profiles-v3 #blockedroutes_div .subtitle td{overflow:visible!important;text-overflow:clip!important;white-space:normal!important;word-break:break-word!important;line-height:1.25!important;}
/* La ultima columna de cada lista es solo el boton de borrar o el tilde. */
html body #panel #content.user-profiles-v3 #routes td:last-child,
html body #panel #content.user-profiles-v3 #searchedroutes td:last-child,
html body #panel #content.user-profiles-v3 #blockedroutes td:last-child,
html body #panel #content.user-profiles-v3 #routes_div .subtitle td:last-child,
html body #panel #content.user-profiles-v3 #searchedroutes_div .subtitle td:last-child,
html body #panel #content.user-profiles-v3 #blockedroutes_div .subtitle td:last-child{overflow:visible!important;text-align:center!important;}
html body #panel #content.user-profiles-v3 #routes td:last-child img,
html body #panel #content.user-profiles-v3 #blockedroutes td:last-child img{width:14px!important;height:14px!important;}
/* En los resultados de la busqueda las tres celdas editables entran justas. */
html body #panel #content.user-profiles-v3 #searchedroutes input[type="text"]{width:42px!important;height:26px!important;margin:0!important;padding:0 var(--dw-sp-1)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font-mono)!important;font-size:var(--dw-fs-sm)!important;text-align:center!important;}
html body #panel #content.user-profiles-v3 #searchedroutes select{max-width:68px!important;height:26px!important;margin:0!important;padding:0 var(--dw-sp-1)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}

/* ── 5. Lista de perfiles: los siete dias dejan de comerse el ancho ── */
html body #panel #content.user-profiles-v3 #list-left > table .title td:nth-child(1),
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(1){width:auto!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
html body #panel #content.user-profiles-v3 #list-left > table .title td:nth-child(2),
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(2){width:104px!important;font-size:var(--dw-fs-xs)!important;white-space:nowrap!important;}
html body #panel #content.user-profiles-v3 #list-left > table .title td:nth-child(n+3):nth-child(-n+9),
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(n+3):nth-child(-n+9){width:21px!important;padding-left:0!important;padding-right:0!important;}
html body #panel #content.user-profiles-v3 #list-left > table .title td:nth-child(10),
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(10){width:64px!important;overflow:visible!important;}
@supports selector(:has(*)){
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(n+3):nth-child(-n+9)::before{width:18px!important;height:18px!important;}
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(n+3):nth-child(-n+9)::after{width:10px!important;height:10px!important;-webkit-mask-size:10px!important;mask-size:10px!important;}
}
html body #panel #content.user-profiles-v3 #profiles_list table{table-layout:fixed!important;width:100%!important;}
html body #panel #content.user-profiles-v3 #profiles_list table td:nth-child(10) img{width:14px!important;height:14px!important;}

/* ── 6. Servicios de llamada: el selector de tres opciones ──
 * El div #chk_X sigue siendo el que lleva la clase de estado; adentro va el
 * selector que dibuja el modulo. Sin el modulo, el icono heredado de la v2
 * sigue funcionando igual que hoy. */
html body #panel #content.user-profiles-v3 #call_services .chkbox:has(.prf-tri){width:auto!important;height:auto!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;cursor:default!important;}
html body #panel #content.user-profiles-v3 #call_services .chkbox:has(.prf-tri)::after{display:none!important;content:none!important;}
html body #panel #content.user-profiles-v3 .prf-tri{display:inline-flex!important;align-items:stretch!important;gap:0!important;padding:2px!important;background:var(--dw-bg)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt{display:inline-flex!important;align-items:center!important;gap:5px!important;height:24px!important;margin:0!important;padding:0 8px!important;color:var(--dw-ink-2)!important;background:transparent!important;border:0!important;border-radius:var(--dw-radius-pill)!important;box-shadow:none!important;cursor:pointer!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-xs)!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;text-transform:none!important;white-space:nowrap!important;transition:color .12s ease,background-color .12s ease!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt::before{content:""!important;flex:0 0 auto!important;width:12px!important;height:12px!important;background:currentColor!important;-webkit-mask:var(--dw-ico-check) center/12px no-repeat!important;mask:var(--dw-ico-check) center/12px no-repeat!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt[data-cls="chkbox_locked"]::before{-webkit-mask-image:var(--dw-ico-lock)!important;mask-image:var(--dw-ico-lock)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt[data-cls="chkbox_disabled"]::before{-webkit-mask-image:var(--dw-ico-x)!important;mask-image:var(--dw-ico-x)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt:hover{color:var(--dw-ink)!important;background:var(--dw-surface-2)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt.is-on[data-cls="chkbox_enabled"]{color:var(--dw-success)!important;background:var(--dw-success-soft)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt.is-on[data-cls="chkbox_locked"]{color:var(--dw-warning)!important;background:var(--dw-warning-soft)!important;}
html body #panel #content.user-profiles-v3 .prf-tri-opt.is-on[data-cls="chkbox_disabled"]{color:var(--dw-danger)!important;background:var(--dw-danger-soft)!important;}
/* Con el selector puesto, la fila necesita mas aire y menos ancho fijo. */
html body #panel #content.user-profiles-v3 #call_services form table table{max-width:none!important;}
html body #panel #content.user-profiles-v3 #call_services form table table td:nth-child(2){width:auto!important;padding-left:var(--dw-sp-2)!important;padding-right:var(--dw-sp-2)!important;text-align:left!important;}
html body #panel #content.user-profiles-v3 #call_services form > table > tbody > tr > td{padding:var(--dw-sp-2) var(--dw-sp-3)!important;}
/* Una sola columna siempre: la fila de un permiso mide unos 540px y ni a 1920
   entran dos al lado de la otra sin recortar el rotulo. */
html body #panel #content.user-profiles-v3 #call_services form > table > tbody > tr{display:flex!important;flex-direction:column!important;}
html body #panel #content.user-profiles-v3 #call_services form > table > tbody > tr > td{width:100%!important;}
html body #panel #content.user-profiles-v3 #call_services form table table{max-width:620px!important;margin:0!important;}

/* ── 7. Buscar rutas y bloquear: el formulario en un solo renglon ── */
html body #panel #content.user-profiles-v3 #searchroutesoptions_div > table,
html body #panel #content.user-profiles-v3 #blockedroutesoptions_div > table{background:var(--dw-primary-soft)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions,
html body #panel #content.user-profiles-v3 #blockedroutesoptions{display:block!important;padding:var(--dw-sp-2) var(--dw-sp-3)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions form,
html body #panel #content.user-profiles-v3 #searchroutesoptions form > table,
html body #panel #content.user-profiles-v3 #searchroutesoptions form table tbody,
html body #panel #content.user-profiles-v3 #searchroutesoptions form table tr,
html body #panel #content.user-profiles-v3 #searchroutesoptions form table td,
html body #panel #content.user-profiles-v3 #blockedroutesoptions form,
html body #panel #content.user-profiles-v3 #blockedroutesoptions form > table,
html body #panel #content.user-profiles-v3 #blockedroutesoptions form table tbody,
html body #panel #content.user-profiles-v3 #blockedroutesoptions form table tr,
html body #panel #content.user-profiles-v3 #blockedroutesoptions form table td{display:contents!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions,
html body #panel #content.user-profiles-v3 #blockedroutesoptions{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:var(--dw-sp-2)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions input[type="text"],
html body #panel #content.user-profiles-v3 #blockedroutesoptions input[type="text"]{width:120px!important;height:30px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions select{height:30px!important;max-width:150px!important;margin:0!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions a.button,
html body #panel #content.user-profiles-v3 #blockedroutesoptions a.button{display:inline-flex!important;align-items:center!important;height:30px!important;margin:0!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border:0!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-sm)!important;font-weight:600!important;line-height:1!important;text-decoration:none!important;text-transform:none!important;white-space:nowrap!important;}
/* Buscar es la accion secundaria: sin esto los dos botones verdes pegados se
   leen como uno solo. */
html body #panel #content.user-profiles-v3 #searchroutesoptions a.button:first-of-type{color:var(--dw-primary)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions a.button:first-of-type:hover{background:var(--dw-surface-2)!important;}
:root[data-theme="dark"] body #panel #content.user-profiles-v3 #searchroutesoptions a.button:first-of-type{color:var(--dw-accent)!important;background:var(--dw-surface)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions a.button:hover,
html body #panel #content.user-profiles-v3 #blockedroutesoptions a.button:hover{background:var(--dw-primary-hover)!important;}
html body #panel #content.user-profiles-v3 #searchroutesoptions a.button:focus-visible,
html body #panel #content.user-profiles-v3 #blockedroutesoptions a.button:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
:root[data-theme="dark"] body #panel #content.user-profiles-v3 #searchroutesoptions a.button,
:root[data-theme="dark"] body #panel #content.user-profiles-v3 #blockedroutesoptions a.button{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;}

/* ── 8. Barra de scroll de las listas, igual que en el resto del sistema ── */
html body #panel #content.user-profiles-v3 #profiles_list::-webkit-scrollbar,
html body #panel #content.user-profiles-v3 #routes::-webkit-scrollbar,
html body #panel #content.user-profiles-v3 #searchedroutes::-webkit-scrollbar,
html body #panel #content.user-profiles-v3 #blockedroutes::-webkit-scrollbar{width:8px!important;background:transparent!important;}
html body #panel #content.user-profiles-v3 #profiles_list::-webkit-scrollbar-thumb,
html body #panel #content.user-profiles-v3 #routes::-webkit-scrollbar-thumb,
html body #panel #content.user-profiles-v3 #searchedroutes::-webkit-scrollbar-thumb,
html body #panel #content.user-profiles-v3 #blockedroutes::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border:2px solid transparent!important;background-clip:content-box!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.user-profiles-v3 #profiles_list,
html body #panel #content.user-profiles-v3 #routes,
html body #panel #content.user-profiles-v3 #searchedroutes,
html body #panel #content.user-profiles-v3 #blockedroutes{scrollbar-width:thin!important;scrollbar-color:var(--dw-border) transparent!important;}
/* ── USER PROFILES v3 END ── */

/* ── ADMIN TASK STATUS v1 ── */
#panel .dw-content-topbar #adminTasks.dw-admin-task-status {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: none;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 var(--dw-sp-3) !important;
  padding: var(--dw-sp-2) var(--dw-sp-3) !important;
  overflow: visible !important;
  transform: none !important;
  box-sizing: border-box !important;
  color: var(--dw-ink-2) !important;
  background: var(--dw-bg) !important;
  border: 1px solid var(--dw-border) !important;
  border-radius: var(--dw-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--dw-font) !important;
  font-size: var(--dw-fs-sm) !important;
  font-style: normal !important;
  line-height: normal !important;
  pointer-events: none !important;
  text-align: center !important;
  white-space: normal !important;
}

#panel .dw-content-topbar #adminTasks.dw-admin-task-status::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#panel .dw-content-topbar #adminTasks.dw-admin-task-status #at_details {
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
}
/* ── ADMIN TASK STATUS v1 END ── */
/* -- USER PROFILES v4 - el alta de rutas ocurre en la misma lista ----------
 * Las rutas disponibles ya no viven en un panel aparte: #searchedroutes es
 * ahora una fila mas de la tabla de Rutas, debajo de las rutas del perfil.
 * Vacia no ocupa lugar; con contenido crece hasta la mitad del panel, scrollea
 * y se separa con una linea. Los width="%" los sigue mandando el endpoint, asi
 * que las dos listas quedan alineadas con la misma cabecera. */
html body #panel #content.user-profiles-v3 #routes_div tr.prf-pick{flex:0 0 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div tr.prf-pick > td{flex:0 0 auto!important;min-height:0!important;}
html body #panel #content.user-profiles-v3 #routes_div #searchedroutes:empty{display:none!important;}
html body #panel #content.user-profiles-v3 #routes_div #searchedroutes:not(:empty){flex:0 1 auto!important;max-height:40vh!important;overflow-y:auto!important;border-top:1px solid var(--dw-line-2)!important;}
/* Las dos listas reservan el canal de la barra: asi las columnas de las rutas
 * del perfil y las de las disponibles arrancan en el mismo pixel, con o sin
 * scroll en una de ellas. */
html body #panel #content.user-profiles-v3 #routes_div #routes,
html body #panel #content.user-profiles-v3 #routes_div #searchedroutes{scrollbar-gutter:stable!important;}
/* -- USER PROFILES v4 END -- */
/* -- TRUNK EDITOR v1 - Proveedores > Alta y edicion de proveedor ------------
 * trunkUM.php: seis solapas (General, Avanzada, SMS, Alarmas de ASR, Codecs,
 * SBC) que quedaron con el diseno anterior. Se reusa tal cual el tratamiento
 * del editor de usuarios y de la ficha del proveedor: barra de solapas con
 * subrayado, cuerpo en tarjetas, filas etiqueta/campo y pie de acciones.
 *
 * Nada de esto toca el HTML: los ganchos son los que ya manda la pagina
 * (.tabs_menu, .tab, .tab_active, .tabcontent, .border2/.border3,
 * tr.subtitle, div.subtitle, .denwa-table, .tab_footer). El armazon
 * (posiciones absolutas de barra/cuerpo/pie) ya vive en el CSS: aca solo se
 * corrige la altura de la barra, que pasa de 30 a 42 px.
 *
 * La segunda clase .trunk-update-page es el gancho para ganarle a las reglas
 * anteriores sin subir a mano el peso del selector.
 * -------------------------------------------------------------------------- */

/* -- 1. Armazon: la barra de solapas pasa a 42 px -- */
html body #panel #content.trunk-editor-page.trunk-update-page > form#trunkForm > .tabs_menu{height:42px!important;padding:0 var(--dw-sp-3)!important;background:var(--dw-surface)!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-shadow:none!important;box-sizing:border-box!important;}
html body #panel #content.trunk-editor-page.trunk-update-page > form#trunkForm > .tabscontent_background{top:42px!important;background:var(--dw-surface)!important;border:0!important;border-radius:0!important;box-shadow:none!important;}

/* -- 2. Solapas: mismo control que la ficha del proveedor -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu table{width:auto!important;height:100%!important;margin:0!important;border-collapse:collapse!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu td{height:100%!important;padding:0!important;background:transparent!important;border:0!important;vertical-align:middle!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab:not([style*="display:none"]),
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_active:not([style*="display:none"]),
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_over:not([style*="display:none"]){display:flex!important;align-items:center!important;justify-content:center!important;height:42px!important;min-width:0!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink-2)!important;background:transparent!important;background-image:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;letter-spacing:0!important;line-height:1!important;text-align:center!important;text-transform:none!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer!important;transition:color .15s ease,border-color .15s ease,background .15s ease!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab[style*="display:none"],
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_active[style*="display:none"]{display:none!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_over{color:var(--dw-ink)!important;background:var(--dw-bg)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_active{color:var(--dw-primary)!important;background:transparent!important;border-bottom-color:var(--dw-primary)!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabs_menu .tab_active{color:var(--dw-accent)!important;border-bottom-color:var(--dw-accent)!important;}

/* -- 3. Cuerpo de las solapas -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent{padding:var(--dw-sp-6) var(--dw-sp-4)!important;box-sizing:border-box!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent > table{width:min(1180px,100%)!important;height:auto!important;margin:0 auto!important;border-collapse:collapse!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent > table > tbody > tr > td{padding:0 var(--dw-sp-5)!important;vertical-align:top!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent > table > tbody > tr > td[style*="padding-top:30px"]{padding-top:0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent table table{max-width:none!important;border-collapse:separate!important;border-spacing:0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr[height="100"]{height:auto!important;}

/* -- 4. Filas etiqueta / campo -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent td{color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;line-height:1.35!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent td[align="right"]{padding:var(--dw-sp-2) var(--dw-sp-3) var(--dw-sp-2) 0!important;color:var(--dw-ink-2)!important;font-weight:600!important;vertical-align:middle!important;white-space:nowrap!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent td[align="left"]{padding:var(--dw-sp-2) 0!important;vertical-align:middle!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent td[align="center"]{vertical-align:middle!important;}

/* -- 5. Controles -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="text"],
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="password"],
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="number"],
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent select,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent textarea{min-width:64px!important;min-height:32px!important;height:auto!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;box-sizing:border-box!important;transition:border-color .15s ease!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent textarea{min-height:72px!important;padding:var(--dw-sp-2)!important;line-height:1.4!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent select{width:auto!important;min-width:120px!important;max-width:100%!important;padding-right:var(--dw-sp-4)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="text"]:hover:not([disabled]),
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="password"]:hover:not([disabled]),
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent select:hover:not([disabled]),
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent textarea:hover:not([disabled]){border-color:var(--dw-ink-3)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="text"]:focus-visible,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="password"]:focus-visible,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent select:focus-visible,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent textarea:focus-visible{border-color:var(--dw-primary)!important;outline:2px solid var(--dw-primary)!important;outline-offset:1px!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[disabled],
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent select[disabled],
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent textarea[disabled]{color:var(--dw-ink-3)!important;background:var(--dw-bg)!important;cursor:not-allowed!important;}

/* -- 6. Casillas: caja con tilde, legible en claro y en oscuro.
 *      Era lo que no se veia: appearance:none sin estado marcado. -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]{position:relative!important;appearance:none!important;-webkit-appearance:none!important;width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;margin:0 var(--dw-sp-1) 0 0!important;padding:0!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:4px!important;box-shadow:none!important;cursor:pointer!important;vertical-align:middle!important;transition:background .15s ease,border-color .15s ease!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:hover:not([disabled]){border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:checked{background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:checked::after{content:""!important;position:absolute!important;top:1px!important;left:5px!important;width:4px!important;height:9px!important;border:solid var(--dw-on-primary)!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:focus-visible{outline:2px solid var(--dw-primary)!important;outline-offset:2px!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"][disabled]{background:var(--dw-bg)!important;cursor:not-allowed!important;opacity:.72!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:checked{background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabcontent input[type="checkbox"]:checked::after{border-color:var(--dw-brand-black)!important;}

/* -- 7. Cajas heredadas (.border2 / .border3 / .denwa-table) -> tarjetas.
 *      Traian el borde lima y alturas fijas en linea. -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border2,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border3,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .denwa-table{width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;overflow:hidden!important;box-sizing:border-box!important;text-align:left!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .borderbot3{border-bottom:1px solid var(--dw-line)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .bordertop3,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .bordertop1{border-top:1px solid var(--dw-line)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .borderlef3{border-left:1px solid var(--dw-line)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border2 > table,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border3 > table,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .denwa-table > table{width:100%!important;}

/* -- 8. Encabezados heredados: la banda lima pasa a cabecera de tarjeta -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr.subtitle > td,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr.subtitle2 > td{height:34px!important;padding:0 var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.2!important;text-transform:uppercase!important;text-shadow:none!important;white-space:nowrap!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent div.subtitle{display:flex!important;align-items:center!important;gap:var(--dw-sp-2)!important;height:auto!important;min-height:34px!important;margin:0!important;padding:var(--dw-sp-1) var(--dw-sp-3)!important;color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;background-image:none!important;border:0!important;border-bottom:1px solid var(--dw-border)!important;border-radius:0!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;letter-spacing:.04em!important;line-height:1.25!important;text-align:left!important;text-transform:uppercase!important;text-shadow:none!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr.subtitle > td,
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr.subtitle2 > td,
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tabcontent div.subtitle{color:var(--dw-accent)!important;background:var(--dw-primary-soft)!important;}
/* La accion que vive dentro de la banda (Agregar canales) sigue a la derecha. */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent div.subtitle > div{margin-left:auto!important;float:none!important;height:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent div.subtitle .over_item{display:inline-flex!important;align-items:center!important;gap:var(--dw-sp-1)!important;height:24px!important;padding:0 var(--dw-sp-2)!important;color:var(--dw-primary)!important;background:var(--dw-surface)!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;font-size:var(--dw-fs-xs)!important;font-weight:700!important;text-transform:uppercase!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent div.subtitle .over_item:hover{background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}

/* -- 9. Avanzada: canales del proveedor y bloque de opciones -- */
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 > table > tbody > tr > td > table{width:min(860px,100%)!important;margin:0 auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 > table > tbody > tr > td > table > tbody > tr > td{padding:0 0 var(--dw-sp-4)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 #trunk_channels{width:100%!important;max-height:220px!important;overflow:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 .border2{padding:var(--dw-sp-3) var(--dw-sp-4)!important;overflow:visible!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 .border2 td[align]{padding:var(--dw-sp-1) 0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_2 .border2 td[align="right"]{padding-right:var(--dw-sp-3)!important;}
/* El bloque trae dos pares etiqueta/campo pegados: la segunda columna necesita aire. */

/* -- 9b. Alarmas de ASR: el grupo centrado; los width="50%" heredados
 *       empujaban todo el formulario contra la mitad derecha. -- */
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_3 > table > tbody > tr > td > table{width:min(520px,100%)!important;margin:0 auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_3 td[width="50%"]{width:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_3 td[align="right"]{width:1%!important;}

/* -- 10. Codecs: dos tarjetas parejas, nombres sin recortar y DTMF/FAX abajo -- */
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 > table > tbody > tr > td > table{width:min(760px,100%)!important;margin:0 auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 > table > tbody > tr > td > table > tbody > tr > td{padding:0 var(--dw-sp-3) var(--dw-sp-4)!important;vertical-align:top!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 .border2{display:block!important;width:100%!important;padding:0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 .border2 td[align]{padding:0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 .border2 tr.subtitle > td{text-align:center!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs{width:100%!important;height:auto!important;min-height:132px!important;max-height:240px!important;overflow-x:hidden!important;overflow-y:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs > div,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs > div{display:block!important;height:auto!important;min-height:34px!important;padding:0 var(--dw-sp-2)!important;border-bottom:1px solid var(--dw-line-2)!important;color:var(--dw-ink)!important;font-size:var(--dw-fs-md)!important;line-height:1.3!important;text-align:left!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs > div:last-child,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs > div:last-child{border-bottom:0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs > div:hover,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs > div:hover{background:var(--dw-bg)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs table,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs table{width:100%!important;table-layout:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs td[align="left"],
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs td[align="left"]{padding:var(--dw-sp-1) 0!important;text-align:left!important;white-space:nowrap!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs td[align="right"],
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs td[align="right"]{width:1%!important;padding:var(--dw-sp-1) 0!important;white-space:nowrap!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs .inline,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs .inline{display:inline-flex!important;align-items:center!important;gap:var(--dw-sp-1)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs .inline a,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs .inline a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;color:var(--dw-ink-2)!important;border-radius:var(--dw-radius-sm)!important;text-decoration:none!important;transition:background .15s ease,color .15s ease!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs .inline a:hover,
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #video_codecs .inline a:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;}
/* El "[Ver]" de la nota de G.729 es texto, no un boton de orden. */
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 #audio_codecs td[align="left"] a{display:inline!important;margin-left:var(--dw-sp-1)!important;color:var(--dw-primary)!important;font-size:var(--dw-fs-xs)!important;text-decoration:underline!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 tr[height="100"] .border2{padding:var(--dw-sp-3) var(--dw-sp-4)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 tr[height="100"] .border2 td[align]{padding:var(--dw-sp-1) 0!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 tr[height="100"] .border2 td[align="right"]{padding-right:var(--dw-sp-3)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page #tabcontent_4 tr[height="100"] .border2{width:min(420px,100%)!important;margin:0 auto!important;}

/* -- 11. Pie de acciones: Cancelar secundario, Confirmar primario -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer{padding:var(--dw-sp-2) var(--dw-sp-3)!important;background:var(--dw-bg)!important;border:0!important;border-top:1px solid var(--dw-border)!important;box-sizing:border-box!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer table{width:100%!important;height:auto!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer td{padding:0 var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;font-size:var(--dw-fs-md)!important;vertical-align:middle!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer td:first-child{color:var(--dw-ink)!important;font-weight:600!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer .boxybutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--dw-sp-2)!important;min-width:104px!important;height:34px!important;margin:0!important;padding:0 var(--dw-sp-4)!important;color:var(--dw-ink)!important;background:var(--dw-surface)!important;background-image:none!important;border:1px solid var(--dw-border)!important;border-radius:var(--dw-radius-sm)!important;box-shadow:none!important;font-family:var(--dw-font)!important;font-size:var(--dw-fs-md)!important;font-weight:600!important;text-transform:none!important;cursor:pointer!important;transition:background .15s ease,border-color .15s ease,color .15s ease!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer .boxybutton:hover{color:var(--dw-primary)!important;background:var(--dw-primary-soft)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer #submit_button.boxybutton{color:var(--dw-on-primary)!important;background:var(--dw-primary)!important;border-color:var(--dw-primary)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer #submit_button.boxybutton:hover{background:var(--dw-primary-hover)!important;border-color:var(--dw-primary-hover)!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tab_footer #submit_button.boxybutton{color:var(--dw-brand-black)!important;background:var(--dw-accent)!important;border-color:var(--dw-accent)!important;}
:root[data-theme="dark"] body #panel #content.trunk-editor-page.trunk-update-page .tab_footer #submit_button.boxybutton:hover{background:var(--dw-bright-300)!important;border-color:var(--dw-bright-300)!important;}
/* Los PNG heredados de los botones ya no existen en el tema nuevo. */
html body #panel #content.trunk-editor-page.trunk-update-page .tab_footer .boxybutton img{display:none!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent img[src*="Help"]{width:16px!important;height:16px!important;margin-left:var(--dw-sp-1)!important;opacity:.7!important;cursor:help!important;vertical-align:middle!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent img[src*="Help"]:hover{opacity:1!important;}

/* -- 12. Barra de scroll del cuerpo, igual que en el resto del sistema -- */
html body #panel #content.trunk-editor-page.trunk-update-page ::-webkit-scrollbar{width:8px!important;height:8px!important;}
html body #panel #content.trunk-editor-page.trunk-update-page ::-webkit-scrollbar-track{background:transparent!important;}
html body #panel #content.trunk-editor-page.trunk-update-page ::-webkit-scrollbar-thumb{background:var(--dw-border)!important;border:2px solid transparent!important;background-clip:content-box!important;border-radius:var(--dw-radius-pill)!important;}
html body #panel #content.trunk-editor-page.trunk-update-page ::-webkit-scrollbar-thumb:hover{background:var(--dw-ink-3)!important;background-clip:content-box!important;}
html body #panel #content.trunk-editor-page.trunk-update-page .tabscontent_background{scrollbar-width:thin!important;scrollbar-color:var(--dw-border) transparent!important;}
/* -- 13. Aire entre las dos columnas de campos. Va al final a proposito: las
 *        reglas de cada solapa reescriben el padding de todas sus celdas. -- */
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border2 > table > tbody > tr > td + td,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent .border3 > table > tbody > tr > td + td,
html body #panel #content.trunk-editor-page.trunk-update-page .tabcontent tr > td[align="right"]:not(:first-child){padding-left:var(--dw-sp-6)!important;}
/* -- TRUNK EDITOR v1 END -- */
/* -- USER EDITOR v2.2 - Codecs: el nombre del codec es texto, no boton -----
 * La regla de v2.1 (#audio_codecs a / #video_codecs a) estaba pensada para
 * las flechas de orden, pero alcanza a todos los <a> de la lista: los nombres
 * con aviso -G.729 (*) y G.723 (*)- y el [Ver] entraban en una caja de 22 px
 * y se recortaban. Aca las flechas siguen siendo boton y el resto vuelve a
 * ser texto corrido. Se distinguen por el onclick, que es el unico gancho que
 * emite el proceso.
 * ------------------------------------------------------------------------- */
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a[onclick*="warn"],
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a[onclick*="warn"]{display:inline!important;width:auto!important;height:auto!important;padding:0!important;background:none!important;border-radius:0!important;color:var(--dw-primary)!important;font-weight:600!important;white-space:nowrap!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a[onclick*="warn"]:hover,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a[onclick*="warn"]:hover{background:none!important;text-decoration:underline!important;}
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs a[onclick*="warn"]:focus-visible,
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs a[onclick*="warn"]:focus-visible{outline:2px solid var(--dw-primary);outline-offset:1px;}
/* el nombre no se parte en dos renglones ni se corta */
html body #panel #content.user-editor-page #tabcontent_4 #audio_codecs td[align="left"],
html body #panel #content.user-editor-page #tabcontent_4 #video_codecs td[align="left"]{white-space:nowrap!important;}
/* -- USER EDITOR v2.2 END -- */
/* -- SIDENAV v2.1 - Riel plegado: el flotante no cambia al entrarle ---------
 * En el riel, el <ul.dropdown-menu> lleva data-tip (lo copia el script de
 * header.php) y con el se dibuja el titulo del flotante en su ::before. Pero
 * la regla del globo de los iconos, [data-tip]:not(.dropdown-toggle):hover,
 * alcanza tambien a ese <ul> y pisa el MISMO ::before: al pasar el puntero al
 * desplegable el titulo se convertia en globo flotante, el panel perdia esa
 * fila y toda la lista saltaba 25 px hacia arriba, justo debajo del cursor.
 *
 * Aca se vuelve a declarar el titulo para el estado :hover. Mismo peso que la
 * regla del globo (0,1,5,4) pero mas abajo en el archivo, asi gana sin subir
 * el selector a mano y sin tocar el bloque SIDENAV v2.
 * ------------------------------------------------------------------------- */
@media (min-width:992px){
html[data-sidenav="off"] body #panel nav.dw-sidenav.dw-nav2 .dropdown-menu[data-tip]:hover::before{position:sticky!important;top:0!important;left:auto!important;right:auto!important;z-index:1!important;display:block!important;margin:0 0 var(--dw-sp-1)!important;padding:var(--dw-sp-1) var(--dw-sp-2)!important;color:var(--dw-ink-2)!important;background:var(--dw-surface)!important;border-bottom:1px solid var(--dw-line-2)!important;border-radius:0!important;content:attr(data-tip)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.06em!important;line-height:normal!important;pointer-events:none!important;text-transform:uppercase!important;transform:none!important;white-space:nowrap!important;}
}
/* -- SIDENAV v2.1 END -- */