/* Solo lo que Bootstrap 5 no resuelve: identidad de plataforma, pila de
   drawers, indicadores en vivo, franja de actividad y marcadores del mapa. */

:root {
  /* Trio categorico validado para contraste y daltonismo sobre fondo oscuro. */
  --ch-sensata: #3d8fd6;
  --ch-geotab: #c4832c;
  --ch-flespi: #8f7fd4;
}

.accent-sensata { --ch-accent: var(--ch-sensata); }
.accent-geotab  { --ch-accent: var(--ch-geotab); }
.accent-flespi  { --ch-accent: var(--ch-flespi); }

/* Franja de color que identifica la plataforma sin depender del texto. */
.card-accent { border-left: 3px solid var(--ch-accent, var(--bs-border-color)) !important; }

.dot-accent {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--ch-accent, var(--bs-secondary));
}

/* --- Numeros -------------------------------------------------------------- */

.stat-value {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  font-weight: 600;
}

.tabular { font-variant-numeric: tabular-nums; }

/* --- Indicador de poleo en vivo ------------------------------------------- */

.pulse {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--bs-success); position: relative;
}
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse-ring 1.8s ease-out infinite;
}
.pulse.is-idle { background: var(--bs-secondary); }
.pulse.is-idle::after { animation: none; }
.pulse.is-down { background: var(--bs-danger); }

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}

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

/* --- Tabla de eventos ----------------------------------------------------- */

.event-row { cursor: pointer; }
.event-row:hover { background-color: rgba(255, 255, 255, .05); }

/* Destello breve para el renglon que acaba de entrar en el poleo. */
@keyframes row-flash {
  from { background-color: rgba(61, 143, 214, .28); }
  to   { background-color: transparent; }
}
.row-new > td { animation: row-flash 2.4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .row-new > td { animation: none; }
}

/* --- Franja de actividad por hora (serie unica) --------------------------- */

.activity {
  display: flex; align-items: flex-end; gap: 2px; height: 64px;
}
.activity-bar {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%;
}
.activity-bar > span {
  display: block; width: 100%; min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--ch-accent, var(--bs-primary));
  opacity: .85;
}
.activity-bar:hover > span { opacity: 1; }
.activity-axis {
  display: flex; gap: 2px; font-variant-numeric: tabular-nums;
}
.activity-axis > span { flex: 1 1 0; text-align: center; }

/* --- Drawers apilados ----------------------------------------------------- */

#drawerDetail { width: min(620px, 100vw); }
/* Por encima del backdrop del primer drawer (1040) y del propio drawer (1045). */
#drawerTelemetry { width: min(520px, 100vw); z-index: 1056; }
#drawerMap { width: min(560px, 100vw); z-index: 1057; }

.drawer-section-title {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}

/* --- Mapa ----------------------------------------------------------------- */

.map-canvas { height: 340px; border-radius: .5rem; }
.map-canvas-lg { height: 460px; border-radius: .5rem; }

/* Leaflet asume fondo claro; se atenua para el tema oscuro. */
[data-bs-theme='dark'] .leaflet-tile { filter: brightness(.75) saturate(.85); }
.leaflet-container { background: #10141a; }

.truck-marker {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ch-accent, var(--bs-primary));
  color: #fff; font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.truck-marker.level-danger  { background: var(--bs-danger); }
.truck-marker.level-warning { background: var(--bs-warning); color: #000; }
.truck-marker.level-success { background: var(--bs-success); }
.truck-marker.level-secondary { background: var(--bs-secondary); }