/* =============================================
   ESTILOS BASE DEL CONTENEDOR PRINCIPAL
   ============================================= */
#moto-maps-app {
    display: grid;
    grid-template-columns: 30% 70%; /* Bento Grid: panel lateral 30%, mapa 70% */
    height: 80vh;                   /* Alto adaptable */
    min-height: 500px;
    background-color: #111827;      /* Fondo oscuro elegante */
    color: #f3f4f6;
    font-family: 'Segoe UI', Roboto, sans-serif;
    border-radius: 8px;
    overflow: hidden;
}

/* Panel de lista de sucursales */
.moto-list {
    background-color: #1f2937;      /* Un tono ligeramente más claro */
    padding: 1rem;
    overflow-y: auto;
    border-right: 2px solid #374151;
}

/* Panel del mapa */
.moto-map {
    background-color: #374151;      /* Fallback mientras carga el mapa */
}

/* =============================================
   TARJETAS DE SUCURSAL EN LA LISTA
   ============================================= */
.moto-card {
    background-color: #111827;
    border: 1px solid #374151;
    border-left: 4px solid transparent;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.moto-card:hover {
    border-color: #f97316;          /* Acento naranja al pasar el ratón */
}

/* Sucursal activa (seleccionada) */
.moto-card.active {
    border-left-color: #ef4444;     /* Rojo intenso para la activa */
    background-color: #1e293b;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.moto-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: #f97316;                /* Título en naranja */
}

.moto-card .detail {
    font-size: 0.9rem;
    color: #d1d5db;
    margin: 0.25rem 0;
}

.moto-card .servicios {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.moto-card .servicio-tag {
    background-color: #374151;
    color: #f97316;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

/* =============================================
   RESPONSIVE: Apilar en móviles
   ============================================= */
@media (max-width: 768px) {
    #moto-maps-app {
        grid-template-columns: 1fr;     /* Una sola columna */
        grid-template-rows: auto 1fr;   /* Lista arriba, mapa abajo */
        height: auto;                   /* Altura natural */
        min-height: 80vh;
    }

    .moto-list {
        border-right: none;
        border-bottom: 2px solid #374151;
        max-height: 40vh;               /* Limitar altura en móvil */
    }

    .moto-map {
        min-height: 50vh;
    }
}