body{
margin:0;
font-family:Arial;
background:linear-gradient(#f6f8fb,#eef2f7);
color:#222;
}

#loading{
position:fixed;
width:100%;
height:100%;
background:linear-gradient(#f6f8fb,#eef2f7);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:9999;
}

#mapa{
width:100%;
max-width:1200px;
height:55vh;
margin:10px auto;
}

#contenedor{
display:flex;
flex-direction:column;
max-width:1200px;
margin:auto;
padding:0 5%;
}

/* 📱 MÓVIL */
@media (max-width: 768px) {

    body {
        font-size: 16px;
    }

    #barra-superior {
        padding: 10px;
        font-size: 16px;
    }

    h1 {
        font-size: 20px;
    }

    #mapa {
        height: 65vh; /* más usable */
    }

    .precioTooltip {
        font-size: 14px;
        padding: 4px 6px;
    }

}

#panel{
flex:1;
background:#f4f4f4;
padding:15px;
overflow-y:auto;
font-family:Arial;
}

#panel h3{
margin-top:10px;
}

.precioTooltip{
background: white;
border: 1px solid #444;
border-radius: 6px;
padding: 2px 6px;
font-size: 12px;
font-weight: bold;
color: black;
}

.filaRadio{
margin-bottom:6px;
flex-wrap:wrap;
}

.filaControles{
display:flex;
align-items:center;
}

.grupoTitulo{
display:flex;
align-items:center;
gap:15px;
}

.grupoRadio{
display:flex;
align-items:center;
gap:25px;
flex-wrap:wrap;
}

.filaBusqueda{
margin-top:4px;
}

#panelTop{
padding:15px;
display:flex;
flex-direction:column;
}

#tituloTop{
text-align:center;
font-size:22px;
font-weight:bold;
margin-bottom:15px;
color:#222;
}

#top95Container,
#topDieselContainer{
background:#eef1f5;
padding:12px;
border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

#top95Container h4,
#topDieselContainer h4{
text-align:center;
margin-top:0;
}

.tarjetaGasolinera{
background:white;
padding:10px;
margin-bottom:8px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
cursor:pointer;
transition:all 0.2s ease;
border:2px solid transparent;
}

.tarjetaGasolinera:hover{
transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,0.15);
border:2px solid #2a7fff;
}

.tituloGasolinera{
font-weight:bold;
font-size:14px;
}

.precioGasolinera{
font-size:18px;
color:#0a7f2e;
font-weight:bold;
margin:4px 0;
}

.direccionGasolinera{
font-size:12px;
color:#555;
}

#contenedorTop{
display:flex;
flex-direction:row;
justify-content:space-between;
gap:20px;
}

.rankingLinea{
display:flex;
align-items:center;
gap:10px;
}

.rankingPosicion{
font-size:20px;
width:30px;
text-align:center;
}

.rankingContenido{
flex:1;
}

.tituloGasolinera{
font-weight:bold;
font-size:14px;
}

.precioGasolinera{
font-size:18px;
font-weight:bold;
color:#0a7f2e;
}

.direccionGasolinera{
font-size:12px;
color:#666;
}

@keyframes bounceMarker{
0%{ top:0; }
30%{ top:-15px; }
60%{ top:5px; }
100%{ top:0; }
}

.markerBounce{
position:relative;
animation:bounceMarker 0.6s ease;
}

.distanciaGasolinera{
font-size:12px;
color:#0077cc;
margin-top:2px;
}

/* SLIDER */

.controlRadio{
display:flex;
flex-direction:column;
font-size:14px;
color:#444;
margin-bottom:0;
}

/* CONTENEDOR SUPERIOR */

#barraControles{
background:linear-gradient(#f6f8fb,#eef2f7);
padding: 12 20px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
border-bottom:1px solid #eee;

position:sticky;
top:0;
z-index:1000;
max-width:1200px;
margin:auto;
}

/* TITULO */

.tituloApp{
color:#222;
margin:0;
font-size:22px;
font-weight:700;
}


/* FILA DE CONTROLES */

.controlesBusqueda{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}

