/* ============================================================
   Carril con todos los vehículos — sección "Compatibilidad" del home.
   Base: estándar aprobado (skill §6.1, snippets/vehiculos.*). Cambia que
   aquí circulan todos a la vez y el carril reemplaza las tarjetas.
   ============================================================ */

.carriles { margin: 8px auto 0; }

.carril {
  --vh: 120px;                              /* alto del dibujo (viewBox 120) */
  position: relative;
  height: calc(var(--vh) + 88px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.carril::after {                            /* camino con línea punteada */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  border-top: 2px solid #dfe5ec;
  background: repeating-linear-gradient(90deg, #dfe5ec 0 22px, transparent 22px 44px) 0 8px / 100% 2px no-repeat;
}

.veh {
  position: absolute; left: 0;
  bottom: calc(16px - var(--vh) * .1);      /* el suelo del dibujo (y=108) toca el camino */
  height: var(--vh);
  width: calc(var(--vh) * 320 / 120);
  overflow: visible;
  visibility: hidden;
  will-change: transform;
}

/* Estilo relleno (aprobado): flotilla blanca rotulada; particulares en color */
.veh .b   { fill: #fff; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .p   { fill: #4f9fe6; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .m   { fill: #ffc93c; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .bk  { fill: #9fb1c2; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .g   { fill: #bfe0fb; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .ropa { fill: var(--blue); stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.veh .s   { fill: var(--blue); }
.veh .t   { fill: var(--blue); font: 800 15px 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.04em; }
.veh .d   { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: .45; }
.veh .neg { fill: var(--ink); }
.veh .tubo { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.veh .brazo { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; }
.veh .lf  { fill: #ffcf4d; }
.veh .lt  { fill: #ef5b5b; }
.veh .llanta { fill: var(--ink); }
.veh .rin    { fill: #dce5ed; }
.veh .rayo   { stroke: #7f95a9; stroke-width: 2; stroke-linecap: round; }
.veh .maza   { fill: var(--ink); }
.veh .sombra { fill: #0a223b; opacity: .1; }

/* Etiqueta de telemetría: viaja sobre el techo de cada vehículo */
.carril-chip {
  position: absolute; left: 0; top: 0;
  display: grid;
  grid-template-columns: 8px auto auto;
  align-items: center;
  column-gap: 7px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #d4e7f5;
  border-radius: 10px;
  padding: 6px 10px 6px 9px;
  box-shadow: 0 6px 18px #0a223b12;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  visibility: hidden;
  will-change: transform;
}
.carril-chip b { font-weight: 700; }
.carril-chip .vel {
  justify-self: end;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  min-width: 6.2ch;
  text-align: right;
}
.carril-chip .estado { display: none; grid-column: 2 / 4; color: var(--muted); font-size: 11px; }
.carril-chip.is-parada .estado { display: block; }

/* Punto de estado: verde en movimiento · ámbar detenido con motor encendido · gris apagado */
.carril-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #18b26b; transition: background .25s; }
.carril-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: carril-ping 1.6s ease-out infinite; }
.carril-chip[data-motor="encendido"] i { background: #f5a524; }
.carril-chip[data-motor="apagado"] i { background: #9aabbb; }
.carril-chip[data-motor="apagado"] i::after { animation: none; }
@keyframes carril-ping { to { transform: scale(2.8); opacity: 0; } }

/* ─── Versión noche (fondo azul marino, como Conectividad) ─────────
   Los vehículos siguen blancos y rotulados; se aclaran llantas y piezas
   oscuras para que no se pierdan, y los faros brillan. */
#compatibilidad.noche {
  background: radial-gradient(80% 120% at 0 0, #0d4e70b3 0%, #0a223b00 55%), #0a223b;
}
#compatibilidad.noche .eyebrow { color: #b9e4ff; }
#compatibilidad.noche .section-h2 { color: #fff; }
#compatibilidad.noche .section-sub { color: #ffffffbf; }
#compatibilidad.noche .carril::after {
  border-top-color: #ffffff2e;
  background-image: repeating-linear-gradient(90deg, #ffffff33 0 22px, transparent 22px 44px);
}
#compatibilidad.noche .veh .llanta, #compatibilidad.noche .veh .maza { fill: #142232; stroke: #6c86a3; stroke-width: 1.4; }
#compatibilidad.noche .veh .rin { fill: #c9d6e3; }
#compatibilidad.noche .veh .neg { fill: #34485f; }
#compatibilidad.noche .veh .tubo { stroke: #34485f; }
#compatibilidad.noche .veh .sombra { fill: #000; opacity: .32; }
#compatibilidad.noche .veh .lf { filter: drop-shadow(0 0 5px #ffd76a) drop-shadow(0 0 12px #ffcf4d99); }
#compatibilidad.noche .veh .lt { filter: drop-shadow(0 0 4px #ff5b5bcc); }
#compatibilidad.noche .carril-chip { border-color: #ffffff; box-shadow: 0 8px 24px #00000059; }

@media (max-width: 720px) {
  .carril { --vh: 84px; height: calc(var(--vh) + 84px); }
  .carril-chip { font-size: 11px; padding: 5px 9px 5px 8px; column-gap: 6px; }
  .carril-chip .estado { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .carril-chip i::after { animation: none; }
}

/* El carril es decorativo: la lista de vehículos queda para lectores de pantalla */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}