/* ============================
   MASTER.CSS - NinjaOne Command Center
   Estilo mongolrulez - archivo unico
   ============================ */

/* ============================
   VARIABLES CSS
   ============================ */
:root {
  --bg:      #0d1117;
  --bg2:     #161b22;
  --bg3:     #21262d;
  --border:  #30363d;
  --text:    #e6edf3;
  --text2:   #8b949e;
  --text3:   #7d8590;
  --accent:  #58a6ff;
  --green:   #3fb950;
  --yellow:  #d29922;
  --red:     #f85149;
  --orange:  #db6d28;
  --purple:  #bc8cff;
  --cyan:    #22d3ee;

  /* Versiones RGB (para rgba(var(--x-rgb), alpha)) */
  --accent-rgb: 88,166,255;  --green-rgb: 63,185,80;  --red-rgb: 248,81,73;  --yellow-rgb: 210,153,34;
  --orange-rgb: 219,109,40;  --purple-rgb: 188,140,255;  --border-rgb: 48,54,61;  --text3-rgb: 110,118,129;
  --sombra-rgb: 0,0,0;  --blanco-rgb: 255,255,255;

  /* Menu en L (sidebar + topbar): en el tema oscuro van con el fondo; en el claro, en azul marino NinjaOne */
  --sidebar-bg: var(--bg2);  --sidebar-text: var(--text2);  --sidebar-text-activo: var(--text);
  --sidebar-activo-bg: rgba(var(--accent-rgb), 0.12);  --sidebar-borde: var(--border);
  --topbar-bg: var(--bg2);  --topbar-text: var(--text);  --topbar-borde: var(--border);
  --fuente: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --sidebar-w: 260px;
  --topbar-h:  60px;
  --log-h-collapsed: 40px;
  --log-h-expanded:  300px;
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 0.2s ease;
}

/* ============ TEMA CLARO "NinjaOne" (colores de marca: navy #09344f, acento #04ff88) ============ */
html[data-theme="claro"] {
  --bg:      #f3f5f8;
  --bg2:     #ffffff;
  --bg3:     #eaeef3;
  --border:  #d5d8dc;
  --text:    #1f2124;
  --text2:   #5b6571;
  --text3:   #7a8491;
  --accent:  #1a6fd4;
  --green:   #1a7f37;
  --yellow:  #9a6700;
  --red:     #cf222e;
  --orange:  #bc4c00;
  --purple:  #6639ba;
  --cyan:    #0e7490;
  --accent-rgb: 26,111,212;  --green-rgb: 26,127,55;  --red-rgb: 207,34,46;  --yellow-rgb: 154,103,0;
  --orange-rgb: 188,76,0;  --purple-rgb: 102,57,186;  --border-rgb: 213,216,220;  --text3-rgb: 122,132,145;
  --sombra-rgb: 9,52,79;  --blanco-rgb: 255,255,255;
  --sidebar-bg: #09344f;  --sidebar-text: #b9c7d3;  --sidebar-text-activo: #ffffff;
  --sidebar-activo-bg: rgba(255,255,255,0.10);  --sidebar-borde: #0d2d44;
  --topbar-bg: #0d2d44;  --topbar-text: #ffffff;  --topbar-borde: #0d2d44;
  --ninja-verde: #04ff88;
}

/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
code { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ============ LAYOUT ============ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-borde);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  z-index: 100;
}

.layout {
  display: flex;
  margin-top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h) - var(--log-h-collapsed));
  overflow: hidden;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  min-width: 0;
}

/* ============ TOPBAR ============ */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.logo-icon {
  width: 34px; height: 34px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.logo-text {
  font-weight: 700;
  font-size: 17px;
  color: var(--topbar-text);
}

.topbar-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============ SIDEBAR ============ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-borde);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.sidebar-brand {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-subtitle {
  font-size: 12px;
  color: var(--sidebar-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.nav-section {
  padding: 16px 0 6px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--sidebar-text);
  opacity: 0.7;
  letter-spacing: 1.5px;
  padding: 0 24px 8px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--sidebar-text);
  border-radius: 8px;
  margin: 2px 12px;
  transition: all var(--transition);
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  border-left: none;
}

.nav-item:hover {
  background: var(--bg3);
  color: var(--text);
}

.nav-item.active {
  background: var(--sidebar-activo-bg);
  color: var(--sidebar-text-activo);
  box-shadow: inset 3px 0 0 var(--ninja-verde, var(--accent));
}

.nav-icon { font-size: 12px; opacity: 0.8; }

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* ============ SECTIONS ============ */
.section { display: none; animation: fadeIn 0.15s ease; }
.section.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.section-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.section-desc {
  color: var(--text3);
  font-size: 14px;
}

/* ============ BADGES ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.badge-live {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.3);
}
.badge-live.error {
  background: rgba(var(--red-rgb), 0.15);
  color: var(--red);
  border-color: rgba(var(--red-rgb), 0.3);
}

.badge-token {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}

.badge-count {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 11px;
}

/* Method badges */
.badge-method {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
  letter-spacing: 0.05em;
}
.method-GET    { background: rgba(var(--green-rgb), 0.15);  color: var(--green);  }
.method-POST   { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }
.method-PUT    { background: rgba(var(--orange-rgb), 0.15); color: var(--orange); }
.method-PATCH  { background: rgba(var(--purple-rgb), 0.15);color: var(--purple); }
.method-DELETE { background: rgba(var(--red-rgb), 0.15);  color: var(--red);   }

.badge-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.status-2xx { background: rgba(var(--green-rgb), .15);  color: var(--green); }
.status-4xx { background: rgba(var(--yellow-rgb), .15); color: var(--yellow);}
.status-5xx { background: rgba(var(--red-rgb), .15);  color: var(--red);   }

/* ============ CARDS ============ */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  transition: border-color var(--transition);
}

.card:hover { border-color: rgba(var(--accent-rgb), 0.25); }

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============ INPUTS / FORMS ============ */
.input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--transition);
}
.input:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text3); }

.input-select { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  padding: 9px 20px;
}
.btn-primary:hover { background: #79b8ff; }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 7px 14px;
}
.btn-outline:hover { background: rgba(var(--accent-rgb), 0.1); }