.filaTitulo{
margin-bottom:6px;
}


/* CHECKBOX */

.checkboxRadio{
display:flex;
align-items:center;
gap:6px;
font-size:14px;
color:#333;
}

.buscadorWrapper{
position:relative;
flex:1 1 300px;
max-width:500px;
min-width:250px;
}

.iconoBusqueda{
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
font-size:14px;
color:#888;
pointer-events:none;
}

#btnUbicacion{
flex-shrink:0;
}

#busqueda{
width:80%;
padding:10px 14px 10px 32px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
transition:all 0.2s;
}

#busqueda:focus{
outline:none;
border-color:#2a7fff;
box-shadow:0 0 0 3px rgba(42,127,255,0.15);
}

#btnUbicacion{
background:#2a7fff;
color:white;
border:none;
padding:10px 14px;
border-radius:8px;
font-size:14px;
cursor:pointer;
transition:all 0.2s;
white-space:nowrap;
flex-shrink:0;
}

#btnUbicacion:hover{
background:#1f63cc;
}

#resultados{
position:absolute;
top:100%;
left:0;
width:100%;
background:white;
border:1px solid #ddd;
border-top:none;
border-radius:0 0 8px 8px;
list-style:none;
margin:0;
padding:0;
max-height:250px;
overflow-y:auto;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
z-index:2000;
}

#resultados li{
padding:8px 12px;
cursor:pointer;
font-size:14px;
}

#resultados li:hover{
background:#f2f6ff;
}

.resultadoActivo{
background:#e8f0ff;
}

/* CONTENEDOR */

.toggleRadio{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:#333;
/* fuerza nueva línea */
margin-top:6px;
}

.controlRadio{
margin-bottom:4px;
}

/* SWITCH */

.switch{
position:relative;
display:inline-block;
width:46px;
height:24px;
}

/* OCULTAR CHECKBOX REAL */

.switch input{
opacity:0;
width:0;
height:0;
}

/* FONDO */

.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background-color:#ccc;
transition:.25s;
border-radius:24px;
}

/* CIRCULO */

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background-color:white;
transition:.25s;
border-radius:50%;
}

/* ACTIVADO */

.switch input:checked + .slider{
background-color:#2a7fff;
}

/* MOVER CIRCULO */

.switch input:checked + .slider:before{
transform:translateX(22px);
}


/* TRACK ACTIVO (CHROME / SAFARI) */

#radioBusqueda::-webkit-slider-runnable-track{
height:6px;
border-radius:6px;
background:linear-gradient(90deg,#2a7fff,#66a6ff);
}

/* CIRCULO */

#radioBusqueda::-webkit-slider-thumb{
-webkit-appearance:none;
width:18px;
height:18px;
border-radius:50%;
background:white;
border:3px solid #2a7fff;
cursor:pointer;
margin-top:-6px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
transition:transform 0.15s;
}

/* EFECTO HOVER */

#radioBusqueda::-webkit-slider-thumb:hover{
transform:scale(1.15);
}

/* FIREFOX */

#radioBusqueda::-moz-range-track{
background:#e3e7ef;
height:6px;
border-radius:6px;
}

#radioBusqueda::-moz-range-thumb{
width:18px;
height:18px;
border-radius:50%;
background:white;
border:3px solid #2a7fff;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* BARRA COMPACTA */

#barraControles.compact{
padding:4px 16px;
}

/* TITULO MAS PEQUEÑO */

#barraControles.compact .tituloApp{
font-size:16px;
font-weight:600;
}

/* SLIDER MAS PEQUEÑO */

#barraControles.compact #radioBusqueda{
height:3px;
width:160px;
}

/* TEXTO DEL SLIDER */

#barraControles.compact .controlRadio label{
font-size:12px;
}

/* BUSCADOR */

#barraControles.compact #busqueda{
padding:5px 10px 5px 24px;
font-size:13px;
}

/* BOTON UBICACION */

#barraControles.compact #btnUbicacion{
padding:5px 8px;
font-size:12px;
}

/* OCULTAR TEXTO TOGGLE */

#barraControles.compact .textoToggle{
display:none;
}