/* ══════════════════════════════════════════════════════════════════
   ARRIBADA MONITOR — sistema visual portado de AI.Monitor (Mission Control)
   Secciones: TOKENS / RESET / LAYOUT / NAV / TOPBAR / BOTONES / KPI /
              PANELES / TABLAS / BADGES / FORMS / TOAST / HEATMAP /
              BUDGET / UTILIDADES / RESPONSIVE
   Consola oscura unica. Sin tema claro.
   ══════════════════════════════════════════════════════════════════ */

@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:700; font-display:swap; src:url("vendor/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:800; font-display:swap; src:url("vendor/fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url("vendor/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:600; font-display:swap; src:url("vendor/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:700; font-display:swap; src:url("vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg:          #090b12;
  --panel:       #121722;
  --panel-2:     #1b2233;
  --ink:         #f8fafc;
  --soft:        #94a3b8;
  --muted:       #64748b;
  --line:        #1d2636;
  --line-strong: #2a3447;
  --primary:     #60a5fa;
  --primary-on:  #06101d;
  --primary-soft:rgba(96, 165, 250, 0.14);
  --cost:        #fbbf24;
  --cost-soft:   rgba(251, 191, 36, 0.12);
  --save:        #26de81;
  --save-soft:   rgba(38, 222, 129, 0.12);
  --danger:      #ff4757;
  --danger-soft: rgba(255, 71, 87, 0.12);
  --warn:        #fbbf24;
  --warn-soft:   rgba(251, 191, 36, 0.12);
  /* Paleta categorica para paneles multi-serie (Overview) -- 5 tokens de estado no alcanzan
     para 7+ apps en el mismo chart. Elegida para distinguirse en deuteranopia y sobre --bg. */
  --series-1:    #60a5fa;
  --series-2:    #26de81;
  --series-3:    #fbbf24;
  --series-4:    #f472b6;
  --series-5:    #a78bfa;
  --series-6:    #22d3ee;
  --series-7:    #fb923c;
  --series-8:    #94a3b8;
  --shadow:      0 24px 72px rgba(0,0,0,0.42);
  --radius:      4px;
  --sidebar:     280px;
  --topbar:      82px;
  --font-display:"Inter", system-ui, sans-serif;
  --font-ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

/* ── RESET ── */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; overflow-x:hidden; max-width:100vw; background: var(--bg); }
html { background: var(--bg); }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 8% -14%, color-mix(in oklab, var(--primary), transparent 88%), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--panel), var(--bg) 72%), var(--bg) 32%),
    var(--bg);
}
h1,h2,h3,h4 { font-family: var(--font-display); margin:0; }
p { margin:0; color: var(--soft); }
a { color: var(--primary); text-decoration:none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 58%, transparent); outline-offset: 2px; }
table { width:100%; min-width:700px; border-collapse:collapse; }
th { font: 900 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--soft); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:12px 14px; font-size:13px; border-bottom:1px solid var(--line); }
td.num, th.num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
td.mono-cell { font-family:var(--font-mono); font-size:11px; color:var(--soft); }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
td.spark { width:124px; padding:8px 14px; }
.spark-svg { display:block; }
.spark-empty { color:var(--muted); font-family:var(--font-mono); }
label { display:block; font: 900 11px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:6px; }
input, select, textarea {
  width:100%; min-height:40px; padding:0 12px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink);
  font: 13px var(--font-ui);
}
input[type="checkbox"] { width:auto; min-height:auto; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
code { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── LAYOUT ── */
.app { display:grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height:100vh; }
.sidebar {
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-rows:auto 1fr auto; gap:28px;
  padding:24px 18px; border-right:1px solid var(--line);
}
.main { display:grid; grid-template-rows: var(--topbar) minmax(0,1fr); position:relative; }
/* align-content:start es la parte que importa: sin esto, el default (normal -> stretch)
   infla la única fila (.view.active) para llenar todo el alto del viewport cuando el
   contenido real es más corto -- y esa fila, al ser grid, reparte el sobrante entre SUS
   propias filas (kpi-grid, panel-grid), agrandando cada .kpi mucho más que su contenido. */
.content { padding:26px; display:grid; align-content:start; gap:18px; }
.content > * { animation: fadeIn 180ms ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.view { display:none; }
.view.active { display:grid; align-content:start; gap:18px; }

.panel-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:18px; }
.span-3{grid-column:span 3} .span-4{grid-column:span 4} .span-5{grid-column:span 5}
.span-6{grid-column:span 6} .span-7{grid-column:span 7} .span-8{grid-column:span 8} .span-12{grid-column:span 12}

/* ── NAV ── */
.brand { display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:center; }
.brand-mark { width:30px; height:30px; border-radius:6px; background:#111827; border:1px solid #334155; color:var(--save); font:900 11px/30px var(--font-mono); text-align:center; }
.brand h1 { font-size:16px; font-weight:700; }
.brand p { font-size:11px; margin-top:2px; }
.nav { display:grid; gap:5px; align-content:start; }
.nav button, .nav a {
  all:unset; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:9px 10px; border-radius:6px; color:var(--soft); font-size:13px; cursor:pointer;
}
.nav button:hover, .nav a:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); color:var(--ink); }
.nav button[aria-current="page"] { background:var(--primary-soft); color:var(--primary); font-weight:700; }
.nav-icon { width:22px; height:22px; border:1px solid currentColor; border-radius:8px; font:900 10px/22px var(--font-mono); text-align:center; }
.nav-count { font:11px var(--font-mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.nav-group { font:900 11px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin:10px 4px 0; }
.source-card { padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.source-row { display:flex; align-items:center; gap:8px; margin-top:6px; font-size:12px; }
.eyebrow { font:800 12px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }

/* ── TOPBAR ── */
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; border-bottom:1px solid var(--line); backdrop-filter:blur(14px);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
.titleline { display:flex; align-items:center; gap:14px; }
.menu-btn { display:none; width:42px; height:42px; border-radius:8px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink); font-size:18px; cursor:pointer; }
.view-title { font-size:20px; font-weight:600; }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.range-popover {
  position:absolute; top:calc(var(--topbar) + 8px); right:26px; z-index:30;
  display:grid; gap:10px; padding:16px; min-width:240px;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow);
}
.range-popover[hidden] { display:none; }
.range-popover label { display:grid; gap:4px; font:700 11px var(--font-ui); color:var(--soft); text-transform:uppercase; letter-spacing:.08em; }
.range-popover input {
  min-height:36px; padding:0 10px; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:var(--panel-2); color:var(--ink); font:13px var(--font-mono);
}

/* ── BOTONES / SEGMENTED ── */
.primary-btn, .ghost-btn {
  min-height:38px; padding:0 14px; border-radius:var(--radius); font:700 13px var(--font-ui);
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:transform 120ms, filter 120ms;
  border:1px solid var(--line-strong); background:var(--panel);
}
.primary-btn { background:var(--primary); color:var(--primary-on); border-color:var(--primary); }
.primary-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.ghost-btn { color:var(--ink); }
.ghost-btn:hover { border-color:var(--primary); transform:translateY(-1px); }
.danger-action { border-color:var(--danger); color:var(--danger); }
.segmented { display:inline-flex; padding:4px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); }
.segmented button { all:unset; padding:6px 12px; border-radius:3px; font:700 12px var(--font-ui); color:var(--soft); cursor:pointer; }
.segmented button[aria-pressed="true"] { background:var(--primary); color:var(--primary-on); }
.button-row { display:flex; gap:10px; margin-top:12px; }

/* ── KPI ── */
.kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.kpi { position:relative; padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; }
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--kpi-color, var(--primary)); }
.kpi.save { --kpi-color: var(--save); } .kpi.warn { --kpi-color: var(--warn); } .kpi.danger { --kpi-color: var(--danger); } .kpi.cost { --kpi-color: var(--cost); }
.kpi small { display:block; font:800 11px/1 var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--soft); margin-bottom:4px; }
.kpi strong { display:block; font:900 clamp(20px,2.1vw,28px)/1.1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.kpi .kpi-help { position:absolute; top:8px; right:8px; }

/* ── PANELES ── */
.panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); min-width:0; }
.panel--pad { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); padding:18px; min-width:0; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:58px; padding:16px 18px; border-bottom:1px solid var(--line); }
.panel-title { font:800 15px/1.3 var(--font-ui); }
.panel-title.display { font:600 20px/1.3 var(--font-display); }
.panel-note { font-size:12px; margin-top:4px; }
.chart-box { height:280px; padding:18px; position:relative; }
.chart-box.compact { height:230px; }
.table-wrap { overflow-x:auto; padding:0 4px 4px; }
.form-card h2 { font:600 18px var(--font-display); margin-bottom:14px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { min-width:0; }
.field.full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display:flex; gap:10px; margin-top:4px; }

