/* Estilos del módulo de flota GPS (mapa Leaflet + marcadores CSS). */

.fleet-map-host {
    width: 100%;
    height: 100%;
    min-height: 320px;
}

/* Two-column full-height layout inside the app shell */
.fleet-page {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--tk-s4);
    padding: var(--tk-s4);
    min-height: 0;
}
.fleet-map-col, .fleet-list-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.tk-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--tk-border); flex: none;
}
/* isolation: contiene los z-index internos de Leaflet (panes/controles) para que
   no se pinten por encima del sidebar/topbar fijos. */
.fleet-map-wrap { flex: 1 1 auto; min-height: 0; position: relative; isolation: isolate; z-index: 0; }
.fleet-map-host .leaflet-control-container .leaflet-top { z-index: 400; }
.fleet-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; }

.fleet-item {
    padding: 11px 12px; margin-bottom: 8px; border-radius: var(--tk-r-sm);
    border: 1px solid var(--tk-border); background: var(--tk-surface); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.fleet-item:hover { background: var(--tk-surface-2); }
.fleet-item.sel { border-color: var(--tk-accent); background: var(--tk-accent-soft); }
.fleet-item-sub {
    display: flex; justify-content: space-between; gap: 8px; margin-top: 3px;
    font-size: .78rem; color: var(--tk-text-muted);
}

@media (max-width: 991.98px) {
    .fleet-page { grid-template-columns: 1fr; height: auto; }
    .fleet-map-col { height: 62vh; }
    .fleet-list-col { height: auto; max-height: 46vh; }
}

/* Marcadores dibujados con CSS (sin imágenes de Leaflet). */
.fleet-divicon { background: transparent; border: 0; }

.fleet-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    width: 0;
}

/* Insignia circular con ícono de vehículo (bi-truck-front-fill, etc.) — siempre en
   posición vertical y legible, sin importar el rumbo. */
.fleet-badge-slot { position: relative; width: 30px; height: 30px; }
.fleet-badge {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(10,10,10,.35);
    background: #9A9997;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; line-height: 1;
}
/* Paleta de marca: coral = en vivo/movimiento o ralentí, violeta = detenido, neutro = offline */
.fleet-marker.moving .fleet-badge,
.fleet-marker.idle .fleet-badge { background: #EF6B7A; }
.fleet-marker.stopped .fleet-badge { background: #7272DE; }
.fleet-marker.offline .fleet-badge { background: #9A9997; opacity: .75; }

/* Indicador de rumbo — flecha que pivota alrededor del centro exacto de la insignia.
   .fleet-heading es un contenedor de tamaño 0 posicionado en el centro (pivote real);
   .fleet-heading-tri es el triángulo, desplazado hacia arriba con un offset fijo en px
   (no %), así que al rotar el pivote barre en círculo alrededor del centro de la insignia. */
.fleet-heading { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.fleet-heading-tri {
    position: absolute; left: 0; top: -24px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid #EF6B7A;
    filter: drop-shadow(0 1px 2px rgba(10,10,10,.35));
}

.fleet-label {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #1c1c1e;
    background: rgba(255,255,255,.85);
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.fleet-popup table { border-collapse: collapse; margin-top: 4px; font-size: 12px; }
.fleet-popup td { padding: 2px 8px 2px 0; }
.fleet-popup .fleet-pop-k { color: #6c757d; font-weight: 600; }

/* Tarjetas del dashboard de flota */
.fleet-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.05);
}
.fleet-stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.fleet-stat-card .stat-label { font-size: .8rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }

/* Barras simples para las series del dashboard (sin librería de charts). */
.fleet-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fleet-bar-row .bar-label { width: 90px; font-size: .78rem; color: #495057; text-align: right; }
.fleet-bar-track { flex: 1; background: #eef0f2; border-radius: 6px; height: 16px; overflow: hidden; }
.fleet-bar-fill { height: 100%; background: #7272DE; border-radius: 6px; }
.fleet-bar-row .bar-value { width: 64px; font-size: .78rem; font-weight: 600; }