/* Ajustes de fidelidad con el diseño definitivo (se carga después de boss.css). */

/* Estado del sistema: 4 indicadores circulares en una fila, como en la referencia */
.b-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.b-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 8px 2px; }
.b-gauge svg { width: 84px; height: 84px; }
.b-gauge strong { font-size: 13px; font-weight: 600; color: var(--b-muted); }
.b-gauge > span { font-size: 11px; text-align: center; }
.b-gauge text { font-size: 22px; }
.b-kv { grid-template-columns: 1fr 1fr; }

/* Proyectos: barra con porcentaje a la derecha */
.b-pbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.b-pct { font-size: 12px; font-weight: 600; color: var(--b-text); }
.b-proj-row > .b-body { gap: 4px; }

/* Cola de tareas numerada (contador CSS; no altera los datos) */
.b-queue .b-list { counter-reset: cola; }
.b-queue .b-list > .b-row { counter-increment: cola; position: relative; padding-left: 46px; }
.b-queue .b-list > .b-row::before {
  content: counter(cola); position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--b-accent);
  border: 1px solid var(--b-line2); background: rgba(25, 229, 138, 0.08);
}

/* Cabeceras de tarjeta: título en una sola línea y etiquetas compactas */
.b-card > header { flex-wrap: nowrap; gap: 8px; min-width: 0; }
.b-card > header > :first-child { white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b-card > header > :not(:first-child) { flex: none; white-space: nowrap; font-size: 11px; padding: 3px 8px; }

/* Filas más compactas para que se vean más elementos a la vez */
.b-row { padding: 9px 10px; gap: 5px; }
.b-list { gap: 8px; }
.b-agent .b-small { line-height: 1.25; }

/* Cabecera: título en dos líneas, "OV Studio" grande y en verde */
.b-hero { justify-content: center; }
.b-hero h1 { font-size: clamp(30px, 2.6vw, 50px); line-height: 1.05; margin: 0; }
.b-hero h1 em { display: block; margin-left: 0; font-size: 1.25em; line-height: 1.05; }
.b-hero .b-sub { font-size: 17px; }
.b-hero-in { justify-content: center; padding-top: 14px; padding-bottom: 14px; gap: 6px; }
.b-hero .b-desc { -webkit-line-clamp: 2; }

@media (max-width: 760px) {
  .b-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}