/*
MAP CSS - Tracking v2.0
Estilos compartidos entre todas las vistas con mapa:
vehicles, trips, scheduling.
*/
/* ETIQUETA FLOTANTE DE PLACA */
/*
* Mostrada sobre cada marcador de vehículo en el mapa.
* Estructura HTML generada por PlateLabel en map-helper.js:
*
*
*
*
* ABC-123
*
*/
.plate-label {
position: absolute;
background: #1e293b;
color: #f1f5f9;
font-size: 10px;
font-weight: 700;
font-family: 'Inter', 'Segoe UI', sans-serif;
letter-spacing: 0.04em;
padding: 2px 6px 2px 3px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.15);
transform: translateX(-50%);
z-index: 1000;
line-height: 1.4;
display: flex;
align-items: center;
gap: 4px;
}
.dark-theme .plate-label {
background: #0f172a;
border-color: rgba(255, 255, 255, 0.2);
}
/* Anillo blanco exterior */
.plate-status-ring {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
/* Círculo interior de estado */
.plate-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6c757d; /* gris por defecto */
transition: background 0.3s;
}
/* Estados del vehículo */
/* Verde → encendido (velocidad > 0 y ≤ 60 km/h) */
.plate-label.status-moving .plate-status-dot { background: #28a745; }
/* Gris → apagado / 0 km/h */
.plate-label.status-idle .plate-status-dot { background: #6c757d; }
/* Amarillo → presenta algún evento activo */
.plate-label.status-event .plate-status-dot { background: #ffc107; }
/* Rojo → exceso de velocidad (> 60 km/h) */
.plate-label.status-speeding .plate-status-dot { background: #dc3545; }
/* ETIQUETA FLOTANTE DE POI */
/*
* Mostrada sobre marcadores de puntos de interés (cargue, enturne, descargue, checkpoint).
* Generada por PoiLabel en map-helper.js via createPoiMarker().
*
*
* Texto del punto
*
*/
.poi-label {
position: absolute;
font-size: 10px;
font-weight: 700;
font-family: 'Inter', 'Segoe UI', sans-serif;
letter-spacing: 0.03em;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
z-index: 900;
line-height: 1.4;
transform: translateX(-50%);
/* flecha inferior centrada */
background-clip: padding-box;
}
.poi-label::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top-width: 5px;
border-top-style: solid;
}
/* Punto de cargue — verde */
.poi-label-loading {
background: #16a34a;
}
.poi-label-loading::after { border-top-color: #16a34a; }
/* Enturne — amarillo oscuro */
.poi-label-enturne {
background: #b45309;
}
.poi-label-enturne::after { border-top-color: #b45309; }
/* Punto de descargue — rojo */
.poi-label-unloading {
background: #dc2626;
}
.poi-label-unloading::after { border-top-color: #dc2626; }
/* Checkpoint genérico — índigo */
.poi-label-checkpoint {
background: #4f46e5;
}
.poi-label-checkpoint::after { border-top-color: #4f46e5; }
/* ETIQUETA DE EVENTO EN MAPA */
/*
* Ícono flotante sobre cada marcador cuando el vehículo tiene un evento activo.
* Generada por EventLabel en map-helper.js.
*
*
*
|
?
*
|
*