/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --bg:#000; --glow-a:transparent; --glow-b:transparent;
  --side:#000; --surface:#0f0f0f; --surface-solid:#0f0f0f; --raised:rgba(255,255,255,.04); --hover:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --grid:rgba(255,255,255,.08);
  --text:#f2f2f2; --muted:#a1a1a1; --subtle:#6f6f6f;
  --accent:#e5e5e5; --accent-2:#a1a1a1; --accent-soft:rgba(255,255,255,.08); --accent-line:rgba(255,255,255,.22); --on-accent:#000; --chart-a:#818cf8; --chart-b:#22d3ee;
  --blue:#60a5fa; --mint:#34d399; --red:#fb7185; --gold:#fbbf24; --violet:#c084fc; --orange:#fb923c;
  --shadow:none;
  --neon-latency:#38bdf8; --neon-ping:#2dd4bf; --neon-uptime:#a78bfa; --plot-bg:#080808; --plot-grid:rgba(255,255,255,.07); --plot-edge:rgba(255,255,255,.06);
  --shadow-hover:none;
  --bg-top:#000; --glow-c:transparent; --field:#0f0f0f; --glass-edge:rgba(255,255,255,.09); --button-edge:rgba(255,255,255,.14); --glass-blur:0px;
  --radius:16px; --radius-sm:10px;
  --font:"Inter", "SF Pro Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family:var(--font); font-size:14px; font-feature-settings:"cv11", "ss01";
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
/* Tema claro: fondo azul cielo muy claro y superficies de cristal (translúcidas, desenfocadas y con borde claro). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:#f4f4f5; --bg-top:#f4f4f5; --glow-a:transparent; --glow-b:transparent; --glow-c:transparent;
    --side:#fff; --surface:#fff; --surface-solid:#fff; --field:#fff; --raised:rgba(0,0,0,.03); --hover:rgba(0,0,0,.05);
    --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.16); --grid:rgba(0,0,0,.07);
    --glass-edge:rgba(0,0,0,.09); --button-edge:rgba(0,0,0,.14); --glass-blur:0px;
    --text:#111; --muted:#555; --subtle:#808080;
    --accent:#171717; --accent-2:#555; --accent-soft:rgba(0,0,0,.06); --accent-line:rgba(0,0,0,.2); --on-accent:#fff; --chart-a:#4f46e5; --chart-b:#0891b2;
    --blue:#2563eb; --mint:#059669; --red:#e11d48; --gold:#d97706; --violet:#9333ea; --orange:#ea580c;
    --shadow:none;
    --shadow-hover:none;
    --neon-latency:#0284c7; --neon-ping:#0d9488; --neon-uptime:#7c3aed; --plot-bg:#fafafa; --plot-grid:rgba(0,0,0,.07); --plot-edge:rgba(0,0,0,.08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f4f4f5; --bg-top:#f4f4f5; --glow-a:transparent; --glow-b:transparent; --glow-c:transparent;
  --side:#fff; --surface:#fff; --surface-solid:#fff; --field:#fff; --raised:rgba(0,0,0,.03); --hover:rgba(0,0,0,.05);
  --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.16); --grid:rgba(0,0,0,.07);
  --glass-edge:rgba(0,0,0,.09); --button-edge:rgba(0,0,0,.14); --glass-blur:0px;
  --text:#111; --muted:#555; --subtle:#808080;
  --accent:#171717; --accent-2:#555; --accent-soft:rgba(0,0,0,.06); --accent-line:rgba(0,0,0,.2); --on-accent:#fff; --chart-a:#4f46e5; --chart-b:#0891b2;
  --blue:#2563eb; --mint:#059669; --red:#e11d48; --gold:#d97706; --violet:#9333ea; --orange:#ea580c;
  --shadow:none;
  --shadow-hover:none;
  --neon-latency:#0284c7; --neon-ping:#0d9488; --neon-uptime:#7c3aed; --plot-bg:#fafafa; --plot-grid:rgba(0,0,0,.07); --plot-edge:rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr);
  background:
    radial-gradient(900px 520px at 12% -8%, var(--glow-a), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, var(--glow-b), transparent 55%),
    radial-gradient(1000px 600px at 60% 110%, var(--glow-c), transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 60%);
  background-attachment:fixed;
}
[hidden] { display:none !important; }
button, select, input { font:inherit; color:inherit; }
button, select { cursor:pointer; }
button:disabled, select:disabled { cursor:default; opacity:.55; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
h1,h2,h3,p { margin:0; }
::selection { background:var(--accent-soft); }

/* ---------- Sidebar ---------- */
.sidebar {
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:22px 14px 16px;
  background:var(--side); border-right:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.brand { display:flex; align-items:center; gap:12px; margin:0 8px 36px; }
.brand-mark {
  position:relative; display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; color:#fff;
  background:linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #06b6d4 100%);
  box-shadow:0 8px 22px -6px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-mark svg { width:22px; }
.brand strong { display:block; font-size:19px; line-height:1.05; letter-spacing:-.03em; font-weight:750; }
.brand span, .menu-label, .eyebrow { color:var(--subtle); font-weight:650; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
.brand span { display:block; margin-top:4px; font-size:9.5px; }
.menu-label { margin:0 12px 10px; }
nav { display:grid; gap:3px; }
nav button {
  position:relative; display:flex; align-items:center; gap:11px; min-height:40px; width:100%;
  border:1px solid transparent; border-radius:var(--radius-sm); padding:8px 12px;
  background:transparent; text-align:left; color:var(--muted); font-weight:560;
  transition:background .15s, color .15s, border-color .15s;
}
nav button:hover { background:var(--hover); color:var(--text); }
nav button[aria-current] { background:var(--accent-soft); border-color:var(--accent-line); color:var(--text); }
nav button[aria-current]::before {
  content:""; position:absolute; left:-15px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(var(--accent), var(--accent-2));
}
nav button[aria-current] svg { color:var(--accent); }
nav svg, .button svg, .icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.nav-count {
  margin-left:auto; min-width:22px; text-align:center; border-radius:999px; padding:1px 7px;
  background:rgba(251,113,133,.16); color:var(--red); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.sidebar-foot {
  display:flex; gap:11px; align-items:center; margin-top:auto; padding:12px 13px; font-size:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--raised);
}
.sidebar-foot strong { font-weight:620; }
.sidebar-foot small { display:block; color:var(--muted); margin-top:2px; }

/* ---------- Status dots ---------- */
.status-dot, .dot { position:relative; display:inline-block; width:8px; height:8px; flex:none; border-radius:50%; background:var(--subtle); }
.status-dot[data-state="good"], .dot.good { background:var(--mint); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 18%, transparent); }
.status-dot[data-state="warn"], .dot.warn { background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.dot.bad { background:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
.status-dot[data-state]::after, .dot.bad::after {
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 0% { transform:scale(1); opacity:.7; } 80%, 100% { transform:scale(2.6); opacity:0; } }

/* ---------- Topbar ---------- */
main { min-width:0; }
.topbar {
  position:sticky; top:0; z-index:5; display:flex; min-height:62px; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(16px,2vw,32px); border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.breadcrumb { color:var(--muted); font-size:13px; }
.breadcrumb span { padding:0 8px; color:var(--subtle); }
.breadcrumb strong { color:var(--text); font-weight:600; }
.top-actions, .controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.updated { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.updated::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); }
.button, .icon-button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px;
  border:1px solid var(--button-edge); border-radius:var(--radius-sm); background:var(--surface);
  padding:6px 12px; font-weight:580; white-space:nowrap; box-shadow:var(--shadow);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%);
  transition:background .15s, border-color .15s, transform .15s;
}
.button:hover, .icon-button:hover { background:var(--hover); border-color:var(--accent-line); }
.button:active, .icon-button:active { transform:translateY(1px); }
.icon-button { width:36px; padding:0; }
#refresh:disabled { opacity:1; }
#refresh:disabled svg { animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.icon-sun { display:none; }
:root[data-theme="dark"] .icon-sun { display:block; }
:root[data-theme="dark"] .icon-moon { display:none; }

/* ---------- Layout ---------- */
/* El contenido ocupa todo el ancho disponible; solo el margen interior se adapta al tamaño de la pantalla. */
.content { width:100%; padding:28px clamp(16px,2vw,32px) 40px; }
.intro { margin-bottom:24px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--accent); }
.eyebrow::before { content:""; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
h1 { font-size:clamp(26px,3.4vw,36px); letter-spacing:-.035em; line-height:1.1; font-weight:720; }
.intro p:last-child { margin-top:8px; color:var(--muted); line-height:1.55; }
h2 { font-size:16px; letter-spacing:-.015em; font-weight:650; }
h3 { font-size:13.5px; font-weight:620; letter-spacing:-.005em; }
.good { color:var(--mint); }
.bad { color:var(--red); }
.warn { color:var(--gold); }

/* ---------- Cards ---------- */
.stat, .panel, .chart-card {
  background:var(--surface); border:1px solid var(--glass-edge); border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
}
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stat {
  --tone:var(--accent);
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0; padding:16px 18px 18px;
  text-align:left; color:var(--text);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.stat::before {
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 70%, transparent), transparent);
}
.stat::after {
  content:""; position:absolute; width:160px; height:160px; right:-60px; top:-70px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--tone) 18%, transparent), transparent); pointer-events:none;
}
.stat:hover, .stat:focus-visible { transform:translateY(-2px); border-color:color-mix(in srgb, var(--tone) 45%, transparent); box-shadow:var(--shadow-hover); }
.stat-good { --tone:var(--mint); }
.stat-bad { --tone:var(--red); }
.stat-warn { --tone:var(--gold); }
.stat-top { display:flex; align-items:center; gap:10px; padding-right:20px; }
.stat-icon {
  display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px;
  color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--tone) 22%, transparent);
}
.stat-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-label { color:var(--muted); font-size:12.5px; font-weight:560; }
.stat strong { display:block; margin:14px 0 2px; font-size:32px; line-height:1; font-weight:720; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.stat small { color:var(--subtle); font-size:11.5px; line-height:1.4; }
.stat-meter { height:4px; margin-top:12px; border-radius:4px; background:var(--raised); overflow:hidden; }
.stat-meter i { display:block; height:100%; width:calc(var(--meter, 0) * 100%); border-radius:inherit; background:var(--tone); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.stat .stat-arrow {
  position:absolute; top:16px; right:16px; color:var(--subtle); font-size:15px;
  transition:transform .2s, color .2s;
}
.stat:hover .stat-arrow { color:var(--tone); transform:translateX(3px); }

/* ---------- Metrics section ---------- */
.metrics { margin-top:30px; }
.section-head, .panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.section-head { margin-bottom:14px; }
.section-head p, .panel-head p { color:var(--muted); font-size:12.5px; margin-top:4px; }
.controls label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:540; }
select, input {
  min-height:36px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--field);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--text); padding:6px 11px; max-width:100%; transition:border-color .15s, box-shadow .15s;
}
select { appearance:none; -webkit-appearance:none; padding-right:32px; }
select:hover, input:hover { border-color:var(--accent-line); }
select:focus-visible, input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.select { position:relative; display:inline-flex; max-width:100%; }
.select select { width:100%; }
.select::after {
  content:""; position:absolute; right:13px; top:50%; width:6px; height:6px; margin-top:-5px; pointer-events:none;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:rotate(45deg);
}
.period { display:flex; gap:2px; border:1px solid var(--button-edge); padding:3px; border-radius:var(--radius-sm); background:var(--field); box-shadow:var(--shadow);
  backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); }
.period button {
  color:var(--muted); background:transparent; border:0; border-radius:7px; min-height:28px; padding:0 11px;
  white-space:nowrap; font-size:12px; font-weight:600; transition:background .15s, color .15s;
}
.period button:hover { color:var(--text); background:var(--hover); }
.period button[aria-pressed="true"] { color:var(--on-accent); background:linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow:0 4px 12px -4px rgba(99,102,241,.6); }
.chart-toolbar {
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 22px; padding:14px 16px; margin-bottom:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.toolbar-group { display:grid; gap:6px; min-width:0; }
.toolbar-group > span:first-child { color:var(--subtle); font-size:10.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.toolbar-host { flex:1 1 220px; max-width:340px; }
.toolbar-host .select, .toolbar-host select { width:100%; }
.period button svg { width:14px; height:14px; margin-right:6px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.chart-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 12px; min-height:26px; }
.status-chip {
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:560;
  color:var(--text); background:var(--accent-soft); border:1px solid var(--accent-line); font-variant-numeric:tabular-nums;
}
.status-chip:empty { display:none; }
.outage-chip { color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.outage-chip::before { content:""; width:10px; height:10px; border-radius:3px; background:color-mix(in srgb, var(--red) 35%, transparent); border:1px solid var(--red); }
.outage-chip.none { color:var(--mint); background:color-mix(in srgb, var(--mint) 10%, transparent); border-color:color-mix(in srgb, var(--mint) 30%, transparent); }
.outage-chip.none::before { background:var(--mint); border-color:var(--mint); border-radius:50%; width:7px; height:7px; }
.zoom-hint { margin:0 0 0 auto; align-self:center; max-width:330px; color:var(--subtle); font-size:11.5px; line-height:1.5; text-align:right; }
.chart-status:not(:has(.status-chip:not(:empty):not([hidden]))) { display:none; }

/* ---------- Charts ---------- */
.charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.chart-card { padding:16px 18px 10px; min-width:0; }
.chart-card:first-child { grid-column:1/-1; }
.chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.chart-head h3 { display:flex; align-items:center; gap:8px; }
.chart-head h3::before { content:""; width:8px; height:8px; border-radius:3px; background:var(--trace, var(--accent)); box-shadow:0 0 10px var(--trace, var(--accent)); }
.chart-latency { --trace:var(--neon-latency); }
.chart-ping { --trace:var(--neon-ping); }
.chart-uptime { --trace:var(--neon-uptime); }
.chart-head small { display:block; color:var(--muted); margin-top:5px; font-size:11.5px; overflow-wrap:anywhere; }
.chart-value { text-align:right; white-space:nowrap; font-size:20px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.chart-value small { display:block; margin-top:3px; color:var(--subtle); font-size:11px; font-weight:520; letter-spacing:0; }
.graph { position:relative; margin:10px -6px 0; touch-action:pan-y; border-radius:10px; }
.graph:focus-visible { outline-offset:4px; }
.graph svg { width:100%; display:block; overflow:visible; cursor:crosshair; user-select:none; }
.graph .plot-bg { fill:var(--plot-bg); stroke:var(--plot-edge); stroke-width:1; }
.graph .grid { stroke:var(--plot-grid); stroke-width:1; shape-rendering:crispEdges; }
.graph .axis { fill:var(--subtle); font:10.5px var(--font); font-variant-numeric:tabular-nums; }
.graph .line {
  fill:none; stroke:var(--trace); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 2px var(--trace)) drop-shadow(0 0 7px color-mix(in srgb, var(--trace) 70%, transparent));
}
.graph .end-dot { fill:var(--trace); stroke:color-mix(in srgb, var(--trace) 35%, #fff); stroke-width:1.5; filter:drop-shadow(0 0 5px var(--trace)) drop-shadow(0 0 10px var(--trace)); }
.graph .point { fill:var(--trace); }
.graph .marker { stroke:var(--surface-solid); stroke-width:2.5; filter:drop-shadow(0 0 6px var(--trace)); }
.graph .stop-a { stop-color:var(--trace); stop-opacity:.38; }
.graph .stop-b { stop-color:var(--trace); stop-opacity:0; }
.graph .cross { stroke:var(--muted); stroke-opacity:.6; stroke-dasharray:3 3; }
.graph .bar { fill:var(--trace); opacity:.9; transition:opacity .15s; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--trace) 60%, transparent)); }
.graph .bar.missed { fill:var(--red); }
.graph .outage { fill:var(--red); fill-opacity:.11; }
.charts.stacked { grid-template-columns:1fr; gap:10px; }
.charts.stacked .chart-card { padding:12px 16px 4px; }
.charts.stacked .chart-head { align-items:center; }
.charts.stacked .chart-value { font-size:17px; }
.charts.stacked .graph { margin-top:6px; }
.charts.stacked .graph-tip { min-height:20px; }
.graph .zoom-selection { fill:var(--accent); fill-opacity:.16; stroke:var(--accent); stroke-width:1; pointer-events:none; }
.trace-latency { --trace:var(--neon-latency); }
.trace-ping { --trace:var(--neon-ping); }
.trace-uptime { --trace:var(--neon-uptime); }
.graph-tip { min-height:22px; color:var(--muted); font-size:11.5px; padding:2px 6px 0; font-variant-numeric:tabular-nums; }
.chart-note { margin-top:12px; color:var(--subtle); font-size:12px; line-height:1.55; }

/* ---------- Empty, loading and banner ---------- */
.empty { display:grid; place-items:center; align-content:center; gap:12px; text-align:center; min-height:140px; padding:20px; color:var(--muted); line-height:1.5; }
.charts > .empty { grid-column:1/-1; min-height:260px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--raised); }
.charts[aria-busy="true"] > .empty::before {
  content:""; width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--line-strong); border-top-color:var(--accent); animation:spin .8s linear infinite;
}
.banner {
  display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:20px; font-size:13px;
  border:1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius:var(--radius-sm);
  color:var(--text); background:color-mix(in srgb, var(--gold) 10%, var(--surface));
}
.banner::before {
  content:"!"; display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%;
  background:var(--gold); color:#1c1300; font-size:12px; font-weight:800;
}

/* ---------- Panels and tables ---------- */
.panel { min-width:0; overflow:hidden; }
.panel-head { padding:16px 18px; border-bottom:1px solid var(--line); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; }
th, td { padding:12px 16px; border-bottom:1px solid var(--line); }
th { color:var(--subtle); font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; background:var(--raised); }
tbody tr { transition:background .12s; }
tbody tr:hover { background:var(--hover); }
tr:last-child td { border-bottom:0; }
td { font-size:13px; }
td:first-child { box-shadow:inset 3px 0 0 var(--sev, transparent); }
tr[data-sev="5"] { --sev:var(--red); }
tr[data-sev="4"] { --sev:var(--orange); }
tr[data-sev="3"] { --sev:var(--gold); }
tr[data-sev="2"] { --sev:color-mix(in srgb, var(--gold) 60%, transparent); }
tr[data-sev="1"] { --sev:var(--blue); }
.cell-host { min-width:135px; }
.pill {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--raised);
  border-radius:999px; color:var(--muted); padding:3px 9px; white-space:nowrap; font-size:11px; font-weight:580;
}
.pill[class*="sev-"]::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sev-5 { --tone:var(--red); }
.sev-4 { --tone:var(--orange); }
.sev-3 { --tone:var(--gold); }
.sev-2 { --tone:color-mix(in srgb, var(--gold) 75%, var(--muted)); }
.sev-1 { --tone:var(--blue); }
.sev-5, .sev-4, .sev-3, .sev-2, .sev-1 {
  color:var(--tone); background:color-mix(in srgb, var(--tone) 12%, transparent); border-color:color-mix(in srgb, var(--tone) 30%, transparent);
}

/* ---------- Hosts ---------- */
.host-grid { display:grid; grid-template-columns:clamp(260px, 26.5%, 520px) minmax(0,1fr); gap:16px; align-items:start; }
/* Barra para repartir el ancho entre la lista de equipos y la ficha del host. */
.splitter { position:sticky; top:80px; align-self:start; height:calc(100vh - 110px); max-height:100%; display:grid; place-items:center; cursor:col-resize; touch-action:none; border-radius:8px; }
.splitter span { width:4px; height:56px; border-radius:4px; background:var(--line-strong); transition:background .15s, height .15s; }
.splitter:hover span, .splitter:focus-visible span, .host-grid.resizing .splitter span { background:var(--accent); height:96px; }
.splitter:focus-visible { outline-offset:-2px; }
body.resizing, body.resizing * { cursor:col-resize !important; user-select:none !important; }
.search-wrap { display:grid; gap:8px; padding:12px; }
.search-wrap label { color:var(--muted); font-size:12px; font-weight:540; }
.search-wrap input, .search-wrap .select { width:100%; }
#host-list { padding:0 6px 6px; }
.host-option {
  position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left; color:var(--text);
  border:1px solid transparent; border-radius:var(--radius-sm); padding:11px 12px; margin-top:2px; background:transparent;
  transition:background .12s, border-color .12s;
}
.host-option:hover { background:var(--hover); }
.host-option[aria-current="true"] { background:var(--accent-soft); border-color:var(--accent-line); }
.host-option strong, .host-option small { display:block; overflow-wrap:anywhere; }
.host-option strong { font-weight:600; }
.host-option small { color:var(--muted); margin-top:3px; font-size:12px; }
.detail-body { padding:18px; display:grid; gap:22px; }
.detail-description { color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; }
.detail-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.detail-metric { background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:13px 14px; overflow-wrap:anywhere; }
.detail-metric > span { color:var(--muted); font-size:12px; font-weight:560; }
.detail-metric strong, .detail-metric small { display:block; margin-top:5px; }
.detail-metric strong { font-size:18px; font-weight:680; letter-spacing:-.02em; }
.detail-metric small { color:var(--subtle); font-size:11.5px; }
.detail-list { display:grid; gap:2px; list-style:none; padding:0; margin:10px 0 0; color:var(--muted); }
.detail-list li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; overflow-wrap:anywhere; padding:9px 12px; border-radius:9px; background:var(--raised); }
.detail-list li strong { color:var(--text); font-weight:600; }
.link-button { border:0; padding:0; background:transparent; color:var(--accent); text-align:left; font-weight:560; text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:3px; }
.link-button:hover { text-decoration-color:currentColor; }

