/* ============================================================================
   Pandora Cloud — nueva interfaz (rediseño)
   Capa de tema que se carga DESPUÉS de app.css. Define los tokens (claro/oscuro)
   del nuevo diseño y la "cáscara" (menú lateral + barra superior + página).
   El resto de componentes heredan los tokens; se afinan pantalla por pantalla.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  --navy: #121a2b;
  --brand: #F5BB00;

  --bg: #f3f6fa;
  --side: #ffffff;
  --panel: #ffffff;
  --surface2: #eef2f7;
  --field: #ffffff;
  --border: #dce3ec;
  --border-soft: #e7ecf3;

  --ink: #0f1b2d;
  --muted: #66748a;

  --accent: #2f6fe4;
  --accent2: #2563eb;
  --accent-soft: rgba(47,111,228,.12);

  --ok: #16a34a;
  --warn: #d98a1f;
  --down: #e0564f;
  --recover: #0ea5a0;
  --on-status: #ffffff;
  --on-warn: #121a2b;

  --code-bg: #121a2b;
  --code-ink: #e6eaf5;

  --danger-bg: #fef2f2;
  --danger-border: #fca5a5;
  --danger-ink: #b42318;
  --flashok-bg: #ecfdf3;
  --flashok-border: #a6f4c5;
  --flashok-ink: #067647;
  --flasherr-bg: #fef3f2;
  --flasherr-border: #fda29b;
  --flasherr-ink: #b42318;
  --inc-bg: #fef3f2;
  --inc-border: #fda29b;
  --inc-ink: #b42318;

  --btn-bg: #ffffff;
  --btn-bg-hover: #f1f5fa;
  --btn-ink: #475467;
  --track: #e9eef6;
  --chart-bg: #ffffff;
  --inset: rgba(16,24,40,.07);

  --side-w: 208px;
  --radius: 12px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 20px 50px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.10);
}

body.dark {
  --navy: #0b1119;
  --bg: #0a0e13;
  --side: #0b1119;
  --panel: #121b27;
  --surface2: #0f1723;
  --field: #0f1723;
  --border: #1e2a39;
  --border-soft: #1a2431;

  --ink: #e9eff6;
  --muted: #a6b6ca;

  --accent: #3b82f6;
  --accent2: #60a5fa;
  --accent-soft: rgba(59,130,246,.16);

  --ok: #22c55e;
  --warn: #e0a13a;
  --down: #ef4444;
  --recover: #22d3ee;
  --on-status: #ffffff;
  --on-warn: #0a0e13;

  --code-bg: #0b0e20;
  --code-ink: #e6eaf5;

  --danger-bg: #3a1d1d;
  --danger-border: #6b2b2b;
  --danger-ink: #ffb3ad;
  --flashok-bg: #12261a;
  --flashok-border: #1f6f37;
  --flashok-ink: #7ee787;
  --flasherr-bg: #2b1618;
  --flasherr-border: #6b2b2b;
  --flasherr-ink: #ffb3ad;
  --inc-bg: #3a1d1d;
  --inc-border: #6b2b2b;
  --inc-ink: #ffffff;

  --btn-bg: #131e2b;
  --btn-bg-hover: #18242f;
  --btn-ink: #cbd5e1;
  --track: #1e2a39;
  --chart-bg: #0f1723;
  --inset: rgba(0,0,0,.35);

  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* -------------------------------------------------------------------- SHELL */
body.app { background: var(--bg); }
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

/* --- menú lateral --- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--side); border-right: 1px solid var(--border);
  padding: 16px 10px; overflow-y: auto;
}
.sidebrand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 16px; }
.sidebrand img { display: block; height: 22px; width: auto; max-width: 140px; }
/* En tema claro la barra es blanca y el logo (texto blanco) se perdería: lo
   ponemos sobre una pastilla navy para que se lea igual que en oscuro. */
body:not(.dark) .sidebrand { background: var(--navy); border-radius: 10px; padding: 8px 10px; margin: 0 0 12px; }
.sidebrand .tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  background: var(--brand); color: var(--navy); border-radius: 6px; padding: 2px 6px;
}
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav .sec {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  padding: 15px 10px 5px; font-weight: 700;
}
.sidenav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px;
  padding: 9px 10px; border-radius: 9px;
}
.sidenav a .i { display: inline-flex; width: 17px; height: 17px; flex: none; opacity: .9; }
.sidenav a .i svg { width: 17px; height: 17px; }
.sidenav a:hover { background: var(--surface2); color: var(--ink); text-decoration: none; }
.sidenav a.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.sidenav a.active .i { color: var(--accent); opacity: 1; }