.btn-ghost {
  background: transparent;
  color: var(--text2);
  padding: 7px 12px;
}
.btn-ghost:hover { color: var(--text); background: var(--bg3); }

.btn-sm  { font-size: 12px; padding: 5px 12px; }
.btn-xs  { font-size: 11px; padding: 3px 9px; }

.btn-close {
  background: none; border: none; color: var(--text3);
  font-size: 20px; cursor: pointer; line-height: 1;
  padding: 4px 8px;
}
.btn-close:hover { color: var(--text); }

/* ============ LIBRARY ============ */
.library-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.lib-result-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 12px;
}

.search-wrap { flex: 1; min-width: 200px; }
.input-search { width: 100%; padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%238b949e'%3E%3Cpath d='M9.5 9.5l3 3m-5.5-1a5 5 0 100-10 5 5 0 000 10z' stroke='%238b949e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; }

.filter-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.toggle-label {
  display: flex; align-items: center; gap: 6px;
  color: var(--text2); cursor: pointer; font-size: 13px;
  white-space: nowrap;
}
.toggle-label input[type=checkbox] { cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; }

/* Outer wrapper: cat sidebar + content */
.library-outer {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* Category sidebar */
.lib-cat-sidebar {
  width: 186px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding-right: 0;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

.lib-cat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

/* Resumen total de endpoints sobre las categorias */
.lib-cat-summary {
  padding: 4px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.lib-cat-total-text {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.03em;
}

/* Contenedor scrollable para muchas categorias */
#lib-cat-nav {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 8px;
}

.lib-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  transition: all var(--transition);
  margin-bottom: 1px;
  gap: 4px;
}
.lib-cat-item:hover { background: var(--bg3); color: var(--text); }
.lib-cat-item.active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); font-weight: 600; }

/* Grupos grandes (20+ endpoints): resaltar levemente */
.lib-cat-item.lib-cat-large { font-weight: 500; }
.lib-cat-item.lib-cat-large .lib-cat-count { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); }

/* Grupos medianos (10-19) */
.lib-cat-item.lib-cat-medium .lib-cat-count { color: var(--text2); }

.lib-cat-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-cat-count {
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}
.lib-cat-item.active .lib-cat-count { color: var(--accent); background: rgba(var(--accent-rgb), 0.2); }

/* Main layout (list + detail) */
.library-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  min-width: 0;
}
.library-layout.has-detail {
  grid-template-columns: 1fr 440px;
}

.library-grid { min-height: 200px; }

/* Endpoint group */
.ep-group { margin-bottom: 24px; }
.ep-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text3);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Endpoint cards */
.ep-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg2);
}
.ep-card:hover { background: var(--bg3); border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.15); }
.ep-card.active { background: rgba(var(--accent-rgb), 0.08); border-color: var(--accent); }

.ep-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ep-card-path {
  font-family: 'JetBrains Mono', 'Cascadia Code', monospace; font-size: 13px; color: var(--text);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ep-card-desc {
  font-size: 12px; color: var(--text3); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ep-card-write {
  font-size: 10px; font-weight: 700;
  color: var(--orange); background: rgba(var(--orange-rgb), 0.1);
  border: 1px solid rgba(var(--orange-rgb), 0.3);
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0; letter-spacing: 0.04em;
}
.ep-card-read {
  font-size: 10px; font-weight: 600;
  color: var(--text3); background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0; letter-spacing: 0.04em;
}

/* Endpoint detail panel */
.endpoint-detail {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  position: sticky;
  top: 0;
}

.detail-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  flex-wrap: wrap;
}

.detail-path { font-size: 13px; color: var(--text); flex: 1; word-break: break-all; font-family: 'JetBrains Mono', monospace; }

.detail-body { padding: 20px; }

/* Meta row */
.detail-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.scope-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.scope-monitoring { background: rgba(var(--accent-rgb), 0.12);  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3); }
.scope-management { background: rgba(var(--orange-rgb), 0.12);  color: var(--orange); border: 1px solid rgba(var(--orange-rgb), 0.3); }
.scope-control    { background: rgba(var(--red-rgb), 0.12);   color: var(--red);    border: 1px solid rgba(var(--red-rgb), 0.3); }
.scope-public     { background: rgba(var(--green-rgb), 0.12);   color: var(--green);  border: 1px solid rgba(var(--green-rgb), 0.3); }

.rw-badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.rw-write { background: rgba(var(--orange-rgb), 0.1);  color: var(--orange); border: 1px solid rgba(var(--orange-rgb), 0.3); }
.rw-read  { background: rgba(var(--green-rgb), 0.1);   color: var(--green);  border: 1px solid rgba(var(--green-rgb), 0.3); }
.meta-group { font-size: 12px; color: var(--text3); margin-left: auto; }

/* Description block */
.detail-desc-block { margin-bottom: 18px; }
.detail-desc-text { color: var(--text2); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.detail-example-hint {
  background: rgba(var(--accent-rgb), 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 13px; color: var(--text2); line-height: 1.6;
}
.hint-label { font-weight: 700; color: var(--accent); margin-right: 6px; }

.detail-body h4 {
  font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase;
  letter-spacing: 0.08em; margin: 20px 0 10px;
}

.params-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.params-table th { text-align: left; padding: 8px 10px; color: var(--text3); border-bottom: 2px solid var(--border); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.params-table td { padding: 9px 10px; border-bottom: 1px solid rgba(var(--border-rgb), 0.5); vertical-align: top; }
.params-table tr:last-child td { border-bottom: none; }

.param-req {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--red); background: rgba(var(--red-rgb), 0.1);
  border: 1px solid rgba(var(--red-rgb), 0.3);
  padding: 2px 7px; border-radius: 4px;
}
.param-opt {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--text3); background: var(--bg3);
  border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 4px;
}
.param-type { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--purple); }

.code-block {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; font-size: 12px; font-family: 'JetBrains Mono', monospace;
  color: var(--text2); white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}

.detail-actions { margin-top: 24px; }

/* ============ PLAYGROUND ============ */

