/* Chip del host (js/componentes/host.js) y su hoja de detalle (hostHoja.js). El chip reusa
   la pastilla de cuota.css; la hoja, el marco de testigo.css. Acá sólo el contenido:
   medidores (número grande + barra + curva) arriba y la tarjeta de datos fijos abajo. */
.host-lista { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); padding-bottom: var(--sp-4); }
.host-sub { font-size: var(--fs-xs); color: var(--faint); text-align: center; }
.host-rango { font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── Medidores ── */
.host-medidores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-2);
}
.host-medidor {
  --tono: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  background: var(--fill);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.host-medidor.tono-ok { --tono: var(--ok); }
.host-medidor.tono-wait { --tono: var(--wait); }
.host-medidor.tono-conflict { --tono: var(--conflict); }
.host-med-et {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.host-med-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--tono);
  font-variant-numeric: tabular-nums;
}
.host-med-det {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.host-barra {
  height: 4px;
  margin: var(--sp-1) 0;
  border-radius: var(--r-pill);
  background: var(--border);
  overflow: hidden;
}
.host-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--tono); }

.host-curva { display: block; width: 100%; height: 32px; }
.host-curva polyline { fill: none; stroke: var(--tono); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.host-curva .host-area { fill: var(--tono); opacity: 0.14; stroke: none; }

/* ── Datos fijos del equipo ── */
.host-tarjeta {
  display: flex;
  flex-direction: column;
  padding: 0 var(--sp-3);
  background: var(--fill);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.host-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
}
.host-fila + .host-fila { border-top: 1px solid var(--border); }
.host-et { color: var(--muted); flex: 0 0 auto; }
.host-v { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }