/* Página de inicio · CentralGym App */
:root {
  color-scheme: light dark;
  --bg: #f4f6fb;
  --bg-2: #e9edf7;
  --superficie: rgba(255, 255, 255, .78);
  --superficie-solida: #ffffff;
  --borde: rgba(15, 23, 42, .09);
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #64748b;
  --primario: #2563eb;
  --acento: #06b6d4;
  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --sombra: 0 10px 30px -12px rgba(15, 23, 42, .18);
  --radio: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b16;
    --bg-2: #0c1325;
    --superficie: rgba(17, 25, 45, .72);
    --superficie-solida: #111a2e;
    --borde: rgba(148, 163, 184, .14);
    --texto: #e8edf7;
    --texto-2: #a9b6cc;
    --texto-3: #7d8aa3;
    --primario: #60a5fa;
    --acento: #22d3ee;
    --ok: #34d399;
    --warn: #fbbf24;
    --err: #f87171;
    --sombra: 0 14px 40px -16px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }

.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 28px; } }

/* Fondo decorativo */
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orbe { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.o1 { width: 520px; height: 520px; background: var(--primario); top: -180px; left: -140px; }
.o2 { width: 460px; height: 460px; background: var(--acento); top: 120px; right: -160px; opacity: .3; }
.malla {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--borde) 1px, transparent 1px), linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
}

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--borde); }
.barra__int { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); min-width: 0; }
.marca:hover { text-decoration: none; }
.marca__logo { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: var(--sombra); flex: none; }
.marca__logo img { width: 30px; height: 30px; object-fit: contain; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.marca__texto strong { font-size: 15px; }
.marca__texto small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Indicadores de estado */
[data-estado="ok"] { --c: var(--ok); }
[data-estado="warn"] { --c: var(--warn); }
[data-estado="err"] { --c: var(--err); }
[data-estado="cargando"] { --c: var(--texto-3); }

.pildora { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: latido 2s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Hero */
.hero { display: grid; gap: 36px; padding-top: 56px; padding-bottom: 24px; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.15fr .85fr; padding-top: 84px; gap: 56px; } }
.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primario); background: color-mix(in srgb, var(--primario) 12%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(32px, 5.2vw, 56px); font-weight: 800; }
.degradado { background: linear-gradient(100deg, var(--primario), var(--acento)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__bajada { font-size: 17px; color: var(--texto-2); margin: 20px 0 24px; max-width: 60ch; }
.hero__bajada strong { color: var(--texto); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); }

/* Panel de estado */
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.panel__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel__titulo { margin: 0; font-weight: 700; font-size: 17px; }
.panel__sub { margin: 2px 0 0; font-size: 13px; color: var(--texto-3); }
.anillo { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, transparent); flex: none; }
.anillo span { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 18px var(--c); }

.servicios { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.servicios li { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--texto) 4%, transparent); font-size: 14px; }
.estado { font-size: 12px; font-weight: 600; color: var(--c); display: inline-flex; align-items: center; gap: 6px; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

.latencia { color: var(--primario); }
.latencia__cab { display: flex; justify-content: space-between; align-items: baseline; color: var(--texto-2); font-size: 14px; }
.latencia__cab b { color: var(--texto); font-size: 22px; font-variant-numeric: tabular-nums; }
.latencia__cab small { font-size: 12px; color: var(--texto-3); font-weight: 500; }
#grafico { width: 100%; height: 64px; display: block; margin-top: 8px; }
.latencia__pie { margin: 6px 0 0; font-size: 12px; color: var(--texto-3); }

/* Secciones */
.seccion { padding-top: 56px; }
.seccion__cab { margin-bottom: 22px; }
.seccion__cab h2, .ecosistema h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; }
.seccion__cab p { margin: 8px 0 0; color: var(--texto-2); }

