body{
    margin:0;
    font-family: Arial, sans-serif;
    background:#f4f4f4;
}

.container{
    padding:10px;
}

h2{
    text-align:center;
}

.controls{
    display:flex;
    gap:5px;
    margin-bottom:10px;
}

.controls input,
.controls select{
    flex:1;
    padding:8px;
    border-radius:6px;
    border:1px solid #ccc;
}

.controls button{
    padding:8px;
    border:none;
    background:#007bff;
    color:white;
    border-radius:6px;
}

#map{
    height:300px;
    border-radius:10px;
}

#lista{
    margin-top:10px;
}

.card{
    background:white;
    padding:10px;
    margin-bottom:8px;
    border-radius:8px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.card.mejor{
    border-left:5px solid green;
}

.spinner{
    width:40px;
    height:40px;
    border:5px solid #ccc;
    border-top:5px solid #007bff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:10px auto;
}

.hidden{
    display:none;
}

@keyframes spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}