/* CSS responsive consolidado para ficha (desktop + mobile) */

@media screen and (min-width: 900px) {
body{width:100%;font-family:Helvetica,sans-serif;overflow-x:hidden;margin: 0;}
body{
background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
background-attachment: fixed;
}
.container{max-width:1100px;margin:50px auto;margin-top:30px ;}
a{color: #2580ce;}
#toggleButton{display:none}
.contenedor{width:100%;overflow:hidden;margin:0}


.two-prices{font-size: 14px;line-height: 14px;}

.two-prices .elevate2 {
	font-size: 10px;
	vertical-align: top;
    margin-left: 1px;
}

.elevate{font-size: 14.5px;vertical-align: super; margin-left: 1.5px;font-style: italic;}
.elevate2{font-size: 12.5px;vertical-align: top; margin-left: 1.5px;font-style: italic;}
#estacionSpan{font-size:20px;}
.abierto{filter: drop-shadow(0px 0px 3px #26ffb7c5)drop-shadow(0px 0px 6px #26ffb7d7);}
.cerrado{width:77px;filter:drop-shadow(0px 0px 2px #dc143c4a) drop-shadow(0px 0px 2px #dc143cc4) drop-shadow(0px 0px 1px #dc143c)drop-shadow(0px 0px 1px #dc143cd1);}
#abierto{font-size:12px}
.results-map-container{display:grid;margin:20px auto;margin-top:5px;padding:2px 2px;border:#ccc solid 1px;border-radius:10px;height:0%;grid-template-columns:1fr 1fr;box-shadow:2px 2px 5px rgba(32,41,49,.308);width:910px}
#map .ol-viewport,.ol-unselectable ol-layers{height:100%}
#map{width:100%;height:350px}
#tooltipOverlay{background-color:#fff;border:1px solid #ccc;padding:10px;color:#333;max-width:300px}
.hor{max-width:40px;word-wrap:break-word}
.name{max-width:60px;word-wrap:break-word}
.divpopup{border-radius:150px}
.popup-container{position:relative}
#X{position:absolute;top:10px;right:10px;padding:1px 4px;background-color:#ff7272;border:1px solid #000;cursor:pointer;border-radius:3px;font-size:12px;font-weight:600}
.popup{width:250px;padding:10px;border:1px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.2);font-family:Arial,sans-serif;background-color:#ffffffec;border-radius:15px;padding:10px;padding-bottom:2px;position:relative;overflow:auto}
.popup::-webkit-scrollbar{display:none}
.popup{-ms-overflow-style:none;scrollbar-width:thin}
#blanco{width:400px;min-height:209px;padding:10px;margin-top:-15px;border:1px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.2);font-family:Helvetica,Arial,sans-serif;background-color:#f3f3f3;border-radius:15px;padding:10px;padding-bottom:2px;position:relative;font-size:13px}
#blanco h1{font-size:18px;margin:0 auto;margin-top:5px;text-align:center}
.imgpopup{width:50px;display:block;margin:auto}
.tabs{display:flex;position:absolute;top:-30px;left:0;z-index:1}
#a{border-top-left-radius:15px;z-index:2}
#b{border-top-left-radius:15px;margin-left:-8px;z-index:1}
.tablink{background-color:#ffffff93;color:#000;border:none;outline:0;cursor:pointer;padding:4px 18px;padding-bottom:14px;font-size:17px}
.tablink2{background-color:#f7f7f7;color:#000;border:none;outline:0;cursor:pointer;padding:4px 6px;padding-bottom:14px;font-size:17px;border-top-right-radius:15px}
.tablink:hover{background-color:#f7f7f7}
.tablink.active{background-color:#f7f7f7}
.tabcontent{display:none}
.tabcontent.active{display:block}
.h2popup{font-size:15px;margin:0;padding:0 4px;min-width:60px;font-weight:600;text-align:center}
.h2popup p{text-align:center}
.dirpopup,.horpopup{font-size:12px;margin:0}
.dirpopup{text-align:center}
.trpopupa{background-color:#f7f7f7;text-align:center;border-radius:1px;font-size:13px;margin:0;padding:3px}
.dies-row{color:#fff;background-color:#333}
.trpopupb td{background-color:transparent;text-align:center;padding-top:1px;padding-bottom:3px;font-size:14px;font-weight:600;color:#fff;font-family:Verdana;border-radius:1px}
#maps{margin-top:7px;max-width:20%}
#logos{margin:auto;border-collapse:collapse}
#logos img{max-width:30px;max-height:30px;padding:0 20px;padding-top:10px}
#tabhist{font-size:13px;font-family:Verdana,Arial,sans-serif;margin:0 auto;margin-top:10px;overflow-x:auto;width:90%}
#historico td,#historico th,#tabhist td,#tabhist th{text-align:center;padding:2px 1px;border-bottom:2px solid #ddd}
#tabhist th{background-color:#f2f2f2;border-bottom:3px solid #eceaeade}
#tabhist td{padding:2px 2px}
#todayheader{background-color:#ff050544}
#city{padding:10px 0;max-width:912px;border:#ccc outset 1px;border-radius:10px;text-align:left;margin:20px auto;box-shadow:2px 2px 5px rgba(32,41,49,.308)}
#city p,#info p,ul{list-style-type:none;padding:0;margin:22px}
ul{margin-left:60px}
h2{text-align:center;font-weight:600 ; text-wrap: balance;}
h3{text-align:center;font-weight:600;font-size:18px;margin-top:0}

.h24{font-size: 24px;font-weight: 500;color: #00a05a;}
.horario{font-size: 20px; margin-top: 12px;}
#grafica{margin:auto;width:912px}
#box,#info,#infoCombustibles,#infoMarca,#infoficha{max-width:940px;padding:10px 0;margin:20px auto;box-shadow: 4px 2px 20px #103a6117;
    border: #ccc3 solid 1px;;border-radius:10px;text-align:left;margin:40px auto;background:#fff;}

 .descuentos{max-width:980px;padding:10px 0;margin:20px auto;box-shadow: 4px 2px 20px #103a6117;
    border: #ccc3 solid 1px;;border-radius:10px;text-align:left;margin:40px auto;margin-bottom: 140px;background:#fff;}


#info{border:#1c49884d inset 1px;box-shadow:2px 2px 5px rgba(23,56,83,.308)}
#infoficha{max-width:980px;padding:10px 0;border-radius:10px;text-align:left;margin:70px auto;margin-top: 45px;}
#map2{width:90%;height:360px;margin: auto;margin-top:2px;max-height:90vh;display: block; border-radius:22px;}
.poblaciones{background-color: #ffff;justify-content:center;max-width:980px;top:40px;padding:5px;display:flex;flex-direction:row;margin:100px auto;box-shadow: 4px 2px 20px #103a6117;
    border: #ccc3 solid 1px;flex-wrap:wrap;border-radius:10px;text-align:center;;font-family: verdana;}
.poblacion{text-decoration:none;color:#406ab8;transition:font-size .3s ease;padding:5px}
.poblacion:hover{color:#5a759b}
.rank1{font-size:28px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank2{font-size:27px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank3{font-size:26px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank4{font-size:25px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank5{font-size:24px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank6{font-size:23px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank7{font-size:22px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank8{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank9{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank10{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank11{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank12{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank13{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank14{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank15{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank16{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank17{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank18{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank19{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
.rank20{font-size:20px;margin:15px;text-decoration:none;color:inherit;color:#406ab8}
#box{width:912px;margin-bottom:0;margin-top:6px;display:block}
#descuentosGasolinera {	margin: 40px auto; margin-bottom: 20px; }



}

@media screen and (max-width: 900px) {
body{width:100%;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;
background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
background-attachment: scroll;}
.container{max-width:1300px;margin:20px auto;margin-top: 22px;}
a{color:#2580ce}
h3{text-align:center;font-size:16px}
.horario{font-size: 14px;font-weight: 300;margin-top: 5px ;margin-bottom: 0px;}
.h24{font-size: 22px;  color: #00a05a;}
#info h3,#infoCombustibles h3{font-size:16px;text-align:center;font-weight:400}
td{padding:2px 4px}



.tiMedPro{margin-top: 20px;font-size: 22px; text-align: center;font-weight: 300;}
tbody tr{padding:40px 0}

#estacionSpan {font-size: 16px;}
.abierto{filter: drop-shadow(0px 0px 3px #26ffb7b6)drop-shadow(0px 0px 4px #26ffb7c2);}
.cerrado{width:52px;filter:drop-shadow(0px 0px 2px #dc143c4a) drop-shadow(0px 0px 2px #dc143caf) drop-shadow(0px 0px 1px #dc143cd3)drop-shadow(0px 0px 1px #dc143caf);}
#abierto{font-size:10px}
#premap{max-width:100%;max-height:100vh;overflow:hidden;margin:0;border-radius:10px;border:2px solid #000}
#premap2{max-width:98%;height:282px;overflow:hidden;margin:15px auto; margin-bottom: 40px;border-radius:12px;background:#fff; }
.results-map-container{padding:0 0;max-width:100%;min-width:95%;border-radius:2px;height:100%;position:relative;overflow:hidden;z-index:1;margin-right:2px;margin-left:2px;background-color:rgba(245,245,245,.616)}
.results-map-container::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-right:#000 solid 3px;z-index:-1}
#toggleButton{position:absolute;top:21%;right:-58px;transform:translateY(-50%);border-radius:58%;box-shadow:0 0 10px rgba(0,0,0,.2);z-index:1000;border:#000 solid 3px;padding:14px 2px;background-color:#fff}
#toggleButton.left{right:auto;left:-61px;top:25%}
#toggleButton.right{left:auto;right:-58px}
#filpie{padding:0;position:sticky;bottom:0px;left:0;right:0;display:flex;z-index:999}
#map .ol-viewport,.ol-unselectable ol-layers{height:100%}
#map{width:100%;display:none;height:90vh;margin-top:0;max-height:90vh}
#map2{width:100%;height:100%;margin:auto;margin-top:0;max-height:90vh;}
#tooltipOverlay{background-color:#fff;border:#ccc solid 1px;border-radius:10px;padding:2px;position:absolute;white-space:nowrap;display:none}
#brands{display:flex;justify-content:space-around;align-items:center;gap:10px}
.brand img{max-width:60px;max-height:60px}
#tooltipOverlay{background-color:#fff;border:1px solid #ccc;padding:10px;color:#333;max-width:300px}
.hor{max-width:40px;word-wrap:break-word}
.name{max-width:60px;word-wrap:break-word}
.divpopup{border-radius:150px}
.popup-container{position:relative}
#X{position: absolute;  top: 2px;  right: 6px;  padding: 1px 4px;  background-color: #ffffff00;  border: 1px solid #fff0;  cursor: pointer;  font-size: 24px;  font-weight: 400;  color: #da4b4bf8;}
.popup{width:260px;padding:10px;border:1px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.2);font-family:Arial,sans-serif;background-color:#ffffffec;border-radius:10px;padding:10px;padding-bottom:2px;overflow:auto}
.popup::-webkit-scrollbar{display:none}
.popup{-ms-overflow-style:none;scrollbar-width:thin}
#blanco{width:320px;min-height:209px;padding:6px;margin-top:-10px;border:1px solid #ddd;box-shadow:0 2px 5px rgba(0,0,0,.2);font-family:Helvetica,Arial,sans-serif;background-color:#ffffffe7;border-radius:10px;padding:10px;padding-bottom:2px;position:relative;font-size:13px;overflow-y:scroll;overflow-x:scroll}
#blanco h1{font-size:16px;margin:0 auto;margin-top:5px;text-align:center}
#tabhist{font-size:13px;font-family:Verdana,Arial,sans-serif;margin-top:20px;margin:0 auto;margin-top:10px;max-width:95%;border-collapse:collapse}
#tabhist th{font-size:10px;font-family:Verdana,Arial,sans-serif}
#tabhist td{text-align:center;padding:0 2px;font-size:10px}
.dies-row{color:#fff;background-color:#333}
#tabhist tr:first-child td:first-child{border-top-left-radius:8px}
#tabhist tr:first-child td:last-child{border-top-right-radius:8px}
#tabhist tr:last-child td:first-child{border-bottom-left-radius:8px}
#tabhist tr:last-child td:last-child{border-bottom-right-radius:8px}
#todaydata{padding:0}
.imgpopup{width:50px;display:block;height:auto}
.h2popup{font-size:15px ;margin:0;padding:0 4px;min-width:60px;font-weight:600}
.dirpopup,.horpopup{font-size:12px;margin:0}
.dirpopup{text-align:center;font-size: 13px;}
.trpopupa{background-color:#f7f7f7;text-align:center;border-radius:4px;font-size:13px;margin:0;padding:3px}
.trpopupb td{background-color:transparent;text-align:center;padding-top:1px;padding-bottom:3px;font-size:14px;font-weight:600;color:#fff;font-family:Verdana;border-radius:4px}
#maps{margin-top:7px;max-width:20%}
#logos{margin:auto;margin-bottom:2px;border-collapse:collapse}
#logos td{padding-bottom:0;padding-left:0;padding-right:0}
#logos img{max-width:30px;max-height:30px;padding:0 20px;padding-top:10px}
.pielogopop{padding-top:0;padding-bottom:4px}
#city{max-width:95%;border:#ccc outset 1px;border-radius:10px;text-align:left;margin:20px auto;padding:10px 0;box-shadow:2px 2px 5px rgba(32,41,49,.308);background:#fff}
#city p,#info p{margin:22px;font-size:16px}
ul{list-style-type:none;margin:0 10px}
h2{text-align:center;font-weight:300}
.pHoy {	text-align: left;margin: 8px 4px;font-size: 15px; max-width: 67%;}
#info,#infoCombustibles,#infoMarca{max-width:95%;margin:20px auto;border:#ccc outset 1px;padding:10px 0;border-radius:10px;text-align:left;margin:40px auto;box-shadow:2px 2px 5px rgba(32,41,49,.308);overflow-x:auto;background:#fff}
#infoCombustibles{overflow:auto}
#infoficha{padding:10px 0;margin:0 auto;     text-align:left;padding-top: 5px;border-bottom-left-radius: 40px; border-bottom-right-radius:40px;background:#fff;}
.poblaciones{justify-content:center;max-width:95%;padding:20px 0;display:flex;flex-direction:row;margin:auto;margin-top:10px;margin-bottom:40px;box-shadow: 4px 2px 20px #103a6117;
    border: #ccc3 solid 1px;flex-wrap:wrap;border-radius:40px;text-align:center;background:#fff}
.poblacion{text-decoration:none;color:#406ab8;transition:font-size .3s ease;padding:5px}
.poblacion:hover{color:#5a759b}
#municipiosCercanosDiv{margin:90px auto;font-family:verdana;}
.rank1{font-size:34px;margin:14px 18px;text-decoration:none;color:inherit;color:#406ab8}
.rank2{font-size:31px;margin:13px 18px;text-decoration:none;color:inherit;color:#406ab8}
.rank3{font-size:30px;margin:12px 16px;text-decoration:none;color:inherit;color:#406ab8}
.rank4{font-size:29px;margin:11px 16px;text-decoration:none;color:inherit;color:#406ab8}
.rank5{font-size:28px;margin:11px 16px;text-decoration:none;color:inherit;color:#406ab8}
.rank6{font-size:27px;margin:10px 16px;text-decoration:none;color:inherit;color:#406ab8}
.rank7{font-size:26px;margin:10px 15px;text-decoration:none;color:inherit;color:#406ab8}
.rank8{font-size:25px;margin:10px 15px;text-decoration:none;color:inherit;color:#406ab8}
.rank9{font-size:24px;margin:10px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank10{font-size:24px;margin:10px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank11{font-size:24px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank12{font-size:23px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank13{font-size:23px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank14{font-size:23px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank15{font-size:22px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank16{font-size:22px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank17{font-size:22px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank18{font-size:21px;margin:9px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank19{font-size:20px;margin:8px 14px;text-decoration:none;color:inherit;color:#406ab8}
.rank20{font-size:20px;margin:8px 14px;text-decoration:none;color:inherit;color:#406ab8}
body,footer{margin:0;padding:0}
.box{align-items:center}
.box .label{margin:0 auto}
.columns.is-gapless.is-multiline{min-height:50%;max-height:80%}
#box{padding-top:0}
#gasoleo{color:#000;background-color:transparent;font-size:20px;margin:6px auto;border:transparent;}
#E595{color:#00ac09f5;background-color:transparent;font-size:24px;border:transparent}
#gasoleop{color:#ffcf00;background-color:transparent;font-size:24px;border:transparent}
#E598{color:#51ec21cc;background-color:transparent;font-size:24px;border:transparent}
#glp{color:#00cddbd5;background-color:transparent;font-size:24px;border:transparent}
#gnc{color:#0ae0a0c9;background-color:transparent;font-size:24px;border:transparent}



.special-price {  font-size: 0.8em; display: block; margin: 0px auto;}
#share-menu{width:260px;display:none;margin-top:10px;flex-direction:row;justify-content:space-around;position:fixed}
#share-button{width:44px;height:44px;border:none;background-color:transparent;cursor:pointer}
#whatsapp,#telegram,#clipboard{width:45px;height:45px;background-size:contain;background-repeat:no-repeat;border:none;background-color:transparent;display:flex;align-items:center;justify-content:center;margin:4px 20px;cursor:pointer}
#share-flex{display:flex;flex-direction:row;justify-content:space-around;margin-top:18px;background-color:#ffffffba;border-bottom-left-radius:30px;border-bottom-right-radius:30px;}
@keyframes moveGradient {    0% {        background-position: 0% 50%;    }    50% {        background-position: 100% 50%;    }    100% {        background-position: 0% 50%;    }}
.arrowGPS{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:20px solid #2c2c2c;animation:bounce 2s infinite;margin:auto;}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
#descuentosGasolinera {	margin: 40px 20px; margin-bottom: 10px;}
.descuentos{background:#fff;}
#titleH1{display: none;}
}