.sidefoot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sidefoot .who { flex: 1; min-width: 0; }
.sideuser { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); text-decoration: none; flex: 1; }
.sideuser:hover { text-decoration: none; }
.sideuser .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #7b4dff); color: #fff;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  overflow: hidden; line-height: 1;
}
.sideuser .uname { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidefoot .iconbtn { flex: none; }
.ro {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  background: var(--warn); color: var(--on-warn); border-radius: 6px; padding: 2px 6px;
}

/* --- columna de contenido --- */
.content { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.topline {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topline .spacer { flex: 1; }
.lifewave { flex: 1 1 auto; min-width: 120px; height: 30px; position: relative; }
.lifewave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.content main { max-width: none; width: 100%; margin: 0; padding: 16px 22px 40px; }
.content footer { max-width: none; margin: 0; padding: 0 22px 30px; }

.pagebar { background: transparent; border-bottom: 0; padding: 0; }
.pagebar .pb-inner { display: flex; align-items: center; gap: 12px; padding: 18px 22px 4px; max-width: none; margin: 0; }
.pagebar h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }

/* ------------------------------------------------------------------ BOTONES */
.content button, .content .button { border-radius: 9px; font-size: 13.5px; }
.content button.primary, .content .button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: var(--shadow-1);
}
.content button.primary:hover, .content .button.primary:hover { background: var(--accent2); border-color: var(--accent2); }

/* ------------------------------------------------------------------- PANELS */
.content .card { border-radius: var(--radius); box-shadow: none; }
.content .pill, .content .chip { white-space: nowrap; align-items: center; }
.content .chip { font-weight: 700; padding: 4px 12px; font-size: 12px; }
.content .chip b { font-weight: 700; }
.content .pill { font-weight: 700; }
/* Minigráfica de 24 h en la lista de agentes (barras-píldora compactas). */
table.hosts .evbars24 { height: 20px; width: 96px; gap: 2px; margin: 0; }
table.hosts a.evhist { display: inline-block; }
.content table { border-radius: var(--radius); box-shadow: none; }
.content th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.content input, .content select, .content textarea { border-radius: 9px; }

/* ------------------------------------------------------------------- PESTAÑAS */
.content .tabs { border-bottom: 1px solid var(--border); gap: 3px; margin: 14px 0 0; }
.content .tab {
  border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
  color: var(--muted); font-weight: 600; font-size: 13px; padding: 9px 13px; margin-bottom: -1px;
}
.content .tab:hover { background: var(--surface2); color: var(--ink); }
.content .tab.active { background: var(--panel); border-color: var(--border); border-bottom: 1px solid var(--panel); color: var(--ink); }
/* La tabla que va justo debajo de las solapas se funde con ellas: sin esquinas
   redondeadas arriba y solapando 1px la línea de las solapas. */
.content .tabsrow + [data-panel] > table { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }

/* ------------------------------------------------------------- BARRA SUPERIOR */
.topsearch { display: flex; align-items: center; gap: 8px; position: relative; width: min(520px, 100%); }
.topsearch .tsicon { display: inline-flex; color: var(--muted); }
.topsearch input {
  width: 100%; margin: 0; padding: 9px 12px 9px 34px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--field); color: var(--ink);
}
.topsearch .tsicon { position: absolute; left: 11px; pointer-events: none; }
.topline .iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; padding: 0;
}
.topline .iconbtn:hover { background: var(--btn-bg-hover); color: var(--ink); }
.topline .toplogout { display: flex; margin: 0; }
/* Menú de botón (cajón) y su fondo: solo en móvil. */
.topline .iconbtn.navtoggle { display: none; }
.navback { display: none; }
/* Acciones de fila alineadas con los controles (ver/guardar/eliminar). */
.rowactions { align-items: center; justify-content: flex-end; }
.content table td, .content table th { vertical-align: middle; }
.topline .whoemail {
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.topline .whoemail:hover { color: var(--ink); text-decoration: none; }
/* Burbuja con el usuario y su nivel al pasar por el icono. */
.usermenu { position: relative; display: inline-flex; }
.ububble {
  position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; z-index: 70;
  background: var(--panel); color: var(--ink); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none;
}
.usermenu:hover .ububble, .usermenu:focus-within .ububble { opacity: 1; visibility: visible; }
/* Contadores de estado de los monitores (cabecera). */
.hcounts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hcount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1;
}
.hcount.down { background: var(--down); }
.hcount.warn { background: var(--warn); }
.hcount.ok { background: var(--ok); }
.hcount.unknown { background: #9aa7b4; }
.hcount.inc { background: #8b5cf6; }
a.hcount { text-decoration: none; cursor: pointer; }
a.hcount:hover { filter: brightness(1.12); }
.topcrumbs { display: flex; align-items: center; gap: 8px; }
.topcrumbs a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: 13px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--btn-bg);
}
.topcrumbs a:hover { color: var(--ink); background: var(--btn-bg-hover); text-decoration: none; }

/* --------------------------------------------------------------- RESPONSIVE */
/* ------------------------------------------------------- FICHA DE AGENTE */
.hosttop { display: flex; align-items: center; gap: 16px; margin: 2px 0 10px; }
.hosttop-l { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.backlink { display: inline-block; margin-bottom: 2px; }
.hosttitle { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hosttitle .osbadge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 13px; font-size: 26px;
  background: var(--surface2); border: 1px solid var(--border);
}
.hosttitle h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hostsub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.hostdesc { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 8px; }
.vsub { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 4px; }
.hostsub code { background: var(--surface2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 6px; }
.hosttop-r { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.hosttop-r .hostfilters { margin: 0; }
.hostactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hostacts-icons { display: none; }
.hperiodhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.hperiodhead form { margin: 0; }
.hperiodhead select { width: auto; margin: 0; padding: 7px 10px; font-size: 13px; }

.hgrid { display: grid; grid-template-columns: 1fr 292px; gap: 14px; align-items: start; margin-bottom: 6px; }
.hmain { min-width: 0; }
.hmain [data-panel] { overflow-x: auto; max-width: 100%; }
.hmain table.hostchecks { width: 100%; table-layout: fixed; }
.hmain table.hostchecks th, .hmain table.hostchecks td { padding: 9px 6px; white-space: normal; }
.hmain table.hostchecks th { white-space: normal; }
.hmain table.hostchecks .sparkwrap svg { max-width: 90px; }
/* En agentes cloud (sondeo) la dirección es una URL larga que no cabe: se oculta
   la columna, pero se mantiene la gráfica. */
table.hostchecks.cloud th:nth-child(3), table.hostchecks.cloud td:nth-child(3) { display: none; }
/* Anchos de columna (la de "Dirección" se queda con el resto y envuelve texto). */
.hmain table.hostchecks th:nth-child(1), .hmain table.hostchecks td:nth-child(1) { width: 92px; }
.hmain table.hostchecks th:nth-child(2), .hmain table.hostchecks td:nth-child(2) { width: 120px; }
.hmain table.hostchecks th:nth-child(4), .hmain table.hostchecks td:nth-child(4) { width: 120px; }
.hmain table.hostchecks th:nth-child(5), .hmain table.hostchecks td:nth-child(5) { width: 84px; }
.hmain table.hostchecks th:nth-child(6), .hmain table.hostchecks td:nth-child(6) { width: 92px; }
.hmain table.hostchecks th:nth-child(7), .hmain table.hostchecks td:nth-child(7) { width: 108px; }
.hmain table.hostchecks th:last-child, .hmain table.hostchecks td:last-child { width: 44px; }
.hside { position: sticky; top: 64px; }
.hmain .tabsrow { margin: 14px 0 0; }
/* La pestaña activa comparte línea con el borde superior de la tabla. */
.content .tabsrow { margin: 14px 0 0; }
.content .tabsrow .tabs { margin: 0 0 -1px; }
/* Panel: solapas en una línea con el buscador a la derecha (no ocupa fila aparte). */
.tabsrow.dash { flex-wrap: nowrap; }
.tabsrow.dash .tabs { flex-wrap: nowrap; }
.tabsrow.dash .dashq { flex: 0 1 240px; min-width: 120px; }
.hmain .tablehead { margin: 0 0 8px; }
.hc-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hperiodsel { margin: 0; }
.hperiodsel select { width: auto; margin: 0; padding: 2px 6px; font-size: 11px; line-height: 1.2; }
.hp-valrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.hcards .card { padding: 12px 14px; }
.hside .card { padding: 13px 15px; }
.hc-lbl { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.hc-val { font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.hc-val.cn-ok, .hc-val.av-ok { color: var(--ok); }
.hc-val.cn-warn, .hc-val.av-warn { color: var(--warn); }
.hc-val.cn-down, .hc-val.av-down { color: var(--down); }
.hc-val.cn-none { color: var(--muted); }
.hc-sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.av-ok { color: var(--ok); } .av-warn { color: var(--warn); } .av-down { color: var(--down); }

.hperiod {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.hperiod > div { padding: 11px 14px; border-right: 1px solid var(--border); }
.hperiod > div:last-child { border-right: 0; }
.hp-lbl { color: var(--muted); font-size: 11.5px; margin-bottom: 6px; white-space: nowrap; }
.hp-val { font-size: 18px; font-weight: 800; }

.hside > .card { margin-bottom: 16px; }
.hside h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.dl2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 13px; }
.dl2 li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl2 li.span2 { grid-column: 1 / -1; }
.dl2 .k { color: var(--muted); font-size: 12px; line-height: 1.3; }
.dl2 .v { font-weight: 400; font-size: 14px; color: var(--ink); word-break: break-word; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.modsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.modsection h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
/* Comentarios de incidencia (bitácora). */
.cmtlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmt { border-top: 1px solid var(--border); padding-top: 10px; }
.cmt:first-child { border-top: 0; padding-top: 0; }
.cmthead { display: flex; align-items: baseline; gap: 8px; }
.cmtbody { white-space: pre-wrap; margin-top: 4px; }
.cmtform { margin-top: 14px; }
.cmtform textarea { width: 100%; }
/* Nº de incidencia (muy visible) y edición de título. */
.incnum { display: inline-block; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 2px 10px; font-weight: 800; margin-right: 6px; }
.inctitle { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.inctitle input { margin: 0; }
/* Ficha de incidencia: causa raíz, IA, actividad (timeline Alt 2), código. */
.rctitle { font-size: 20px; font-weight: 800; margin: 6px 0 4px; }
.ai { margin-top: 14px; border: 1px dashed var(--border); border-radius: 10px; padding: 12px; background: var(--surface2); overflow-wrap: anywhere; }
.ai-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.ai p { margin: 8px 0 0; font-size: 13px; }
.actl { display: flex; flex-direction: column; }
.actrow { display: grid; grid-template-columns: 76px 24px 1fr; gap: 10px; align-items: start; }
.actwhen { text-align: right; color: var(--muted); padding-top: 4px; }
.actwhen b { display: block; color: var(--ink); font-size: 13px; }
.actwhen span { font-size: 11px; }
.actrail { position: relative; display: flex; justify-content: center; padding-top: 6px; align-self: stretch; }
.actrail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--border); transform: translateX(-50%); }
.actrow:first-child .actrail::before { top: 12px; }
.actrow:last-child .actrail::before { bottom: calc(100% - 12px); }
.tlnode { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--muted); flex: none; }
.tlnode.down { border-color: var(--down); } .tlnode.ok { border-color: var(--ok); }
.tlnode.warn { border-color: var(--warn); } .tlnode.inc { border-color: #8d5a2b; }
.actbox { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.actrow:last-child .actbox { margin-bottom: 0; }
.actwho { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.actwho .av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #7b4dff); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.acttitle { font-weight: 700; margin-top: 6px; }
.code2 { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 12px; white-space: pre-wrap; word-break: break-word; }
.sillist { display: flex; flex-direction: column; gap: 14px; }
.sil { padding-top: 12px; border-top: 1px solid var(--border); }
.sil:first-child { padding-top: 0; border-top: 0; }
.sil-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sil-head b { font-size: 14px; }
.sil-desc { color: var(--muted); font-size: 13px; }
.sil-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.sil-meta b { color: var(--ink); font-weight: 600; }
.tchip { border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.hostfilters { display: flex; gap: 8px; margin: 6px 0 0; flex-wrap: wrap; }
.content .tablehead h2 { margin: 0; }
/* Barras 24 h (píldora, altura completa) del rediseño. */
.evbars24 { display: flex; gap: 4px; height: 30px; align-items: stretch; margin: 4px 0 2px; }
.evbars24 i { flex: 1 1 0; min-width: 3px; border-radius: 999px; background: var(--ok); display: block; }
.evbars24 i.ev-ok { background: var(--ok); }
.evbars24 i.ev-warn { background: var(--warn); }
.evbars24 i.ev-crit { background: var(--down); }
a.evhist.big { display: block; padding: 0; }
a.evhist.big:hover { background: transparent; }

@media (max-width: 1000px) {
  .hgrid { grid-template-columns: 1fr; }
  .hcards { grid-template-columns: 1fr 1fr; }
  .hperiod { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .hcards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- ACCESO (login, etc.) */
/* Contexto oscuro fijo para las pantallas de acceso (como el login de Pandora). */
body.auth-body {
  --navy: #0b1119;
  --bg: #0a0e13; --panel: #131a24; --surface2: #0f1723; --field: #0f151e;
  --border: #24303e; --border-soft: #1b2530;
  --ink: #e9eff6; --muted: #8a98a8;
  --btn-bg: #1b2430; --btn-bg-hover: #222d3b; --btn-ink: #cbd5e1;
  --code-bg: #0b0e20; --code-ink: #e6eaf5;
  background: radial-gradient(900px 500px at 15% -10%, rgba(59,130,246,.10), transparent 60%), #0a0e13;
}
body.auth-body main { padding: 0; }
body.auth-body .flash { margin: 12px auto 0; max-width: 560px; }
.authcard { background: var(--panel); border-color: var(--border); }

/* Login a pantalla partida: panel oscuro + imagen de fondo. */
.loginsplit {
  flex: 1; display: grid; grid-template-columns: minmax(340px, 44%) 1fr;
  gap: 14px; padding: 14px; min-height: 100vh; background: #0a0e13;
}
.loginpane {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #131a24; border: 1px solid #1e2a39; border-radius: 18px; padding: 30px 26px;
}
.logintop { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.logintop a {
  font-size: 12px; color: #cbd5e1; background: #1b2430; border: 1px solid #283444;
  border-radius: 8px; padding: 6px 11px; text-decoration: none; display: inline-flex; gap: 7px; align-items: center;
}
.logintop a:hover { background: #222d3b; text-decoration: none; }
.logincenter { width: 100%; max-width: 330px; text-align: center; }
.loginbrand { display: block; margin: 0 auto 26px; width: 190px; max-width: 80%; height: auto; }
.loginpane h1 { color: #eef3f8; font-size: 20px; margin: 0 0 6px; }
.loginpane .authtag { color: #8a98a8; margin: 0 0 20px; }
.loginpane form label { text-align: left; color: #8a98a8; font-size: 12px; }
.loginpane input { background: #0f151e; border: 1px solid #26303d; color: #eef3f8; }
.loginpane input::placeholder { color: #5f6d7d; }
.loginbtn {
  width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 9px;
  background: #7ddc93; color: #07230f; font-weight: 700; font-size: 15px; cursor: pointer;
}
.loginbtn:hover { background: #8ee6a2; }
.loginver { color: #5f6d7d; font-size: 11.5px; margin-top: 10px; }
.loginpane .authalt { color: #8a98a8; font-size: 13px; text-align: center; }
.loginpane .authalt a { color: #9fd0ef; }
.loginart {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid #1e2a39;
  background: #0f1723 url("login-bg.jpg") center / cover no-repeat;
  display: flex; align-items: flex-end;
}
.loginart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,19,.70), rgba(10,14,19,.20) 48%, rgba(10,14,19,.05));
}
.artsay { position: relative; z-index: 1; padding: 48px 54px; }
.artsay .kicker { color: #9fe0b4; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; margin-bottom: 14px; }
.artsay h2 { color: #fff; font-size: clamp(34px, 5vw, 64px); line-height: .98; font-weight: 800; letter-spacing: -.02em; margin: 0; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.artsay p { color: #dbe6f0; margin: 16px 0 0; max-width: 520px; font-size: 15px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }

@media (max-width: 860px) {
  .loginsplit { grid-template-columns: 1fr; }
  .loginart { min-height: 240px; }
  .artsay { padding: 26px; }
  .artsay h2 { font-size: 34px; }
}

@media (max-width: 860px) {
  /* La barra lateral pasa a ser un cajón que abre el botón de menú. */
  .shell { grid-template-columns: 1fr; }
  .topline .iconbtn.navtoggle { display: inline-flex; }
  .navback { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55; }
  body.nav-open .navback { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw; height: 100dvh;
    padding: 16px 12px; border-right: 1px solid var(--border); border-bottom: 0;
    transform: translateX(-102%); transition: transform .2s ease; z-index: 60; overflow-y: auto;
  }
  body.nav-open .sidebar { transform: none; }
}

/* ============================ MÓVIL (solo < 860px) ============================ */
@media (max-width: 860px) {
  /* Contenido y barras */
  .content main { padding: 14px 12px 32px; }
  .content footer { padding: 0 12px 24px; flex-direction: column; gap: 6px; }
  .pagebar .pb-inner { padding: 12px 12px 2px; }
  .topline { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
  .topline .iconbtn { width: 32px; height: 32px; }
  .topline .spacer { display: none; }
  .lifewave { display: none; }
  .topline .topsearch { flex: 1 1 0; width: auto; min-width: 0; order: 0; }
  .topline .topsearch input { min-width: 0; }
  .topline .topcrumbs { min-width: 0; overflow: hidden; }
  .topline .whoemail { display: none; }

  /* Cabecera de ficha de agente: se apila */
  .hosttop { flex-direction: column; align-items: stretch; gap: 10px; }
  .hosttop-r { margin-left: 0; justify-content: flex-start; }
  .hosttitle h1 { font-size: 20px; white-space: normal; overflow: visible; text-overflow: clip; }

  /* Acciones del encabezado: en móvil, iconos junto al nombre (sustituyen a los botones) */
  .hostactions { display: none; }
  .hosttitle .htt { flex: 1 1 auto; min-width: 0; }
  .hostacts-icons { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
  .hostacts-icons .iconbtn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--field); border-radius: 9px; }
  .hostacts-icons .iconbtn svg { width: 18px; height: 18px; }

  /* Resumen a una columna; la barra lateral deja de ser sticky */
  .hgrid { grid-template-columns: 1fr; }
  .hside { position: static; }
  .hside .dl2 { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .hcards { grid-template-columns: 1fr 1fr; }
  .hperiod { grid-template-columns: 1fr 1fr; }

  /* Solapas: scroll horizontal en vez de partirse en varias líneas */
  .content .tabsrow .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: none; }
  .content .tabsrow .tabs::-webkit-scrollbar { display: none; height: 0; }
  .tabsrow.dash { flex-wrap: wrap; }
  .tabsrow.dash .dashq { flex: 1 1 100%; }

  /* Tablas: no se cortan las columnas, se desplazan en horizontal */
  .content main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* En móvil se quitan «cambió» y «recibido» (se mantiene la gráfica «2 h»). */
  table.hostchecks th:nth-child(6), table.hostchecks td:nth-child(6),
  table.hostchecks th:nth-child(7), table.hostchecks td:nth-child(7) { display: none; }

  /* Formularios y filtros: una columna */
  .form-grid { grid-template-columns: 1fr; }
  .filters, .logfilters, .hlogform, .hlogrow { flex-direction: column; align-items: stretch; }

  /* Modales a pantalla completa */
  .modalbox, .modalbox.viewer, .modalbox.wizard, .modalbox.form { width: auto; max-width: none; margin: 8px; max-height: calc(100dvh - 16px); }
}

@media (max-width: 560px) {
  /* Tarjetas del resumen (4) y métricas en dos columnas (hay espacio de sobra) */
  .hcards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hcards .card { padding: 10px 12px; }
  .hcards .hc-lbl { flex-wrap: wrap; gap: 2px; }
  .hcards .evbars24 { gap: 2px; }
  .hcards .evbars24 i { min-width: 2px; }
  .hperiod { grid-template-columns: 1fr 1fr; }
  .hperiod > div { padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .hperiod > div:nth-child(odd) { border-right: 1px solid var(--border); }
  .hperiod > div:nth-last-child(-n+2) { border-bottom: 0; }
  .sil-head { flex-direction: column; align-items: flex-start; }
}

/* Calendario de guardias */
.cal { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.calhead, .calweek { display: grid; grid-template-columns: repeat(7, 1fr); }
.calhead span { padding: 8px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: var(--surface2); text-align: center; border-bottom: 1px solid var(--border); }
.calweek { border-bottom: 1px solid var(--border); }
.calweek:last-child { border-bottom: 0; }
.calcell { min-height: 92px; padding: 6px; border-right: 1px solid var(--border); font-size: 12px; }
.calcell:last-child { border-right: 0; }
.calcell.off { background: var(--surface2); }
.calcell.today { outline: 2px solid var(--accent2); outline-offset: -2px; }
.calday { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.calchip { display: block; background: var(--accent-soft); border-radius: 6px; padding: 3px 6px; margin-bottom: 4px;
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.calchip.ov { background: rgba(217, 138, 31, .18); }
.calhr { display: block; font-weight: 400; color: var(--muted); font-size: 11px; white-space: nowrap; }

@media (max-width: 860px) {
  .cal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calhead, .calweek { min-width: 620px; }
  .calcell { min-height: 76px; }
}

.calact { font-size: 10.5px; color: var(--muted); text-decoration: none; margin-left: 6px; font-weight: 500; white-space: nowrap; }
.calact:hover { color: var(--accent2); text-decoration: underline; }

/* Ficha de incidencia: cabecera con título editable y columna izquierda */
.inchead { margin: 4px 0 14px; }
.incheadt { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; flex-wrap: wrap; }
.incheadt .incttl { min-width: 0; }
.incedit { position: relative; display: inline-flex; }
.incedit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); background: var(--panel); }
.incedit > summary::-webkit-details-marker { display: none; }
.incedit > summary:hover, .incedit[open] > summary { color: var(--accent2); border-color: var(--accent2); }
.inceditform { position: absolute; top: 34px; left: 0; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); min-width: 340px; }
.inceditform input { margin: 0; min-width: 240px; }

.incowner { font-weight: 700; font-size: 15px; }
.incsel { margin-top: 10px; }
.incsel select { width: 100%; margin: 0; }
.critbadge { display: inline-block; border-radius: 8px; padding: 4px 12px; font-weight: 700; font-size: 13px; border: 1px solid transparent; }
.crit-maintenance { background: #eef2f7; color: #475569; border-color: #cbd5e1; }
.crit-informative { background: #e0edff; color: #1d4ed8; border-color: #bfdbfe; }
.crit-minor { background: #fef6d8; color: #a16207; border-color: #fde68a; }
.crit-major { background: #ffe8d6; color: #c2410c; border-color: #fdba74; }
.crit-critical { background: #fee2e2; color: #b42318; border-color: #fca5a5; }
body.dark .crit-maintenance { background: #1e2536; color: #cbd5e1; border-color: #334155; }
body.dark .crit-informative { background: #10233f; color: #93c5fd; border-color: #1e3a8a; }
body.dark .crit-minor { background: #3a2f10; color: #fcd34d; border-color: #78550e; }
body.dark .crit-major { background: #3a2413; color: #fdba74; border-color: #7c3d12; }
body.dark .crit-critical { background: #3a1414; color: #fca5a5; border-color: #7f1d1d; }

/* Mapamundi de la región de ejecución (chequeos cloud) */
.worldmap { position: relative; border-radius: 8px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); }
.worldmap img { display: block; width: 100%; height: auto; }
.worldmap .wmpin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(245,187,0,.35), 0 1px 3px rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.35); }
body.dark .worldmap { background: #0f1526; }
/* Endpoint monitorizado: mismo amarillo corporativo pero hueco, para distinguirlo
   del punto de sondeo. */
.worldmap .wmpin-ep { background: #fff; border: 2px solid var(--brand);
  box-shadow: 0 0 0 3px rgba(245,187,0,.25), 0 1px 3px rgba(0,0,0,.55); }
/* Leyenda bajo el mapa: un punto por ubicación. */
.wplegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.wpli { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.wpdot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.35); }
.wpdot-ep { background: #fff; border: 2px solid var(--brand); }

/* Análisis con IA (modal de la ficha del agente) */
.ai-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.ai-text p { margin: 0 0 8px; overflow-wrap: anywhere; }
.ai-text ul { margin: 0 0 8px; padding-left: 20px; }
.ai-text li { margin: 0 0 6px; overflow-wrap: anywhere; }
.ai-text code { background: var(--code-bg); color: var(--code-ink); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; overflow-wrap: anywhere; word-break: break-word; }
.ai-text strong { font-weight: 700; }
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--border); border-top-color: var(--accent2); border-radius: 50%; animation: ai-spin .7s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Modal de Análisis con IA — panel partido (contexto | formulario) */
.modalbox.aibox { padding: 0; max-width: 880px; display: flex; align-items: stretch; overflow: hidden; }
.aictx { width: 290px; flex: 0 0 290px; background: var(--surface2); border-right: 1px solid var(--border); padding: 22px 20px; min-height: 0; overflow-y: auto; }
body.dark .aictx { background: linear-gradient(180deg, #101a26, #0c141d); }
.ai-avatar { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 25px;
  background: linear-gradient(135deg, var(--accent), var(--recover)); margin-bottom: 12px;
  box-shadow: 0 10px 26px rgba(59, 130, 246, .32); }
.aictx h3 { margin: 0; font-size: 17px; }
.ai-sub { color: var(--muted); font-size: 11.5px; margin-top: 3px; word-break: break-word; }
.ai-os { color: var(--ink); font-size: 11.5px; font-weight: 600; margin-top: 7px; }
.ai-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.ai-stat { background: var(--inset); border: 1px solid var(--border); border-radius: 11px; padding: 10px; }
.ai-stat b { display: block; font-size: 17px; }
.ai-stat small { color: var(--muted); font-size: 10px; }
.ai-bars { margin-top: 18px; }
.ai-blbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ai-bar { height: 9px; border-radius: 6px; background: var(--track); overflow: hidden; margin: 5px 0; }
.ai-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.ai-src { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 10px; }
.ai-src b { color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ai-private { margin-top: 18px; font-size: 10.5px; color: var(--muted); line-height: 1.45; }

.aiform { flex: 1; min-width: 0; min-height: 0; padding: 20px 24px; overflow-y: auto; overflow-x: hidden; }
.aiform .viewerhead { position: sticky; top: 0; background: var(--panel); z-index: 3; }
.ai-flabel { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 0 9px; }
.aibox .ai-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.aibox .ai-pre { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2); border-radius: 13px; padding: 11px 12px;
  font: inherit; color: var(--ink); }
.aibox .ai-pre:hover { border-color: var(--muted); }
.aibox .ai-pre .ai-ic { font-size: 19px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--inset); flex: 0 0 auto; }
.aibox .ai-pre b { font-size: 12.5px; font-weight: 600; display: block; }
.aibox .ai-pre small { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; line-height: 1.25; }
.aibox .ai-pre.on { border-color: var(--brand); background: rgba(245, 187, 0, .10); box-shadow: 0 0 0 1px var(--brand); }
.aibox .ai-pre.on b { color: var(--brand); }
.aibox .ai-pre.on .ai-ic { background: rgba(245, 187, 0, .16); }
.aibox .ai-pre.on::after { content: "✓"; position: absolute; top: 7px; right: 8px; font-size: 10px; color: #121a2b;
  background: var(--brand); width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.aibox .ai-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 12px; padding: 5px; }
.aibox .ai-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px;
  padding: 9px 0; border-radius: 8px; cursor: pointer; }
.aibox .ai-seg button:hover { color: var(--ink); }
.aibox .ai-seg button.on { background: linear-gradient(180deg, var(--accent), var(--accent2)); color: #fff; font-weight: 600; }
#aiPrompt { display: block; width: 100%; background: var(--field); border: 1px solid var(--border); border-radius: 12px;
  color: var(--ink); font: inherit; font-size: 13px; padding: 12px 14px; outline: none; margin-top: 16px;
  resize: vertical; line-height: 1.5; }
#aiPrompt::placeholder { color: var(--muted); }
@media (max-width: 760px) {
  .modalbox.aibox { flex-direction: column; }
  .aictx { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .aibox .ai-presets { grid-template-columns: 1fr; }
  .aiform { max-height: none; }
}

/* Versión al pie del menú lateral */
.sidever { margin-top: auto; padding: 12px 10px 4px; font-size: 11px; color: var(--muted); }

/* Configuración remota de endpoints (editor de módulos) */
.rctable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rctable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rctable td { padding: 8px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.rctable tr.off td { opacity: .55; }
.rctacts { display: flex; gap: 8px; justify-content: flex-end; }
.rctacts .button, .rctacts button { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.rcsep { margin-top: 4px; }
.rcsep .thrgrid { margin-top: 8px; }
.rcsep .thrgrid span { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }

/* Lista de agentes: ajustes de orden (checkboxes) y cabeceras de grupo por etiqueta */
.dashset { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  white-space: nowrap; cursor: pointer; user-select: none; }
.dashset input { margin: 0; }
table.hosts tr.dashgroup td { background: var(--surface2); color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 6px 10px;
  border-top: 1px solid var(--border); }
/* La columna «Last change» solo aparece con el ajuste «Last change first». */
table.hosts .col-changed { display: none; }
table.hosts.show-changed .col-changed { display: table-cell; }

/* Incidencias: la fila entera abre el detalle. */
table.inctable tbody tr.incrow { cursor: pointer; }
table.inctable tbody tr.incrow:hover td { background: var(--surface2); }

/* Editor de escalados (Configuración → Escalados) */
.esc-rows { margin-top: 8px; }
.esc-row { padding: 14px 0 12px; border-top: 1px solid var(--border-soft); }
.esc-row .lvlhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.esc-row .lvlhead .spacer { flex: 1; }
.lvlnum { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent2);
  background: rgba(59, 130, 246, .16); border-radius: 8px; padding: 4px 9px; }
.esc-row label.inline { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.esc-row label.inline input { width: 64px; text-align: center; }
.chanrows { display: flex; flex-direction: column; border-top: 1px solid var(--border-soft); }
.chrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.chrow .cicon { font-size: 15px; width: 20px; text-align: center; }
.chrow .cname { font-size: 13px; font-weight: 600; width: 84px; }
.chrow select, .chrow input { padding: 6px 8px; font-size: 12.5px; }
.chrow .ch-target { width: 210px; }
.chrow .ch-users { width: 180px; }
.chrow .ch-addr { flex: 1; min-width: 120px; }
.chrow .ch-channel { width: 300px; }
.chrow .derived { font-size: 11.5px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .chrow { flex-wrap: wrap; }
  .chrow .ch-target, .chrow .ch-users, .chrow .ch-channel { width: 100%; }
  .chrow .derived { flex-basis: 100%; }
}
/* Burbuja de criticalidad en Escalados (como el mockup) */
.critbadge { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 8px; padding: 4px 10px; border: 1px solid transparent; }
.critbadge.critical { color: #fca5a5; background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); }
.critbadge.major { color: #fdba74; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .4); }
.critbadge.minor { color: #93c5fd; background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .4); }
.critbadge.informative { color: #cbd5e1; background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .35); }

/* Nivel de suscripción: tarjetas de plan */
.subgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
.subplan { display: flex; align-items: center; gap: 12px; }
.subname { font-size: 20px; font-weight: 800; }
.pill.brand { background: var(--brand); color: #121a2b; font-weight: 800; }
.subpay { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.subcard { font-size: 13px; color: var(--muted); }
.subh { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pcard .pnote { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pcard { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.pcard.cur { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 14px 34px rgba(245, 187, 0, .10); }
.pcard .curtag { position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 800; color: #121a2b; background: var(--brand); border-radius: 20px; padding: 3px 9px; }
.pcard h3 { margin: 0; font-size: 16px; }
.pprice { font-size: 24px; font-weight: 800; margin: 8px 0 2px; }
.pprice small { font-size: 12px; font-weight: 500; color: var(--muted); }
.feat { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.feat li { display: flex; align-items: center; gap: 9px; }
.feat .ic { width: 18px; text-align: center; }
.feat .k { flex: 1; color: var(--muted); }
.feat .v { font-weight: 700; }
.feat .hi { background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .25); border-radius: 8px; padding: 6px 9px; }
.paction { display: block; text-align: center; margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.paction.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.plancta { display: block; width: 100%; text-align: center; margin-top: 16px; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  background: transparent; cursor: pointer; }
.plancta:hover { border-color: var(--accent); color: var(--ink); }
.ovsum { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ovsum .ov { font-size: 13px; color: var(--muted); }
.ovsum .ov b { color: var(--ink); }
.ovsum .ov.tot { margin-left: auto; }
@media (max-width: 900px) { .subgrid, .plans { grid-template-columns: 1fr; } }

/* Botón azul de "Añadir monitorización" embebido en la caja principal (solo móvil) */
.addmon-mobile { display: none; }

/* ===== Panel (lista de agentes): vista móvil en tarjetas de dos líneas ===== */
@media (max-width: 760px) {
  /* En móvil no se muestra la tarjeta CTA: el botón azul va abajo a la derecha de
     la caja principal y se oculta el ID de instancia. */
  .card.cta { display: none; }
  .groupkey { display: none; }
  .addmon-mobile { display: flex; justify-content: flex-end; margin-top: 14px; }

  /* Controles del listado: pestañas desplazables + orden y filtro a su línea */
  .tabsrow.dash .tabs { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; }
  .tabsrow.dash .spacer { display: none; }
  .tabsrow.dash .dashset { order: 2; font-size: 12px; }
  .tabsrow.dash .dashq { flex: 1 1 100%; min-width: 0; order: 3; }

  /* La tabla se convierte en tarjetas */
  table.hosts { display: block; border: 0; }
  table.hosts thead { display: none; }
  table.hosts tbody { display: block; }
  table.hosts tr.dashgroup { display: block; margin: 16px 0 8px; background: transparent; border: 0; }
  table.hosts tr.dashgroup td { display: block; border: 0; padding: 0 6px; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  table.hosts tr.hostrow {
    display: grid; grid-template-columns: 36px 1fr auto auto auto;
    /* fila1: nombre + último cambio + último contacto + SLA (a la derecha del todo);
       fila2: icono del tipo a la izquierda, burbujas de estado y eventos a la derecha. */
    grid-template-areas: "name name change contact sla" "icon balls bars bars bars";
    gap: 6px 6px; align-items: center;
    background: var(--panel); border: 1px solid var(--border); border-left: 4px solid transparent;
    border-radius: 14px; padding: 12px 14px; margin: 10px 0; overflow: hidden;
  }
  table.hosts tr.hostrow[data-status="down"] { border-left-color: var(--down); }
  table.hosts tr.hostrow[data-status="warn"] { border-left-color: var(--warn); }
  table.hosts tr.hostrow > td { display: block; border: 0; padding: 0; background: transparent; }
  table.hosts tr.hostrow td:nth-child(1) { grid-area: icon; text-align: center; }
  table.hosts tr.hostrow td:nth-child(2) { grid-area: name; min-width: 0; }
  table.hosts tr.hostrow td:nth-child(3) { grid-area: bars; justify-self: end; }
  table.hosts tr.hostrow td:nth-child(4) { grid-area: balls; }
  table.hosts tr.hostrow td:nth-child(5) { grid-area: change; text-align: right; white-space: nowrap; }
  table.hosts tr.hostrow td:nth-child(8) { display: none; }
  table.hosts tr.hostrow td:nth-child(6) { grid-area: sla; text-align: right; white-space: nowrap; }
  /* Último contacto (en móvil, solo "hace …"; se oculta la línea de "próximo") */
  table.hosts tr.hostrow td:nth-child(7) { grid-area: contact; text-align: right; white-space: nowrap; }
  table.hosts tr.hostrow td:nth-child(7) div { display: none; }
  /* Etiquetas en móvil: "Último cambio: … | Último dato: …" (etiqueta algo más pequeña que el valor) */
  table.hosts tr.hostrow td:nth-child(5)::before { content: "Último cambio: "; font-size: 9px; }
  table.hosts tr.hostrow td:nth-child(5)::after { content: " "; font-size: 9px; }
  table.hosts tr.hostrow td:nth-child(7)::before { content: "Último dato: "; font-size: 9px; }
  /* Nombre sin cortar; descripción pequeña; sin etiquetas (ya van por secciones) */
  table.hosts tr.hostrow td.agentname a { font-size: 17px; font-weight: 700; white-space: nowrap; }
  table.hosts tr.hostrow td:nth-child(5),
  table.hosts tr.hostrow td:nth-child(7) { font-size: 10px; }
  table.hosts tr.hostrow td.agentname { min-width: 0; }
  /* Descripción: hasta 2 líneas antes de recortar (así se ve más texto) */
  table.hosts tr.hostrow td.agentname .muted.small {
    font-size: 11px; white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  table.hosts tr.hostrow .pill { display: none; }

  /* Chips -> bolas de color con el número dentro */
  table.hosts tr.hostrow .chip { display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; margin: 0 3px 0 0; border: 0; border-radius: 50%; font-size: 13px; }
  table.hosts tr.hostrow .chip .lbl { display: none; }
  table.hosts tr.hostrow .chip b { font-size: 13px; font-weight: 800; }
  table.hosts tr.hostrow .chip.ok { background: #22C55E; color: #06210f; }
  table.hosts tr.hostrow .chip.warn { background: #F59E0B; color: #3a2500; }
  table.hosts tr.hostrow .chip.down { background: #EF4444; color: #fff; }
  table.hosts tr.hostrow .chip.unknown { background: #6C7587; color: #fff; }
  table.hosts tr.hostrow .chip.sig { background: #4845E4; color: #fff; }
  table.hosts tr.hostrow .chip.logs { background: #3B82F6; color: #fff; }
  table.hosts tr.hostrow .chip.logs::after { content: "L"; font-size: 13px; font-weight: 800; }
  table.hosts tr.hostrow .chip.inc { background: #8B5E3C; color: #fff; }
  table.hosts tr.hostrow a.evhist { padding: 0; }
  table.hosts tr.hostrow .evbars24 { width: 84px; gap: 1px; }
  table.hosts tr.hostrow .evbars24 i { min-width: 1px; border-radius: 2px; }
}

/* Cabecera en móvil: logo a la izquierda, iconos + hamburguesa a la derecha,
   y la búsqueda en su propia línea. */
.topbrand { display: none; }
@media (max-width: 760px) {
  /* Una sola línea: logo | búsqueda (flexible) | iconos + hamburguesa (derecha). */
  .topline { flex-wrap: nowrap; padding: 10px 12px; gap: 6px; }
  .topbrand { display: inline-flex; align-items: center; order: 1; flex: 0 0 auto; }
  .topbrand img { display: block; width: 26px; height: 26px; border-radius: 6px; }
  .topline .topsearch { order: 2; flex: 1 1 auto; min-width: 0; width: auto; margin-left: 0; }
  .topline .topsearch input { min-width: 0; }
  .topline .themebtn { order: 5; flex: 0 0 auto; }
  .topline .usermenu { order: 6; flex: 0 0 auto; }
  .topline .toplogout { order: 7; flex: 0 0 auto; }
  .topline .navtoggle { order: 9; flex: 0 0 auto; }
  .topline .lifewave { display: none; }
  .topline .hcounts { display: none; }
}

/* Alternancia escritorio/móvil para elementos concretos */
.sonly-mobile { display: none; }
@media (max-width: 760px) {
  .sonly-mobile { display: inline; }
  .sonly-desktop { display: none; }
}

/* Módulos hijos de una señal: dependencia jerárquica visual (↳) */
tr.sigchild td:nth-child(2) { padding-left: 24px; position: relative; }
tr.sigchild td:nth-child(2)::before { content: "↳"; color: var(--muted); position: absolute; left: 8px; }

/* Elementos declarados de una señal (módulos hijos): métrica, estado e histórico */
.sigmods { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
table.sigmodtable { width: 100%; border-collapse: collapse; }
table.sigmodtable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 4px 6px; }
table.sigmodtable td { padding: 5px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
table.sigmodtable td:nth-child(4) { white-space: nowrap; text-align: right; }
table.sigmodtable .spark { display: block; }

/* Conectores (modal "Añadir monitorización") */
.connlist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 620px) { .connlist { grid-template-columns: 1fr; } }
.conncard { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.conncard:hover { border-color: var(--accent); }
.conncard .connname { font-weight: 700; font-size: 15px; }

.connscan { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* Página de estado (antes "Mapa de calor") */
.statushero { border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.statushero.ok { background: var(--flashok-bg); color: var(--flashok-ink); border: 1px solid var(--flashok-border); }
.statushero.bad { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid var(--danger-border); }
.statushero b { font-size: 20px; }
.statushero .muted { color: inherit; opacity: .8; }
.statussummary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.statusgroup { margin-bottom: 22px; }
.statusgroup h2 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.statusrows { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.statusrow { display: grid; grid-template-columns: 12px 1fr minmax(120px, 320px) 84px 92px; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--border-soft); color: inherit; text-decoration: none; }
.statusrow:last-child { border-bottom: 0; }
.statusrow:hover { background: var(--surface2); }
.statusrow .statusname { font-weight: 600; }
.statusrow .statusname .small { display: block; font-weight: 400; }
.statusdot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.statusdot.st-ok { background: var(--ok); }
.statusdot.st-failing { background: var(--warn); }
.statusdot.st-down { background: var(--down); }
.statusdot.st-recovering { background: var(--recover); }
.statusbar { display: flex; gap: 2px; align-items: stretch; height: 26px; }
.statusseg { flex: 1 1 0; border-radius: 3px; min-width: 3px; background: var(--surface2); }
.statusseg.st-ok { background: var(--ok); opacity: .78; }
.statusseg.st-failing { background: var(--warn); }
.statusseg.st-down { background: var(--down); }
.statusuptime { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.statusseen { text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .statusrow { grid-template-columns: 12px 1fr 76px; gap: 8px; }
  .statusrow .statusbar { display: none; }
  .statusseen { display: none; }
}

/* Página de estado compartida (pública): sin menú ni cabecera, sin enlaces */
body.public-body { background: var(--bg); }
body.public-body main { max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; align-items: stretch; }
.statuspage { max-width: 900px; }
.statuspage.public .statushead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.statuspage.public .statushead h1 { margin: 0; font-size: 22px; }
.statuspage.public .statushead img { display: block; }
/* Icono de compartir junto al título */
.pagebar h1 + a.iconbtn { margin-left: 10px; vertical-align: middle; color: var(--accent); }

/* Informes (sección): solapas + iframe con el informe real */
.reportframe { width: 100%; max-width: none; height: 1500px; border: 0; background: transparent; border-radius: 0 0 12px 12px;
  margin: 0; display: block; }
.content .tabsrow { align-items: center; }

/* Ficha de agente: en endpoints y en <1024px se oculta la columna «Tipo» (el
   nombre del módulo ya se ve en «Chequeo», que se mantiene como en escritorio). */
@media (max-width: 1024px) {
  table.hostchecks:not(.cloud) th:nth-child(2),
  table.hostchecks:not(.cloud) td:nth-child(2) { display: none; }
}

/* Página de estado: cabecera de sección con botón de compartir */
.statusgroup h2 { display: flex; align-items: center; gap: 8px; }
.sharebtn { color: var(--muted); padding: 2px; border: 0; background: transparent; cursor: pointer; line-height: 1; }
.sharebtn:hover { color: var(--accent); }

/* Notificaciones: interruptor por método (Activado/Desactivado) */
.notiftoggle { margin: 0 0 12px; }
.notiftoggle .checkline { margin: 0; }
/* Escalados / Reglas de evento / avisos de incidencia: solo se ofrecen los métodos activos (y configurados). */
:is(.escform,.incform):not(.k-email) .chrow[data-kind="email"],
:is(.escform,.incform):not(.k-sms) .chrow[data-kind="sms"],
:is(.escform,.incform):not(.k-voice) .chrow[data-kind="voice"],
:is(.escform,.incform):not(.k-telegram) .chrow[data-kind="telegram"],
:is(.escform,.incform):not(.k-discord) .chrow[data-kind="discord"],
:is(.escform,.incform):not(.k-slack) .chrow[data-kind="slack"],
:is(.escform,.incform):not(.k-teams) .chrow[data-kind="teams"],
:is(.escform,.incform):not(.k-webhook) .chrow[data-kind="webhook"] { display: none; }

/* Avisos de incidencia: bloques de apertura/cierre */
.incblock { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.incblock .inch { margin: 0 0 10px; font-size: 14px; font-weight: 700; }

/* Selector de tipo de monitorización (modal «Añadir monitorización») */
.modalbox.picker { max-width: 720px; }
.optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.optcard { display: flex; gap: 13px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; padding: 15px;
  color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.optcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.optcard .oi { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: rgba(47,111,228,.14); border: 1px solid rgba(47,111,228,.3); }
.optcard .otx { min-width: 0; }
.optcard .otx b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.optcard .otx span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 700px) { .optgrid { grid-template-columns: 1fr; } }

/* Regla UI: los botones de los modales van abajo a la derecha; la acción (color)
   a la derecha del todo y el cancelar/volver justo a su izquierda. */
.modalbox .actions { justify-content: flex-end; }
.wfooter { justify-content: flex-end; }
.wfooter .spacer { display: none; }

/* Caja única «pega tu web o IP» (modo simple de «Web o servicio»). */
.quickbox > label { display: block; margin-bottom: 6px; }
.quickbox .quickaddr { width: 100%; font-size: 16px; padding: 12px 14px; }
.quickhint { margin: 10px 0 0; font-size: 13px; border-radius: 8px; padding: 9px 12px; }
.quickhint.good { color: var(--ink); background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.35); }
.quickhint.bad { color: var(--down); background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.35); }

/* Valor de texto (módulos sin gráfica): ocupa el hueco de la minigráfica, en
   proporcional y más pequeño, con salto de línea normal (no todo atropellado). */
td.valtext { font-size: 12px; font-weight: 400; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; vertical-align: top; }

/* Consola de eventos · diseño de tarjetas / timeline */
.evsummary { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.sevchip { --sev: #98A2B3; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--ink); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; text-decoration: none; }
.sevchip i { width: 9px; height: 9px; border-radius: 50%; background: var(--sev); display: inline-block; }
.sevchip b { font-weight: 800; }
.sevchip:hover { border-color: var(--sev); }
.sevchip.on { border-color: var(--sev); box-shadow: inset 0 0 0 1px var(--sev); }

.sev-critical { --sev: var(--down); }
.sev-warning { --sev: var(--warn); }
.sev-ok { --sev: var(--ok); }
.sev-system { --sev: var(--accent); }
.sev-unknown { --sev: #98A2B3; }

.evgroup { margin: 16px 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.evcard { position: relative; display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 12px 18px; margin-bottom: 8px; }
.evcard::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--sev); }
.evcard-time { font-variant-numeric: tabular-nums; }
.evcard-time b { display: block; font-size: 13.5px; }
.evcard-time span { font-size: 11.5px; }
.evcard-main { min-width: 0; }
.evcard-msg { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.evcard-meta { margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.evcard-actions { display: flex; gap: 4px; opacity: .4; transition: opacity .12s; }
.evcard:hover .evcard-actions { opacity: 1; }
.evcard.done { opacity: .75; }
.evcard-actions form { display: inline; }
.sevpill { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 2px 7px;
  color: #fff; background: var(--sev); white-space: nowrap; }
.srcchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 7px; padding: 2px 8px; background: var(--surface2); text-decoration: none; max-width: 100%; }
.srcchip:hover { color: var(--ink); border-color: var(--accent); }
@media (max-width: 640px) {
  .evcard { grid-template-columns: 1fr auto; }
  .evcard-time { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
}

/* Campo rellenado automáticamente (p. ej. IP detectada del dominio). */
input.autofilled { border-color: rgba(22,163,74,.55); }

/* Sugerencias post-crear ("¿Vigilamos también…?") en la ficha del agente. */
.sugcard { border-color: rgba(59,130,246,.35); background: linear-gradient(180deg, rgba(59,130,246,.08), transparent 72%); }
.sughead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sughead > div { flex: 1; min-width: 0; }
.sughead b { font-size: 15px; }
.sugclose { flex: none; border: none; background: none; color: var(--muted); font: inherit; line-height: 1;
  cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.sugclose:hover { color: var(--ink); background: var(--surface2); }
.suggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.sugitem { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0; }
.sugitem .sugtx { min-width: 0; }
.sugitem .sugtx b { display: block; font-size: 13.5px; }
.sugitem .sugtx span { display: block; }
.sugitem .button { flex: none; white-space: nowrap; }