.sidebar {
    width: 320px;
    background-color: #212529;
    overflow-y: auto;
}

.main-content {
    background-color: #343a40;
}

#map {
    height: 70%;
    width: 100%;
    background-color: #495057;
}

#vehicle-details {
    height: 30%;
    overflow-y: auto;
    background-color: #2c3034;
    border-top: 1px solid #495057;
}

.accordion-button {
    background-color: #343a40;
    color: #fff;
}
.accordion-button:not(.collapsed) {
    background-color: #0d6efd;
}
.accordion-button:focus {
    box-shadow: none;
}

.accordion-item {
    border-color: #495057;
}
.accordion-body {
    background-color: #212529;
    padding: 0.5rem;
}

.vehicle-selector.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}
.leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(1.1);
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 767.98px) {
    .gps-container {
        flex-direction: column;
        height: 100vh; /* Ocupar toda la altura */
    }

    .main-content {
        flex-grow: 1; /* Permitir que el contenido principal crezca */
        min-height: 0; /* Necesario para que flexbox funcione correctamente en contenedores que encogen */
    }

    #map {
        flex-grow: 1; /* El mapa toma todo el espacio disponible en el main-content */
    }

    #vehicle-details {
       display: none; /* Ocultar el panel de detalles, la info estará en el popup del mapa */
    }
}