/* Métricas */
.metricas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.metrica { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; position: relative; overflow: hidden; }
.metrica__icono { font-size: 20px; }
.metrica__etq { margin: 10px 0 4px; font-size: 13px; color: var(--texto-3); font-weight: 500; }
.metrica__valor { margin: 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metrica__valor small { font-size: 14px; color: var(--texto-3); font-weight: 500; }
.metrica__nota { margin: 4px 0 0; font-size: 12px; color: var(--texto-3); }
.barra-prog { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 8%, transparent); margin-top: 10px; overflow: hidden; }
.barra-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primario), var(--acento)); transition: width .6s ease; }
.enlace { background: none; border: 0; padding: 0; color: var(--primario); font: inherit; cursor: pointer; }
.enlace:hover { text-decoration: underline; }
.actualizado { animation: destello .8s ease; }
@keyframes destello { from { color: var(--primario); } to { color: inherit; } }

/* Diagnóstico */
.seccion__cab--accion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.seccion__cab--accion p { max-width: 62ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 12px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(100deg, var(--primario), var(--acento)); box-shadow: var(--sombra); transition: transform .15s ease, opacity .15s ease; }
.boton:hover:not(:disabled) { transform: translateY(-1px); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton--sec { color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); box-shadow: none; }

.diag { display: grid; gap: 14px; }
.diag__resumen { display: grid; gap: 18px; align-items: center; grid-template-columns: auto 1fr; padding: 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
@media (min-width: 900px) { .diag__resumen { grid-template-columns: auto 1fr auto; } }
.diag__anillo { position: relative; width: 76px; height: 76px; color: var(--c); }
.diag__anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.diag__anillo circle { fill: none; stroke-width: 3.2; }
.diag__anillo .pista { stroke: color-mix(in srgb, var(--texto) 9%, transparent); }
.diag__anillo .progreso { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .4s ease; }
.diag__anillo b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.diag__estado { margin: 0; font-size: 19px; font-weight: 700; color: var(--c); }
.diag__resumen[data-estado="cargando"] .diag__estado { color: var(--texto); }
.diag__detalle { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-2); }
.diag__kpis { grid-column: 1 / -1; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
@media (min-width: 900px) { .diag__kpis { grid-column: auto; grid-template-columns: repeat(4, minmax(110px, auto)); } }
.diag__kpis div { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--texto) 4%, transparent); }
.diag__kpis dt { font-size: 12px; color: var(--texto-3); }
.diag__kpis dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pruebas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prueba { --c: var(--texto-3); position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); }
@media (min-width: 720px) { .prueba { grid-template-columns: auto 1fr auto; } }
.prueba[data-estado="corriendo"] { --c: var(--primario); }
.prueba__icono { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); grid-row: span 2; }
@media (min-width: 720px) { .prueba__icono { grid-row: auto; } }
.prueba[data-estado="espera"] .prueba__icono::before { content: "•"; }
.prueba[data-estado="corriendo"] .prueba__icono::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: giro .8s linear infinite; }
.prueba[data-estado="ok"] .prueba__icono::before { content: "✓"; }
.prueba[data-estado="warn"] .prueba__icono::before { content: "!"; }
.prueba[data-estado="err"] .prueba__icono::before { content: "✕"; }
@keyframes giro { to { transform: rotate(360deg); } }
.prueba__info { display: flex; flex-direction: column; min-width: 0; }
.prueba__info b { font-size: 14.5px; }
.prueba__info small, .prueba__res small { font-size: 12.5px; color: var(--texto-3); }
.prueba__res { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 720px) { .prueba__res { align-items: flex-end; text-align: right; } }
.prueba__valor { font-size: 14px; color: var(--c); font-variant-numeric: tabular-nums; }
.prueba[data-estado="espera"] .prueba__valor { color: var(--texto-3); font-weight: 500; }
.prueba__barra { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; }
.prueba__barra i { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s ease; }
.prueba[data-estado="ok"] .prueba__barra i, .prueba[data-estado="warn"] .prueba__barra i, .prueba[data-estado="err"] .prueba__barra i { opacity: .35; }