/* ── BADGES / ESTADOS ── */
.pill { display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:0 10px; border-radius:999px; font:800 11px var(--font-mono); }
.pill.primary { background:var(--primary-soft); color:var(--primary); }
.pill.save { background:var(--save-soft); color:var(--save); }
.pill.warn, .pill.cost { background:var(--warn-soft); color:var(--warn); }
.pill.danger { background:var(--danger-soft); color:var(--danger); }
.pill.muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color:var(--soft); }
.level-dot { width:11px; height:11px; border-radius:999px; display:inline-block; background:var(--muted); box-shadow:0 0 0 5px color-mix(in srgb, currentColor 13%, transparent); }
.level-dot.save { background:var(--save); color:var(--save); }
.level-dot.warn { background:var(--warn); color:var(--warn); }
.level-dot.danger { background:var(--danger); color:var(--danger); }
.level-dot.primary { background:var(--primary); color:var(--primary); }

/* ── ESTADOS VACÍOS / SPINNER ── */
.empty-box { border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--panel-2); padding:32px; text-align:center; }
.empty-box h3 { font-size:15px; margin-bottom:6px; }
.error-box { border:1px solid var(--danger); border-radius:var(--radius); background:var(--danger-soft); padding:16px; color:var(--danger); }
.inline-status { font-size:12px; margin-top:10px; }
.inline-status.ok { color:var(--save); }
.inline-status.bad { color:var(--danger); }
/* Carga en vuelo (Fase 3, 2026-09-10): la vista activa se atenúa y el título muestra un
   indicador. Sin skeletons: el dato anterior sigue visible, solo se avisa que se está renovando. */