/* ---------- Root cause ---------- */
.root-causes { display:grid; gap:14px; }
.root-causes:not(:empty) { margin-bottom:18px; }
.root-cause {
  --tone:var(--red);
  position:relative; overflow:hidden; padding:16px 18px; border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background:linear-gradient(120deg, color-mix(in srgb, var(--tone) 14%, var(--surface)), var(--surface) 70%);
  box-shadow:var(--shadow); color:var(--text);
}
.root-cause::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--tone); }
.root-cause.sev-4 { --tone:var(--orange); }
.root-cause.sev-3, .root-cause.sev-2 { --tone:var(--gold); }
.root-cause.sev-1, .root-cause.sev-0 { --tone:var(--blue); }
.root-cause-head { display:flex; gap:14px; align-items:flex-start; }
.root-cause-head .eyebrow { margin-bottom:4px; color:var(--tone); }
.root-cause-head .eyebrow::before { background:var(--tone); }
.root-cause-head h2 { font-size:18px; }
.root-cause-head p:last-child { margin-top:6px; color:var(--muted); font-size:12.5px; line-height:1.8; }
.root-cause-icon {
  display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; color:var(--tone);
  background:color-mix(in srgb, var(--tone) 16%, transparent); border:1px solid color-mix(in srgb, var(--tone) 32%, transparent);
}
.root-cause-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.root-cause-body { margin-top:14px; padding-left:54px; color:var(--muted); font-size:12.5px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip {
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:999px;
  padding:5px 12px 5px 10px; background:var(--field); color:var(--text); font-size:12.5px; font-weight:580;
  transition:border-color .15s, background .15s;
}
.chip:hover { border-color:var(--accent-line); background:var(--hover); }
.chip small { color:var(--subtle); font-weight:520; }
.pill.root { color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); background:color-mix(in srgb, var(--red) 12%, transparent); font-weight:700; }
.pill.consequence { color:var(--violet); border-color:color-mix(in srgb, var(--violet) 32%, transparent); background:color-mix(in srgb, var(--violet) 10%, transparent); }
.problem-context { margin-top:6px; color:var(--muted); font-size:12px; line-height:1.6; }
tr[data-role="consequence"] td { opacity:.78; }
tr[data-role="root"] { background:color-mix(in srgb, var(--red) 5%, transparent); }
.check { cursor:pointer; }
.check input { min-height:0; width:16px; height:16px; margin:0; padding:0; accent-color:var(--accent); cursor:pointer; }
.cause-note {
  padding:11px 14px; border-radius:var(--radius-sm); font-size:12.5px; line-height:1.55; color:var(--muted);
  border:1px solid color-mix(in srgb, var(--violet) 30%, transparent); background:color-mix(in srgb, var(--violet) 8%, transparent);
}
.cause-note.root { border-color:color-mix(in srgb, var(--red) 32%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); }
.cause-note strong { color:var(--text); }
.host-option small.affected { color:var(--violet); }
.detail-groups { display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- Incident history ---------- */
.incidents-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.incidents-head p { color:var(--muted); font-size:12px; margin-top:4px; }
.incident-strip { position:relative; height:14px; margin-top:14px; border-radius:7px; background:color-mix(in srgb, var(--mint) 14%, var(--raised)); overflow:hidden; }
.incident-strip i {
  position:absolute; top:0; bottom:0; left:calc(var(--start, 0) * 100%); width:calc(var(--size, 0) * 100%); min-width:3px;
  background:var(--tone, var(--muted)); opacity:.9; border:0; border-radius:0; padding:0;
}
.incident-axis { display:flex; justify-content:space-between; margin-top:5px; color:var(--subtle); font-size:10.5px; font-variant-numeric:tabular-nums; }
.incident-list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:4px; max-height:420px; overflow-y:auto; }
.incident-list li {
  padding:10px 12px; border-radius:9px; background:var(--raised); box-shadow:inset 3px 0 0 var(--sev, var(--line-strong));
}
.incident-list li[data-sev="5"] { --sev:var(--red); }
.incident-list li[data-sev="4"] { --sev:var(--orange); }
.incident-list li[data-sev="3"] { --sev:var(--gold); }
.incident-list li[data-sev="2"] { --sev:color-mix(in srgb, var(--gold) 60%, transparent); }
.incident-list li[data-sev="1"] { --sev:var(--blue); }
.incident-list li strong { font-weight:600; overflow-wrap:anywhere; }
.incident-list li small { display:block; margin-top:5px; color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.incidents .empty { min-height:90px; }

/* ---------- Groups ---------- */
.group-toolbar { margin-bottom:16px; }
#groups-expand { min-height:36px; }
.group-toolbar .panel-head { border-bottom:0; }
#group-search { width:clamp(160px,22vw,260px); }
.group-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:14px; align-items:start; }
.group-grid > .empty { grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:var(--radius); }
.group-card { --tone:var(--mint); position:relative; padding:16px 16px 10px; }
.group-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg, var(--tone), transparent); }
.group-card[data-tone="bad"] { --tone:var(--red); }
.group-card[data-tone="warn"] { --tone:var(--gold); }
.group-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; }
.group-head p { color:var(--muted); font-size:12px; margin-top:3px; }
.group-counts { display:flex; flex-wrap:wrap; gap:5px; align-items:flex-start; }
.pill.count-good { color:var(--mint); border-color:color-mix(in srgb, var(--mint) 30%, transparent); }
.pill.count-bad { color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.pill.count-warn { color:var(--gold); border-color:color-mix(in srgb, var(--gold) 30%, transparent); }
.group-meter { display:block; margin:12px 0 10px; }
.group-meter i { background:var(--mint); }
.group-card .cause-note { margin-bottom:8px; }
.group-hosts { display:grid; margin:0 -6px; }
.group-hosts .host-option > span:nth-child(2) { flex:1; min-width:0; }

/* ---------- CPU ---------- */
.cpu-card { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--raised); }
.cpu-card .empty { min-height:80px; }
.cpu-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cpu-head small, .cpu-foot { display:block; color:var(--subtle); font-size:11.5px; margin-top:4px; overflow-wrap:anywhere; }
.cpu-head .pill.warn { color:var(--gold); }
.cpu-head .pill.bad-pill { color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.cpu-help { margin-top:10px; padding:9px 12px; border-radius:10px; font-size:12px; line-height:1.55; color:var(--muted);
  background:color-mix(in srgb, var(--gold) 8%, transparent); border:1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.cpu-help strong { color:var(--text); }
.cpu-state { color:var(--subtle); font-size:11.5px; font-weight:560; }
.cpu-body { display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin:10px 0 6px; }
.cpu-donut { position:relative; width:180px; height:180px; flex:none; }
.cpu-donut svg { width:100%; height:100%; display:block; }
.cpu-track { fill:none; stroke:var(--line-strong); opacity:.6; }
.cpu-arc { fill:none; stroke:var(--tone, var(--accent)); stroke-linecap:round; transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1); }
.cpu-arc.stale { opacity:.45; }
.cpu-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.cpu-center strong { font-size:30px; font-weight:740; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.cpu-center strong small { font-size:15px; margin-left:1px; font-weight:650; }
.cpu-center span { margin-top:5px; color:var(--subtle); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.ring-0 { --tone:var(--accent); } .ring-1 { --tone:var(--accent-2); } .ring-2 { --tone:var(--violet); } .ring-3 { --tone:var(--orange); }
.ring-4 { --tone:var(--blue); } .ring-5 { --tone:var(--mint); } .ring-6 { --tone:var(--gold); } .ring-7 { --tone:var(--red); }
.ring-good { --tone:var(--mint); } .ring-warn { --tone:var(--gold); } .ring-bad { --tone:var(--red); }
.cpu-legend { flex:1; min-width:200px; list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.cpu-legend li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 9px; font-size:12.5px; color:var(--muted); }
.cpu-legend strong { font-variant-numeric:tabular-nums; font-weight:650; }
.cpu-legend strong:not([class*="good"]):not([class*="warn"]):not([class*="bad"]) { color:var(--text); }
.swatch { width:10px; height:10px; border-radius:3px; background:var(--tone); }
.cpu-bar { grid-column:1/-1; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.cpu-bar i { display:block; height:100%; width:calc(var(--meter, 0) * 100%); background:var(--tone); border-radius:inherit; }

/* ---------- Wazuh ---------- */
.badge {
  display:inline-flex; align-items:center; margin-left:6px; padding:2px 8px; border-radius:999px; vertical-align:2px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--accent-2);
  background:color-mix(in srgb, var(--accent-2) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.wazuh-card { grid-column:1/-1; }
.wazuh-card[data-tone="none"] { --tone:var(--line-strong); }
.wazuh-card .group-hosts { grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); column-gap:6px; }
.wazuh-hint { color:var(--muted); font-size:12.5px; line-height:1.6; margin:12px 0 6px; }
code { font:12px ui-monospace, SFMono-Regular, Menlo, monospace; padding:1px 5px; border-radius:5px; background:var(--raised); border:1px solid var(--line); color:var(--text); }
.back-link { display:inline-block; margin-bottom:14px; font-size:13px; text-decoration:none; }
.agent-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.agent-stats .detail-metric { background:var(--surface); box-shadow:var(--shadow); }
.agent-stats .detail-metric strong { display:flex; align-items:center; gap:8px; }
.agent-panel { margin-bottom:16px; }
.agent-body { padding:16px 18px; }
.agent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.agent-grid .agent-panel { margin-bottom:0; }
.agent-subhead { margin:18px 0 8px; }
.alert-legend { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:12px; }
.alert-legend span { display:inline-flex; align-items:center; gap:7px; }
.alert-legend small { color:var(--subtle); }
.alert-legend i { width:10px; height:10px; border-radius:3px; background:var(--lvl); }
.lvl-low { --lvl:var(--blue); fill:var(--blue); }
.lvl-medium { --lvl:#eab308; fill:#eab308; }
.lvl-high { --lvl:var(--orange); fill:var(--orange); }
.lvl-critical { --lvl:var(--red); fill:var(--red); }
.alert-graph svg { cursor:default; }
.alert-graph .alert-hit { fill:transparent; }
.alert-graph .alert-column.active .alert-hit { fill:var(--hover); }
.alert-graph .alert-column rect:not(.alert-hit) { opacity:.9; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--lvl) 55%, transparent)); }
.alert-graph .alert-column.active rect:not(.alert-hit) { opacity:1; }
.rule-list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.rule-list li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; background:var(--raised); font-size:12.5px; }
.rule-list li span:nth-child(2) { overflow-wrap:anywhere; }
.rule-list li strong { font-variant-numeric:tabular-nums; }
.resource-list { flex:1; min-width:190px; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.resource-list li span { display:block; color:var(--subtle); font-size:11.5px; font-weight:560; }
.resource-list li strong { display:block; margin-top:3px; font-weight:620; overflow-wrap:anywhere; }
.sca-list { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.sca-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.sca-top strong { font-weight:600; overflow-wrap:anywhere; }
.sca-score { font-size:20px; font-weight:720; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sca-bar { display:block; margin:8px 0; height:6px; }
.sca-list small { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--subtle); font-size:11.5px; }

/* ---------- Login ---------- */
body.locked { display:block; }
body.locked > .sidebar, body.locked > main { display:none; }
.login {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:32px 16px;
  background:
    radial-gradient(700px 420px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(600px 400px at 85% 100%, var(--glow-b), transparent 70%);
}
.login-card {
  position:relative; width:min(100%, 410px); padding:30px 30px 28px; border-radius:22px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-hover), 0 40px 90px -40px color-mix(in srgb, var(--accent) 45%, transparent);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  animation:rise .45s cubic-bezier(.2,.8,.2,1);
}
.login-card::before {
  content:""; position:absolute; inset:0 24px auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
@keyframes rise { from { opacity:0; transform:translateY(12px) scale(.98); } }
.login .login-brand { margin:0 0 26px; }
.login .brand span { display:block; }
.login-card h1 { font-size:24px; letter-spacing:-.03em; }
.login-lead { margin:6px 0 22px; color:var(--muted); font-size:13px; line-height:1.55; }
.login-lead strong { color:var(--text); }
.field { display:grid; gap:7px; margin-bottom:14px; color:var(--muted); font-size:12.5px; font-weight:560; }
.field input, .code-input { width:100%; min-height:44px; padding:10px 13px; border-radius:12px; font-size:14px; }
.password-wrap { position:relative; display:block; }
.password-wrap input { padding-right:46px; }
.reveal {
  position:absolute; right:5px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:9px; background:transparent; color:var(--subtle);
}
.reveal:hover, .reveal[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); }
.reveal svg, .login-foot svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button.primary {
  width:100%; min-height:44px; margin-top:6px; border:0; color:var(--on-accent); font-weight:650;
  background:linear-gradient(135deg, #6366f1, #8b5cf6 55%, #06b6d4); box-shadow:0 12px 26px -12px rgba(99,102,241,.75);
}
.button.primary:hover { background:linear-gradient(135deg, #575bf0, #7c4ff0 55%, #0aa5c0); }
.button.loading { color:transparent; position:relative; pointer-events:none; }
.button.loading::after {
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;
}
.button.loading:not(.primary)::after { border-color:var(--line-strong); border-top-color:var(--accent); }
.remember { display:flex; gap:11px; align-items:flex-start; margin:4px 0 12px; padding:10px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:var(--raised); transition:border-color .15s, background .15s; }
.remember:hover { border-color:var(--accent-line); }
.remember:has(input:checked) { border-color:var(--accent-line); background:var(--accent-soft); }
.remember input { width:17px; height:17px; min-height:0; margin:1px 0 0; padding:0; flex:none; accent-color:var(--accent); cursor:pointer; }
.remember strong { display:block; font-size:12.5px; font-weight:600; color:var(--text); }
.remember small { display:block; margin-top:2px; font-size:11.5px; color:var(--subtle); }
.login-error {
  margin:4px 0 8px; padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--red);
  background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid color-mix(in srgb, var(--red) 28%, transparent);
}
.code-icon, .security-icon {
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px; margin-bottom:16px; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.code-icon svg, .security-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.code-input { text-align:center; font-size:26px; font-weight:650; letter-spacing:.3em; font-variant-numeric:tabular-nums; padding-left:.3em; min-height:56px; }
.code-input::placeholder { color:var(--line-strong); }
#code-form .code-input { margin-bottom:8px; }
.login-back { display:block; margin:16px auto 0; font-size:12.5px; text-decoration:none; }
.login-foot { display:flex; align-items:center; gap:7px; color:var(--subtle); font-size:12px; }
.login-foot svg { width:14px; height:14px; }

/* ---------- Security dialog ---------- */
.security-button { position:relative; }
.security-button.needs-attention::after {
  content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 2px var(--surface-solid);
}
.dialog {
  width:min(calc(100% - 32px), 520px); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line-strong); border-radius:20px;
  background:var(--surface-solid); color:var(--text); box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
}
.dialog[open] { animation:rise .3s cubic-bezier(.2,.8,.2,1); }
.dialog::backdrop { background:rgba(5,8,15,.55); backdrop-filter:blur(4px); }
.dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 22px 0; }
.dialog-head .eyebrow { margin-bottom:6px; }
.dialog-head h2 { font-size:20px; }
.dialog-body { padding:18px 22px 22px; }
.security-state { display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:14px; border:1px solid var(--line); background:var(--raised); }
.security-state .security-icon { margin:0; flex:none; width:42px; height:42px; }
.security-state.on .security-icon { color:var(--mint); background:color-mix(in srgb, var(--mint) 12%, transparent); border-color:color-mix(in srgb, var(--mint) 30%, transparent); }
.security-state.off .security-icon { color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, transparent); border-color:color-mix(in srgb, var(--gold) 30%, transparent); }
.security-state p, .setup-steps p, .dialog-note { color:var(--muted); font-size:12.5px; line-height:1.55; margin-top:4px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.dialog-actions .button.primary { width:auto; margin:0; padding:0 18px; }
.dialog-note { margin-top:14px; }
.setup-steps { counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.setup-steps li { counter-increment:step; position:relative; padding-left:38px; }
.setup-steps li::before {
  content:counter(step); position:absolute; left:0; top:-2px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
}
.qr-box { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:12px; }
.qr { width:172px; height:172px; flex:none; padding:6px; border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.qr svg { display:block; width:100%; height:100%; }
.manual-key { flex:1; min-width:180px; display:grid; gap:8px; justify-items:start; color:var(--muted); font-size:12px; }
.manual-key code, .env-line code { font-size:13px; letter-spacing:.06em; padding:6px 9px; overflow-wrap:anywhere; user-select:all; }
.button.small { min-height:30px; padding:4px 10px; font-size:12px; }
.button.small svg { width:15px; height:15px; }
.setup-form { display:flex; gap:10px; margin-top:10px; }
.setup-form .code-input { flex:1; min-height:46px; font-size:20px; }
.setup-form .button.primary { width:auto; margin:0; padding:0 18px; min-height:46px; }
.env-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.env-line code { letter-spacing:0; }

.address-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.address-row { display:grid; align-content:start; justify-items:start; gap:4px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--raised); overflow-wrap:anywhere; }
.address-row > span { color:var(--muted); font-size:12px; font-weight:560; }
.address-row strong { font-size:16px; font-weight:680; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.address-row small { color:var(--subtle); font-size:11.5px; line-height:1.45; }
.address-row .pill { margin-top:2px; }
.address-note { display:block; margin-top:8px; color:var(--subtle); font-size:11.5px; }
.chip-close { display:grid; place-items:center; width:20px; height:20px; margin:-2px -6px -2px 2px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--muted); font-size:16px; line-height:1; }
.chip-close:hover { background:var(--hover); color:var(--text); }
.empty .button.small { margin-top:2px; }
.app-version { color:var(--subtle); font-size:10.5px; letter-spacing:.02em; }
.app-version:empty { display:none; }
/* ---------- Groups board ---------- */
.group-board {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(310px, 1fr); gap:14px; align-items:start;
  overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity;
}
.group-board > .empty { grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:var(--radius); }
.group-column { --tone:var(--mint); position:relative; display:flex; flex-direction:column; min-width:0; scroll-snap-align:start; }
.group-column::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--tone), transparent); }
.group-column[data-tone="bad"] { --tone:var(--red); }
.group-column[data-tone="warn"] { --tone:var(--gold); }
.group-column[data-tone="none"] { --tone:var(--line-strong); }
.group-column-head { display:grid; gap:10px; padding:16px 16px 12px; border-bottom:1px solid var(--line); }
.group-column-title h2 { display:flex; align-items:center; gap:4px; }
.group-column-title p { color:var(--muted); font-size:12px; margin-top:3px; }
.group-column-head .group-meter { margin:0; }
.group-column > .cause-note, .group-column > .wazuh-hint { margin:12px 12px 0; }
.group-column-list { display:grid; gap:6px; padding:10px; }
.group-column-list > .empty { min-height:90px; }
.host-item { border:1px solid var(--line); border-radius:12px; background:var(--raised); transition:border-color .15s, background .15s; }
.host-item:hover { border-color:var(--line-strong); }
.host-item[open] { border-color:var(--accent-line); background:color-mix(in srgb, var(--accent) 5%, var(--raised)); }
.host-item summary {
  display:flex; align-items:center; gap:11px; padding:10px 12px; cursor:pointer; list-style:none; border-radius:12px;
}
.host-item summary::-webkit-details-marker { display:none; }
.host-item summary:focus-visible { outline-offset:-2px; }
.host-item-title { flex:1; min-width:0; }
.host-item-title strong, .host-item-title small { display:block; overflow-wrap:anywhere; }
.host-item-title strong { font-weight:620; }
.host-item-title small { color:var(--muted); font-size:12px; margin-top:2px; }
.chevron { width:8px; height:8px; flex:none; margin:0 4px 3px 2px; border-right:1.6px solid var(--subtle); border-bottom:1.6px solid var(--subtle); transform:rotate(45deg); transition:transform .2s; }
.host-item[open] .chevron { transform:rotate(225deg); margin-bottom:-3px; }
.host-item-body { display:grid; gap:12px; padding:2px 12px 12px; border-top:1px solid var(--line); padding-top:12px; margin:0 0 0; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; margin:0; }
.facts dt { color:var(--subtle); font-size:11px; font-weight:600; letter-spacing:.02em; }
.facts dd { margin:2px 0 0; font-size:13px; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.host-item-problems > span { color:var(--subtle); font-size:11px; font-weight:600; }
.host-item-problems ul { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:5px; }
.host-item-problems li { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.host-item-problems li span:last-child { overflow-wrap:anywhere; }
.host-item-problems p { margin-top:4px; color:var(--muted); font-size:12.5px; }
.host-item-actions { display:flex; flex-wrap:wrap; gap:8px; }
.host-item .cause-note { font-size:12px; }
/* ---------- Summary ---------- */
.badge.zbx { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.summary-heading { display:flex; align-items:center; gap:8px; margin:28px 0 12px; font-size:15px; }
.summary-heading .badge { margin-left:0; }
#dashboard > .summary-heading:first-of-type { margin-top:0; }
.summary .stats { margin-bottom:14px; }
.donut-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:14px; margin-top:14px; }
.donut-card, .ranked-card { padding:16px 18px; }
.donut-card header p, .ranked-card header p { color:var(--muted); font-size:12px; margin-top:3px; }
.donut-body { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 22px; margin-top:12px; }
.donut { position:relative; width:150px; height:150px; flex:none; }
.donut svg { width:100%; height:100%; display:block; overflow:visible; }
.donut-track { fill:none; stroke:var(--line); stroke-width:16; }
.donut-arc { fill:none; stroke:var(--tone); stroke-width:16; cursor:pointer; transition:opacity .15s, stroke-width .15s; }
.donut-arc:hover { stroke-width:19; }
.donut-arc.dim, .donut-legend li.dim { opacity:.35; }
.donut-center { position:absolute; inset:22px; display:grid; place-content:center; text-align:center; pointer-events:none; }
.donut-center strong { font-size:24px; font-weight:740; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.donut-center span { margin-top:4px; color:var(--subtle); font-size:10.5px; font-weight:600; line-height:1.3; max-width:96px; overflow-wrap:anywhere; }
.donut-legend { flex:1 1 210px; max-width:440px; min-width:0; list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.donut-legend li { display:grid; grid-template-columns:10px minmax(0,1fr) auto 46px; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); cursor:default; transition:opacity .15s; }
.donut-legend strong { color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; text-align:right; }
.donut-legend small { color:var(--subtle); font-size:11.5px; text-align:right; font-variant-numeric:tabular-nums; }
.tone-good { --tone:var(--mint); } .tone-bad { --tone:var(--red); } .tone-warn { --tone:var(--gold); } .tone-muted { --tone:var(--subtle); }
.tone-sev5 { --tone:var(--red); } .tone-sev4 { --tone:var(--orange); } .tone-sev3 { --tone:#eab308; } .tone-sev2 { --tone:color-mix(in srgb, var(--gold) 55%, var(--subtle)); } .tone-sev1 { --tone:var(--blue); }
.swatch[class*="tone-"] { background:var(--tone); }
.ranked-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:14px; margin-top:14px; }
.ranked { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.ranked li { display:grid; gap:5px; }
.ranked li[data-open-agent] { cursor:pointer; border-radius:8px; }
.ranked li[data-open-agent]:hover .ranked-top span { color:var(--accent); }
.ranked-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:12.5px; }
.ranked-top > span:not(.pill) { overflow-wrap:anywhere; }
.ranked-top:not(:has(.pill)) { grid-template-columns:1fr auto; }
.ranked-top strong { font-variant-numeric:tabular-nums; }
.ranked-bar { height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.ranked-bar i { display:block; height:100%; width:calc(var(--meter, 0) * 100%); border-radius:4px; background:var(--tone, var(--accent)); }

/* Dos bloques del Resumen: Zabbix (índigo) y Wazuh (cian), cada uno con su cabecera y su franja de color. */
.summary-section {
  --section:var(--accent);
  position:relative; padding:20px clamp(14px,2vw,22px) 22px; border-radius:calc(var(--radius) + 4px);
  border:1px solid color-mix(in srgb, var(--section) 26%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--section) 7%, transparent), transparent 220px);
}
.summary-section::before {
  content:""; position:absolute; inset:0 22px auto; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--section), color-mix(in srgb, var(--section) 20%, transparent));
}
.summary-section + .summary-section { margin-top:28px; }
.wz-section { --section:var(--accent-2); }
.summary-section-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.summary-section-head .eyebrow { margin-bottom:4px; color:var(--section); }
.summary-section-head .eyebrow::before { background:var(--section); }
.summary-section-head h2 { font-size:19px; letter-spacing:-.02em; }
.summary-section-head p:last-child { margin-top:4px; color:var(--muted); font-size:12.5px; }
.summary-section-icon {
  display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; color:var(--section);
  background:color-mix(in srgb, var(--section) 14%, transparent); border:1px solid color-mix(in srgb, var(--section) 30%, transparent);
}
.summary-section-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.summary-section .root-causes:not(:empty) { margin-bottom:14px; }

/* ---------- Problems ---------- */
.problem-list { display:grid; gap:8px; }
.problem-list > .empty { border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--raised); }
.problem-entry { background:var(--surface); box-shadow:var(--shadow); box-shadow:inset 4px 0 0 var(--sev, var(--line-strong)), var(--shadow); }
.problem-entry[data-sev="5"], .problem-items li[data-sev="5"] { --sev:var(--red); }
.problem-entry[data-sev="4"], .problem-items li[data-sev="4"] { --sev:var(--orange); }
.problem-entry[data-sev="3"], .problem-items li[data-sev="3"] { --sev:var(--gold); }
.problem-entry[data-sev="2"], .problem-items li[data-sev="2"] { --sev:color-mix(in srgb, var(--gold) 60%, transparent); }
.problem-entry[data-sev="1"], .problem-items li[data-sev="1"] { --sev:var(--blue); }
.problem-entry summary { padding:12px 14px 12px 18px; }
.problem-entry .host-item-title strong { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.problem-entry .badge { margin-left:0; font-size:10px; padding:1px 7px; }
.problem-entry .host-item-body { padding-left:18px; }
.problem-items { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.problem-items li { padding:9px 12px; border-radius:9px; background:var(--raised); box-shadow:inset 3px 0 0 var(--sev, var(--line-strong)); }
.problem-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.problem-line strong { font-weight:600; overflow-wrap:anywhere; }
.problem-items small { display:block; margin-top:5px; color:var(--muted); font-size:11.5px; }
.problem-items .problem-context { margin-top:6px; }
.problem-levels { color:var(--muted); font-size:12px; }
.problem-rules > span { color:var(--subtle); font-size:11px; font-weight:600; }
.problem-rules ol { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.problem-rules li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; font-size:12.5px; }
.problem-rules li span:nth-child(2) { overflow-wrap:anywhere; }
/* ---------- Settings ---------- */
.user-chip {
  display:inline-flex; align-items:center; gap:7px; max-width:160px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--text); background:var(--raised); border:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); flex:none; }
.settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; }
.settings-nav { display:grid; gap:3px; padding:12px 10px; position:sticky; top:80px; }
.settings-nav .menu-label { margin:2px 8px 8px; }
.settings-nav button[aria-current]::before { left:-11px; }
.settings-content { display:grid; gap:14px; min-width:0; }
.user-form { padding:16px 18px; margin:0 16px 4px; box-shadow:none; background:var(--raised); }
.user-form h3 { margin-bottom:12px; }
.user-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; }
.user-form .field .select { width:100%; }
.user-form .dialog-actions .button.primary { min-height:38px; }
.settings-result { padding:18px; }
.settings-result .setup-steps { margin-top:16px; }
.settings-result .env-line code { overflow-wrap:anywhere; word-break:break-all; }
.user-list { list-style:none; margin:0; padding:8px; display:grid; gap:6px; }
.user-row, .session-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 14px; padding:12px 14px;
  border-radius:12px; background:var(--raised); border:1px solid var(--line);
}
.session-row { grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr) auto; }
.user-row.blocked { opacity:.75; border-style:dashed; }
.avatar {
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-weight:700; color:var(--on-accent);
  background:linear-gradient(135deg, #6366f1, #06b6d4);
}
.user-main strong { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:650; }
.user-main small { display:block; margin-top:3px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.user-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.user-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.user-confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; max-width:420px; font-size:12px; color:var(--muted); }
.pill.role-admin { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.button.danger { color:#fff; border-color:transparent; background:var(--red); }
.button.danger:hover { background:color-mix(in srgb, var(--red) 85%, #000); }
.button.danger-outline { color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, transparent); }
.button.danger-outline:hover { background:color-mix(in srgb, var(--red) 10%, transparent); border-color:var(--red); }
.session-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.settings-content > .chart-note { margin-top:0; }
.settings-content .cause-note { margin:0 16px 8px; }

/* ---------- Settings (v3) ---------- */
.pill.role-write { color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 12%, transparent); border-color:color-mix(in srgb, var(--accent-2) 32%, transparent); }
.small-select select { min-height:30px; padding:3px 28px 3px 9px; font-size:12px; }
.user-row { grid-template-columns:auto minmax(0,1fr) auto; }
.reset-form { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; padding:12px; border-radius:10px; background:var(--raised); border:1px dashed var(--line-strong); }
.reset-form .dialog-actions, .reset-form .dialog-note { grid-column:1 / -1; margin:0; }
.role-help { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; color:var(--muted); font-size:12px; }
.settings-message { margin:12px 16px 4px !important; }
.settings-content > .cause-note { margin:0; }
.stack-form { display:grid; gap:4px; }
.stack-form h3 { margin-bottom:8px; }
.dialog-actions.wrap { flex-wrap:wrap; }
.integration .panel-head h2 { display:flex; align-items:center; gap:6px; }
.integration-body { display:grid; gap:12px; padding:16px 18px 18px; }
.integration .check { display:flex; align-items:center; gap:10px; color:var(--text); font-size:13px; font-weight:560; }
.integration-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:4px 16px; }
.integration .field small { color:var(--subtle); font-size:11.5px; font-weight:500; line-height:1.45; }
.integration .field input { min-height:40px; }
.pin-field input { font:12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.integration-advanced { border-top:1px solid var(--line); padding-top:12px; }
.integration-advanced summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:13px; margin-bottom:10px; }
.integration .dialog-actions { margin-top:4px; }
.integration .dialog-actions .button.primary { width:auto; margin:0; padding:0 18px; }
.test-result { display:grid; gap:8px; }
.test-line { padding:10px 12px; border-radius:10px; font-size:12.5px; line-height:1.5; border:1px solid var(--line); background:var(--raised); }
.test-line.ok { border-color:color-mix(in srgb, var(--mint) 35%, transparent); background:color-mix(in srgb, var(--mint) 9%, transparent); }
.test-line.bad { border-color:color-mix(in srgb, var(--red) 35%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); }
.cert-box { display:grid; gap:8px; justify-items:start; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); background:color-mix(in srgb, var(--gold) 8%, transparent); }
.cert-box .facts { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
.fingerprint { font-size:11.5px; overflow-wrap:anywhere; word-break:break-all; }
.cert-box .button.primary { width:auto; margin:0; padding:0 14px; min-height:32px; }
#install-form code { font-size:11.5px; }

/* ---------- Router MikroTik ---------- */
.router-panel { display:block; padding:0; border-radius:14px; border:1px solid var(--line); background:var(--raised); }
.router-head { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; list-style:none; border-radius:14px; }
.router-head::-webkit-details-marker { display:none; }
.router-head:hover { background:var(--hover); }
.router-title { flex:1; min-width:0; }
.router-chevron { flex:none; width:8px; height:8px; margin:0 4px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; }
.router-panel[open] > .router-head .router-chevron { transform:rotate(45deg); }
.router-panel:not([open]) > .router-head [data-router-action="reload"] { display:none; }
.router-body { display:grid; gap:12px; padding:0 16px 16px; }
.router-head p { margin-top:4px; color:var(--muted); font-size:12.5px; }
.router-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; }
.router-card { padding:14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.router-card h4 { font-size:13px; font-weight:650; margin:0 0 10px; }
.forward-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:4px 12px; align-items:end; }
.forward-fields .field input { min-height:38px; }
.forward-description { grid-column:span 2; }
.protocol-field { border:0; padding:0; margin:0 0 14px; }
.protocol-field legend { color:var(--muted); font-size:12.5px; font-weight:560; margin-bottom:7px; padding:0; }
.protocol-field .period { width:max-content; }
.protocol-field label { position:relative; }
.protocol-field input { position:absolute; opacity:0; width:1px; height:1px; }
.protocol-field span { display:inline-flex; align-items:center; min-height:28px; padding:0 14px; border-radius:7px; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
.protocol-field input:checked + span { color:var(--on-accent); background:var(--accent); }
.protocol-field input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.router-card .dialog-actions .button.primary { width:auto; margin:0; padding:0 18px; }
.forward-table td, .forward-table th { padding:9px 10px; }
.forward-table td:first-child { box-shadow:none; }
.muted-row td { opacity:.55; }
.router-danger { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; border-color:color-mix(in srgb, var(--red) 30%, var(--line)); }
.router-danger p { color:var(--muted); font-size:12.5px; }
.reboot-form { display:grid; gap:6px; min-width:min(100%, 360px); }
.reboot-form .dialog-actions { margin-top:0; }
.router-message { padding:9px 12px; border-radius:10px; font-size:12.5px; border:1px solid color-mix(in srgb, var(--mint) 35%, transparent); background:color-mix(in srgb, var(--mint) 9%, transparent); }
.router-message.bad { border-color:color-mix(in srgb, var(--red) 35%, transparent); background:color-mix(in srgb, var(--red) 8%, transparent); }
.router-audit summary { cursor:pointer; font-weight:600; font-size:13px; }
.router-audit ol { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:5px; font-size:12.5px; color:var(--muted); }
.router-audit li strong { color:var(--text); }
.router-audit li.bad { color:var(--red); }
.router-audit li small { display:block; color:var(--subtle); font-size:11px; }
.router-help summary { cursor:pointer; padding:14px 18px; font-weight:600; }
.router-help .env-line code { white-space:pre-wrap; letter-spacing:0; font-size:11.5px; }

.update-state { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--raised); }
.update-state p { margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.5; }
.update-state.ok { border-color:color-mix(in srgb, var(--mint) 35%, transparent); background:color-mix(in srgb, var(--mint) 8%, transparent); }
.update-state.available { display:block; border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:var(--accent-soft); }
.update-state.busy { border-color:color-mix(in srgb, var(--gold) 40%, transparent); background:color-mix(in srgb, var(--gold) 8%, transparent); }
.update-spinner { width:20px; height:20px; flex:none; margin-top:2px; border-radius:50%; border:2.5px solid var(--line-strong); border-top-color:var(--accent); animation:spin .8s linear infinite; }
.update-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
.update-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.update-list li { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 12px; border-radius:9px; background:var(--raised); font-size:12.5px; }
.update-list li span { overflow-wrap:anywhere; }
.update-list li small { color:var(--subtle); font-variant-numeric:tabular-nums; }
.panel-head .button.primary.update-apply { width:auto; margin:0; padding:0 16px; min-height:36px; }
.cause-note .env-line { margin:8px 0; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agent-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agent-grid { grid-template-columns:1fr; }
}
@media (max-width:1050px) {
  .settings-layout { grid-template-columns:1fr; }
  .settings-nav { position:static; display:flex; flex-wrap:wrap; }
  .settings-nav .menu-label { display:none; }
  .settings-nav button { width:auto; }
  .session-row { grid-template-columns:auto minmax(0,1fr) auto; }
  .session-facts { grid-column:2 / -1; grid-row:2; }
  body { grid-template-columns:200px minmax(0,1fr); }
}
@media (max-width:750px) {
  .group-board { grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; }
  body { display:block; }
  .sidebar { position:sticky; z-index:6; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:10px 14px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px; }
  .brand { margin:0; }
  .brand-mark { width:30px; height:30px; border-radius:9px; }
  .brand-mark svg { width:18px; }
  .brand strong { font-size:17px; }
  .brand span, .menu-label, .sidebar-foot { display:none; }
  nav { display:flex; flex-wrap:wrap; gap:3px; }
  nav button { min-height:34px; width:auto; padding:5px 9px; gap:6px; font-size:12.5px; }
  nav button[aria-current]::before { display:none; }
  nav svg { width:15px; height:15px; }
  .topbar { position:static; min-height:50px; flex-wrap:nowrap; }
  .breadcrumb { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .content { padding-top:22px; }
  .host-grid { grid-template-columns:1fr; gap:16px; }
  .splitter { display:none; }
}
@media (max-width:520px) {
  .charts { grid-template-columns:1fr; }
  .stats { gap:10px; }
  .stat { padding:14px; }
  .stat strong { font-size:26px; }
  .updated { display:none; }
  .top-actions { flex-wrap:nowrap; }
  #refresh { width:36px; padding:0; gap:0; font-size:0; }
  .chart-card { padding-left:13px; padding-right:13px; }
  .detail-metrics, .address-grid, .user-form-grid, .reset-form, .cert-box .facts, .forward-fields, .update-facts { grid-template-columns:1fr; }
  .update-list li { grid-template-columns:auto 1fr; }
  .update-list li small { grid-column:2; }
  .forward-description { grid-column:auto; }
  .user-row, .session-row { grid-template-columns:auto minmax(0,1fr); }
  .user-actions, .session-facts { grid-column:1 / -1; justify-content:flex-start; }
  .user-chip { display:none; }
  .zoom-hint { margin-left:0; text-align:left; }
  .root-cause-body { padding-left:0; }
  #group-search { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}


/* ---------- Diseño plano: sin degradados, reflejos ni morado ---------- */
body { background:var(--bg); background-attachment:scroll; }
.login { background:var(--bg); }
.sidebar, .topbar, .button, .icon-button, .period, .panel, .stat, .login-card, input, select, .select, .dialog::backdrop {
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.topbar { background:var(--bg); }
.brand-mark { background:var(--text); color:var(--bg); box-shadow:none; }
nav button[aria-current]::before { background:var(--text); }
nav button[aria-current] svg { color:var(--text); }
.eyebrow::before { background:var(--subtle); }
.stat::before, .stat::after, .login-card::before { display:none; }
.stat:hover, .stat:focus-visible { transform:none; border-color:var(--line-strong); }
.login-card { box-shadow:none; animation:none; }
.button.primary, .button.primary:hover, .period button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); box-shadow:none; }
.button.primary:hover { opacity:.88; }
.chart-head h3::before { box-shadow:none; }
.graph .bar, .alert-graph .alert-column rect:not(.alert-hit) { filter:none; }
.root-cause { background:color-mix(in srgb, var(--tone) 7%, var(--surface)); }
.group-card::before { background:var(--tone); opacity:.8; }
.badge { color:var(--muted); background:var(--raised); border-color:var(--line-strong); }
.pill.consequence, .host-option small.affected { color:var(--muted); }
.pill.consequence { border-color:var(--line-strong); background:var(--raised); }
.cause-note:not(.root) { border-color:var(--line-strong); background:var(--raised); }
.ring-0 { --tone:var(--chart-a); } .ring-1 { --tone:var(--chart-b); }
.cpu-arc { stroke:var(--tone, var(--chart-a)); }
.eyebrow { color:var(--muted); }
/* Barras de progreso de Wazuh en azul */
#wazuh-summary-body .stat-meter i, #wazuh-summary-body .ranked-bar i,
.wazuh-card .stat-meter i, #agent-detail .cpu-bar i, #agent-detail .ranked-bar i, #agent-detail .stat-meter i { background:var(--blue); }
.summary-section { background:transparent; border-color:var(--line); }
.summary-section::before { display:none; }
.summary-section-head .eyebrow { color:var(--muted); }
.summary-section-head .eyebrow::before { background:var(--subtle); }
.group-column::before { background:var(--tone); opacity:.8; }
.protocol-field input:checked + span { background:var(--accent); color:var(--on-accent); }
.avatar { background:var(--accent); color:var(--on-accent); }

/* ---------- Recursos del equipo (plantilla Nexus - Equipo) ---------- */
.chart-cpu, .trace-cpu { --trace:var(--orange); }
.chart-memory, .trace-memory { --trace:var(--mint); }
.host-section { display:flex; align-items:center; justify-content:space-between; margin:12px 10px 4px; color:var(--subtle); font-size:10.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.host-section:first-child { margin-top:2px; }
.host-section span { min-width:20px; padding:1px 7px; border-radius:999px; background:var(--raised); border:1px solid var(--line); text-align:center; letter-spacing:0; }
.host-option small.usage { color:var(--muted); font-variant-numeric:tabular-nums; }
.resources { display:grid; gap:12px; }
.resources-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.resources-head small { color:var(--muted); font-size:12.5px; }
.resource-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:12px; align-items:stretch; }
.resource-facts { flex:1; min-width:180px; }
.cpu-head .pill.good-pill { color:var(--mint); border-color:color-mix(in srgb, var(--mint) 30%, transparent); }
.disk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:10px; margin-top:12px; }
.disk { display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); min-width:0; }
.cpu-donut.small { width:96px; height:96px; }
.cpu-donut.small .cpu-center strong { font-size:20px; }
.cpu-donut.small .cpu-center strong small { font-size:11px; }
.cpu-donut.small .cpu-center span { font-size:9px; margin-top:3px; }
.disk-info { display:grid; gap:3px; min-width:0; justify-items:start; }
.disk-info strong { font-size:14px; font-weight:650; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.disk-info small { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.disk-info .pill { margin-top:4px; }
.pill.good-pill { color:var(--mint); border-color:color-mix(in srgb, var(--mint) 30%, transparent); }
.pill.warn { color:var(--gold); border-color:color-mix(in srgb, var(--gold) 30%, transparent); }
.pill.bad-pill { color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.trend { display:block; width:100%; height:auto; margin-top:10px; }
.trend-grid { stroke:var(--plot-grid); stroke-width:1; }
.trend-label { fill:var(--subtle); font-size:10.5px; font-variant-numeric:tabular-nums; }
.trend-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.trend-line.trend-cpu { stroke:var(--orange); }
.trend-line.trend-memory { stroke:var(--mint); }
.swatch.trend-cpu { background:var(--orange); }
.swatch.trend-memory { background:var(--mint); }
.trend-legend { list-style:none; display:flex; flex-wrap:wrap; gap:6px 20px; margin:8px 0 0; padding:0; font-size:12.5px; }
.trend-legend li { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.trend-legend small { color:var(--muted); font-weight:500; }

/* ---------- Servidores y PC: pestañas, En directo, Rendimiento y Procesos ---------- */
.tone-cpu { --tone:#a78bfa; } .tone-mem { --tone:#38bdf8; } .tone-in { --tone:#a78bfa; } .tone-out { --tone:#38bdf8; }
.tone-read { --tone:#f59e0b; } .tone-write { --tone:#f472b6; }
.device-tabs { display:flex; gap:4px; padding:0 18px; border-bottom:1px solid var(--line); overflow-x:auto; }
.device-tabs button { position:relative; border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; padding:12px 14px; white-space:nowrap; }
.device-tabs button:hover { color:var(--text); }
.device-tabs button[aria-selected="true"] { color:var(--text); }
.device-tabs button[aria-selected="true"]::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--text); }
.live { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--raised); }
.live-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px; margin-bottom:12px; }
.live-title { display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:13.5px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--red); animation:live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity:.35; } }
.live-head small { color:var(--subtle); font-size:11.5px; }
.live-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:10px; }
.live-card { display:grid; gap:6px; padding:12px 12px 8px; border-radius:10px; border:1px solid var(--line); background:var(--surface); min-width:0; }
.live-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.live-top span { color:var(--muted); font-size:12.5px; }
.live-top strong { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.live-legend, .perf-legend { display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:11.5px; min-height:0; }
.live-legend span, .perf-legend span { display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.live-legend .swatch, .perf-legend .swatch, .lc-tip .swatch { width:8px; height:8px; border-radius:50%; background:var(--tone); display:inline-block; }
.live-chart { height:64px; }
.live-empty { margin:0; color:var(--subtle); font-size:12px; line-height:64px; text-align:center; }
.lc { display:block; overflow:visible; }
.lc-grid { stroke:var(--plot-grid); stroke-width:1; }
.lc-label { fill:var(--subtle); font-size:10.5px; font-variant-numeric:tabular-nums; }
.lc-line { fill:none; stroke:var(--tone); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.live-chart { overflow:hidden; }
.lc-area { fill:var(--tone); opacity:.12; stroke:none; }
.lc-cursor { stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3; }
.lc-dot { fill:var(--tone); stroke:var(--surface); stroke-width:2; }
.perf-chart, .live-chart { position:relative; min-width:0; }
.lc-tip { position:absolute; top:4px; z-index:2; display:grid; gap:3px; padding:7px 10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-solid);
  font-size:11.5px; color:var(--muted); pointer-events:none; white-space:nowrap; }
.lc-tip strong { color:var(--text); font-weight:650; }
.lc-tip span { display:flex; align-items:center; gap:6px; }
.lc-tip b { color:var(--text); font-weight:650; margin-left:auto; padding-left:8px; }
.perf-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.perf-toolbar small { color:var(--subtle); font-size:11.5px; }
.perf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:12px; }
.perf-card { display:grid; gap:8px; min-width:0; }
.perf-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:4px 12px; }
.perf-head h3 { font-size:14px; }
.perf-head small { display:block; color:var(--subtle); font-size:11.5px; margin-top:3px; }
.perf-stats { color:var(--muted) !important; font-variant-numeric:tabular-nums; }
.perf-legend small { color:var(--subtle); }
.perf-chart { min-height:190px; }
.volume-list { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:12px 28px; }
.volume-list li { display:grid; grid-template-columns:minmax(70px,auto) minmax(80px,1fr) auto; align-items:center; gap:4px 12px; font-size:12.5px; }
.volume-list small { grid-column:2 / -1; color:var(--subtle); font-size:11.5px; text-align:right; }
.volume-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.volume-list strong { font-variant-numeric:tabular-nums; }
.volume-bar { height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.volume-bar i { display:block; height:100%; width:calc(var(--meter, 0) * 100%); border-radius:inherit; background:var(--mint); }
.volume-bar.warn i { background:var(--gold); } .volume-bar.bad i { background:var(--red); }
.proc-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.proc-toolbar input { flex:1 1 220px; max-width:340px; min-height:36px; }
.proc-toolbar small { color:var(--subtle); font-size:11.5px; }
.proc-table th button { border:0; background:transparent; padding:0; color:inherit; font:inherit; font-weight:650; cursor:pointer; }
.proc-table th button[aria-pressed="true"] { color:var(--text); }
.proc-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.proc-table td.proc-name { font-weight:600; overflow-wrap:anywhere; }
.proc-table td small { color:var(--subtle); }
.proc-table td:first-child { box-shadow:none; }
.proc-cpu { min-width:110px; }
.proc-bar { display:inline-block; width:46px; height:5px; margin-right:8px; vertical-align:middle; border-radius:3px; background:var(--line); overflow:hidden; }
.proc-bar i { display:block; height:100%; width:calc(var(--meter, 0) * 100%); background:#a78bfa; }
.lc-line-c { fill:none; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; opacity:.9; }
.lc-dot-c { stroke:var(--surface); stroke-width:1.5; }
.color-dot { width:9px; height:9px; flex:none; }
.lc-more { color:var(--subtle); }
.core-card { display:grid; gap:10px; align-content:start; }
.core-body { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.core-body .cpu-donut { width:140px; height:140px; }
.core-chart { flex:1 1 260px; min-width:0; min-height:200px; }
.core-chips { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:4px 12px; font-size:12px; }
.core-chips li { display:flex; align-items:center; gap:6px; min-width:0; }
.core-chips span { color:var(--muted); white-space:nowrap; }
.core-chips strong { margin-left:auto; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.perf-wide { grid-column:1 / -1; }
.core-avg-title { margin:4px 0 6px; color:var(--subtle); font-size:11.5px; }
.live-empty { line-height:1.4; padding-top:14px; font-size:11.5px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.resource-grid .core-card { grid-column:1 / -1; }
.core-chips li[data-core] { cursor:default; border-radius:6px; padding:1px 4px; margin:0 -4px; }
.link-note { margin:8px 0 0; color:var(--subtle); font-size:11.5px; }
.problem-split { margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--line); color:var(--subtle); font-size:10.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.link-banner { margin-bottom:4px; }
.security-donuts { margin-top:4px; }
.badge + .badge { margin-left:4px; }

/* ---------- Menú lateral plegable ---------- */
.brand { position:relative; }
.nav-toggle { display:grid; place-items:center; width:28px; height:28px; margin-left:auto; flex:none; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); }
.nav-toggle:hover { color:var(--text); background:var(--hover); }
.nav-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
body { transition:grid-template-columns .2s ease; }
@media (min-width:751px) {
  body.nav-collapsed { grid-template-columns:72px minmax(0,1fr); }
  body.nav-collapsed .sidebar { padding-left:12px; padding-right:12px; overflow:hidden; }
  body.nav-collapsed .brand { flex-direction:column; margin:0 0 28px; gap:12px; }
  body.nav-collapsed .brand-text, body.nav-collapsed .menu-label, body.nav-collapsed .sidebar-foot > div { display:none; }
  body.nav-collapsed .nav-toggle { margin:0; }
  body.nav-collapsed .nav-toggle svg { transform:rotate(180deg); }
  body.nav-collapsed .sidebar nav button { justify-content:center; padding:8px 0; font-size:0; gap:0; position:relative; }
  body.nav-collapsed .sidebar nav button svg { width:20px; height:20px; }
  body.nav-collapsed .sidebar nav button[aria-current]::before { left:-12px; }
  body.nav-collapsed .nav-count { position:absolute; top:2px; right:2px; font-size:10px; min-width:16px; padding:0 4px; }
  body.nav-collapsed .sidebar-foot { justify-content:center; padding:10px 0; }
}
@media (max-width:750px) { .nav-toggle { display:none; } }

/* ---------- Ficha del equipo ampliada (ocupa toda la página, con el menú visible) ---------- */
body.host-expanded #hosts .intro, body.host-expanded .host-list-panel, body.host-expanded #host-splitter { display:none; }
body.host-expanded .host-grid { grid-template-columns:minmax(0,1fr) !important; }
body.host-expanded #host-detail { min-height:calc(100vh - 140px); }
.agent-pane { display:grid; gap:16px; }
.agent-pane .agent-stats { margin-bottom:0; }

/* ---------- Pestañas de Hosts y apodos ---------- */
.host-tabs { padding:0 10px; }
.host-tabs button { flex:1; display:inline-flex; justify-content:center; align-items:center; gap:7px; }
.host-tabs button span { min-width:20px; padding:1px 7px; border-radius:999px; background:var(--raised); border:1px solid var(--line); font-size:11px; color:var(--muted); }
.host-option small.option-note { color:var(--subtle); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.host-note { margin:0; padding:12px 18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.55; background:var(--raised); }
.label-form { padding:14px 18px; border-bottom:1px solid var(--line); background:var(--raised); }
.label-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:4px 16px; }
.label-form textarea { width:100%; resize:vertical; min-height:44px; padding:10px 13px; border-radius:12px; border:1px solid var(--button-edge); background:var(--field); color:var(--text); font:inherit; font-size:14px; }
.label-form .field small { color:var(--subtle); font-size:11.5px; }
.label-form .dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.label-form .button.primary { width:auto; margin:0; padding:0 18px; }
@media (max-width:750px) { .label-grid { grid-template-columns:1fr; } }
.host-jump select { min-height:36px; max-width:240px; }

/* Sin barras de desplazamiento en las pestañas (Windows las mostraba por el subrayado de la pestaña activa). */
.device-tabs { overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.device-tabs::-webkit-scrollbar { display:none; }
.device-tabs button[aria-selected="true"]::after { bottom:0; }
.host-tabs { overflow:hidden; }
.host-tabs button { min-width:0; padding-left:8px; padding-right:8px; }
.badge.origin { color:var(--muted); background:var(--raised); border-color:var(--line-strong); }
.badge.origin.unified { color:var(--mint); background:color-mix(in srgb, var(--mint) 10%, transparent); border-color:color-mix(in srgb, var(--mint) 35%, transparent); }

/* Rendimiento: RAM y discos en anillos junto a las gráficas */
.perf-donut .cpu-body { justify-content:center; }
.perf-donut .cpu-donut:not(.small) { width:150px; height:150px; }
.perf-donut .disk-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }

/* La lista de equipos se queda fija al bajar por la ficha (con su propio desplazamiento) */
@media (min-width:751px) {
  .host-list-panel { position:sticky; top:78px; max-height:calc(100vh - 94px); display:flex; flex-direction:column; }
  .host-list-panel #host-list { flex:1 1 auto; min-height:0; overflow-y:auto; }
}

/* Ancho de la lista bloqueado: sin barra de división */
#host-splitter { display:none !important; }

/* ---------- Ajustes → Cuenta y cerrar sesión ---------- */
#settings-open { position:relative; }
#settings-open.needs-attention::after, .settings-nav button.needs-attention::after {
  content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--surface-solid);
}
.settings-nav button.needs-attention { position:relative; }
.settings-nav button.needs-attention::after { top:50%; right:12px; transform:translateY(-50%); }
.settings-nav .settings-logout { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); color:var(--red); }
.settings-nav .settings-logout:hover { color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent); }
.settings-nav .settings-logout svg { color:var(--red); }
.account-panel .security-state { margin-bottom:14px; }
.account-panel .dialog-actions { justify-content:flex-start; }
.account-panel .button.primary { width:auto; margin:0; padding:0 18px; }
@media (max-width:1050px) { .settings-nav .settings-logout { margin-top:0; padding-top:6px; border-top:0; } }