/* Lista de pruebas + velocímetro a la derecha (junto a las pruebas de descarga y subida) */
.diag__cuerpo { display: grid; gap: 14px; }
@media (min-width: 900px) { .diag__cuerpo { grid-template-columns: minmax(0, 1fr) 290px; align-items: end; } }
.vel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 18px 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.vel[data-estado="corriendo"] { --c: var(--primario); border-color: color-mix(in srgb, var(--primario) 40%, var(--borde)); }
.vel__titulo { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.vel svg { width: 100%; max-width: 250px; height: auto; display: block; overflow: visible; }
.vel__pista, .vel__valor { fill: none; stroke-width: 10; stroke-linecap: round; }
.vel__pista { stroke: color-mix(in srgb, var(--texto) 9%, transparent); }
.vel__valor { stroke: url(#velGrad); stroke-dasharray: 0 100; transition: stroke-dasharray .25s ease-out; }
.vel__g1 { stop-color: var(--primario); }
.vel__g2 { stop-color: var(--acento); }
.vel__marca { stroke: var(--texto-3); stroke-width: 1.6; stroke-linecap: round; }
.vel__marca--menor { opacity: .45; stroke-width: 1.1; }
.vel__etq { fill: var(--texto-3); font-size: 9px; text-anchor: middle; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.vel__aguja { fill: var(--c); transform: rotate(-120deg); transform-box: view-box; transform-origin: 100px 100px; transition: transform .28s cubic-bezier(.3, 1.35, .5, 1); }
.vel__aguja circle { fill: var(--superficie-solida); stroke: var(--c); stroke-width: 3; }
.vel__num { fill: var(--texto); font-size: 23px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.vel__unidad { fill: var(--texto-3); font-size: 10px; font-weight: 600; text-anchor: middle; letter-spacing: .05em; }
.vel__fase { margin: 6px 0 0; font-weight: 700; font-size: 15px; color: var(--c); }
.vel[data-estado="cargando"] .vel__fase { color: var(--texto-2); }
.vel__sub { margin: 2px 0 0; min-height: 1.4em; font-size: 12.5px; color: var(--texto-3); }
.vel__kpis { width: 100%; margin: 12px 0 0; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.vel__kpis div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--texto) 4%, transparent); }
.vel__kpis dt { font-size: 11.5px; color: var(--texto-3); }
.vel__kpis dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vel__nota { margin: 10px 0 0; font-size: 11.5px; color: var(--texto-3); }

/* Diagnóstico del equipo (descarga) */
.equipo { display: grid; gap: 14px; padding: 20px; border-radius: var(--radio); border: 1px dashed color-mix(in srgb, var(--primario) 45%, var(--borde)); background: color-mix(in srgb, var(--primario) 6%, var(--superficie)); }
@media (min-width: 900px) { .equipo { grid-template-columns: 1fr auto; align-items: center; } }
.equipo h3 { font-size: 17px; margin-bottom: 6px; }
.equipo p { margin: 0; color: var(--texto-2); font-size: 14px; }
.equipo__nota { margin-top: 6px !important; font-size: 12.5px !important; color: var(--texto-3) !important; }
.equipo__descargas { display: flex; flex-wrap: wrap; gap: 10px; }
.equipo__ayuda { grid-column: 1 / -1; font-size: 13.5px; color: var(--texto-2); }
.equipo__ayuda summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.equipo__ayuda ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.equipo__ayuda code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--texto) 8%, transparent); overflow-wrap: anywhere; }

/* Tarjetas */
.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; transition: transform .2s ease, border-color .2s ease; }
.tarjeta:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primario) 40%, var(--borde)); }
.tarjeta__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 18%, transparent), color-mix(in srgb, var(--acento) 18%, transparent)); margin-bottom: 14px; }
.tarjeta h3 { font-size: 17px; margin-bottom: 6px; }
.tarjeta p { margin: 0; color: var(--texto-2); font-size: 14.5px; }

/* Ecosistema */
.ecosistema { display: grid; gap: 24px; padding: 30px; border-radius: 24px; border: 1px solid var(--borde); background: linear-gradient(135deg, color-mix(in srgb, var(--primario) 14%, var(--superficie-solida)), color-mix(in srgb, var(--acento) 10%, var(--superficie-solida))); }
@media (min-width: 900px) { .ecosistema { grid-template-columns: .9fr 1.1fr; align-items: center; padding: 40px; } }
.ecosistema__texto p { color: var(--texto-2); margin: 10px 0 0; }
.ecosistema__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ecosistema__lista li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde); font-size: 14px; font-weight: 500; }
.ecosistema__lista span { font-size: 18px; }

/* Pilares */
.pilares { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pilar { padding: 18px 18px 18px 20px; border-left: 3px solid var(--primario); background: var(--superficie); border-radius: 0 14px 14px 0; display: flex; flex-direction: column; gap: 4px; }
.pilar span { color: var(--texto-2); font-size: 14px; }

/* Pie */
.pie { margin-top: 72px; border-top: 1px solid var(--borde); padding: 26px 0 34px; }
.pie__int { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--texto-3); }
.pie p { margin: 0; }

@media (max-width: 520px) {
  .marca__texto small { display: none; }
  .pildora { padding: 6px 10px; font-size: 12px; }
  .panel { padding: 18px; }
  .ecosistema { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Monitoreo: series de gráficos, detalle de actividad, página /estado y /monitoreo
   Colores de series: paleta categórica validada (azul / naranjo / aqua) y paleta de
   estado reservada para errores (advertencia 4xx, crítico 5xx). Los de estado son
   fijos en ambos modos; los categóricos tienen su paso para fondo oscuro.
   ===================================================================== */
:root { --s-ok: #2a78d6; --s-p50: #2a78d6; --s-p95: #eb6834; --s-c3: #1baf7a; --s-c4: #fab219; --s-c5: #d03b3b; }
@media (prefers-color-scheme: dark) {
  :root { --s-ok: #3987e5; --s-p50: #3987e5; --s-p95: #d95926; --s-c3: #199e70; }
}
.g-serie--ok { --s: var(--s-ok); } .g-serie--p50 { --s: var(--s-p50); } .g-serie--p95 { --s: var(--s-p95); }
.g-serie--c3 { --s: var(--s-c3); } .g-serie--c4 { --s: var(--s-c4); } .g-serie--c5 { --s: var(--s-c5); }
i[class*="g-serie--"], span[class*="g-serie--"] { background: var(--s); }

/* Panel de estado: enlace al detalle */
.panel__detalle { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 18px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid color-mix(in srgb, var(--primario) 35%, var(--borde)); background: color-mix(in srgb, var(--primario) 8%, transparent); }
.panel__detalle:hover { text-decoration: none; background: color-mix(in srgb, var(--primario) 14%, transparent); }

/* Gráficos */
.g { position: relative; }
.g svg { display: block; overflow: visible; }
.g-grilla { stroke: color-mix(in srgb, var(--texto) 8%, transparent); stroke-width: 1; }
.g-base { stroke: color-mix(in srgb, var(--texto) 22%, transparent); stroke-width: 1; }
.g-eje { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.g-col { fill: var(--s); }
.g-hueco { fill: var(--superficie-solida); }
.g-resalte { fill: color-mix(in srgb, var(--texto) 6%, transparent); }
.g-linea { fill: none; stroke: var(--s); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { fill: var(--s); stroke: var(--superficie-solida); stroke-width: 2; }
.g-cursor { stroke: color-mix(in srgb, var(--texto) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.g-tip { position: absolute; top: 0; z-index: 5; min-width: 170px; padding: 9px 11px; border-radius: 10px; background: var(--superficie-solida); border: 1px solid var(--borde); box-shadow: var(--sombra); font-size: 12.5px; pointer-events: none; display: grid; gap: 3px; }
.g-tip[hidden] { display: none; }
.g-tip__titulo { font-weight: 700; margin-bottom: 2px; }
.g-tip__fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; color: var(--texto-2); }
.g-tip__fila b { color: var(--texto); font-variant-numeric: tabular-nums; }
.g-tip__total { grid-template-columns: 1fr auto; padding-bottom: 3px; border-bottom: 1px solid var(--borde); }
.g-tip__marca { width: 9px; height: 9px; border-radius: 3px; }
.g-tip__pie { color: var(--texto-3); font-size: 11.5px; margin-top: 2px; }

/* Detalle de actividad */
.actividad { margin-top: 18px; padding: 22px; border-radius: 22px; background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 18px; }
.actividad__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.actividad__cab h3 { font-size: 19px; }
.actividad__sub { margin: 4px 0 0; font-size: 13px; color: var(--texto-3); }
.rangos { display: inline-flex; padding: 3px; border-radius: 11px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.rangos button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--texto-2); padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.rangos button[aria-pressed="true"] { background: var(--superficie-solida); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.actividad__kpis { margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.actividad__kpis div { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--texto) 4%, transparent); display: flex; flex-direction: column; }
.actividad__kpis dt { font-size: 12.5px; color: var(--texto-3); }
.actividad__kpis dd { margin: 2px 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.actividad__kpis small { font-size: 12px; color: var(--texto-3); }
.actividad__graficos { display: grid; gap: 14px; }
@media (min-width: 980px) { .actividad__graficos { grid-template-columns: 1fr 1fr; } }
.grafico { margin: 0; padding: 14px 14px 8px; border-radius: 16px; border: 1px solid var(--borde); background: color-mix(in srgb, var(--superficie-solida) 55%, transparent); min-width: 0; }
.grafico figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 14px; margin-bottom: 8px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafico__lienzo { min-height: 190px; }
.actividad__inferior { display: grid; gap: 14px; }
@media (min-width: 900px) { .actividad__inferior { grid-template-columns: 1fr 1fr; } }
.dato { padding: 16px; border-radius: 16px; border: 1px solid var(--borde); }
.dato h4 { margin: 0 0 12px; font-size: 14px; }
.proporcion { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.proporcion span { min-width: 3px; }
.proporcion__vacia { flex: 1; }
.proporcion__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.proporcion__lista li { display: grid; grid-template-columns: auto 1fr auto 56px; align-items: center; gap: 8px; }
.proporcion__lista i { width: 10px; height: 10px; border-radius: 3px; }
.proporcion__lista b { font-variant-numeric: tabular-nums; }
.proporcion__lista small { text-align: right; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranking__fila { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.ranking__fila b { font-variant-numeric: tabular-nums; }
.ranking__barra { height: 6px; border-radius: 3px; margin: 4px 0 2px; background: color-mix(in srgb, var(--texto) 6%, transparent); }
.ranking__barra span { display: block; height: 100%; border-radius: 3px; background: var(--s-ok); }
.ranking small { font-size: 12px; color: var(--texto-3); }
.ranking__err { color: var(--err); }
.ranking__vacio { color: var(--texto-3); font-size: 13.5px; }
.actividad__tabla summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--primario); }
.tabla-scroll { overflow: auto; margin-top: 10px; max-height: 360px; }
.tabla-scroll table, .tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabla-scroll th, .tabla-scroll td, .tabla th, .tabla td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-scroll th:first-child, .tabla-scroll td:first-child, .tabla .izq { text-align: left; }
.tabla-scroll th, .tabla th { position: sticky; top: 0; background: var(--superficie-solida); color: var(--texto-3); font-weight: 600; font-size: 12px; }

/* Página /estado */
.estado-hero { padding: 36px 0 8px; }
.estado-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.estado-hero p { color: var(--texto-2); margin: 8px 0 0; max-width: 70ch; }
.volver { display: inline-flex; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.banner { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--borde)); }
.banner b { font-size: 18px; color: var(--c); }
.banner p { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-2); }
.banner__icono { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--c); }
.estado-grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.svc { padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 10px; align-content: start; }
.svc__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.svc__cab h3 { font-size: 15.5px; }
.svc__desc { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-3); }
.svc .estado { white-space: nowrap; }
.svc__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svc__datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 9px; border-radius: 9px; background: color-mix(in srgb, var(--texto) 4%, transparent); min-width: 0; }
.svc__datos dt { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.svc__datos dd { margin: 0; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc__pie { font-size: 12px; color: var(--texto-3); }
.leyenda-estados { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--texto-2); margin-top: 14px; }

/* Página /monitoreo */
.mon-acceso[hidden], .boton[hidden] { display: none; }
.mon-acceso { max-width: 420px; margin: 40px auto 0; padding: 24px; border-radius: 20px; background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 12px; }
.mon-acceso input, .mon-filtros select { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie-solida); color: var(--texto); }
.mon-acceso__error { color: var(--err); font-size: 13.5px; margin: 0; min-height: 1.3em; }
.mon-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mon-filtros label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.mon-bloque { margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borde); min-width: 0; }
.mon-bloque h2 { font-size: 17px; margin-bottom: 12px; }
.mon-tablas { display: grid; gap: 14px; }
@media (min-width: 1100px) { .mon-tablas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mon-tablas > :last-child { grid-column: 1 / -1; } }
.mon-tablas .mon-bloque { margin-top: 0; }
.mon-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--texto) 6%, transparent); margin: 0 6px 6px 0; }
.mon-codigo { font-weight: 700; }
.mon-codigo--5 { color: var(--err); }
.mon-codigo--4 { color: var(--warn); }
.mon-ruta { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--texto-2); }