/* Selector de endpoint */
.pg-selector-card { margin-bottom: 0; }
.pg-ep-select {
  width: 100%;
  font-size: 14px;
}
.pg-ep-select optgroup {
  color: var(--text3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pg-ep-select option {
  color: var(--text);
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  padding: 6px 0;
}

/* Ayuda contextual */
.pg-help-panel {
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 13px;
  margin-bottom: 0;
}
.help-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 14px;
}
.help-path { font-size: 13px; color: var(--text); }
.help-desc { color: var(--text2); line-height: 1.6; margin-bottom: 10px; font-size: 14px; }
.help-warnings {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.help-warnings li {
  color: var(--yellow);
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(var(--yellow-rgb), 0.08);
  border-radius: 4px;
  border-left: 3px solid var(--yellow);
}
.help-response-hint {
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 6px;
}
.help-hint-label { color: var(--text3); margin-right: 6px; }

/* Parametros inteligentes */
.smart-params-section { margin-top: 14px; }
.smart-params-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smart-params-group { margin-bottom: 10px; }
.smart-params-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.smart-param-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
}
.smart-param-row:last-child { border-bottom: none; }
.smart-param-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text2);
  flex-wrap: wrap;
}
.param-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.param-type-badge.path  { background: rgba(var(--purple-rgb), 0.15); color: var(--purple); }
.param-type-badge.query { background: rgba(var(--green-rgb), 0.12); color: var(--green); }
.param-type-hint {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
}
.smart-param-select, .smart-param-input {
  width: 100%;
  font-size: 13px;
  padding: 7px 10px;
}
.smart-param-path .smart-param-select,
.smart-param-path .smart-param-input {
  border-color: rgba(var(--purple-rgb), 0.3);
}
.smart-param-path .smart-param-select:focus,
.smart-param-path .smart-param-input:focus {
  border-color: var(--purple);
}

/* cURL viewer */
.curl-viewer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.curl-copy-bar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.curl-viewer code {
  display: block;
  padding: 14px;
  color: var(--text2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* Tab Info */
.info-panel {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
}
.info-line { margin-bottom: 10px; }
.info-line strong { color: var(--text); }
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 12px;
}
.info-table th {
  text-align: left;
  padding: 7px 10px;
  color: var(--text3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.info-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
  vertical-align: top;
}
.info-hint {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg3);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text3);
}
.info-hint strong { color: var(--text2); }

/* Recetas builtin */
.recipe-builtin {
  background: rgba(var(--accent-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.recipe-builtin .recipe-name { color: var(--accent); }

/* Layout Playground */
.playground-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}

.playground-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.request-row {
  display: flex; gap: 10px; margin-bottom: 14px; align-items: stretch;
}

.method-select { width: 110px; flex-shrink: 0; }

.autocomplete-wrap { flex: 1; position: relative; min-width: 0; }
.input-path { width: 100%; height: 100%; font-size: 15px; padding: 10px 14px; font-family: 'JetBrains Mono', monospace; }

.autocomplete-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); z-index: 200;
  max-height: 240px; overflow-y: auto;
}
.autocomplete-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; font-size: 13px;
}
.autocomplete-item:hover { background: var(--bg2); }
.autocomplete-item code { color: var(--text); flex: 1; }

.btn-send {
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.btn-send:hover { background: #4d96ef; }

.params-builder, .body-builder { margin-top: 10px; }
.params-builder-header, .body-builder-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}

.params-list { display: flex; flex-direction: column; gap: 6px; }
.param-row { display: flex; gap: 8px; align-items: center; }
.param-row .input { flex: 1; padding: 7px 10px; font-size: 13px; }
.param-row .btn-remove { color: var(--red); padding: 5px 10px; }

.input-body {
  width: 100%; min-height: 100px; max-height: 220px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; resize: vertical;
}

.response-tabs {
  display: flex; gap: 2px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.tab-btn {
  background: none; border: none; color: var(--text3); cursor: pointer;
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.response-panel { display: none; }
.response-panel.active { display: block; }

.response-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.meta-text { font-size: 12px; color: var(--text3); }

.json-viewer {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  max-height: 360px; overflow-y: auto;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  color: var(--text2);
}

/* JSON Syntax Highlighting */
.json-string  { color: var(--green); }
.json-number  { color: var(--orange); }
.json-key     { color: #79c0ff; }
.json-bool    { color: var(--purple); }
.json-null    { color: var(--red); }

.pg-sidebar-card { padding: 16px; }
.history-list, .recipes-list { max-height: 220px; overflow-y: auto; }

.history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.history-item:hover { background: var(--bg3); }
.history-item .h-path { color: var(--text2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .h-status { font-size: 11px; }

.recipe-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  margin-bottom: 6px; font-size: 13px;
}
.recipe-name { flex: 1; color: var(--text); }
.recipe-steps { font-size: 11px; color: var(--text3); }

/* ============ DASHBOARD ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.kpi-card {
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}
.kpi-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--sombra-rgb), 0.3);
}
.kpi-card.kpi-green { border-color: rgba(var(--green-rgb), 0.35); }
.kpi-card.kpi-green:hover { border-color: var(--green); }
.kpi-card.kpi-red   { border-color: rgba(var(--red-rgb), 0.35); }
.kpi-card.kpi-red:hover   { border-color: var(--red); }
.kpi-card.kpi-yellow{ border-color: rgba(var(--yellow-rgb), 0.35); }
.kpi-card.kpi-yellow:hover { border-color: var(--yellow); }

.kpi-value {
  font-size: 44px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.kpi-green .kpi-value { color: var(--green); }
.kpi-red   .kpi-value { color: var(--red); }
.kpi-yellow .kpi-value{ color: var(--yellow); }
.kpi-label {
  font-size: 11px;
  color: var(--text2);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.dash-card { padding: 0; overflow: hidden; }
.dash-card .card-title { padding: 16px 20px; border-bottom: 1px solid var(--border); margin-bottom: 0; }

/* ============ TABLES ============ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--text3);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(var(--accent-rgb), 0.05); }
.data-table tr.clickable { cursor: pointer; }

.row-expand { background: var(--bg3) !important; }
.row-expand td { padding: 0; }
.devices-subtable { padding: 10px 28px; }

.severity-NONE     { color: var(--text3); }
.severity-WARNING  { color: var(--yellow); }
.severity-MINOR    { color: var(--orange); }
.severity-MAJOR    { color: var(--red); }
.severity-CRITICAL { color: var(--red); font-weight: 700; }

/* ============ LOADING ============ */
.loading-state {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 48px; color: var(--text3); font-size: 14px;
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 40px; color: var(--text3); font-size: 14px;
}

/* ============ ACTIVITY LOG BAR ============ */
.activity-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 90;
  height: var(--log-h-collapsed);
  transition: height 0.3s ease;
  overflow: hidden;
}
.activity-bar.expanded { height: var(--log-h-expanded); }

.activity-bar-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--log-h-collapsed);
  padding: 0 20px;
  cursor: pointer;
  user-select: none;
}
.activity-bar-header:hover { background: var(--bg3); }

.activity-bar-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text2);
}

