/* ╔══════════════════════════════════════════════════════════════╗
   ║  XOne Hub Design System — xonehub.css                       ║
   ║  Estilos propios del diseño XOne Hub (AngularJS SPA).       ║
   ║  Los estilos específicos de cada vista van en su sección     ║
   ║  correspondiente al final del fichero. NO poner estilos de   ║
   ║  vistas en los propios HTML (los <style> de parciales        ║
   ║  AngularJS no se limpian al navegar).                        ║
   ╠══════════════════════════════════════════════════════════════╣
   ║  ÍNDICE                                                      ║
   ║                                                              ║
   ║  § VARIABLES & TOKENS                                        ║
   ║  § DARK MODE                                                 ║
   ║  § GLOBAL RESET & TIPOGRAFÍA                                 ║
   ║                                                              ║
   ║  ── LAYOUT CHROME ──────────────────────────────────────    ║
   ║  § TOPBAR                                                    ║
   ║  § SIDEBAR                                                   ║
   ║  § MAIN CONTENT                                              ║
   ║  § STATUSBAR                                                 ║
   ║                                                              ║
   ║  ── COMPONENTES COMPARTIDOS ────────────────────────────    ║
   ║  § VIEW WRAPPER                                              ║
   ║  § FILTER BAR & SEARCH                                       ║
   ║  § BOTONES                                                   ║
   ║  § ACTION BUTTONS & STATUS INDICATORS                        ║
   ║  § EMPTY STATE                                               ║
   ║  § LED INDICATOR                                             ║
   ║                                                              ║
   ║  ── VISTAS ─────────────────────────────────────────────    ║
   ║  § PROJECTS VIEW          (projects.html)                    ║
   ║  § SECURITY VIEW          (xcloud/security.html)             ║
   ║  § MAM VIEW               (mam_*.html)                       ║
   ║  § MDM VIEW               (mdm_*.html / app_device_*.html)   ║
   ║  § KIOSK VIEW             (app_kiosk.html)                   ║
   ║  § KIOSK PREMIUM VIEW     (app_kioskpremium.html)            ║
   ║  § FRAMEWORKS VIEW        (xcloud/frameworks.html)           ║
   ║  § FORMS VIEW             (xcloud/forms.html)                ║
   ║  § LOGS VIEW              (xcloud/logs.html)                 ║
   ║  § USERS VIEW             (xcloud/users.html)                ║
   ║  § ENVIRONMENTS VIEW      (xcloud/environments.html)         ║
   ║  § DASHBOARD / HOME       (tpl/dashboard.html)               ║
   ║  § REPORTS VIEW           (app_reports.html)                 ║
   ║  § SETTINGS VIEW          (tpl/blocks/settings.html)         ║
   ║  § BOTS VIEW              (xcloud/bots.html)                 ║
   ║  § TOOLS VIEW             (xcloud/tools.html)               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════
   VARIABLES & TOKENS
   ════════════════════════════════════════════════ */
:root {
  --xh-a:      #00acd7;
  --xh-b:      #00396f;
  --xh-grad:   #00396f;
  --xh-bg:     #f5f7fa;
  --xh-white:  #fff;
  --xh-s1:     #f0f4f8;
  --xh-s2:     #e8edf4;
  --xh-border: #dde5ef;
  --xh-text:   #18293e;
  --xh-mid:    #4d6782;
  --xh-dim:    #8fa8c0;
  --xh-green:  #00b87c;
  --xh-red:    #e8394a;
  --xh-amber:  #f59e0b;
  --xh-topbar-h:    52px;
  --xh-statusbar-h: 28px;
  --xh-sidebar-w:   212px;
  --xh-hdr-h:       55px;
  /* Statusbar theme vars */
  --xh-statusbar-bg:     #d0d8e0;
  --xh-statusbar-border: #b0bcc8;
  --xh-statusbar-color:  #00396f;
  --xh-statusbar-lbl:    #4d6782;
  --xh-statusbar-val:    #00396f;
}

/* ════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════ */
body.xh-dark {
  --xh-bg:     #0d1b2a;
  --xh-white:  #112236;
  --xh-s1:     #162d42;
  --xh-s2:     #1a3450;
  --xh-border: #1e3a54;
  --xh-text:   #d0e4f4;
  --xh-mid:    #7aaac8;
  --xh-dim:    #3d6a8a;
  --xh-statusbar-bg:     #0a1520;
  --xh-statusbar-border: #1e3a54;
  --xh-statusbar-color:  #d0e4f4;
  --xh-statusbar-lbl:    #7aaac8;
  --xh-statusbar-val:    #90c4e0;
}
body.xh-dark .app-header.navbar { background: #071220 !important; }
body.xh-dark .app-aside { background: var(--xh-white) !important; border-right-color: var(--xh-border) !important; }

/* ════════════════════════════════════════════════
   GLOBAL RESET & TIPOGRAFÍA
   ════════════════════════════════════════════════ */
body, .app, .app *:not(.fa):not([class*="fa-"]):not([class*="glyphicon"]) {
  font-family: "Plus Jakarta Sans", sans-serif;
}
/* site.css añade padding-top:50px y padding-bottom:20px al body — los eliminamos */
html, body { background-color: var(--xh-bg) !important; padding: 0 !important; margin: 0 !important; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  LAYOUT CHROME                                               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════
   TOPBAR — override Bootstrap app-header.navbar
   ════════════════════════════════════════════════ */
.app-header.navbar {
  height: var(--xh-topbar-h) !important;
  background: #00396f !important;
  border: none !important;
  padding: 0 !important;
  min-height: unset !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}
/* hide Bootstrap's inner wrappers visual chrome */
.app-header.navbar .navbar-header,
.app-header.navbar .navbar-collapse {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* XOne Hub topbar inner flex container */
.xh-topbar-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  gap: 14px;
  height: var(--xh-topbar-h);
  position: relative;
}
.xh-topbar-inner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.xh-tb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  text-decoration: none !important;
  color: #fff !important;
}
.xh-tb-logo img { max-height: 34px; border-radius: 6px; }
.xh-tb-brand {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.xh-tb-env {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.xh-tb-env-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--xh-a);
  box-shadow: 0 0 4px var(--xh-a);
  flex-shrink: 0;
}
.xh-tb-env-name {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Theme toggle buttons */
.xh-theme-bar { display: flex; gap: 4px; }
.xh-theme-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}
.xh-theme-btn.act {
  background: rgba(255,255,255,.25);
  color: #fff;
  border-color: rgba(255,255,255,.4);
}

/* Global search in topbar */
.xh-gsearch {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 8px;
  height: 32px;
  padding: 0 10px;
  gap: 7px;
  transition: all .2s;
  margin-right: 6px;
}
.xh-gsearch:focus-within {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
}
.xh-gsearch i.fa { color: rgba(255,255,255,.55); font-size: 12px; }
.xh-gsearch input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  width: 160px;
}
.xh-gsearch input::placeholder { color: rgba(255,255,255,.45); }

.xh-tb-nav { display: flex; }
.xh-tb-ni {
  padding: 0 11px;
  height: var(--xh-topbar-h);
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: all .14s;
  text-decoration: none !important;
}
.xh-tb-ni:hover { color: #fff; background: rgba(255,255,255,.07); }
.xh-tb-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.xh-tb-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}
.xh-tb-bell {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: rgba(255,255,255,.7);
}
.xh-tb-bell i { font-size: 13px; }
.xh-tb-bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--xh-red);
  border: 1px solid var(--xh-grad);
}

/* ════════════════════════════════════════════════
   SIDEBAR — override Bootstrap app-aside
   ════════════════════════════════════════════════ */
.app-aside {
  width: var(--xh-sidebar-w) !important;
  max-width: var(--xh-sidebar-w) !important;
  background: var(--xh-white) !important;
  border-right: 1.5px solid var(--xh-border) !important;
}
.app-aside::-webkit-scrollbar { width: 3px; }
.app-aside::-webkit-scrollbar-thumb { background: var(--xh-border); }

/* aside-wrap: Bootstrap lo pone overflow:hidden + position:fixed.
   Usamos flexbox para que xh-sb-user quede fijo arriba y navi-wrap
   ocupe el resto y sea el único scroll container. */
.app-aside .aside-wrap {
  width: var(--xh-sidebar-w) !important;
  overflow: hidden !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
}
/* navi-wrap es el único scroll container del sidebar */
.app-aside .navi-wrap {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-aside .navi-wrap::-webkit-scrollbar { width: 3px; }
.app-aside .navi-wrap::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* User section */
.xh-sb-user {
  padding: 11px 14px;
  border-bottom: 1px solid var(--xh-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--xh-white);
}
.xh-sb-av {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--xh-b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}
.xh-sb-uname { font-size: 12px; font-weight: 700; color: var(--xh-text); }
.xh-sb-urole  { font-size: 10px; color: var(--xh-dim); margin-top: 1px; }

/* Section header */
.xh-sb-sec {
  padding: 8px 14px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--xh-dim);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--xh-border);
  transition: background .12s;
  list-style: none;
}
.xh-sb-sec:hover { background: var(--xh-s1); }
.xh-sbt {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--xh-dim);
  background: var(--xh-s2);
}

/* Collapsible section body */
.xh-sb-body {
  overflow: clip; /* clip no crea scroll container, evita interceptar eventos wheel */
  max-height: 4000px;
  transition: max-height .22s ease;
}
.xh-sb-body.xh-closed { max-height: 0; }

/* Sidebar item */
.xh-sb-item,
a.xh-sb-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 14px !important;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--xh-mid) !important;
  cursor: pointer;
  transition: all .12s;
  border-right: 2px solid transparent;
  text-decoration: none !important;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
}
.xh-sb-item i.fa {
  width: 14px;
  flex-shrink: 0;
  font-size: 13px;
  opacity: .8;
}
.xh-sb-item:hover,
a.xh-sb-item:hover {
  background: var(--xh-s1) !important;
  color: var(--xh-text) !important;
}
.xh-sb-item.active,
a.xh-sb-item.active,
.xh-sb-item.act,
a.xh-sb-item.act {
  background: rgba(0,172,215,.07) !important;
  color: var(--xh-b) !important;
  border-right-color: var(--xh-a);
  font-weight: 700;
}
.xh-sb-item.active i.fa,
a.xh-sb-item.active i.fa {
  color: var(--xh-a);
  opacity: 1;
}

/* Badges */
.xh-sbb {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 6px;
  flex-shrink: 0;
}
.xh-sbb.green  { background: rgba(0,184,124,.12); color: var(--xh-green); }
.xh-sbb.amber  { background: rgba(245,158,11,.12); color: var(--xh-amber); }
.xh-sbb.new    { background: rgba(245,158,11,.12); color: var(--xh-amber); }
.xh-sb-ca { font-size: 9px; color: var(--xh-border); margin-left: auto; }

/* Sub-menu items (MAM/MDM nested) */
.app-aside .nav-sub .xh-sb-item,
.app-aside .nav-sub a.xh-sb-item {
  padding-left: 28px !important;
  font-size: 11px;
}
.app-aside .nav-sub .nav-sub .xh-sb-item,
.app-aside .nav-sub .nav-sub a.xh-sb-item {
  padding-left: 42px !important;
  font-size: 10.5px;
}
.app-aside .nav-sub .nav-sub .nav-sub .xh-sb-item,
.app-aside .nav-sub .nav-sub .nav-sub a.xh-sb-item {
  padding-left: 56px !important;
  font-size: 10px;
}
/* Hide Bootstrap's default sub-menu indent background */
.app-aside .nav-sub { background: transparent !important; }
.app-aside .nav-sub li { list-style: none; }
/* When ng-show makes a .nav-sub visible (no ng-hide class), show it — the base CSS uses
   opacity:0/height:0 + .active class for reveal, but Angular's ng-show only sets display:none.
   This rule bridges the two systems so the tree is visible whenever ng-show evaluates true. */
.app-aside .nav-sub:not(.ng-hide) {
  opacity: 1 !important;
  height: auto !important;
  overflow: auto !important;
  margin-left: 0 !important;
}
/* Arrow icons for expandable items */
.xh-sb-item .xh-arrow { margin-left: auto; font-size: 10px; color: var(--xh-dim); }

/* ════════════════════════════════════════════════
   MAIN CONTENT — override Bootstrap app-content
   ════════════════════════════════════════════════ */

/* Bootstrap usa padding-top:50px en .app para empujar el contenido bajo el header fijo.
   Lo ajustamos a nuestra topbar en lugar de eliminarlo. site.css añade padding-top:50px
   al body — lo anulamos en html/body arriba. */
.app-header-fixed { padding-top: var(--xh-topbar-h) !important; }

/* El pseudo-elemento ::before del .app tiene background hardcodeado — lo unificamos */
.app:before { display: none !important; }
.app { background: var(--xh-bg) !important; }

/* aside-wrap: Bootstrap lo fija a top:50px y bottom:0; ajustamos a nuestra topbar/statusbar */
.app-aside-fixed .aside-wrap {
  top: var(--xh-topbar-h) !important;
  bottom: var(--xh-statusbar-h) !important;
}

.app-content {
  margin-left: var(--xh-sidebar-w) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: calc(100vh - var(--xh-topbar-h) - var(--xh-statusbar-h)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Butterbar (ui-router loading indicator): collapsa a 0 dentro del flex */
.butterbar { height: 0 !important; margin: 0 !important; overflow: hidden !important; }

.app-content-body {
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.app-content-body > .fade-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Elimina el parpadeo de doble-vista al navegar: el view saliente desaparece inmediatamente.
   animation:none fuerza duración=0 en ng-animate → elimina el elemento del DOM sin esperar fadeOut 0.5s */
.app-content-body > .fade-in.ng-leave {
    display: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}
.app-content-body > .fade-in.ng-enter { animation: none !important; -webkit-animation: none !important; }

/* ════════════════════════════════════════════════
   STATUSBAR — override Bootstrap app-footer
   ════════════════════════════════════════════════ */
.app-footer {
  height: var(--xh-statusbar-h) !important;
  min-height: unset !important;
  background: var(--xh-statusbar-bg) !important;
  border-top: 1px solid var(--xh-statusbar-border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  font-size: 11px !important;
  color: var(--xh-statusbar-color) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  box-sizing: border-box !important;
}
.xh-sb-left  { display: flex; align-items: center; gap: 8px; }
.xh-sb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Statusbar elements */
.xh-sb-sep {
  width: 1px; height: 14px;
  background: rgba(0,57,111,.25);
  margin: 0 14px;
  flex-shrink: 0;
}
.xh-sb-lbl { font-size: 10px; color: var(--xh-statusbar-lbl); margin-right: 4px; }
.xh-sb-val { font-size: 11px; font-weight: 700; color: var(--xh-statusbar-val); }
.xh-sb-logo { height: 13px; object-fit: contain; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  COMPONENTES COMPARTIDOS                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════
   VIEW WRAPPER
   ════════════════════════════════════════════════ */
.xh-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--xh-bg);
  margin: 0 !important;
  padding: 0 !important;
}

/* ════════════════════════════════════════════════
   FILTER BAR & SEARCH
   Usado en: projects.html, security.html, y futuras vistas
   ════════════════════════════════════════════════ */
.xh-fbar {
  height: var(--xh-hdr-h);
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}
.xh-fc {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1.5px solid var(--xh-border);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--xh-mid);
  background: var(--xh-white);
  transition: all .14s;
  user-select: none;
  white-space: nowrap;
}
.xh-fc:hover { border-color: rgba(0,172,215,.4); }
.xh-fc-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.xh-fc-n {
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--xh-s2);
  color: var(--xh-mid);
}
.xh-fc.xh-own.xh-on  { background: rgba(0,184,124,.07); border-color: var(--xh-green); color: #1a6e3a; }
.xh-fc.xh-own.xh-on .xh-fc-n { background: rgba(0,184,124,.15); color: var(--xh-green); }
.xh-fc.xh-shared.xh-on { background: rgba(245,158,11,.07); border-color: var(--xh-amber); color: #7c4d00; }
.xh-fc.xh-shared.xh-on .xh-fc-n { background: rgba(245,158,11,.15); color: var(--xh-amber); }
.xh-fc.xh-deleted.xh-on { background: rgba(232,57,74,.07); border-color: var(--xh-red); color: #9b1c1c; }
.xh-fc.xh-deleted.xh-on .xh-fc-n { background: rgba(232,57,74,.15); color: var(--xh-red); }

/* Search input dentro del filter bar */
.xh-psearch {
  display: flex;
  align-items: center;
  background: var(--xh-s1);
  border: 1.5px solid var(--xh-border);
  border-radius: 8px;
  height: 32px;
  padding: 0 10px;
  gap: 7px;
  transition: all .2s;
}
.xh-psearch:focus-within { border-color: var(--xh-a); background: var(--xh-white); }
.xh-psearch i.fa { color: var(--xh-dim); font-size: 12px; }
.xh-psearch input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--xh-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  width: 180px;
}
.xh-psearch input::placeholder { color: var(--xh-dim); }

.xh-fbar-r { margin-left: auto; display: flex; gap: 7px; }

/* ════════════════════════════════════════════════
   BOTONES
   Usado en: filter bar, page headers, modales, etc.
   ════════════════════════════════════════════════ */
.xh-btn-new {
  height: 32px;
  padding: 0 14px;
  background: #00acd7;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 8px rgba(0,172,215,.28);
}
.xh-btn-new:hover { opacity: .9; }
.xh-btn-new i.fa { font-size: 11px; }
.xh-btn-imp {
  height: 32px;
  padding: 0 14px;
  background: var(--xh-white);
  color: var(--xh-mid);
  border: 1.5px solid var(--xh-border);
  border-radius: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .14s;
}
.xh-btn-imp:hover { border-color: var(--xh-amber); color: var(--xh-amber); }

/* ════════════════════════════════════════════════
   ACTION BUTTONS & STATUS INDICATORS
   Usado en: projects.html, security.html, y futuras vistas
   ════════════════════════════════════════════════ */

/* Action buttons grandes (projects) */
.xh-ab {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .12s, transform .12s;
  flex-shrink: 0;
  color: #fff;
}
.xh-ab i.fa { font-size: 11px; }
.xh-ab-e { background: var(--xh-amber); }
.xh-ab-c { background: var(--xh-red); }
.xh-ab-s { background: var(--xh-a); }
.xh-ab-p { background: var(--xh-green); }
.xh-ab:not(.xh-ab-off):hover { opacity: .8; transform: scale(1.1); }
.xh-ab-off { background: var(--xh-s2) !important; cursor: default; color: var(--xh-dim); }
.xh-ab-off:hover { opacity: 1 !important; transform: none !important; }
/* Issues button */
.xh-ab-issues { background: #00acd7; position: relative; }
.xh-ab-badge { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 8px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }
.xh-ab-badge-open { background: #e8394a; color: #fff; }

/* Status indicators (solo informativos, sin acción de click) */
.xh-si {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: default;
}
.xh-si i.fa { font-size: 11px; }
.xh-si-on  { color: #fff; }
.xh-si-on.xh-si-shared   { background: var(--xh-a); }
.xh-si-on.xh-si-published { background: var(--xh-green); }
.xh-si-off { background: var(--xh-s2); color: var(--xh-dim); }

/* Small action buttons (security y otras vistas) */
.xh-sab {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .12px, transform .12s;
  flex-shrink: 0;
  color: #fff;
}
.xh-sab:hover { opacity: .8; transform: scale(1.08); }
.xh-sab i.fa { font-size: 11px; }
.xh-sab-cyan  { background: var(--xh-a); }
.xh-sab-amber { background: var(--xh-amber); }
.xh-sab-navy  { background: var(--xh-b); }
.xh-sab-red   { background: var(--xh-red); }
.xh-sab-off   { background: var(--xh-s2); cursor: default; color: var(--xh-dim); }
.xh-sab-off:hover { opacity: 1 !important; transform: none !important; }

/* ════════════════════════════════════════════════
   EMPTY STATE
   Usado en cualquier vista que puede quedar vacía
   ════════════════════════════════════════════════ */
.xh-empty      { padding: 32px 16px; text-align: center; }
.xh-empty-icon { font-size: 28px; margin-bottom: 8px; color: var(--xh-dim); }
.xh-empty-t    { font-size: 12px; font-weight: 700; color: var(--xh-mid); }
.xh-empty-s    { font-size: 11px; color: var(--xh-dim); margin-top: 4px; }

/* ════════════════════════════════════════════════
   LED INDICATOR
   Usado en: security.html, kiosk, y futuras vistas
   ════════════════════════════════════════════════ */
.xh-led { width: 8px; height: 8px; border-radius: 50%; background: var(--xh-s2); flex-shrink: 0; }
.xh-led.on { background: var(--xh-green); box-shadow: 0 0 5px rgba(0,184,124,.6); }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  VISTAS                                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════
   PROJECTS VIEW
   Archivo: wwwroot/views/projects.html (o equivalente)
   ════════════════════════════════════════════════ */
.xh-pr-hdr {
  height: 32px;
  flex-shrink: 0;
  background: var(--xh-s1);
  border-bottom: 1.5px solid var(--xh-border);
  display: grid;
  grid-template-columns: 4px 36px 1fr 120px 180px 170px 116px;
  align-items: center;
}
.xh-pr-th {
  padding: 0 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--xh-mid);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: color .12s;
  white-space: nowrap;
}
.xh-pr-th:hover { color: var(--xh-text); }
.xh-pr-th.xh-sort-on { color: var(--xh-accent, #4a90d9); }
.xh-sort-ico {
  font-size: 8px;
  opacity: .55;
  flex-shrink: 0;
}
.xh-pr-th.xh-sort-on .xh-sort-ico { opacity: 1; }
.cl-th[ng-click] { cursor: pointer; }
.cl-th.xh-sort-on { color: var(--xh-accent, #4a90d9); }
.cl-th.xh-sort-on .xh-sort-ico { opacity: 1; }

.xh-pr-list {
  flex: 1;
  overflow-y: auto;
  padding: 7px 10px calc(var(--xh-statusbar-h) + 8px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--xh-bg);
}
.xh-pr-list::-webkit-scrollbar { width: 4px; }
.xh-pr-list::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* Project row */
.xh-pr-row {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 4px 36px 1fr 120px 180px 170px 116px;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s;
}
.xh-pr-row:hover {
  border-color: var(--xh-a);
  box-shadow: 0 3px 12px rgba(0,172,215,.08);
}

/* Color stripe */
.xh-pr-side { width: 4px; align-self: stretch; }
.xh-pr-side.own     { background: var(--xh-green); }
.xh-pr-side.shared  { background: var(--xh-amber); }
.xh-pr-side.deleted { background: var(--xh-red); }

/* Icon cell */
.xh-pr-ico { width: 36px; display: flex; align-items: center; justify-content: center; }
.xh-pr-ico img { width: 22px; height: 22px; object-fit: contain; opacity: .8; }
.xh-pr-row:hover .xh-pr-ico img { opacity: 1; }

/* Name cell */
.xh-pr-name-col { padding: 0 12px; min-width: 0; }
.xh-pr-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--xh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xh-pr-del { font-size: 9px; color: var(--xh-red); font-weight: 600; margin-top: 2px; }

/* Type cell */
.xh-pr-type-col { padding: 0 12px; }
.xh-pr-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}
.xh-pr-tag.own     { background: rgba(0,184,124,.1);  color: var(--xh-green); border: 1px solid rgba(0,184,124,.2); }
.xh-pr-tag.shared  { background: rgba(245,158,11,.1); color: var(--xh-amber); border: 1px solid rgba(245,158,11,.2); }
.xh-pr-tag.deleted { background: rgba(232,57,74,.1);  color: var(--xh-red);   border: 1px solid rgba(232,57,74,.2); }

/* Owner cell */
.xh-pr-owner-col {
  padding: 0 12px;
  font-size: 11px;
  color: var(--xh-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xh-pr-owner-col a { color: var(--xh-mid); text-decoration: none; }
.xh-pr-owner-col a:hover { color: var(--xh-b); }

/* Access cell */
.xh-pr-access-col {
  padding: 0 12px;
  font-size: 10.5px;
  color: var(--xh-dim);
  white-space: nowrap;
}

/* Actions cell */
.xh-pr-act-col {
  padding: 0 8px;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.xh-pr-act-slot { width: 26px; height: 26px; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   SECURITY VIEW
   Archivo: wwwroot/views/xcloud/security.html
   ════════════════════════════════════════════════ */

/* Page header shared wrapper */
.xh-ph {
  height: var(--xh-hdr-h); flex-shrink: 0;
  background: var(--xh-white); border-bottom: 1.5px solid var(--xh-border);
  display: flex; align-items: center; padding: 0 18px; gap: 10px;
}
.xh-ph-text { display: flex; flex-direction: column; gap: 1px; }
.xh-ph-sub  { font-size: 11px; color: var(--xh-dim); }
.xh-ph-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--xh-b); stroke-width: 2; stroke-linecap: round;
}

/* Page header (título + botón "Info. Clientes") */
.xh-page-hdr {
  height: var(--xh-hdr-h);
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
}
.xh-ph-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(0,57,111,.07);
  border: 1.5px solid rgba(0,57,111,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--xh-b);
}
.xh-ph-icon i.fa { font-size: 13px; }
.xh-ph-title { font-size: 14px; font-weight: 700; color: var(--xh-text); }
.xh-ph-btn {
  margin-left: auto;
  height: 30px;
  padding: 0 13px;
  background: var(--xh-a);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,172,215,.28);
}

/* Two-panel workspace */
.xh-sec-workspace {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.xh-sec-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--xh-bg);
}
.xh-sec-panel + .xh-sec-panel {
  border-left: 1.5px solid var(--xh-border);
}

/* Panel header */
.xh-sp-hdr {
  height: 44px;
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
}
.xh-sp-title { font-size: 12px; font-weight: 700; color: var(--xh-text); flex: 1; }
.xh-sp-count {
  min-width: 20px; height: 20px;
  border-radius: 10px;
  padding: 0 6px;
  background: var(--xh-a);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.xh-sp-count.amber { background: var(--xh-amber); }
.xh-sp-count.zero  { background: var(--xh-s2); color: var(--xh-dim); }

/* Environment pill / dropdown */
.xh-env-pill {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--xh-a);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.xh-env-pill-nm {
  padding: 3px 9px;
  background: var(--xh-a);
  color: #fff;
}
.xh-env-pill-dd {
  padding: 3px 7px;
  background: rgba(0,172,215,.08);
  color: var(--xh-a);
  border-left: 1px solid rgba(0,172,215,.25);
  font-size: 9px;
}
.xh-env-pill-dd:hover { background: rgba(0,172,215,.18); }

/* Panel search */
.xh-sp-search {
  display: flex;
  align-items: center;
  background: var(--xh-s1);
  border: 1.5px solid var(--xh-border);
  border-radius: 6px;
  height: 28px;
  padding: 0 8px;
  gap: 5px;
  transition: all .2s;
}
.xh-sp-search:focus-within { border-color: var(--xh-a); background: var(--xh-white); }
.xh-sp-search i.fa { font-size: 11px; color: var(--xh-dim); }
.xh-sp-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--xh-text);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  width: 110px;
}
.xh-sp-search input::placeholder { color: var(--xh-dim); }

/* Tab filters (right panel) */
.xh-sp-filters { display: flex; align-items: center; gap: 4px; }
.xh-tc {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--xh-border);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--xh-mid);
  background: var(--xh-white);
  transition: all .14s;
  user-select: none;
  white-space: nowrap;
}
.xh-tc:hover { border-color: rgba(0,172,215,.4); }
.xh-tc.xh-on { background: #00acd7; border-color: #005ca8; color: #fff; } /* fallback sin clase de color */
.xh-tc.xh-tc-api.xh-on    { background: rgba(0,184,124,.07);  border-color: var(--xh-green); color: #1a6e3a; }
.xh-tc.xh-tc-login.xh-on  { background: rgba(245,158,11,.07); border-color: var(--xh-amber); color: #7c4d00; }
.xh-tc.xh-tc-manual.xh-on { background: rgba(124,58,237,.07); border-color: #7c3aed;         color: #4c1d95; }
.xh-tc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.xh-tc-n {
  font-size: 9px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--xh-s2);
  color: var(--xh-mid);
}
.xh-tc.xh-on .xh-tc-n { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.xh-tc.xh-tc-api.xh-on    .xh-tc-n { background: rgba(0,184,124,.15)  !important; color: var(--xh-green) !important; }
.xh-tc.xh-tc-login.xh-on  .xh-tc-n { background: rgba(245,158,11,.15) !important; color: var(--xh-amber) !important; }
.xh-tc.xh-tc-manual.xh-on .xh-tc-n { background: rgba(124,58,237,.15) !important; color: #7c3aed         !important; }

/* Column headers */
.xh-sp-cols {
  height: 30px;
  flex-shrink: 0;
  background: var(--xh-s1);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
}
.xh-sp-col {
  padding: 0 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--xh-mid);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Scrollable list */
.xh-sp-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xh-sp-list::-webkit-scrollbar { width: 3px; }
.xh-sp-list::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* Project row (left panel) */
.xh-prow {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 46px;
  cursor: pointer;
  transition: all .12s;
}
.xh-prow:hover { border-color: var(--xh-a); box-shadow: 0 2px 10px rgba(0,172,215,.08); }
.xh-prow-side  { width: 4px; align-self: stretch; background: var(--xh-a); flex-shrink: 0; }
.xh-prow-ico   { width: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xh-prow-ico img { width: 20px; height: 20px; object-fit: contain; opacity: .75; }
.xh-prow:hover .xh-prow-ico img { opacity: 1; }
.xh-prow-info  { flex: 1; min-width: 0; padding: 0 8px; }
.xh-prow-name  { font-size: 11.5px; color: var(--xh-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-prow-name strong { color: var(--xh-text); font-weight: 700; }
.xh-prow-sub   { font-size: 9.5px; color: var(--xh-dim); margin-top: 1px; }
.xh-prow-acts  { padding: 0 8px; display: flex; gap: 3px; align-items: center; flex-shrink: 0; }

/* Selected project row */
.xh-prow-sel {
  border-color: var(--xh-a) !important;
  background: rgba(0,172,215,.06) !important;
  box-shadow: 0 2px 10px rgba(0,172,215,.1) !important;
}
.xh-prow-sel .xh-prow-side  { background: var(--xh-b) !important; }
.xh-prow-sel .xh-prow-name strong { color: var(--xh-a) !important; }

/* Client row (right panel) */
.xh-crow {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  transition: all .12s;
}
.xh-crow:hover { border-color: var(--xh-a); box-shadow: 0 2px 10px rgba(0,172,215,.08); }
.xh-crow-side         { width: 4px; align-self: stretch; flex-shrink: 0; }
.xh-crow-side.api     { background: var(--xh-green); }
.xh-crow-side.login   { background: var(--xh-amber); }
.xh-crow-side.manual  { background: #7c3aed; }
.xh-crow-ico          { width: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xh-crow-ico img      { width: 20px; height: 20px; object-fit: contain; opacity: .75; }
.xh-crow:hover .xh-crow-ico img { opacity: 1; }
.xh-crow-info { flex: 1; min-width: 0; padding: 0 8px; display: flex; flex-direction: column; gap: 1px; }
.xh-crow-dim  { font-size: 10px; color: var(--xh-dim); }
.xh-crow-dim span { color: var(--xh-mid); }
.xh-crow-cid  {
  font-size: 11px; font-weight: 700;
  color: var(--xh-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-crow-acts { padding: 0 8px; display: flex; gap: 5px; align-items: center; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   MAM VIEW
   Archivo: wwwroot/views/mam_dashboard.html
   ════════════════════════════════════════════════ */

/* Cabecera de vista MAM (reutiliza .xh-fbar como contenedor) */
.xh-mam-hdr-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(0,57,111,.07);
  border: 1.5px solid rgba(0,57,111,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.xh-mam-hdr-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--xh-b);
  stroke-width: 2; stroke-linecap: round;
}
.xh-mam-hdr-title {
  font-size: 14px; font-weight: 700;
  color: var(--xh-text);
}
.xh-mam-hdr-sub {
  font-size: 11px; color: var(--xh-dim);
  margin-left: 2px;
}

/* Wrapper scrollable */
.xh-mam-wrap {
  flex: 1; overflow-y: auto;
  padding: 20px;
  background: var(--xh-bg);
}
.xh-mam-wrap::-webkit-scrollbar { width: 4px; }
.xh-mam-wrap::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* Grid 3 columnas */
.xh-mam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-content: start;
}

/* ── Tarjeta de entorno ── */
.xh-env-card {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.xh-env-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border-color: var(--xh-a);
}

/* Cabecera de tarjeta */
.xh-ec-hdr {
  padding: 18px 16px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  border-bottom: 1.5px solid var(--xh-border);
  background: var(--xh-s1);
  position: relative;
}
.xh-ec-name {
  font-size: 13px; font-weight: 700;
  color: var(--xh-text); text-align: center;
}
.xh-ec-ver { font-weight: 400; color: var(--xh-dim); }

/* Avatar circular */
.xh-ec-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-decoration: none;
}
.xh-ec-avatar.connected {
  background: var(--xh-a);
  box-shadow: 0 4px 16px rgba(0,172,215,.35);
  cursor: pointer;
}
.xh-ec-avatar.offline { background: #c8d4e0; }
.xh-ec-avatar svg {
  width: 32px; height: 32px;
  fill: none; stroke: #fff;
  stroke-width: 1.5; stroke-linecap: round;
}

/* Username bajo avatar */
.xh-ec-username {
  font-size: 11px; color: var(--xh-mid);
  margin-top: -4px;
}

/* Indicador de estado */
.xh-ec-status {
  display: flex; align-items: center;
  gap: 5px; font-size: 11px; font-weight: 600;
}
.xh-ec-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.xh-ec-status.connected .xh-ec-status-dot { background: var(--xh-green); box-shadow: 0 0 5px var(--xh-green); }
.xh-ec-status.connected .xh-ec-status-lbl { color: var(--xh-green); }
.xh-ec-status.offline   .xh-ec-status-dot { background: var(--xh-dim); }
.xh-ec-status.offline   .xh-ec-status-lbl { color: var(--xh-dim); }

/* Botón logout (esquina superior derecha) */
.xh-ec-logout {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .14s;
  color: var(--xh-mid); font-size: 13px;
  padding: 0;
}
.xh-ec-logout:hover {
  background: rgba(232,57,74,.1);
  color: var(--xh-red);
  border-color: rgba(232,57,74,.2);
}

/* ── Gauges (anillos SVG) ── */
.xh-ec-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 14px 10px 10px;
  gap: 6px;
  border-bottom: 1.5px solid var(--xh-border);
}
.xh-ec-gauge { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.xh-ec-gauge-lbl {
  font-size: 9px; font-weight: 700;
  color: var(--xh-mid); text-align: center;
  letter-spacing: .3px; text-transform: uppercase;
}
.xh-ec-gauge-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.xh-ec-gauge-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.xh-ec-gauge-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.xh-gauge-track { stroke: var(--xh-s2); }
.xh-gauge-fill  { stroke: var(--xh-a); transition: stroke-dashoffset .6s ease; }
.xh-gauge-fill.low  { stroke: var(--xh-green); }
.xh-gauge-fill.mid  { stroke: var(--xh-amber); }
.xh-gauge-fill.high { stroke: var(--xh-red); }
.xh-ec-gauge-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--xh-text);
}
.xh-ec-gauge-val { font-size: 9px; color: var(--xh-dim); text-align: center; line-height: 1.2; }

/* ── Footer de tarjeta ── */
.xh-ec-ftr { display: grid; grid-template-columns: 1fr 1fr; min-height: 44px; }
.xh-ec-ftr-link {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 8px;
  font-size: 10px; color: var(--xh-a);
  font-family: monospace;
  cursor: pointer; transition: background .12s;
  border-right: 1px solid var(--xh-border);
  text-decoration: none; overflow: hidden;
}
.xh-ec-ftr-link:hover { background: var(--xh-s1); }
.xh-ec-ftr-link svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.xh-ec-ftr-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-ec-ftr-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--xh-mid); cursor: pointer; transition: all .12s;
}
.xh-ec-ftr-btn:hover { background: var(--xh-s1); color: var(--xh-b); }
.xh-ec-ftr-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ── Tarjeta "Nuevo Entorno / Proyecto" ── */
.xh-env-card-new {
  border-style: dashed;
  background: transparent;
  min-height: 200px;
}
.xh-env-card-new:hover {
  background: rgba(0,172,215,.03);
  border-color: var(--xh-a);
}
.xh-ec-new-inner {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 32px;
  text-decoration: none; cursor: pointer;
}
.xh-ec-new-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,172,215,.1);
  border: 1.5px solid var(--xh-a);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 300; color: var(--xh-a);
  transition: background .14s, color .14s;
}
.xh-env-card-new:hover .xh-ec-new-icon { background: var(--xh-a); color: #fff; }
.xh-ec-new-lbl { font-size: 13px; font-weight: 700; color: var(--xh-mid); }
.xh-env-card-new:hover .xh-ec-new-lbl { color: var(--xh-b); }

/* ════════════════════════════════════════════════
   MAM SERVER CONNECT — Gestión LICENCIAS
   Archivo: wwwroot/views/mam_serverconnect.html
   ════════════════════════════════════════════════ */

/* Banner superior con stats */
.xh-sc-banner {
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.xh-sc-banner-title { display: flex; flex-direction: column; }
.xh-sc-banner-t { font-size: 16px; font-weight: 700; color: var(--xh-text); }
.xh-sc-banner-s { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--xh-a); margin-top: 2px; }

/* Stat boxes */
.xh-sc-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 10px;
  border: 1.5px solid var(--xh-border);
  background: var(--xh-s1); min-width: 140px; cursor: default;
}
.xh-sc-stat svg { width: 20px; height: 20px; fill: none; stroke-width: 1.8; stroke-linecap: round; flex-shrink: 0; }
.xh-sc-stat-num { font-size: 18px; font-weight: 700; color: var(--xh-text); line-height: 1; }
.xh-sc-stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--xh-dim); margin-top: 2px; }
.xh-sc-total { border-color: rgba(0,172,215,.3); background: rgba(0,172,215,.05); }
.xh-sc-total svg { stroke: var(--xh-a); }
.xh-sc-free { border-color: rgba(0,184,124,.3); background: rgba(0,184,124,.05); }
.xh-sc-free svg { stroke: var(--xh-green); }
.xh-sc-banner-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Botones del banner */
.xh-sc-btn-buy {
  height: 36px; padding: 0 18px;
  background: var(--xh-white); color: var(--xh-b);
  border: 1.5px solid var(--xh-border); border-radius: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  transition: all .14s; text-decoration: none;
}
.xh-sc-btn-buy:hover { border-color: var(--xh-a); color: var(--xh-a); }
.xh-sc-btn-buy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.xh-sc-btn-assign {
  height: 36px; padding: 0 18px;
  background: var(--xh-b); color: #fff;
  border: none; border-radius: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
  transition: background .14s;
  box-shadow: 0 2px 8px rgba(0,57,111,.2);
}
.xh-sc-btn-assign:hover { background: #004f9e; }
.xh-sc-btn-assign svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* Loading */
.xh-sc-loading {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 60px;
}
.xh-sc-loading-txt { font-size: 13px; color: var(--xh-mid); font-weight: 600; }

/* Layout principal: columna → tabla arriba, barra inferior */
.xh-sc-content { display: flex; flex-direction: column; }
.xh-sc-main { flex: 1; min-width: 0; padding: 16px; }

/* DataTables: action bar (length + filter) */
.xh-sc-main .dataTables_wrapper .dataTables_length,
.xh-sc-main .dataTables_wrapper .dataTables_filter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--xh-mid); font-weight: 500;
}
.xh-sc-main .dataTables_wrapper .dataTables_length label,
.xh-sc-main .dataTables_wrapper .dataTables_filter label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--xh-mid); font-weight: 500;
}
.xh-sc-main .dataTables_wrapper .dataTables_length select {
  height: 28px; padding: 0 8px;
  background: var(--xh-white); border: 1.5px solid var(--xh-border);
  border-radius: 6px; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px; color: var(--xh-text); outline: none; cursor: pointer;
}
.xh-sc-main .dataTables_wrapper .dataTables_filter input[type="search"] {
  height: 28px; padding: 0 10px;
  background: var(--xh-s1); border: 1.5px solid var(--xh-border);
  border-radius: 6px; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px; color: var(--xh-text); outline: none;
  transition: all .2s; width: 200px;
}
.xh-sc-main .dataTables_wrapper .dataTables_filter input[type="search"]:focus {
  border-color: var(--xh-a); background: var(--xh-white);
}

/* DataTables: info + paginate footer */
.xh-sc-main .dataTables_wrapper .dataTables_info {
  font-size: 11px; color: var(--xh-mid); padding-top: 8px;
}
.xh-sc-main .dataTables_wrapper .dataTables_paginate { padding-top: 4px; }
.xh-sc-main .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 26px; height: 26px; border-radius: 5px;
  border: 1.5px solid var(--xh-border) !important;
  background: var(--xh-white) !important;
  color: var(--xh-mid) !important;
  font-size: 11px; font-weight: 700; cursor: pointer;
  padding: 0 6px; transition: all .14s; line-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.xh-sc-main .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  border-color: var(--xh-a) !important; color: var(--xh-b) !important;
  background: var(--xh-white) !important;
}
.xh-sc-main .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--xh-b) !important; border-color: var(--xh-b) !important; color: #fff !important;
}
.xh-sc-main .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; }