/* ---------- /monitoreo por empresa ---------- */
.mon-acceso__texto { margin: 0; color: var(--texto-2); font-size: 14px; }
.mon-acceso__ayuda { margin: 0; color: var(--texto-3); font-size: 12.5px; }
.mon-acceso__ayuda code { font-size: 12px; }
.mon-empresa { margin-top: 26px; display: grid; gap: 18px; align-items: start; }
@media (min-width: 900px) { .mon-empresa { grid-template-columns: minmax(0, 1fr) 320px; } }
.mon-empresa h1 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; overflow-wrap: anywhere; }
.mon-empresa__eyebrow { margin: 0 0 4px; font-size: 13px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.mon-empresa__sesion { margin: 8px 0 0; color: var(--texto-2); font-size: 14px; }
.mon-empresa__sucursales { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mon-empresa__sucursales li { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--texto) 6%, transparent); color: var(--texto-2); }
.mon-empresa__plataforma { padding: 16px 18px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 10px; }
.mon-empresa__etq { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.mon-empresa__plataforma ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mon-empresa__plataforma li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.ranking__fila .estado { margin-left: 6px; font-size: 11.5px; }

/* ---------- Bloque de actividad compartido (paneles.js) ---------- */
.actividad__controles { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .actividad__inferior--amplio { grid-template-columns: minmax(260px, 1fr) 2fr; } }
.modulos-mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: 520px; overflow-y: auto; }
.modulos-mini__item { padding: 10px 12px 8px; border-radius: 12px; background: color-mix(in srgb, var(--texto) 4%, transparent); display: grid; gap: 4px; min-width: 0; }
.modulos-mini__item small { font-size: 12px; color: var(--texto-3); }
.modulos-mini__item .estado { margin-left: 6px; font-size: 11px; }
.modulos-mini__g, .svc__grafico { min-height: 38px; }
.g-mini { display: block; overflow: visible; }
.g-mini__col { fill: var(--s); }
.svc__grafico { margin-top: 2px; }

/* Barras de disponibilidad de las dependencias (estado, no serie: usa los colores de estado) */
.disp { display: flex; gap: 2px; height: 26px; }
.disp span { flex: 1; min-width: 2px; border-radius: 2px; background: var(--c); }
.disp span[data-estado="vacio"] { background: color-mix(in srgb, var(--texto) 12%, transparent); }
.disp__pie { margin: -4px 0 0; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--texto-3); }
.disp__pie b { font-weight: 600; color: var(--texto-2); }