.activity-last {
  font-size: 12px; color: var(--text3); max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.activity-bar-actions { display: flex; align-items: center; gap: 10px; }
.activity-toggle-icon { font-size: 11px; color: var(--text3); transition: transform var(--transition); }
.activity-bar.expanded .activity-toggle-icon { transform: rotate(180deg); }

.activity-log-expanded {
  height: calc(var(--log-h-expanded) - var(--log-h-collapsed));
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.log-table th {
  text-align: left; padding: 8px 12px; color: var(--text3);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg2); z-index: 1;
  white-space: nowrap;
}
.log-table td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.log-table tr:hover td { background: rgba(var(--accent-rgb), 0.04); }

.log-curl-btn {
  background: none; border: 1px solid var(--border); color: var(--text3);
  border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.log-curl-btn:hover { border-color: var(--accent); color: var(--accent); }

.log-main-row:hover td { background: rgba(var(--accent-rgb), 0.06); }
.log-curl-row td { padding: 0; }
.log-curl-expanded {
  background: var(--bg3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(var(--sombra-rgb), 0.65);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 90%; max-width: 540px;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(var(--sombra-rgb), 0.5);
}

.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { flex: 1; font-size: 17px; font-weight: 700; }

.modal-body { padding: 24px; font-size: 14px; color: var(--text2); line-height: 1.65; }
.modal-body .input { width: 100%; margin-bottom: 12px; }
.modal-body label { display: block; font-size: 12px; color: var(--text3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}

/* Recipe editor */
.recipe-step-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 8px;
  margin-bottom: 8px; align-items: center;
}
.recipe-steps-list { margin-bottom: 10px; }

/* ============ TOAST ============ */
.toast-container {
  position: fixed; top: 68px; right: 20px;
  z-index: 400; display: flex; flex-direction: column; gap: 8px;
}

.toast {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 13px; color: var(--text);
  box-shadow: 0 6px 20px rgba(var(--sombra-rgb), 0.4);
  min-width: 240px; max-width: 360px;
  animation: toastIn 0.2s ease;
  display: flex; align-items: center; gap: 10px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast.warning { border-left: 3px solid var(--yellow); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============ UTILITIES ============ */
.hidden { display: none !important; }
.text-muted { color: var(--text3); }
.text-sm { font-size: 12px; }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-yellow{ color: var(--yellow); }

/* ============ DASHBOARD TABS ============ */

/* Tab nav */
.dash-tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tab-nav::-webkit-scrollbar { display: none; }

.dash-tab-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.dash-tab-btn:hover { color: var(--text); }
.dash-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Tab panels */
.dash-tab-panel { display: none; }
.dash-tab-panel.active { display: block; animation: fadeIn 0.15s ease; }

/* Overview grid */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
}
@media (max-width: 1200px) {
  .overview-grid { grid-template-columns: 1fr; }
}

/* Bar chart */
.bar-chart-wrap { padding: 10px 20px 20px; }
.bar-chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.bar-chart-label {
  width: 120px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text2);
  text-align: right;
}
.bar-chart-bar-wrap {
  flex: 1;
  background: var(--bg3);
  border-radius: 4px;
  height: 16px;
  overflow: hidden;
}
.bar-chart-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  color: var(--bg);
  font-weight: 700;
}
/* colores de barra definidos en la seccion de mejoras visuales al final del archivo */

/* Fleet status */
.fleet-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 10px 20px 20px;
}
.fleet-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg3);
  border-radius: var(--radius);
}
.fleet-stat-value { font-size: 28px; font-weight: 800; }
.fleet-stat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; margin-top: 6px; letter-spacing: 1px; }

/* Devices layout */
.devices-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.devices-main { flex: 1; min-width: 0; }
.devices-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Device detail panel */
.device-detail-panel {
  width: 420px;
  min-width: 380px;
  max-width: 480px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}

.device-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  gap: 10px;
}
.device-detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.device-detail-title strong {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.online-dot.dot-online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.online-dot.dot-offline { background: var(--red); }

.device-detail-meta {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-meta-item { display: flex; flex-direction: column; }
.dev-meta-item span:first-child { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.dev-meta-item span:last-child { color: var(--text2); font-size: 12px; }

.device-detail-actions {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.device-sub-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dev-sub-tab-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all var(--transition);
}
.dev-sub-tab-btn:hover { color: var(--text); }
.dev-sub-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.device-sub-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 13px;
}

/* Key-value table in device detail */
.kv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kv-table td { padding: 6px 8px; border-bottom: 1px solid rgba(var(--border-rgb), 0.4); vertical-align: top; }
.kv-table td:first-child { color: var(--text3); white-space: nowrap; width: 40%; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.kv-table td:last-child { color: var(--text2); word-break: break-word; }
.kv-table tr:last-child td { border-bottom: none; }

/* Queries grid */
.queries-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 0 20px 20px;
}
.query-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  padding: 16px 18px;
  text-align: left;
  transition: all var(--transition);
  font-size: 13px;
  position: relative;
}
.query-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.07); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2); }
.query-btn-name { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.query-btn-path { font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }

/* Two column grid */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 1100px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* Ticket form */
.ticket-form label {
  display: block;
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  font-weight: 600;
}

/* Pagination bar */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--border);
}

/* Activity timeline */
.activity-timeline { list-style: none; padding: 0; margin: 0; }
.activity-timeline-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
  font-size: 13px;
}
.activity-timeline-item:last-child { border-bottom: none; }
.act-time { color: var(--text3); white-space: nowrap; padding-top: 2px; font-size: 12px; }
.act-body { }
.act-title { color: var(--text); font-weight: 500; margin-bottom: 3px; }
.act-detail { color: var(--text3); font-size: 12px; }

