/* Monitor de red E1. Solo tokens de tokens.css (sistema de diseño WeDo+/CE). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-canvas);
}
h1, h2, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.titulo {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.018em;
  color: var(--brand-navy);
  line-height: var(--leading-tight);
}
.h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.014em;
  color: var(--fg-default);
  line-height: var(--leading-snug);
}
.sub { color: var(--fg-muted); font-size: var(--text-sm); margin-top: var(--space-1); max-width: 72ch; }
.meta { color: var(--fg-muted); font-size: var(--text-sm); }

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--topbar-h);
  padding: var(--space-2) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}
.marca { display: flex; align-items: center; gap: var(--space-3); }
.estado-vivo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }

/* Badge de estado: dot + texto (nunca color solo) */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.badge .dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--gray-400); }
.badge.ok   { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.badge.ok .dot   { background: var(--success-600); }
.badge.warn { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.badge.warn .dot { background: var(--warning-600); }
.badge.err  { background: var(--error-50); border-color: var(--error-200); color: var(--error-700); }
.badge.err .dot  { background: var(--error-600); }
.badge.vivo .dot { animation: latido 2s var(--ease-in-out) infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: var(--opacity-soft); transform: scale(1.35); } }

/* Contenido */
.contenido {
  display: grid; gap: var(--space-5);
  padding: var(--space-6);
  max-width: 1440px; margin: 0 auto;
}
.tarjeta {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  min-width: 0;
}
.tarjeta-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.resumen-frase p { font-size: var(--text-md); color: var(--gray-700); line-height: var(--leading-normal); }
.resumen-frase strong { color: var(--brand-navy); }

.fila-2 { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fila-2.iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .fila-2, .fila-2.iguales { grid-template-columns: minmax(0, 1fr); } }

.grafica { width: 100%; }
.grafica-hero { height: 640px; }
[hidden] { display: none !important; }
.grafica-gauge { height: 240px; }
.grafica-3d { height: 560px; }
.grafica-media { height: 320px; }
.gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

/* Control segmentado (receta de chips/segmentado del recetario) */
.segmentado {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--gray-100); border-radius: var(--radius-md);
}
.segmentado button {
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg-muted); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.segmentado button:hover { color: var(--fg-default); }
.segmentado button:active { transform: translateY(0.5px); }
.segmentado button[aria-selected="true"] {
  background: var(--bg-surface); color: var(--brand-navy); border-color: var(--border-default);
  box-shadow: var(--shadow-xs); font-weight: var(--weight-semibold);
}
.segmentado button:focus-visible { outline: none; border-color: var(--orange-600); box-shadow: 0 0 0 3px var(--orange-100); }

/* Indicadores */
.kpis { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
}
.kpi .valor {
  font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: -0.022em;
  color: var(--brand-navy); line-height: var(--leading-tight); font-variant-numeric: tabular-nums;
}
.kpi .valor small { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-muted); margin-left: 2px; }
.kpi .nota { font-size: var(--text-xs); color: var(--fg-muted); }
.kpi .estado { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.kpi .estado .dot { width: 8px; height: 8px; border-radius: var(--radius-full); }
.estado.ok { color: var(--success-700); } .estado.ok .dot { background: var(--success-600); }
.estado.warn { color: var(--warning-700); } .estado.warn .dot { background: var(--warning-600); }
.estado.err { color: var(--error-700); } .estado.err .dot { background: var(--error-600); }

/* Periodos */
.periodos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.periodo {
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4);
  display: grid; gap: var(--space-3); background: var(--bg-subtle);
}
.periodo .nombre { font-weight: var(--weight-bold); color: var(--fg-default); }
.periodo .rango { font-size: var(--text-xs); color: var(--fg-muted); }
.periodo .grande { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); color: var(--brand-navy); letter-spacing: -0.022em; line-height: 1; font-variant-numeric: tabular-nums; }
.periodo .grande small { font-size: var(--text-md); color: var(--fg-muted); font-weight: var(--weight-semibold); }
.barra { height: 8px; border-radius: var(--radius-full); background: var(--gray-100); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--orange-600); transition: width var(--duration-slow) var(--ease-out); }
.periodo dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.periodo dt { font-size: var(--text-xs); color: var(--fg-muted); }
.periodo dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.tendencia { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.tendencia.mejor { color: var(--success-700); }
.tendencia.peor { color: var(--error-700); }

/* Tabla */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tabla th {
  text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-subtle); padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.tabla td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-100); white-space: nowrap; height: var(--row-h-dense); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: var(--bg-hover); }
.tabla .n { text-align: right; }

.pie { display: grid; gap: var(--space-2); color: var(--fg-muted); font-size: var(--text-sm); padding: var(--space-2) var(--space-1) var(--space-8); max-width: 110ch; }
.pie strong { color: var(--gray-700); }