/* DataTables: tabla principal — filas tipo tarjeta */
.xh-sc-main table#databaseList.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}
/* Cabecera */
.xh-sc-main table#databaseList.dataTable thead th {
  background: var(--xh-s1) !important;
  border-bottom: 1.5px solid var(--xh-border) !important;
  border-top: none !important;
  padding: 0 10px; height: 36px;
  font-size: 9px; font-weight: 800;
  letter-spacing: .7px; text-transform: uppercase;
  color: var(--xh-mid) !important;
  white-space: nowrap;
}
.xh-sc-main table#databaseList.dataTable thead th.sorting:after,
.xh-sc-main table#databaseList.dataTable thead th.sorting_asc:after,
.xh-sc-main table#databaseList.dataTable thead th.sorting_desc:after { opacity: .4; }
.xh-sc-main table#databaseList.dataTable thead th:hover { color: var(--xh-b) !important; }

/* Filas del body */
.xh-sc-main table#databaseList.dataTable tbody tr td {
  background: var(--xh-white);
  border-top: 1.5px solid var(--xh-border) !important;
  border-bottom: 1.5px solid var(--xh-border) !important;
  border-left: none !important; border-right: none !important;
  padding: 0 10px; height: 42px;
  font-size: 11.5px; color: var(--xh-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .14s, background .14s;
}
.xh-sc-main table#databaseList.dataTable tbody tr td:first-child {
  border-left: 1.5px solid var(--xh-border) !important;
  border-radius: 8px 0 0 8px !important;
}
.xh-sc-main table#databaseList.dataTable tbody tr td:last-child {
  border-right: 1.5px solid var(--xh-border) !important;
  border-radius: 0 8px 8px 0 !important;
}
.xh-sc-main table#databaseList.dataTable tbody tr:hover td {
  border-color: var(--xh-a) !important;
  box-shadow: 0 2px 8px rgba(0,172,215,.06);
}
.xh-sc-main table#databaseList.dataTable tbody tr.selected td,
.xh-sc-main table#databaseList.dataTable tbody tr.selected:hover td {
  border-color: var(--xh-a) !important;
  background: rgba(0,172,215,.04) !important;
}

/* Variantes de fila */
.xh-sc-main table#databaseList.dataTable tbody tr.xh-row-deleted td {
  background: rgba(232,57,74,.03) !important;
  border-color: rgba(232,57,74,.2) !important; color: var(--xh-dim);
}
.xh-sc-main table#databaseList.dataTable tbody tr.xh-row-warning td { color: var(--xh-red); }
.xh-sc-main table#databaseList.dataTable tbody tr.xh-row-muted td { color: var(--xh-dim); }

/* Celda número (monospace) */
.xh-sc-td-num { font-family: monospace; font-size: 10.5px; color: var(--xh-a) !important; }
/* Celda nombre (bold) */
.xh-sc-td-name { font-weight: 700 !important; color: var(--xh-text) !important; }
/* Celda numérica centrada */
.xh-sc-td-count { font-family: monospace; font-size: 11px; text-align: center !important; }

/* Icono studio */
.xh-sc-studio-ico {
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--xh-s2);
  display: inline-flex; align-items: center; justify-content: center;
}
.xh-sc-studio-ico svg { width: 11px; height: 11px; fill: none; stroke: var(--xh-a); stroke-width: 2; stroke-linecap: round; }

/* ── Barra inferior de asignación de licencias ──
   Aparece al seleccionar una fila. Compacta, no molesta. */
.xh-sc-assign-bar {
  flex-shrink: 0;
  background: var(--xh-white);
  border-top: 1.5px solid var(--xh-border);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}
/* Proyecto seleccionado */
.xh-sc-abar-project {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--xh-b);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xh-sc-abar-project svg { width: 14px; height: 14px; fill: none; stroke: var(--xh-a); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
/* Separador vertical */
.xh-sc-abar-sep { width: 1px; height: 28px; background: var(--xh-border); flex-shrink: 0; }
/* Campo (label + input) */
.xh-sc-abar-field { display: flex; align-items: center; gap: 6px; }
.xh-sc-abar-lbl {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--xh-dim); white-space: nowrap;
}
.xh-sc-abar-input {
  height: 30px; padding: 0 9px; width: 90px;
  border: 1.5px solid var(--xh-border); border-radius: 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px; font-weight: 600; color: var(--xh-text);
  outline: none; background: var(--xh-s1);
  transition: border-color .15s, background .15s;
}
.xh-sc-abar-input:focus { border-color: var(--xh-a); background: var(--xh-white); }
.xh-sc-abar-input[disabled] { opacity: .6; cursor: default; width: 70px; }
/* Botón confirmar */
.xh-sc-abar-ok {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 6px; background: var(--xh-b); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; transition: background .14s;
  box-shadow: 0 2px 6px rgba(0,57,111,.2);
}
.xh-sc-abar-ok:hover { background: #004f9e; }
/* Progress bar en la barra */
.xh-sc-abar-progress { flex: 1; min-width: 100px; max-width: 180px; }
.xh-sc-abar-progress .progress { margin: 0; height: 6px; border-radius: 4px; }

/* ════════════════════════════════════════════════
   MDM VIEW
   Archivos: wwwroot/views/mdm_*.html, app_device_*.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-mdm-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   KIOSK VIEW
   Archivo: wwwroot/views/app_kiosk.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-ksk-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   KIOSK PREMIUM VIEW
   Archivo: wwwroot/views/app_kioskpremium.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-kskp-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   FRAMEWORKS VIEW
   Archivo: wwwroot/views/xcloud/frameworks.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-frmk-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   FORMS VIEW
   Archivo: wwwroot/views/xcloud/forms.html
   ════════════════════════════════════════════════ */
/* Workspace: sidebar + content */
.fm-workspace  { flex: 1; overflow: hidden; display: flex; min-height: 0; }

/* Left panel */
.fm-sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--xh-white); border-right: 1.5px solid var(--xh-border);
    padding: 20px 16px; display: flex; flex-direction: column; gap: 16px;
    overflow-y: auto;
}
.fm-sidebar::-webkit-scrollbar { width: 3px; }
.fm-sidebar::-webkit-scrollbar-thumb { background: var(--xh-border); }

/* Label + field group */
.fm-field { display: flex; flex-direction: column; gap: 5px; }
.fm-label {
    font-size: 9px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--xh-b);
}

/* Upload area */
.fm-upload-area {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 12px; border: 1.5px dashed var(--xh-border);
    border-radius: 8px; background: var(--xh-s1);
}
.fm-upload-btn { background: var(--xh-white) !important; border: none !important; }
.fm-upload-hint { font-size: 11px; color: var(--xh-mid); text-align: center; }

/* Info hint */
.fm-info-hint {
    padding: 16px 8px; display: flex; align-items: flex-start; gap: 10px;
    color: var(--xh-a); font-size: 12px; font-weight: 500; line-height: 1.5;
}
.fm-info-hint svg {
    width: 18px; height: 18px; fill: none; stroke: var(--xh-a);
    stroke-width: 2; stroke-linecap: round; flex-shrink: 0; margin-top: 1px;
}

/* Right content */
.fm-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

/* Toolbar */
.fm-toolbar {
    height: 48px; flex-shrink: 0;
    background: var(--xh-white); border-bottom: 1.5px solid var(--xh-border);
    display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.fm-toolbar-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--xh-text);
}
.fm-toolbar-title svg {
    width: 16px; height: 16px; fill: none; stroke: var(--xh-mid);
    stroke-width: 2; stroke-linecap: round;
}

/* Refresh button */
.fm-refresh {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--xh-green); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,184,124,.35);
    transition: transform .14s; flex-shrink: 0;
}
.fm-refresh:hover:not(:disabled) { transform: scale(1.1); }
.fm-refresh:disabled { opacity: .5; cursor: default; }
.fm-refresh svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }

/* Search */
.fm-search-wrap { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.fm-search-input {
    height: 28px; padding: 0 10px;
    background: var(--xh-s1); border: 1.5px solid var(--xh-border);
    border-radius: 6px; font-size: 11.5px; color: var(--xh-text);
    outline: none; width: 180px; transition: border-color .2s, background .2s;
}
.fm-search-input:focus { border-color: var(--xh-a); background: var(--xh-white); }
.fm-search-input::placeholder { color: var(--xh-dim); }

/* Branch chip */
.fm-branch {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--xh-mid);
    font-family: "Space Mono", monospace;
}
.fm-branch svg { width: 11px; height: 11px; fill: none; stroke: var(--xh-a); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }

/* Error action button */
.ab-err { background: rgba(232,57,74,.12); color: var(--xh-red); }
.ab-err:hover { background: rgba(232,57,74,.22); }


/* Status tags via Bootstrap class names returned by getAction() */
.cl-tag.bg-success { background: rgba(0,184,124,.1);  color: var(--xh-green); border: 1px solid rgba(0,184,124,.2); }
.cl-tag.bg-warning { background: rgba(245,158,11,.1);  color: var(--xh-amber); border: 1px solid rgba(245,158,11,.2); }
.cl-tag.bg-danger  { background: rgba(232,57,74,.1);   color: var(--xh-red);   border: 1px solid rgba(232,57,74,.2); }
.cl-tag.bg-info    { background: rgba(0,172,215,.1);   color: var(--xh-a);     border: 1px solid rgba(0,172,215,.2); }

/* Grid for forms list */
.cl-hdr-frm,
.cl-row-frm {
    grid-template-columns: 4px 36px 1fr 110px 150px 130px 130px 130px 60px;
}

/* ════════════════════════════════════════════════
   LOGS VIEW
   Archivo: wwwroot/views/xcloud/logs.html
   ════════════════════════════════════════════════ */

/* Log color variables */
:root {
    --log-bg:   #1e2d3d;
    --log-lnum: #3d6a8a;
    --log-text: #c9dce8;
    --log-err:  #ff6b6b;
    --log-warn: #ffd166;
    --log-info: #4ecdc4;
    --log-date: #7aaac8;
}

/* Main two-column layout */
.xh-logs-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ── LEFT PANEL ── */
.xh-logs-left {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1.5px solid var(--xh-border);
    background: var(--xh-white);
    overflow: hidden;
}

/* Log list table wrapper */
.xh-log-table-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Scrollable list area that contains the DataTable */
.xh-log-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.xh-log-list::-webkit-scrollbar { width: 3px; }
.xh-log-list::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* DataTable — thead styled as the list header */
.xh-log-dt {
    width: 100% !important;
    border-collapse: collapse;
}
.xh-log-dt thead tr th {
    padding: 0 10px;
    height: 36px;
    background: var(--xh-s1);
    border-bottom: 1.5px solid var(--xh-border);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xh-mid);
    white-space: nowrap;
    vertical-align: middle;
}
.xh-log-dt tbody tr {
    height: 38px;
    border-bottom: 1px solid var(--xh-s2);
    cursor: pointer;
    transition: background .1s;
}
.xh-log-dt tbody tr:hover { background: var(--xh-s1); }
.xh-log-dt tbody tr.selected,
.xh-log-dt tbody tr.active {
    background: var(--xh-b);
}
.xh-log-dt tbody tr.selected td,
.xh-log-dt tbody tr.active td {
    color: #fff !important;
}
.xh-log-dt tbody td {
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--xh-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: none;
    vertical-align: middle;
    max-width: 0; /* permite text-overflow en celdas de tabla */
}
/* Date column — monospace, dimmed, ancho fijo */
.xh-log-dt thead th:last-child,
.xh-log-dt tbody td:last-child {
    width: 90px;
    font-size: 10.5px;
    color: var(--xh-dim);
    font-family: "Space Mono", monospace;
    font-weight: 400;
}

/* DataTable generated wrapper — sin flex, renderizado normal */
.xh-log-list .dataTables_wrapper {}
.xh-log-list .dataTables_length,
.xh-log-list .dataTables_filter { display: none; }

/* Contenedor personalizado para info + paginación (DOM: "<'xh-log-dt-bottom'ip>") */
.xh-log-dt-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    background: var(--xh-s1);
    border-top: 1.5px solid var(--xh-border);
    flex-shrink: 0;
}
.xh-log-dt-bottom .dataTables_info {
    font-size: 10px;
    color: var(--xh-dim);
    padding: 0;
}
/* Ocultar "X filas seleccionadas" del Select extension */
.xh-log-dt-bottom .dataTables_info .select-info,
.xh-log-dt-bottom .dataTables_info .select-item { display: none; }

.xh-log-dt-bottom .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.xh-log-dt-bottom .dataTables_paginate .paginate_button {
    min-width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1.5px solid var(--xh-border);
    background: var(--xh-white);
    color: var(--xh-mid) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 5px;
    transition: all .14s;
    text-decoration: none !important;
}
.xh-log-dt-bottom .dataTables_paginate .paginate_button.current {
    background: var(--xh-b);
    border-color: var(--xh-b);
    color: #fff !important;
}
.xh-log-dt-bottom .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    border-color: var(--xh-a);
    color: var(--xh-b) !important;
    background: var(--xh-white);
}
.xh-log-dt-bottom .dataTables_paginate .paginate_button.disabled {
    opacity: .35;
    cursor: default;
}
/* Estado activo del botón Ajustar */
.xh-log-tool-btn-active {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
    border-color: var(--xh-a) !important;
}

/* Combo de usuarios */
.xh-user-combo-wrap {
    padding: 8px 10px;
    border-top: 1.5px solid var(--xh-border);
    flex-shrink: 0;
}
.xh-user-combo-btn {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    background: var(--xh-s1);
    border: 1.5px solid var(--xh-border);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--xh-mid);
    cursor: pointer;
    transition: all .14s;
    font-family: inherit;
    text-align: left;
}
.xh-user-combo-btn:hover { border-color: var(--xh-a); color: var(--xh-b); }
.xh-user-combo-btn i:first-child { color: var(--xh-a); font-size: 12px; flex-shrink: 0; }
.xh-user-combo-btn span { flex: 1; }
.xh-ucb-caret { font-size: 10px; color: var(--xh-dim); flex-shrink: 0; }
.xh-user-dd-menu {
    min-width: 260px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}
.xh-user-dd-item {
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: 11.5px;
    color: var(--xh-mid) !important;
    cursor: pointer;
    transition: background .1s;
    white-space: nowrap;
}
.xh-user-dd-item:hover { background: var(--xh-s1); color: var(--xh-text) !important; }
.xh-user-dd-item i { font-size: 11px; color: var(--xh-dim); flex-shrink: 0; }
.xh-user-dd-all { color: var(--xh-red) !important; }
.xh-user-dd-all i { color: var(--xh-red); }

/* Errors & Warnings button */
.xh-err-btn-wrap {
    padding: 0 10px 10px;
    flex-shrink: 0;
}
.xh-err-btn {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: rgba(232,57,74,.06);
    border: 1.5px solid rgba(232,57,74,.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all .14s;
    gap: 8px;
}
.xh-err-btn:hover { background: rgba(232,57,74,.1); border-color: rgba(232,57,74,.4); }
.xh-err-btn-left { display: flex; align-items: center; gap: 7px; }
.xh-err-btn-left i { color: var(--xh-red); font-size: 12px; }
.xh-err-btn-label { font-size: 12px; font-weight: 700; color: var(--xh-red); }
.xh-err-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--xh-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    padding: 0 5px;
}

/* Debug list (errors/warnings items) */
.xh-dbg-list {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    border: 1.5px solid var(--xh-border);
    border-radius: 7px;
    overflow: hidden;
}
.xh-dbg-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 11.5px;
    color: var(--xh-mid);
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid var(--xh-s2);
}
.xh-dbg-list li:last-child { border-bottom: none; }
.xh-dbg-list li:hover { background: var(--xh-s1); }
.xh-dbg-num {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--xh-dim);
}
.xh-dbg-item-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.xh-dbg-item-active {
    background: rgba(0,57,111,.07);
    color: var(--xh-b);
    font-weight: 700;
}
.xh-dbg-item-active i { color: var(--xh-b); }

/* ── RIGHT PANEL — VIEWER ── */
.xh-logs-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--log-bg);
    min-width: 0;
}

/* Toolbar */
.xh-log-viewer-toolbar {
    height: 40px;
    flex-shrink: 0;
    background: #162535;
    border-bottom: 1px solid #0d1e2e;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
}
.xh-log-viewer-title {
    flex: 1;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--log-date);
    font-family: "Space Mono", monospace;
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xh-log-viewer-title i { color: var(--log-lnum); font-size: 12px; flex-shrink: 0; }
.xh-log-tool-btn {
    height: 26px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid #2a4560;
    background: rgba(255,255,255,.05);
    color: rgba(200,220,235,.7);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all .14s;
    font-family: inherit;
    flex-shrink: 0;
}
.xh-log-tool-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.xh-log-tool-btn i { font-size: 10px; }
.xh-log-tool-sep {
    width: 1px;
    height: 16px;
    background: #2a4560;
    margin: 0 2px;
    flex-shrink: 0;
}
.xh-log-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.xh-log-search-wrap i {
    position: absolute;
    left: 8px;
    font-size: 10px;
    color: var(--log-date);
    pointer-events: none;
}
.xh-log-search-input {
    height: 24px;
    padding: 0 8px 0 26px;
    background: rgba(255,255,255,.06);
    border: 1px solid #2a4560;
    border-radius: 5px;
    font-size: 11px;
    color: var(--log-text);
    outline: none;
    width: 160px;
    transition: all .2s;
    font-family: inherit;
}
.xh-log-search-input::placeholder { color: var(--log-lnum); }
.xh-log-search-input:focus { border-color: var(--xh-a); background: rgba(0,172,215,.06); width: 200px; }

/* ACE editor container */
.xh-log-ace {
    flex: 1;
    min-height: 0;
}
/* Override ACE editor size so it fills its container */
.xh-log-ace .ace_editor {
    width: 100% !important;
    height: 100% !important;
}

/* Status bar */
.xh-log-statusbar {
    height: 24px;
    flex-shrink: 0;
    background: #0f1d2b;
    border-top: 1px solid #0d1e2e;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 14px;
    font-family: "Space Mono", monospace;
    font-size: 10px;
    color: var(--log-lnum);
}
.xh-log-sb-item { display: flex; align-items: center; gap: 5px; }
.xh-log-sb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--log-lnum);
    flex-shrink: 0;
}

/* ACE editor — selección y búsqueda visibles sobre fondo oscuro (tema twilight)
   El tema inyecta .ace-twilight con color de selección #4C5142 (muy oscuro).
   Lo sobreescribimos con azul brillante para que contraste. */
.ace-twilight .ace_marker-layer .ace_selection {
    background: rgba(0, 172, 215, 0.55) !important;
}
.ace-twilight .ace_marker-layer .ace_selected-word {
    background: rgba(0, 172, 215, 0.3) !important;
    border: 1px solid rgba(0, 172, 215, 0.8) !important;
    box-sizing: border-box;
}
/* Highlight de búsqueda en línea activa */
.ace-twilight .ace_active-line {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ════════════════════════════════════════════════
   USERS VIEW
   Archivo: wwwroot/views/xcloud/users.html (o equivalente)
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-usr-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   ENVIRONMENTS VIEW
   Archivo: wwwroot/views/xcloud/environments.html
   ════════════════════════════════════════════════ */
/* NUEVO button (page-hdr, right-aligned) */
.xh-env-nuevo { margin-left: auto; position: relative; }
.xh-env-nuevo-btn {
  height: 32px; padding: 0 14px;
  background: #00acd7; color: #fff;
  border: none; border-radius: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 3px 10px rgba(0,57,111,.3);
  transition: background .14s;
}
.xh-env-nuevo-btn:hover { background: #004f9e; }

/* Dropdown override */
.xh-env-nuevo-menu {
  min-width: 280px !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1.5px solid var(--xh-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.14) !important;
  padding: 0 !important;
}
.xh-env-nuevo-menu > li > a {
  padding: 0 !important;
}
.xh-env-nuevo-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  font-size: 12px; color: var(--xh-text);
}
.xh-env-nuevo-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.xh-env-nuevo-txt {
  font-size: 11.5px; color: var(--xh-mid); line-height: 1.35;
}

/* Filter chips */
.xh-env-filters { display: flex; align-items: center; gap: 4px; }
.xh-efc {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 7px;
  border: 1.5px solid var(--xh-border);
  cursor: pointer; font-size: 11.5px; font-weight: 600;
  color: var(--xh-mid); background: var(--xh-white);
  transition: all .14s; user-select: none; white-space: nowrap;
}
.xh-efc:hover { border-color: rgba(0,172,215,.4); }
.xh-efc.on { background: #00acd7; border-color: var(--xh-b); color: #fff; } /* fallback */
.xh-efc.xh-efc-all.on    { background: rgba(120,130,150,.07); border-color: var(--xh-dim);   color: var(--xh-text); }
.xh-efc.xh-efc-online.on { background: rgba(0,184,124,.07);   border-color: #00b87c;          color: #1a6e3a; }
.xh-efc.xh-efc-off1.on   { background: rgba(245,158,11,.07);  border-color: var(--xh-amber);  color: #7c4d00; }
.xh-efc.xh-efc-off2.on   { background: rgba(143,168,192,.1);  border-color: #8fa8c0;          color: #3a5a78; }
.xh-efc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.xh-efc.on .xh-efc-dot { background: rgba(255,255,255,.8) !important; box-shadow: none !important; }
.xh-efc.xh-efc-all.on    .xh-efc-dot { background: var(--xh-dim)  !important; box-shadow: none !important; }
.xh-efc.xh-efc-online.on .xh-efc-dot { background: #00b87c        !important; box-shadow: 0 0 4px #00b87caa !important; }
.xh-efc.xh-efc-off1.on   .xh-efc-dot { background: #f59e0b        !important; box-shadow: 0 0 4px #f59e0baa !important; }
.xh-efc.xh-efc-off2.on   .xh-efc-dot { background: #8fa8c0        !important; box-shadow: none !important; }
.xh-efc-n {
  font-size: 9px; font-weight: 700; padding: 0 5px;
  border-radius: 8px; background: var(--xh-s2); color: var(--xh-mid);
}
.xh-efc.on .xh-efc-n { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.xh-efc.xh-efc-all.on    .xh-efc-n { background: rgba(120,130,150,.15) !important; color: var(--xh-dim)   !important; }
.xh-efc.xh-efc-online.on .xh-efc-n { background: rgba(0,184,124,.15)   !important; color: #00b87c         !important; }
.xh-efc.xh-efc-off1.on   .xh-efc-n { background: rgba(245,158,11,.15)  !important; color: var(--xh-amber) !important; }
.xh-efc.xh-efc-off2.on   .xh-efc-n { background: rgba(143,168,192,.2)  !important; color: #8fa8c0         !important; }

/* Panel wrapper */
.xh-env-panel {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; background: var(--xh-bg);
}
.xh-env-panel-hdr {
  display: flex; align-items: center;
  padding: 10px 18px 6px; flex-shrink: 0;
}
.xh-env-panel-title {
  font-size: 13px; font-weight: 700; color: var(--xh-b);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--xh-a);
  display: inline-block;
}
.xh-env-panel-count {
  margin-left: 10px;
  min-width: 22px; height: 22px; border-radius: 11px; padding: 0 7px;
  background: var(--xh-a); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Scrollable list */
.xh-env-list {
  flex: 1; overflow-y: auto;
  padding: 6px 14px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.xh-env-list::-webkit-scrollbar { width: 4px; }
.xh-env-list::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* Environment row */
.xh-env-row {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 9px; overflow: hidden;
  display: flex; align-items: center;
  min-height: 52px; cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
  padding: 10px 14px 10px 0;
}
.xh-env-row:hover { border-color: var(--xh-a); box-shadow: 0 3px 12px rgba(0,172,215,.08); }
.xh-env-system-row {
  background: var(--xh-s1); cursor: default;
}
.xh-env-system-row:hover { border-color: var(--xh-border); box-shadow: none; }

/* LED lateral strip */
.xh-env-led {
  width: 5px; align-self: stretch; flex-shrink: 0;
  margin-right: 12px;
}

/* XOne icon */
.xh-env-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 12px;
}
.xh-env-icon img { width: 20px; height: 20px; object-fit: contain; opacity: .8; }
.xh-env-row:hover .xh-env-icon img { opacity: 1; }

/* Body info */
.xh-env-body { flex: 1; min-width: 0; }
.xh-env-name {
  font-size: 13px; font-weight: 700; color: var(--xh-text);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 2px;
}
.xh-env-sys-badge {
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0,57,111,.1); color: var(--xh-b);
  border: 1px solid rgba(0,57,111,.15);
}
.xh-env-url { font-size: 11px; color: var(--xh-mid); margin-bottom: 1px; }
.xh-env-url span { color: var(--xh-a); font-size: 10.5px; }
.xh-env-system { color: var(--xh-b) !important; font-weight: 700; }
.xh-env-meta-row { display: flex; flex-wrap: wrap; gap: 0; }
.xh-env-meta { font-size: 10.5px; color: var(--xh-dim); margin-right: 14px; }
.xh-env-meta span { color: var(--xh-mid); font-weight: 600; }

/* Actions column */
.xh-env-acts {
  display: flex; gap: 5px; flex-shrink: 0; margin-left: 14px;
}

/* Search box right-aligned in env filter bar */
.xh-env-search { margin-left: auto; }

/* ════════════════════════════════════════════════
   DASHBOARD / HOME VIEW
   Archivo: wwwroot/tpl/dashboard.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-dash-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   REPORTS VIEW
   Archivo: wwwroot/views/app_reports.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-rpt-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   SETTINGS VIEW
   Archivo: wwwroot/tpl/blocks/settings.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-cfg-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   BOTS VIEW
   Archivo: wwwroot/views/xcloud/bots.html
   ════════════════════════════════════════════════ */
/* TODO: añadir clases .xh-bot-* al rediseñar esta vista */

/* ════════════════════════════════════════════════
   TOOLS VIEW — Gestión LDATA
   Archivo: wwwroot/views/xcloud/tools.html
   ════════════════════════════════════════════════ */

/* Scrollable content area */
.xh-tools-scroll {
  flex: 1; overflow-y: auto;
  padding: 20px 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--xh-bg);
}
.xh-tools-scroll::-webkit-scrollbar { width: 4px; }
.xh-tools-scroll::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }

/* ── LDATA row inputs ── */
.xh-ldata-rows { display: flex; flex-direction: column; gap: 8px; }
.xh-ldata-row {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 9px;
  display: flex; align-items: center;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.xh-ldata-row:focus-within {
  border-color: var(--xh-a);
  box-shadow: 0 0 0 3px rgba(0,172,215,.08);
}
.xh-ldata-row-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--xh-s1);
  border-right: 1.5px solid var(--xh-border);
}
.xh-ldata-row-icon i.fa { font-size: 14px; }
.xh-ldata-row-icon.xh-ldata-green i.fa { color: var(--xh-green); }
.xh-ldata-row-icon.xh-ldata-amber i.fa { color: var(--xh-amber); }
.xh-ldata-row-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--xh-dim);
  padding: 0 12px; white-space: nowrap; flex-shrink: 0;
  min-width: 72px;
}
.xh-ldata-row-input {
  flex: 1; height: 38px; padding: 0 12px;
  background: transparent; border: none; outline: none;
  font-family: "Space Mono", monospace;
  font-size: 12px; color: var(--xh-text);
}
.xh-ldata-row-input::placeholder {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--xh-dim); font-size: 11.5px;
}

/* ── Datos panel ── */
.xh-datos-card {
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 10px; overflow: hidden;
}
.xh-datos-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: var(--xh-s1);
  border-bottom: 1.5px solid var(--xh-border);
}
.xh-datos-hdr-title {
  font-size: 12px; font-weight: 700; color: var(--xh-text);
  display: flex; align-items: center; gap: 7px;
}
.xh-datos-hdr-title i.fa { color: var(--xh-mid); font-size: 12px; }
.xh-btn-apply {
  height: 34px; padding: 0 18px;
  background: #00acd7; color: #fff;
  border: none; border-radius: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 3px 8px rgba(0,172,215,.3);
  transition: all .14s; letter-spacing: .2px;
}
.xh-btn-apply:hover { background: #0099bf; box-shadow: 0 4px 12px rgba(0,172,215,.4); }
.xh-btn-apply i.fa { font-size: 12px; }
.xh-datos-body {
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--xh-s1);
}

/* ── Form fields ── */
.xh-f-group { display: flex; flex-direction: column; gap: 5px; }
.xh-f-label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
}
.xh-f-label i.fa { font-size: 10px; }
.xh-f-green { color: var(--xh-green); }
.xh-f-green i.fa { color: var(--xh-green); }
.xh-f-blue  { color: var(--xh-a); }
.xh-f-blue  i.fa { color: var(--xh-a); }
.xh-f-amber { color: var(--xh-amber); }
.xh-f-amber i.fa { color: var(--xh-amber); }
.xh-f-mid   { color: var(--xh-mid); }
.xh-f-mid   i.fa { color: var(--xh-mid); }
.xh-f-input {
  height: 34px; padding: 0 12px;
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 7px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px; color: var(--xh-text);
  outline: none; transition: all .15s; width: 100%;
}
.xh-f-input:focus { border-color: var(--xh-a); box-shadow: 0 0 0 3px rgba(0,172,215,.07); }
.xh-f-mono { font-family: "Space Mono", monospace; font-size: 11.5px; letter-spacing: .3px; }
.xh-f-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xh-f-row-narrow { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }

/* ════════════════════════════════════════════════
   § XONEADMIN / EMPRESAS VIEW  (xcloud/xoneadmin.html)
   ════════════════════════════════════════════════ */

/* --- Action bar --- */
.xh-emp-actionbar { height:50px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; gap:10px; }
.btn-add { height:34px; padding:0 14px; background:#00acd7; color:#fff; border:none; border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 3px 8px rgba(0,172,215,.28); transition:all .14s; }
.btn-add:hover { background:#0099bf; }
.btn-add i.fa { font-size:12px; }
.btn-refresh-round { width:32px; height:32px; border-radius:50%; background:#00996a; color:#fff; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,184,124,.35); transition:all .14s; }
.btn-refresh-round:hover { transform:scale(1.1); }
.xh-emp-search { margin-left:auto; position:relative; display:flex; align-items:center; }
.xh-emp-search i.fa { position:absolute; left:9px; color:var(--xh-dim); font-size:11px; pointer-events:none; }
.xh-emp-search input { height:28px; padding:0 10px 0 28px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; width:200px; transition:all .2s; }
.xh-emp-search input:focus { border-color:var(--xh-a); background:var(--xh-white); width:240px; }
.xh-ph-count { font-size:11px; color:var(--xh-dim); background:var(--xh-s2); border:1px solid var(--xh-border); border-radius:10px; padding:2px 8px; margin-left:4px; }

/* --- Table wrapper + header --- */
.xh-emp-tbl { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cl-header { display:grid; align-items:center; padding:0 14px; height:38px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-mid); position:sticky; top:0; z-index:2; flex-shrink:0; }
.cl-th { display:flex; align-items:center; gap:4px; user-select:none; white-space:nowrap; }

/* --- Table list --- */
.cl-list { overflow-y:auto; padding:7px 10px; display:flex; flex-direction:column; gap:5px; background:var(--xh-bg); flex:1; }
.cl-list::-webkit-scrollbar { width:4px; } .cl-list::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.cl-row { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:9px; overflow:hidden; display:grid; align-items:center; min-height:48px; cursor:pointer; transition:background .2s,border-color .14s,box-shadow .14s; }
.cl-row:hover { border-color:var(--xh-a); box-shadow:0 3px 12px rgba(0,172,215,.08); }
.cl-row.selected { border-color:var(--xh-a); background:rgba(0,172,215,.06); box-shadow:0 3px 12px rgba(0,172,215,.12); }
.cl-side { width:4px; align-self:stretch; }
.cl-side.green { background:var(--xh-green); } .cl-side.red { background:var(--xh-red); } .cl-side.gray { background:var(--xh-dim); }
.cl-av { display:flex; align-items:center; justify-content:center; padding:0 4px; }
.cl-avatar { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; letter-spacing:-.3px; flex-shrink:0; }
.cl-name-col { padding:0 12px; min-width:0; overflow:hidden; }
.cl-name { font-size:12.5px; font-weight:700; color:var(--xh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-sub { font-size:10px; color:var(--xh-dim); font-family:"Space Mono",monospace; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-cell { padding:0 12px; font-size:11.5px; color:var(--xh-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-cell.mono { font-family:"Space Mono",monospace; font-size:10.5px; color:var(--xh-dim); }
.cl-cell.bold { font-weight:700; color:var(--xh-text); }
.cl-cell.center { display:flex; align-items:center; justify-content:center; }
.cl-tag { display:inline-flex; align-items:center; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:20px; }
.cl-tag.green { background:rgba(0,184,124,.1); color:var(--xh-green); border:1px solid rgba(0,184,124,.2); }
.cl-tag.red   { background:rgba(232,57,74,.1);  color:var(--xh-red);   border:1px solid rgba(232,57,74,.2);  }
.cl-tag.amber { background:rgba(245,158,11,.1); color:var(--xh-amber); border:1px solid rgba(245,158,11,.2); }
.cl-tag.blue  { background:rgba(0,172,215,.1);  color:var(--xh-a);     border:1px solid rgba(0,172,215,.2);  }
.cl-tag.gray  { background:var(--xh-s2);        color:var(--xh-mid);   border:1px solid var(--xh-border);    }
.cl-act-btn { width:26px; height:26px; border-radius:6px; background:var(--xh-a); border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .14s; margin:0 auto; color:#fff; }
.cl-act-btn i.fa { font-size:11px; }
.cl-row:hover .cl-act-btn { opacity:1; }

/* --- Page footer empresas --- */
.xh-emp-footer { height:36px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; font-size:11px; color:var(--xh-mid); }

/* ══ MODAL EMPRESAS ══ */
.xh-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1050; display:none; align-items:center; justify-content:center; }
.xh-modal-overlay.open { display:flex; }
.xh-modal { width:860px; height:82vh; min-height:520px; background:var(--xh-bg); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.28); }
.xh-modal-hdr { height:50px; flex-shrink:0; background:#00396f; display:flex; align-items:center; padding:0 18px; gap:12px; }
.xh-modal-hdr i.fa { font-size:16px; color:#fff; }
.xh-modal-hdr-title { font-size:14px; font-weight:700; color:#fff; flex:1; }
.xh-modal-hdr-sub { font-size:11px; color:rgba(255,255,255,.7); font-family:"Space Mono",monospace; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xh-modal-close { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; font-weight:700; transition:background .14s; line-height:1; }
.xh-modal-close:hover { background:rgba(255,255,255,.35); }
.xh-modal-tabs { display:flex; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); flex-shrink:0; overflow-x:auto; }
.xh-modal-tabs::-webkit-scrollbar { height:0; }
.xh-modal-tab { flex:1; min-width:fit-content; height:46px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--xh-dim); cursor:pointer; transition:all .14s; border-bottom:3px solid transparent; padding:0 12px; white-space:nowrap; }
.xh-modal-tab i.fa { font-size:12px; }
.xh-modal-tab:hover { color:var(--xh-mid); background:var(--xh-s1); }
.xh-modal-tab.act { color:var(--xh-b); border-bottom-color:var(--xh-a); background:var(--xh-bg); }
.xh-modal-body { flex:1; overflow-y:auto; padding:18px; }
.xh-modal-body::-webkit-scrollbar { width:4px; } .xh-modal-body::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.xh-modal-footer { height:54px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 18px; }
.btn-del  { height:34px; padding:0 16px; background:#c0392b; color:#fff; border:none; border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 2px 8px rgba(232,57,74,.3); transition:all .14s; }
.btn-del:hover  { background:#c0392b; }
.btn-del  i.fa  { font-size:12px; }
.btn-save { height:34px; padding:0 16px; background:#00acd7; color:#fff; border:none; border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 2px 8px rgba(0,172,215,.3); transition:all .14s; }
.btn-save:hover { background:#0099bf; }
.btn-save i.fa  { font-size:12px; }

/* --- Modal form cards --- */
.m-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.m-card:last-child { margin-bottom:0; }
.m-card-title { padding:10px 16px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:11.5px; font-weight:700; color:var(--xh-text); display:flex; align-items:center; gap:8px; }
.m-card-title i.fa { color:var(--xh-a); font-size:12px; }
.m-form { padding:16px; display:flex; flex-direction:column; gap:12px; }
.mf-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mf-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.mf-group { display:flex; flex-direction:column; gap:4px; }
.mf-label { font-size:10.5px; font-weight:700; color:var(--xh-a); letter-spacing:.3px; text-transform:uppercase; }
.mf-input { height:32px; padding:0 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; color:var(--xh-text); outline:none; transition:all .15s; width:100%; }
.mf-input:focus { border-color:var(--xh-a); background:var(--xh-white); }
.mf-input:disabled { background:var(--xh-s2); color:var(--xh-mid); }
.mf-select { height:32px; padding:0 8px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; color:var(--xh-text); outline:none; width:100%; cursor:pointer; }
.mf-select:focus { border-color:var(--xh-a); }
.mf-select:disabled { background:var(--xh-s2); color:var(--xh-mid); cursor:not-allowed; }
/* Inside horizontal row layout, let width be driven by style="min-width:..." */
.um-mf-row .mf-select { width:auto; }

/* --- Modal inner tables --- */
.m-table-wrap { overflow-x:auto; }
.m-table { width:100%; border-collapse:collapse; }
.m-table thead th { padding:8px 12px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-mid); text-align:left; white-space:nowrap; }
.m-table tbody tr { border-bottom:1px solid var(--xh-s2); transition:background .1s; }
.m-table tbody tr:hover td { background:rgba(0,172,215,.04); }
.m-table tbody td { padding:9px 12px; font-size:12px; color:var(--xh-text); vertical-align:middle; }
.m-table tbody tr:last-child { border-bottom:none; }
.m-tb-toolbar { display:flex; justify-content:flex-end; padding:10px 12px 6px; gap:6px; border-bottom:1px solid var(--xh-s2); }
.btn-sm-xh { height:28px; padding:0 12px; border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .14s; }
.btn-sm-xh i.fa { font-size:10px; }
.btn-sm-xh.primary { background:#00acd7; color:#fff; border:none; box-shadow:0 2px 6px rgba(0,172,215,.25); }
.btn-sm-xh.primary:hover { background:#0099bf; }
.btn-sm-xh.ghost { background:var(--xh-white); color:var(--xh-mid); border:1.5px solid var(--xh-border); }
.btn-sm-xh.ghost:hover { border-color:var(--xh-a); color:var(--xh-b); }
.m-empty { padding:28px 16px; text-align:center; color:var(--xh-dim); font-size:12px; }
.m-empty i.fa { font-size:28px; color:var(--xh-border); display:block; margin-bottom:8px; }
.tg { display:inline-flex; align-items:center; font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:20px; }
.tg.green { background:rgba(0,184,124,.1); color:var(--xh-green); border:1px solid rgba(0,184,124,.2); }
.tg.amber { background:rgba(245,158,11,.1); color:var(--xh-amber); border:1px solid rgba(245,158,11,.2); }
.tg.blue  { background:rgba(0,172,215,.1);  color:var(--xh-a);     border:1px solid rgba(0,172,215,.2);  }
.tg.red   { background:rgba(232,57,74,.1);  color:var(--xh-red);   border:1px solid rgba(232,57,74,.2);  }
.tg.gray  { background:var(--xh-s2);        color:var(--xh-mid);   border:1px solid var(--xh-border);    }

/* ═══════════════════════════════════════════════════════════════════
   § PROJECT PROPERTIES MODAL  (xcloud/ViewModalConfigProjects.html)
════════════════════════════════════════════════════════════════════ */
.xhprj-window .modal-dialog { width:780px; max-width:780px; margin:5vh auto; }
.xhprj-window .modal-content { border:none; border-radius:12px; overflow:hidden; box-shadow:0 24px 72px rgba(0,0,0,.32); padding:0; }
.xhprj-wrap { height:540px; display:flex; flex-direction:column; background:var(--xh-white); overflow:hidden; }
/* Header */
.xhprj-hdr { height:46px; flex-shrink:0; background:#00396f; display:flex; align-items:center; padding:0 16px; gap:10px; }
.xhprj-hdr i.fa { font-size:14px; color:#fff; }
.xhprj-hdr-title { font-size:13px; font-weight:700; color:#fff; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xhprj-hdr-close { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; cursor:pointer; transition:background .14s; line-height:1; padding:0; }
.xhprj-hdr-close:hover { background:rgba(232,57,74,.7); }
/* Tabs */
.xhprj-tabs { height:44px; flex-shrink:0; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; }
.xhprj-tab { height:100%; padding:0 20px; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--xh-mid); cursor:pointer; border:none; border-bottom:2.5px solid transparent; background:transparent; outline:none; transition:all .14s; white-space:nowrap; font-family:"Plus Jakarta Sans",sans-serif; }
.xhprj-tab i.fa, .xhprj-tab i[class^="icon-"] { font-size:11px; }
.xhprj-tab:hover { color:var(--xh-text); background:rgba(0,0,0,.03); }
.xhprj-tab.act { color:var(--xh-a); border-bottom-color:var(--xh-a); background:var(--xh-white); font-weight:700; }
/* Body */
.xhprj-body { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.xhprj-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; }
/* General tab */
.xhprj-gen { padding:22px 30px; display:flex; flex-direction:column; gap:0; overflow-y:auto; flex:1; }
.xhprj-field { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--xh-s2); }
.xhprj-field:last-child { border-bottom:none; }
.xhprj-lbl { font-size:11.5px; font-weight:600; color:var(--xh-mid); text-align:right; }
.xhprj-input { width:100%; height:34px; padding:0 12px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; color:var(--xh-text); outline:none; transition:all .14s; }
.xhprj-input:focus { border-color:var(--xh-a); background:var(--xh-white); }
.xhprj-input[readonly], .xhprj-input.ro { color:var(--xh-mid); cursor:default; }
.xhprj-perm-sec { margin-top:16px; border-top:1.5px solid var(--xh-border); padding-top:14px; display:flex; gap:16px; }
.xhprj-perm-sec-col { flex:1; min-width:0; overflow:auto; max-height:250px; }
.xhprj-perm-sec-ttl { font-size:11px; font-weight:800; color:var(--xh-mid); letter-spacing:.4px; text-transform:uppercase; margin-bottom:8px; }
/* Compartir tab */
.xhprj-comp { display:flex; flex-direction:column; overflow:hidden; flex:1; }
.xhprj-comp-info { padding:9px 14px; font-size:12px; color:var(--xh-mid); background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; gap:6px; flex-shrink:0; }
.xhprj-comp-info i.fa { color:var(--xh-a); }
.xhprj-comp-body { display:grid; grid-template-columns:2fr 3fr; flex:1; overflow:hidden; }
.xhprj-comp-left { display:flex; flex-direction:column; overflow:hidden; border-right:1.5px solid var(--xh-border); }
.xhprj-comp-right { display:flex; flex-direction:column; padding:12px; gap:8px; overflow-y:auto; background:var(--xh-s1); }
.xhprj-usect { display:flex; flex-direction:column; overflow:hidden; flex:0 0 auto; border-bottom:1.5px solid var(--xh-border); max-height:50%; }
.xhprj-usect:last-child { border-bottom:none; flex:1; max-height:none; }
.xhprj-usect-hdr { display:flex; align-items:center; gap:7px; padding:7px 12px; background:var(--xh-s1); border-bottom:1px solid var(--xh-border); flex-shrink:0; font-family:"Plus Jakarta Sans",sans-serif; }
.xhprj-usect-hdr > span:first-child { font-size:11.5px; font-weight:700; color:var(--xh-mid); flex-shrink:0; }
.xhprj-usect-hdr.blue > span:first-child { color:var(--xh-a); }
.xhprj-usect-hdr.blue i[class^="icon-"] { color:var(--xh-a); }
.xhprj-usect-hdr.green > span:first-child { color:var(--xh-green); }
.xhprj-usect-hdr.green i[class^="icon-"] { color:var(--xh-green); }
.xhprj-usect-hdr i[class^="icon-"] { font-size:12px; color:var(--xh-mid); flex-shrink:0; }
.xhprj-usect-lbl { font-size:11.5px; font-weight:700; color:var(--xh-mid); flex-shrink:0; }
.xhprj-usect-xone .xhprj-usect-hdr { background:rgba(0,172,215,.04); }
.xhprj-search { flex:1; height:24px; padding:0 8px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:5px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; color:var(--xh-text); outline:none; transition:border-color .14s; min-width:0; }
.xhprj-search:focus { border-color:var(--xh-a); }
.xhprj-cbadge { min-width:20px; height:20px; border-radius:10px; background:var(--xh-green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; padding:0 5px; flex-shrink:0; }
.xhprj-cbadge.blue { background:var(--xh-a); }
.xhprj-ulist { flex:1; overflow-y:auto; }
.xhprj-ulist::-webkit-scrollbar { width:3px; }
.xhprj-ulist::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.xhprj-uitem { display:flex; align-items:flex-start; gap:7px; padding:6px 12px; border-bottom:1px solid var(--xh-s2); cursor:pointer; transition:background .1s; }
.xhprj-uitem:hover { background:var(--xh-s1); }
.xhprj-uitem i[class^="icon-"] { font-size:12px; color:var(--xh-dim); flex-shrink:0; margin-top:2px; }
.xhprj-uitem .fa-star { color:var(--xh-amber); margin-left:auto; flex-shrink:0; }
.xhprj-uitem .fa-star-o { color:var(--xh-dim); margin-left:auto; flex-shrink:0; }
.xhprj-uname { flex:1; min-width:0; font-size:11.5px; color:var(--xh-text); }
.xhprj-uname span { display:block; font-size:10px; color:var(--xh-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xhprj-uname div { font-size:10px; color:var(--xh-dim); }
.xhprj-perm-btn { width:100%; height:34px; border-radius:7px; border:1.5px solid var(--xh-border); background:var(--xh-white); font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; font-weight:700; color:var(--xh-mid); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .14s; }
.xhprj-perm-btn:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xhprj-perm-btn.xhprj-active { background:var(--xh-a); color:#fff; border-color:var(--xh-a); }
.xhprj-perm-tree { flex:1; min-height:0; overflow-y:auto; overflow-x:visible; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:6px; padding:6px; font-size:11px; }
/* Entornos tab */
.xhprj-env { display:flex; flex-direction:column; overflow:hidden; flex:1; }
.xhprj-env-info { padding:9px 14px; font-size:12px; color:var(--xh-mid); background:rgba(0,172,215,.04); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; gap:7px; flex-shrink:0; }
.xhprj-env-info i.fa { color:var(--xh-a); }
.xhprj-env-body { display:grid; grid-template-columns:1fr auto 1fr; flex:1; overflow:hidden; }
.xhprj-env-col { display:flex; flex-direction:column; min-width:0; }
.xhprj-env-col-hdr { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1.5px solid var(--xh-border); flex-shrink:0; font-family:"Plus Jakarta Sans",sans-serif; }
.xhprj-env-col-title { font-size:13px; font-weight:700; color:var(--xh-a); flex-shrink:0; }
.xhprj-env-col-title.green { color:var(--xh-green); }
.xhprj-env-search { flex:1; height:26px; padding:0 9px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; color:var(--xh-text); outline:none; transition:border-color .14s; min-width:0; }
.xhprj-env-search:focus { border-color:var(--xh-a); }
.xhprj-env-badge { min-width:20px; height:20px; border-radius:10px; background:var(--xh-a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; padding:0 5px; flex-shrink:0; }
.xhprj-env-badge.green { background:var(--xh-green); }
.xhprj-env-list { flex:1; overflow-y:auto; }
.xhprj-env-list::-webkit-scrollbar { width:3px; }
.xhprj-env-list::-webkit-scrollbar-thumb { background:var(--xh-border); }
.xhprj-env-list .dataTables_wrapper { padding:0; margin:0; overflow:visible; }
.xhprj-env-list .row { margin-left:0 !important; margin-right:0 !important; }
.xhprj-env-list .dataTables_scroll { overflow:visible; }
.xhprj-env-list .dataTables_scrollHead { overflow:visible !important; }
.xhprj-env-list .dataTables_scrollBody { overflow-x:auto !important; height:auto !important; max-height:none !important; }
.xhprj-env-list table.dataTable { border:none !important; margin:0 !important; }
.xhprj-env-list table.dataTable thead { display:none; }
.xhprj-env-list table.dataTable td { padding:9px 14px; border-bottom:1px solid var(--xh-s2) !important; cursor:pointer; border-top:none !important; background:rgba(245,241,210,.35); }
.xhprj-env-list table.dataTable tr:hover td { background:rgba(245,241,210,.65) !important; }
.xhprj-env-list table.dataTable tbody > tr.selected,
.xhprj-env-list table.dataTable tbody > tr.selected > td { background-color:rgba(0,172,215,.06) !important; color:var(--xh-text) !important; }
.xhprj-env-list table.dataTable tbody > tr.selected > td { border-left:3px solid var(--xh-a) !important; border-bottom:1px solid rgba(0,172,215,.15) !important; }
.xhprj-env-list table.dataTable tbody > tr.selected:hover > td { background-color:rgba(0,172,215,.10) !important; }
/* Item name row */
.xhprj-env-item-name { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--xh-text); }
.xhprj-env-item-name i.fa-database { color:var(--xh-green); font-size:12px; flex-shrink:0; }
.xhprj-env-item-name .ico-sys { display:inline-flex; width:16px; height:16px; flex-shrink:0; }
.xhprj-env-item-name .ico-sys img { width:100%; height:100%; object-fit:contain; }
/* Item url row */
.xhprj-env-item-url { font-size:10px; color:var(--xh-dim); font-family:"Space Mono",monospace; margin-left:19px; margin-top:2px; }
/* Mid buttons column */
.xhprj-env-mid { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:16px 16px 0; min-width:120px; border-left:1.5px solid var(--xh-border); border-right:1.5px solid var(--xh-border); background:var(--xh-s1); }
.xhprj-env-btn { height:32px; padding:0 18px; border-radius:7px; border:none; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .14s; width:100%; justify-content:center; }
.xhprj-env-add { background:#00acd7; color:#fff; box-shadow:0 2px 8px rgba(0,172,215,.25); }
.xhprj-env-add:hover:not([disabled]) { background:#009bc4; }
.xhprj-env-del { background:#c0392b; color:#fff; box-shadow:0 2px 8px rgba(232,57,74,.2); }
.xhprj-env-del:hover:not([disabled]) { background:#c22e3e; }
.xhprj-env-btn[disabled] { background:var(--xh-s2); color:var(--xh-dim); box-shadow:none; cursor:not-allowed; }
.xhprj-offline-extra { padding:12px 14px; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.xhprj-offline-lbl { font-size:11.5px; font-weight:600; color:var(--xh-mid); white-space:nowrap; }
.xhprj-offline-input { height:30px; padding:0 10px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; color:var(--xh-text); outline:none; }
.xhprj-offline-input:disabled { background:var(--xh-s2); color:var(--xh-mid); }
.xhprj-offline-btn { height:30px; padding:0 14px; border-radius:6px; border:none; background:var(--xh-a); color:#fff; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; }
/* Footer */
.xhprj-footer { height:52px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; gap:8px; }
.xhprj-btn { height:34px; padding:0 16px; border-radius:8px; border:none; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .14s; }
.xhprj-btn i.fa { font-size:11px; }
.xhprj-btn-dl  { background:#c87a00; color:#fff; box-shadow:0 2px 6px rgba(245,158,11,.25); }
.xhprj-btn-dl:hover  { background:#d48000; }
.xhprj-btn-del { background:#c0392b;   color:#fff; box-shadow:0 2px 6px rgba(232,57,74,.2); }
.xhprj-btn-del:hover { background:#c22e3e; }
.xhprj-btn-ok  { margin-left:auto; background:#00acd7; color:#fff; box-shadow:0 2px 6px rgba(0,57,111,.2); }
.xhprj-btn-ok:hover  { background:#004f9e; }

/* ═══════════════════════════════════════════════════════════════════════════
   § USERS VIEW  (/app/users)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── missing cl-* extensions ─────────────────────────────────────────────── */
.cl-side.amber { background:var(--xh-amber); }
.cl-side.blue  { background:var(--xh-a); }
.cl-list { flex:1; overflow-y:auto; padding:10px 14px; display:flex; flex-direction:column; gap:5px; }
.cl-list::-webkit-scrollbar { width:4px; } .cl-list::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.cl-empty { padding:40px 0; text-align:center; font-size:13px; color:var(--xh-dim); }

/* ── action buttons ──────────────────────────────────────────────────────── */
.cl-act { display:flex; align-items:center; gap:4px; padding:0 8px; justify-content:flex-end; }
.ab { width:26px; height:26px; border-radius:6px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:opacity .14s, transform .12s; flex-shrink:0; }
.ab svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab:hover:not(:disabled) { opacity:.8; transform:scale(1.1); }
.ab:disabled { opacity:.35; cursor:not-allowed; }
.ab-view { background:rgba(0,172,215,.12); color:var(--xh-a); }
.ab-edit { background:rgba(245,158,11,.12); color:var(--xh-amber); }
.ab-pub  { background:rgba(0,184,124,.12);  color:var(--xh-green); }
.ab-del  { background:rgba(232,57,74,.12);  color:var(--xh-red); }
.ab-off  { background:var(--xh-s2); color:var(--xh-dim); cursor:not-allowed; }
.ab-off:hover { opacity:1; transform:none; }

/* ── toolbar ─────────────────────────────────────────────────────────────── */
.xh-usr-toolbar { height:50px; flex-shrink:0; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1.5px solid var(--xh-border); background:var(--xh-white); }
.xh-usr-add { height:34px; padding:0 16px; border-radius:8px; border:none; background:#00acd7; color:#fff; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .14s; flex-shrink:0; }
.xh-usr-add:hover { background:#0099bf; }
.xh-usr-add svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; }
.xh-usr-search { height:34px; padding:0 12px; border-radius:8px; border:1.5px solid var(--xh-border); background:var(--xh-s1); font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; color:var(--xh-text); outline:none; width:220px; transition:border-color .14s, background .14s; }
.xh-usr-search:focus { border-color:var(--xh-a); background:var(--xh-white); }
.xh-usr-search::placeholder { color:var(--xh-dim); }
.xh-usr-count { height:22px; min-width:22px; padding:0 7px; border-radius:11px; background:var(--xh-a); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── grid templates ──────────────────────────────────────────────────────── */
/* Normal (non-XONE): side | lock | name | email | role | n°prj | lastconn */
.cl-hdr-usr,
.cl-row-usr { grid-template-columns: 4px 42px 150px 1fr 90px 55px 155px; }
/* XONE: adds empresa + typeacc columns */
.cl-hdr-usr.xone,
.cl-row-usr.xone { grid-template-columns: 4px 42px 140px 1fr 90px 160px 55px 55px 145px; }

/* ── lock indicator ──────────────────────────────────────────────────────── */
.cl-lk { display:flex; align-items:center; justify-content:center; }
.cl-lk-btn { width:28px; height:28px; border-radius:6px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .14s; padding:0; background:transparent; flex-shrink:0; }
.cl-lk-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cl-lk-static { cursor:default; }
.cl-lk-on  .cl-lk-btn { background:rgba(0,184,124,.14); color:var(--xh-green); }
.cl-lk-on  .cl-lk-btn:not(.cl-lk-static):hover { background:rgba(0,184,124,.28); }
.cl-lk-off .cl-lk-btn { background:rgba(232,57,74,.12);  color:var(--xh-red); }
.cl-lk-off .cl-lk-btn:not(.cl-lk-static):hover { background:rgba(232,57,74,.24); }

/* ═══════════════════════════════════════════════════════════════════════════
   § USER EDIT MODAL  (app_server_setting_user_edit.html)
   ═══════════════════════════════════════════════════════════════════════════ */
.xhum-window .modal-dialog { width:700px; max-width:700px; margin:5vh auto; }
.xhum-window .modal-content { border:none; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.28); padding:0; }
/* Header */
.um-hdr { height:50px; background:#00396f; display:flex; align-items:center; padding:0 18px; gap:12px; }
.um-hdr svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.um-hdr-ico { color:#fff; font-size:16px; opacity:.9; }
.um-hdr-title { font-size:14px; font-weight:700; color:#fff; flex:1; }
.um-hdr-close { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.2); border:none; color:#fff; font-size:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .14s; line-height:1; padding:0; }
.um-hdr-close:hover { background:rgba(232,57,74,.7); }
/* Tabs */
.um-tabs { display:flex; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); }
.um-tab { flex:1; height:46px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--xh-dim); cursor:pointer; transition:all .14s; border:none; border-bottom:3px solid transparent; background:transparent; font-family:"Plus Jakarta Sans",sans-serif; padding:0 6px; }
.um-tab svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.um-tab i.fa { font-size:11px; }
.um-tab:hover { color:var(--xh-mid); background:var(--xh-s1); }
.um-tab.act { color:var(--xh-b); border-bottom-color:var(--xh-a); background:var(--xh-bg); }
/* Body */
.um-body { padding:18px; overflow-y:auto; max-height:calc(88vh - 200px); }
.um-body::-webkit-scrollbar { width:4px; } .um-body::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
/* Footer */
.um-footer { height:54px; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 18px; }
/* Form row layout (horizontal label + input) */
.um-mf-row { display:flex; align-items:center; gap:14px; min-height:34px; }
.um-mf-lbl { width:120px; flex-shrink:0; font-size:12px; font-weight:600; color:var(--xh-a); text-align:right; }
/* 2FA toggle */
.btn-2fa { height:28px; padding:0 12px; border:1.5px solid var(--xh-border); border-radius:5px; background:var(--xh-white); color:var(--xh-mid); font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .14s; }
.btn-2fa svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.btn-2fa.none { border-color:var(--xh-red); color:var(--xh-red); }
/* Change password */
.btn-changepwd { height:32px; padding:0 14px; background:#c87a00; color:#fff; border:none; border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(245,158,11,.3); transition:all .14s; }
.btn-changepwd:hover { background:#d97706; }
.btn-changepwd svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
/* Role pill */
.role-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:5px; font-size:11.5px; font-weight:700; cursor:pointer; transition:all .14s; border:1.5px solid transparent; }
.role-pill.user  { background:rgba(245,158,11,.12); color:var(--xh-amber); border-color:rgba(245,158,11,.3); }
.role-pill.admin { background:rgba(0,57,111,.08);   color:var(--xh-b);     border-color:rgba(0,57,111,.2);  }
.role-pill svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
/* Footer action buttons */
.btn-guardar { height:34px; padding:0 16px; background:#00acd7; color:#fff; border:none; border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 2px 8px rgba(0,172,215,.3); transition:all .14s; }
.btn-guardar:hover { background:#0099bf; }
.btn-guardar:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-guardar svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.btn-eliminar { height:34px; padding:0 16px; background:#c0392b; color:#fff; border:none; border-radius:7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 2px 8px rgba(232,57,74,.3); transition:all .14s; }
.btn-eliminar:hover { background:#c0392b; }
.btn-eliminar svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }

/* ── tree node colors (per design: Opciones XOneCloud levels) ─────────────── */
/* These are applied via applyStylesTree() in app_server.js */
/* lvl0 root : #b85c5c  bg, white text                                        */
/* lvl1 group: rgba(184,92,92,.15) bg, --xh-text                              */
/* lvl2 leaf : --xh-s1 bg, --xh-mid text                                      */

/* ════════════════════════════════════════════════
   ENVIRONMENT MODAL  (xcloud/ViewModalEnvironment.html)
   ════════════════════════════════════════════════ */
/* Header */
.xhenv-modal-hdr { height:50px; flex-shrink:0; background:#00396f; display:flex; align-items:center; padding:0 18px; gap:12px; border-radius:5px 5px 0 0; }
.xhenv-modal-hdr i.fa { font-size:15px; color:#fff; }
.xhenv-modal-title { font-size:14px; font-weight:700; color:#fff; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Form / body */
.xhenv-modal-form { display:flex; flex-direction:column; min-height:0; }
.xhenv-modal-body { flex:1; overflow-y:auto; padding:4px 0 0; background:var(--xh-bg); }
.xhenv-modal-body::-webkit-scrollbar { width:4px; }
.xhenv-modal-body::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
/* Footer */
.xhenv-modal-footer { height:54px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:0 18px; }
/* URL field with status icon */
.xhenv-input-row { display:flex; align-items:center; gap:8px; }
.xhenv-input-row .mf-input { flex:1; }
.xhenv-url-icon { font-size:16px; flex-shrink:0; color:var(--xh-mid); }
/* Checkbox row */
.xhenv-checks-row { display:flex; flex-wrap:wrap; gap:6px 18px; padding:4px 0; }
/* Users tab toolbar */
.xhenv-users-toolbar { padding:10px 12px; border-top:1px solid var(--xh-s2); position:relative; }
.xhenv-users-toolbar .dropdown-menu { min-width:180px; }

/* ── Shared: checkbox label (used across modals) ── */
.xh-check-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--xh-text); cursor:pointer; padding:5px 10px; border-radius:6px; background:var(--xh-s1); border:1.5px solid var(--xh-border); transition:border-color .14s, background .14s; user-select:none; }
.xh-check-label:hover { border-color:var(--xh-a); background:var(--xh-white); }
.xh-check-label input[type="checkbox"] { accent-color:var(--xh-a); width:14px; height:14px; cursor:pointer; flex-shrink:0; }
.xh-check-label span { font-weight:600; }

/* ══════════════════════════════════════════════════════
   ORGANIZATION — Mis Datos
   ══════════════════════════════════════════════════════ */

/* Scroll container */
.md-scroll { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:18px; }

/* ── Stats grid ── */
.md-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px) { .md-stats { grid-template-columns:repeat(2,1fr); } }

.stat-card { border-radius:10px; padding:14px 16px; display:flex; align-items:center; gap:14px; border:1px solid transparent; transition:transform .15s, box-shadow .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.07); }
.stat-card.red   { background:rgba(232,57,74,.07);  border-color:rgba(232,57,74,.15);  }
.stat-card.green { background:rgba(0,184,124,.07);  border-color:rgba(0,184,124,.15);  }
.stat-card.blue  { background:rgba(0,172,215,.07);  border-color:rgba(0,172,215,.15);  }
.stat-card.amber { background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.15); }

.stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:20px; height:20px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-card.red   .stat-icon { background:rgba(232,57,74,.15); }
.stat-card.red   .stat-icon svg { stroke:#c0392b; }
.stat-card.green .stat-icon { background:rgba(0,184,124,.15); }
.stat-card.green .stat-icon svg { stroke:#00875a; }
.stat-card.blue  .stat-icon { background:rgba(0,172,215,.15); }
.stat-card.blue  .stat-icon svg { stroke:var(--xh-b); }
.stat-card.amber .stat-icon { background:rgba(245,158,11,.15); }
.stat-card.amber .stat-icon svg { stroke:#92670a; }

.stat-body  { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.stat-nums  { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.stat-used  { font-size:20px; font-weight:800; line-height:1; }
.stat-total { font-size:13px; font-weight:600; color:var(--xh-mid); }
.stat-label { font-size:11px; font-weight:600; color:var(--xh-mid); }
.stat-sub   { font-size:10px; color:var(--xh-dim); }

.stat-bar      { height:4px; border-radius:2px; background:rgba(0,0,0,.08); margin-top:6px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }
.stat-card.red   .stat-bar-fill { background:#c0392b; }
.stat-card.green .stat-bar-fill { background:#00875a; }
.stat-card.blue  .stat-bar-fill { background:var(--xh-b); }
.stat-card.amber .stat-bar-fill { background:#92670a; }

/* ── Company card ── */
.md-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; }
.md-card-hdr { padding:14px 20px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; gap:10px; }
.md-card-hdr svg { width:16px; height:16px; fill:none; stroke:var(--xh-b); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.md-card-title { font-size:13px; font-weight:700; color:var(--xh-text); }
.md-card-sub   { font-size:11px; color:var(--xh-dim); margin-left:2px; }

.md-grid { display:grid; grid-template-columns:1fr 1fr; }
.md-col  { display:flex; flex-direction:column; }
.md-col + .md-col { border-left:1px solid var(--xh-border); }
@media (max-width:680px) { .md-grid { grid-template-columns:1fr; } .md-col + .md-col { border-left:none; border-top:1px solid var(--xh-border); } }

.md-field { padding:13px 18px; border-bottom:1px solid var(--xh-border); display:flex; align-items:center; gap:12px; transition:background .12s; position:relative; }
.md-field:last-child { border-bottom:none; }
.md-card-editing .md-field:hover { background:var(--xh-s1); }

.md-field-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.md-field-icon svg { width:16px; height:16px; }
.md-field-body { flex:1; min-width:0; }
.md-field-label { font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--xh-dim); margin-bottom:3px; }
.md-field-val { font-size:13px; font-weight:500; color:var(--xh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.md-field-val.empty { color:var(--xh-dim); font-style:italic; font-size:12px; }
.md-field-end { flex-shrink:0; color:var(--xh-dim); }
.md-field-end svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.md-field-error { font-size:10px; color:var(--xh-red); margin-top:2px; }

.md-input { width:100%; border:none; outline:none; background:transparent; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:500; color:var(--xh-text); padding:2px 0; border-bottom:2px solid var(--xh-a); }
.md-input::placeholder { color:var(--xh-dim); }
.md-input:disabled { color:var(--xh-dim); border-bottom-color:transparent; cursor:default; }

.md-card-footer { padding:12px 20px; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:flex-end; gap:10px; }

.btn-modificar { height:32px; padding:0 16px; background:transparent; color:var(--xh-mid); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:border-color .14s, color .14s; }
.btn-modificar:hover { border-color:var(--xh-a); color:var(--xh-b); }
.btn-modificar svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.btn-cancelar { height:32px; padding:0 16px; background:transparent; color:var(--xh-dim); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; transition:border-color .14s, color .14s; }
.btn-cancelar:hover { border-color:var(--xh-red); color:var(--xh-red); }

/* ══ CERTIFICATES ══ */
.cert-actionbar { height:52px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 18px; gap:10px; }

.cert-split-wrap { position:relative; }
.split-btn { display:flex; border-radius:7px; overflow:hidden; flex-shrink:0; }
.split-btn-main { height:34px; padding:0 14px; background:#00acd7; color:#fff; border:none; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .14s; }
.split-btn-main:hover { background:#0099bf; }
.split-btn-main svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.split-btn-dd { height:34px; width:30px; background:#a8e5f6; color:#005ca8; border:none; border-left:1px solid rgba(255,255,255,.35); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s; }
.split-btn-dd:hover { background:#c5eef9; }
.split-btn-dd svg { width:10px; height:10px; fill:none; stroke:#005ca8; stroke-width:2.5; stroke-linecap:round; }
.split-menu { position:absolute; top:calc(100% + 4px); left:0; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.1); z-index:200; min-width:160px; overflow:hidden; }
.split-menu-item { display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:12px; color:var(--xh-text); cursor:pointer; transition:background .1s; }
.split-menu-item:hover { background:var(--xh-s1); }
.plat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.plat-dot.android { background:#3ddc84; }
.plat-dot.ios { background:#aaa; }

.btn-crear { height:34px; padding:0 16px; background:#00acd7; color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 3px 8px rgba(0,172,215,.28); transition:all .14s; }
.btn-crear:hover { background:#0099bf; }
.btn-crear svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }

.cert-search-wrap { margin-left:auto; display:flex; align-items:center; gap:7px; }
.cert-search-icon { width:14px; height:14px; fill:none; stroke:var(--xh-mid); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.cert-search-input { height:30px; padding:0 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; width:200px; transition:all .2s; }
.cert-search-input:focus { border-color:var(--xh-a); background:var(--xh-white); }
.cert-search-input::placeholder { color:var(--xh-dim); }

.cert-table-wrap { flex:1; overflow:auto; }
.cert-table-wrap::-webkit-scrollbar { width:4px; height:4px; }
.cert-table-wrap::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.cert-table { width:100%; border-collapse:collapse; font-family:'Plus Jakarta Sans',sans-serif; }
.cert-table thead th { position:sticky; top:0; z-index:2; padding:9px 14px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-mid); text-align:left; white-space:nowrap; }
.cert-th-del,.cert-th-plat { width:40px; }
.cert-tr { border-bottom:1px solid var(--xh-s2); transition:background .1s; }
.cert-tr-clickable { cursor:pointer; }
.cert-tr:hover td { background:rgba(0,172,215,.04); }
.cert-tr td { padding:10px 14px; font-size:12.5px; color:var(--xh-text); vertical-align:middle; }
.cert-td-del,.cert-td-plat { width:40px; text-align:center; }
.cert-del { width:28px; height:28px; border-radius:6px; background:var(--xh-red); border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .12s; }
.cert-del:hover { opacity:.8; }
.cert-del svg { width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.plat-link { cursor:pointer; display:inline-flex; align-items:center; transition:opacity .14s; }
.plat-link:hover { opacity:.75; }
.plat-icon { width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.plat-icon.android { fill:#3ddc84; stroke:none; }
.plat-icon.ios { fill:#888; stroke:none; }
.cert-date { font-family:'Space Mono',monospace; font-size:11px; color:var(--xh-dim); white-space:nowrap; }
.cert-empty { padding:32px 14px; text-align:center; color:var(--xh-dim); font-size:12px; font-style:italic; }

.cert-footer { height:36px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; font-size:11px; color:var(--xh-mid); }

/* ── Cert card-list (cl-*) ── */
.cl-header { display:grid; align-items:center; padding:0 14px; height:38px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-mid); position:sticky; top:0; z-index:2; flex-shrink:0; }
.cl-th { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cl-th-sort { cursor:pointer; }
.cl-th-sort:hover { color:var(--xh-b); }
.cl-th-sort.cl-th-asc::after { content:'↑'; font-size:9px; color:var(--xh-a); margin-left:2px; }
.cl-th-sort.cl-th-desc::after { content:'↓'; font-size:9px; color:var(--xh-a); margin-left:2px; }
.cl-si { width:10px; height:10px; fill:none; stroke:var(--xh-dim); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.cl-list { flex:1; overflow-y:auto; padding:7px 10px; display:flex; flex-direction:column; gap:5px; }
.cl-list::-webkit-scrollbar { width:4px; } .cl-list::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.cl-row { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:9px; overflow:hidden; display:grid; align-items:center; min-height:48px; cursor:pointer; transition:border-color .14s, box-shadow .14s; }
.cl-row:hover { border-color:var(--xh-a); box-shadow:0 3px 12px rgba(0,172,215,.08); }
.cl-row.selected { border-color:var(--xh-a); background:rgba(0,172,215,.06); box-shadow:0 3px 12px rgba(0,172,215,.12); }
.cl-side { width:4px; align-self:stretch; }
.cl-side.blue { background:var(--xh-a); }
.cl-side.amber { background:var(--xh-amber); }
.cl-ico { width:36px; display:flex; align-items:center; justify-content:center; }
.cl-ico svg { width:18px; height:18px; }
.cl-name-col { padding:0 12px; min-width:0; }
.cl-name { font-size:12.5px; font-weight:700; color:var(--xh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-cell { padding:0 12px; font-size:11.5px; color:var(--xh-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-cell.mono { font-family:'Space Mono',monospace; font-size:10.5px; color:var(--xh-dim); }
.cl-act { padding:0 8px; display:flex; gap:4px; justify-content:flex-end; align-items:center; }
.ab { width:26px; height:26px; border-radius:6px; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .12s, transform .12s; flex-shrink:0; }
.ab svg { width:11px; height:11px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-del { background:var(--xh-red); }
.ab-pub { background:var(--xh-green); }
.ab-edit { background:var(--xh-amber); }
.ab:hover:not(:disabled) { opacity:.8; transform:scale(1.1); }
.ab:disabled { opacity:.35; cursor:not-allowed; }
.cl-empty { padding:32px 14px; text-align:center; color:var(--xh-dim); font-size:12px; font-style:italic; }

/* ── Cert modal extensions ── */
.cert-upload-zone { border:2px dashed var(--xh-border); border-radius:10px; padding:20px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:border-color .14s, background .14s; background:var(--xh-s1); position:relative; overflow:hidden; min-width:140px; }
.cert-upload-zone:hover { border-color:var(--xh-a); background:rgba(0,172,215,.04); }
.cert-upload-zone.ready { border-color:var(--xh-green); border-style:solid; background:rgba(0,184,124,.04); cursor:default; }
.cert-upload-zone svg { width:28px; height:28px; fill:none; stroke:var(--xh-dim); stroke-width:1.5; stroke-linecap:round; transition:stroke .14s; }
.cert-upload-zone.ready svg { stroke:var(--xh-green); }
.cert-upload-zone-txt { font-size:11px; font-weight:600; color:var(--xh-mid); text-align:center; line-height:1.4; transition:color .14s; }
.cert-upload-zone.ready .cert-upload-zone-txt { color:var(--xh-green); }
.cert-upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

.um-section { border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.um-section:last-child { margin-bottom:0; }
.um-section-title { padding:10px 16px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:12px; font-weight:700; color:var(--xh-text); display:flex; align-items:center; gap:8px; }
.um-section-title svg { width:14px; height:14px; fill:none; stroke:var(--xh-mid); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.um-section-body { padding:16px; display:flex; gap:16px; align-items:flex-start; }
.um-section-form { flex:1; display:flex; flex-direction:column; gap:10px; }

.cert-big-icon { width:70px; height:70px; border-radius:12px; background:var(--xh-s2); border:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cert-big-icon svg { width:32px; height:32px; fill:none; stroke:var(--xh-green); stroke-width:1.5; stroke-linecap:round; }

/* ── Companies list (emp-*) ── */
.emp-list-wrap { border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; }
.emp-list-hdr { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); }
.emp-list-hdr svg { width:16px; height:16px; fill:none; stroke:var(--xh-a); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.emp-list-hdr-title { font-size:13px; font-weight:700; color:var(--xh-a); flex:1; }
.emp-list-hdr-search { height:26px; padding:0 9px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:5px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; width:140px; transition:border-color .14s; }
.emp-list-hdr-search:focus { border-color:var(--xh-a); }
.emp-count { width:22px; height:22px; border-radius:50%; background:var(--xh-b); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.emp-list-body { max-height:260px; overflow-y:auto; }
.emp-list-body::-webkit-scrollbar { width:3px; } .emp-list-body::-webkit-scrollbar-thumb { background:var(--xh-border); }
.emp-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--xh-s2); cursor:pointer; transition:background .1s; }
.emp-item:last-child { border-bottom:none; }
.emp-item:hover { background:var(--xh-s1); }
.emp-item.shared { background:rgba(0,172,215,.05); }
.emp-item-icon { width:28px; height:28px; border-radius:7px; background:var(--xh-s2); border:1px solid var(--xh-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .12s, border-color .12s; }
.emp-item-icon svg { width:14px; height:14px; fill:none; stroke:var(--xh-mid); stroke-width:1.8; stroke-linecap:round; }
.emp-item.shared .emp-item-icon { background:rgba(0,172,215,.1); border-color:rgba(0,172,215,.3); }
.emp-item.shared .emp-item-icon svg { stroke:var(--xh-a); }
.emp-item-body { flex:1; min-width:0; }
.emp-item-name { font-size:12.5px; font-weight:600; color:var(--xh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-item-sub { font-size:10.5px; color:var(--xh-dim); margin-top:2px; }
.emp-star { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border-radius:5px; flex-shrink:0; transition:background .1s; }
.emp-star:hover { background:var(--xh-s2); }
.emp-star svg { width:16px; height:16px; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:all .15s; }
.emp-star.on svg { fill:var(--xh-amber); stroke:var(--xh-amber); }
.emp-star.off svg { fill:none; stroke:var(--xh-dim); }
.emp-footer { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); }

/* ── Profiles mini-table ── */
.pf-table { width:100%; border-collapse:collapse; font-family:'Plus Jakarta Sans',sans-serif; }
.pf-table thead th { padding:7px 10px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--xh-mid); text-align:left; }
.pf-table tbody tr { border-bottom:1px solid var(--xh-s2); }
.pf-table tbody td { padding:8px 10px; font-size:12px; color:var(--xh-text); vertical-align:middle; }

.btn-modal-action { height:34px; padding:0 20px; background:#00acd7; color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; box-shadow:0 3px 8px rgba(0,172,215,.28); transition:all .14s; letter-spacing:.4px; }
.btn-modal-action:hover:not(:disabled) { background:#0099bf; }
.btn-modal-action svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.btn-modal-action.green { background:#00996a; box-shadow:0 3px 8px rgba(0,184,124,.3); }
.btn-modal-action.green:hover:not(:disabled) { background:#00a06a; }
.btn-modal-action:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-modal-secondary { background:var(--xh-s2,#e8eaed) !important; color:var(--xh-text) !important; border:1.5px solid var(--xh-border) !important; box-shadow:none !important; }
.btn-modal-secondary:hover:not(:disabled) { background:var(--xh-border,#cdd0d5) !important; }

/* ══ Frameworks ══ */

/* Fix ng-animate double-render: hide immediately on leave, no transition overlap */
.fw-detail.ng-hide-add,.fw-detail.ng-leave{display:none!important;}
.fw-list-area.ng-hide-add,.fw-list-area.ng-leave{display:none!important;}
.fw-section-body.ng-hide-add,.fw-section-body.ng-leave{display:none!important;}
.fw-section.ng-hide-add,.fw-section.ng-leave{display:none!important;}

/* Page header */
.page-hdr{height:var(--xh-hdr-h);flex-shrink:0;background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);display:flex;align-items:center;padding:0 18px;gap:10px;overflow:visible;}
.ph-icon{width:32px;height:32px;border-radius:8px;background:rgba(0,57,111,.07);border:1.5px solid rgba(0,57,111,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ph-icon svg{width:16px;height:16px;fill:none;stroke:var(--xh-b);stroke-width:2;stroke-linecap:round;}
.ph-title{font-size:14px;font-weight:700;color:var(--xh-text);}

/* Toggle */
.toggle-wrap{width:38px;height:20px;border-radius:10px;background:var(--xh-a);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;}
.toggle-knob{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:20px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.toggle-wrap.off{background:var(--xh-border);}
.toggle-wrap.off .toggle-knob{left:2px;}
.toggle-label{font-size:11.5px;font-weight:700;color:var(--xh-b);white-space:nowrap;}

/* Header combo group */
.ph-sep{width:1px;height:28px;background:var(--xh-border);flex-shrink:0;}
.ph-combo-group{display:flex;flex-direction:column;gap:2px;}
.ph-combo-label{font-size:8.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--xh-dim);}
.ph-combo{height:26px;padding:0 8px;background:var(--xh-s1);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11px;color:var(--xh-text);outline:none;min-width:160px;transition:border-color .14s;cursor:pointer;}
.ph-combo:focus{border-color:var(--xh-a);background:#fff;}

/* Framework Dev badge */
.fw-dev-badge{display:flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid var(--xh-border);border-radius:7px;font-size:11px;font-weight:600;color:var(--xh-mid);background:var(--xh-white);cursor:pointer;transition:all .14s;margin-left:auto;}
.fw-dev-badge:hover{border-color:var(--xh-a);color:var(--xh-b);}
.fw-dev-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}

/* Controls bar */
.fw-controls{flex-shrink:0;background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);padding:11px 18px;display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;transition:background .2s;}
.fw-sel-group{display:flex;flex-direction:column;gap:6px;}
.fw-sel-label{font-size:9px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--xh-dim);}
.fw-sel-btns{display:flex;gap:5px;flex-wrap:wrap;}

/* Platform/type button */
.fw-pbt{height:32px;padding:0 13px;display:flex;align-items:center;gap:7px;border-radius:7px;border:1.5px solid var(--xh-border);background:var(--xh-white);color:var(--xh-mid);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .14s;white-space:nowrap;}
.fw-pbt svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.fw-pbt:hover:not(:disabled){border-color:var(--xh-a);color:var(--xh-b);}
.fw-pbt:disabled{opacity:.4;cursor:not-allowed;}
.fw-pbt.on-green{background:#00996a;border-color:#00996a;color:#fff;}
.fw-pbt.on-green svg{stroke:#fff;fill:#fff;}
.fw-pbt.on-blue{background:#00acd7;border-color:#005ca8;color:#fff;}
.fw-pbt.on-blue svg{stroke:#fff;}
.fw-pbt.on-amber{background:#c87a00;border-color:#c87a00;color:#fff;}
.fw-pbt.on-amber svg{stroke:#fff;}
.fw-pbt.fw-pbt-fill svg{fill:currentColor;stroke:none;}
.fw-pbt.fw-pbt-fill.on-green svg,.fw-pbt.fw-pbt-fill.on-amber svg{fill:#fff;stroke:none;}

/* Generate button */
.btn-generar{height:36px;padding:0 18px;background:#c87a00;color:#fff;border:none;border-radius:7px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:0 3px 10px rgba(245,158,11,.35);transition:all .14s;align-self:flex-end;margin-left:auto;}
.btn-generar:hover:not(:disabled){background:#d97706;}
.btn-generar:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.btn-generar svg{width:14px;height:14px;fill:#fff;stroke:none;}

/* Tabs */
.fw-tabs{height:40px;flex-shrink:0;background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);display:flex;align-items:flex-end;padding-left:18px;gap:2px;transition:background .2s;}
.fw-tab{height:36px;padding:0 16px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--xh-dim);cursor:pointer;border:none;background:transparent;border-top:2px solid transparent;border-radius:6px 6px 0 0;transition:all .14s;font-family:inherit;}
.fw-tab:hover{color:var(--xh-mid);background:var(--xh-s1);}
.fw-tab.act{color:var(--xh-b);border-top-color:var(--xh-a);background:var(--xh-bg);}
.fw-tab svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.fw-tab-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;flex-shrink:0;}
.fw-tab-dot.ios{background:#aaa;}
.fw-tab-dot.web{background:var(--xh-a);}

/* List area */
.fw-list-area{flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--xh-bg);transition:background .2s;}
.fw-list-toolbar{height:44px;flex-shrink:0;background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);display:flex;align-items:center;padding:0 16px;gap:10px;transition:background .2s;}
.fw-usr-grp{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.fw-usr-label{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--xh-dim);white-space:nowrap;}
.fw-users-select{height:30px;padding:0 10px;background:var(--xh-s1);border:1.5px solid var(--xh-border);border-radius:7px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;min-width:220px;transition:border-color .14s;}
.fw-users-select:focus{border-color:var(--xh-a);}
.fw-refresh{width:32px;height:32px;border-radius:50%;background:var(--xh-green);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,184,124,.35);transition:all .14s;flex-shrink:0;}
.fw-refresh:hover{transform:scale(1.1);}
.fw-refresh svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;}
.fw-search-wrap{margin-left:auto;display:flex;align-items:center;gap:6px;}
.fw-search-label{font-size:11.5px;color:var(--xh-mid);}
.fw-search-input{height:28px;padding:0 10px;background:var(--xh-s1);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;width:160px;transition:all .2s;}
.fw-search-input:focus{border-color:var(--xh-a);background:#fff;}

/* List footer */
.fw-table-footer{height:auto;min-height:44px;flex-shrink:0;background:var(--xh-s1);border-top:1.5px solid var(--xh-border);display:flex;align-items:center;flex-wrap:wrap;padding:6px 16px;gap:8px;transition:background .2s;}

/* Detail panels */
.fw-detail{flex:1;overflow-y:auto;background:var(--xh-bg);display:flex;flex-direction:column;}
.fw-detail::-webkit-scrollbar{width:5px;}
.fw-detail::-webkit-scrollbar-thumb{background:var(--xh-border);border-radius:3px;}

/* Collapsible section */
.fw-section{background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);flex-shrink:0;}
.fw-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;cursor:pointer;user-select:none;transition:background .12s;}
.fw-section-hdr:hover{background:var(--xh-s1);}
.fw-section-title{font-size:12px;font-weight:700;color:var(--xh-text);display:flex;align-items:center;gap:8px;}
.fw-section-title svg{width:14px;height:14px;fill:none;stroke:var(--xh-a);stroke-width:2;stroke-linecap:round;}
.fw-section-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;background:var(--xh-a);color:#fff;}
.fw-section-caret{font-size:13px;color:var(--xh-dim);transition:transform .2s;line-height:1;}
.fw-section-caret.open{transform:rotate(180deg);}
.fw-section-body{padding:16px 18px;border-top:1px solid var(--xh-border);}

/* Grid de campos */
.fw-grid{display:grid;gap:10px 14px;}
.fw-grid-2{grid-template-columns:1fr 1fr;}
.fw-grid-3{grid-template-columns:1fr 1fr 1fr;}
.fw-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.fw-grid-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}

/* Form field */
.fw-field{display:flex;flex-direction:column;gap:4px;}
.fw-label{font-size:10px;font-weight:700;color:var(--xh-b);letter-spacing:.3px;display:flex;align-items:center;gap:5px;}
.fw-label-dot{width:6px;height:6px;border-radius:50%;background:var(--xh-green);flex-shrink:0;}
.fw-label-dot.amber{background:var(--xh-amber);}
.fw-label-dot.gray{background:var(--xh-dim);}
.fw-icon-row{display:flex;gap:6px;align-items:center;}
.fw-icon-row .fw-input{flex:1;}
.fw-btn-img{width:32px;height:28px;border-radius:6px;border:1.5px solid var(--xh-border);background:var(--xh-s1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;overflow:hidden;transition:border-color .14s;}
.fw-btn-img:hover{border-color:var(--xh-a);}
.fw-btn-img svg{width:14px;height:14px;fill:none;stroke:var(--xh-mid);stroke-width:1.8;stroke-linecap:round;pointer-events:none;}
.fw-btn-img input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0;}
.fw-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--xh-text);cursor:pointer;user-select:none;}
.fw-check input[type=checkbox]{width:13px;height:13px;accent-color:var(--xh-a);cursor:pointer;flex-shrink:0;}
.fw-input{height:28px;padding:0 9px;background:var(--xh-s1);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;transition:all .15s;width:100%;}
.fw-input:focus{border-color:var(--xh-a);background:#fff;}
.fw-input:disabled{background:var(--xh-s2);color:var(--xh-mid);cursor:not-allowed;}
.fw-select{height:28px;padding:0 8px;background:var(--xh-s1);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;transition:all .15s;cursor:pointer;width:100%;}
.fw-select:focus{border-color:var(--xh-a);background:#fff;}
.fw-select:disabled{background:var(--xh-s2);color:var(--xh-mid);cursor:not-allowed;}

/* Image zone */
.fw-img-zone{border:2px dashed var(--xh-border);border-radius:8px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--xh-dim);font-size:11.5px;cursor:pointer;transition:border-color .2s;padding:16px;position:relative;}
.fw-img-zone:hover{border-color:var(--xh-a);}
.fw-img-zone svg{width:28px;height:28px;fill:none;stroke:var(--xh-dim);stroke-width:1.5;stroke-linecap:round;}
.fw-img-zone input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}

/* Upload zone */
.fw-upload-zone{border:1.5px dashed var(--xh-border);border-radius:8px;padding:12px 16px;background:var(--xh-s1);transition:border-color .2s;}
.fw-upload-zone:hover{border-color:var(--xh-a);}
.fw-upload-actions{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.fw-choose-btn{height:28px;padding:0 12px;background:var(--xh-a);color:#fff;border:none;border-radius:6px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:5px;}
.fw-choose-btn svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex-shrink:0;}
.fw-choose-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.fw-upload-hint{font-size:11px;color:var(--xh-mid);display:inline-flex;align-items:center;gap:5px;}
.fw-upload-hint svg{width:13px;height:13px;fill:none;stroke:var(--xh-mid);stroke-width:2;stroke-linecap:round;flex-shrink:0;}
.fw-upload-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px;}
.fw-upload-table th{padding:5px 8px;background:var(--xh-s2);font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--xh-mid);text-align:left;border-bottom:1px solid var(--xh-border);}
.fw-upload-table td{padding:5px 8px;border-bottom:1px solid var(--xh-s2);vertical-align:middle;}

/* Permission list */
.fw-perm-filter{max-width:300px;margin-bottom:10px;}
.fw-perm-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto;}
.fw-perm-item{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:11.5px;color:var(--xh-text);cursor:pointer;}
.fw-perm-code{font-size:9.5px;font-weight:700;color:var(--xh-b);font-family:'Space Mono',monospace;margin-left:4px;}

/* Plugin grid */
.fw-plugin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;}
.fw-plugin-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--xh-text);padding:4px 0;cursor:pointer;}
.fw-plugin-badge{font-size:8.5px;font-weight:800;letter-spacing:.4px;padding:1px 5px;background:var(--xh-a);color:#fff;border-radius:4px;text-transform:uppercase;}

/* Sub-section */
.fw-subsec{border:1px solid var(--xh-border);border-radius:8px;overflow:hidden;margin-bottom:10px;}
.fw-subsec-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--xh-s1);cursor:pointer;font-size:11.5px;font-weight:700;color:var(--xh-text);user-select:none;}
.fw-subsec-hdr:hover{background:var(--xh-s2);}
.fw-subsec-body{padding:12px 14px;border-top:1px solid var(--xh-border);}

/* cl-list for fw: status cells */
.fw-status-cell{display:flex;align-items:center;justify-content:center;font-size:13px;}

/* ══════════════════════════════════════════════════════
   Actions Log (al-*)
   ══════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.al-toolbar{height:50px;flex-shrink:0;background:var(--xh-white);border-bottom:1.5px solid var(--xh-border);display:flex;align-items:center;padding:0 16px;gap:8px;transition:background .2s;}
.al-refresh-btn{width:34px;height:34px;border-radius:50%;background:var(--xh-green);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,184,124,.35);flex-shrink:0;transition:background .15s;}
.al-refresh-btn:hover{background:#009f6a;}
.al-refresh-btn svg{stroke:#fff;fill:none;}
.al-exports{margin-left:auto;display:flex;gap:5px;align-items:center;}

/* Export buttons generated by DataTable Buttons plugin */
.al-export-btn{height:32px;padding:0 12px !important;border:1.5px solid var(--xh-border) !important;border-radius:6px !important;background:var(--xh-white);color:var(--xh-mid);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:none !important;white-space:nowrap;}
.al-export-btn:hover{background:var(--xh-s1) !important;}
.al-export-filter{background:var(--xh-a) !important;color:#fff !important;border-color:var(--xh-a) !important;}
.al-export-filter:hover{background:var(--xh-b) !important;border-color:var(--xh-b) !important;}

/* Loading area */
.al-loading{flex-shrink:0;padding:20px;display:flex;justify-content:center;}

/* ── DataTable outer wrapper ── */
.al-dt-outer{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#actionsLog_wrapper{flex:1;min-height:0;display:flex;flex-direction:column;}

/* ── Controls bar (length + filter) ── */
.al-controls-bar{height:44px;flex-shrink:0;background:var(--xh-s1);border-bottom:1.5px solid var(--xh-border);display:flex;align-items:center;padding:0 16px;gap:8px;transition:background .2s;}
.al-select-wrap .dataTables_length{display:flex;align-items:center;}
.al-select-wrap .dataTables_length label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--xh-mid);white-space:nowrap;}
.al-select-wrap .dataTables_length select{height:28px;padding:0 8px;background:var(--xh-white);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;cursor:pointer;}
.al-search-wrap{margin-left:auto;}
.al-search-wrap .dataTables_filter{display:flex;align-items:center;}
.al-search-wrap .dataTables_filter label{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--xh-mid);}
.al-search-wrap .dataTables_filter input{height:28px;padding:0 10px;background:var(--xh-white);border:1.5px solid var(--xh-border);border-radius:6px;font-family:inherit;font-size:11.5px;color:var(--xh-text);outline:none;width:200px;transition:border-color .2s;}
.al-search-wrap .dataTables_filter input:focus{border-color:var(--xh-a);}

/* ── DataTable body (scrollable) ── */
.al-dt-body{flex:1;overflow-y:auto;padding:7px 10px;background:var(--xh-bg);}
.al-dt-body::-webkit-scrollbar{width:5px;}
.al-dt-body::-webkit-scrollbar-thumb{background:var(--xh-border);border-radius:3px;}
.al-dt-body .dataTables_scrollBody{overflow-y:visible !important;}

/* ── Table: card rows ── */
.al-table.dataTable{border-collapse:separate !important;border-spacing:0 5px !important;width:100% !important;margin:0 !important;}
.al-table.dataTable thead{background:transparent;}
.al-table.dataTable thead th{font-size:11px;font-weight:700;color:var(--xh-dim);letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border:none !important;background:transparent;box-shadow:none;}
.al-table.dataTable thead th.sorting::after,.al-table.dataTable thead th.sorting_asc::after,.al-table.dataTable thead th.sorting_desc::after{opacity:.5;}
.al-table.dataTable tbody tr{background:var(--xh-white);border:1.5px solid var(--xh-border);border-radius:10px;overflow:hidden;cursor:default;transition:border-color .14s,box-shadow .14s;border-left:4px solid var(--xh-green);}
.al-table.dataTable tbody tr.al-row-err{border-left-color:var(--xh-red);}
.al-table.dataTable tbody tr:hover{border-color:var(--xh-a);box-shadow:0 2px 12px rgba(0,172,215,.12);}
.al-table.dataTable tbody td{padding:10px 8px;border:none !important;font-size:12.5px;color:var(--xh-text);vertical-align:middle;white-space:nowrap;}
/* Zebra / selected row override */
.al-table.dataTable tbody tr.odd,.al-table.dataTable tbody tr.even{background:var(--xh-white);}
.al-table.dataTable tbody tr.selected td{background:rgba(0,172,215,.07) !important;color:var(--xh-text) !important;}

/* ── Status cell ── */
.al-td-status{width:60px;}
.al-status-wrap{display:flex;align-items:center;gap:6px;padding:0 4px;}
.al-info-btn{width:20px;height:20px;border-radius:50%;background:rgba(0,172,215,.1);border:1.5px solid rgba(0,172,215,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .14s;}
.al-info-btn:hover{background:rgba(0,172,215,.22);}
.al-info-btn svg{fill:none;stroke:var(--xh-a);stroke-width:2.5;stroke-linecap:round;}
.al-check-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.al-check-icon svg{fill:none;stroke-width:2.5;stroke-linecap:round;}
.al-check-icon.ok svg{stroke:var(--xh-green);}
.al-check-icon.err svg{stroke:var(--xh-red);}

/* ── Action cell text ── */
.al-act-cat{color:var(--xh-a);font-weight:700;font-family:"Space Mono",monospace;font-size:11px;}
.al-act-rest{color:var(--xh-mid);font-family:"Space Mono",monospace;font-size:11px;}

/* ── Footer (info + pagination) ── */
.al-dt-footer{height:38px;flex-shrink:0;background:var(--xh-s1);border-top:1.5px solid var(--xh-border);display:flex;align-items:center;padding:0 16px;transition:background .2s;}
.al-dt-info .dataTables_info{font-size:11px;color:var(--xh-mid);}
.al-dt-page{margin-left:auto;}
.al-dt-page .dataTables_paginate{display:flex;align-items:center;gap:3px;}
.al-dt-page .dataTables_paginate span{display:flex;gap:3px;}
.al-dt-page .paginate_button{min-width:28px;height:28px;padding:0 6px;border-radius:5px;border:1.5px solid var(--xh-border);background:var(--xh-white);color:var(--xh-mid) !important;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;transition:all .14s;}
.al-dt-page .paginate_button:hover{border-color:var(--xh-a);color:var(--xh-a) !important;}
.al-dt-page .paginate_button.current,.al-dt-page .paginate_button.current:hover{background:var(--xh-b) !important;border-color:var(--xh-b) !important;color:#fff !important;}
.al-dt-page .paginate_button.disabled,.al-dt-page .paginate_button.disabled:hover{opacity:.4;cursor:default;border-color:var(--xh-border);color:var(--xh-dim) !important;}

/* ── Modal: JSON textareas ── */
.al-json-area{flex:1;resize:none;border:none;outline:none;padding:14px 16px;font-family:"Space Mono",monospace;font-size:11.5px;line-height:1.6;color:var(--xh-text);background:var(--xh-white);min-height:360px;}
.al-json-area:focus{background:var(--xh-s1);}

/* ══════════════════════════════════════════════════════════════
   XONECIAS  —  Quiosco para Empresas
   ══════════════════════════════════════════════════════════════ */

/* ── Missing cl-side color ── */
.cl-side.purple { background:#7c3aed; }

/* ── Cuenta badges ── */
.cuenta-badge { display:inline-flex; align-items:center; font-size:9.5px; font-weight:800; padding:3px 10px; border-radius:20px; letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
.cuenta-badge.free     { background:var(--xh-s2); color:var(--xh-mid); border:1px solid var(--xh-border); }
.cuenta-badge.bronze   { background:rgba(180,100,40,.1); color:#b46428; border:1px solid rgba(180,100,40,.25); }
.cuenta-badge.gold     { background:rgba(245,158,11,.12); color:#b07d00; border:1px solid rgba(245,158,11,.3); }
.cuenta-badge.xone     { background:rgba(0,172,215,.1); color:var(--xh-a); border:1px solid rgba(0,172,215,.25); }
.cuenta-badge.platinum { background:rgba(100,116,139,.1); color:#475569; border:1px solid rgba(100,116,139,.25); }

/* ── Page header count badge ── */
.xc-ph-count { font-size:11px; color:var(--xh-mid); background:var(--xh-s2); border:1px solid var(--xh-border); border-radius:10px; padding:2px 8px; margin-left:4px; }

/* ── Action bar ── */
.xc-actionbar { height:44px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 14px; gap:10px; transition:background .2s; }
.xc-show-wrap { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--xh-mid); }
.xc-show-select { height:28px; padding:0 8px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; cursor:pointer; }
.xc-show-label { font-size:11.5px; color:var(--xh-mid); }
.xc-search-wrap { margin-left:auto; position:relative; display:flex; align-items:center; }
.xc-search-icon { position:absolute; left:8px; pointer-events:none; }
.xc-search-input { height:28px; padding:0 10px 0 30px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; width:200px; transition:all .2s; }
.xc-search-input:focus { border-color:var(--xh-a); background:var(--xh-white); width:240px; }

/* ── Body split ── */
.xc-body { flex:1; display:flex; overflow:hidden; }
.xc-list-area { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.xc-row-sel { border-color:var(--xh-a) !important; box-shadow:0 3px 12px rgba(0,172,215,.1); }

/* ── Detail panel ── */
.xc-detail { width:290px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; padding:10px; overflow-y:auto; background:var(--xh-bg); border-left:1.5px solid var(--xh-border); transition:background .2s; }
.xc-detail::-webkit-scrollbar { width:3px; } .xc-detail::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.xc-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:9px; overflow:hidden; transition:background .2s; }
.xc-card-hdr { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--xh-s1); border-bottom:1px solid var(--xh-border); font-size:11.5px; font-weight:700; color:var(--xh-text); transition:background .2s; }
.xc-card-body { padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.xc-kv { display:flex; flex-direction:column; gap:2px; }
.xc-k { font-size:9.5px; font-weight:700; color:var(--xh-dim); text-transform:uppercase; letter-spacing:.5px; }
.xc-v { font-size:11.5px; color:var(--xh-text); font-family:"Space Mono",monospace; word-break:break-all; }
.xc-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.xc-status-dot.ok  { background:var(--xh-green); box-shadow:0 0 4px var(--xh-green); }
.xc-status-dot.off { background:var(--xh-dim); }

/* ── Toggle (checkbox-based, input hidden) ── */
.xc-toggle { position:relative; width:36px; height:20px; flex-shrink:0; display:inline-block; cursor:pointer; }
.xc-toggle input { opacity:0; width:0; height:0; position:absolute; }
.xc-toggle-track { position:absolute; inset:0; border-radius:10px; background:var(--xh-border); transition:background .2s; }
.xc-toggle input:checked + .xc-toggle-track { background:var(--xh-green); }
.xc-toggle-thumb { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.18); pointer-events:none; }
.xc-toggle input:checked ~ .xc-toggle-thumb { transform:translateX(16px); }

/* ── Footer ── */
.xc-footer { height:36px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; font-size:11px; color:var(--xh-mid); transition:background .2s; }
.xc-th-act { color:var(--xh-b) !important; }
.xc-th-act .cl-si { stroke:var(--xh-a); }

/* ══════════════════════════════════════════════════════════════
   PROJECTS — Dropdown "Nuevo" + Modal IA
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper dropdown ── */
.xh-btn-new-wrap { position:relative; }
.xh-dd-ca { font-size:9px; opacity:.8; margin-left:1px; }

/* ── Dropdown panel ── */
.xh-btn-new-dd {
  display:none;
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--xh-white); border:1.5px solid var(--xh-border);
  border-radius:9px; overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  min-width:210px; z-index:100;
  animation:xhDdIn .14s ease;
  transition:background .2s;
}
.xh-btn-new-dd.open { display:block; }
@keyframes xhDdIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }

/* ── Dropdown items ── */
.xh-btn-new-dd-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--xh-text);
  transition:background .1s; border-bottom:1px solid var(--xh-s2);
}
.xh-btn-new-dd-item:last-child { border-bottom:none; }
.xh-btn-new-dd-item:hover { background:var(--xh-s1); }
.xh-btn-new-dd-item.ai  svg { stroke:var(--xh-a); }
.xh-btn-new-dd-item.tpl svg { stroke:var(--xh-amber); }
.xh-btn-new-dd-item-texts { display:flex; flex-direction:column; }
.xh-btn-new-dd-item-lbl { font-size:12px; font-weight:700; color:var(--xh-text); }
.xh-btn-new-dd-item-sub { font-size:10px; color:var(--xh-dim); margin-top:1px; }

/* ══ Modal Nuevo Proyecto IA ══ */
.xh-mia-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.46); z-index:1050;
  align-items:center; justify-content:center;
}
.xh-mia-overlay.open { display:flex; }

.xh-modal-ia {
  width:1020px; max-width:98vw;
  background:var(--xh-bg); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 72px rgba(0,0,0,.28);
  animation:xhMiaIn .18s ease; transition:background .2s;
}
@keyframes xhMiaIn { from{opacity:0;transform:scale(.96) translateY(8px);} to{opacity:1;transform:none;} }

/* Header */
.xh-mia-hdr {
  height:52px; flex-shrink:0;
  background:#00396f;
  display:flex; align-items:center; padding:0 18px; gap:12px;
}
.xh-mia-hdr-icon {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.xh-mia-hdr-texts { flex:1; }
.xh-mia-hdr-title { font-size:13.5px; font-weight:700; color:#fff; line-height:1.2; }
.xh-mia-hdr-sub   { font-size:10px; color:rgba(255,255,255,.6); margin-top:2px; }
.xh-mia-close {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.14); border:none;
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; transition:background .14s;
}
.xh-mia-close:hover { background:rgba(232,57,74,.65); }

/* Body */
.xh-mia-body {
  padding:20px 28px;
  display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:stretch;
}
.xh-mia-field { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.xh-mia-label {
  font-size:10px; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase; color:var(--xh-a);
  display:flex; align-items:center; gap:5px;
}
.xh-mia-req   { color:var(--xh-red); font-size:12px; }
.xh-mia-input {
  width:100%; height:36px; padding:0 12px;
  background:var(--xh-s1); border:1.5px solid var(--xh-border);
  border-radius:8px; font-family:"Plus Jakarta Sans",sans-serif;
  font-size:12.5px; color:var(--xh-text); outline:none; transition:all .15s;
}
.xh-mia-input:focus { border-color:var(--xh-a); background:var(--xh-white); box-shadow:0 0 0 3px rgba(0,172,215,.07); }
.xh-mia-input.error { border-color:var(--xh-red); }
.xh-mia-textarea {
  width:100%; padding:10px 12px; min-height:90px; resize:vertical;
  background:var(--xh-s1); border:1.5px solid var(--xh-border);
  border-radius:8px; font-family:"Plus Jakarta Sans",sans-serif;
  font-size:12.5px; color:var(--xh-text); outline:none; transition:all .15s; line-height:1.5;
}
.xh-mia-textarea:focus { border-color:var(--xh-a); background:var(--xh-white); box-shadow:0 0 0 3px rgba(0,172,215,.07); }
.xh-mia-textarea.error { border-color:var(--xh-red); }
.xh-mia-err { font-size:10.5px; color:var(--xh-red); margin-top:2px; display:block; }

/* Columna consejos */
.xh-mia-tips {
  background:rgba(0,172,215,.04);
  border:1.5px solid rgba(0,172,215,.18); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column;
}
.xh-mia-tips-hdr { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.xh-mia-tips-hdr-lbl { font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--xh-b); }
.xh-mia-tips-text { font-size:11.5px; color:var(--xh-mid); line-height:1.65; margin-bottom:8px; }
.xh-mia-tips-list { display:flex; flex-direction:column; gap:5px; flex:1; max-height:260px; overflow-y:auto; padding-right:6px; }
.xh-mia-tips-list::-webkit-scrollbar { width:3px; }
.xh-mia-tips-list::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }
.xh-mia-tips-li { font-size:11px; color:var(--xh-mid); line-height:1.55; padding-left:14px; position:relative; }
.xh-mia-tips-li::before { content:"›"; position:absolute; left:0; color:var(--xh-a); font-weight:700; font-size:13px; }

/* Footer */
.xh-mia-footer {
  height:56px; flex-shrink:0;
  background:var(--xh-s1); border-top:1.5px solid var(--xh-border);
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:0 22px; transition:background .2s;
}
.xh-btn-mcancel {
  height:34px; padding:0 16px; background:var(--xh-white); color:var(--xh-mid);
  border:1.5px solid var(--xh-border); border-radius:8px;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .14s;
}
.xh-btn-mcancel:hover { border-color:var(--xh-a); color:var(--xh-b); }
.xh-btn-mia-create {
  height:34px; padding:0 20px; border:none; border-radius:8px;
  background:#00acd7; color:#fff;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:7px;
  box-shadow:0 3px 10px rgba(0,172,215,.3); transition:all .14s;
}
.xh-btn-mia-create:hover { box-shadow:0 4px 16px rgba(0,172,215,.45); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   MODAL PROJECT ISSUES  (280326)
   ══════════════════════════════════════════════════════════════ */
.xhi-window .modal-dialog { max-width: 820px; }
.xhi-window .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 72px rgba(0,0,0,.32); padding: 0; }
.xhi-body { padding: 0 !important; flex-direction: column; position: relative; max-height: none !important; overflow: visible !important; }

/* Toolbar */
.xhi-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--xh-s2); flex-wrap: wrap; }
.xhi-btn-new { } /* usa btn-modal-action base */
.xhi-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.xhi-ftag { padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer; background: var(--xh-s1); color: var(--xh-dim); border: 1px solid var(--xh-s2); transition: all .12s; }
.xhi-ftag.xhi-ftag-on { background: #00acd7; color: #fff; border-color: #005ca8; }

/* Lista */
.xhi-list { flex: 1; overflow-y: auto; max-height: 420px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.xhi-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--xh-dim); padding: 40px 0; }
.xhi-empty-ico { font-size: 32px; opacity: .3; }
.xhi-loading { text-align: center; padding: 30px 0; color: var(--xh-a); font-size: 20px; }

/* Fila */
.xhi-row { display: flex; align-items: stretch; background: var(--xh-s1); border-radius: 8px; border: 1px solid var(--xh-s2); overflow: hidden; transition: box-shadow .12s; }
.xhi-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.xhi-row-side { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 10px 8px; min-width: 68px; border-right: 1px solid var(--xh-s2); background: var(--xh-s0); }
.xhi-row-body { flex: 1; padding: 10px 14px; min-width: 0; }
.xhi-row-title { font-size: 13px; font-weight: 600; color: var(--xh-text); margin-bottom: 4px; }
.xhi-row-meta { font-size: 11px; color: var(--xh-dim); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 4px; }
.xhi-row-desc { font-size: 11px; color: var(--xh-dim); white-space: pre-line; }
.xhi-row-result { margin-top: 4px; font-size: 11px; color: var(--xh-a); }
.xhi-meta-sep { opacity: .4; }
.xhi-meta-mod { font-style: italic; opacity: .7; }
.xhi-row-acts { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px; justify-content: center; }

/* Status row tint */
.xhi-st-0 { border-left: 3px solid #00acd7; }
.xhi-st-1 { border-left: 3px solid #c87a00; }
.xhi-st-2 { border-left: 3px solid #00996a; opacity: .8; }
.xhi-st-3 { border-left: 3px solid #c0392b; opacity: .7; }
.xhi-st-4 { border-left: 3px solid var(--xh-dim); opacity: .6; }

/* Type badge */
.xhi-badge { padding: 3px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.xhi-type-0 .xhi-badge, .xhi-badge-sm.xhi-type-0 { background: rgba(232,57,74,.15); color: #c0392b; }
.xhi-type-1 .xhi-badge, .xhi-badge-sm.xhi-type-1 { background: rgba(0,172,215,.12); color: #005ca8; }

/* Priority dot */
.xhi-prio-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.xhi-prio-0 { background: #00996a; }
.xhi-prio-1 { background: #c87a00; }
.xhi-prio-2 { background: #e8394a; }
.xhi-prio-3 { background: #7a1020; }

/* Priority pill (form) */
.xhi-prio { padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.prio-baja   { background: rgba(0,153,106,.12); color: #00996a; }
.prio-media  { background: rgba(200,122,0,.12); color: #c87a00; }
.prio-alta   { background: rgba(232,57,74,.12);  color: #c0392b; }
.prio-critica{ background: rgba(122,16,32,.15);  color: #7a1020; }

/* Status chip */
.xhi-st-chip { padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 600; }
.xhi-st-chip-0 { background: rgba(0,172,215,.12); color: #005ca8; }
.xhi-st-chip-1 { background: rgba(200,122,0,.12); color: #c87a00; }
.xhi-st-chip-2 { background: rgba(0,153,106,.12); color: #00996a; }
.xhi-st-chip-3 { background: rgba(192,57,43,.12); color: #c0392b; }
.xhi-st-chip-4 { background: var(--xh-s2); color: var(--xh-dim); }

/* Action buttons (tiny) */
.xhi-act-btn { width: 24px; height: 24px; border-radius: 5px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; transition: opacity .12s; flex-shrink: 0; }
.xhi-act-btn:hover { opacity: .8; }
.xhi-act-edit    { background: #005ca8; }
.xhi-act-start   { background: #c87a00; }
.xhi-act-complete{ background: #00996a; }
.xhi-act-reject  { background: #c0392b; }
.xhi-act-reopen  { background: #6b6b80; }
.xhi-act-delete  { background: #7a1020; }

/* Form panel */
.xhi-form-panel { padding: 16px 18px; border-bottom: 1px solid var(--xh-s2); background: var(--xh-s0); }
.xhi-form-title { font-size: 13px; font-weight: 700; color: var(--xh-a); margin-bottom: 14px; }
.xhi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.xhi-field { display: flex; flex-direction: column; gap: 5px; }
.xhi-field-full { grid-column: 1 / -1; }
.xhi-label { font-size: 11px; font-weight: 600; color: var(--xh-dim); text-transform: uppercase; letter-spacing: .5px; }
.xhi-req { color: #e8394a; }
.xhi-input { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--xh-s2); background: var(--xh-s1); color: var(--xh-text); font-size: 12px; }
.xhi-input:focus { outline: none; border-color: #005ca8; box-shadow: 0 0 0 2px rgba(0,92,168,.15); }
.xhi-textarea { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--xh-s2); background: var(--xh-s1); color: var(--xh-text); font-size: 12px; resize: vertical; }
.xhi-textarea:focus { outline: none; border-color: #005ca8; box-shadow: 0 0 0 2px rgba(0,92,168,.15); }
.xhi-radio-group { display: flex; flex-wrap: wrap; gap: 6px; }
.xhi-radio { cursor: pointer; }
.xhi-radio-on .xhi-badge, .xhi-radio-on .xhi-prio { box-shadow: 0 0 0 2px #005ca8; }
.xhi-exec-group { display: flex; gap: 8px; }
.xhi-exec-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 8px;
  border: 1.5px solid var(--xh-border);
  background: var(--xh-s1); color: var(--xh-mid);
  font-size: 11.5px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: border-color .14s, background .14s, color .14s;
}
.xhi-exec-opt i { font-size: 13px; }
.xhi-exec-opt:hover { border-color: #4a90d9; color: var(--xh-text); }
.xhi-exec-on { border-color: #005ca8 !important; background: rgba(0,92,168,.09); color: #005ca8; }
.xhi-exec-on i { color: #005ca8; }
.xhi-error { font-size: 10px; color: #e8394a; }
.xhi-form-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }

/* Close-issue overlay */
.xhi-close-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; }
.xhi-close-panel { background: var(--xh-s0); border-radius: 10px; padding: 20px; min-width: 380px; max-width: 500px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.xhi-close-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--xh-text); }

/* Footer summary */
.xhi-summary { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; }
.xhi-sum-chip { padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.xhi-sum-open { background: rgba(0,172,215,.12); color: #005ca8; }
.xhi-sum-prog { background: rgba(200,122,0,.12); color: #c87a00; }
.xhi-sum-done { background: rgba(0,153,106,.12); color: #00996a; }
.xhi-sum-sep  { font-size: 11px; color: var(--xh-dim); margin-left: 6px; }

/* ── xh-speech: dictado por voz en textarea ──────────────────────────────── */
.xhs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--xh-s2); border: 1px solid var(--xh-border);
  color: var(--xh-dim); font-size: 12px;
  cursor: pointer; transition: background .14s, color .14s, border-color .14s;
  line-height: 1; padding: 0; vertical-align: middle; margin-left: 6px;
}
.xhs-btn:hover { background: var(--xh-border); color: var(--xh-text); }
.xhs-btn.xhs-on {
  background: rgba(232,57,74,.12); border-color: #e8394a; color: #e8394a;
  animation: xhsPulse 1s ease-in-out infinite;
}
@keyframes xhsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,57,74,.4); }
  50%       { box-shadow: 0 0 0 5px rgba(232,57,74,0); }
}

/* ── XOne Autopilot (290326) ──────────────────────────────────────────────── */
.ap-wrap { padding: 20px 24px; }

/* Page header */
.ap-page-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ap-page-hdr-left { display: flex; align-items: center; gap: 12px; }
.ap-page-icon { font-size: 28px; color: var(--xh-accent, #4a90d9); }
.ap-page-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--xh-text); line-height: 1.2; }
.ap-page-sub { font-size: 11.5px; color: var(--xh-dim); }
.ap-btn-new { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 8px; background: var(--xh-accent, #4a90d9); color: #fff; font-size: 12px; font-weight: 700; border: none; cursor: pointer; transition: background .14s; }
.ap-btn-new:hover { background: #005ca8; }
.ap-btn-new i { font-size: 11px; }

/* Filter bar */
.ap-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-filter-search { display: flex; align-items: center; gap: 6px; background: var(--xh-s1); border: 1px solid var(--xh-border); border-radius: 6px; padding: 5px 10px; flex: 1; min-width: 160px; }
.ap-filter-search i { color: var(--xh-dim); font-size: 12px; }
.ap-filter-input { border: none; background: transparent; outline: none; font-size: 12px; color: var(--xh-text); width: 100%; }
.ap-filter-select { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--xh-border); background: var(--xh-s1); color: var(--xh-text); font-size: 12px; cursor: pointer; outline: none; }
.ap-filter-clear { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--xh-border); background: var(--xh-s1); color: var(--xh-dim); cursor: pointer; font-size: 12px; transition: background .12s, color .12s; }
.ap-filter-clear:hover { background: var(--xh-border); color: var(--xh-text); }

/* Grid columns: strip | project | title | type | priority | status | date | actions */
.ap-hdr-grid  { grid-template-columns: 5px 1fr 2fr .8fr .8fr .9fr .9fr 36px; }
.ap-row-grid  { grid-template-columns: 5px 1fr 2fr .8fr .8fr .9fr .9fr 36px; cursor: pointer; }

/* Side strip colors (by priority) */
.ap-side { border-radius: 3px 0 0 3px; align-self: stretch; }
.ap-side-0 { background: #9eabb5; }   /* baja   – grey   */
.ap-side-1 { background: #e2aa1e; }   /* media  – yellow */
.ap-side-2 { background: #e07520; }   /* alta   – orange */
.ap-side-3 { background: #e83a4b; }   /* crítica – red   */

/* Cells */
.ap-cell-project { display: flex; align-items: center; gap: 5px; }
.ap-prj-name { font-weight: 600; font-size: 12px; }
.ap-prj-shared { color: var(--xh-dim); font-size: 11px; }
.ap-cell-title { font-size: 12px; color: var(--xh-text); }
.ap-cell-date { font-size: 11px; color: var(--xh-dim); white-space: nowrap; }
.ap-cell-actions { display: flex; align-items: center; justify-content: center; }
.ap-act-btn { background: transparent; border: none; padding: 4px 6px; border-radius: 5px; color: var(--xh-dim); cursor: pointer; font-size: 13px; transition: background .12s, color .12s; }
.ap-act-btn:hover { background: var(--xh-s2); color: var(--xh-accent, #4a90d9); }

/* Empty / loading / total */
.ap-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; color: var(--xh-dim); font-size: 13px; }
.ap-empty i { font-size: 32px; opacity: .4; }
.ap-loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--xh-dim); font-size: 13px; justify-content: center; }
.ap-total { font-size: 11px; color: var(--xh-dim); padding: 8px 4px; text-align: right; }

/* Create modal */
.xhi-create-modal { }
.ap-project-select { font-weight: 600; }
.xhi-divider { border: none; border-top: 1px solid var(--xh-border); margin: 12px 0; }

/* ══════════════════════════════════════════════════════════════
   XONEGES  —  Gestión (Frameworks, MinSDK, Asociación)
   ══════════════════════════════════════════════════════════════ */

/* ── Page-level nav tabs (usados por xoneges y futuras vistas) ── */
.xh-ptabs {
  height: 44px;
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: flex-end;
  padding: 0 0 0 18px;
  gap: 0;
  transition: background .2s;
}
.xh-ptab {
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--xh-dim);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: color .14s, border-color .14s;
  white-space: nowrap;
  user-select: none;
}
.xh-ptab:hover { color: var(--xh-mid); }
.xh-ptab.xh-on { color: var(--xh-a); border-bottom-color: var(--xh-a); font-weight: 700; }

/* ── Action bar inside tabs ── */
.xh-ges-abar {
  height: 46px;
  flex-shrink: 0;
  background: var(--xh-white);
  border-bottom: 1.5px solid var(--xh-border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  transition: background .2s;
}
.xh-ges-abar-lbl { font-size: 12px; font-weight: 600; color: var(--xh-mid); }

/* Green circle + button */
.xh-ges-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--xh-green);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 3px 8px rgba(0,184,124,.3);
  transition: transform .14s, box-shadow .14s;
  flex-shrink: 0;
}
.xh-ges-add:hover { transform: scale(1.09); box-shadow: 0 4px 12px rgba(0,184,124,.45); }

/* ── Row: columns for Tab1/Tab2 ── */
.xh-ges-row-alta { grid-template-columns: 4px 64px 90px 110px 1fr 1fr 90px 130px 70px; }
.xh-ges-side-ios { background: #5a5a5a; }

/* Actions cell */
.xh-ges-acts { padding: 0 6px; display: flex; align-items: center; }
.xh-ges-form-btns { display: flex; align-items: center; gap: 4px; }

/* ── Usage count badge ── */
.xh-ges-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--xh-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  padding: 0 6px;
  cursor: default;
}
.xh-ges-badge.has { background: var(--xh-a); cursor: pointer; }

/* ── Private badge ── */
.xh-ges-priv {
  display: inline-flex;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--xh-s2);
  color: var(--xh-dim);
  border: 1px solid var(--xh-border);
}
.xh-ges-priv.yes {
  background: rgba(0,172,215,.08);
  color: var(--xh-a);
  border-color: rgba(0,172,215,.2);
}

/* ── Platform badge ── */
.xh-ges-plat {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.xh-ges-plat.android { background: rgba(120,194,87,.12); color: #3d8b1e; border: 1px solid rgba(120,194,87,.25); }
.xh-ges-plat.ios     { background: rgba(80,80,80,.08);   color: #444;    border: 1px solid rgba(80,80,80,.18); }
.xh-ges-plat.web     { background: rgba(0,172,215,.08);  color: var(--xh-a); border: 1px solid rgba(0,172,215,.2); }

/* ── Asociación split layout ── */
.xh-ges-split {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.xh-ges-split-l {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1.5px solid var(--xh-border);
}
.xh-ges-split-r {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--xh-white);
  transition: background .2s;
}

/* Project table wrapper (DataTables lives here) */
.xh-ges-proj-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.xh-ges-proj-body::-webkit-scrollbar { width: 4px; }
.xh-ges-proj-body::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }
.xh-ges-dt-table { font-size: 12px; }
.xh-ges-proj-row { cursor: pointer; transition: background .1s; }
.xh-ges-proj-row:hover { background: var(--xh-s1) !important; }
.xh-ges-proj-row.selected { background: var(--xh-b) !important; color: #fff; }
.xh-ges-proj-name { font-weight: 600; }

/* ── Right panel: framework sections ── */
.xh-ges-fw-section {
  border-bottom: 1.5px solid var(--xh-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.xh-ges-fw-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--xh-s1);
  cursor: pointer;
  gap: 8px;
  transition: background .12s;
}
.xh-ges-fw-hdr:hover { background: var(--xh-s2); }
.xh-ges-fw-hdr-l { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.xh-ges-fw-title { font-size: 12px; font-weight: 700; color: var(--xh-text); }
.xh-ges-fw-ico-ios     { color: #5a5a5a; font-size: 13px; }
.xh-ges-fw-ico-android { color: #78c257; font-size: 13px; }
.xh-ges-fw-ico-web     { color: var(--xh-a); font-size: 13px; }
.xh-ges-fw-search {
  height: 24px;
  padding: 0 8px;
  background: var(--xh-white);
  border: 1.5px solid var(--xh-border);
  border-radius: 5px;
  font-size: 11px;
  color: var(--xh-text);
  outline: none;
  width: 100px;
  transition: border-color .14s;
}
.xh-ges-fw-search:focus { border-color: var(--xh-a); }
.xh-ges-fw-body {
  overflow-y: auto;
  max-height: 200px;
}
.xh-ges-fw-body::-webkit-scrollbar { width: 3px; }
.xh-ges-fw-body::-webkit-scrollbar-thumb { background: var(--xh-border); border-radius: 3px; }
.xh-ges-fw-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--xh-s2);
  cursor: pointer;
  transition: background .1s;
  font-size: 11.5px;
  color: var(--xh-text);
}
.xh-ges-fw-item:hover { background: var(--xh-s1); }
.xh-ges-fw-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-ges-fw-star { font-size: 12px; flex-shrink: 0; color: var(--xh-dim); }
.xh-ges-fw-star-on { color: var(--xh-amber); }
.xh-ges-fw-lock { font-size: 11px; color: var(--xh-dim); flex-shrink: 0; }

/* ── Apply button bar ── */
.xh-ges-apply-bar {
  flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1.5px solid var(--xh-border);
  display: flex;
  justify-content: flex-end;
  background: var(--xh-white);
  margin-top: auto;
}
.xh-ges-apply-btn {
  height: 32px;
  padding: 0 18px;
  background: var(--xh-b);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity .14s;
}
.xh-ges-apply-btn:hover { opacity: .85; }

/* ══ DATABASE VIEW (/app/database) ══ */
.xh-db-hdr-name { font-size:17px; font-weight:700; color:var(--xh-text); line-height:1.2; }
.xh-db-hdr-code { font-family:'Space Mono',monospace; font-size:10px; color:var(--xh-dim); font-weight:400; }
.xh-btn-nav {
  height:30px; padding:0 14px;
  background:var(--xh-white); border:1.5px solid var(--xh-border);
  border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px; font-weight:700; color:var(--xh-mid);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  transition:all .14s; margin-left:4px;
}
.xh-btn-nav.act { background:var(--xh-b); border-color:var(--xh-b); color:#fff; }
.xh-btn-nav:hover:not(.act) { border-color:var(--xh-a); color:var(--xh-b); text-decoration:none; }
.xh-db-wrap { padding:20px 22px; background:var(--xh-bg); }
.xh-db-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.xh-db-card {
  background:var(--xh-white); border:1.5px solid var(--xh-border);
  border-radius:12px; overflow:hidden; transition:all .18s;
}
.xh-db-card:hover {
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  border-color:var(--xh-a); transform:translateY(-2px);
}
.xh-db-card-top {
  height:110px;
  background:linear-gradient(135deg,var(--xh-a) 0%,var(--xh-b) 100%);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
}
.xh-db-card-top svg {
  width:46px; height:46px; fill:none;
  stroke:rgba(255,255,255,.9); stroke-width:1.4; stroke-linecap:round;
}
.xh-db-card-body { padding:14px 16px; }
.xh-db-card-title { font-size:13.5px; font-weight:700; color:var(--xh-text); margin-bottom:6px; }
.xh-db-card-links { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.xh-db-card-link { font-size:11px; color:var(--xh-a); cursor:pointer; font-weight:500; text-decoration:none; }
.xh-db-card-link:hover { text-decoration:underline; color:var(--xh-a); }
.xh-db-card-sep { color:var(--xh-dim); font-size:11px; }
.xh-db-bottom { display:grid; grid-template-columns:1fr 380px; gap:14px; }
.xh-db-info { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; }
.xh-db-info-hdr { height:36px; background:var(--xh-b); display:flex; align-items:center; padding:0 14px; gap:8px; }
.xh-db-info-hdr-title { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.8); flex:1; }
.xh-db-info-badge {
  min-width:22px; height:20px; border-radius:10px;
  background:rgba(255,255,255,.15); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; padding:0 6px;
}
.xh-db-info-row {
  display:flex; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--xh-s2);
  gap:10px; font-size:12px; color:var(--xh-text); transition:background .1s;
}
.xh-db-info-row:last-child { border-bottom:none; }
.xh-db-info-row:hover { background:var(--xh-s1); }
.xh-db-info-row > svg { width:14px; height:14px; fill:none; stroke:var(--xh-mid); stroke-width:1.8; stroke-linecap:round; flex-shrink:0; }
.xh-db-info-lbl { flex:1; }
.xh-db-pill { padding:2px 10px; border-radius:10px; font-size:10.5px; font-weight:700; white-space:nowrap; flex-shrink:0; }
.xh-db-pill.p-blue  { background:var(--xh-a);    color:#fff; }
.xh-db-pill.p-green { background:var(--xh-green); color:#fff; }
.xh-db-pill.p-red   { background:var(--xh-red);   color:#fff; }
.xh-db-pill.p-amber { background:var(--xh-amber); color:#fff; }
.xh-db-pill.p-dark  { background:var(--xh-b);     color:#fff; }
.xh-db-pill.p-none  { background:var(--xh-s2);    color:var(--xh-mid); }
.xh-db-chart { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; padding:18px; display:flex; flex-direction:column; }
.xh-db-chart-title { font-size:12px; font-weight:700; color:var(--xh-text); margin-bottom:12px; }

/* ══ DATABASE SETTING (/app/setting) ══ */
.xh-setting-hdr-icon {
  width:32px; height:32px; border-radius:8px;
  background:rgba(0,57,111,.06); border:1.5px solid rgba(0,57,111,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.xh-setting-hdr-icon svg { width:15px; height:15px; fill:none; stroke:var(--xh-b); stroke-width:2; stroke-linecap:round; }
/* Override uib-tabset in setting view */
.xh-setting-tabs-wrap { padding:0; }
.xh-setting-tabs-wrap .nav-tabs {
  height:46px; background:var(--xh-s1);
  border-bottom:1.5px solid var(--xh-border) !important;
  display:flex; align-items:flex-end;
  flex-wrap:nowrap; padding:0; margin:0;
}
.xh-setting-tabs-wrap .nav-tabs > li,
.xh-setting-tabs-wrap .nav-tabs > li.uib-tab { height:100%; padding:0; margin:0; border:none; background:transparent; }
.xh-setting-tabs-wrap .nav-tabs > li > a,
.xh-setting-tabs-wrap .nav-tabs > li.uib-tab > a {
  height:46px; padding:0 22px;
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; color:var(--xh-mid);
  border-bottom:2.5px solid transparent; border-top:none; border-left:none; border-right:none;
  border-radius:0; background:transparent; margin:0;
  transition:all .14s; white-space:nowrap;
}
.xh-setting-tabs-wrap .nav-tabs > li > a:hover { color:var(--xh-text); background:rgba(0,0,0,.03); border-bottom-color:transparent !important; }
.xh-setting-tabs-wrap .nav-tabs > li.active > a,
.xh-setting-tabs-wrap .nav-tabs > li.active > a:hover,
.xh-setting-tabs-wrap .nav-tabs > li.active > a:focus {
  color:var(--xh-a) !important; border-bottom:2.5px solid var(--xh-a) !important;
  background:var(--xh-white) !important; font-weight:700;
}
.xh-setting-tabs-wrap .nav-tabs .fa { color:inherit !important; }
.xh-setting-tabs-wrap .tab-content { display:none; }
.xh-setting-panel { background:var(--xh-bg); padding:20px 22px; }

/* Platforms */
.xh-plat-filter { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.xh-plat-check-label {
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--xh-mid);
  padding:7px 12px; background:var(--xh-white);
  border:1.5px solid var(--xh-border); border-radius:8px; transition:border-color .14s;
}
.xh-plat-check-label:hover { border-color:var(--xh-a); }
.xh-plat-check-label input { accent-color:var(--xh-a); width:14px; height:14px; cursor:pointer; }
.xh-plat-list { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; }
.xh-plat-item { border-bottom:1px solid var(--xh-s2); }
.xh-plat-item:last-child { border-bottom:none; }
.xh-plat-row {
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  transition:background .1s;
}
.xh-plat-row:hover { background:var(--xh-s1); }
.xh-plat-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xh-plat-icon svg { width:16px; height:16px; fill:none; stroke:var(--xh-mid); stroke-width:1.8; stroke-linecap:round; }
.xh-plat-icon.android svg { stroke:#3ddc84; }
.xh-plat-icon.ios     svg { stroke:#555; }
.xh-plat-icon.win     svg { stroke:#0078d7; }
.xh-plat-name { flex:1; font-size:12.5px; font-weight:600; color:var(--xh-text); }
.xh-plat-btn-models {
  height:28px; padding:0 14px; background:var(--xh-white);
  border:1.5px solid var(--xh-border); border-radius:7px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
  color:var(--xh-mid); cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .14s;
}
.xh-plat-btn-models:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xh-plat-models { background:var(--xh-s1); padding:12px 16px; border-top:1px solid var(--xh-s2); }

/* Groups */
.xh-grp-actions { display:flex; gap:10px; margin-bottom:16px; }
.xh-btn-add {
  height:32px; padding:0 16px; background:var(--xh-a); color:#fff;
  border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(0,172,215,.25); transition:all .14s;
}
.xh-btn-add:hover { background:#009bc4; }
.xh-btn-add svg { width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.xh-btn-sync {
  height:32px; padding:0 16px; background:var(--xh-amber); color:#fff;
  border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(245,158,11,.25); transition:all .14s;
}
.xh-btn-sync:hover { background:#e08e00; }
.xh-btn-sync svg { width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }

/* Replicator accordion */
.xh-rep-acc { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; margin-bottom:8px; }
.xh-rep-acc-hdr { display:flex; align-items:center; padding:0 16px; height:44px; background:var(--xh-b); cursor:pointer; user-select:none; transition:background .12s; }
.xh-rep-acc-hdr:hover { background:#004f9e; }
.xh-rep-acc-title { font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#fff; flex:1; }
.xh-rep-acc-toggle { width:22px; height:22px; border-radius:5px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
.xh-rep-acc-body { overflow:hidden; }
.xh-rep-acc-tr {
  display:grid; grid-template-columns:220px 1fr;
  border-bottom:1px solid var(--xh-s2); cursor:pointer; transition:background .1s;
}
.xh-rep-acc-tr:last-child { border-bottom:none; }
.xh-rep-acc-tr:hover { background:var(--xh-s1); }
.xh-rep-acc-key { padding:9px 14px; font-size:11.5px; font-weight:600; color:var(--xh-a); font-family:'Space Mono',monospace; background:var(--xh-s1); }
.xh-rep-acc-val { padding:9px 14px; font-size:11.5px; color:var(--xh-text); word-break:break-all; font-family:'Space Mono',monospace; }
.xh-rep-acc-val.v-bool-t { color:var(--xh-green); font-weight:700; }
.xh-rep-acc-val.v-bool-f { color:var(--xh-red);   font-weight:700; }
.xh-rep-acc-val.v-num    { color:var(--xh-amber);  font-weight:700; }

/* ══ DATABASE STAT (/app/databasestat) ══ */
.xh-stat-wrap { padding:20px; background:var(--xh-bg); overflow-y:auto; }
.xh-stat-top { display:grid; grid-template-columns:1fr 1fr 1fr 280px; gap:14px; margin-bottom:14px; }
/* Donut cards wrapper */
.xh-donut-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; transition:box-shadow .18s,border-color .18s; }
.xh-donut-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.07); border-color:rgba(0,172,215,.35); }
/* Ops pendientes card */
.xh-ops-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.xh-ops-hdr { padding:11px 16px 8px; display:flex; align-items:center; justify-content:space-between; }
.xh-ops-title { font-size:11.5px; font-weight:700; color:var(--xh-text); }
.xh-ops-config { width:24px; height:24px; border-radius:6px; background:var(--xh-s1); border:1px solid var(--xh-border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s; }
.xh-ops-config:hover { border-color:var(--xh-a); }
.xh-ops-config svg { width:12px; height:12px; fill:none; stroke:var(--xh-mid); stroke-width:2; stroke-linecap:round; }
.xh-ops-body { padding:0 16px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.xh-ops-row { display:flex; align-items:center; gap:8px; }
.xh-ops-range { flex:1; font-size:11.5px; color:var(--xh-mid); }
.xh-ops-range b { color:var(--xh-a); font-weight:700; }
.xh-ops-pct { font-family:'Space Mono',monospace; font-size:11px; font-weight:700; min-width:32px; text-align:right; }
.xh-ops-pct.low  { color:var(--xh-green); }
.xh-ops-pct.mid  { color:var(--xh-amber); }
.xh-ops-pct.high { color:var(--xh-red);   }
.xh-ops-bar-wrap { width:100%; height:4px; background:var(--xh-s2); border-radius:2px; overflow:hidden; margin-top:3px; }
.xh-ops-bar { height:100%; border-radius:2px; transition:width .8s ease; }
.xh-ops-desc { font-size:10px; color:var(--xh-dim); margin-top:4px; padding-top:8px; border-top:1px solid var(--xh-s2); line-height:1.5; }
/* Chart card */
.xh-chart-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; }
.xh-chart-hdr { padding:14px 18px 0; display:flex; align-items:flex-start; gap:10px; }
.xh-chart-title { font-size:12.5px; font-weight:700; color:var(--xh-text); }
.xh-chart-sub { font-size:10.5px; color:var(--xh-dim); margin-top:3px; }
.xh-chart-sub a { color:var(--xh-a); text-decoration:none; font-weight:600; }
.xh-chart-actions { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.xh-chart-btn { width:26px; height:26px; border-radius:6px; background:var(--xh-s1); border:1px solid var(--xh-border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s; }
.xh-chart-btn:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xh-chart-area { padding:14px 18px 4px; }
.xh-chart-legend { display:flex; align-items:center; gap:14px; padding:0 18px 14px; }
.xh-chart-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--xh-mid); }
.xh-chart-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* File Browser */
.xh-fb-wrap { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; min-height:480px; }

/* ══ SQL TABLES (/app/sqltables) ══ */
.xh-sql-wrap { display:flex; flex-direction:column; height:calc(100vh - 56px); overflow:hidden; }
.xh-tabs-bar { display:flex; align-items:center; padding:0 14px; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); gap:2px; flex-shrink:0; }
.xh-tab { height:40px; padding:0 15px; display:flex; align-items:center; font-size:12px; font-weight:700; color:var(--xh-dim); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:all .14s; user-select:none; white-space:nowrap; }
.xh-tab.act,.xh-tab:hover { color:var(--xh-a); border-bottom-color:var(--xh-a); }
.xh-ph-table { margin-left:12px; font-size:11px; font-weight:700; color:var(--xh-a); font-family:'Space Mono',monospace; }
.xh-db-select-wrap { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--xh-dim); margin-left:auto; }
.xh-db-sel { height:26px; padding:0 8px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; color:var(--xh-text); outline:none; }
.xh-tab-panel { display:none; flex:1; overflow:hidden; min-height:0; }
.xh-tab-panel.act { display:flex; flex-direction:column; }
/* two-col layout */
.xh-two-col { display:flex; flex:1; overflow:hidden; min-height:0; }
.xh-tree-panel { width:260px; flex-shrink:0; display:flex; flex-direction:column; border-right:1.5px solid var(--xh-border); background:var(--xh-white); overflow:hidden; }
.xh-tree-hdr { height:46px; flex-shrink:0; background:var(--xh-b); display:flex; align-items:center; padding:0 12px; gap:8px; }
.xh-tree-hdr-title { font-size:11.5px; font-weight:800; color:#fff; flex:1; letter-spacing:.2px; }
.xh-tree-hdr-badge { background:rgba(255,255,255,.2); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
.xh-tree-hdr-sel { height:22px; padding:0 6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:4px; color:#fff; font-size:10px; outline:none; cursor:pointer; }
.xh-tree-hdr-actions { padding:8px 12px; border-bottom:1px solid var(--xh-border); flex-shrink:0; display:flex; gap:6px; }
.xh-tree-search { padding:7px 10px; border-bottom:1px solid var(--xh-border); flex-shrink:0; }
.xh-tree-search-input { width:100%; height:28px; padding:0 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-size:11.5px; color:var(--xh-text); outline:none; font-family:'Plus Jakarta Sans',sans-serif; }
.xh-tree-list { flex:1; overflow-y:auto; padding:4px 0; }
.xh-tree-item { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:11px; color:var(--xh-text); cursor:pointer; transition:background .1s; font-family:'Space Mono',monospace; }
.xh-tree-item svg { width:13px; height:13px; flex-shrink:0; fill:none; stroke:var(--xh-dim); stroke-width:2; stroke-linecap:round; }
.xh-tree-item:hover { background:var(--xh-s1); }
.xh-tree-item.act { background:var(--xh-a); color:#fff; }
.xh-tree-item.act svg { stroke:#fff; }
/* content panel */
.xh-content-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--xh-bg); min-height:0; }
/* SQL layout */
.xh-sql-layout { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
.xh-sql-editor-wrap { flex-shrink:0; border-bottom:1.5px solid var(--xh-border); }
.xh-sql-editor { height:180px; min-height:140px; max-height:240px; background:var(--xh-white); overflow:hidden; }
/* height explícito necesario para que height:100% del hijo ACE resuelva correctamente (sin él → auto → 0 → editor no editable) */
.xh-sql-editor > div { height:100% !important; }
.xh-sql-execute-bar { height:42px; flex-shrink:0; background:var(--xh-s1); border-top:1px solid var(--xh-border); display:flex; align-items:center; padding:0 12px; gap:8px; }
.xh-btn-ejecutar { height:30px; padding:0 18px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; }
.xh-btn-ejecutar svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-ejecutar:hover { background:#009bc4; }
.xh-sql-results { flex:1; overflow-y:auto; background:var(--xh-white); }
.xh-sql-results-hdr { padding:8px 14px; font-size:11px; font-weight:700; color:var(--xh-dim); border-bottom:1px solid var(--xh-border); background:var(--xh-s1); }
.xh-sql-results-body { padding:8px; }
/* diseno toolbar */
.xh-diseno-toolbar { display:flex; flex-wrap:wrap; gap:5px; padding:8px 12px; border-bottom:1.5px solid var(--xh-border); background:var(--xh-white); flex-shrink:0; }
.xh-btn-tool { height:28px; padding:0 11px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; color:var(--xh-text); cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .14s; }
.xh-btn-tool svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-btn-tool:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xh-btn-tool.primary { background:var(--xh-a); color:#fff; border-color:var(--xh-a); }
.xh-btn-tool.primary:hover { background:#009bc4; }
.xh-btn-tool.green-t { background:var(--xh-green); color:#fff; border-color:var(--xh-green); }
.xh-diseno-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid var(--xh-border); background:var(--xh-s1); flex-shrink:0; }
.xh-diseno-content { flex:1; overflow-y:auto; }
/* opciones tab */
.xh-opciones-wrap { flex:1; overflow-y:auto; padding:16px; }
.xh-opciones-btns { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.xh-btn-opciones { height:32px; padding:0 18px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all .14s; }
.xh-btn-opciones:hover { background:#009bc4; }
/* sel tree items */
.xh-sel-tree-item { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:11px; color:var(--xh-text); cursor:pointer; transition:background .1s; font-family:'Space Mono',monospace; }
.xh-sel-tree-item svg { width:13px; height:13px; fill:none; stroke:var(--xh-dim); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-sel-tree-item:hover { background:var(--xh-s1); }
.xh-sel-tree-item.act { background:var(--xh-a); color:#fff; }
.xh-sel-tree-item.act svg { stroke:#fff; }
.xh-tree-selector { padding:8px 10px; border-bottom:1px solid var(--xh-border); display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.xh-tree-selector-label { font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--xh-dim); }
.xh-tree-selector-sel { height:28px; padding:0 8px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-size:11px; color:var(--xh-text); outline:none; width:100%; }
/* selectividad content */
.xh-sel-content { flex:1; overflow-y:auto; padding:16px; }
.xh-sel-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; }
.xh-sel-card-hdr { padding:10px 14px; font-size:11.5px; color:var(--xh-mid); background:var(--xh-s1); border-bottom:1px solid var(--xh-border); }
.xh-sel-card-body { padding:16px; }
.xh-sel-btns { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.xh-btn-criteria { height:30px; padding:0 14px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; color:var(--xh-text); cursor:pointer; transition:all .14s; }
.xh-btn-criteria:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xh-btn-criteria.primary { background:var(--xh-a); color:#fff; border-color:var(--xh-a); }
.xh-btn-criteria.primary:hover { background:#009bc4; }
.xh-criteria-label { font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--xh-a); margin-bottom:5px; }
.xh-ace-wrap { border:1.5px solid var(--xh-border); border-radius:8px; overflow:hidden; margin-bottom:10px; }
.xh-ace-wrap > div { min-height:120px; }
/* prov content */
.xh-prov-content { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--xh-white); }
.xh-prov-editor { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.xh-prov-ace { flex:1; overflow:hidden; }
.xh-prov-ace > div { height:100% !important; }
.xh-prov-bar { height:34px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 12px; gap:8px; }
/* md-select in xh tree context */
.xh-tree-hdr md-select .md-select-value { color:#fff; border-bottom-color:rgba(255,255,255,.4); font-size:11px; }

/* ══ UPDATES (/app/updates) ══ */
.xh-upd-scroll { flex:1; overflow-y:auto; padding:14px 16px; }
.act-banner { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; padding:16px; margin-bottom:14px; }
.act-banner-hdr { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.act-banner-hdr svg { width:18px; height:18px; fill:none; stroke:var(--xh-a); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.act-banner-title { font-size:14px; font-weight:800; color:var(--xh-text); flex:1; }
.act-banner-badge { min-width:24px; height:24px; background:var(--xh-a); color:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; padding:0 8px; cursor:pointer; }
.act-banner-refresh { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; transition:background .14s; flex-shrink:0; }
.act-banner-refresh:hover { background:var(--xh-s1); }
.act-banner-refresh svg { width:14px; height:14px; fill:none; stroke:var(--xh-dim); stroke-width:2.2; stroke-linecap:round; }
.xh-upd-grp-btns { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.xh-upd-grp-btn { width:34px; height:34px; border-radius:50%; background:var(--xh-s1); border:1.5px solid var(--xh-border); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .14s; }
.xh-upd-grp-btn:hover { border-color:var(--xh-a); }
.xh-upd-count-btn { min-width:48px; height:48px; border-radius:24px; background:var(--xh-a); color:#fff; border:none; font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; cursor:pointer; padding:0 14px; }
.gauges-row { display:flex; gap:20px; justify-content:center; margin-bottom:14px; padding-bottom:14px; border-bottom:1.5px solid var(--xh-border); }
.gauge-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.gauge-label { font-size:11px; font-weight:700; color:var(--xh-mid); }
.gauge-donut { position:relative; width:90px; height:90px; }
.gauge-donut svg { width:90px; height:90px; transform:rotate(-90deg); }
.gauge-track { fill:none; stroke:var(--xh-s2); stroke-width:8; }
.gauge-fill { fill:none; stroke-width:8; stroke-linecap:butt; transition:stroke-dashoffset .6s ease; }
.gauge-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-pct { font-size:13px; font-weight:800; color:var(--xh-text); font-family:'Space Mono',monospace; }
.gauge-count { font-size:11px; font-weight:700; color:var(--xh-a); font-family:'Space Mono',monospace; }
.act-sections { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.act-section { padding:12px; }
.act-section:first-child { border-right:1.5px solid var(--xh-border); }
.act-sec-hdr { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; margin-bottom:10px; }
.act-sec-hdr.red { background:rgba(224,57,57,.08); }
.act-sec-hdr.green { background:rgba(39,194,76,.08); }
.act-sec-hdr span { flex:1; font-size:11px; font-weight:700; }
.act-sec-hdr.red span { color:var(--xh-red); }
.act-sec-hdr.green span { color:var(--xh-green); }
.act-sec-badge { min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; padding:0 6px; cursor:pointer; }
.act-sec-hdr.red .act-sec-badge { background:var(--xh-red); color:#fff; }
.act-sec-hdr.green .act-sec-badge { background:var(--xh-green); color:#fff; }
.act-sec-gauges { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.mini-gauge { display:flex; flex-direction:column; align-items:center; gap:4px; }
.mini-gauge-lbl { font-size:9.5px; font-weight:700; color:var(--xh-dim); }
.mini-donut { position:relative; width:60px; height:60px; }
.mini-donut svg { width:60px; height:60px; transform:rotate(-90deg); }
.mini-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mini-pct { font-size:11px; font-weight:800; color:var(--xh-text); font-family:'Space Mono',monospace; }
.mini-count { font-size:9px; font-weight:700; font-family:'Space Mono',monospace; }
/* Nueva actualización button */
.xh-btn-nueva-act { height:30px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .14s; }
.xh-btn-nueva-act svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-nueva-act:hover { background:#009bc4; }
.xh-btn-back-stats { height:28px; padding:0 12px; background:transparent; color:var(--xh-a); border:1.5px solid var(--xh-a); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:all .14s; }
.xh-btn-back-stats svg { width:14px; height:14px; flex-shrink:0; }
.xh-btn-back-stats:hover { background:var(--xh-a); color:#fff; }
/* Crear layout */
.xh-crear-layout { display:flex; flex:1; overflow:hidden; min-height:0; }
.xh-crear-left { width:280px; flex-shrink:0; border-right:1.5px solid var(--xh-border); background:var(--xh-white); overflow-y:auto; padding:14px; }
.xh-crear-right { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--xh-bg); }
.xh-crear-sec-title { font-size:9.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-dim); margin-bottom:8px; margin-top:12px; }
.xh-crear-sec-title:first-child { margin-top:0; }
.xh-tipo-btn { height:30px; padding:0 14px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; color:var(--xh-text); cursor:pointer; display:flex; align-items:center; gap:6px; width:100%; position:relative; }
.xh-tipo-btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-tipo-dd { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:100; overflow:hidden; display:none; }
.xh-tipo-dd.open { display:block; }
.xh-tipo-dd-item { display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:12px; font-weight:600; color:var(--xh-text); cursor:pointer; transition:background .1s; }
.xh-tipo-dd-item:hover { background:var(--xh-s1); }
.xh-tipo-ico { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xh-tipo-ico svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.xh-upload-row { border:1.5px solid var(--xh-border); border-radius:8px; margin-bottom:8px; overflow:hidden; background:var(--xh-white); }
.xh-upload-label { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--xh-s1); font-size:11px; font-weight:700; color:var(--xh-text); border-bottom:1px solid var(--xh-border); }
.xh-upload-label svg { width:13px; height:13px; fill:none; stroke:var(--xh-a); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-upload-area { padding:7px 10px; display:flex; align-items:center; gap:6px; }
.xh-text-input-row { display:flex; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--xh-border); margin-bottom:6px; }
.xh-text-input-row svg { width:13px; height:13px; fill:none; stroke:var(--xh-dim); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-text-input-row > span { font-size:11px; font-weight:700; color:var(--xh-text); min-width:70px; }
.xh-text-input-sm { flex:1; height:26px; padding:0 8px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:6px; font-size:11px; color:var(--xh-text); outline:none; font-family:'Plus Jakarta Sans',sans-serif; }
.xh-btn-ok { height:26px; padding:0 10px; background:var(--xh-b); color:#fff; border:none; border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; cursor:pointer; flex-shrink:0; }
/* Crear right panel */
.xh-crear-right-hdr { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1.5px solid var(--xh-border); background:var(--xh-white); flex-shrink:0; }
.xh-crear-right-title { font-size:14px; font-weight:800; color:var(--xh-text); flex:1; }
.xh-ficheros-count { font-size:11px; color:var(--xh-dim); }
.xh-ficheros-count b { color:var(--xh-a); }
.xh-crear-btns { display:flex; align-items:center; gap:7px; padding:7px 14px; border-bottom:1.5px solid var(--xh-border); background:var(--xh-s1); flex-shrink:0; flex-wrap:wrap; }
.xh-btn-publicar { height:30px; padding:0 16px; background:var(--xh-green); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; }
.xh-btn-publicar:hover { background:#1faa40; }
.xh-btn-publicar:disabled { opacity:.5; cursor:not-allowed; }
.xh-btn-cancelar-upd { height:30px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; }
.xh-btn-cancelar-upd:hover { background:#009bc4; }
.xh-btn-borrar-upd { height:30px; padding:0 14px; background:var(--xh-red); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; }
.xh-btn-borrar-upd:hover { background:#c92a2a; }
.xh-btn-borrar-upd:disabled,.xh-btn-publicar:disabled { opacity:.5; cursor:not-allowed; }
.xh-btn-repository { height:30px; padding:0 12px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; color:var(--xh-text); cursor:pointer; display:flex; align-items:center; gap:5px; }
.xh-btn-repository.active { background:var(--xh-green); color:#fff; border-color:var(--xh-green); }
.xh-push-toggle { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--xh-text); margin-left:auto; }
.xh-toggle-switch { position:relative; width:36px; height:20px; display:inline-block; }
.xh-toggle-switch input { opacity:0; width:0; height:0; }
.xh-toggle-slider { position:absolute; inset:0; background:var(--xh-border); border-radius:10px; cursor:pointer; transition:all .2s; }
.xh-toggle-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:all .2s; }
.xh-toggle-switch input:checked + .xh-toggle-slider { background:var(--xh-a); }
.xh-toggle-switch input:checked + .xh-toggle-slider:before { transform:translateX(16px); }
/* Act files table */
.xh-act-tbl-wrap { flex:1; overflow-y:auto; background:var(--xh-white); }
.xh-act-tbl-area { padding:12px; }
.xh-upd-progress { padding:8px 0; }
.xh-progress-bar-wrap { height:4px; background:var(--xh-s2); border-radius:2px; overflow:hidden; }
.xh-progress-bar-fill { height:100%; background:var(--xh-a); transition:width .3s; }
/* Updates table area */
.xh-upd-tbl-area { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; margin-bottom:12px; }
.xh-upd-tbl-hdr { padding:8px 14px; background:var(--xh-s1); border-bottom:1px solid var(--xh-border); font-size:11px; font-weight:700; color:var(--xh-mid); }
.xh-mid-list-wrap { flex:1; overflow-y:auto; padding:12px; }

/* ══ REPORTS (/app/reports) ══ */
.xh-inf-bar { height:50px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 18px; gap:10px; }
.xh-inf-badge { height:20px; padding:0 8px; background:var(--xh-a); color:#fff; border-radius:10px; font-size:10px; font-weight:700; display:inline-flex; align-items:center; }
.xh-btn-nuevo-inf { height:32px; padding:0 16px; background:var(--xh-a); color:#fff; border:none; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(0,172,215,.25); transition:all .14s; }
.xh-btn-nuevo-inf svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-nuevo-inf:hover { background:#009bc4; box-shadow:0 3px 12px rgba(0,172,215,.35); }
/* Scrollable content */
.xh-inf-content { flex:1; overflow-y:auto; background:var(--xh-bg); }
.xh-inf-content::-webkit-scrollbar { width:4px; }
.xh-inf-content::-webkit-scrollbar-thumb { background:var(--xh-border); }
/* Empty state */
.xh-inf-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; gap:16px; padding:40px; }
.xh-inf-empty-icon { width:72px; height:72px; border-radius:18px; background:var(--xh-s2); border:1.5px solid var(--xh-border); display:flex; align-items:center; justify-content:center; }
.xh-inf-empty-icon svg { width:34px; height:34px; fill:none; stroke:var(--xh-dim); stroke-width:1.4; stroke-linecap:round; }
.xh-inf-empty-title { font-size:14px; font-weight:700; color:var(--xh-text); }
.xh-inf-empty-sub { font-size:12px; color:var(--xh-dim); text-align:center; max-width:320px; line-height:1.6; }
/* Cards grid */
.xh-inf-grid { padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.xh-inf-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; transition:all .18s; }
.xh-inf-card:hover { border-color:var(--xh-a); box-shadow:0 4px 16px rgba(0,0,0,.07); transform:translateY(-1px); }
.xh-inf-card.act { border-color:var(--xh-a); box-shadow:0 0 0 2px rgba(0,172,215,.12); }
.xh-inf-card-hdr { height:6px; background:linear-gradient(90deg,var(--xh-b),var(--xh-a)); }
.xh-inf-card-body { padding:14px 16px; cursor:default; }
.xh-inf-card-title { font-size:13px; font-weight:700; color:var(--xh-text); margin-bottom:6px; }
.xh-inf-card-priv { display:inline-flex; align-items:center; gap:5px; height:18px; padding:0 8px; border-radius:9px; font-size:9.5px; font-weight:700; background:rgba(0,57,111,.07); color:var(--xh-b); margin-top:4px; }
.xh-inf-card-priv svg { width:10px; height:10px; flex-shrink:0; }
.xh-inf-card-ftr { padding:8px 12px; border-top:1px solid var(--xh-s2); display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.xh-inf-card-btn { height:26px; padding:0 10px; border-radius:6px; border:1.5px solid var(--xh-border); background:var(--xh-white); font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; font-weight:700; color:var(--xh-mid); cursor:pointer; transition:all .12s; display:inline-flex; align-items:center; gap:4px; }
.xh-inf-card-btn svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-inf-card-btn:hover { border-color:var(--xh-a); color:var(--xh-a); }
.xh-inf-card-btn.edit:hover { border-color:var(--xh-b); color:var(--xh-b); }
/* Results bar */
.xh-inf-results-bar { height:44px; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; gap:10px; }
.xh-inf-results-title { font-size:13px; font-weight:700; color:var(--xh-text); flex:1; font-family:'Space Mono',monospace; }
.xh-inf-results-badge { height:20px; padding:0 8px; background:var(--xh-b); color:#fff; border-radius:10px; font-size:10px; font-weight:700; display:inline-flex; align-items:center; }
/* Macros grid */
.xh-macro-grid { padding:14px 18px; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); }
.xh-macro-item { display:flex; flex-direction:column; gap:5px; min-width:160px; }
.xh-macro-lbl { font-size:11px; font-weight:600; color:var(--xh-mid); }
.xh-btn-run-macro { height:30px; padding:0 16px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; align-self:flex-end; }
.xh-btn-run-macro svg { width:11px; height:11px; flex-shrink:0; }
.xh-btn-run-macro:hover { background:#009bc4; }
/* Crear / Editar header */
.xh-inf-crear-hdr { height:50px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 18px; gap:10px; }
.xh-btn-volver-inf { height:30px; padding:0 12px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; color:var(--xh-mid); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .14s; flex-shrink:0; }
.xh-btn-volver-inf svg { width:11px; height:11px; flex-shrink:0; }
.xh-btn-volver-inf:hover { border-color:var(--xh-a); color:var(--xh-b); }
.xh-btn-guardar-inf { height:30px; padding:0 16px; background:var(--xh-b); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-guardar-inf svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-guardar-inf:hover { background:#004f9e; }
.xh-btn-ejecutar-inf { height:30px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-ejecutar-inf svg { width:11px; height:11px; flex-shrink:0; }
.xh-btn-ejecutar-inf:hover { background:#009bc4; }
.xh-btn-borrar-inf { height:30px; padding:0 14px; background:var(--xh-red); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-borrar-inf svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-borrar-inf:hover { background:#c0222f; }
/* Crear body + form cards */
.xh-inf-crear-body { flex:1; overflow-y:auto; padding:20px; background:var(--xh-bg); }
.xh-inf-crear-body::-webkit-scrollbar { width:4px; }
.xh-inf-crear-body::-webkit-scrollbar-thumb { background:var(--xh-border); }
.xh-form-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.xh-form-card-hdr { padding:12px 18px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; gap:8px; }
.xh-form-card-hdr svg { width:14px; height:14px; fill:none; stroke:var(--xh-a); stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.xh-form-card-title { font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-b); }
.xh-form-row { display:grid; grid-template-columns:160px 1fr; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--xh-s2); }
.xh-form-row:last-child { border-bottom:none; }
.xh-form-lbl { font-size:11.5px; font-weight:600; color:var(--xh-mid); }
.xh-form-input { height:32px; padding:0 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:var(--xh-text); outline:none; transition:all .14s; width:100%; }
.xh-form-input:focus { border-color:var(--xh-a); background:var(--xh-white); }
.xh-form-sql-wrap { border:1.5px solid var(--xh-border); border-radius:7px; overflow:hidden; }
.xh-form-sql-foot { height:38px; background:var(--xh-s1); border-top:1px solid var(--xh-border); display:flex; align-items:center; padding:0 10px; gap:7px; justify-content:flex-end; }
.xh-btn-guardar-sql { height:26px; padding:0 14px; background:var(--xh-b); color:#fff; border:none; border-radius:5px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:background .14s; }
.xh-btn-guardar-sql svg { width:11px; height:11px; flex-shrink:0; }
.xh-btn-guardar-sql:hover { background:#004f9e; }
.xh-btn-ejecutar-sql { height:26px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:5px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:4px; transition:background .14s; }
.xh-btn-ejecutar-sql svg { width:11px; height:11px; flex-shrink:0; }
.xh-btn-ejecutar-sql:hover { background:#009bc4; }

/* Tipo filter in action bar */
.xh-inf-tipo-wrap { position:relative; flex-shrink:0; display:inline-flex; align-items:center; }
.xh-inf-tipo-select { height:32px; padding:0 28px 0 10px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:600; color:var(--xh-text); cursor:pointer; appearance:none; -webkit-appearance:none; outline:none; transition:border-color .14s; }
.xh-inf-tipo-select:focus { border-color:var(--xh-a); }
.xh-inf-tipo-arrow { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:13px; height:13px; stroke:var(--xh-mid); pointer-events:none; flex-shrink:0; }
/* Card badges */
.xh-inf-card-tipo { display:inline-flex; align-items:center; height:17px; padding:0 7px; border-radius:9px; font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; background:rgba(0,172,215,.1); color:var(--xh-a); margin-bottom:4px; }
.xh-inf-card-db { display:inline-flex; align-items:center; height:17px; padding:0 7px; border-radius:9px; font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; background:rgba(0,57,111,.08); color:var(--xh-b); margin-left:4px; }
/* Form select and textarea */
.xh-form-select { height:32px; padding:0 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:var(--xh-text); outline:none; transition:border-color .14s; width:100%; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d6782' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; }
.xh-form-select:focus { border-color:var(--xh-a); background-color:var(--xh-white); }
.xh-form-textarea { padding:8px 10px; background:var(--xh-s1); border:1.5px solid var(--xh-border); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:var(--xh-text); outline:none; transition:border-color .14s; width:100%; resize:vertical; min-height:64px; line-height:1.5; }
.xh-form-textarea:focus { border-color:var(--xh-a); background-color:var(--xh-white); }
/* SQL textarea editor (replaces ACE) — light mode base */
.xh-form-sql-editor { display:flex; flex-direction:row; min-height:160px; max-height:280px; overflow:hidden; background:var(--xh-white); }
.xh-form-sql-gutter { flex-shrink:0; width:36px; padding:10px 0; background:var(--xh-s1); border-right:1px solid var(--xh-border); overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:0; }
.xh-form-sql-gutter span { font-family:'Space Mono',monospace; font-size:11px; line-height:20px; color:var(--xh-dim); user-select:none; width:100%; text-align:center; }
.xh-form-sql-ta { flex:1; background:var(--xh-white); color:var(--xh-text); font-family:'Space Mono',monospace; font-size:12px; line-height:20px; border:none; outline:none; resize:none; padding:10px; white-space:pre; overflow-wrap:normal; overflow-x:auto; overflow-y:auto; min-height:0; }
.xh-form-sql-ta::placeholder { color:var(--xh-dim); }
/* SQL textarea editor — dark mode override */
body.xh-dark .xh-form-sql-editor { background:#1e1e2e; }
body.xh-dark .xh-form-sql-gutter { background:#16162a; border-right-color:rgba(255,255,255,.06); }
body.xh-dark .xh-form-sql-gutter span { color:rgba(255,255,255,.28); }
body.xh-dark .xh-form-sql-ta { background:#1e1e2e; color:#cdd6f4; }
body.xh-dark .xh-form-sql-ta::placeholder { color:rgba(255,255,255,.22); }
/* Params section inside SQL card */
.xh-sql-params { border-top:1.5px solid var(--xh-border); background:var(--xh-s1); margin-top:12px; border-radius:0 0 10px 10px; }
.xh-sql-params-hdr { padding:10px 16px; border-bottom:1px solid var(--xh-border); display:flex; align-items:center; gap:8px; }
.xh-sql-params-hdr svg { width:13px; height:13px; flex-shrink:0; stroke:var(--xh-b); }
.xh-sql-params-title { font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-b); font-family:'Space Mono',monospace; }
.xh-sql-params-badge { height:18px; min-width:18px; padding:0 5px; border-radius:9px; background:var(--xh-a); color:#fff; font-size:10px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.xh-sql-params-body { padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }

/* ══ DEVICES (/app/devicelist) ══ */
/* Root wrapper — permite scroll de la tabla */
#AppDeviceCtrl { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
/* Action bar */
.xh-dev-action-bar { height:50px; flex-shrink:0; background:var(--xh-white); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 14px; gap:7px; flex-wrap:wrap; }
/* Dropdown filtros */
.xh-dev-dd { flex-shrink:0; }
.xh-dev-filter-btn { height:32px; padding:0 12px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:600; color:var(--xh-text); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:border-color .14s; white-space:nowrap; }
.xh-dev-filter-btn svg { width:13px; height:13px; flex-shrink:0; stroke:var(--xh-mid); }
.xh-dev-filter-btn .xh-dev-caret { width:11px; height:11px; margin-left:2px; }
.xh-dev-filter-btn:hover, .xh-dev-filter-btn:focus { border-color:var(--xh-a); outline:none; }
/* Botón Screen share */
.xh-btn-dev-screen { height:32px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 6px rgba(0,172,215,.25); transition:all .14s; white-space:nowrap; text-decoration:none; flex-shrink:0; }
.xh-btn-dev-screen svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-screen:hover { background:#009bc4; color:#fff; text-decoration:none; }
/* Botón Añadir dispositivo */
.xh-btn-dev-add { height:32px; padding:0 14px; background:var(--xh-green); color:#fff; border:none; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 6px rgba(0,184,124,.25); transition:all .14s; white-space:nowrap; text-decoration:none; flex-shrink:0; }
.xh-btn-dev-add svg { width:12px; height:12px; flex-shrink:0; }
.xh-btn-dev-add:hover { background:#009e6a; color:#fff; text-decoration:none; }
/* Botón Refresh */
.xh-btn-dev-refresh { width:32px; height:32px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .14s; flex-shrink:0; padding:0; }
.xh-btn-dev-refresh svg { width:14px; height:14px; stroke:var(--xh-mid); transition:transform .35s; }
.xh-btn-dev-refresh:hover { border-color:var(--xh-a); }
.xh-btn-dev-refresh:hover svg { stroke:var(--xh-a); transform:rotate(180deg); }
/* Table wrap */
.xh-dev-table-wrap { flex:1; overflow:hidden; display:flex; flex-direction:column; background:var(--xh-bg); }
/* DataTables theme override para dispositivos */
#deviceData { padding:12px 14px; flex:1; overflow:auto; }
#deviceList thead th { background:var(--xh-b) !important; color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.5px !important; text-transform:uppercase; border-color:rgba(255,255,255,.12) !important; white-space:nowrap; }
#deviceList tbody tr { font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; transition:background .1s; }
#deviceList tbody tr:hover { background:rgba(0,172,215,.04) !important; }
#deviceList tbody td { border-color:var(--xh-s2) !important; color:var(--xh-text); padding:8px 10px !important; vertical-align:middle !important; }
/* DataTables controls (show + search + pagination) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; color:var(--xh-mid); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { height:28px; padding:0 8px; background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; color:var(--xh-text); outline:none; transition:border-color .14s; }
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--xh-a); }
.dataTables_wrapper .dataTables_info { font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; color:var(--xh-dim); }
/* dataTables.bootstrap.js renderiza <li class="paginate_button"><a>…</a></li> — reset li, estilo en a */
.dataTables_wrapper .dataTables_paginate li.paginate_button { border:none !important; background:transparent !important; border-radius:0 !important; padding:0 !important; margin:0 2px; display:inline-block; }
.dataTables_wrapper .dataTables_paginate li.paginate_button > a { font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; border-radius:5px !important; border:1.5px solid var(--xh-border) !important; background:var(--xh-white) !important; color:var(--xh-mid) !important; padding:3px 8px !important; display:inline-block; text-decoration:none; }
.dataTables_wrapper .dataTables_paginate li.paginate_button > a:hover { border-color:var(--xh-a) !important; color:var(--xh-b) !important; background:var(--xh-white) !important; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.current > a { background:var(--xh-b) !important; border-color:var(--xh-b) !important; color:#fff !important; }
.dataTables_wrapper .dataTables_paginate li.paginate_button.disabled > a { opacity:.4; cursor:default; }
/* Export buttons (DataTables) */
#exportcontainer .dt-button { height:28px; padding:0 10px; background:var(--xh-white); border:1.5px solid var(--xh-border) !important; border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700; color:var(--xh-mid); cursor:pointer; transition:all .12s; box-shadow:none !important; }
#exportcontainer .dt-button:hover { border-color:var(--xh-a) !important; color:var(--xh-b); background:var(--xh-white) !important; }

/* Dropdown append-to-body dentro de modal: el menú se mueve como hijo directo de <body>,
   pero Bootstrap le da z-index:1000 y el modal tiene z-index:1050 → queda detrás.
   Selector directo (body >) para máxima especificidad y evitar conflictos */
body.modal-open > .dropdown-menu { z-index: 9999 !important; }
.modal-open .dropdown-menu { z-index: 9999 !important; }

/* Popover estrecho (xh-pop-sm) — para botones de toolbar en modal */
.xh-pop-sm.popover { max-width:260px; min-height:100px; }
.xh-pop-sm .popover-title { font-size:12px; font-weight:700; padding:10px 14px; }
.xh-pop-sm .popover-content { font-size:12px; padding:10px 14px; }

/* ══ DEVICE EDIT MODAL (/app/devicelist → editar dispositivo) ══ */
/* uib-modal container — flex column, clipping solo en el borde del modal */
.modal-content { display:flex; flex-direction:column; border-radius:12px; overflow:hidden; border:none; box-shadow:0 24px 72px rgba(0,0,0,.28); }
.modal-body { padding:0 !important; flex:1; min-height:0; overflow:visible; display:flex; flex-direction:column; }
/* modal-scroll: modales legacy (sqltables, etc.) que necesitan scroll en el body */
.modal-body.modal-scroll { overflow-y:auto !important; padding:16px !important; display:block; max-height:calc(100vh - 200px); }

/* ── Header (cyan, igual que referencia) ── */
.xh-dev-modal-hdr { height:46px; flex-shrink:0; background:var(--xh-a); display:flex; align-items:center; padding:0 16px; gap:10px; }
.xh-dev-modal-hdr-icon { width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.xh-dev-modal-hdr-icon svg { width:14px; height:14px; }
.xh-dev-modal-hdr-title { flex:1; font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xh-dev-modal-hdr-edit { width:30px; height:30px; border-radius:6px; background:rgba(0,184,124,.25); border:1px solid rgba(0,184,124,.4); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .12s; }
.xh-dev-modal-hdr-edit:hover { background:rgba(0,184,124,.4); }
.xh-dev-modal-hdr-edit svg { width:14px; height:14px; }
.xh-dev-modal-close { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.18); border:none; color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .14s; }
.xh-dev-modal-close:hover { background:rgba(232,57,74,.7); }

/* ── Device info bar (modo vista, debajo del header) ── */
.xh-dev-modal-info { padding:10px 18px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; flex-shrink:0; }
.xh-dev-pin { font-size:16px; font-weight:700; color:var(--xh-text); font-family:'Space Mono',monospace; }
.xh-dev-pin2 { font-size:13px; color:var(--xh-mid); margin-top:2px; font-family:'Space Mono',monospace; }
.xh-dev-info-meta { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.xh-dev-info-row { font-size:13px; color:#8c9bac; font-weight:400; }
.xh-dev-info-row b { color:#18293e; font-weight:700; }
.xh-dev-meta-item { display:flex; flex-direction:column; font-size:13px; color:#8c9bac; font-weight:400; }
.xh-dev-meta-item b { color:#18293e; font-weight:700; }

/* ── Edit form (xeditable, modo editar) ── */
.xh-dev-edit-form { padding:8px 18px; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; flex-direction:column; flex-shrink:0; }
.xh-dev-edit-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:6px 0; border-bottom:1px solid var(--xh-border); }
.xh-dev-edit-row:last-child { border-bottom:none; }
.xh-dev-edit-lbl { font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:600; color:var(--xh-mid); min-width:110px; flex-shrink:0; }
.xh-btn-dev-save { width:28px; height:28px; background:var(--xh-b); border:none; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s; flex-shrink:0; }
.xh-btn-dev-save svg { width:13px; height:13px; }
.xh-btn-dev-save:hover { background:#004f9e; }
.xh-btn-dev-cancel { width:28px; height:28px; background:var(--xh-s2); border:1.5px solid var(--xh-border); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .14s; flex-shrink:0; }
.xh-btn-dev-cancel svg { width:13px; height:13px; stroke:var(--xh-mid); }
.xh-btn-dev-cancel:hover { border-color:var(--xh-a); }

/* ── Tab bar ── */
.xh-dev-modal-tabs { height:40px; flex-shrink:0; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; overflow-x:auto; }
.xh-dev-modal-tabs::-webkit-scrollbar { height:0; }
.xh-mtab { height:100%; padding:0 14px; display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:600; color:var(--xh-mid); cursor:pointer; border-bottom:2.5px solid transparent; transition:all .14s; white-space:nowrap; flex-shrink:0; }
.xh-mtab svg { width:13px; height:13px; flex-shrink:0; }
.xh-mtab:hover { color:var(--xh-text); }
.xh-mtab.act { color:var(--xh-a); border-bottom-color:var(--xh-a); background:var(--xh-white); font-weight:700; }
.xh-mtab.act svg { stroke:var(--xh-a); }
.xh-mtab-badge { min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--xh-a); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.xh-mtab-badge-red { background:var(--xh-red) !important; }

/* ── Tab body: overflow:visible para que dropdowns no se corten ── */
.xh-dev-modal-body { flex:1; min-height:0; display:flex; flex-direction:column; overflow:visible; }
/* Cada panel es columna flex; toolbar/footer fijos, inner con scroll */
.xh-mtab-panel { flex:1; min-height:0; display:flex; flex-direction:column; overflow:visible; }
.xh-mtab-panel-inner { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 16px; }
.xh-mtab-panel-inner::-webkit-scrollbar { width:4px; }
.xh-mtab-panel-inner::-webkit-scrollbar-thumb { background:var(--xh-border); border-radius:3px; }

/* ── Field rows (dentro de panels) ── */
.xh-dev-field-row { display:grid; grid-template-columns:180px 1fr; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--xh-s2); }
.xh-dev-field-row:last-child { border-bottom:none; }
.xh-dev-field-lbl { font-size:13px; font-weight:600; color:var(--xh-mid); }

/* ── Toolbars fijos (fuera del scroll) ── */
.xh-dev-tab-toolbar { height:48px; flex-shrink:0; background:var(--xh-s1); border-bottom:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; gap:8px; }

/* ── Action footer fijo (prov tab, fuera del scroll) ── */
.xh-dev-action-footer { height:48px; flex-shrink:0; background:var(--xh-s1); border-top:1.5px solid var(--xh-border); display:flex; align-items:center; padding:0 16px; gap:8px; overflow:visible; }

/* ── Section boxes ── */
.xh-dev-sec-box { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:10px; overflow:hidden; margin-bottom:12px; }
.xh-dev-sec-hdr { height:34px; background:rgba(0,172,215,.08); border-bottom:1px solid var(--xh-border); padding:0 14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.xh-dev-sec-title { font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--xh-a); }
.xh-dev-sec-badge { min-width:20px; height:18px; padding:0 5px; border-radius:9px; background:var(--xh-a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; }
.xh-dev-sec-badge.zero { background:var(--xh-s2); color:var(--xh-dim); }
.xh-dev-sec-badge-red { background:var(--xh-red) !important; }

/* ── Updates sections (ROJO pending, VERDE confirmed) ── */
.xh-dev-upd-section { border-radius:8px; overflow:hidden; margin-bottom:8px; }
.xh-dev-upd-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; }
.xh-dev-upd-hdr.pending { background:var(--xh-red); }
.xh-dev-upd-hdr.confirmed { background:var(--xh-green); }
.xh-dev-upd-hdr span:first-child { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; color:#fff; }
.xh-dev-upd-badge { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }

/* ── Device properties (inventory tab) ── */
.xh-dev-prop-row { display:grid; grid-template-columns:28px 160px 1fr; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--xh-s2); }
.xh-dev-prop-row:last-child { border-bottom:none; }
.xh-dev-prop-icon svg { width:16px; height:16px; fill:none; stroke:var(--xh-a); stroke-width:1.8; stroke-linecap:round; }
.xh-dev-prop-lbl { font-size:13.5px; color:var(--xh-mid); }
.xh-dev-prop-val { font-size:14px; color:var(--xh-text); }
.xh-dev-info-banner { padding:7px 14px; font-size:12.5px; color:var(--xh-a); background:rgba(0,172,215,.05); border-bottom:1px solid var(--xh-border); }

/* ── Botones ── */
.xh-btn-dev-prov { height:32px; padding:0 14px; background:var(--xh-a); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-dev-prov svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-prov:hover { background:#009bc4; }
.xh-btn-dev-deact { height:32px; padding:0 14px; background:var(--xh-red); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-dev-deact svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-deact:hover { background:#c22e3e; }
.xh-btn-dev-enact { height:32px; padding:0 14px; background:var(--xh-green); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-dev-enact svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-enact:hover { background:#009e6a; }
.xh-btn-dev-reinit { height:32px; padding:0 14px; background:var(--xh-amber); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-dev-reinit svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-reinit:hover { background:#d08000; }
.xh-btn-dev-push { height:32px; padding:0 12px; background:var(--xh-b); color:#fff; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .14s; }
.xh-btn-dev-push svg { width:13px; height:13px; flex-shrink:0; }
.xh-btn-dev-push:hover { background:#004f9e; }
.xh-btn-dev-refresh-sm { width:28px; height:28px; border-radius:7px; background:rgba(0,184,124,.12); border:1px solid rgba(0,184,124,.25); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.xh-btn-dev-refresh-sm svg { width:13px; height:13px; fill:none; stroke:var(--xh-green); stroke-width:2.2; stroke-linecap:round; }
.xh-btn-dev-sel { height:32px; padding:0 14px; border:none; border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .14s; }
.xh-btn-dev-log-filter { height:28px; padding:0 10px; border:1.5px solid var(--xh-border); border-radius:6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; background:var(--xh-white); color:var(--xh-mid); transition:all .14s; }
.xh-btn-dev-log-filter:hover, .xh-btn-dev-log-filter.act { border-color:var(--xh-a); color:var(--xh-b); }
.xh-dev-info-msg { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:600; color:var(--xh-mid); }

/* ═══════════════════════════════════════════════════════════════
   MDM VIEWS — New Design System (scoped under .xh-mdm)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper ── */
.xh-mdm { font-family:'Plus Jakarta Sans',sans-serif; color:var(--xh-text); }

/* ── Page header (replaces .bg-light.lter.b-b.wrapper-md title block) ── */
.xh-mdm .bg-light.lter.b-b.wrapper-md { background:var(--xh-white) !important; border-bottom:1.5px solid var(--xh-border) !important; padding:18px 22px 14px !important; margin-bottom:0 !important; }
.xh-mdm .bg-light.lter.b-b.wrapper-md h1 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:19px !important; font-weight:800 !important; color:var(--xh-text) !important; margin:0 !important; line-height:1.2 !important; }
.xh-mdm .bg-light.lter.b-b.wrapper-md small { font-size:12px !important; color:var(--xh-dim) !important; font-weight:500 !important; }
.xh-mdm .bg-light.lter.b-b.wrapper-md .col-sm-6 { width:100%; }

/* ── Content wrapper ── */
.xh-mdm .wrapper-md { padding:20px 22px !important; }

/* ── Panel / Card (replaces .panel.panel-default) ── */
.xh-mdm .panel.panel-default { border:1.5px solid var(--xh-border) !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(0,57,111,.07) !important; overflow:hidden; background:var(--xh-white) !important; }
.xh-mdm .panel .panel-heading { background:var(--xh-white) !important; border-bottom:1.5px solid var(--xh-border) !important; padding:10px 16px !important; display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
.xh-mdm .panel .panel-body,
.xh-mdm .panel .panel-body.bg-white { background:var(--xh-white) !important; padding:18px !important; }

/* ── Section titles inside panel ── */
.xh-mdm .m-n.font-bold.h4.text-black-dk,
.xh-mdm h1.m-n.font-bold.h4 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:14px !important; font-weight:700 !important; color:var(--xh-text) !important; margin:0 0 4px !important; }
.xh-mdm .m-n.font-thin.h3.text-black,
.xh-mdm h1.m-n.font-thin.h3 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:19px !important; font-weight:800 !important; color:var(--xh-text) !important; margin:0 !important; }
.xh-mdm .m-n.font-normal.text-black { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12px !important; color:var(--xh-mid) !important; margin:0 !important; }
.xh-mdm .text-muted { color:var(--xh-dim) !important; font-size:12px !important; font-weight:500 !important; }

/* ── uib-tabset tabs override ── */
.xh-mdm .tab-container { background:transparent !important; border:none !important; }
.xh-mdm .nav-tabs { border-bottom:2px solid var(--xh-border) !important; margin-bottom:20px !important; display:flex !important; gap:0 !important; background:transparent !important; padding:0 !important; box-shadow:none !important; }
.xh-mdm .nav-tabs > li { float:none !important; display:flex !important; }
.xh-mdm .nav-tabs > li > a { padding:9px 16px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:var(--xh-mid) !important; cursor:pointer !important; border:none !important; border-bottom:2.5px solid transparent !important; margin-bottom:-2px !important; display:flex !important; align-items:center !important; gap:6px !important; transition:all .15s !important; background:transparent !important; border-radius:0 !important; }
.xh-mdm .nav-tabs > li > a:hover { color:var(--xh-text) !important; background:transparent !important; }
.xh-mdm .nav-tabs > li.active > a,
.xh-mdm .nav-tabs > li.active > a:hover,
.xh-mdm .nav-tabs > li.active > a:focus { color:var(--xh-a) !important; border-bottom-color:var(--xh-a) !important; background:transparent !important; border-top:none !important; border-left:none !important; border-right:none !important; }
.xh-mdm .tab-content > .tab-pane { padding:0 !important; }

/* ── Form elements ── */
.xh-mdm .form-control { height:34px !important; padding:0 11px !important; background:var(--xh-s1) !important; border:1.5px solid var(--xh-border) !important; border-radius:8px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13px !important; color:var(--xh-text) !important; box-shadow:none !important; transition:border-color .15s !important; }
.xh-mdm .form-control:focus { outline:none !important; border-color:var(--xh-a) !important; background:var(--xh-white) !important; box-shadow:none !important; }
.xh-mdm textarea.form-control { height:auto !important; padding:8px 11px !important; min-height:80px; resize:vertical; line-height:1.5; }
.xh-mdm select.form-control { -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa8c0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 8px center !important; padding-right:28px !important; }
.xh-mdm label,
.xh-mdm .control-label { font-size:11.5px !important; font-weight:700 !important; color:var(--xh-mid) !important; margin-bottom:5px !important; }
.xh-mdm .form-group { margin-bottom:14px; }

/* ── Buttons ── */
.xh-mdm .btn { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; border-radius:8px !important; height:34px; padding:0 16px !important; display:inline-flex !important; align-items:center !important; gap:6px !important; transition:all .15s !important; cursor:pointer !important; white-space:nowrap !important; line-height:1 !important; border:none !important; }
.xh-mdm .btn i { font-size:12px !important; }
.xh-mdm .btn-primary,
.xh-mdm .btn-primary:focus { background:var(--xh-a) !important; color:#fff !important; border-color:var(--xh-a) !important; box-shadow:0 2px 8px rgba(0,172,215,.25) !important; }
.xh-mdm .btn-primary:hover { background:#009bc4 !important; }
.xh-mdm .btn-success,
.xh-mdm .btn-success:focus { background:var(--xh-green) !important; color:#fff !important; border-color:var(--xh-green) !important; }
.xh-mdm .btn-success:hover { opacity:.87; }
.xh-mdm .btn-danger,
.xh-mdm .btn-danger:focus { background:var(--xh-red) !important; color:#fff !important; border-color:var(--xh-red) !important; }
.xh-mdm .btn-danger:hover { opacity:.87; }
.xh-mdm .btn-dark,
.xh-mdm .btn-dark:focus { background:var(--xh-s2) !important; color:var(--xh-text) !important; border:1.5px solid var(--xh-border) !important; }
.xh-mdm .btn-dark:hover { background:var(--xh-s1) !important; border-color:var(--xh-a) !important; color:var(--xh-b) !important; }
.xh-mdm .btn-warning,
.xh-mdm .btn-warning:focus { background:var(--xh-amber) !important; color:#fff !important; border-color:var(--xh-amber) !important; }
.xh-mdm .btn-sm { height:28px !important; font-size:11.5px !important; padding:0 12px !important; }
.xh-mdm .btn-xs { height:24px !important; font-size:11px !important; padding:0 9px !important; border-radius:6px !important; }
.xh-mdm .btn-lg { height:38px !important; font-size:13px !important; }
.xh-mdm .btn-circle-lg { border-radius:50% !important; width:56px !important; height:56px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.xh-mdm .btn-group > .btn { border-radius:8px !important; }
.xh-mdm .btn-group > .btn + .btn { margin-left:4px !important; }
.xh-mdm .btn-group > .btn:first-child:not(:last-child) { border-radius:8px 0 0 8px !important; }
.xh-mdm .btn-group > .btn:last-child:not(:first-child) { border-radius:0 8px 8px 0 !important; margin-left:-1px !important; }

/* ── DataTables – header cells ── */
.xh-mdm table.dataTable thead th,
.xh-mdm table.dataTable thead td { background:var(--xh-s1) !important; color:var(--xh-mid) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:9px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.6px !important; padding:9px 12px !important; border-top:1px solid var(--xh-border) !important; border-bottom:1px solid var(--xh-border) !important; border-left:none !important; border-right:none !important; }
.xh-mdm table.dataTable thead th.bg-gray { background:var(--xh-s1) !important; color:var(--xh-mid) !important; }
.xh-mdm table.dataTable thead tr th:first-child { border-left:1px solid var(--xh-border) !important; border-radius:6px 0 0 6px !important; padding-left:10px !important; }
.xh-mdm table.dataTable thead tr th:last-child { border-right:1px solid var(--xh-border) !important; border-radius:0 6px 6px 0 !important; }
/* ── DataTables – body rows ── */
.xh-mdm table.dataTable { border-collapse:separate !important; border-spacing:0 3px !important; }
.xh-mdm table.dataTable tbody tr { cursor:pointer; transition:all .15s; }
.xh-mdm table.dataTable tbody td { background:var(--xh-white) !important; color:var(--xh-text) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; padding:9px 12px !important; border-top:1.5px solid var(--xh-border) !important; border-bottom:1.5px solid var(--xh-border) !important; border-left:none !important; border-right:none !important; vertical-align:middle !important; }
.xh-mdm table.dataTable tbody tr td:first-child { border-left:1.5px solid var(--xh-border) !important; border-radius:8px 0 0 8px !important; padding-left:10px !important; }
.xh-mdm table.dataTable tbody tr td:last-child { border-right:1.5px solid var(--xh-border) !important; border-radius:0 8px 8px 0 !important; }
.xh-mdm table.dataTable tbody tr:hover td { border-color:var(--xh-a) !important; }
.xh-mdm .table-responsive { overflow-x:auto; border-radius:8px; }

/* ── Datatable search input ── */
.xh-mdm .dataTables_wrapper .dataTables_filter label { font-size:12.5px !important; font-weight:600 !important; color:var(--xh-mid) !important; }
.xh-mdm .dataTables_wrapper .dataTables_filter input { height:28px; padding:0 10px; background:var(--xh-s1) !important; border:1.5px solid var(--xh-border) !important; border-radius:6px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12px; color:var(--xh-text) !important; outline:none; transition:border-color .15s; box-shadow:none !important; }
.xh-mdm .dataTables_wrapper .dataTables_filter input:focus { border-color:var(--xh-a) !important; background:var(--xh-white) !important; }

/* ── Dashboard cards (mdm_dashboard) ── */
.xh-mdm .xh-mdm-dash { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:22px 0; }
.xh-mdm-dash-card { background:var(--xh-white); border:1.5px solid var(--xh-border); border-radius:12px; overflow:hidden; cursor:pointer; transition:all .18s; text-decoration:none !important; display:block; }
.xh-mdm-dash-card:hover { box-shadow:0 6px 20px rgba(0,57,111,.14); border-color:var(--xh-a); transform:translateY(-2px); }
.xh-mdm-dash-card .xh-mdm-dash-top { height:110px; background:var(--xh-a); display:flex; align-items:center; justify-content:center; }
.xh-mdm-dash-card .xh-mdm-dash-top i { font-size:40px; color:rgba(255,255,255,.9); }
.xh-mdm-dash-card .xh-mdm-dash-body { padding:14px 16px; }
.xh-mdm-dash-card .xh-mdm-dash-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; color:var(--xh-text); margin:0 0 3px; }
.xh-mdm-dash-card .xh-mdm-dash-sub { font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:var(--xh-mid); }

/* ── Modal header dark blue ── */
.xh-mdm .modal-header.bg-dark { background:var(--xh-b) !important; padding:0 18px !important; height:44px; display:flex !important; align-items:center !important; }
.xh-mdm .modal-header.bg-dark .modal-title { color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13.5px !important; font-weight:700 !important; }
.xh-mdm .modal-body.bg-white { background:var(--xh-white) !important; }

/* ── Badge ── */
.xh-mdm .badge.bg-success { background:var(--xh-green) !important; color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; }

/* ── Toggle / checkbox / radio ── */
.xh-mdm .i-switch input[type=checkbox]:checked + i { background:var(--xh-a) !important; }
.xh-mdm .i-checks input[type=radio]:checked + i { border-color:var(--xh-a) !important; }
.xh-mdm .i-checks input[type=radio]:checked + i:before { background:var(--xh-a) !important; }

/* ── Dark mode ── */
.xh-dark .xh-mdm .panel.panel-default { background:var(--xh-white) !important; border-color:var(--xh-border) !important; }
.xh-dark .xh-mdm .panel .panel-body { background:var(--xh-white) !important; }
.xh-dark .xh-mdm .form-control { background:var(--xh-s1) !important; color:var(--xh-text) !important; border-color:var(--xh-border) !important; }
.xh-dark .xh-mdm .form-control:focus { background:var(--xh-white) !important; }
.xh-dark .xh-mdm table.dataTable tbody td { background:var(--xh-white) !important; }
.xh-dark .xh-mdm-dash-card { background:var(--xh-white) !important; }


/* ═══════════════════════════════════════════════════════════════
   KIOSK PREMIUM VIEW — New Design System (scoped under .xh-ksk)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base wrapper — participa en la cadena flex para tener altura definida ── */
.xh-ksk { font-family:'Plus Jakarta Sans',sans-serif; color:var(--xh-text); display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

/* ── Cuerpo principal scrollable (debajo del header) — excluye el header que también tiene .wrapper-md ── */
.xh-ksk > .wrapper-md:not(.b-b) { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

/* ── Page header — igual que .xh-page-hdr / .page-hdr del resto de vistas ── */
.xh-ksk > .bg-light.lter.b-b.wrapper-md { flex-shrink:0; }
.xh-ksk .bg-light.lter.b-b.wrapper-md { background:var(--xh-white) !important; border-bottom:1.5px solid var(--xh-border) !important; height:var(--xh-hdr-h) !important; padding:0 18px !important; margin-bottom:0 !important; display:flex !important; align-items:center !important; gap:10px !important; }
.xh-ksk .bg-light.lter.b-b.wrapper-md .row,
.xh-ksk .bg-light.lter.b-b.wrapper-md .col-sm-12 { display:contents !important; }
.xh-ksk .bg-light.lter.b-b.wrapper-md h1 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:19px !important; font-weight:800 !important; color:var(--xh-text) !important; margin:0 !important; line-height:1 !important; flex:1; }
.xh-ksk .bg-light.lter.b-b.wrapper-md i.fa.fa-2x { color:var(--xh-a) !important; font-size:20px !important; flex-shrink:0; margin:0 !important; }
.xh-ksk .bg-light.lter.b-b.wrapper-md .col-sm-8.pull-right { margin-left:auto !important; flex-shrink:0; }

/* ── Content wrapper ── */
.xh-ksk .wrapper-md { padding:20px 22px !important; }

/* ── Left profile panel (replaces panel-success) ── */
.xh-ksk .panel.panel-success { border:1.5px solid var(--xh-border) !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(0,57,111,.07) !important; overflow:hidden; background:var(--xh-white) !important; }
.xh-ksk .panel.panel-success > .panel-heading { background:var(--xh-b) !important; border:none !important; padding:10px 14px !important; display:flex !important; align-items:center !important; cursor:pointer; }
.xh-ksk .panel.panel-success > .panel-heading h3 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13px !important; font-weight:700 !important; color:#fff !important; margin:0 !important; }
.xh-ksk .panel.panel-success > .panel-heading .badge.bg-primary { background:rgba(255,255,255,.2) !important; color:#fff !important; font-size:10px !important; font-weight:700 !important; border-radius:8px !important; padding:2px 7px !important; }

/* ── Profile list ── */
.xh-ksk .list-group.alt { margin:0; padding:4px; }
.xh-ksk .list-group-item.myPanel2 { border:none !important; border-radius:8px !important; margin-bottom:2px !important; padding:8px 10px !important; cursor:pointer; transition:all .15s; background:transparent !important; }
.xh-ksk .list-group-item.myPanel2:hover { background:var(--xh-s1) !important; }
.xh-ksk .list-group-item.myPanel2.active,
.xh-ksk .list-group-item.myPanel2.active:hover { background:rgba(0,172,215,.08) !important; }
.xh-ksk .list-group-item .media { display:flex; align-items:center; gap:8px; }
.xh-ksk .list-group-item .media .thumb-sm { flex-shrink:0; }
.xh-ksk .list-group-item .media .thumb-sm img { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--xh-border); }
.xh-ksk .list-group-item .media .media-body { flex:1; min-width:0; }
.xh-ksk .list-group-item .media .media-body a { font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--xh-text); text-decoration:none; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xh-ksk .list-group-item .media .media-body .fa-star { color:var(--xh-amber) !important; }
.xh-ksk .list-group-item .media .pull-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.xh-ksk .list-group-item .media .fa-circle.text-success { color:var(--xh-green) !important; font-size:8px; }
.xh-ksk .list-group-item .media .fa-circle.text-muted { color:var(--xh-border) !important; font-size:8px; }
/* profile list btn-addon inline buttons */
.xh-ksk .list-group-item .btn-addon { height:26px !important; padding:0 8px !important; font-size:11px !important; border-radius:6px !important; }

/* ── Angular Material md-tabs (main and nested AFW tabs) ── */
.xh-ksk md-tabs-wrapper { background:var(--xh-white) !important; border-bottom:2px solid var(--xh-border) !important; box-shadow:none !important; }
.xh-ksk md-tabs-canvas { background:transparent !important; }
.xh-ksk md-tab-item { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:var(--xh-mid) !important; padding:9px 18px !important; text-transform:none !important; letter-spacing:0 !important; }
.xh-ksk md-tab-item._md-tab-active,
.xh-ksk md-tab-item.md-active { color:var(--xh-a) !important; }
.xh-ksk md-ink-bar { background:var(--xh-a) !important; height:2.5px !important; }
/* md-content: solo fondo — NO tocar overflow ni height (Angular Material usa position:absolute interno) */
.xh-ksk md-content { background:var(--xh-s1) !important; }
.xh-ksk md-content.md-padding { padding:18px !important; background:var(--xh-s1) !important; }

/* ── Generic panel (panel-default inside md-content) ── */
.xh-ksk .panel.panel-default { border:1.5px solid var(--xh-border) !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(0,57,111,.07) !important; overflow:hidden; background:var(--xh-white) !important; }
.xh-ksk .panel.panel-default .panel-heading { background:var(--xh-white) !important; border-bottom:1.5px solid var(--xh-border) !important; padding:10px 16px !important; display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
.xh-ksk .panel.panel-default .panel-body { background:var(--xh-white) !important; padding:18px !important; }
.xh-ksk .panel-body { background:var(--xh-white) !important; }

/* ── Panel info (HelpDesk collapsible sections in editDevice modal) ── */
.xh-ksk .panel.panel-info { border:1.5px solid var(--xh-border) !important; border-radius:8px !important; overflow:hidden !important; margin-bottom:6px !important; box-shadow:none !important; }
.xh-ksk .panel.panel-info > .panel-heading { background:var(--xh-s2) !important; border-bottom:1px solid var(--xh-border) !important; padding:8px 12px !important; cursor:pointer !important; display:flex !important; align-items:center !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; color:var(--xh-text) !important; transition:background .15s; }
.xh-ksk .panel.panel-info > .panel-heading:hover { background:var(--xh-border) !important; }
.xh-ksk .panel.panel-info > .panel-heading .badge.bg-danger { background:var(--xh-red) !important; color:#fff !important; font-size:9px !important; font-weight:700 !important; border-radius:8px !important; padding:2px 7px !important; }

/* ── editAPP options panel (panel-info inside modal) ── */
.xh-ksk .panel.panel-info > .panel-heading h3 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; color:var(--xh-mid) !important; margin:0 !important; }

/* ── Form elements ── */
.xh-ksk .form-control { height:34px !important; padding:0 11px !important; background:var(--xh-s1) !important; border:1.5px solid var(--xh-border) !important; border-radius:8px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13px !important; color:var(--xh-text) !important; box-shadow:none !important; transition:border-color .15s !important; }
.xh-ksk .form-control:focus { outline:none !important; border-color:var(--xh-a) !important; background:var(--xh-white) !important; box-shadow:none !important; }
.xh-ksk .form-control[disabled],
.xh-ksk .form-control[readonly] { background:var(--xh-s2) !important; color:var(--xh-dim) !important; }
.xh-ksk textarea.form-control { height:auto !important; padding:8px 11px !important; min-height:80px; resize:vertical; line-height:1.5; }
.xh-ksk label,
.xh-ksk .control-label { font-size:11.5px !important; font-weight:700 !important; color:var(--xh-mid) !important; margin-bottom:5px !important; }
.xh-ksk .form-group { margin-bottom:14px; }

/* ── ui-select (dropdown) ── */
.xh-ksk .ui-select-container .ui-select-match,
.xh-ksk .ui-select-container .btn-default { background:var(--xh-s1) !important; border:1.5px solid var(--xh-border) !important; border-radius:8px !important; height:34px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13px !important; color:var(--xh-text) !important; box-shadow:none !important; padding:0 11px !important; display:flex !important; align-items:center !important; }
.xh-ksk .ui-select-container.open .ui-select-match { border-color:var(--xh-a) !important; }
.xh-ksk .ui-select-choices { border:1.5px solid var(--xh-border) !important; border-radius:0 0 8px 8px !important; box-shadow:0 6px 20px rgba(0,57,111,.12) !important; }
.xh-ksk .ui-select-choices-row.active > a,
.xh-ksk .ui-select-choices-row > a:hover { background:var(--xh-s1) !important; color:var(--xh-text) !important; }

/* ── Buttons ── */
.xh-ksk .btn { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:700 !important; border-radius:8px !important; height:34px; padding:0 16px !important; display:inline-flex !important; align-items:center !important; gap:6px !important; transition:all .15s !important; cursor:pointer !important; white-space:nowrap !important; line-height:1 !important; border:none !important; }
.xh-ksk .btn i { font-size:12px !important; }
.xh-ksk .btn-primary,
.xh-ksk .btn-primary:focus { background:var(--xh-a) !important; color:#fff !important; border-color:var(--xh-a) !important; box-shadow:0 2px 8px rgba(0,172,215,.25) !important; }
.xh-ksk .btn-primary:hover { background:#009bc4 !important; }
.xh-ksk .btn-success,
.xh-ksk .btn-success:focus { background:var(--xh-green) !important; color:#fff !important; border-color:var(--xh-green) !important; }
.xh-ksk .btn-success:hover { opacity:.87; }
.xh-ksk .btn-danger,
.xh-ksk .btn-danger:focus { background:var(--xh-red) !important; color:#fff !important; border-color:var(--xh-red) !important; }
.xh-ksk .btn-danger:hover { opacity:.87; }
.xh-ksk .btn-default,
.xh-ksk .btn-default:focus { background:var(--xh-s2) !important; color:var(--xh-text) !important; border:1.5px solid var(--xh-border) !important; }
.xh-ksk .btn-default:hover { background:var(--xh-s1) !important; border-color:var(--xh-a) !important; color:var(--xh-b) !important; }
.xh-ksk .btn-dark,
.xh-ksk .btn-dark:focus { background:var(--xh-s2) !important; color:var(--xh-text) !important; border:1.5px solid var(--xh-border) !important; }
.xh-ksk .btn-dark:hover { background:var(--xh-s1) !important; border-color:var(--xh-a) !important; color:var(--xh-b) !important; }
.xh-ksk .btn-info,
.xh-ksk .btn-info:focus { background:var(--xh-a) !important; color:#fff !important; border-color:var(--xh-a) !important; }
.xh-ksk .btn-info:hover { background:#009bc4 !important; }
.xh-ksk .btn-warning,
.xh-ksk .btn-warning:focus { background:var(--xh-amber) !important; color:#fff !important; border-color:var(--xh-amber) !important; }
.xh-ksk .btn-sm { height:28px !important; font-size:11.5px !important; padding:0 12px !important; }
.xh-ksk .btn-xs { height:24px !important; font-size:11px !important; padding:0 9px !important; border-radius:6px !important; }
.xh-ksk .btn-lg { height:38px !important; font-size:13px !important; }
/* Round icon buttons (refresh, etc.) */
.xh-ksk .btn.btn-lg.btn-icon.btn-rounded { border-radius:50% !important; width:36px !important; height:36px !important; padding:0 !important; justify-content:center !important; }
/* btn-addon (two-segment compound buttons / HelpDesk filter buttons) */
.xh-ksk .btn-addon { border-radius:8px !important; }
.xh-ksk .btn-addon.btn-success { background:var(--xh-green) !important; color:#fff !important; }
.xh-ksk .btn-addon.btn-success.active,
.xh-ksk .btn-addon.btn-info.active,
.xh-ksk .btn-addon.active { background:var(--xh-a) !important; color:#fff !important; border-color:var(--xh-a) !important; }
/* btn-group */
.xh-ksk .btn-group > .btn { border-radius:8px !important; }
.xh-ksk .btn-group > .btn + .btn { margin-left:4px !important; }
.xh-ksk .btn-group > .btn:first-child:not(:last-child) { border-radius:8px 0 0 8px !important; }
.xh-ksk .btn-group > .btn:last-child:not(:first-child) { border-radius:0 8px 8px 0 !important; margin-left:-1px !important; }
/* Dropdown button (Send Command) */
.xh-ksk .dropdown-menu { border:1.5px solid var(--xh-border) !important; border-radius:8px !important; box-shadow:0 6px 20px rgba(0,57,111,.12) !important; padding:4px !important; }
.xh-ksk .dropdown-menu > li > a { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; color:var(--xh-text) !important; border-radius:6px !important; padding:6px 12px !important; }
.xh-ksk .dropdown-menu > li > a:hover { background:var(--xh-s1) !important; color:var(--xh-b) !important; }
.xh-ksk .dropdown-menu > li.divider { background:var(--xh-border) !important; margin:3px 6px !important; }

/* ── DataTables (TBLPACKAGES, TBLWIFIS, TBLDEVICES, TBLHISTORY, TBLINFOAPP, tableAwfApps, tableappsInfo, KSKInfoDevice) ── */
.xh-ksk table.dataTable thead th,
.xh-ksk table.dataTable thead td { background:var(--xh-s1) !important; color:var(--xh-mid) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:9px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.6px !important; padding:9px 12px !important; border-top:1px solid var(--xh-border) !important; border-bottom:1px solid var(--xh-border) !important; border-left:none !important; border-right:none !important; }
.xh-ksk table.dataTable thead th.bg-gray { background:var(--xh-s1) !important; color:var(--xh-mid) !important; }
.xh-ksk table.dataTable thead tr th:first-child { border-left:1px solid var(--xh-border) !important; border-radius:6px 0 0 6px !important; padding-left:10px !important; }
.xh-ksk table.dataTable thead tr th:last-child { border-right:1px solid var(--xh-border) !important; border-radius:0 6px 6px 0 !important; }
.xh-ksk table.dataTable { border-collapse:separate !important; border-spacing:0 3px !important; }
.xh-ksk table.dataTable tbody tr { cursor:pointer; transition:all .15s; }
.xh-ksk table.dataTable tbody td { background:var(--xh-white) !important; color:var(--xh-text) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; padding:9px 12px !important; border-top:1.5px solid var(--xh-border) !important; border-bottom:1.5px solid var(--xh-border) !important; border-left:none !important; border-right:none !important; vertical-align:middle !important; }
.xh-ksk table.dataTable tbody tr td:first-child { border-left:1.5px solid var(--xh-border) !important; border-radius:8px 0 0 8px !important; padding-left:10px !important; }
.xh-ksk table.dataTable tbody tr td:last-child { border-right:1.5px solid var(--xh-border) !important; border-radius:0 8px 8px 0 !important; }
.xh-ksk table.dataTable tbody tr:hover td { border-color:var(--xh-a) !important; }
.xh-ksk .table-responsive { overflow-x:auto; border-radius:8px; }
/* DataTables search/info/paginate controls */
.xh-ksk .dataTables_wrapper .dataTables_filter label { font-size:12.5px !important; font-weight:600 !important; color:var(--xh-mid) !important; }
.xh-ksk .dataTables_wrapper .dataTables_filter input { height:28px; padding:0 10px; background:var(--xh-s1) !important; border:1.5px solid var(--xh-border) !important; border-radius:6px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12px; color:var(--xh-text) !important; outline:none; transition:border-color .15s; box-shadow:none !important; }
.xh-ksk .dataTables_wrapper .dataTables_filter input:focus { border-color:var(--xh-a) !important; background:var(--xh-white) !important; }
/* AFW apps table (tableAwfApps — ng-repeat, no DataTables) */
.xh-ksk table.table { border-collapse:separate !important; border-spacing:0 3px !important; }
.xh-ksk table.table tbody tr td { background:var(--xh-white) !important; color:var(--xh-text) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; padding:9px 12px !important; border-top:1.5px solid var(--xh-border) !important; border-bottom:1.5px solid var(--xh-border) !important; vertical-align:middle !important; }
.xh-ksk table.table thead th.bg-gray { background:var(--xh-s1) !important; color:var(--xh-mid) !important; font-size:9px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.6px !important; }
.xh-ksk table.table.hover tbody tr:hover td { border-color:var(--xh-a) !important; }

/* ── i-switch toggles ── */
.xh-ksk .i-switch input[type=checkbox]:checked + i,
.xh-ksk .i-switch.bg-info input[type=checkbox]:checked + i { background:var(--xh-a) !important; }
.xh-ksk .i-switch.bg-danger input[type=checkbox]:checked + i { background:var(--xh-red) !important; }

/* ── i-checks (configCommands modal) ── */
.xh-ksk .i-checks input[type=checkbox]:checked + i { border-color:var(--xh-a) !important; }
.xh-ksk .i-checks input[type=checkbox]:checked + i:before { background:var(--xh-a) !important; }

/* ── Badge ── */
.xh-ksk .badge.bg-primary { background:var(--xh-a) !important; color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif; font-size:9px; font-weight:700; padding:2px 8px; border-radius:10px; }
.xh-ksk .badge.bg-success { background:var(--xh-green) !important; color:#fff !important; }
.xh-ksk .badge.bg-danger { background:var(--xh-red) !important; color:#fff !important; font-size:9px; font-weight:700; }

/* ── Progress bar ── */
.xh-ksk .progress { border-radius:6px !important; height:18px !important; background:var(--xh-s2) !important; overflow:hidden; }
.xh-ksk .progress-bar { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:10px !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.xh-ksk .progress-bar.progress-bar-success { background:var(--xh-green) !important; }
.xh-ksk .progress-bar.progress-bar-danger { background:var(--xh-red) !important; }

/* ── uib-tabset inside modals (editDevice, configQRTemplate) ── */
.xh-ksk .tab-container { background:transparent !important; border:none !important; }
.xh-ksk .nav-tabs { border-bottom:2px solid var(--xh-border) !important; margin-bottom:16px !important; display:flex !important; gap:0 !important; background:transparent !important; padding:0 !important; box-shadow:none !important; }
.xh-ksk .nav-tabs > li { float:none !important; display:flex !important; }
.xh-ksk .nav-tabs > li > a,
.xh-ksk .nav-tabs > li > a > uib-tab-heading { padding:8px 14px !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12px !important; font-weight:600 !important; color:var(--xh-mid) !important; cursor:pointer !important; border:none !important; border-bottom:2.5px solid transparent !important; margin-bottom:-2px !important; display:flex !important; align-items:center !important; gap:5px !important; transition:all .15s !important; background:transparent !important; border-radius:0 !important; }
.xh-ksk .nav-tabs > li > a:hover { color:var(--xh-text) !important; background:transparent !important; }
.xh-ksk .nav-tabs > li.active > a,
.xh-ksk .nav-tabs > li.active > a:hover,
.xh-ksk .nav-tabs > li.active > a:focus { color:var(--xh-a) !important; border-bottom-color:var(--xh-a) !important; background:transparent !important; border-top:none !important; border-left:none !important; border-right:none !important; }
.xh-ksk .tab-content > .tab-pane { padding:0 !important; }

/* ── Modal (via windowClass='xh-ksk') ── */
.xh-ksk .modal-content { border-radius:12px !important; border:1.5px solid var(--xh-border) !important; box-shadow:0 16px 48px rgba(0,57,111,.18) !important; overflow:hidden; font-family:'Plus Jakarta Sans',sans-serif; }
/* Modal header: dark blue */
.xh-ksk .modal-header.bg-dark { background:var(--xh-b) !important; padding:0 18px !important; min-height:44px; display:flex !important; align-items:center !important; border-radius:0 !important; }
/* Sustituir layout Bootstrap .row/.col por flex para evitar wrapping del título */
.xh-ksk .modal-header.bg-dark .row { display:flex !important; align-items:center !important; margin:0 !important; width:100% !important; flex-wrap:nowrap !important; }
.xh-ksk .modal-header.bg-dark .row > [class*="col-"] { float:none !important; padding:0 !important; width:auto !important; }
.xh-ksk .modal-header.bg-dark .row > .col-sm-1 { flex-shrink:0 !important; padding-right:12px !important; }
.xh-ksk .modal-header.bg-dark .row > .col-sm-8 { flex:1 !important; min-width:0 !important; }
.xh-ksk .modal-header.bg-dark .clear { display:contents; }
.xh-ksk .modal-header.bg-dark h1,
.xh-ksk .modal-header.bg-dark h1.m-n,
.xh-ksk .modal-header.bg-dark h1.m-n.font-bold.h4 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:13.5px !important; font-weight:700 !important; color:#fff !important; margin:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.xh-ksk .modal-header.bg-dark i.fa { color:rgba(255,255,255,.75) !important; }
.xh-ksk .modal-header.bg-dark .fa-times-circle { color:rgba(255,255,255,.6) !important; font-size:18px !important; transition:color .15s; }
.xh-ksk .modal-header.bg-dark .fa-times-circle:hover { color:#fff !important; }
/* Simple modal header (myModalContent) */
.xh-ksk .modal-header { background:var(--xh-s1) !important; border-bottom:1.5px solid var(--xh-border) !important; padding:12px 18px !important; }
.xh-ksk .modal-header .modal-title { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:14px !important; font-weight:700 !important; color:var(--xh-text) !important; }
/* Modal body */
.xh-ksk .modal-body { background:var(--xh-white) !important; padding:18px !important; }
.xh-ksk .modal-body.bg-white { background:var(--xh-white) !important; }
/* Modal footer */
.xh-ksk .modal-footer { background:var(--xh-s1) !important; border-top:1.5px solid var(--xh-border) !important; padding:10px 16px !important; display:flex !important; align-items:center !important; gap:8px !important; justify-content:flex-end !important; }
.xh-ksk .modal-footer .pull-left { margin-right:auto !important; }
/* md-content inside modal */
.xh-ksk .modal-body md-content,
.xh-ksk md-content.md-padding { background:var(--xh-white) !important; padding:18px !important; }

/* ── Section titles (AFW tab) ── */
.xh-ksk h1.m-n.font-bold.h4 { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:14px !important; font-weight:700 !important; color:var(--xh-text) !important; margin:0 0 4px !important; }
.xh-ksk .m-n.font-normal.text-black { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12px !important; color:var(--xh-mid) !important; margin:0 !important; }
.xh-ksk h3.modal-title { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:14px !important; font-weight:700 !important; color:var(--xh-text) !important; margin:0 0 4px !important; }
.xh-ksk h4.m-t-none.text-success { font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; font-weight:600 !important; color:var(--xh-green) !important; }

/* ── HelpDesk viewer (ACE editor container) ── */
.xh-ksk [ui-ace] { border:1.5px solid var(--xh-border) !important; border-radius:8px !important; overflow:hidden !important; }
.xh-ksk input[type=text][ng-model="filterFree"] { border:1.5px solid var(--xh-border) !important; border-radius:6px !important; background:var(--xh-s1) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:12.5px !important; color:var(--xh-text) !important; padding:0 8px !important; }

/* ── myModalContent simple modal overrides ── */
.xh-ksk .modal-footer .btn-primary.btn-sm { height:30px !important; }
.xh-ksk .modal-footer .btn-warning.btn-sm { background:var(--xh-s2) !important; color:var(--xh-text) !important; border:1.5px solid var(--xh-border) !important; }
.xh-ksk .modal-footer .btn-warning.btn-sm:hover { border-color:var(--xh-amber) !important; color:var(--xh-amber) !important; }

/* ── Profile toggle button (activate/deactivate) ── */
.xh-ksk .xh-ksk-toggle { background:none; border:none; padding:2px 4px; cursor:pointer; font-size:21px; line-height:1; display:inline-flex; align-items:center; transition:opacity .15s, transform .15s; }
.xh-ksk .xh-ksk-toggle--on  { color:var(--xh-green); }
.xh-ksk .xh-ksk-toggle--off { color:var(--xh-mid); }
.xh-ksk .xh-ksk-toggle:hover { opacity:.75; transform:scale(1.12); }

/* ── Dark mode ── */
.xh-dark .xh-ksk .panel.panel-success { background:var(--xh-white) !important; border-color:var(--xh-border) !important; }
.xh-dark .xh-ksk .panel.panel-default .panel-body { background:var(--xh-white) !important; }
.xh-dark .xh-ksk .form-control { background:var(--xh-s1) !important; color:var(--xh-text) !important; border-color:var(--xh-border) !important; }
.xh-dark .xh-ksk table.dataTable tbody td { background:var(--xh-white) !important; }
.xh-dark .xh-ksk .modal-content { background:var(--xh-white) !important; }