/* Policy card */
.policy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition);
}
.policy-card:hover { border-color: rgba(var(--accent-rgb), 0.35); background: var(--bg3); }
.policy-name { flex: 1; font-weight: 600; font-size: 14px; }
.policy-meta { font-size: 12px; color: var(--text3); }

/* expand icon rotate */
.expand-icon { display: inline-block; transition: transform 0.15s ease; font-size: 10px; color: var(--text3); }
.expand-icon.open { transform: rotate(90deg); }

/* Tickets */
.ticket-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.4);
  font-size: 13px;
}
.ticket-item:last-child { border-bottom: none; }
.ticket-id { color: var(--text3); font-family: 'JetBrains Mono', monospace; font-size: 11px; flex-shrink: 0; }
.ticket-info { flex: 1; min-width: 0; }
.ticket-title-text { font-weight: 600; color: var(--text); font-size: 14px; }
.ticket-sub { color: var(--text3); font-size: 12px; margin-top: 2px; }

/* Software list */
.software-list { max-height: 400px; overflow-y: auto; }
.software-item {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
  font-size: 12px;
}
.software-item:last-child { border-bottom: none; }
.software-name { color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.software-ver { color: var(--text3); flex-shrink: 0; margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* Services list */
.services-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.services-table td { padding: 6px 8px; border-bottom: 1px solid rgba(var(--border-rgb), 0.3); }
.svc-running { color: var(--green); font-weight: 600; }
.svc-stopped { color: var(--red); font-weight: 600; }

/* Severity badges */
.sev-CRITICAL { color: var(--red); font-weight: 700; }
.sev-MAJOR    { color: var(--red); }
.sev-MINOR    { color: var(--orange); }
.sev-WARNING  { color: var(--yellow); }
.sev-NONE     { color: var(--text3); }

/* ============ QUERY CARDS — COLORES POR CATEGORIA ============ */

/* Borde izquierdo de color segun categoria */
.qbtn-hardware {
  border-left: 3px solid var(--accent);
}
.qbtn-hardware:hover { border-left-color: var(--accent); }

.qbtn-software {
  border-left: 3px solid var(--green);
}
.qbtn-software:hover { border-left-color: var(--green); }

.qbtn-network {
  border-left: 3px solid var(--orange);
}
.qbtn-network:hover { border-left-color: var(--orange); }

.qbtn-security {
  border-left: 3px solid var(--red);
}
.qbtn-security:hover { border-left-color: var(--red); }

.qbtn-custom {
  border-left: 3px solid var(--purple);
}
.qbtn-custom:hover { border-left-color: var(--purple); }

.qbtn-users {
  border-left: 3px solid var(--cyan);
}
.qbtn-users:hover { border-left-color: var(--cyan); }

.query-btn-desc {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
}

/* ============ QUERY RESULTS TABLE ============ */

.query-table-wrap {
  overflow-x: auto;
  padding: 0 0 4px;
}

/* Zebra striping sutil */
.query-results-table tr.row-alt td {
  background: rgba(var(--blanco-rgb), 0.02);
}

/* Columna dispositivo — mas ancha */
.query-results-table th.col-device {
  min-width: 160px;
}
.query-results-table th.col-org {
  min-width: 120px;
}

/* Numeros alineados a la derecha */
.query-results-table td.td-num {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* Celda de valor nulo */
.qcell-null {
  color: var(--text3);
  font-style: italic;
}

/* Booleanos */
.qcell-bool {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.qcell-bool-true  { background: rgba(var(--green-rgb), 0.12);  color: var(--green); }
.qcell-bool-false { background: rgba(var(--red-rgb), 0.12);  color: var(--red); }

/* Estado/health con colores semanticos */
.qcell-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qcell-status-ok   { background: rgba(var(--green-rgb), 0.12);   color: var(--green); }
.qcell-status-warn { background: rgba(var(--yellow-rgb), 0.12);  color: var(--yellow); }
.qcell-status-crit { background: rgba(var(--red-rgb), 0.12);   color: var(--red); }

/* Numeros (bytes formateados, numeros genericos) */
.qcell-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--orange);
}

/* Organizacion en gris */
.qcell-org {
  color: var(--text3);
  font-size: 12px;
}

/* Overflow note */
.query-overflow-note {
  padding: 8px 20px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
}

/* Filtro de org en la query card title */
.query-filter-org-wrap {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* ============ BAR CHART — COLORES POR % ONLINE ============ */

.bar-chart-bar.bar-green  { background: var(--green); }
.bar-chart-bar.bar-yellow { background: var(--yellow); }
.bar-chart-bar.bar-red    { background: var(--red); }
.bar-chart-bar.bar-grey   { background: var(--text3); }

.bar-pct-label {
  font-size: 11px;
  width: 42px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 600;
}

/* Tooltip nativo — el title lo gestiona el browser, no necesita CSS extra */

/* ============ LIBRARY DETAIL — MEJORAS ============ */

/* Params table — REQUIRED en rojo full, OPTIONAL en gris */
.param-req-full {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border: none;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.param-opt-full {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.param-name-code {
  font-size: 13px;
  color: #79c0ff;
}
.param-desc-cell {
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}

/* Boton "Probar en Playground" mas grande y llamativo */
.btn-try-playground {
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25);
  transition: all 0.2s ease;
}
.btn-try-playground:hover {
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}

/* ============ PLAYGROUND HELP — MEJORAS ============ */

/* Card de ejemplo de uso en el panel de ayuda */
.help-example-card {
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 10px 0;
}

/* Badge de scope en el help header del Playground */
.help-scope-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: auto;
}

/* ============ QUERY SCOPE BAR ============ */

.query-scope-bar {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: 20px 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.scope-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.scope-label-text {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.scope-main-select {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  min-width: 210px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.scope-main-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.scope-row select:not(.scope-main-select) {
  padding: 10px 14px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 200px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.scope-row select:not(.scope-main-select):focus {
  outline: none;
  border-color: var(--accent);
}

/* Badge de scope activo */
.query-scope-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
  line-height: 1.4;
  transition: background var(--transition), border-color var(--transition);
}
.scope-active-all {
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  color: var(--accent);
}
.scope-active-org {
  background: rgba(var(--purple-rgb), 0.10);
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  color: var(--purple);
}
.scope-active-device {
  background: rgba(var(--green-rgb), 0.10);
  border: 1px solid rgba(var(--green-rgb), 0.28);
  color: var(--green);
}
.query-scope-active strong {
  font-weight: 700;
}

/* Label de contexto sobre la tabla (modo legado, se mantiene por compatibilidad) */
.query-scope-label {
  font-size: 13px;
  padding: 6px 14px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  margin-bottom: 14px;
  display: inline-block;
  font-weight: 600;
}

/* ============ QUERY RESULTS ============ */

/* Cabecera del card de resultados */
.query-results-title-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.query-results-label {
  font-weight: 700;
  white-space: nowrap;
}
.query-result-endpoint-code {
  font-size: 11px;
  color: var(--text3);
  font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.query-result-count-badge {
  font-size: 11px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.query-results-body {
  padding: 0;
}

/* Footer de resultados */
.query-results-footer {
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  text-align: right;
}

/* ============ QUERY EMPTY STATE ============ */

.query-empty-state {
  text-align: center;
  padding: 40px 32px;
  color: var(--text2);
}
.query-empty-state .empty-icon {
  font-size: 42px;
  margin-bottom: 14px;
  display: block;
  opacity: 0.7;
}
.query-empty-state .empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.query-empty-state .empty-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 16px;
  line-height: 1.5;
}
.query-empty-state .empty-reasons {
  display: inline-block;
  text-align: left;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text3);
  background: rgba(var(--blanco-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  list-style: disc;
  list-style-position: inside;
  max-width: 480px;
}
.query-error-state .empty-icon {
  color: var(--yellow);
}
.query-error-state .empty-title {
  color: var(--yellow);
}

/* ============ QUERY CARD RESULT BADGE ============ */

.query-card-result {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.query-card-result.has-data {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.25);
}
.query-card-result.no-data {
  background: rgba(var(--text3-rgb), 0.15);
  color: var(--text3);
  border: 1px solid rgba(var(--text3-rgb), 0.2);
}
.query-card-result.error-data {
  background: rgba(var(--red-rgb), 0.12);
  color: var(--red);
  border: 1px solid rgba(var(--red-rgb), 0.2);
}

/* Loading pulsante en card de query */
@keyframes queryCardPulse {
  0%, 100% { border-color: rgba(var(--accent-rgb), 0.3); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
}
.query-btn-loading {
  animation: queryCardPulse 1.2s ease-in-out infinite;
  cursor: wait;
}

/* Key-value table para respuestas de objeto unico */
.query-kv-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.query-kv-table td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.query-kv-table td.kv-key {
  font-weight: 600;
  color: var(--text2);
  width: 35%;
  white-space: nowrap;
}
.query-kv-table td.kv-val {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  word-break: break-all;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1440px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1300px) {
  .device-detail-panel { width: 400px; min-width: 380px; }
  .dash-tab-btn { padding: 12px 12px; font-size: 13px; }
}

@media (max-width: 1100px) {
  .playground-layout { grid-template-columns: 1fr; }
  .playground-sidebar { display: none; }
  .lib-cat-sidebar { width: 140px; }
}

@media (max-width: 900px) {
  .library-layout.has-detail { grid-template-columns: 1fr; }
  .endpoint-detail { position: fixed; inset: var(--topbar-h) 0 var(--log-h-collapsed) 0;
    z-index: 150; max-height: none; border-radius: 0; }
  .lib-cat-sidebar { display: none; }
  .library-outer { display: block; }
  .device-detail-panel { width: 360px; min-width: 360px; }
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .logo-text { display: none; }

  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: var(--log-h-collapsed);
    z-index: 150; transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(var(--sombra-rgb), 0.5);
  }
  .sidebar.open { transform: translateX(0); }

  .layout { margin-top: var(--topbar-h); }
  .content { padding: 20px; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ep-card-desc { display: none; }
  .device-detail-panel { width: 100%; min-width: unset; position: fixed; inset: var(--topbar-h) 0 var(--log-h-collapsed) 0; z-index: 150; max-height: none; }
  .devices-layout { flex-direction: column; }
}

/* ============ QUERY API INFO ============ */
.query-api-info {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.03));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.query-api-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.query-api-row:last-child { margin-bottom: 0; }
.query-api-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text3);
  font-weight: 600;
  min-width: 100px;
  font-family: var(--font-sans, inherit);
}
.query-api-short {
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.1);
  padding: 3px 10px;
  border-radius: 4px;
}
.query-api-full {
  font-size: 12px;
  color: var(--text2);
  word-break: break-all;
}

/* ============ QUERY SCOPE ICONS ============ */
.query-scope-icons {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 4px;
  opacity: 0.6;
}
.query-btn:hover .query-scope-icons { opacity: 1; }

/* ============ MANUAL PARAMS SECTION (colapsable) ============ */
.pg-manual-params-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 12px;
  transition: color var(--transition);
}
.pg-manual-params-toggle:hover { color: var(--text2); }
.pg-manual-params-toggle::before {
  content: '\25B6';
  font-size: 9px;
  transition: transform var(--transition);
}
#pg-manual-params-section:not(.collapsed) .pg-manual-params-toggle::before {
  transform: rotate(90deg);
}
#pg-manual-params-section.collapsed .pg-manual-params-body {
  display: none;
}

/* ============ LOG SOURCE FILTER ============ */
.log-source-filter-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-right: 8px;
}

/* ============ ESTADISTICAS AVANZADAS (OVERVIEW) ============ */
.dash-stats-section {
  margin-top: 32px;
}
.dash-stats-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--text);
  font-weight: 600;
}
.stats-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1200px) {
  .stats-grid-2col { grid-template-columns: 1fr; }
}
.stat-card {
  background: var(--card, var(--bg2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.stat-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* OS Distribution */
.os-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.os-bar-label {
  width: 160px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.os-bar-track {
  flex: 1;
  background: var(--bg3);
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}
.os-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--blanco-rgb), 0.9);
  min-width: 28px;
  transition: width 0.4s ease;
}
.os-bar-pct {
  width: 42px;
  text-align: right;
  font-size: 12px;
  color: var(--text2);
  flex-shrink: 0;
}

/* Top Alerts */
.top-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.top-alert-row:last-child { border-bottom: none; }
.top-alert-rank {
  font-size: 11px;
  color: var(--text3);
  width: 18px;
  flex-shrink: 0;
  text-align: center;
}
.top-alert-info {
  flex: 1;
  min-width: 0;
}
.top-alert-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-alert-org {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-alert-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.top-alert-badge.red   { background: rgba(var(--red-rgb), 0.2); color: var(--red); }
.top-alert-badge.yellow{ background: rgba(var(--yellow-rgb), 0.2); color: var(--yellow); }
.top-alert-badge.green { background: rgba(var(--green-rgb), 0.2); color: var(--green); }

/* Org Mini Cards */
.org-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1400px) {
  .org-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .org-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
.org-mini-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.org-mini-card:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}
.org-mini-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.org-mini-stats {
  font-size: 12px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.org-mini-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.org-mini-progress {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.org-mini-progress-fill {
  height: 100%;
  border-radius: 2px;
}

/* Offline Prolongado */
.offline-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.offline-row:last-child { border-bottom: none; }
.offline-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: 5px;
}
.offline-info {
  flex: 1;
  min-width: 0;
}
.offline-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offline-org {
  font-size: 11px;
  color: var(--text3);
}
.offline-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  flex-shrink: 0;
  text-align: right;
}
.offline-contact {
  font-size: 10px;
  color: var(--text3);
  text-align: right;
}

/* Actividad Reciente Mini */
.activity-mini-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.activity-mini-row:last-child { border-bottom: none; }
.activity-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.activity-mini-body {
  flex: 1;
  min-width: 0;
}
.activity-mini-msg {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-mini-sub {
  font-size: 11px;
  color: var(--text3);
}
.activity-mini-ago {
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
  white-space: nowrap;
}
.stats-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--text3);
  font-size: 13px;
}