.app.is-loading .view.active .table-wrap, .app.is-loading .view.active .kpi-grid,
.app.is-loading .view.active .chart-box, .app.is-loading .view.active .heatmap,
.app.is-loading .view.active .status-strip { opacity:.55; transition:opacity .15s; }
.view-title { display:inline-flex; align-items:center; gap:10px; }
.view-title::after {
  content:""; width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid var(--line-strong); border-top-color:var(--primary);
  opacity:0; animation:spin .8s linear infinite;
}
.app.is-loading .view-title::after { opacity:1; }
@keyframes spin { to { transform:rotate(360deg); } }
#refreshBtn:disabled { opacity:.55; cursor:progress; }

/* ── HEATMAP ── */
.heatmap { display:grid; grid-template-columns:34px repeat(24, minmax(0,1fr)); gap:2px; min-width:640px; padding:8px; }
.heat-cell { height:14px; border-radius:2px; background:var(--line-strong); }
.heat-label { font:11px var(--font-mono); color:var(--soft); display:flex; align-items:center; }
.heat-cell[data-s="healthy"] { background:var(--save); opacity:.62; }
.heat-cell[data-s="degraded"] { background:var(--warn); }
.heat-cell[data-s="down"] { background:var(--danger); }
.heat-cell[data-s="unknown"] { background:var(--line-strong); }
/* Fase 3: rótulos de hora (fila superior) y horas de hoy que aún no llegaron. */
.heat-hour { font:10px var(--font-mono); color:var(--muted); text-align:center; line-height:14px; }
.heat-cell[data-s="future"] { background:transparent; border:1px dashed var(--line); box-sizing:border-box; }

/* ── MOTIVO DEL ESTADO (Fase 3) ── */
.reason { display:inline-block; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; font-size:12px; color:var(--soft); }
.reason-more { font:700 10px var(--font-mono); color:var(--muted); }
.reason-none { color:var(--muted); }
.kpi-sub { display:block; margin-top:4px; font-size:11px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Disponibilidad: columna oculta mientras ninguna app traiga el dato (sin Availability Tests). */
table.no-avail [data-col="avail"] { display:none; }

/* ── OVERVIEW: tira de estado por app ── */
.status-strip { display:grid; gap:3px; min-width:640px; padding:8px; }
.status-strip-row { display:grid; gap:2px; align-items:center; }
.status-strip-label { font:11px var(--font-mono); color:var(--soft); padding-right:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-strip-label.clickable { cursor:pointer; }
.status-strip-label.clickable:hover { color:var(--primary); }
.status-strip-cells { display:grid; gap:1px; }
.status-cell { height:16px; border-radius:2px; background:var(--line-strong); }
.status-cell[data-s="healthy"] { background:var(--save); opacity:.62; }
.status-cell[data-s="degraded"] { background:var(--warn); }
.status-cell[data-s="down"] { background:var(--danger); }
.status-cell[data-s="unknown"] { background:var(--line-strong); }

/* ── BUDGET ── */
.budget-bar-track { height:10px; border-radius:999px; background:var(--panel-2); margin:16px 18px 0; overflow:hidden; }
.budget-bar-fill { height:100%; background:var(--save); transition:width .3s; }
.budget-figures { display:flex; gap:24px; padding:12px 18px 18px; flex-wrap:wrap; }
.budget-figures span { display:block; font:11px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--soft); }
.budget-figures strong { font:700 18px var(--font-mono); font-variant-numeric:tabular-nums; }
.detail-header { margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.detail-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.help-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--soft);
  font:700 11px var(--font-ui); cursor:help; user-select:none;
}
.help-tip:hover, .help-tip:focus-visible { border-color:var(--primary); color:var(--primary); outline:none; }