/* Actualizar el agente de Wazuh */
.upgrade-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:12px; padding:12px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); background:color-mix(in srgb, var(--gold) 7%, var(--raised)); }
.upgrade-box.done { border-color:color-mix(in srgb, var(--mint) 35%, var(--line)); background:color-mix(in srgb, var(--mint) 7%, var(--raised)); }
.upgrade-box.failed { border-color:color-mix(in srgb, var(--red) 35%, var(--line)); background:color-mix(in srgb, var(--red) 7%, var(--raised)); }
.upgrade-box strong { font-size:13.5px; }
.upgrade-box p { margin:3px 0 0; color:var(--muted); font-size:12.5px; }
.upgrade-box .upgrade-status { color:var(--text); }
.upgrade-box .button.primary { width:auto; margin:0; padding:0 18px; min-height:38px; }
.wazuh-down { margin:6px 6px 10px; font-size:12.5px; }

/* ---------- Sin barra superior: usuario y acciones al pie del menú lateral ---------- */
.sidebar-foot { display:grid; gap:10px; padding:12px; }
.sidebar-user { display:flex; align-items:center; gap:11px; min-width:0; }
.sidebar-user > div { min-width:0; }
.sidebar-user strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.sidebar-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-foot .updated { display:block; font-size:11px; color:var(--subtle); }
.sidebar-foot .updated::before { display:none; }
.sidebar-actions { display:flex; gap:6px; }
.sidebar-actions .icon-button { flex:1; width:auto; min-height:34px; }
.content { padding-top:clamp(20px,3vw,32px); }
@media (min-width:751px) {
  body.nav-collapsed .sidebar-foot { padding:8px 4px; justify-items:center; }
  body.nav-collapsed .sidebar-user { justify-content:center; }
  body.nav-collapsed .sidebar-user > div { display:none; }
  body.nav-collapsed .sidebar-actions { flex-direction:column; }
  body.nav-collapsed .sidebar-actions .icon-button { width:36px; flex:none; }
  body.nav-collapsed .sidebar-foot > div { display:flex; }
}
@media (max-width:750px) {
  .sidebar .sidebar-foot { display:flex; margin-left:auto; padding:0; border:0; background:transparent; align-items:center; gap:8px; }
  .sidebar-user small { display:none !important; }
  .sidebar-actions .icon-button { flex:none; width:34px; min-height:34px; }
}
@media (max-width:1050px) { .settings-nav button.needs-attention::after { position:static; transform:none; display:inline-block; margin-left:6px; box-shadow:none; } }