/* ============================
   ACCIONES MASIVAS
   ============================ */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg3);
  border: 1px solid var(--accent);
  border-radius: 8px;
  margin-bottom: 12px;
}
.bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  min-width: 120px;
}
.device-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
#bulk-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ============================
   CUSTOM FIELDS EDITOR
   ============================ */
.cf-editor-table td {
  vertical-align: middle;
}
.cf-value-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cf-edit-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.cf-edit-input:focus {
  border-color: var(--accent);
  outline: none;
}
.cf-save-btn {
  white-space: nowrap;
  color: var(--green);
  font-size: 11px;
}

/* ============================
   SCRIPTS EN DISPOSITIVO
   ============================ */
.scripts-device-list {
  max-height: 400px;
  overflow-y: auto;
}
.script-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.script-item:hover {
  background: var(--bg3);
}
.script-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================
   LOGIN Y SESION
   ============================ */
.pagina-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background: radial-gradient(circle at 20% 10%, rgba(var(--accent-rgb), 0.10), transparent 45%), var(--bg);
}
.login-caja {
  width: 100%; max-width: 400px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.login-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-marca .logo-icon { width: 44px; height: 44px; font-size: 22px; }
.login-titulo { font-weight: 600; font-size: 17px; }
.login-subtitulo { color: var(--text2); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text2); }
.login-campo .input { width: 100%; font-size: 15px; }
.login-totp { letter-spacing: 6px; font-family: ui-monospace, monospace; text-align: center; }
.login-boton { margin-top: 6px; width: 100%; padding: 11px; font-size: 15px; }
.login-boton:disabled { opacity: 0.5; cursor: not-allowed; }
.login-error {
  background: rgba(var(--red-rgb), 0.12); border: 1px solid rgba(var(--red-rgb), 0.4); color: var(--red);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px; margin-bottom: 16px;
}
.form-salir { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.usuario-actual { color: var(--topbar-text); opacity: 0.8; font-size: 13px; }
.btn-salir {
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  padding: 4px 10px; border-radius: var(--radius); font-size: 13px; cursor: pointer;
}
.btn-salir:hover { border-color: var(--red); color: var(--red); }

/* Endpoints que requieren un modulo no activado (ITAM, PSA) */
.badge-modulo {
  display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.03em; background: rgba(var(--yellow-rgb), 0.15); color: var(--yellow);
  border: 1px solid rgba(var(--yellow-rgb), 0.4); margin-left: 6px; cursor: help;
}

/* Version de la documentacion de la API */
.badge-docs { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); cursor: help; }
.badge-docs-nuevas { background: rgba(var(--yellow-rgb), 0.15); color: var(--yellow); border-color: rgba(var(--yellow-rgb), 0.5); animation: docs-pulso 2s ease-in-out infinite; }
@keyframes docs-pulso { 50% { opacity: 0.55; } }