/* ── DRAWER (detalle lateral de la vista Detalle) ── */
/* Fijo a la derecha, hermano de .app (no hijo): así no compite con el grid ni con el scroll de
   .content. Cerrado queda fuera de pantalla Y visibility:hidden, para que no reciba tab/focus.
   Sin backdrop a propósito: la lista de la izquierda sigue clickeable con el panel abierto. */
.drawer {
  /* top:var(--topbar), no 0: la topbar tiene los controles que hay que poder seguir usando con
     el panel abierto (rango, auto-refresh, Actualizar, Ambiente) -- si el drawer la tapara,
     quedarían inalcanzables mientras el panel está abierto. */
  position:fixed; top:var(--topbar); right:0; bottom:0; z-index:40; width:min(880px, 92vw);
  display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line-strong); box-shadow:var(--shadow);
  transform:translateX(105%); visibility:hidden; transition:transform 200ms, visibility 200ms;
}
.drawer.open { transform:translateX(0); visibility:visible; }
.drawer:focus { outline:none; }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:58px; padding:16px 18px; border-bottom:1px solid var(--line); flex:none; }
.drawer-head > div { min-width:0; }
.drawer-context {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px 18px;
  margin:0; padding:14px 18px; border-bottom:1px solid var(--line); flex:none;
}
.drawer-context:empty { display:none; }
.drawer-context > div { min-width:0; }
.drawer-context .full { grid-column:1 / -1; }
.drawer-context dt { font:900 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--soft); margin-bottom:5px; }
.drawer-context dd { margin:0; font-size:13px; line-height:1.45; word-break:break-word; }
.drawer-context dd.mono { font-family:var(--font-mono); font-size:11px; color:var(--soft); white-space:pre-wrap; }
.drawer-body { flex:1; min-height:0; overflow:auto; padding:0 4px 4px; }
.drawer-table { min-width:0; }
.drawer-table td.query-full { font-family:var(--font-mono); font-size:11px; color:var(--soft); white-space:pre-wrap; word-break:break-word; min-width:260px; }
.drawer-chart { height:340px; }
/* Fila seleccionada (la que está abierta en el drawer), mismo truco de barra que tr.system-alert. */
tbody tr.selected td { background:var(--primary-soft); }
tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* SP/query con al menos una llamada fallida en el drill-down de fallas: sin esto, la fila que de
   verdad causó la excepción se perdía entre las otras consultas del mismo request que sí
   completaron bien (mismo operation_Id, otro paso del mismo flujo, no la causa). */
.drawer-table tr.has-failures td { background:var(--danger-soft); }
.drawer-table tr.has-failures td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.app.is-loading ~ .drawer .drawer-body { opacity:.55; transition:opacity .15s; }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:70; display:grid; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; padding:10px 16px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line-strong); font-size:13px; animation:slideUp 260ms; }
@keyframes slideUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.toast.ok { border-color:var(--save); }
.toast.bad { border-color:var(--danger); }

/* ── RESPONSIVE ── */
@media (max-width: 1180px) {
  :root { --sidebar:232px; }
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8 { grid-column:span 6; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 820px) {
  :root { --sidebar:0px; --topbar:64px; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(280px,86vw); z-index:30; transform:translateX(-105%); transition:transform 200ms; background:var(--bg); }
  .app.nav-open .sidebar { transform:translateX(0); }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center; }
  .panel-grid > * { grid-column:1 / -1; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .field-grid { grid-template-columns:1fr; }
  .drawer { width:100vw; border-left:0; }
}

/* ── Frescura del dato (Fase 1, 2026-09-09) ─────────────────────────────── */
/* Aviso de sondeo detenido en Flota: el Function decide (summary.isStale), acá solo se pinta. */
.stale-banner { display:flex; gap:10px; align-items:center; margin:0 0 12px; padding:10px 14px; border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); background:var(--warn-soft); color:var(--ink); border-radius:var(--radius); font-size:13px; line-height:1.45; }
.stale-banner::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--warn); flex:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
/* "hace X min" en warn cuando ESA app supera la tolerancia (aunque el resto esté fresco). */
td.stale { color:var(--warn); font-weight:600; }
/* Alertas del propio monitor (ej. sondeo detenido): resaltadas, sin clic. */
tr.system-alert td { background:var(--danger-soft); }
tr.system-alert td:first-child { box-shadow: inset 3px 0 0 var(--danger); }