/* ==========================================================================
   Uptime — sistema de diseño
   Se carga después de Bootstrap 5.3 y redefine sus variables para ambos temas.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --u-bg: #f5f6f8;
  --u-surface: #ffffff;
  --u-surface-2: #f0f2f5;
  --u-surface-3: #e7eaef;
  --u-border: #e3e6eb;
  --u-border-strong: #cfd4dc;
  --u-text: #111827;
  --u-text-2: #374151;
  --u-muted: #6b7280;
  --u-accent: #4f46e5;
  --u-accent-hover: #4338ca;
  --u-accent-soft: #eef0ff;
  --u-ok: #12a150;
  --u-ok-soft: #e7f7ee;
  --u-warn: #d97706;
  --u-warn-soft: #fdf3e2;
  --u-bad: #dc2626;
  --u-bad-soft: #fdecec;
  --u-info: #2563eb;
  --u-info-soft: #e8f0fe;
  --u-nodata: #d5dae2;
  --u-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --u-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --u-radius: 12px;
  --u-radius-sm: 8px;
  --u-sidebar-w: 248px;
  --u-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --u-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --bs-body-bg: var(--u-bg);
  --bs-body-color: var(--u-text);
  --bs-secondary-color: var(--u-muted);
  --bs-tertiary-bg: var(--u-surface-2);
  --bs-secondary-bg: var(--u-surface-2);
  --bs-border-color: var(--u-border);
  --bs-emphasis-color: var(--u-text);
  --bs-link-color: var(--u-accent);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--u-accent-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-body-font-family: var(--u-font);
  --bs-body-font-size: .9375rem;
  --bs-border-radius: var(--u-radius-sm);
  --bs-focus-ring-color: rgba(79, 70, 229, .25);
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --u-bg: #0b0d12;
  --u-surface: #12151c;
  --u-surface-2: #181c25;
  --u-surface-3: #212633;
  --u-border: #232836;
  --u-border-strong: #313849;
  --u-text: #e7e9ef;
  --u-text-2: #c4c9d4;
  --u-muted: #8b93a5;
  --u-accent: #818cf8;
  --u-accent-hover: #a5b4fc;
  --u-accent-soft: rgba(129, 140, 248, .14);
  --u-ok: #34d27b;
  --u-ok-soft: rgba(52, 210, 123, .12);
  --u-warn: #f5b041;
  --u-warn-soft: rgba(245, 176, 65, .13);
  --u-bad: #f8716b;
  --u-bad-soft: rgba(248, 113, 107, .13);
  --u-info: #6aa1ff;
  --u-info-soft: rgba(106, 161, 255, .13);
  --u-nodata: #2a3040;
  --u-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --u-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);

  --bs-body-bg: var(--u-bg);
  --bs-body-color: var(--u-text);
  --bs-secondary-color: var(--u-muted);
  --bs-tertiary-bg: var(--u-surface-2);
  --bs-secondary-bg: var(--u-surface-2);
  --bs-border-color: var(--u-border);
  --bs-emphasis-color: var(--u-text);
  --bs-link-color: var(--u-accent);
  --bs-link-color-rgb: 129, 140, 248;
  --bs-link-hover-color: var(--u-accent-hover);
  --bs-link-hover-color-rgb: 165, 180, 252;
  --bs-focus-ring-color: rgba(129, 140, 248, .3);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--u-bg);
  color: var(--u-text);
  font-family: var(--u-font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--u-text); font-weight: 650; letter-spacing: -.01em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code, .mono { font-family: var(--u-mono); font-size: .875em; }
.text-muted, .text-body-secondary { color: var(--u-muted) !important; }
.tnum { font-variant-numeric: tabular-nums; }
.small-caps { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--u-muted); }
hr { border-color: var(--u-border); opacity: 1; }
::selection { background: var(--u-accent-soft); }

/* Botones */
.btn { font-weight: 550; border-radius: var(--u-radius-sm); --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: .875rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--u-accent); --bs-btn-border-color: var(--u-accent);
  --bs-btn-hover-bg: var(--u-accent-hover); --bs-btn-hover-border-color: var(--u-accent-hover);
  --bs-btn-active-bg: var(--u-accent-hover); --bs-btn-active-border-color: var(--u-accent-hover);
  --bs-btn-disabled-bg: var(--u-accent); --bs-btn-disabled-border-color: var(--u-accent);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b0d12; --bs-btn-hover-color: #0b0d12; --bs-btn-active-color: #0b0d12; --bs-btn-disabled-color: #0b0d12; }
.btn-ghost {
  --bs-btn-color: var(--u-text-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--u-surface-2); --bs-btn-hover-color: var(--u-text); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--u-surface-3); --bs-btn-active-border-color: transparent;
}
.btn-outline {
  --bs-btn-color: var(--u-text-2); --bs-btn-bg: var(--u-surface); --bs-btn-border-color: var(--u-border-strong);
  --bs-btn-hover-bg: var(--u-surface-2); --bs-btn-hover-color: var(--u-text); --bs-btn-hover-border-color: var(--u-border-strong);
  --bs-btn-active-bg: var(--u-surface-3); --bs-btn-active-border-color: var(--u-border-strong);
  box-shadow: var(--u-shadow);
}
.btn-danger-soft {
  --bs-btn-color: var(--u-bad); --bs-btn-bg: var(--u-bad-soft); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--u-bad); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--u-bad);
}
.btn-icon { --bs-btn-padding-x: .45rem; width: 2.1rem; height: 2.1rem; }
.btn-sm.btn-icon { width: 1.85rem; height: 1.85rem; }

/* Formularios */
.form-control, .form-select {
  background-color: var(--u-surface); border-color: var(--u-border-strong); color: var(--u-text);
  border-radius: var(--u-radius-sm); font-size: .9rem; padding: .5rem .75rem;
}
.form-control:focus, .form-select:focus { border-color: var(--u-accent); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); background-color: var(--u-surface); color: var(--u-text); }
.form-control[readonly] { background-color: var(--u-surface-2); }
.form-label { font-weight: 550; font-size: .875rem; margin-bottom: .35rem; color: var(--u-text-2); }
.form-text { color: var(--u-muted); font-size: .8125rem; }
.form-check-input { border-color: var(--u-border-strong); background-color: var(--u-surface); }
.form-check-input:checked { background-color: var(--u-accent); border-color: var(--u-accent); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: .1em; }
.input-group-text { background: var(--u-surface-2); border-color: var(--u-border-strong); color: var(--u-muted); }

/* Tarjetas */
.card, .u-card {
  background: var(--u-surface); border: 1px solid var(--u-border); border-radius: var(--u-radius);
  box-shadow: var(--u-shadow); --bs-card-bg: var(--u-surface); --bs-card-border-color: var(--u-border); color: var(--u-text);
}
.u-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--u-border); }
.u-card-header h2, .u-card-header h3 { font-size: 1rem; margin: 0; }
.u-card-body { padding: 1.25rem; }
.u-card-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--u-border); background: var(--u-surface-2); border-radius: 0 0 var(--u-radius) var(--u-radius); }

/* Alertas de Bootstrap con tonos propios */
.alert { border-radius: var(--u-radius); border: 1px solid transparent; font-size: .9rem; }
.alert-success { background: var(--u-ok-soft); color: var(--u-text); border-color: color-mix(in srgb, var(--u-ok) 30%, transparent); }
.alert-danger { background: var(--u-bad-soft); color: var(--u-text); border-color: color-mix(in srgb, var(--u-bad) 30%, transparent); }
.alert-warning { background: var(--u-warn-soft); color: var(--u-text); border-color: color-mix(in srgb, var(--u-warn) 30%, transparent); }
.alert-info { background: var(--u-info-soft); color: var(--u-text); border-color: color-mix(in srgb, var(--u-info) 30%, transparent); }
.alert .bi { margin-right: .35rem; }

