/* Componentes de mapa */
#map-container {
    height: 250px;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 20px;
    width: 100%;
}

.map-selector-container {
    height: 350px;
    position: relative;
    margin-bottom: 20px;
    border: 2px solid #e0e0e0;
    overflow: hidden;
}

.map-selector {
    height: 100%;
    width: 100%;
}

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    padding: 5px;
    border-radius: 0;
    box-shadow: var(--card-shadow);
}

.map-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: white;
    padding: 8px;
    border-radius: 0;
    font-size: 0.9rem;
    box-shadow: var(--card-shadow);
}

.selected-stop-marker {
    color: var(--primary-color);
    font-size: 24px;
}

.bus-stop-marker {
    color: #666;
    font-size: 18px;
}

.table-responsive {
    overflow-x: auto;
}

/* Marcadores de estado en el mapa */
.status-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-not-full-marker {
    background-color: var(--success-color);
}

.status-partial-marker {
    background-color: var(--warning-color);
}

.status-full-marker {
    background-color: var(--danger-color);
}

.status-unknown-marker {
    background-color: #999;
}

/* Marcadores de predicción con un borde punteado */
.predicted-marker {
    border: 2px dotted white;
    animation: pulse 2s infinite;
}

/* Etiquetas de orden de parada */
.order-label {
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Puntos para la leyenda */
.status-dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.status-dot.status-not-full {
    background-color: var(--success-color);
}

.status-dot.status-partial {
    background-color: var(--warning-color);
}

.status-dot.status-full {
    background-color: var(--danger-color);
}

.status-dot.status-unknown {
    background-color: #999;
}

/* Estado predicho en la leyenda */
.status-dot.predicted-status {
    background-color: var(--danger-color);
    border: 2px dotted white;
}

/* Texto de estado predicho en el popup */
.popup-content .predicted-status {
    color: var(--danger-color);
    font-style: italic;
    font-weight: bold;
}

/* Estilo para popups del mapa */
.popup-content {
    min-width: 200px;
    max-width: 300px;
    padding: 5px;
}

.popup-content h5 {
    margin-top: 0;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 8px;
}

.popup-content p {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

/* Control de rutas */
.route-control {
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
    max-width: 250px;
    font-size: 0.9rem;
}

.route-controls h6 {
    margin: 0 0 8px 0;
    font-weight: bold;
}

.form-check {
    margin-bottom: 5px;
}

.route-color-indicator {
    display: inline-block;
    width: 12px;
    height: 4px;
    margin-right: 5px;
    vertical-align: middle;
}