/* ============================================================
   Instrumento del motor: VELOCIDAD + REGISTRO DE MARCHA en una sola
   carcasa, colgada bajo el motor.

   Va ahi porque la columna central era mas corta que las de pilotos y
   dejaba ~190px muertos: el instrumento los ocupa sin crecer la fila.
   Asi los pulsadores vuelven a quedarse solos y centrados abajo.
   ============================================================ */
.motor-instr {
  align-self: stretch;              /* toma el ancho que marca el motor */
  margin-top: 0.35rem; min-width: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.4rem 0.6rem 0.3rem;
}

.instr-head { display: flex; align-items: baseline; gap: 0.45rem; }
.instr-title {
  font-family: var(--font-cond); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.09em; color: var(--muted); white-space: nowrap;
}
/* Resumen del registro (arranques, tiempo en marcha): tinta de texto,
   nunca el color de la serie. */
.instr-sub {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Separacion entre los dos bloques del instrumento */
.motor-instr .instr-head + .rpm { margin-bottom: 0.15rem; }
.motor-instr .rpm + .instr-head {
  margin-top: 0.15rem; padding-top: 0.3rem;
  border-top: 1px solid var(--border);
}

/* ---------------- Registro de marcha ---------------- */
/* El canvas va FUERA DEL FLUJO a proposito: con alto flexible, un canvas
   en flujo con height:100% no resuelve y cae a su tamano intrinseco -> se
   realimenta con el que le fija fitCanvas y crece sin parar. */
.trend-strip-plot { position: relative; height: clamp(44px, 6.4vh, 78px); }
.trend-strip-plot canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Movil: el sinoptico se apila y el motor deja de mandar en el ancho. */
@media (max-width: 820px) {
  .motor-instr { width: 100%; max-width: 420px; margin-inline: auto; }
}