/* Tablas */
.table { --bs-table-bg: transparent; --bs-table-color: var(--u-text); --bs-table-border-color: var(--u-border); --bs-table-hover-bg: var(--u-surface-2); --bs-table-hover-color: var(--u-text); margin: 0; }
.table > thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--u-muted); background: var(--u-surface-2); border-bottom-width: 1px; white-space: nowrap; padding: .6rem .9rem; }
.table > tbody td { padding: .75rem .9rem; vertical-align: middle; }
.table > :not(caption) > * > * { border-bottom-color: var(--u-border); }
.table tbody tr:last-child td { border-bottom: 0; }

/* Dropdown y modales */
.dropdown-menu { --bs-dropdown-bg: var(--u-surface); --bs-dropdown-border-color: var(--u-border); --bs-dropdown-link-color: var(--u-text-2); --bs-dropdown-link-hover-bg: var(--u-surface-2); --bs-dropdown-link-hover-color: var(--u-text); --bs-dropdown-link-active-bg: var(--u-accent); --bs-dropdown-font-size: .875rem; border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow-lg); padding: .35rem; }
.dropdown-item { border-radius: 6px; padding: .45rem .65rem; display: flex; align-items: center; gap: .55rem; }
.dropdown-item .bi { color: var(--u-muted); width: 1rem; }
.dropdown-item.text-danger .bi { color: inherit; }
.modal-content { background: var(--u-surface); border: 1px solid var(--u-border); border-radius: var(--u-radius); box-shadow: var(--u-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--u-border); }
.tooltip { --bs-tooltip-bg: #111827; --bs-tooltip-color: #f9fafb; --bs-tooltip-font-size: .78rem; --bs-tooltip-max-width: 280px; }
.tooltip-inner { text-align: left; padding: .45rem .6rem; border-radius: 6px; }

/* --------------------------------------------------------------------------
   Estructura de la aplicación
   -------------------------------------------------------------------------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--u-sidebar-w); z-index: 1030;
  background: var(--u-surface); border-right: 1px solid var(--u-border);
  display: flex; flex-direction: column; padding: 1rem .75rem;
}
.app-brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem 1.1rem; color: var(--u-text); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.app-brand:hover { text-decoration: none; color: var(--u-text); }
.app-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--u-accent); display: grid; place-items: center; color: #fff; flex: none; }
[data-bs-theme="dark"] .app-brand-mark { color: #0b0d12; }
.app-brand-mark svg { width: 18px; height: 18px; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--u-muted); font-weight: 600; padding: 1rem .7rem .4rem; }
.app-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: var(--u-radius-sm);
  color: var(--u-text-2); font-weight: 500; font-size: .9rem;
}
.app-nav a .bi { font-size: 1.05rem; color: var(--u-muted); width: 1.1rem; text-align: center; }
.app-nav a:hover { background: var(--u-surface-2); color: var(--u-text); text-decoration: none; }
.app-nav a.active { background: var(--u-accent-soft); color: var(--u-accent); }
.app-nav a.active .bi { color: var(--u-accent); }
.app-nav .count { margin-left: auto; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--u-bad-soft); color: var(--u-bad); }
.app-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.plan-box { border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); padding: .75rem; background: var(--u-surface-2); font-size: .8125rem; }
.plan-box .meter { margin: .45rem 0 .2rem; }
.user-box { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: var(--u-radius-sm); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--u-accent-soft); color: var(--u-accent); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.user-box .name { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-box .role { font-size: .72rem; color: var(--u-muted); }

.app-main { margin-left: var(--u-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar-mobile { display: none; }
.app-content { padding: 1.75rem 2rem 3rem; max-width: 1440px; width: 100%; }
.impersonation-bar { background: var(--u-warn-soft); color: var(--u-text); border-bottom: 1px solid color-mix(in srgb, var(--u-warn) 35%, transparent); padding: .5rem 2rem; font-size: .85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header .sub { color: var(--u-muted); margin: .25rem 0 0; font-size: .9rem; }
.page-header .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.breadcrumb-back { display: inline-flex; align-items: center; gap: .35rem; color: var(--u-muted); font-size: .85rem; margin-bottom: .6rem; }
.breadcrumb-back:hover { color: var(--u-text); text-decoration: none; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--u-shadow-lg); }
  .app-sidebar.open { transform: none; }
  .app-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1029; display: none; }
  .app-backdrop.open { display: block; }
  .app-main { margin-left: 0; }
  .app-topbar-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: sticky; top: 0; z-index: 1020;
    background: color-mix(in srgb, var(--u-surface) 92%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--u-border); padding: .6rem 1rem;
  }
  .app-content { padding: 1.25rem 1rem 3rem; }
  .impersonation-bar { padding: .5rem 1rem; }
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

/* Estado */
.status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .8125rem; padding: .22rem .6rem .22rem .5rem; border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status.is-ok { color: var(--u-ok); background: var(--u-ok-soft); }
.status.is-bad { color: var(--u-bad); background: var(--u-bad-soft); }
.status.is-bad::before { animation: pulse 1.6s ease-out infinite; }
.status.is-warn { color: var(--u-warn); background: var(--u-warn-soft); }
.status.is-nodata { color: var(--u-muted); background: var(--u-surface-2); }
.status.is-lg { font-size: .95rem; padding: .35rem .85rem .35rem .7rem; }
.status.is-lg::before { width: 10px; height: 10px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .status.is-bad::before { animation: none; } }

/* Etiquetas semánticas */
.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 6px; background: var(--u-surface-2); color: var(--u-text-2); white-space: nowrap; }
.tag.is-ok { background: var(--u-ok-soft); color: var(--u-ok); }
.tag.is-warn { background: var(--u-warn-soft); color: var(--u-warn); }
.tag.is-bad { background: var(--u-bad-soft); color: var(--u-bad); }
.tag.is-info { background: var(--u-info-soft); color: var(--u-info); }
.tag.is-accent { background: var(--u-accent-soft); color: var(--u-accent); }
.c-ok { color: var(--u-ok) !important; }
.c-warn { color: var(--u-warn) !important; }
.c-bad { color: var(--u-bad) !important; }
.c-muted { color: var(--u-muted) !important; }

/* KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { background: var(--u-surface); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 1rem 1.15rem; box-shadow: var(--u-shadow); min-width: 0; }
.kpi-label { font-size: .8rem; color: var(--u-muted); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.kpi-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-value small { font-size: .9rem; font-weight: 500; color: var(--u-muted); letter-spacing: 0; }
.kpi-sub { font-size: .78rem; color: var(--u-muted); margin-top: .25rem; }

/* Barra de capacidad */
.meter { height: 6px; border-radius: 999px; background: var(--u-surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--u-accent); }
.meter.is-full > span { background: var(--u-warn); }

/* Barras de uptime por franja */
.uptime-bars { display: flex; gap: 2px; align-items: stretch; height: 26px; min-width: 120px; }
.uptime-bars span { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--u-nodata); transition: transform .1s; }
.uptime-bars span:hover { transform: scaleY(1.15); }
.uptime-bars .ok { background: var(--u-ok); }
.uptime-bars .parcial { background: var(--u-warn); }
.uptime-bars .caida { background: var(--u-bad); }
.uptime-bars .wall { background: color-mix(in srgb, var(--u-warn) 55%, var(--u-nodata)); }
.uptime-bars.is-lg { height: 38px; gap: 3px; }
.uptime-legend { display: flex; justify-content: space-between; font-size: .72rem; color: var(--u-muted); margin-top: .35rem; }

