/* components/monitor/monitor.css
   Panel de Monitoreo — usa las variables de tema de core/base.css.
   Prefijo mon- para no colisionar con otros componentes. */

/* ── Alertas ─────────────────────────────────────────────── */
.mon-sin-alertas {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  background: var(--success-bg); color: var(--success);
  border: 1px solid var(--border); border-radius: 0.625rem;
  font-weight: 600; font-size: 0.9rem;
}

.mon-alertas {
  display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;
}

.mon-alerta {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.65rem 0.9rem; border-radius: 0.625rem;
  border: 1px solid var(--border); background: var(--surface);
  border-left: 4px solid var(--muted);
}
.mon-alerta-critica    { border-left-color: var(--danger); }
.mon-alerta-advertencia { border-left-color: var(--orange); }
.mon-alerta-info       { border-left-color: var(--accent); }

.mon-alerta-sev {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem; border-radius: 999px; margin-top: 0.1rem;
}
.mon-alerta-critica .mon-alerta-sev    { background: var(--danger-bg); color: var(--danger); }
.mon-alerta-advertencia .mon-alerta-sev { background: var(--accent-bg); color: var(--orange); }
.mon-alerta-info .mon-alerta-sev       { background: var(--accent-bg); color: var(--accent); }

.mon-alerta-titulo  { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.mon-alerta-detalle { font-size: 0.82rem; color: var(--muted); margin-top: 0.1rem; }

/* ── KPIs ────────────────────────────────────────────────── */
.mon-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem; margin-bottom: 1rem;
}

.mon-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.625rem; padding: 0.7rem 0.85rem;
}
.mon-kpi-valor { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.mon-kpi-label { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.mon-kpi-ok  .mon-kpi-valor { color: var(--success); }
.mon-kpi-err .mon-kpi-valor { color: var(--danger); }
.mon-kpi-warn .mon-kpi-valor { color: var(--orange); }

/* ── Grid de secciones ──────────────────────────────────── */
.mon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.75rem; align-items: start;
}

.mon-seccion {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.625rem; padding: 0.9rem 1rem;
}

.mon-seccion-titulo {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 700; color: var(--text);
  margin-bottom: 0.7rem;
}
.mon-seccion-titulo i { color: var(--accent); }

/* ── Barras de recursos ─────────────────────────────────── */
.mon-barra { margin-bottom: 0.6rem; }
.mon-barra-head {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--text); margin-bottom: 0.25rem;
}
.mon-barra-extra { color: var(--muted); font-weight: 400; }
.mon-barra-track {
  height: 0.45rem; border-radius: 999px; background: var(--bg); overflow: hidden;
}
.mon-barra-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.mon-fill-ok   { background: var(--success); }
.mon-fill-warn { background: var(--orange); }
.mon-fill-err  { background: var(--danger); }

/* ── Datos etiqueta/valor ───────────────────────────────── */
.mon-datos { margin-top: 0.5rem; }
.mon-dato {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.3rem 0; font-size: 0.8rem;
  border-top: 1px solid var(--border);
}
.mon-dato-label { color: var(--muted); }
.mon-dato-valor { color: var(--text); font-weight: 600; text-align: right; }

/* ── Checks de integridad ───────────────────────────────── */
.mon-check {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.4rem 0; border-top: 1px solid var(--border);
}
.mon-check:first-of-type { border-top: none; padding-top: 0; }
.mon-check-icono { flex: 0 0 auto; margin-top: 0.1rem; }
.mon-check-nombre  { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.mon-check-detalle { font-size: 0.75rem; color: var(--muted); }

/* ── Filas de seguridad ─────────────────────────────────── */
.mon-sub {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin: 0.7rem 0 0.3rem;
}
.mon-fila {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.3rem 0; font-size: 0.8rem; border-top: 1px solid var(--border);
  color: var(--text);
}

.mon-ok   { color: var(--success); }
.mon-warn { color: var(--orange); font-weight: 600; }
.mon-err  { color: var(--danger); font-weight: 600; }

/* ── Tablas compactas ───────────────────────────────────── */
.mon-tabla { font-size: 0.8rem; }
.mon-tabla th, .mon-tabla td { padding: 0.4rem 0.5rem; }
.mon-ruta {
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: ui-monospace, monospace; font-size: 0.72rem;
}

.mon-vacio {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--muted); padding: 0.4rem 0;
}
.mon-vacio i { color: var(--success); }

.mon-nota { font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; }

/* Móvil */
@media (max-width: 640px) {
  .mon-grid { grid-template-columns: 1fr; }
}