/* Conmutador de tema (topbar) */
.btn-tema {
  background: transparent; border: 1px solid rgba(var(--blanco-rgb), 0.25); color: var(--topbar-text);
  width: 34px; height: 30px; border-radius: var(--radius); cursor: pointer; font-size: 15px; line-height: 1;
}
.btn-tema:hover { border-color: var(--ninja-verde, var(--accent)); }
html:not([data-theme="claro"]) .btn-tema { border-color: var(--border); }
html[data-theme="claro"] .sidebar-brand { border-bottom-color: var(--sidebar-borde); }
html[data-theme="claro"] .btn-salir { color: var(--topbar-text); border-color: rgba(var(--blanco-rgb), 0.25); }
html[data-theme="claro"] .badge-token, html[data-theme="claro"] .badge-docs { background: rgba(var(--blanco-rgb), 0.10); color: var(--topbar-text); border-color: rgba(var(--blanco-rgb), 0.25); }
html[data-theme="claro"] .badge-live { background: rgba(4,255,136,0.18); color: var(--ninja-verde); border-color: rgba(4,255,136,0.5); }
html[data-theme="claro"] .hamburger { color: var(--topbar-text); }
html[data-theme="claro"] .login-marca .logo-icon, html[data-theme="claro"] .topbar-logo .logo-icon { background: var(--ninja-verde); color: #09344f; }
.btn-tema svg { pointer-events: none; vertical-align: middle; }

/* ============ BUSQUEDA GLOBAL (topbar) ============ */
.busqueda-global { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; max-width: 460px; margin: 0 24px; color: var(--topbar-text); }
.busqueda-global svg { position: absolute; left: 12px; pointer-events: none; opacity: 0.7; }
.busqueda-global input {
  width: 100%; height: 34px; padding: 0 12px 0 34px; border-radius: var(--radius); font: inherit; font-size: 13px;
  background: rgba(var(--blanco-rgb), 0.10); border: 1px solid rgba(var(--blanco-rgb), 0.22); color: var(--topbar-text); outline: none;
}
html:not([data-theme="claro"]) .busqueda-global input { background: var(--bg3); border-color: var(--border); }
.busqueda-global input::placeholder { color: var(--topbar-text); opacity: 0.55; }
.busqueda-global input:focus { border-color: var(--ninja-verde, var(--accent)); background: rgba(var(--blanco-rgb), 0.14); }
.busqueda-resultados {
  position: absolute; top: 40px; left: 0; right: 0; z-index: 1200; max-height: 420px; overflow-y: auto;
  background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(var(--sombra-rgb), 0.25);
}
.busqueda-resultados .res-grupo { padding: 8px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
.busqueda-resultados .res-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.busqueda-resultados .res-item:hover, .busqueda-resultados .res-item.activo { background: rgba(var(--accent-rgb), 0.10); }
.busqueda-resultados .res-item .punto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text3); }
.busqueda-resultados .res-item .punto.online { background: var(--green); }
.busqueda-resultados .res-item .punto.offline { background: var(--red); }
.busqueda-resultados .res-item .res-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busqueda-resultados .res-item .res-detalle { color: var(--text2); font-size: 12px; margin-left: auto; white-space: nowrap; }
.busqueda-resultados .res-vacio { padding: 12px; color: var(--text2); font-size: 13px; }
@media (max-width: 1100px) { .busqueda-global { max-width: none; margin: 0 10px; } .busqueda-global input { font-size: 12px; } }

/* ============ MOVIL (<= 700px) ============ */
@media (max-width: 700px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-logo .logo-text, .badge-docs, .usuario-actual, .form-salir .btn-salir { display: none; }
  .busqueda-global { margin: 0; max-width: none; flex: 1; min-width: 0; }
  .busqueda-global input { min-width: 0; font-size: 13px; }
  .busqueda-resultados { position: fixed; top: var(--topbar-h); left: 8px; right: 8px; }
  .topbar-badges { gap: 6px; flex-shrink: 0; }
  .badge-token { display: none; }
  .badge-live { padding: 3px 8px; font-size: 10px; }
  .dash-tab-nav { overflow-x: auto; display: flex; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .dash-tab-btn { white-space: nowrap; flex-shrink: 0; }
  .data-table { font-size: 12px; }
  .data-table td, .data-table th { padding: 8px 6px; }
  .kpi-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ SALUD DE LA FLOTA ============ */
.salud-banda { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.salud-kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.salud-kpi .valor { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.salud-kpi .etiqueta { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
.salud-kpi.rojo .valor { color: var(--red); }  .salud-kpi.ambar .valor { color: var(--yellow); }  .salud-kpi.verde .valor { color: var(--green); }
.salud-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.salud-cabecera > span:first-child { margin-right: auto; }
.salud-filtro { font-size: 12px; font-weight: 400; color: var(--text2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.semaforo { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.semaforo.rojo { background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.18); }
.semaforo.ambar { background: var(--yellow); box-shadow: 0 0 0 3px rgba(var(--yellow-rgb), 0.18); }
.semaforo.verde { background: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.18); }
.semaforo.gris { background: var(--text3); }
.salud-fila { cursor: pointer; }
.salud-fila td { white-space: nowrap; }
.salud-org { font-weight: 600; }
.salud-num { font-variant-numeric: tabular-nums; text-align: center; }
.salud-num.cero { color: var(--text3); }
.salud-num.rojo { color: var(--red); font-weight: 700; }  .salud-num.ambar { color: var(--yellow); font-weight: 600; }
.salud-detalle td { background: var(--bg3); padding: 0 !important; }
.salud-problemas { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.salud-problema { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 6px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.salud-problema .equipo { font-weight: 600; min-width: 150px; }
.salud-problema .motivo { color: var(--text2); flex: 1; }
.salud-problema.rojo { border-left: 3px solid var(--red); }  .salud-problema.ambar { border-left: 3px solid var(--yellow); }
.salud-ok { padding: 24px; text-align: center; color: var(--green); font-weight: 600; }
@media (max-width: 700px) { .salud-fila td.opcional { display: none; } }

/* ============ WEBHOOKS ============ */
.webhook-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; padding: 4px 0; }
.webhook-dato { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.webhook-dato .etiqueta { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
.webhook-dato code { font-size: 12px; word-break: break-all; }
.chip-ok { color: var(--green); font-weight: 600; }  .chip-mal { color: var(--red); font-weight: 600; }  .chip-pendiente { color: var(--yellow); font-weight: 600; }
.webhook-aviso { grid-column: 1 / -1; font-size: 12px; color: var(--text2); background: rgba(var(--yellow-rgb), 0.10); border: 1px solid rgba(var(--yellow-rgb), 0.35); border-radius: var(--radius); padding: 8px 12px; }
.webhook-item { display: grid; grid-template-columns: 150px 1fr; gap: 4px 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.webhook-item:last-child { border-bottom: none; }
.webhook-item .fecha { color: var(--text3); font-size: 12px; font-variant-numeric: tabular-nums; }
.webhook-item .titulo { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.webhook-item .cuerpo { grid-column: 2; color: var(--text2); }
.webhook-item .dispositivo { color: var(--accent); cursor: pointer; }
.chip-sev { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px; border: 1px solid currentColor; }
.chip-sev.CRITICAL, .chip-sev.MAJOR { color: var(--red); } .chip-sev.MODERATE { color: var(--yellow); } .chip-sev.MINOR { color: var(--accent); } .chip-sev.NONE { color: var(--text3); }
@media (max-width: 700px) { .webhook-item { grid-template-columns: 1fr; } .webhook-item .cuerpo { grid-column: 1; } }