/* Anillo de puntuación */
.score-ring {
  --p: 0; --c: var(--u-muted); --size: 40px;
  width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--u-surface-3) 0);
  display: inline-grid; place-items: center; position: relative;
}
.score-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--u-surface); }
.score-ring b { position: relative; font-size: calc(var(--size) * .32); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c); }
.score-ring.is-ok { --c: var(--u-ok); }
.score-ring.is-warn { --c: var(--u-warn); }
.score-ring.is-bad { --c: var(--u-bad); }
.score-ring.is-xl { --size: 112px; }
.score-ring.is-xl::before { inset: 9px; }
.score-pair { display: inline-flex; gap: .4rem; align-items: center; }
.score-pair .lbl { font-size: .62rem; color: var(--u-muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; margin-top: 2px; }

/* Métricas */
.metric-list { display: grid; gap: .1rem; }
.metric-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px dashed var(--u-border); font-size: .9rem; }
.metric-row:last-child { border-bottom: 0; }
.metric-row .name { color: var(--u-text-2); display: flex; align-items: center; gap: .4rem; }
.metric-row .val { font-weight: 650; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--u-nodata); flex: none; }
.dot.is-ok { background: var(--u-ok); }
.dot.is-warn { background: var(--u-warn); }
.dot.is-bad { background: var(--u-bad); }
.help { color: var(--u-muted); cursor: help; font-size: .85em; }

/* Lista de monitores */
.monitor-toolbar { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .9rem 1.1rem; border-bottom: 1px solid var(--u-border); }
.monitor-toolbar .search { position: relative; flex: 1 1 240px; max-width: 360px; }
.monitor-toolbar .search .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--u-muted); }
.monitor-toolbar .search input { padding-left: 2.1rem; }
.segmented { display: inline-flex; background: var(--u-surface-2); border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); padding: 3px; gap: 2px; }
.segmented button, .segmented a { border: 0; background: transparent; color: var(--u-muted); font-size: .8125rem; font-weight: 550; padding: .3rem .7rem; border-radius: 6px; white-space: nowrap; }
.segmented button:hover, .segmented a:hover { color: var(--u-text); text-decoration: none; }
.segmented .active { background: var(--u-surface); color: var(--u-text); box-shadow: var(--u-shadow); }
.segmented .n { font-variant-numeric: tabular-nums; color: var(--u-muted); margin-left: .25rem; font-weight: 500; }

.monitor-table td { white-space: nowrap; }
.monitor-url { display: flex; flex-direction: column; min-width: 0; max-width: 320px; }
.monitor-url a { color: var(--u-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.monitor-url a:hover { color: var(--u-accent); }
.monitor-url .meta { font-size: .78rem; color: var(--u-muted); overflow: hidden; text-overflow: ellipsis; }
.monitor-table tr.is-paused td > *:not(.monitor-actions) { opacity: .55; }
.cell-stack { display: flex; flex-direction: column; line-height: 1.25; }
.cell-stack .main { font-weight: 650; font-variant-numeric: tabular-nums; }
.cell-stack .sub { font-size: .75rem; color: var(--u-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
  .monitor-table thead { display: none; }
  .monitor-table, .monitor-table tbody, .monitor-table tr, .monitor-table td { display: block; width: 100%; }
  .monitor-table tr { padding: .9rem 1rem; border-bottom: 1px solid var(--u-border); display: grid; grid-template-columns: 1fr auto; gap: .55rem .75rem; }
  .monitor-table td { padding: 0 !important; border: 0 !important; }
  .monitor-table td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--u-muted); font-weight: 600; margin-bottom: .15rem; }
  .monitor-table .col-url { grid-column: 1 / -1; order: -2; }
  .monitor-table .col-status { order: -3; }
  .monitor-table .col-actions { order: -3; text-align: right; }
  .monitor-table .col-bars { grid-column: 1 / -1; }
  .monitor-url { max-width: 100%; }
}

/* Pestañas */
.u-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--u-border); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.u-tabs::-webkit-scrollbar { display: none; }
.u-tabs a { padding: .65rem .9rem; color: var(--u-muted); font-weight: 550; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: .45rem; }
.u-tabs a:hover { color: var(--u-text); text-decoration: none; }
.u-tabs a.active { color: var(--u-accent); border-bottom-color: var(--u-accent); }

/* Estado vacío */
.empty-state { text-align: center; padding: 3.5rem 1.5rem; }
.empty-state .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--u-accent-soft); color: var(--u-accent); display: inline-grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.empty-state p { color: var(--u-muted); max-width: 420px; margin: 0 auto 1.25rem; }

/* Banner */
.banner { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-radius: var(--u-radius); background: var(--u-accent-soft); border: 1px solid color-mix(in srgb, var(--u-accent) 25%, transparent); margin-bottom: 1.25rem; font-size: .9rem; }
.banner .bi { font-size: 1.2rem; color: var(--u-accent); }
.banner .grow { flex: 1; }
@media (max-width: 575.98px) { .banner { flex-wrap: wrap; } }

/* Línea de tiempo de alertas */
.timeline-day { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--u-muted); padding: 1rem 1.25rem .5rem; background: var(--u-surface-2); border-bottom: 1px solid var(--u-border); }
.timeline-item { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--u-border); align-items: start; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 1rem; background: var(--u-surface-2); color: var(--u-muted); }
.timeline-icon.is-bad { background: var(--u-bad-soft); color: var(--u-bad); }
.timeline-icon.is-ok { background: var(--u-ok-soft); color: var(--u-ok); }
.timeline-icon.is-warn { background: var(--u-warn-soft); color: var(--u-warn); }
.timeline-icon.is-info { background: var(--u-info-soft); color: var(--u-info); }
.timeline-body .title { font-weight: 600; font-size: .9rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.timeline-body .msg { color: var(--u-text-2); font-size: .85rem; margin-top: .2rem; white-space: pre-line; word-break: break-word; }
.timeline-time { font-size: .8rem; color: var(--u-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Listas de comprobación */
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.check-item { display: flex; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); background: var(--u-surface); }
.check-item .ico { font-size: 1.15rem; line-height: 1.2; }
.check-item .t { font-weight: 600; font-size: .9rem; }
.check-item .d { font-size: .8rem; color: var(--u-muted); }

/* Definiciones */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.dl-grid dt { font-size: .75rem; color: var(--u-muted); font-weight: 500; margin-bottom: .15rem; }
.dl-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-all; }

/* Gráficos */
.chart-box { position: relative; height: 300px; }
.chart-box.is-sm { height: 220px; }
.chart-box.is-tall { height: 420px; }

/* Aviso flotante */
.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.u-toast { display: flex; gap: .65rem; align-items: flex-start; background: var(--u-surface); border: 1px solid var(--u-border); border-left: 4px solid var(--u-accent); border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow-lg); padding: .8rem 1rem; font-size: .9rem; animation: toastIn .2s ease-out; }
.u-toast.is-ok { border-left-color: var(--u-ok); }
.u-toast.is-bad { border-left-color: var(--u-bad); }
.u-toast.is-warn { border-left-color: var(--u-warn); }
.u-toast .btn-close { margin-left: auto; font-size: .7rem; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

/* Ajustes */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
.settings-nav { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: .45rem .7rem; border-radius: var(--u-radius-sm); color: var(--u-text-2); font-size: .875rem; font-weight: 500; }
.settings-nav a:hover { background: var(--u-surface-2); text-decoration: none; }
.settings-section { scroll-margin-top: 1.5rem; margin-bottom: 1.5rem; }
.setting-row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--u-border); }
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row:first-child { padding-top: 0; }
.setting-row .t { font-weight: 600; font-size: .9rem; }
.setting-row .d { font-size: .82rem; color: var(--u-muted); margin-top: .15rem; max-width: 520px; }
.setting-row .ctl { flex: none; display: flex; align-items: center; }
@media (max-width: 991.98px) {
  .settings-grid { grid-template-columns: 1fr; gap: 1rem; }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .setting-row { flex-direction: column; gap: .6rem; }
}

/* Waterfall */
.wf-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .85rem; color: var(--u-muted); }
.wf-summary b { color: var(--u-text); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--u-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }

/* --------------------------------------------------------------------------
   Páginas públicas
   -------------------------------------------------------------------------- */
.pub-nav { position: sticky; top: 0; z-index: 1020; background: color-mix(in srgb, var(--u-bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--u-border); }
.pub-nav .inner { max-width: 1160px; margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.pub-nav .links { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; }
.pub-nav .links a:not(.btn) { color: var(--u-text-2); font-size: .9rem; font-weight: 500; }
.pub-nav .links a:not(.btn):hover { color: var(--u-text); text-decoration: none; }
.pub-nav .app-brand { padding: 0; }
.pub-menu-btn { display: none; margin-left: auto; }
@media (max-width: 767.98px) {
  .pub-menu-btn { display: inline-flex; }
  .pub-nav .links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--u-surface); border-bottom: 1px solid var(--u-border); padding: .5rem 1.25rem 1rem; }
  .pub-nav .links.open { display: flex; }
  .pub-nav .links a { padding: .6rem 0; }
}
.pub-main { max-width: 1160px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.pub-main.is-narrow { max-width: 820px; }
.pub-footer { border-top: 1px solid var(--u-border); color: var(--u-muted); font-size: .85rem; }
.pub-footer .inner { max-width: 1160px; margin: 0 auto; padding: 1.5rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pub-footer a { color: var(--u-muted); }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 750; }
.hero .lead { color: var(--u-text-2); font-size: 1.1rem; max-width: 540px; margin: 1rem 0 1.5rem; }
.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; color: var(--u-text-2); font-size: .95rem; }
.hero-points .bi { color: var(--u-ok); margin-right: .5rem; }
@media (max-width: 991.98px) { .hero { grid-template-columns: 1fr; gap: 2rem; } }

.auth-card { background: var(--u-surface); border: 1px solid var(--u-border); border-radius: 16px; box-shadow: var(--u-shadow-lg); padding: 2rem; width: 100%; max-width: 420px; margin: 0 auto; }
.auth-card h1, .auth-card h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.auth-card .sub { color: var(--u-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.auth-card .foot { text-align: center; font-size: .875rem; color: var(--u-muted); margin-top: 1.25rem; }
.auth-wrap { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 2rem 1rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.feature { background: var(--u-surface); border: 1px solid var(--u-border); border-radius: var(--u-radius); padding: 1.5rem; box-shadow: var(--u-shadow); }
.feature .icon { width: 40px; height: 40px; border-radius: 10px; background: var(--u-accent-soft); color: var(--u-accent); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .9rem; }
.feature h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.feature p { color: var(--u-text-2); font-size: .9rem; margin: 0; }
.prose h2 { font-size: 1.2rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--u-text-2); line-height: 1.65; }

.accordion { --bs-accordion-bg: var(--u-surface); --bs-accordion-border-color: var(--u-border); --bs-accordion-btn-color: var(--u-text); --bs-accordion-active-bg: var(--u-surface-2); --bs-accordion-active-color: var(--u-text); --bs-accordion-color: var(--u-text-2); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color); --bs-accordion-border-radius: var(--u-radius); --bs-accordion-inner-border-radius: calc(var(--u-radius) - 1px); }
.accordion-button { font-weight: 600; font-size: .95rem; }

/* Página de estado pública */
.status-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--u-border); background: var(--u-surface); box-shadow: var(--u-shadow); margin-bottom: 1.5rem; }
.status-hero.is-ok { background: linear-gradient(135deg, var(--u-ok-soft), var(--u-surface) 60%); }
.status-hero.is-bad { background: linear-gradient(135deg, var(--u-bad-soft), var(--u-surface) 60%); }
.status-hero.is-warn { background: linear-gradient(135deg, var(--u-warn-soft), var(--u-surface) 60%); }
.status-hero h1 { font-size: 1.4rem; margin: .4rem 0 0; word-break: break-all; }
.cta-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1050; display: none; align-items: center; gap: 1rem; background: var(--u-surface); border: 1px solid var(--u-border); box-shadow: var(--u-shadow-lg); border-radius: 999px; padding: .5rem .5rem .5rem 1.1rem; font-size: .9rem; width: max-content; max-width: calc(100vw - 2rem); }
.cta-bar.show { display: flex; animation: toastIn .25s ease-out; }

/* Utilidades */
.gap-grid { display: grid; gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 991.98px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.visually-hidden-focusable:focus { position: fixed !important; top: .5rem; left: .5rem; z-index: 2000; background: var(--u-surface); padding: .5rem 1rem; border-radius: 6px; }

@media (max-width: 575.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .kpi { padding: .8rem .9rem; }
  .kpi-value { font-size: 1.3rem; }
  .page-header h1 { font-size: 1.3rem; }
}

/* Página de funciones: capturas */
.shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--u-border); box-shadow: 0 24px 60px rgba(16, 24, 40, .14), var(--u-shadow); background: var(--u-surface); }
[data-bs-theme="dark"] .shot { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.shot .bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--u-surface-2); border-bottom: 1px solid var(--u-border); }
.shot .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--u-border-strong); display: block; }
.shot img { display: block; width: 100%; height: auto; }
a.shot:hover { transform: translateY(-2px); transition: transform .15s; }
.shot.is-phone { max-width: 300px; border-radius: 28px; border-width: 6px; border-color: #1f2430; margin: 0 auto; }
.showcase { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3.5rem; align-items: center; padding: 3.5rem 0; border-top: 1px solid var(--u-border); }
.showcase.is-reverse { grid-template-columns: 1.35fr 1fr; }
.showcase.is-reverse .showcase-text { order: 2; }
.showcase-text .kicker { font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--u-accent); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }
.showcase-text h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; margin-bottom: .8rem; }
.showcase-text p { color: var(--u-text-2); font-size: 1rem; line-height: 1.6; }
.showcase-text ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.showcase-text li { color: var(--u-text-2); font-size: .93rem; display: flex; gap: .55rem; }
.showcase-text li .bi { color: var(--u-ok); flex: none; margin-top: .1rem; }
.hero-shot { margin: 2.5rem auto 0; max-width: 1100px; }
@media (max-width: 991.98px) {
  .showcase, .showcase.is-reverse { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 0; }
  .showcase.is-reverse .showcase-text { order: 0; }
}

/* Instalación como app */
.app-instalada [data-instalar], .app-instalada .solo-sin-instalar { display: none !important; }
.inst-pasos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.inst-paso { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .8rem .9rem; border: 1px solid var(--u-border); border-radius: var(--u-radius-sm); background: var(--u-surface-2); font-size: .92rem; }
.inst-n { width: 26px; height: 26px; border-radius: 50%; background: var(--u-accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
[data-bs-theme="dark"] .inst-n { color: #0b0d12; }
.inst-ico { font-size: 1.4rem; color: var(--u-accent); }
.inst-qr { width: 200px; height: 200px; margin: 0 auto 1.25rem; padding: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--u-border); display: grid; place-items: center; }
.inst-qr svg { width: 100%; height: 100%; }
.app-banner { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-radius: var(--u-radius); background: var(--u-surface); border: 1px solid var(--u-border); box-shadow: var(--u-shadow); margin-bottom: 1.25rem; }
.app-banner img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.app-banner .t { font-weight: 650; font-size: .92rem; }
.app-banner .d { font-size: .8rem; color: var(--u-muted); }
.store-btns { display: flex; gap: .75rem; flex-wrap: wrap; }
.device-tabs .segmented button { padding: .45rem 1rem; font-size: .9rem; }

/* App instalada en iOS: respetar la zona segura (notch, barra de inicio) */
.app-instalada body { padding-bottom: env(safe-area-inset-bottom); }
.app-instalada .app-topbar-mobile { padding-top: max(.6rem, env(safe-area-inset-top)); }
.app-instalada .app-sidebar { padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }