html, body { overflow-x: hidden; width: 100%;}
body{background-color: #fcfcfc; color: rgba(0, 0, 0, 0.8); margin:0; padding:0;}
html{scrollbar-width:thin;scrollbar-gutter:stable}
body.home-search-page{
background:
radial-gradient(circle at top left, rgba(79, 165, 255, 0.12), transparent 34%),
linear-gradient(180deg, #f8fbff 0%, #f2f6fb 46%, #eef3f8 100%);
}
.contenedor{width:100%;overflow:hidden;margin:0}
.page-estaciones .top{background-color: white; margin: auto; max-width: 980px; border-radius: 20px; padding-top: 30px; margin: 70px auto; box-shadow: 0 0 16px rgb(240, 240, 240); border: 1px solid rgb(240, 240, 240)}
.page-estaciones h1{ text-transform: uppercase;font-size: 32px; text-align:left; padding: 15px 25px; margin: 20px auto; margin-top: 0; font-weight: 400} .page-estaciones h2{ margin: 16px auto; margin-bottom: 15px; font-size: 19px; padding: 0 20px; font-weight: 500; text-align: left;} .page-estaciones h2 span{ font-size: 20px}
.page-estaciones h3{font-size: 18px;text-transform: uppercase;text-align: left; padding: 0 20px; font-weight: 500;}
.page-estaciones a{color:#2580ce} .hidden-station {display: none;}.topPosition{ width: 1.2vw; font-size: clamp(0.9rem, 1vw, 3rem); vertical-align: top; text-align: center; padding: 60px 2px; ;} .logo{ width: 40px; vertical-align: bottom;} .verMas{display: block;background: 0 0; background-color: rgba(0, 0, 0, 0); background-color: rgba(71, 71, 71, 0); font-size: 18px; border: 1px solid #a8a8a8; padding: 10px 20px; margin:0 auto; margin-top: 50px; margin-bottom: 40px; border-radius: 6px} .brandLogo{ margin-left: 20px}
.page-estaciones #map2{ width: 100%; height: 250px; max-height: 90vh; display: block} .lastUpdate{ font-size: 12px; margin: 1px auto; margin-top: -2px} .trtabla2{ border-bottom: 2px solid #e9e9e9} table{ border-collapse: collapse; width: 100%;} .additional-table{ max-width: 75%} .verPre{ font-size: 14px; text-align: left; margin: 3px 10px} .site{ font-size: 24px} .container{ position: relative; display: flex; justify-content: space-between; margin: 10px;} #share-button{ background: none; border: none; cursor: pointer;} #share-menu{ display: none; position: absolute; z-index: 1000; top: 100%; right: 0; border-radius: 12px;} #share-flex{ display: flex; flex-direction: row;} #clipboard, #discount, #share-button, #telegram, #whatsapp{ width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; border: none; background-color: transparent; display: flex; align-items: start; justify-content: center} .nombrees{ width: 60%} #combustible-form{ font-size: 17px; display: flex; flex-wrap: wrap; justify-content: left; margin: 10px auto; margin-bottom: 12px; padding-bottom: 0px; padding-left: 20px; } #combustible-form :is(label, a.fuel-option-link){ display: flex; align-items: center; margin-right: 5px; margin-bottom: 5px; padding: 1px;} #combustible-form input[type="radio"]{ margin-right: 5px;} .page-estaciones .breadCrumb{font-size: 14px; padding-top: 10px; padding-left: 2.5%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.page-estaciones .breadCrumb{ font-size: 16px; padding-top: 25px; padding-left: 2.5%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab_dir{ font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; white-space: normal; line-height: 1.1; padding-top:10px} .leaflet-container a.leaflet-popup-close-button {font-size: 30px !important;padding: 10px 10px 0 0 !important ;}
#marcaSelect{ background: #fff; height: 30px; padding: 5px; border-radius: 10px;font-size: 12px; font-family: verdana; width: 90px; margin: 25px 0; margin-left: 12px; float: right; font-weight: bold; margin-right: 15px; border: 1px solid rgb(27, 27, 27);}
.page-estaciones .breadCrumb a{color: #414141; font-weight: 500; text-decoration:none;}
.page-estaciones .breadCrumb a:hover{color:#414141; text-decoration:none;}
.ahorro{ text-align: center; font-weight: 500; color: white; background: #1db06e; padding: 10px; margin: 0px ; white-space: normal; line-height: 1.35;}
#resultsTable{border-collapse:collapse;border-spacing:3px 7px;width:100%;max-width:100%}
#resultsTable tr:nth-child(odd){border-bottom:2px solid #e8e8e88f}
#resultsTable tr td{padding:0px 8px;padding-right:3px}
.price-content{display:inline-block;padding:2px 7px;border-radius:8px;font-size:24px;font-weight:500;font-family:Verdana;color:#fff;margin-right: 12%;margin-bottom:5px}
tbody tr{padding:40px 0}
#pFlex{display: flex;margin-bottom:-14px;margin-left: -10px;}
.price-single{padding: 3px 7px; border-radius: 8px; margin-right: 6px; font-size: 16px; }
#tab_dir .claseTabla td{padding:0}
#tab_dir{font-size:13px;font-weight:500;width:64%;cursor:pointer;border-radius:8px;position:relative;line-height:18px;max-height:40px;text-align:left;margin:10px 0;white-space:normal;line-height:1.1;padding:0 2px;vertical-align:middle}
#tab_pri{font-size:17px;border-radius:8px;padding-left:2px;font-weight:600;font-family:Verdana;color:#fff;max-width:40px}
.flecha1{width:26px}
.image-caption{padding:0;margin:-2px auto;text-align: center; font-size:8px;color:#3498db}
#tab_dist{min-width:30px;max-width:33px;margin-left:-5px;cursor:pointer;border-radius:8px;padding:0 1px;font-weight:500;font-size:24px;text-align:start;font-family:Verdana}
.direccion-container{display:flex;width:100%;align-items:center;min-width:210px;padding-top: 8px;}
.prekm{margin:0;margin-bottom:-6px}
.km{font-size:10px}
.direccion-content{width:80%;max-width:142px;vertical-align:middle;margin:0;padding-left:0;padding-top:7px}
.distance{font-size:13px;font-weight:600}
.km{font-size:10px;font-weight:600}
.nombrees { font-size: 16px; font-weight: 600; width: 120%; white-space: nowrap; overflow: hidden; display: inline-block;}
.direccion{display:inline-block;font-size: 12px;width:210px;padding-top:2px;white-space:nowrap;overflow:hidden; text-overflow: ellipsis; color:#666}
.debajM { border-left: 3px solid #1db06e; padding: 2px 6px; font-size: 11px; }
.sobreM { border-left: 3px solid #ea4956; padding: 2px 6px; font-size: 11px;}
.mediaFont{font-size: 14px;}
#resultsTable tr td.pricemsg{min-width:150px;max-width:160px;padding-right:20px}
.price-difference{border-radius:6px;padding:0px;font-size:11px;letter-spacing: -0.7;}
.codp,.provin{font-size:10px ; font-style: italic; color:#666}
.logomtd{width:50px;height:50px}
#tab_logo{font-size:9px;text-align:center;max-width:48px;max-height:48px;min-height:48px;min-width:48px;width:20%;margin-right:16px;margin-left:3px;vertical-align:middle;padding-bottom:10px }
#gps{font-size:10px;margin:0;padding:0;text-align:center;text-decoration:none;color:inherit;background-color:transparent;cursor:pointer;outline:0;vertical-align:bottom}
#nPrice{font-size:10px;margin:0;padding:0;text-align:center;text-decoration:none;color:inherit;background-color:transparent;cursor:pointer;outline:0;vertical-align:bottom}
#gps a{padding:0;margin:0}
.kmtd{font-size:12px}
#estacionSpan{font-size:16px;padding:1px 2px}
.abierto{ font-size: 12px; margin: 0; text-align: center; border-radius: 4px; filter: drop-shadow(0px 0px 3px #26ffb7b6)drop-shadow(0px 0px 4px #26ffb7c2);}
.cerrado{font-size: 12px; margin: 0; background-color: #ee023226; color: #fff; text-align: center; border-radius: 4px; padding-right: 1px; 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);}
.fila-detalle { display: flex; justify-content: start; align-items: center; padding: 3px 6px; gap: 12px; padding-top: 10px;}
.price-difference { display: block;}
.iconos-acciones { display: flex; align-items: center; gap: 18px; margin-right: 2%;}
.image-caption { margin: 0; font-size: 0.85rem;}
.info-media{padding: 0 25px; font-size: 14px;}
.poblaciones{justify-content:center;width:95%;padding:20px 0;max-width:980px;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}
.poblacion{text-decoration:none;color:#406ab8;transition:font-size .3s ease;padding:5px}
.poblacion:hover{color:#5a759b}
#municipiosCercanosDiv{margin:90px auto;font-family:inherit;}
.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}
@media (max-width: 1359px){#combustible-form{padding-left: 10px; margin:16px auto ;} .page-estaciones h1{font-size: 26px; margin: 0 auto; padding-left: 11px; padding-top: 10px;} .page-estaciones h2{margin: 15px auto; font-size: 18px;} .page-estaciones h3{margin-top: 40px; margin-bottom:20px; font-size: 20px;} #share-menu{ position: absolute; z-index: 1000; margin-top: 10px; right: 0; border-radius: 12px;}#map2{ width: 100%; height: 200px; display: block} #share-button{ width: 36px; height: 36px; border: none; background-color: transparent; cursor: pointer} .nombrees{}.direccion{max-width: 120%}.page-estaciones .breadCrumb{font-size: 16px; padding: 2px; padding-left: 2.5%; background-color:#464646; color: white}
.page-estaciones .breadCrumb a{color: #ffffff; font-weight: 600; text-decoration:none;} .page-estaciones .breadCrumb a:hover{color:#ffffff; text-decoration:none;} #share-flex{ display: flex; flex-direction: row; justify-content: center; margin-top: -10px; border-radius: 12px;} .page-estaciones .top{ margin: auto; margin-top: 10px; box-shadow: none; border: none; margin-bottom: 40px; padding-top: 0px; }
#marcaSelect{ font-size: 11px; font-family: verdana; width: 72px; margin: 12px 0; margin-left: 8px; float: right; font-weight: bold; margin-right: 10px; border: 2px solid rgb(27, 27, 27);padding: 2px;}} .icons{ display: flex;} #gps svg{ cursor: pointer; touch-action: manipulation;} .tab_dir{width: 43%;}
#qrSidebar{ position: fixed; right: 0; top: 34%; transform: translateY(-50%); width: 162px; background: #525252; border-radius: 12px 0 0 12px; box-shadow: -2px 2px 10px rgba(0,0,0,0.2); z-index: 9999; padding: 15px 0; padding-top: 20px; font-family: sans-serif; text-align: center; color: white; margin-right: 10px;}
#qrSidebar img{ width: 120px; height: 122px; margin: 0 auto 10px; display: block; border-radius: 4px;}
#qrSidebar p{ font-size: 15px; line-height: 1.2; margin: 0; font-weight: bold; padding:2px 20px}
#qrSidebar .resaltado{ color: #b1dbff}
@media screen and (max-width: 900px){ #qrSidebar{ display: none;}
.fila-detalle { justify-content: space-between;}
.direccion-content { width: 80%; max-width: 142px; padding-left: 0; padding-top: 0px;}
.info-media{padding: 0 12px; font-size: 14px;}
}
#cookieBannerWrapper { display: none !important; }
html.needs-cookie-banner #cookieBannerWrapper { display: flex !important; }
:root {
--surface-bg: #ffffff;
--soft-bg: #f2f5f8;
--text-main: #132030;
--text-soft: #4c6072;
--brand-ink: #0c4f83;
--brand-soft: #e9f3fb;
--brand-main: #0f5c9e;
--brand-accent: #2580ce;
--ring: rgba(37, 128, 206, 0.28);
}
.page-estaciones {
color: var(--text-main);
background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
font-family: "Segoe UI", "Noto Sans", Roboto, Arial, sans-serif;
}
/* Blindaje del header para que no herede de la página */
.site-header,
.site-header *{
box-sizing:border-box;
font-family: Verdana, Arial, sans-serif;
line-height:1.2;
text-decoration:none;
}
.site-header__nav{
width:min(99%,1380px);
min-height:82px;
margin:0 auto;
padding:0 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}
.site-header__links{gap:10px;}
.site-header__link{
min-height:46px;
padding:8px 12px;
}
@media (max-width:1300px){
.site-header__nav{min-height:50px;padding:0 18px 0 12px;}
.site-header__links{top:calc(100% + 8px);}
}
.top {
background: var(--surface-bg);
box-shadow: 0 20px 44px rgba(10, 20, 35, 0.08);
border-color: rgba(12, 79, 131, 0.14);
}
h1 {
text-transform: none;
font-size: clamp(1.65rem, 2.35vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
}
.page-intro {
margin: 4px 25px 14px;
color: var(--text-soft);
font-size: 0.95rem;
max-width: 70ch;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
outline: 3px solid var(--ring);
outline-offset: 2px;
}
#map2 {
border-radius: 12px;
border: 1px solid #d9e2ec;
}
.trtabla {
transition: background-color 0.2s ease, transform 0.2s ease;
}
.trtabla:hover {
background-color: #f7fbff;
}
.price-content {
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 20px rgba(15, 44, 71, 0.18);
}
#combustible-form :is(label, a.fuel-option-link) {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
#combustible-form :is(label, a.fuel-option-link):hover {
border-color: #a9c3d8;
background: #f2f8fe;
}
#combustible-form {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#combustible-form br {
display: none;
}
#combustible-form :is(label, a.fuel-option-link) {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 8px 12px;
margin: 0;
border: 1px solid #d1deea;
border-radius: 999px;
background: #f8fbfd;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
#combustible-form input[type="radio"] {
margin: 0;
}
#combustible-form {
margin-bottom: 24px;
}
.ahorro {
margin: 10px 20px 0;
}
.media-card {
margin: 8px 20px 16px;
padding: 12px 14px;
border: 1px solid #dbe4ee;
border-left: 4px solid var(--brand-ink);
border-radius: 12px;
background: linear-gradient(180deg, #f8fbff 0%, var(--brand-soft) 100%);
color: #274055;
}
.media-card p {
margin: 0;
line-height: 1.45;
}
.media-card .media-value {
font-weight: 700;
color: var(--brand-ink);
}
#marcaSelect {
border-color: #bcccdc;
border-radius: 12px;
}
.seo-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 28px auto 20px;
padding: 10px 20px 24px;
max-width: 980px;
}
.seo-links a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 10px 16px;
border: 1px solid #d8e3ee;
border-radius: 999px;
background: #f7fbff;
color: #245d8e;
text-decoration: none;
font-size: 14px;
line-height: 1.2;
}
.seo-links a:hover {
background: #eef6ff;
border-color: #b8cfe4;
}
.poblaciones {
background: var(--surface-bg);
}
.nearby-title {
padding: 0 24px;
margin: 0 0 12px;
}
.media-card p + p {
margin-top: 8px;
}
.media-more {
display: none;
}
.media-toggle {
background: none;
border: none;
color: #1f6fb2;
font-weight: 600;
cursor: pointer;
padding: 0;
margin-left: 4px;
font-size: 12px;
text-decoration: underline;
}
.media-toggle:hover {
color: #185a90;
}
.breadcrumb-home-icon {
vertical-align: sub;
margin-left: -4px;
margin-right: 2px;
}
@media (max-width: 1359px) {
.page-estaciones h3 {
margin-top: 18px;
margin-bottom: 20px;
padding: 0 20px;
font-size: 20px;
line-height: 1.35;
}
.nearby-title {
display: block;
width: 100%;
box-sizing: border-box;
padding: 30px 24px 4px !important;
margin: 0 0 14px;
}
.top {
padding-bottom: 24px;
}
#combustible-form {
margin-bottom: 20px;
}
.ahorro {
margin: 10px 16px 0;
}
.seo-links {
gap: 10px;
margin: 24px auto 24px;
padding: 16px 16px 28px;
}
.seo-links a {
min-height: 42px;
padding: 10px 16px;
font-size: 15px;
}
}
@media (min-width: 1360px) {
.price-content {
font-size: 25px;
padding: 4px 10px;
}
.lastUpdate {
font-size: 12px;
margin-top: 2px;
line-height: 1.2;
}
}
/* Ajuste visual minimalista: misma estructura, menos ruido */
.page-estaciones .top {
box-shadow: 0 10px 28px rgba(16, 34, 54, 0.06);
border: 1px solid rgba(18, 41, 64, 0.06);
}
.page-estaciones h1 {
font-weight: 600;
letter-spacing: -0.02em;
margin-right: 20px;
}
.page-intro {
margin: 2px 25px 12px;
color: #5c6d7e;
}
#marcaSelect {
height: 34px;
padding: 4px 10px;
border: 1px solid #c8d3dd;
border-radius: 8px;
font-family: inherit;
font-weight: 600;
color: #24384c;
box-shadow: none;
float: right;
margin: 10px 20px 0 12px;
}
.media-card {
border: 1px solid #e4ebf1;
border-left: 3px solid #0c4f83;
border-radius: 8px;
background: #f9fbfd;
box-shadow: none;
padding: 14px 16px;
}
.media-card .media-value {
color: #123d63;
}
.media-card p {
line-height: 1.5;
}
.media-card p + p {
margin-top: 10px;
}
.page-estaciones .top .ahorro {
display: block;
margin: 24px 0 10px;
padding: 14px 24px;
background: #1db06e;
color: #fff;
font-size: clamp(1.05rem, 1.2vw, 1.35rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
box-shadow: none;
}
.page-estaciones .top .ahorro strong {
font-weight: 800;
}
.trtabla:hover {
background-color: #fbfcfd;
box-shadow: inset 0 0 0 1px rgba(17, 54, 84, 0.03);
}
.trtabla--best td,
.trtabla--best + .trtabla2 td {
background: linear-gradient(180deg, #fbfefc 0%, #f5fbf7 100%);
}
.trtabla2 {
border-bottom: 1px solid #edf1f4;
}
#tab_dir {
width: auto;
padding-top: 10px;
padding-right: 0;
}
.direccion-container {
gap: 12px;
align-items: center;
padding-top: 0;
}
#tab_logo {
margin-right: 12px;
margin-left: 0;
}
.logomtd {
width: 44px;
height: 44px;
}
.nombrees {
width: auto;
max-width: 100%;
color: #162737;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
margin-bottom: 2px;
white-space: normal;
overflow: visible;
}
.best-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
margin-top: 4px;
padding: 2px 8px;
border-radius: 999px;
background: #e9f8ef;
color: #117847;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
vertical-align: top;
white-space: nowrap;
}
.direccion {
display: block;
width: auto;
max-width: 100%;
color: #657688;
font-size: 11px;
line-height: 1.35;
}
.codp,
.provin {
color: #70808f;
font-style: normal;
}
.station-meta-line {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 5px 0 0;
}
#nPrice {
width: 108px;
padding-top: 12px !important;
padding-right: 28px !important;
padding-left: 0 !important;
}
.price-content {
min-width: 74px;
padding: 11px 9px 9px;
margin-right: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(15, 35, 55, 0.06);
color: #fff;
text-align: center;
}
.price-content span {
display: block;
font-size: 25px;
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
text-shadow: none;
}
.lastUpdate {
margin-top: 6px;
font-size: 10px;
line-height: 1.15;
opacity: 0.94;
letter-spacing: 0.02em;
font-weight: 500;
}
.fila-detalle {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 6px 28px 6px 6px;
gap: 8px;
}
.price-difference {
flex: 1 1 240px;
min-width: 0;
}
.price-difference-message {
display: block;
max-width: 100%;
color: #415466;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
overflow-wrap: anywhere;
}
.debajM,
.sobreM {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 4px 10px;
border-left: 0;
border-radius: 999px;
line-height: 1.2;
max-width: 100%;
white-space: normal;
}
.debajM {
background: #eef9f3;
color: #117847;
}
.sobreM {
background: #fdf0f2;
color: #bd455c;
}
.debajM::before,
.sobreM::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 7px;
}
.debajM::before {
background: #1db06e;
}
.sobreM::before {
background: #ea4956;
}
.iconos-acciones {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-right: 24px;
margin-left: auto;
}
.iconos-acciones a {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
border: 0;
background: transparent;
opacity: 0.7;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.iconos-acciones a:hover {
opacity: 1;
transform: translateY(-1px);
}
.station-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 10px;
color: #2b648f;
font-size: 11px;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
border-radius: 8px;
background: #eaf4fd;
margin-left: 2px;
box-shadow: none;
letter-spacing: 0;
}
.station-link:hover {
color: #1f547d;
background: #dceefe;
border-color: transparent;
}
.abierto,
.cerrado {
min-width: 0;
padding: 0;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
text-transform: none;
filter: none;
}
.abierto {
background: transparent;
color: #0f8a4d;
margin-bottom: 8px;
}
.cerrado {
width: auto;
background: transparent;
color: #c14b61;
margin-bottom: 8px;
}
.verMas {
border-radius: 8px;
border-color: #c8d3dd;
color: #284761;
}
.trtabla td {
vertical-align: middle;
padding-top: 8px;
padding-bottom: 8px;
}
.trtabla td,
.trtabla2 td {
background: #fff;
}
.trtabla {
border-top: 1px solid #eef2f5;
}
.trtabla:first-of-type {
border-top: 0;
}
#tab_logo {
min-width: 50px;
padding-bottom: 0;
}
.price-difference {
flex: 1;
display: block;
margin-top: 2px;
}
.direccion-content {
max-width: 210px;
padding-top: 2px;
}
.nombrees {
font-size: 16px;
}
.direccion {
color: #5d6f80;
font-size: 11px;
}
.station-meta-line {
margin-top: 4px;
}
#tab_logo p {
margin-top: 4px;
}
.trtabla td {
padding-bottom: 2px;
}
@media (max-width: 1359px) {
.page-estaciones .breadCrumb {
font-size: 16px;
padding: 3px;
padding-left: 2.5%;
background-color: #464646;
color: white;
margin: 0;
}
.page-estaciones .breadCrumb a,
.page-estaciones .breadCrumb a:hover,
.page-estaciones .breadCrumb a:focus,
.page-estaciones .breadCrumb a:active,
.page-estaciones .breadCrumb a:visited {
color: #ffffff;
font-weight: 600;
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: none;
}
.page-estaciones .breadCrumb strong {
color: #ffffff;
}
#marcaSelect {
border-width: 1px;
margin: 10px 16px 0 10px;
}
.direccion-container {
gap: 10px;
}
.ahorro {
margin: 22px 0 8px;
}
}
@media (max-width: 900px) {
#nPrice {
width: 96px;
padding-right: 10px !important;
}
.price-content span {
font-size: 21px;
}
.fila-detalle {
align-items: flex-start;
gap: 8px;
}
.iconos-acciones {
gap: 8px;
margin-right: 0;
}
.station-meta-line {
gap: 6px;
}
.direccion-content {
max-width: 170px;
}
}
@media (max-width: 640px) {
.page-estaciones h2 {
margin-top: 10px;
}
.page-estaciones .top .ahorro {
margin: 18px 0 8px;
padding: 12px 16px;
font-size: 1rem;
line-height: 1.25;
}
#marcaSelect {
float: none;
display: block;
width: fit-content;
min-width: 92px;
margin: 0 12px 10px auto;
}
.page-estaciones h1 {
margin-right: 0;
padding-right: 12px;
}
#tab_dir {
padding-top: 8px;
}
.direccion-container {
gap: 10px;
}
#tab_logo {
min-width: 42px;
margin-right: 10px;
}
.logomtd {
width: 40px;
height: 40px;
}
.direccion-content {
max-width: 160px;
padding-top: 2px;
}
.nombrees {
font-size: 15px;
line-height: 1.2;
white-space: normal;
overflow: visible;
}
.best-badge {
display: inline-flex;
margin-top: 4px;
margin-left: 0;
padding: 2px 6px;
font-size: 8px;
letter-spacing: 0.02em;
vertical-align: top;
}
.direccion {
font-size: 10px;
line-height: 1.3;
}
.station-meta-line {
margin-top: 3px;
}
#nPrice {
width: 92px;
padding-top: 10px !important;
padding-right: 12px !important;
}
.price-content {
min-width: 70px;
padding: 10px 8px 8px;
}
.price-content span {
font-size: 22px;
}
.lastUpdate {
font-size: 10px;
}
.fila-detalle {
padding: 8px 12px 10px 6px;
gap: 10px;
}
.price-difference {
flex-basis: 100%;
}
.price-difference-message {
font-size: 11px;
line-height: 1.35;
}
.iconos-acciones {
justify-content: flex-end;
gap: 10px;
align-items: center;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.iconos-acciones a {
min-width: 28px;
min-height: 28px;
padding: 3px;
}
.station-link {
min-height: 30px;
padding: 0 10px;
margin-left: 0;
font-size: 12px;
}
.abierto,
.cerrado {
font-size: 11px;
margin-bottom: 6px;
}
}
/* Municipio SSR v3: cabecera, resumen y controles renderizados en servidor */
.page-estaciones { --page-shell-width: min(calc(100% - 32px), 980px); }
.page-estaciones .municipality-overview,
.page-estaciones .municipality-list {
width: var(--page-shell-width);
max-width: 980px;
box-sizing: border-box;
}
.page-estaciones .municipality-overview {
margin: 24px auto 18px;
padding: 20px 24px 16px;
overflow: visible;
border: 1px solid rgba(16,58,97,.07);
border-radius: 26px;
background: #fff;
box-shadow: 0 14px 36px rgba(16,58,97,.075);
}
.municipality-overview .top-head { display: block; padding: 0; }
.municipality-overview .top-head-copy { position: relative; max-width: none; }
.municipality-overview__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 9px;
}
.municipality-overview__place {
display: inline-flex;
min-height: 25px;
align-items: center;
padding: 0 10px;
border-radius: 999px;
background: #eaf2ff;
color: #1d4ed8;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.municipality-overview__updated {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
font-size: 10px;
font-weight: 650;
white-space: nowrap;
}
.municipality-overview__updated i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #20b66a;
}
.page-estaciones .municipality-overview h1 {
max-width: 760px;
margin: 0;
padding: 0;
color: #17324d;
font-size: clamp(30px,4vw,42px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.035em;
}
.page-estaciones .municipality-overview .page-intro {
max-width: 720px;
margin: 8px 0 0;
padding: 0;
color: #5b6878;
font-size: 16px;
line-height: 1.5;
}
.municipality-summary {
margin-top: 14px;
padding: 13px 16px 11px;
border: 1px solid rgba(16,58,97,.09);
border-radius: 17px;
background: linear-gradient(120deg,#f3faf6 0,#f8fbfe 55%,#fff 100%);
}
.municipality-summary__top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 22px;
padding-bottom: 7px;
}
.municipality-summary__lead { min-width: 0; }
.municipality-summary__label {
display: block;
color: #687789;
font-size: 10px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
.municipality-summary__lead-main {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 5px 12px;
}
.municipality-summary__value {
margin-top: 3px;
color: #087d55;
font-size: 30px;
font-style: italic;
font-weight: 850;
line-height: 1.05;
letter-spacing: -.03em;
}
.municipality-summary__stations { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.municipality-summary__stations > span {
display: inline-flex;
min-height: 20px;
align-items: center;
padding: 0 6px;
border: 1px solid #d8e6de;
border-radius: 999px;
background: rgba(255,255,255,.78);
color: #43586b;
font-size: 9px;
font-weight: 750;
white-space: nowrap;
}
.municipality-summary__saving {
display: inline-flex;
flex: 0 0 auto;
align-items: baseline;
gap: 3px;
margin: 0;
color: #64748b;
font-size: 11px;
white-space: nowrap;
}
.municipality-summary__saving strong { color: #20364d; }
.municipality-summary__range-title {
margin: 0 0 1px;
color: #43586b;
font-size: 11px;
font-weight: 800;
line-height: 1.25;
}
.municipality-summary__track-wrap { position: relative; padding-top: 27px; }
.municipality-summary__average {
position: absolute;
top: 3px;
left: var(--average-position);
z-index: 2;
transform: translateX(-50%);
padding: 5px 8px;
border: 1px solid #bfd7ff;
border-radius: 999px;
background: #edf4ff;
color: #1d4ed8;
font-size: 10px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
box-shadow: 0 3px 8px rgba(37,99,235,.10);
}
.municipality-summary__average::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 2px;
height: 14px;
transform: translateX(-50%);
background: #2563eb;
}
.municipality-summary__track {
position: relative;
height: 9px;
border: 1px solid rgba(16,58,97,.07);
border-radius: 999px;
background: linear-gradient(90deg,#bfead0 0%,#dcebe3 44%,#f1e1c8 72%,#f3c7ca 100%);
box-shadow: inset 0 1px 2px rgba(16,58,97,.08);
}
.municipality-summary__track::before,
.municipality-summary__track::after {
content: "";
position: absolute;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-50%);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(16,58,97,.2);
}
.municipality-summary__track::before { left: 0; background: #22b66f; }
.municipality-summary__track::after { right: 0; background: #e8676f; }
.municipality-summary__limits {
display: flex;
justify-content: space-between;
margin-top: 7px;
color: #536779;
}
.municipality-summary__limits span { display: flex; flex-direction: column; gap: 2px; }
.municipality-summary__limits span:last-child { text-align: right; }
.municipality-summary__limits small {
color: #708091;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.municipality-summary__limits strong { color: #20364d; font-size: 14px; font-weight: 850; }
.municipality-list { max-width: 980px; margin-top: 18px; }
.municipality-controls {
display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
align-items: center;
gap: 16px;
margin: 0 0 14px;
padding: 12px 0;
border-top: 1px solid rgba(16,58,97,.08);
border-bottom: 1px solid rgba(16,58,97,.08);
}
.municipality-controls__title { margin: 0; color: #20364d; font-size: 14px; font-weight: 750; }
.municipality-controls #combustible-form { display: flex; gap: 7px; margin: 0; padding: 0; }
.municipality-controls #combustible-form :is(label, a.fuel-option-link) {
position: relative;
display: inline-flex;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 5px;
margin: 0;
padding: 0 12px;
border: 1px solid #dce6ef;
border-radius: 999px;
background: #f8fafc;
color: #425466;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.municipality-controls #combustible-form input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link)::before {
content: "";
width: 12px;
flex: 0 0 12px;
color: #1d4ed8;
font-weight: 900;
}
.municipality-controls #combustible-form :is(label:has(input:checked), a.fuel-option-link[aria-current="page"]) {
border-color: #7eb8ff;
background: #eaf2ff;
color: #174ea6;
box-shadow: 0 0 0 2px rgba(37,128,206,.07);
}
.municipality-controls #combustible-form :is(label:has(input:checked), a.fuel-option-link[aria-current="page"])::before { content: "✓"; }
.municipality-controls__brand {
display: inline-flex;
min-height: 38px;
align-items: center;
gap: 8px;
padding: 0 6px 0 11px;
border: 1px solid #dce6ef;
border-radius: 13px;
background: #f8fafc;
}
.municipality-controls__brand label { color: #64748b; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.municipality-controls__brand select { min-width: 110px; height: 34px; border: 0; background: transparent; color: #425466; font-weight: 700; }
@media (max-width: 700px) {
.page-estaciones { --page-shell-width: calc(100% - 16px); }
.page-estaciones .municipality-overview {
margin-top: 10px;
padding: 13px 11px 11px;
border-radius: 20px;
}
.municipality-overview__meta { margin-bottom: 7px; }
.municipality-overview__place { min-height: 23px; padding: 0 8px; font-size: 9px; }
.municipality-overview__updated { font-size: 9px; }
.page-estaciones .municipality-overview h1 { font-size: 26px; }
.page-estaciones .municipality-overview .page-intro { margin-top: 6px; font-size: 14px; line-height: 1.4; }
.municipality-summary { margin-top: 10px; padding: 11px 10px 9px; border-radius: 15px; }
.municipality-summary__top {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: end;
gap: 5px 8px;
padding-bottom: 4px;
}
.municipality-summary__value { font-size: 27px; }
.municipality-summary__stations { flex-wrap: nowrap; }
.municipality-summary__stations > span { min-height: 20px; padding: 0 6px; font-size: 9px; }
.municipality-summary__saving { margin-bottom: 4px; font-size: 9px; }
.municipality-summary__range-title { margin-top: 2px; font-size: 10px; }
.municipality-summary__track-wrap { padding-top: 24px; }
.municipality-summary__average { top: 2px; font-size: 9px; }
.municipality-summary__limits small { font-size: 9px; }
.municipality-summary__limits strong { font-size: 12px; }
.municipality-list { margin-top: 12px; }
.municipality-controls { grid-template-columns: auto minmax(130px,1fr); gap: 7px 10px; padding: 10px 0; }
.municipality-controls__title { font-size: 13px; }
.municipality-controls #combustible-form {
display: grid;
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: repeat(2,minmax(0,1fr));
width: 100%;
gap: 5px;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link) { width: 100%; min-height: 34px; padding: 0 7px; font-size: 11px; box-sizing: border-box; }
.municipality-controls__brand { justify-self: end; width: 150px; max-width: 100%; box-sizing: border-box; }
.municipality-controls__brand select { min-width: 0; width: 78px; }
}
/* Listado municipal: mismo lenguaje visual que la ficha de estación */
.municipality-list {
box-sizing: border-box;
width: var(--page-shell-width, min(100% - 24px, 980px));
margin: 28px auto;
padding: 28px;
border: 1px solid #e5edf4;
border-radius: 28px;
background: #fff;
box-shadow: 0 16px 45px rgba(27, 48, 68, .08);
}
.municipality-list__header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.municipality-list__eyebrow {
display: block;
margin-bottom: 5px;
color: #238544;
font-size: .72rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.municipality-list__header h2 {
margin: 0;
color: #1d2d3b;
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.025em;
}
.municipality-list__header p {
margin: 7px 0 0;
color: #607080;
font-size: .94rem;
line-height: 1.45;
}
.municipality-list__order {
flex: 0 0 auto;
padding: 7px 11px;
border: 1px solid #dce7ef;
border-radius: 999px;
background: #f6f9fb;
color: #526473;
font-size: .75rem;
font-weight: 700;
}
.municipality-list__items {
display: grid;
gap: 12px;
}
.municipality-list__empty {
margin: 0;
padding: 28px;
border-radius: 18px;
background: #f7fafc;
color: #526473;
text-align: center;
}
.municipality-station-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 132px;
gap: 14px 20px;
padding: 18px;
overflow: hidden;
border: 1px solid #e2eaf0;
border-radius: 20px;
background: #f8fbfd;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.municipality-station-card:hover {
border-color: #cbdce7;
box-shadow: 0 10px 25px rgba(31, 54, 72, .08);
transform: translateY(-1px);
}
.municipality-station-card--best {
border-color: #a9dcb7;
background: linear-gradient(105deg, #f3fbf5 0, #f8fbfd 50%);
}
.municipality-station-card__identity {
display: flex;
align-items: center;
min-width: 0;
gap: 14px;
}
.municipality-station-card__logo {
display: grid;
flex: 0 0 72px;
width: 72px;
height: 72px;
place-items: center;
border: 1px solid #e2e9ee;
border-radius: 17px;
background: #fff;
box-shadow: 0 5px 14px rgba(36, 55, 69, .06);
}
.municipality-station-card__logo img {
display: block;
width: 58px;
height: 58px;
object-fit: contain;
}
.municipality-station-card__copy { min-width: 0; }
.municipality-station-card__name-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.municipality-station-card__name-row h3 {
margin: 0;
color: #1d2d3b;
font-size: 1rem;
font-weight: 800;
line-height: 1.25;
}
.municipality-station-card__best {
padding: 4px 8px;
border-radius: 999px;
background: #dff5e4;
color: #176b34;
font-size: .68rem;
font-weight: 800;
letter-spacing: .01em;
}
.municipality-station-card__address,
.municipality-station-card__place {
margin: 4px 0 0;
overflow: hidden;
color: #536473;
font-size: .85rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.municipality-station-card__place {
color: #7a8995;
font-size: .76rem;
}
.municipality-station-card__status {
display: none;
width: max-content;
margin: 7px 0 0;
padding: 3px 7px;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
text-transform: capitalize;
}
.municipality-station-card__status.abierto,
.municipality-station-card__status.cerrado {
display: block;
}
.municipality-station-card__status.abierto { background: #dff5e4; color: #176b34; }
.municipality-station-card__status.cerrado { background: #f9e3e3; color: #a43a3a; }
.municipality-price {
display: grid;
align-self: stretch;
grid-template-columns: 1fr auto;
overflow: hidden;
border: 2px solid var(--fuel-color);
border-radius: 15px;
background: #fff;
}
.municipality-price__fuel {
grid-column: 1 / -1;
padding: 6px 8px;
background: var(--fuel-color);
color: var(--fuel-ink);
font-size: .69rem;
font-weight: 850;
line-height: 1.1;
text-align: center;
}
.municipality-price__value {
align-self: center;
padding: 8px 0 2px 9px;
color: #1b2b38;
font-size: 1.65rem;
font-weight: 850;
letter-spacing: -.045em;
line-height: 1;
}
.municipality-price__value sup {
position: relative;
top: -.2em;
margin-left: 1px;
font-size: 18px;
letter-spacing: -.02em;
}
.municipality-price__comma { margin-right: 0; }
.municipality-price__unit {
align-self: center;
padding: 9px 8px 0 2px;
color: #72808b;
font-size: .67rem;
font-weight: 800;
}
.municipality-price__updated {
grid-column: 1 / -1;
align-self: end;
padding: 3px 6px 5px;
color: #81909b;
font-size: .57rem;
line-height: 1;
text-align: center;
}
.municipality-station-card__footer {
display: flex;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 12px;
border-top: 1px solid #e2eaf0;
}
.municipality-station-card__difference {
min-width: 0;
color: #667784;
font-size: .76rem;
line-height: 1.3;
}
.municipality-station-card__difference .debajM,
.municipality-station-card__difference .sobreM {
display: inline-flex;
align-items: center;
margin: 0;
padding: 4px 8px;
border-radius: 999px;
font-size: .72rem;
font-weight: 750;
}
.municipality-station-card__difference .debajM { background: #e3f5e8; color: #1d7138; }
.municipality-station-card__difference .sobreM { background: #fae8e7; color: #9a3c37; }
.municipality-station-card__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
}
.municipality-station-card__actions a {
box-sizing: border-box;
display: inline-flex;
min-height: 36px;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 10px;
border: 1px solid #d9e4eb;
border-radius: 11px;
background: #fff;
color: #334b5d;
font-size: .72rem;
font-weight: 750;
line-height: 1;
text-decoration: none;
}
.municipality-station-card__actions a:hover {
border-color: #b9ceda;
background: #f5fafc;
color: #1e6b3a;
}
.municipality-station-card__actions svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.municipality-station-card__actions .municipality-action--waze svg,
.municipality-station-card__actions .municipality-action--maps svg {
fill: initial;
stroke: none;
}
.municipality-station-card__actions .municipality-action--waze svg { width: 25px; height: 25px; color: #263746; }
.municipality-station-card__actions .municipality-action--maps svg { width: 22px; height: 24px; }
.municipality-station-card__detail {
border-color: #b9dfc3 !important;
background: #eaf7ed !important;
color: #176b34 !important;
}
.municipality-station-card__detail svg { width: 14px; }
@media (max-width: 640px) {
.municipality-list {
margin-top: 16px;
padding: 16px 12px;
border-radius: 20px;
}
.municipality-list__header {
display: block;
margin-bottom: 14px;
padding: 0 3px;
}
.municipality-list__header h2 { font-size: 1.35rem; }
.municipality-list__header p { font-size: .82rem; }
.municipality-list__order { display: none; }
.municipality-station-card {
grid-template-columns: minmax(0, 1fr) 104px;
gap: 12px 10px;
padding: 12px;
border-radius: 17px;
}
.municipality-station-card__identity { gap: 9px; }
.municipality-station-card__logo { flex-basis: 50px; width: 50px; height: 50px; border-radius: 13px; }
.municipality-station-card__logo img { width: 42px; height: 42px; }
.municipality-station-card__name-row { display: block; }
.municipality-station-card__name-row h3 { font-size: .87rem; }
.municipality-station-card__best { display: inline-block; margin-top: 4px; padding: 3px 6px; font-size: .59rem; }
.municipality-station-card__address { font-size: .72rem; }
.municipality-station-card__place { font-size: .66rem; }
.municipality-price { border-radius: 13px; }
.municipality-price__fuel { padding: 5px 3px; font-size: .58rem; }
.municipality-price__value { padding-left: 6px; font-size: 1.35rem; }
.municipality-price__value sup { font-size: 15px; }
.municipality-price__unit { padding-right: 5px; font-size: .59rem; }
.municipality-price__updated { padding-right: 2px; padding-left: 2px; font-size: .51rem; }
.municipality-station-card__footer {
display: grid;
gap: 9px;
padding-top: 10px;
}
.municipality-station-card__actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 6px;
}
.municipality-station-card__actions a {
width: 100%;
min-height: 34px;
padding: 6px 5px;
font-size: .66rem;
}
}
@media (max-width: 370px) {
.municipality-station-card { grid-template-columns: minmax(0, 1fr) 96px; }
.municipality-station-card__logo { display: none; }
}
/* Acabado final de filas: un poco mas de aire y una meta secundaria util */
#tab_dir {
padding-top: 12px;
}
.logomtd {
width: 46px;
height: 46px;
}
.nombrees {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
}
.direccion {
color: #657688;
font-size: 11px;
}
.station-meta-line {
margin-top: 6px;
}
#nPrice {
padding-top: 14px !important;
}
.fila-detalle {
padding: 8px 14px 10px 6px;
}
.trtabla td {
padding-top: 10px;
padding-bottom: 10px;
}
.direccion-content {
padding-top: 4px;
}
/* Cabecera superior estable para SEO visible + selector */
.top-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-right: 20px;
}
.top-head-copy {
flex: 1;
min-width: 0;
}
.top-head-actions {
flex-shrink: 0;
padding-top: 8px;
display: flex;
justify-content: flex-end;
}
.brand-filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 10px;
border: 1px solid #e0e8f0;
border-radius: 10px;
background: #fbfdff;
}
.brand-filter__label {
color: #5f7183;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.seo-summary {
margin: 0 20px 14px;
color: #4b6074;
font-size: 14px;
line-height: 1.5;
}
.seo-summary p {
margin: 0;
}
.page-estaciones .top #marcaSelect {
float: none;
height: 32px;
margin: 0;
padding: 4px 10px;
min-width: 92px;
border-radius: 8px;
background: #fff;
border-color: #d4dee8;
}
@media (max-width: 640px) {
.top-head {
flex-direction: column;
gap: 8px;
padding-right: 0;
}
.top-head-actions {
width: 100%;
padding-top: 0;
justify-content: flex-start;
}
.brand-filter {
box-sizing: border-box;
width: calc(100% - 50px);
max-width: none;
justify-content: space-between;
margin: 0 25px 4px;
}
.page-estaciones .top #marcaSelect {
display: block;
width: 120px;
min-width: 120px;
margin: 0;
}
.page-estaciones h1 {
margin-right: 0;
padding-right: 12px;
}
.seo-summary {
margin: 0 12px 12px;
font-size: 13px;
}
}
/* Paridad total con estaciones-marca */
.page-estaciones {
color: var(--text-main);
background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
font-family: "Segoe UI", "Noto Sans", Roboto, Arial, sans-serif;
}
.page-estaciones .top {
background: var(--surface-bg);
box-shadow: 0 20px 44px rgba(10, 20, 35, 0.08);
border: 1px solid rgba(12, 79, 131, 0.14);
}
.page-estaciones h1 {
text-transform: none !important;
text-align: left !important;
font-size: clamp(1.65rem, 2.35vw, 2.2rem);
line-height: 1.12;
letter-spacing: -0.02em;
font-weight: 700;
padding: 15px 25px;
}
.page-estaciones .page-intro {
margin: 4px 25px 14px;
color: var(--text-soft);
font-size: 0.95rem;
text-align: left;
max-width: 70ch;
}
.page-estaciones .breadCrumb,
.page-estaciones .breadCrumb a,
.page-estaciones .breadCrumb a:hover,
.page-estaciones .breadCrumb a:focus,
.page-estaciones .breadCrumb a:active,
.page-estaciones .breadCrumb a:visited,
.page-estaciones .breadCrumb strong,
.page-estaciones .breadCrumb *,
.page-estaciones .breadCrumb *:visited {
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.page-estaciones .media-card {
margin: 8px 20px 16px;
padding: 12px 14px;
border: 1px solid #dbe4ee;
border-left: 4px solid var(--brand-ink);
border-radius: 12px;
background: linear-gradient(180deg, #f8fbff 0%, var(--brand-soft) 100%);
color: #274055;
}
.page-estaciones .media-card p {
margin: 0;
line-height: 1.45;
}
.page-estaciones .media-card .media-value {
font-weight: 700;
color: var(--brand-ink);
}
.page-estaciones .top .ahorro {
margin: 18px 0 8px;
padding: 10px 16px;
text-align: left;
}
.page-estaciones .trtabla--best,
.page-estaciones .trtabla--best + .trtabla2 {
background: linear-gradient(180deg, #fbfefc 0%, #f5fbf7 100%);
}
.page-estaciones .trtabla--best td,
.page-estaciones .trtabla--best + .trtabla2 td {
background: linear-gradient(180deg, #fbfefc 0%, #f5fbf7 100%) !important;
}
.page-estaciones .trtabla--best + .trtabla2 {
border-bottom-color: rgba(29, 176, 110, 0.12);
}
.page-estaciones .trtabla--best + .trtabla2 .fila-detalle {
padding-top: 4px;
}
.page-estaciones .direccion-container {
gap: 12px !important;
align-items: center !important;
padding-top: 0 !important;
}
.page-estaciones .nombrees {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
white-space: normal;
overflow: visible;
}
.page-estaciones .direccion {
display: block;
width: 100%;
max-width: 100%;
color: #657688;
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-estaciones .station-meta-line {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.page-estaciones #nPrice {
width: 98px;
padding-top: 14px !important;
padding-right: 54px !important;
padding-left: 0 !important;
}
.page-estaciones .price-content {
min-width: 68px;
padding: 10px 8px 8px;
margin-right: 0;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
box-shadow: 0 4px 10px rgba(15, 35, 55, 0.06);
color: #fff;
text-align: center;
}
.page-estaciones .price-content span {
display: block;
font-size: 23px;
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
text-shadow: none;
}
.page-estaciones .lastUpdate {
margin-top: 6px;
font-size: 10px;
line-height: 1.15;
opacity: 0.94;
letter-spacing: 0.02em;
font-weight: 500;
}
.page-estaciones .fila-detalle {
align-items: center !important;
padding: 8px 34px 10px 0 !important;
gap: 8px !important;
}
.page-estaciones .trtabla td {
vertical-align: middle !important;
padding-top: 10px !important;
padding-bottom: 2px !important;
}
.page-estaciones #tab_logo {
min-width: 50px;
margin-right: 6px !important;
margin-left: 0 !important;
padding-bottom: 0 !important;
}
.page-estaciones .direccion-content {
max-width: 184px !important;
padding-top: 4px !important;
min-width: 0;
margin-left: -8px;
}
.page-estaciones .price-difference-message,
.page-estaciones .debajM,
.page-estaciones .sobreM {
white-space: normal;
}
.page-estaciones .station-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 10px;
color: #1f5f95;
font-size: 12px;
font-weight: 700;
text-decoration: none;
border: 1px solid #cfe0ef;
border-radius: 999px;
background: #f4f9fe;
margin-left: 2px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 640px) {
.page-estaciones .fila-detalle {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 8px 10px 12px 0 !important;
}
.page-estaciones .price-difference {
flex: 1 1 auto;
min-width: 0;
margin: 0;
overflow: hidden;
}
.page-estaciones .price-difference-message {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
overflow-wrap: normal;
}
.page-estaciones .debajM,
.page-estaciones .sobreM {
display: inline-flex;
align-items: center;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-estaciones .iconos-acciones {
flex: 0 0 122px;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-end;
gap: 8px !important;
margin: 0;
}
.page-estaciones .iconos-acciones a {
flex: 0 0 auto;
min-width: 28px;
min-height: 28px;
}
.page-estaciones .station-link {
border-radius: 7px;
padding: 0 9px;
min-height: 27px;
min-width: 68px;
font-size: 11px;
line-height: 1;
}
}
@media (max-width: 640px) {
.page-estaciones h3 {
margin-top: 18px;
}
.page-estaciones .top {
margin-top: 20px;
}
.page-estaciones h1 {
font-size: 36px;
line-height: 1.12;
padding-top: 10px;
padding-bottom: 2px;
}
.page-estaciones .top .ahorro {
margin: 18px 0 8px;
padding: 12px 16px;
font-size: 1rem;
line-height: 1.25;
}
.page-estaciones #nPrice {
width: 88px;
padding-right: 28px !important;
}
.page-estaciones .price-content {
min-width: 64px;
padding: 9px 7px 7px;
}
.page-estaciones .price-content span {
font-size: 21px;
}
}
/* Ancho consistente entre bloques en movil */
.page-estaciones {
--page-shell-width: min(100% - 24px, 980px);
}
.page-estaciones .top,
.page-estaciones .seo-links,
.page-estaciones .poblaciones {
box-sizing: border-box;
width: var(--page-shell-width);
margin-left: auto;
margin-right: auto;
}
.page-estaciones .poblaciones {
padding-left: 12px;
padding-right: 12px;
}
@media (max-width: 640px) {
.page-estaciones {
--page-shell-width: min(100% - 16px, 980px);
}
.page-estaciones .top {
margin-top: 16px;
border-radius: 18px;
}
.page-estaciones .seo-links {
padding-left: 14px;
padding-right: 14px;
}
.page-estaciones .poblaciones {
border-radius: 28px;
padding-left: 10px;
padding-right: 10px;
}
}
/* Mantener estas dimensiones al final de la cascada heredada */
.page-estaciones { --page-shell-width: min(calc(100% - 32px), 980px); }
.page-estaciones .municipality-overview,
.page-estaciones .municipality-list {
width: var(--page-shell-width);
max-width: 980px;
}
.page-estaciones .municipality-overview {
padding: 20px 24px 16px;
border-radius: 26px;
}
@media (max-width: 700px) {
.page-estaciones { --page-shell-width: calc(100% - 16px); }
.page-estaciones .municipality-overview {
margin-top: 10px;
padding: 13px 11px 11px;
border-radius: 20px;
}
}
/* Tarjetas SSR alineadas con la preview visual aprobada */
.municipality-list {
padding: 22px;
border-color: rgba(16,58,97,.07);
border-radius: 24px;
box-shadow: 0 12px 32px rgba(16,58,97,.075);
}
.municipality-list__header { min-height: 58px; margin-bottom: 15px; }
.municipality-list__eyebrow {
display: inline-flex;
min-height: 24px;
align-items: center;
margin-bottom: 7px;
padding: 0 9px;
border-radius: 999px;
background: #eaf2ff;
color: #1d4ed8;
font-size: 9px;
}
.municipality-list__header h2 { margin: 0; padding: 0 !important; color: #20364d; font-size: 22px; font-weight: 750; text-align: left; }
.municipality-list__header p { margin-top: 4px; color: #667786; font-size: 12px; }
.municipality-list__items { gap: 10px; }
.municipality-station-card,
.municipality-station-card--best {
display: grid;
grid-template-columns: minmax(250px,1fr) auto 126px;
grid-template-areas: "identity footer price";
min-height: 104px;
align-items: center;
gap: 14px;
padding: 11px 15px 10px;
overflow: visible;
border: 1px solid rgba(37,128,206,.09);
border-radius: 17px;
background: #f8fbfe;
box-shadow: none;
}
.municipality-station-card__identity { grid-area: identity; gap: 14px; text-align: left; }
.municipality-station-card__logo {
flex: 0 0 58px;
width: 58px;
height: 58px;
border-color: rgba(16,58,97,.05);
border-radius: 15px;
box-shadow: none;
}
.municipality-station-card__logo img { width: 46px; height: 46px; }
.municipality-station-card__name-row { min-width: 0; flex-wrap: nowrap; align-items: flex-start; }
.municipality-station-card__name-row h3 {
display: -webkit-box;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
color: #20364d;
font-size: 17px;
font-weight: 750;
line-height: 1.15;
white-space: normal;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.municipality-station-card__best {
margin: 0;
padding: 3px 6px;
background: #e7f8ec;
color: #138a52;
font-size: 9px;
white-space: nowrap;
}
.municipality-station-card__best-short { display: none; }
.municipality-station-card__address {
display: -webkit-box;
margin-top: 5px;
overflow: hidden;
color: #566475;
font-size: 12px;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.municipality-station-card__place { margin: 3px 0 0; color: #7a8898; font-size: 9px; }
.municipality-station-card__status,
.municipality-station-card__status.abierto,
.municipality-station-card__status.cerrado {
min-height: 0;
margin: 4px 0 0;
padding: 0;
background: transparent;
font-size: 10px;
line-height: 1;
}
.municipality-price {
grid-area: price;
display: grid;
grid-template-columns: auto auto;
align-self: center;
align-items: baseline;
justify-content: center;
gap: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.municipality-price__fuel { display: none; }
.municipality-price__value {
padding: 0;
color: #111827;
font-size: 32px;
font-style: italic;
font-weight: 850;
letter-spacing: -.035em;
line-height: 1;
white-space: nowrap;
}
.municipality-price__value sup {
position: static;
top: auto;
font-size: inherit;
line-height: inherit;
vertical-align: baseline;
}
.municipality-price__unit { padding: 0 0 1px 4px; color: #64748b; font-size: 11px; }
.municipality-price__updated {
grid-column: 1 / -1;
padding: 4px 0 0;
color: #718096;
font-size: 8px;
font-weight: 700;
text-align: center;
}
.municipality-station-card__footer {
grid-area: footer;
display: flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
}
.municipality-delta {
display: inline-flex;
min-height: 24px;
align-items: center;
gap: 5px;
padding: 0 8px;
border-radius: 999px;
white-space: nowrap;
}
.municipality-delta strong { color: inherit; font-size: 11px; font-weight: 850; line-height: 1; }
.municipality-delta small { color: inherit; font-size: 9px; font-weight: 700; line-height: 1; opacity: .82; }
.municipality-delta--below { background: #ecfdf5; color: #087d55; }
.municipality-delta--above { background: #fff1f2; color: #d6324b; }
.municipality-station-card__actions { display: grid; grid-template-columns: repeat(3,74px); gap: 5px; }
.municipality-station-card__actions a,
.municipality-station-card__detail {
width: 74px;
min-height: 32px;
gap: 5px;
padding: 0 7px;
border-color: rgba(16,58,97,.08);
border-radius: 10px;
background: #fff;
color: #425466;
font-size: 10px;
}
.municipality-station-card__detail { background: #eef4ff !important; color: #1e4f8f !important; }
.municipality-station-card__detail svg { display: none; }
@media (max-width: 700px) {
.municipality-list { margin: 12px 8px; padding: 16px 12px 13px; border-radius: 20px; }
.municipality-list__header { min-height: 0; margin-bottom: 12px; padding: 0 3px; }
.municipality-list__header h2 { font-size: 20px; }
.municipality-list__header p { font-size: 11px; }
.municipality-station-card,
.municipality-station-card--best {
grid-template-columns: minmax(0,1fr) 84px;
grid-template-areas: "identity price" "footer footer";
min-height: 0;
gap: 5px 8px;
padding: 9px 11px 8px;
border-radius: 15px;
}
.municipality-station-card__identity { gap: 8px; align-self: start; }
.municipality-station-card__logo { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
.municipality-station-card__logo img { width: 36px; height: 36px; }
.municipality-controls { grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.municipality-controls__title { display: flex; min-height: 38px; align-items: center; }
.municipality-controls__brand { width: 154px; justify-self: end; }
.municipality-station-card__name-row { display: flex; min-width: 0; align-items: flex-start; gap: 5px; }
.municipality-station-card__name-row h3 { max-width: none; flex: 1 1 auto; font-size: 15px; }
.municipality-station-card__best { margin: 0; padding: 3px 5px; font-size: 8px; }
.municipality-station-card__best-full { display: none; }
.municipality-station-card__best-short { display: inline; }
.municipality-station-card__address { max-width: none; margin: 4px 0 0; font-size: 12px; }
.municipality-station-card__place { font-size: 10px; }
.municipality-station-card__status,
.municipality-station-card__status.abierto,
.municipality-station-card__status.cerrado { margin-top: 3px; font-size: 9px; }
.municipality-price__value { font-size: 24px; }
.municipality-price__value sup { font-size: inherit; }
.municipality-price__unit { font-size: 10px; }
.municipality-price__updated { font-size: 9px; }
.municipality-station-card__footer {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(186px,1.45fr);
gap: 5px;
padding-top: 6px;
border-top: 1px solid rgba(16,58,97,.06);
}
.municipality-delta { min-height: 25px; gap: 4px; padding: 0 6px; }
.municipality-delta strong { font-size: 10px; }
.municipality-delta small { font-size: 8px; }
.municipality-station-card__actions { grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 5px; }
.municipality-station-card__actions a,
.municipality-station-card__detail { width: 100%; min-height: 31px; padding: 0 5px; font-size: 10px; }
}
/* Rejilla intermedia: evita que la fila de escritorio desborde en tablet */
@media (min-width: 701px) and (max-width: 900px) {
.municipality-controls {
grid-template-columns: minmax(0,1fr) auto;
gap: 9px 14px;
}
.municipality-controls__title {
display: flex;
min-height: 38px;
align-items: center;
}
.municipality-controls #combustible-form {
display: grid;
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: repeat(4,minmax(0,1fr));
width: 100%;
gap: 7px;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link) {
width: 100%;
min-height: 36px;
padding: 0 8px;
box-sizing: border-box;
}
.municipality-controls__brand { justify-self: end; }
.municipality-station-card,
.municipality-station-card--best {
grid-template-columns: minmax(0,1fr) 112px;
grid-template-areas: "identity price" "footer footer";
min-height: 0;
gap: 10px 16px;
padding: 14px 16px 12px;
}
.municipality-station-card__identity { align-self: start; }
.municipality-station-card__footer {
display: flex;
width: 100%;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid rgba(16,58,97,.06);
}
.municipality-station-card__actions { flex: 0 0 auto; }
.municipality-price__value { font-size: 30px; }
}
@media (max-width: 700px) {
.municipality-station-card__name-row { display: flex; gap: 4px; }
.municipality-station-card__name-row h3 { width: auto; font-size: 14px; }
.municipality-station-card__best { margin-top: 0; padding: 2px 4px; font-size: 7px; }
}
/* Una regla antigua ocultaba el logo en los móviles estrechos */
@media (max-width: 370px) {
.municipality-station-card__logo { display: flex; }
.municipality-station-card__name-row { display: block; }
.municipality-station-card__name-row h3 { width: 100%; }
.municipality-station-card__best { margin-top: 3px; }
}
/* Contenido editorial y enlaces locales de la página municipal */
.nearby-intro {
margin: -5px 24px 18px;
color: #667786;
font-size: 13px;
}
.page-estaciones .poblaciones {
display: block;
width: var(--page-shell-width);
max-width: 980px;
margin: 28px auto;
padding: 22px 24px 24px;
border: 1px solid #e5edf4;
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 32px rgba(16,58,97,.07);
}
.page-estaciones .poblaciones[hidden] { display: none !important; }
.page-estaciones .poblaciones h2,
.page-estaciones .seo-links h2,
.page-estaciones .municipality-faq h2 {
width: 100%;
margin: 0;
padding: 0 !important;
color: #20364d;
font-size: 21px;
font-weight: 750;
line-height: 1.25;
text-align: left;
}
.page-estaciones .poblaciones > p {
margin: 5px 0 16px;
color: #667786;
font-size: 13px;
}
.poblaciones__links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.poblaciones__links .poblacion {
margin: 0;
font-size: 13px;
}
.municipality-faq {
box-sizing: border-box;
width: var(--page-shell-width);
max-width: 980px;
margin: 28px auto 18px;
padding: 24px;
border: 1px solid #e5edf4;
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 32px rgba(16,58,97,.07);
}
.municipality-faq__items {
display: grid;
gap: 8px;
margin-top: 16px;
}
.municipality-faq details {
border: 1px solid #e4ecf3;
border-radius: 14px;
background: #f8fbfe;
}
.municipality-faq summary {
padding: 14px 16px;
color: #20364d;
font-size: 14px;
font-weight: 750;
line-height: 1.35;
cursor: pointer;
}
.municipality-faq details p {
margin: 0;
padding: 0 16px 15px;
color: #536779;
font-size: 13px;
line-height: 1.55;
}
.page-estaciones .seo-links {
width: var(--page-shell-width);
max-width: 980px;
margin: 18px auto 28px;
padding: 22px 24px 24px;
border: 1px solid #e5edf4;
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 32px rgba(16,58,97,.07);
}
.page-estaciones .seo-links h2 { flex: 0 0 100%; margin-bottom: 4px; }
@media (max-width: 700px) {
.municipality-summary__top { display: block; }
.municipality-summary__value { white-space: nowrap; }
.municipality-summary__saving {
display: block;
margin: 6px 0 0;
font-size: 9px;
line-height: 1.35;
white-space: normal;
}
.nearby-intro { margin: -7px 16px 16px; font-size: 12px; }
.page-estaciones .poblaciones,
.municipality-faq,
.page-estaciones .seo-links {
margin-top: 14px;
margin-bottom: 14px;
padding: 18px 14px;
border-radius: 20px;
}
.page-estaciones .poblaciones h2,
.page-estaciones .seo-links h2,
.page-estaciones .municipality-faq h2 { font-size: 18px; }
.municipality-faq summary { padding: 12px; font-size: 13px; }
.municipality-faq details p { padding: 0 12px 13px; font-size: 12px; }
.page-estaciones .seo-links { gap: 7px; }
.page-estaciones .seo-links a { min-height: 36px; padding: 8px 12px; font-size: 12px; }
}
/* Lenguaje visual compartido con la ficha de estación */
.page-estaciones .section-kicker,
.municipality-list__eyebrow {
display: flex;
width: fit-content;
min-height: 30px;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
padding: 6px 14px;
border: 1px solid rgba(29,78,216,.08);
border-radius: 12px;
background: rgba(29,78,216,.08);
color: #5f6b7a;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
box-sizing: border-box;
}
.page-estaciones .municipality-overview,
.page-estaciones .municipality-list,
.page-estaciones .poblaciones,
.page-estaciones .municipality-faq,
.page-estaciones .seo-links {
border: 1px solid rgba(16,58,97,.06);
border-radius: 28px;
background: #fff;
box-shadow: 4px 2px 20px #103a6117;
}
.page-estaciones .municipality-overview { padding: 24px 28px 18px; }
.page-estaciones .municipality-list { padding: 28px; }
.municipality-list__header {
position: relative;
display: block;
min-height: 0;
margin-bottom: 18px;
text-align: center;
}
.municipality-list__header h2 {
font-size: 24px;
text-align: center;
}
.municipality-list__header p {
margin: 6px auto 0;
text-align: center;
}
.municipality-list__order {
position: absolute;
right: 0;
bottom: 0;
}
.municipality-station-card,
.municipality-station-card--best {
border-radius: 18px;
background: #f8fbfe;
border-color: rgba(37,128,206,.08);
}
.page-estaciones .poblaciones,
.page-estaciones .municipality-faq,
.page-estaciones .seo-links { padding: 28px 28px 30px; }
.page-estaciones .poblaciones h2,
.page-estaciones .municipality-faq h2,
.page-estaciones .seo-links h2 {
font-size: 24px;
text-align: center;
}
.page-estaciones .poblaciones > p {
max-width: 760px;
margin: 12px auto 20px;
font-size: 15px;
line-height: 1.65;
text-align: center;
}
.municipality-faq__items {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 16px;
margin-top: 20px;
}
.municipality-faq details {
border-radius: 18px;
border-color: rgba(37,128,206,.08);
background: #f8fbfe;
}
.municipality-faq details:last-child:nth-child(odd) { grid-column: 1 / -1; }
.municipality-faq summary { padding: 16px 18px; font-size: 15px; }
.municipality-faq details p { padding: 0 18px 17px; font-size: 14px; line-height: 1.6; }
.page-estaciones .seo-links {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
}
.page-estaciones .seo-links .section-kicker,
.page-estaciones .seo-links h2 { grid-column: 1 / -1; }
.page-estaciones .seo-links h2 { margin-bottom: 8px; }
.page-estaciones .seo-links a {
min-height: 54px;
justify-content: center;
padding: 14px 16px;
border-radius: 18px;
border-color: rgba(30,79,143,.08);
background: #eef4ff;
color: #1e4f8f;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.poblaciones__links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.poblaciones__links .poblacion {
display: flex;
min-height: 54px;
align-items: center;
justify-content: center;
padding: 14px 16px;
border: 1px solid rgba(30,79,143,.08);
border-radius: 18px;
background: #eef4ff;
color: #1e4f8f;
font-size: 14px;
font-weight: 700;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
@media (max-width: 700px) {
.page-estaciones .section-kicker,
.municipality-list__eyebrow {
min-height: 28px;
margin-bottom: 14px;
padding: 6px 12px;
font-size: 10px;
}
.page-estaciones .municipality-overview,
.page-estaciones .municipality-list,
.page-estaciones .poblaciones,
.page-estaciones .municipality-faq,
.page-estaciones .seo-links { border-radius: 22px; }
.page-estaciones .municipality-overview { padding: 16px 14px 14px; }
.page-estaciones .municipality-list,
.page-estaciones .poblaciones,
.page-estaciones .municipality-faq,
.page-estaciones .seo-links { padding: 20px 16px 22px; }
.municipality-list__header { margin-bottom: 16px; }
.municipality-list__header h2,
.page-estaciones .poblaciones h2,
.page-estaciones .municipality-faq h2,
.page-estaciones .seo-links h2 { font-size: 21px; }
.municipality-list__header p { font-size: 12px; }
.municipality-faq__items,
.page-estaciones .seo-links,
.poblaciones__links { grid-template-columns: 1fr; gap: 12px; }
.municipality-faq details:last-child:nth-child(odd),
.page-estaciones .seo-links .section-kicker,
.page-estaciones .seo-links h2 { grid-column: 1; }
.page-estaciones .seo-links a,
.poblaciones__links .poblacion { min-height: 50px; border-radius: 16px; font-size: 13px; }
}
/* Acciones de cada estación: una sola barra, como en la ficha */
.municipality-summary__average {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.municipality-delta {
min-width: 98px;
min-height: 34px;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 0 8px;
border-radius: 12px;
text-align: center;
box-sizing: border-box;
}
.municipality-delta strong { font-size: 10px; line-height: 1.05; }
.municipality-delta small { font-size: 8px; line-height: 1.05; }
.municipality-station-card__actions {
display: grid;
grid-template-columns: 48px 48px minmax(72px,1fr);
width: 174px;
gap: 0;
overflow: hidden;
border: 1px solid rgba(16,58,97,.09);
border-radius: 12px;
background: #fff;
box-shadow: 0 5px 14px rgba(16,58,97,.045);
}
.municipality-station-card__actions a,
.municipality-station-card__detail {
width: auto;
min-width: 0;
min-height: 34px;
padding: 0 7px;
border: 0 !important;
border-radius: 0;
background: transparent;
font-size: 10px;
}
.municipality-station-card__actions a + a { border-left: 1px solid rgba(16,58,97,.08) !important; }
.municipality-station-card__actions a:hover { background: rgba(16,58,97,.04); }
.municipality-station-card__detail {
background: #eef4ff !important;
color: #1e4f8f !important;
}
@media (max-width: 700px) {
.municipality-station-card__footer {
grid-template-columns: 98px minmax(0,1fr);
gap: 6px;
}
.municipality-delta { width: 98px; padding: 0 5px; }
.municipality-station-card__actions { width: 100%; }
.municipality-station-card__actions { grid-template-columns: 46px 46px minmax(66px,1fr); }
.municipality-station-card__actions a,
.municipality-station-card__detail { padding: 0 4px; font-size: 9.5px; }
.municipality-station-card__actions .municipality-action--waze svg { width: 24px; height: 24px; }
.municipality-station-card__actions .municipality-action--maps svg { width: 21px; height: 23px; }
}
/* Acciones separadas: conservar iconos grandes sin barra agrupada */
.municipality-station-card__actions {
gap: 6px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.municipality-station-card__actions a,
.municipality-station-card__detail {
border: 1px solid rgba(16,58,97,.09) !important;
border-radius: 11px;
background: #fff;
box-shadow: 0 4px 12px rgba(16,58,97,.04);
}
.municipality-station-card__actions a + a { border-left: 1px solid rgba(16,58,97,.09) !important; }
.municipality-station-card__detail {
background: #eef4ff !important;
border-color: rgba(30,79,143,.10) !important;
}
@media (max-width: 700px) {
.municipality-station-card__actions { gap: 5px; }
.municipality-station-card__actions a,
.municipality-station-card__detail { border-radius: 10px; }
}
/* Estaciones del radio: bloque secundario, compacto y ordenado por distancia. */
.municipality-list--nearby { margin-top: 24px; }
.municipality-list--nearby .municipality-list__header { margin-bottom: 18px; }
.municipality-list--nearby .municipality-list__items {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.municipality-list--nearby .municipality-station-card__place {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
}
.municipality-station-card__distance {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-height: 22px;
padding: 0 8px;
border: 1px solid rgba(29,78,216,.08);
border-radius: 999px;
background: #eaf2ff;
color: #1d4ed8;
font-size: 10px;
line-height: 1;
font-weight: 800;
white-space: nowrap;
}
.municipality-station-card--hidden { display: none; }
.municipality-list__more {
display: block;
min-height: 38px;
margin: 18px auto 0;
padding: 0 18px;
border: 1px solid #dce6ef;
border-radius: 11px;
background: #fff;
color: #425466;
font: 700 12px/1 Verdana,Arial,sans-serif;
cursor: pointer;
}
.municipality-list__more:hover { background: #f8fbfe; border-color: #c9d8e6; }
@media (max-width: 700px) {
.municipality-list--nearby { margin-top: 18px; }
.municipality-list--nearby .municipality-list__items { grid-template-columns: 1fr; gap: 8px; }
.municipality-station-card__distance { min-height: 19px; padding: 0 6px; font-size: 8px; }
}
/* En escritorio, ambos listados comparten la misma cuadrícula y tarjeta. */
@media (min-width: 701px) {
.municipality-list .municipality-list__items,
.municipality-list--nearby .municipality-list__items {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
.municipality-list .municipality-station-card,
.municipality-list .municipality-station-card--best {
grid-template-columns: minmax(0,1fr) 126px;
grid-template-areas: "identity price" "footer footer";
min-height: 138px;
gap: 9px 10px;
padding: 13px 14px 11px;
}
.municipality-list .municipality-station-card__identity { gap: 10px; }
.municipality-list .municipality-station-card__logo {
flex-basis: 48px;
width: 48px;
height: 48px;
border-radius: 13px;
}
.municipality-list .municipality-station-card__logo img { width: 38px; height: 38px; }
.municipality-list .municipality-station-card__name-row h3 { font-size: 15px; }
.municipality-list .municipality-station-card__address { font-size: 11px; }
.municipality-list .municipality-price__value { font-size: 27px; }
.municipality-list .municipality-price__unit { font-size: 10px; }
.municipality-list .municipality-station-card__footer {
justify-content: space-between;
padding-top: 8px;
border-top: 1px solid rgba(16,58,97,.06);
}
.municipality-list .municipality-station-card__actions {
grid-template-columns: 34px 34px 64px;
width: 140px;
gap: 4px;
}
.municipality-list .municipality-station-card__actions a,
.municipality-list .municipality-station-card__detail {
width: auto;
min-height: 31px;
padding: 0 4px;
font-size: 9px;
}
.municipality-list .municipality-station-card__actions .municipality-action--waze svg { width: 25px; height: 25px; }
.municipality-list .municipality-station-card__actions .municipality-action--maps svg { width: 22px; height: 24px; }
}
/* Detalles compartidos con la ficha individual. */
.page-estaciones .breadCrumb {
padding: 4px 6px;
font-size: 14px;
line-height: 20px;
overflow-x: auto;
overflow-y: hidden;
text-overflow: clip;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.page-estaciones .breadCrumb::-webkit-scrollbar { display: none; }
.page-estaciones .breadCrumb .breadcrumb-home-icon {
width: 17px;
height: 17px;
margin-left: 0;
margin-right: 1px;
vertical-align: -3px;
}
.municipality-station-card__brand {
display: flex;
flex: 0 0 58px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.municipality-station-card__brand .municipality-station-card__logo { flex: 0 0 auto; }
.municipality-station-card__brand .municipality-station-card__status,
.municipality-station-card__brand .municipality-station-card__status.abierto,
.municipality-station-card__brand .municipality-station-card__status.cerrado {
display: block;
width: auto;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-size: 9px;
font-weight: 700;
line-height: 1;
text-align: center;
filter: none;
}
.municipality-station-card__status.abierto {
color: #087a55;
}
.municipality-station-card__status.cerrado {
color: #b4233f;
}
@media (max-width: 700px) {
.municipality-station-card__brand { flex-basis: 44px; gap: 3px; }
.municipality-station-card__brand .municipality-station-card__status,
.municipality-station-card__brand .municipality-station-card__status.abierto,
.municipality-station-card__brand .municipality-station-card__status.cerrado { font-size: 8px; }
.municipality-controls {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 12px 0 11px;
}
.municipality-controls__title {
display: block;
min-height: 0;
margin: 0 2px;
color: #526476;
font-size: 10px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.municipality-controls #combustible-form {
display: grid;
grid-column: 1;
grid-row: auto;
grid-template-columns: repeat(2,minmax(0,1fr));
width: 100%;
gap: 6px;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link) {
width: 100%;
min-height: 38px;
margin: 0;
padding: 0 8px;
border-radius: 12px;
font-size: 11px;
box-sizing: border-box;
}
.municipality-controls__brand {
display: grid;
grid-template-columns: 1fr;
justify-self: stretch;
width: 100%;
max-width: none;
min-height: 0;
gap: 6px;
padding: 2px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-sizing: border-box;
}
.municipality-controls__brand label {
margin: 0 2px;
color: #526476;
font-size: 10px;
font-weight: 800;
letter-spacing: .07em;
}
.municipality-controls__brand select {
width: 100%;
min-width: 0;
height: 42px;
padding: 0 14px;
border: 1px solid #dce6ef;
border-radius: 12px;
background: #f8fafc;
color: #425466;
font-size: 12px;
font-weight: 700;
box-shadow: 0 3px 10px rgba(16,58,97,.035);
box-sizing: border-box;
}
.page-estaciones .municipality-controls__brand #marcaSelect {
display: block;
float: none;
width: 100%;
max-width: none;
height: 42px;
margin: 0;
padding: 0 14px;
border: 1px solid #dce6ef;
border-radius: 12px;
background: #f8fafc;
color: #425466;
font-size: 12px;
font-weight: 700;
}
}
/* Shared PT/FR/IT station pages: keep the visual contract aligned with ES. */
.shared-estaciones-page > .top {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 0;
padding: 20px 22px 14px;
border-bottom: 0;
border-radius: 20px 20px 0 0;
box-shadow: none;
}
.shared-estaciones-page > .top .top-head { display: contents; }
.shared-estaciones-page > .top .top-head-copy { order: 1; }
.shared-estaciones-page > .top .top-head-actions { order: 4; width: 100%; }
.shared-estaciones-page > .top .media-card,
.shared-estaciones-page > .top .ahorro { display: none; }
.shared-estaciones-page .shared-mobile-summary {
order: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0;
padding: 9px 12px;
border: 1px solid #d3e5f3;
border-radius: 10px;
background: #f4f9fd;
color: #52677a;
font-size: 12px;
line-height: 1.3;
}
.shared-estaciones-page .shared-mobile-summary strong { color: #173b55; font-size: 14px; }
.shared-estaciones-page > .top > #combustible-form {
order: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 7px;
margin: 0;
padding: 0;
}
.shared-estaciones-page > .top > #combustible-form :is(label, a.fuel-option-link) {
position: relative;
display: flex;
width: 100%;
min-height: 40px;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 7px;
border: 1px solid #dce6ef;
border-radius: 12px;
background: #f8fafc;
color: #425466;
font-size: 11px;
font-weight: 700;
line-height: 1.15;
text-align: center;
box-sizing: border-box;
}
.shared-estaciones-page > .top > #combustible-form input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.shared-estaciones-page > .top > #combustible-form :is(label:has(input:checked), a.fuel-option-link[aria-current="page"]) {
border-color: #7eb8ff;
background: #eaf2ff;
color: #174ea6;
box-shadow: 0 0 0 2px rgba(37,128,206,.07);
}
.shared-estaciones-page > .top .brand-filter {
display: flex;
min-height: 42px;
align-items: center;
gap: 10px;
padding: 0 8px 0 12px;
border: 1px solid #dce6ef;
border-radius: 12px;
background: #f8fafc;
box-sizing: border-box;
}
.shared-estaciones-page > .top .brand-filter__label {
color: #607284;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.shared-estaciones-page > .top .brand-filter #marcaSelect {
flex: 1;
width: auto;
min-width: 0;
height: 38px;
margin: 0;
border: 0;
background-color: transparent;
color: #273b4d;
font-size: 12px;
font-weight: 700;
}
.shared-estaciones-page > .top + .municipality-list:not(.municipality-list--nearby) {
margin-top: 0;
padding-top: 4px;
border-top: 0;
border-radius: 0 0 20px 20px;
}
.shared-estaciones-page > .municipality-list:not(.municipality-list--nearby) .municipality-list__title {
display: none;
}
.shared-estaciones-page > .municipality-list:not(.municipality-list--nearby) .municipality-list__header {
margin-bottom: 8px;
}
@media (max-width: 700px) {
.shared-estaciones-page > .top {
gap: 8px;
padding: 14px 12px 10px;
border-radius: 18px 18px 0 0;
}
.shared-estaciones-page > .top .top-head-copy h1 {
margin: 0;
padding: 0;
font-size: 25px;
line-height: 1.08;
letter-spacing: -.025em;
}
.shared-estaciones-page > .top .page-intro { display: none; }
.shared-estaciones-page .shared-mobile-summary {
padding: 8px 10px;
font-size: 10px;
}
.shared-estaciones-page .shared-mobile-summary strong { font-size: 12px; }
.shared-estaciones-page > .top > #combustible-form { gap: 6px; }
.shared-estaciones-page > .top > #combustible-form :is(label, a.fuel-option-link) {
min-height: 38px;
padding: 0 5px;
font-size: 10px;
}
.shared-estaciones-page > .top + .municipality-list:not(.municipality-list--nearby) {
padding-top: 2px;
border-radius: 0 0 18px 18px;
}
}
/* Municipio + combustible: acciones del mejor precio y estado de actualización. */
.municipality-summary__stations > a,
.municipality-summary__stations > span {
display: inline-flex;
min-height: 22px;
align-items: center;
padding: 0 8px;
border: 1px solid #d8e6de;
border-radius: 999px;
background: rgba(255,255,255,.82);
color: #365269;
font-size: 9px;
font-weight: 800;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.municipality-summary__stations > a:hover { border-color:#97cdb0; color:#087d55; text-decoration:none; }
.municipality-summary__stations > a:focus-visible { outline:3px solid rgba(34,182,111,.22); outline-offset:2px; }
.municipality-summary__actions {
display:flex;
flex:0 0 auto;
align-items:center;
gap:7px;
margin-left:auto;
}
.municipality-summary__actions a {
display:inline-flex;
min-height:32px;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:0 11px;
border:1px solid #d6e2ec;
border-radius:10px;
background:#fff;
color:#1769aa;
font-size:11px;
font-weight:800;
text-decoration:none;
}
.municipality-summary__actions a:first-child { border-color:#b9d8c8; color:#087d55; }
.municipality-summary__actions a:hover { background:#f7fbfe; text-decoration:none; }
.municipality-summary__tank-saving {
margin-left:5px;
padding-left:8px;
border-left:1px solid #d7e0e8;
color:#64748b;
font-size:11px;
font-weight:650;
}
.municipality-summary__tank-saving strong { color:#087d55 !important; }
.municipality-price__updated--stale {
justify-self:center;
width:max-content;
max-width:100%;
padding:3px 6px !important;
border-radius:999px;
background:#fff4df;
color:#925c13 !important;
font-weight:800 !important;
}
@media (max-width:700px) {
.municipality-summary__top { display:block; }
.municipality-summary__actions { width:100%; margin:8px 0 0; }
.municipality-summary__actions a { flex:1 1 0; min-height:34px; }
.municipality-summary__range-head .municipality-summary__saving { display:flex; flex-wrap:wrap; }
.municipality-summary__tank-saving { margin-left:0; }
}
/* FAQ: mismo componente nativo que la ficha de estación. */
.municipality-faq .faq-list {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
max-width: 800px;
margin: 16px auto 0;
}
.municipality-faq .faq-item,
.municipality-faq .faq-item:last-child:nth-child(odd) {
grid-column: auto;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid rgba(37,128,206,.10);
border-radius: 15px;
background: #f8fbfe;
box-sizing: border-box;
}
.municipality-faq .faq-item summary {
display: flex;
min-height: 52px;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 15px;
color: #20364d;
cursor: pointer;
list-style: none;
box-sizing: border-box;
}
.municipality-faq .faq-item summary::-webkit-details-marker { display: none; }
.municipality-faq .faq-question {
font-size: 15px;
line-height: 1.35;
font-weight: 650;
}
.municipality-faq .faq-item summary svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: #2563eb;
transition: transform .18s ease;
}
.municipality-faq .faq-item[open] summary svg { transform: rotate(180deg); }
.municipality-faq .faq-answer { padding: 0 15px 14px; }
.municipality-faq .faq-answer p {
margin: 0;
padding: 0;
color: #425466;
font-size: 14px;
line-height: 1.55;
}
@media (max-width: 700px) {
.municipality-faq .faq-list { gap: 8px; margin-top: 16px; }
.municipality-faq .faq-item summary { min-height: 50px; padding: 11px 13px; }
.municipality-faq .faq-question { font-size: 14px; }
.municipality-faq .faq-answer { padding: 0 13px 13px; }
.municipality-faq .faq-answer p { font-size: 13px; }
}
/* Escala municipal: mínimo, media del municipio y máximo. */
.municipality-summary__top { padding-bottom: 9px; }
.municipality-summary__range {
padding-top: 9px;
border-top: 1px solid rgba(16,58,97,.07);
}
.municipality-summary__range-head {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 14px;
}
.municipality-summary__range-title { margin: 0; font-size: 12px; }
.municipality-summary__range-head .municipality-summary__saving {
display: flex;
align-items: baseline;
gap: 4px;
margin: 0;
color: #40576d;
font-size: 13px;
font-weight: 650;
line-height: 1.2;
}
.municipality-summary__range-head .municipality-summary__saving span { color: #64748b; }
.municipality-summary__range-head .municipality-summary__saving strong {
color: #20364d;
font-size: 14px;
font-weight: 850;
}
.municipality-summary__track-wrap { padding-top: 18px; }
.municipality-summary__track {
height: 8px;
overflow: visible;
background: linear-gradient(90deg,#b8e8cc 0%,#dcebe3 42%,#f0dfc4 72%,#efbec3 100%);
}
.municipality-summary__average-marker {
position: absolute;
top: 50%;
left: var(--average-position);
z-index: 3;
width: 13px;
height: 13px;
transform: translate(-50%,-50%);
border: 3px solid #fff;
border-radius: 50%;
background: #2563eb;
box-shadow: 0 1px 6px rgba(37,99,235,.28);
}
.municipality-summary__scale-labels {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
align-items: start;
margin-top: 10px;
}
.municipality-summary__scale-labels > span {
display: flex;
flex-direction: column;
gap: 3px;
}
.municipality-summary__scale-labels small {
color: #718096;
font-size: 9px;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.15;
text-transform: uppercase;
}
.municipality-summary__scale-labels strong {
color: #20364d;
font-size: 15px;
line-height: 1.1;
white-space: nowrap;
}
.municipality-summary__scale-average { align-items: center; text-align: center; }
.municipality-summary__scale-average small,
.municipality-summary__scale-average strong { color: #2563eb; }
.municipality-summary__scale-max { align-items: flex-end; text-align: right; }
.municipality-summary__province-context {
margin: 13px 0 0;
padding-top: 11px;
border-top: 1px solid rgba(16,58,97,.07);
color: #607284;
font-size: 12px;
line-height: 1.45;
}
.municipality-summary__province-context strong { color: #334e68; font-weight: 750; }
@media (max-width: 700px) {
.municipality-summary__range-head {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.municipality-summary__range-title { max-width: none; font-size: 10px; }
.municipality-summary__range-head .municipality-summary__saving {
max-width: none;
font-size: 12px;
text-align: left;
white-space: normal;
}
.municipality-summary__range-head .municipality-summary__saving strong { font-size: 13px; }
.municipality-summary__track-wrap { padding-top: 15px; }
.municipality-summary__scale-labels small { font-size: 8px; letter-spacing: .035em; }
.municipality-summary__scale-labels strong { font-size: 12px; }
.municipality-summary__province-context { margin-top: 10px; padding-top: 9px; font-size: 11px; }
}
/* Listado municipal: cabecera compacta y jerarquía refinada en las tarjetas. */
.municipality-list__header {
display: block;
margin-bottom: 14px;
}
.municipality-list__heading { text-align: center; }
.municipality-list__heading .municipality-list__eyebrow { margin-bottom: 10px; }
.municipality-list__header h2 {
font-size: 23px;
line-height: 1.15;
letter-spacing: -.025em;
}
.municipality-list__meta {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 5px;
}
.municipality-list__meta p { margin: 0; }
.municipality-list__order {
position: static;
display: inline-flex;
min-height: 24px;
align-items: center;
padding: 0 9px;
font-size: 10px;
}
@media (min-width: 701px) {
.municipality-list .municipality-station-card,
.municipality-list .municipality-station-card--best {
min-height: 132px;
gap: 8px 12px;
padding: 14px 15px 11px;
}
.municipality-list .municipality-station-card__identity {
align-self: start;
align-items: flex-start;
padding-top: 1px;
}
.municipality-list .municipality-station-card__name-row h3 {
font-size: 16px;
line-height: 1.18;
}
.municipality-list .municipality-station-card__address {
margin-top: 6px;
color: #4f6072;
font-size: 11.5px;
line-height: 1.3;
}
.municipality-list .municipality-station-card__place {
margin-top: 4px;
color: #75869a;
font-size: 9.5px;
}
.municipality-list .municipality-price {
align-self: center;
padding-top: 0;
}
.municipality-list .municipality-price__value { font-size: 30px; }
.municipality-list .municipality-price__updated {
padding-top: 5px;
font-size: 8.5px;
font-weight: 650;
}
.municipality-list .municipality-station-card__footer { padding-top: 9px; }
}
@media (max-width: 700px) {
.municipality-list__header { margin-bottom: 12px; padding: 0; }
.municipality-list__heading .municipality-list__eyebrow { margin-bottom: 9px; }
.municipality-list__header h2 { font-size: 20px; }
.municipality-list__meta {
flex-wrap: wrap;
gap: 5px 7px;
margin-top: 5px;
}
.municipality-list__meta p { font-size: 11px; }
.municipality-list__order {
min-height: 0;
padding: 0;
border: 0;
background: transparent;
color: #64748b;
font-size: 10px;
}
.municipality-list__order::before { content: "·"; margin-right: 7px; }
.municipality-station-card__name-row h3 {
color: #20364d;
font-size: 15px;
line-height: 1.18;
}
.municipality-station-card__address {
margin-top: 5px;
color: #536477;
font-size: 11px;
line-height: 1.3;
}
.municipality-station-card__place { margin-top: 4px; color: #77879a; font-size: 9px; }
.municipality-price { align-self: center; padding-top: 0; }
.municipality-price__value { font-size: 26px; }
.municipality-price__updated { padding-top: 5px; font-size: 8.5px; font-weight: 650; }
}
/* Breadcrumb de escritorio: mismas proporciones y posición que la ficha. */
@media (min-width: 1360px) {
.page-estaciones .breadCrumb {
padding: 25px 0 0 2.5%;
font-size: 16px;
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.page-estaciones .breadCrumb .breadcrumb-home-icon {
width: 21px;
height: 21px;
vertical-align: -5px;
}
}
/* Ajustes finales validados en escritorio, tableta y dispositivos con ratón. */
@media (max-width: 1359px) {
#qrSidebar { display: none; }
}
#qrSidebar .qr-image-shell {
width: 120px;
height: 122px;
margin: 0 auto 10px;
overflow: hidden;
border-radius: 4px;
background: #fff;
}
#qrSidebar .qr-image-shell.is-loading {
background: linear-gradient(100deg, #e4e4e4 30%, #f7f7f7 50%, #e4e4e4 70%);
background-size: 220% 100%;
animation: qr-skeleton 1.25s ease-in-out infinite;
}
#qrSidebar .qr-image-shell.is-loaded {
animation: none;
background: #fff;
}
#qrSidebar .qr-image-shell .qr-image {
width: 100%;
height: 100%;
margin: 0;
display: block;
border-radius: 4px;
background: #fff;
}
#qrSidebar .qr-image-shell .qr-image[hidden] {
display: none !important;
}
@keyframes qr-skeleton {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
#qrSidebar .qr-image-shell.is-loading { animation: none; }
}
@media (min-width: 701px) and (max-width: 900px) {
.municipality-list .municipality-list__items,
.municipality-list--nearby .municipality-list__items {
grid-template-columns: 1fr;
}
}
.municipality-station-card,
.municipality-station-card--best { transition: none; }
.municipality-station-card:hover,
.municipality-station-card--best:hover {
border-color: rgba(37,128,206,.08);
background: #f8fbfe;
box-shadow: none;
transform: none;
}
@media (hover: hover) and (pointer: fine) {
.municipality-list__items .municipality-station-card,
.municipality-list__items .municipality-station-card--best,
.municipality-list__items .municipality-station-card:hover,
.municipality-list__items .municipality-station-card--best:hover {
border-color: rgba(37,128,206,.08) !important;
background: #f8fbfe !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
}
}
@media (min-width: 701px) {
.municipality-controls__brand {
min-height: 42px;
gap: 0;
padding: 0 6px 0 12px;
overflow: hidden;
}
.municipality-controls__brand label {
flex: 0 0 auto;
padding-right: 11px;
font-size: 10px;
letter-spacing: .06em;
}
.page-estaciones .municipality-controls__brand #marcaSelect {
display: block;
float: none;
width: 158px;
min-width: 158px;
height: 34px;
margin: 0;
padding: 0 28px 0 12px;
border: 0;
border-left: 1px solid #dce6ef;
border-radius: 0;
background-color: transparent;
color: #425466;
font-family: inherit;
font-size: 12px;
font-weight: 700;
box-sizing: border-box;
}
}
/* Breadcrumb móvil compartido: misma paleta que el ranking municipal. */
@media (max-width:1359px) {
.page-estaciones .breadCrumb { background:#eef3f8; color:#53677a; }
.page-estaciones .breadCrumb > a,
.page-estaciones .breadCrumb > a:is(:hover,:focus,:active,:visited),
.page-estaciones .breadCrumb .breadcrumb-trail a,
.page-estaciones .breadCrumb .breadcrumb-trail a:is(:hover,:focus,:active,:visited) { color:#53677a; }
.page-estaciones .breadCrumb strong { color:#20364d; }
.page-estaciones .breadCrumb .breadcrumb-separator { color:#91a2b3; }
.page-estaciones .breadCrumb .compact-zone-switcher > summary { color:#1769aa; background:transparent; border-left-color:#d5e0eb; }
.page-estaciones .breadCrumb .compact-zone-switcher > summary:hover,
.page-estaciones .breadCrumb .compact-zone-switcher[open] > summary { background:#e0ebf5; }
.page-estaciones .breadCrumb a:focus-visible { outline:2px solid #1769aa; outline-offset:2px; }
}
/* Real destinations remain usable without JavaScript. */
#combustible-form a.fuel-option-link { text-decoration: none; }
#combustible-form a.fuel-option-link:focus-visible { outline: 2px solid #174ea6; outline-offset: 3px; }
/* Breadcrumb rhythm: shared by municipality, brand and fuel pages in every locale. */
body .page-estaciones { --breadcrumb-gap:16px; padding-top:var(--breadcrumb-gap); }
body .page-estaciones > .breadCrumb {
box-sizing:border-box;
height:34px;
min-height:34px;
line-height:34px;
margin-top:0 !important;
margin-bottom:var(--breadcrumb-gap) !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
body .page-estaciones > .breadCrumb + .top,
body .page-estaciones > .breadCrumb + #municipality-fuel-results {
margin-top:0 !important;
}
body .page-estaciones > .breadCrumb + #municipality-fuel-results > .municipality-list:first-of-type {
margin-top:0 !important;
}
@media (max-width:700px) {
body .page-estaciones { --breadcrumb-gap:8px; }
}
/* Context help overlays: no extra document height, including when open. */
.compact-help-icon { position:relative; display:inline-block; vertical-align:baseline; width:18px; padding:0; margin:0 0 0 2px; border:0; background:transparent; color:inherit; font:inherit; line-height:inherit; cursor:pointer; }
.compact-help-icon::after { content:""; position:absolute; inset:-4px; }
.compact-help-icon svg { vertical-align:-2px; }
.compact-help-date { appearance:none; border:0; background:transparent; padding:0; font:inherit; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
.compact-help-icon:focus-visible,.compact-help-date:focus-visible { outline:2px solid #1769aa; outline-offset:3px; }
.compact-help-popover { display:none; box-sizing:border-box; position:fixed; inset:0; margin:auto; width:min(320px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; padding:18px; border:1px solid #cbd8e6; border-radius:12px; background:#fff; color:#18324d; box-shadow:0 12px 48px #17324d40; font:14px/1.5 system-ui,sans-serif; }
.compact-help-popover:popover-open { display:block; }
.compact-help-popover p { margin:0 0 12px; }
.compact-help-popover button { display:block; margin-left:auto; padding:7px 14px; border:1px solid #aec5de; border-radius:6px; color:#123d68; background:#edf5ff; font:inherit; cursor:pointer; }
.municipality-list .compact-help-date { font-family:inherit; font-size:11px; font-weight:400; line-height:1.3; }
/* Date help stays beside its trigger; saving help keeps its existing layout. */
.compact-help-popover--date {
inset:auto; margin:0; padding:14px; width:min(320px,calc(100vw - 24px));
font-size:13px; line-height:1.5; box-shadow:0 6px 24px #17324d26;
}
.compact-help-popover.compact-help-popover--date h2 {
margin:0 0 7px; padding:0; font:700 14px/1.35 system-ui,sans-serif;
color:inherit; text-align:left;
}
.compact-help-popover--date p { margin:0 0 8px; }
.compact-help-popover--date button {
min-height:32px; padding:4px 8px; border:0; background:transparent;
color:#1769aa; font-size:13px; text-decoration:underline; text-underline-offset:3px;
}
.compact-help-popover--date button:focus-visible { outline:2px solid #1769aa; outline-offset:2px; }
.page-estaciones .municipality-list__title {
margin:0;
padding:0 !important;
color:#20364d;
font-size:22px;
font-weight:750;
line-height:1.15;
text-align:left;
}
#municipality-fuel-results {
position:relative;
transition:opacity .14s ease;
}
#municipality-fuel-results[aria-busy="true"] {
opacity:.56;
pointer-events:none;
}
#municipality-fuel-results[aria-busy="true"]::before {
content:attr(data-loading-text);
position:absolute;
display:block;
z-index:20;
top:12px;
left:50%;
transform:translateX(-50%);
width:max-content;
max-width:calc(100% - 24px);
margin:0;
padding:7px 12px;
border-radius:999px;
background:#20364d;
color:#fff;
box-shadow:0 5px 16px rgba(20,43,66,.18);
font-size:13px;
font-weight:700;
}
.page-estaciones .municipality-fuel-context > .municipality-summary {
box-sizing:border-box;
width:var(--page-shell-width, min(100% - 24px, 980px));
max-width:980px;
margin:10px auto 0;
}
.municipality-list__mobile-insight { display:none; }
#data-container,
#municipiosCercanosSentinel {
display:block;
width:0;
height:0;
min-height:0;
margin:0;
padding:0;
overflow:hidden;
}
.municipality-controls__fuel { display:contents; }
.municipality-controls__fuel-scroll { min-width:0; }
@media (min-width:701px) and (max-width:900px) {
.municipality-controls__fuel-scroll { grid-column:1 / -1; grid-row:2; }
}
.municipality-pagination {
display:flex;
width:min(1080px,calc(100% - 32px));
box-sizing:border-box;
align-items:center;
justify-content:space-between;
gap:14px;
margin:14px auto 24px;
padding:13px 16px;
border:1px solid #dbe4ee;
border-radius:14px;
background:#fff;
box-shadow:0 8px 22px rgba(15,44,71,.05);
}
.municipality-pagination__summary { margin:0; color:#607284; font-size:12px; line-height:1.35; }
.municipality-pagination__summary strong { color:#1f3b56; }
.municipality-pagination__links { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.municipality-pagination__links a,
.municipality-pagination__links span {
display:inline-flex;
min-width:36px;
min-height:36px;
box-sizing:border-box;
align-items:center;
justify-content:center;
padding:0 10px;
border:1px solid #d8e3ec;
border-radius:9px;
color:#1769aa;
font-size:12px;
font-weight:750;
text-decoration:none;
}
.municipality-pagination__links a:hover { border-color:#9fc3df; background:#f5f9fc; text-decoration:none; }
.municipality-pagination__links [aria-current="page"] { border-color:#1769aa; background:#1769aa; color:#fff; }
.municipality-pagination__links .pagination-ellipsis { min-width:auto; padding:0 2px; border:0; color:#718096; }
@media (max-width:700px) {
.page-estaciones .municipality-fuel-context > .municipality-summary {
display:none;
}
.municipality-list__mobile-insight {
display:flex;
align-items:baseline;
justify-content:flex-start;
gap:5px;
margin:8px 0 3px;
padding:7px 9px;
border:1px solid #dbeaf6;
border-radius:9px;
background:#f4f9fd;
color:#52677a;
font-size:12px;
line-height:1.25;
white-space:nowrap;
}
.municipality-list__mobile-insight strong { color:#173b55; font-size:13px; }
.municipality-list__mobile-insight .mobile-insight__separator { color:#9eb0bf; }
.page-estaciones .municipality-overview {
margin-bottom:10px;
padding:13px 12px 11px;
}
.page-estaciones .municipality-overview h1 {
font-size:24px;
line-height:1.06;
}
.page-estaciones .municipality-list__title {
font-size:24px;
}
.page-estaciones .municipality-overview .page-intro {
display:-webkit-box;
overflow:hidden;
margin-top:5px;
font-size:13px;
line-height:1.35;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.municipality-summary {
margin-top:8px;
padding:9px 10px 8px;
}
.municipality-summary__top {
display:grid;
grid-template-columns:minmax(0,1fr) 108px;
align-items:center;
gap:8px;
padding-bottom:6px;
}
.municipality-summary__value { font-size:25px; }
.municipality-summary__lead-main { gap:4px 7px; }
.municipality-summary__stations { min-width:0; }
.municipality-summary__stations > a,
.municipality-summary__stations > span {
max-width:100%;
overflow:hidden;
padding:0 6px;
font-size:8px;
text-overflow:ellipsis;
}
.municipality-summary__actions {
display:grid;
grid-template-columns:1fr;
width:108px;
gap:5px;
margin:0;
}
.municipality-summary__actions a {
min-height:29px;
padding:0 7px;
font-size:9px;
}
.municipality-summary__range { padding-top:6px; }
.municipality-summary__range-head { display:block; }
.municipality-summary__range-head .municipality-summary__saving {
display:flex;
flex-wrap:wrap;
gap:2px 4px;
margin:0;
font-size:10px;
line-height:1.2;
}
.municipality-summary__range-head .municipality-summary__saving strong { font-size:11px; }
.municipality-summary__tank-saving {
margin-left:3px;
padding-left:6px;
}
.municipality-summary__track-wrap {
display:block;
padding-top:6px;
}
.municipality-summary__track { height:5px; }
.municipality-summary__scale-labels { margin-top:5px; }
.municipality-summary__scale-labels small { font-size:7px; letter-spacing:.025em; }
.municipality-summary__scale-labels strong { font-size:11px; }
.municipality-summary__province-context { display:none; }
.page-estaciones .municipality-list {
margin-top:4px;
padding:12px 12px 16px;
}
.municipality-list__header { margin-bottom:8px; }
.municipality-list__header .municipality-list__title {
font-size:19px;
line-height:1.12;
}
.municipality-list__header h1.municipality-list__title {
font-size:24px;
line-height:1.06;
}
.municipality-list__meta { margin-top:4px; }
.municipality-controls {
gap:6px;
margin-bottom:8px;
padding:8px 0 10px;
}
.municipality-controls__fuel { display:block; min-width:0; }
.municipality-controls__title {
display:block;
}
.municipality-controls__fuel-scroll {
position:relative;
min-width:0;
}
.municipality-controls #combustible-form {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
width:100%;
gap:6px;
overflow:visible;
padding:1px 0 3px;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link) {
width:100%;
min-width:0;
min-height:36px;
padding:0 5px;
font-size:10.5px;
line-height:1.1;
}
.municipality-controls #combustible-form :is(label, a.fuel-option-link)::before { display:none; }
.municipality-controls__brand {
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:8px;
padding-top:0;
}
.page-estaciones .municipality-controls__brand #marcaSelect {
height:38px;
min-height:38px;
padding:0 11px;
}
.municipality-pagination {
width:calc(100% - 18px);
align-items:stretch;
flex-direction:column;
gap:9px;
margin:10px auto 18px;
padding:11px 12px;
}
.municipality-pagination__summary { text-align:center; }
.municipality-pagination__links { justify-content:center; gap:5px; }
.municipality-pagination__links a,
.municipality-pagination__links span { min-width:34px; min-height:34px; padding:0 8px; font-size:11px; }
}
/* Ritmo vertical uniforme entre los bloques principales. */
#municipality-fuel-results {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:24px;
margin:10px 0 24px;
}
.page-estaciones #municipality-fuel-results > .municipality-summary,
.page-estaciones #municipality-fuel-results > .municipality-list,
.page-estaciones #municipality-fuel-results > .municipality-pagination {
margin:0 auto;
}
#municipality-fuel-secondary {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:24px;
}
.page-estaciones #municipality-fuel-secondary > .municipality-faq,
.page-estaciones #municipality-fuel-secondary > .seo-links {
margin:0 auto;
}
.page-estaciones > .poblaciones,
.page-estaciones > #municipiosCercanosDiv {
margin:0 auto 24px;
}
@media (max-width:700px) {
#municipality-fuel-results {
gap:14px;
margin:4px 0 14px;
}
#municipality-fuel-secondary { gap:14px; }
.page-estaciones > .poblaciones,
.page-estaciones > #municipiosCercanosDiv { margin-bottom:14px; }
}
@media (min-width:901px) {
.shared-estaciones-page .municipality-list--polished .municipality-controls { grid-template-columns:minmax(0,1fr) 240px; }
}
@media (max-width:700px) {
.shared-estaciones-page .municipality-controls #combustible-form :is(label, a.fuel-option-link) { white-space:normal; text-align:center; }
}
/* Scoped to the municipal fuel ranking; shared lists keep their own layout. */
.municipality-polished-page .municipality-fuel-context { display:none; }
.municipality-polished-page #municipality-fuel-results { gap:18px; }
.municipality-list--polished .municipality-list__heading { text-align:left; }
.municipality-list--polished .municipality-list__meta { justify-content:flex-start; }
.municipality-list--polished .municipality-summary { box-sizing:border-box; width:100%; max-width:none; margin:14px 0 16px; padding:14px 16px; box-shadow:none; border-radius:14px; }
.municipality-list--polished .municipality-summary__value { font-size:28px; }
.municipality-list--polished .municipality-summary__saving { flex-wrap:wrap; }
.municipality-list--polished .municipality-summary__province-context { font-size:12px; }
.municipality-list--polished .municipality-controls { gap:10px; }
.municipality-list--polished .municipality-station-card { position:relative; overflow:visible; }
.municipality-list--polished .municipality-station-card__address { font-size:12px; line-height:1.4; }
.municipality-list--polished .municipality-price__updated { font-size:10px; font-weight:400; line-height:1.3; }
.municipality-list--polished .municipality-best-badge { grid-column:1 / -1; justify-self:start; padding:3px 7px; border-radius:6px; color:#087345; background:#eaf8f0; font-size:10px; font-weight:700; }
.municipality-list--polished .municipality-station-card:has(.municipality-best-badge) { border-color:#afd9c1; }
.qr-card--compact summary:focus-visible { outline:3px solid #78b5ed; outline-offset:3px; }
.municipality-polished-page #qrSidebar.qr-card--compact { width:160px; top:106px; transform:none; padding:0; border:1px solid #d7e3f0; border-radius:12px; background:#fff; color:#245682; box-shadow:0 3px 12px #20364d0d; }
.qr-card--compact > summary { padding:13px 10px; font-size:12px; font-weight:700; cursor:pointer; }
.qr-card--compact .qr-body { padding:0 10px 12px; }
@media (min-width:701px) {
.municipality-list--polished .municipality-controls { grid-template-columns:minmax(0,1fr) 200px; }
.municipality-list--polished .municipality-controls__fuel { display:block; min-width:0; }
.municipality-list--polished .municipality-controls__title { margin:0 0 7px; font-size:11px; }
.municipality-list--polished #combustible-form { gap:5px; flex-wrap:wrap; }
.municipality-list--polished #combustible-form :is(label, a.fuel-option-link) { padding:9px 11px; }
.municipality-list--polished .municipality-controls__brand { align-self:end; }
}
@media (max-width:700px) {
.municipality-polished-page #municipality-fuel-results { margin-top:4px; gap:12px; }
.municipality-list--polished .municipality-summary { display:none; }
.municipality-list--polished .municipality-list__header { margin-bottom:6px; }
.municipality-list--polished .municipality-list__meta { gap:4px 7px; }
.municipality-list--polished .municipality-list__meta p { font-size:11px; }
.municipality-list--polished .municipality-list__mobile-insight { display:flex; flex-wrap:wrap; gap:3px 6px; margin:7px 0; padding:7px 9px; font-size:11px; line-height:1.4; }
.municipality-list--polished .municipality-list__mobile-insight strong { font-size:12px; }
.municipality-list--polished .municipality-controls { padding:8px 0; margin-bottom:10px; gap:8px; }
.municipality-list--polished .municipality-controls__title { margin:0 0 4px; font-size:10px; }
.municipality-list--polished .municipality-controls #combustible-form { gap:5px; }
.municipality-list--polished .municipality-controls #combustible-form :is(label, a.fuel-option-link) { min-height:36px; padding:7px 4px; }
.municipality-list--polished .municipality-controls__brand { margin:0; }
.municipality-list--polished .municipality-controls__brand #marcaSelect { min-height:36px; }
.municipality-list--polished .municipality-station-card { gap:7px 9px; }
.municipality-list--polished .municipality-station-card__footer { padding-top:7px; }
.municipality-list--polished .municipality-price__updated { max-width:108px; }
}
.municipality-list--polished .municipality-best-badge { display:inline-block; margin-top:5px; }
.municipality-list--polished .municipality-list__header { min-height:0; }
.municipality-polished-page #qrSidebar.qr-card--compact p { font-size:12px; padding:0; }
@media (min-width:701px) {
.municipality-list--polished #combustible-form :is(label, a.fuel-option-link) { min-height:38px; box-sizing:border-box; }
}
/* La referencia de precio sigue legible junto a los accesos compactos. */
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-station-card__actions a:focus-visible { outline:3px solid #78b5ed; outline-offset:3px; }
/* Ritmo compacto y referencias compartidas para comparar de un vistazo. */
.municipality-list--polished .municipality-comparison-note { margin:0 0 10px; color:#607284; font-size:11px; line-height:1.4; }
.municipality-list--polished .municipality-comparison-note strong { font-weight:600; }
.municipality-list--polished .municipality-station-card__address { overflow-wrap:normal; }
.municipality-list--polished .municipality-price__updated { max-width:100px; font-size:11px; }
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-station-card__actions .municipality-station-card__detail { font-size:11px; }
@media (min-width:701px) {
.municipality-list--polished .municipality-summary { margin:10px 0 12px; padding:11px 14px; }
.municipality-list--polished .municipality-summary__value { font-size:26px; }
.municipality-list--polished .municipality-summary__range { margin-top:7px; padding-top:7px; }
.municipality-list--polished .municipality-summary__track-wrap { padding-top:11px; }
.municipality-list--polished .municipality-summary__track { height:5px; }
.municipality-list--polished .municipality-summary__scale-labels { margin-top:6px; }
.municipality-list--polished .municipality-summary__scale-labels strong { font-size:13px; }
.municipality-list--polished .municipality-summary__province-context { margin-top:8px; padding-top:7px; font-size:11px; }
.municipality-list--polished .municipality-station-card { grid-template-columns:minmax(0,1fr) 106px; }
.municipality-list--polished .municipality-price { justify-content:end; }
}
@media (max-width:700px) {
.municipality-list--polished .municipality-comparison-note { margin-bottom:9px; font-size:10.5px; }
.municipality-list--polished .municipality-station-card { grid-template-columns:minmax(0,1fr) 94px; }
.municipality-list--polished .municipality-price { justify-content:end; }
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-station-card__footer { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-station-card__actions { width:auto; grid-template-columns:40px 40px 72px; }
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-station-card__actions a { min-height:34px; }
}
.municipality-polished-page .page-estaciones .municipality-related { display:block; padding:22px 26px; }
.municipality-polished-page .page-estaciones .municipality-related h2 { text-align:left; font-size:21px; margin-bottom:17px; }
.municipality-related__groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.municipality-related__group { min-width:0; }
.municipality-related__group h3 { margin:0 0 6px; color:#536779; font-size:12px; font-weight:700; }
.municipality-related__group ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; margin:0; padding:0; list-style:none; }
.municipality-polished-page .page-estaciones .municipality-related a { display:flex; box-sizing:border-box; align-items:center; justify-content:flex-start; min-height:36px; margin:0; padding:6px 0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#1769aa; font-size:12px; line-height:1.4; font-weight:600; text-align:left; transform:none; }
.municipality-polished-page .page-estaciones .municipality-related a:hover { text-decoration:underline; text-underline-offset:3px; }
.municipality-related__more { display:flex; flex-wrap:wrap; gap:0 22px; margin-top:14px; padding-top:10px; border-top:1px solid #e8eef3; }
@media (max-width:700px) {
.municipality-polished-page .page-estaciones .municipality-related { padding:18px 16px; }
.municipality-polished-page .page-estaciones .municipality-related h2 { font-size:19px; margin-bottom:14px; }
.municipality-related__groups { grid-template-columns:1fr; gap:14px; }
.municipality-polished-page .page-estaciones .municipality-related a { min-height:40px; }
.municipality-related__more { gap:0 16px; margin-top:12px; padding-top:8px; }
}
.municipality-list--polished .municipality-price { column-gap:3px; }
.municipality-related__group h3 { padding:0; text-align:left; }
@media (min-width:701px) {
.municipality-list--polished .municipality-summary__top { padding-bottom:0; }
.municipality-list--polished .municipality-summary__range { margin-top:5px; padding-top:6px; }
}
/* El aviso antiguo no debe ensanchar las columnas del precio. */
.municipality-list--polished .municipality-price__updated--stale {
box-sizing:border-box;
width:100%;
max-width:100%;
min-width:0;
justify-self:stretch;
margin-top:4px;
padding:3px 4px !important;
}
.municipality-list--polished .municipality-station-card--stale .municipality-price {
grid-template-columns:minmax(0,1fr) max-content;
}
.municipality-list--polished .municipality-station-card--stale .municipality-price__value {
justify-self:end;
}
/* Los precios de más de 15 días requieren un aviso más visible. */
.municipality-list--polished .municipality-price__updated--very-stale {
background:#ffd6d0;
color:#9f241b !important;
}
/* Navegación ligera y acceso al paginado desde el comienzo del listado. */
#municipality-filters { scroll-margin-top:80px; }
#municipality-filters:focus-visible { outline:2px solid #78b5ed; outline-offset:5px; border-radius:8px; }
.municipality-polished-page .municipality-list--polished .municipality-pagination--top { width:100%; max-width:none; margin:0 0 12px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; gap:10px; }
.municipality-pagination--top .municipality-pagination__summary { font-size:11px; }
.municipality-back-to-filters { margin:16px 0 0; padding-top:12px; border-top:1px solid #e8eef3; text-align:right; }
.municipality-back-to-filters a { display:inline-flex; align-items:center; gap:7px; min-height:36px; color:#1769aa; font-size:12px; font-weight:650; text-decoration:none; }
.municipality-back-to-filters a:hover { text-decoration:underline; text-underline-offset:3px; }
.municipality-back-to-filters a:focus-visible { outline:3px solid #78b5ed; outline-offset:3px; border-radius:4px; }
@media (max-width:1359px) {
.municipality-polished-page .page-estaciones > .breadCrumb { background:#eef3f8; color:#53677a; }
.municipality-polished-page .page-estaciones .breadcrumb-trail a,
.municipality-polished-page .page-estaciones .breadcrumb-trail a:visited { color:#53677a; }
.municipality-polished-page .page-estaciones .breadcrumb-trail strong { color:#20364d; }
.municipality-polished-page .page-estaciones .breadcrumb-separator { color:#91a2b3; }
.municipality-polished-page .page-estaciones .compact-zone-switcher > summary { color:#1769aa; background:transparent; border-left-color:#d5e0eb; }
.municipality-polished-page .page-estaciones .compact-zone-switcher > summary:hover,
.municipality-polished-page .page-estaciones .compact-zone-switcher[open] > summary { background:#e0ebf5; }
.municipality-polished-page .page-estaciones .breadcrumb-trail a:focus-visible { outline:2px solid #1769aa; outline-offset:2px; }
}
@media (max-width:700px) {
.municipality-polished-page .municipality-list--polished .municipality-pagination--top { flex-direction:row; justify-content:flex-start; margin-bottom:10px; }
.municipality-pagination--top .municipality-pagination__summary { display:none; }
.municipality-pagination--top .municipality-pagination__links { justify-content:flex-start; gap:5px; }
.municipality-back-to-filters { margin-top:12px; padding-top:9px; }
}
/* Textos auxiliares legibles sin restar protagonismo al precio. */
.municipality-list--polished .municipality-price__updated:not(.municipality-price__updated--stale) { color:#53677a; }
.municipality-list--polished .municipality-station-card__place { font-size:11px; line-height:1.35; color:#53677a; }
.municipality-list--polished .municipality-station-card__brand .municipality-station-card__status { font-size:10px; line-height:1.3; }
.municipality-polished-page .page-estaciones #municipality-fuel-results > .municipality-pagination { width:var(--page-shell-width); max-width:980px; }
/* Cabecera móvil compacta conservando el tamaño de los controles. */
@media (max-width:700px) {
.municipality-list--polished .municipality-list__header { margin-bottom:4px; }
.municipality-list--polished .municipality-list__mobile-insight { margin:5px 0; padding:5px 9px; gap:2px 7px; }
.municipality-list--polished .mobile-insight__saving { flex-basis:auto; }
.municipality-list--polished .mobile-insight__saving::before { content:"·"; margin-right:7px; }
.municipality-list--polished .municipality-controls { padding:6px 0; margin-bottom:7px; gap:6px; }
.municipality-list--polished .municipality-comparison-note { margin-bottom:6px; }
.municipality-polished-page .municipality-list--polished .municipality-pagination--top { margin-bottom:8px; }
}
/* Etiquetas completas sin comprimir los números en pantallas estrechas. */
.municipality-pagination__numbers { display:flex; align-items:center; justify-content:center; gap:6px; }
@media (max-width:700px) {
.municipality-pagination__links { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.municipality-pagination__numbers { grid-column:1 / -1; grid-row:1; gap:5px; }
.municipality-pagination__links > a[rel="prev"] { grid-column:1; grid-row:2; justify-self:start; }
.municipality-pagination__links > a[rel="next"] { grid-column:2; grid-row:2; justify-self:end; }
}
.municipality-polished-page #qrSidebar.qr-card--compact .resaltado { color:#1769aa; }
/* La actualización parcial conserva explícitamente la posición del selector. */
.municipality-polished-page { overflow-anchor:none; }
#municipality-list-start { display:block; height:0; scroll-margin-top:80px; }
/* Selectores de combustible más bajos y con texto más grande. */
.municipality-list--polished .municipality-controls #combustible-form :is(label, a.fuel-option-link) { min-height:32px; padding:5px 10px; font-size:14px; line-height:1.2; }
@media (max-width:700px) {
.municipality-list--polished .municipality-controls #combustible-form :is(label, a.fuel-option-link) { min-height:30px; padding:4px; font-size:13px; line-height:1.2; }
}
/* Keep the two-line comparison and identical action buttons within narrow cards. */
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-delta small {
white-space:normal;
}
@media (max-width:700px) {
:is(.municipality-list--polished, .municipality-list--nearby) .municipality-delta {
width:100%; min-width:0; max-width:98px; padding:3px 5px;
}
}
/* Municipality map action. Reuse loaded coordinates, with no extra lookup. */
.municipality-map-actions{display:flex;justify-content:flex-end;margin-top:10px}
.page-estaciones .municipality-map-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-estaciones .municipality-map-heading .municipality-list__title{flex:1 1 220px;min-width:0}
.page-estaciones a.municipality-map-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:36px;box-sizing:border-box;padding:7px 11px;border:1px solid #c9ddf3;border-radius:10px;background:#f5f9ff;color:#176bc1;font:600 13px/1.2 "Segoe UI",Arial,sans-serif;text-decoration:none;white-space:nowrap}
.page-estaciones a.municipality-map-link:hover{background:#eaf3ff;border-color:#8db8e3;text-decoration:none}
.page-estaciones a.municipality-map-link:focus-visible{outline:2px solid #176bc1;outline-offset:3px}
.page-estaciones .municipality-map-link svg{width:18px;height:18px;flex:0 0 18px}
@media(max-width:600px){.page-estaciones .municipality-map-heading .municipality-map-link{margin-left:auto}.municipality-map-actions{margin-top:8px}}
@media(max-width:700px){
.page-estaciones .municipality-list__header:has(.municipality-map-heading .municipality-map-link){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
.page-estaciones .municipality-map-heading:has(.municipality-map-link){display:contents}
.page-estaciones .municipality-map-heading .municipality-list__title{grid-column:1/-1;grid-row:1;margin:0}
.page-estaciones .municipality-map-heading .municipality-map-link{grid-column:2;grid-row:2;margin:0}
.page-estaciones .municipality-list__header:has(.municipality-map-link) .municipality-list__meta{grid-column:1;grid-row:2;min-width:0;margin:0;gap:2px 6px;justify-content:flex-start}
.page-estaciones a.municipality-map-link{min-height:44px;padding:8px;font-size:12px;gap:5px;border-color:transparent;background:transparent}
.page-estaciones .municipality-overview:has(.municipality-map-actions){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
.page-estaciones .municipality-overview>h1,.page-estaciones .municipality-overview>.brand-heading{grid-column:1/-1}
.page-estaciones .municipality-overview .page-intro{grid-column:1;min-width:0;margin-bottom:0}
.page-estaciones .municipality-map-actions{grid-column:2;margin:0;align-self:center}
}
@media(max-width:700px){
.page-estaciones .municipality-list__header:has(.municipality-map-heading .municipality-map-link){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
.page-estaciones .municipality-map-heading:has(.municipality-map-link){display:contents}
.page-estaciones .municipality-map-heading .municipality-list__title{grid-column:1/-1;grid-row:1;margin:0}
.page-estaciones .municipality-map-heading .municipality-map-link{grid-column:2;grid-row:2;margin:0}
.page-estaciones .municipality-list__header:has(.municipality-map-link) .municipality-list__meta{grid-column:1;grid-row:2;min-width:0;margin:0;gap:2px 6px;justify-content:flex-start}
.page-estaciones a.municipality-map-link{min-height:44px;padding:8px;font-size:12px;gap:5px;border-color:transparent;background:transparent}
.page-estaciones .municipality-overview:has(.municipality-map-actions){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px}
.page-estaciones .municipality-overview>h1,.page-estaciones .municipality-overview>.brand-heading{grid-column:1/-1;grid-row:1}
.page-estaciones .municipality-overview .page-intro{grid-column:1;grid-row:2;min-width:0;margin-bottom:0}
.page-estaciones .municipality-map-actions{grid-column:2;grid-row:2;margin:0;align-self:center}
}
/* Retain existing presentation; add only ordering and a small savings control. */
.page-estaciones .municipality-list--polished .municipality-controls__selectors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;min-width:0;align-items:end}
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand{grid-column:auto;grid-row:auto;min-width:0;margin:0;padding:0;border:0;background:transparent}
.page-estaciones .municipality-list--polished .municipality-controls__sort{display:flex;align-items:center;gap:8px;min-width:0}
.page-estaciones .municipality-list--polished .municipality-controls__sort label{font:600 11px/1.2 "Segoe UI",Arial,sans-serif;color:#536779;white-space:nowrap}
.page-estaciones .municipality-list--polished .municipality-controls__sort select{min-width:0;width:100%;min-height:36px;box-sizing:border-box;padding:7px 24px 7px 8px;border:1px solid #d7e3f0;border-radius:9px;background-color:#f7f9fc;color:#40576c;font:600 11px/1.2 "Segoe UI",Arial,sans-serif}
.municipality-savings{max-width:none;margin:2px 0 10px;padding:8px 0;border:0;background:transparent;text-align:left}
.municipality-savings__heading{display:flex;align-items:baseline;gap:10px;color:#40576c;font:500 12px/1.25 "Segoe UI",Arial,sans-serif}
.municipality-savings__heading label{margin-right:auto;font-weight:600}
.municipality-savings__heading>span{color:#627585;font-size:11px;white-space:nowrap}
.municipality-savings .savings-result{min-width:64px;color:#08794d;font-weight:700;font-size:15px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.municipality-savings input[type=range]{display:block;width:100%;height:24px;margin:2px 0 0;accent-color:#1769aa;cursor:pointer}
.municipality-savings>small{display:block;font:400 10px/1.25 "Segoe UI",Arial,sans-serif;color:#627585}
.municipality-savings input:focus-visible,.municipality-controls__sort select:focus-visible{outline:2px solid #78b5ed;outline-offset:3px}
@media(min-width:1001px){.page-estaciones .municipality-list--polished .municipality-controls{grid-template-columns:minmax(0,1fr) 350px}.page-estaciones .municipality-list--polished .municipality-controls__selectors{grid-column:2;grid-row:1}.page-estaciones .municipality-list--polished .municipality-controls__sort{flex-direction:column;align-items:stretch;gap:5px}.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand{flex-direction:column;align-items:stretch;gap:5px}.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand label{margin:0;padding:0;transform:none;font-size:11px}}
@media(max-width:1000px){.page-estaciones .municipality-list--polished .municipality-controls__selectors{grid-column:1/-1;grid-row:auto}}
@media(max-width:700px){.page-estaciones .municipality-list--polished .municipality-controls__selectors{gap:10px}.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand,.page-estaciones .municipality-list--polished .municipality-controls__sort{display:flex;flex-direction:column;align-items:stretch;gap:5px}.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand label{margin:0;padding:0;transform:none;font-size:10px}.page-estaciones .municipality-list--polished .municipality-controls__selectors #marcaSelect{min-width:0;width:100%;min-height:36px}.municipality-savings{padding:5px 0;margin-bottom:7px}.municipality-savings__heading{font-size:11px;gap:8px}.municipality-savings .savings-result{font-size:14px}.municipality-savings>small{font-size:9px}}
/* Keep desktop presentation; remove repeated information from the mobile lead-in. */
.municipality-savings-toggle{display:none}
.municipality-savings__controls>small{display:block;font:400 10px/1.25 "Segoe UI",Arial,sans-serif;color:#627585}
@media(max-width:700px){
.page-estaciones .municipality-list--polished .municipality-list__mobile-insight{display:none}
.page-estaciones .municipality-list--polished .municipality-list__header{margin-bottom:5px}
.page-estaciones .municipality-list--polished .municipality-map-heading .municipality-map-link{min-height:32px;padding:5px 7px}
.page-estaciones .municipality-list--polished .municipality-controls__fuel{display:block}
.page-estaciones .municipality-list--polished .municipality-controls{margin-bottom:5px;padding-top:5px;padding-bottom:5px;gap:6px}
.page-estaciones .municipality-list--polished .municipality-controls__fuel>.municipality-controls__title,
.page-estaciones .municipality-list--polished .municipality-controls__selectors label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand,
.page-estaciones .municipality-list--polished .municipality-controls__sort{gap:0}
.page-estaciones .municipality-list--polished .municipality-controls__selectors #marcaSelect,
.page-estaciones .municipality-list--polished .municipality-controls__sort select{min-height:38px;width:100%;box-sizing:border-box;padding:6px 24px 6px 9px}
.page-estaciones .municipality-list--polished .municipality-comparison-note{margin:2px 0 7px;font-size:10px;line-height:1.35}
.municipality-savings{padding:0;margin:0 0 3px}
.municipality-savings__heading{gap:7px;min-height:36px}
.municipality-savings__heading>label{display:none}
.municipality-savings-toggle{display:inline-flex;align-items:center;gap:5px;flex:1;min-width:0;min-height:36px;margin:0 auto 0 0;padding:2px 0;border:0;border-radius:0;background:transparent;color:inherit;font:600 11px/1.25 "Segoe UI",Arial,sans-serif;text-align:left;cursor:pointer;box-shadow:none}
.municipality-savings-toggle svg{width:14px;height:14px;flex:none;transition:transform .15s}
.municipality-savings-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.municipality-savings-toggle:focus-visible{outline:2px solid #78b5ed;outline-offset:2px}
.municipality-savings[data-expanded=false]>.municipality-savings__controls{display:none}
.municipality-savings__controls>small{display:block;margin-bottom:4px;color:#627585;font:400 9px/1.3 "Segoe UI",Arial,sans-serif}
}
@media(prefers-reduced-motion:reduce){.municipality-savings-toggle svg{transition:none}}
/* Direct native volume selection on mobile, with a clearer savings amount. */
.municipality-savings-mobile-title,.municipality-savings-litres-select{display:none}
@media(max-width:700px){
.municipality-savings__heading{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;align-items:center;gap:8px;min-height:40px}
.municipality-savings__heading>.municipality-savings-desktop-volume{display:none}
.municipality-savings-mobile-title{display:block;color:#40576c;font:600 12px/1.25 "Segoe UI",Arial,sans-serif}
.municipality-savings-litres-select{display:block;box-sizing:border-box;width:76px;min-width:0;min-height:38px;padding:7px 22px 7px 9px;border:1px solid #d7e3f0;border-radius:8px;background-color:#f7f9fc;color:#40576c;font:600 12px/1.25 "Segoe UI",Arial,sans-serif;cursor:pointer}
.municipality-savings .savings-result{min-width:76px;color:#08794d;font-size:22px;font-weight:750;line-height:1.15;letter-spacing:-.3px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.municipality-savings>.municipality-savings__controls{display:none}
.municipality-savings-litres-select:focus-visible{outline:2px solid #78b5ed;outline-offset:2px}
}
/* Match the typography of the two existing select controls. */
.page-estaciones .municipality-list--polished .municipality-controls__selectors #marcaSelect,
.page-estaciones .municipality-list--polished .municipality-controls__selectors #municipality-sort{font:600 13px/1.25 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:0}
@media(max-width:700px){.municipality-savings__heading{grid-template-columns:minmax(0,1fr) 68px auto}.municipality-savings-litres-select{width:68px;padding:7px 16px 7px 7px;font-size:16px;line-height:1.2;background-position:right 5px center}}
/* Separate fuel choices from the brand/order fields without changing their controls. */
@media(max-width:700px){
.page-estaciones .municipality-list--polished .municipality-controls__selectors{margin-top:5px;padding-top:9px;border-top:1px solid #dce5ee;gap:10px}
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand,
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__sort{gap:4px}
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand label,
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__sort label{position:static;display:block;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip-path:none;white-space:normal;border:0;transform:none;color:#627585;font:500 10px/1.2 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:0;text-transform:none}
}
.municipality-secondary-statistics{margin-top:18px;padding-top:10px;border-top:1px solid #e5edf4}.municipality-secondary-statistics>summary{display:list-item;min-height:34px;box-sizing:border-box;padding:8px 0;color:#536779;font:600 12px/1.4 "Segoe UI",Arial,sans-serif;cursor:pointer}.municipality-secondary-statistics>summary:focus-visible{outline:2px solid #78b5ed;outline-offset:3px;border-radius:4px}.page-estaciones .municipality-list--polished .municipality-secondary-statistics .municipality-summary{display:block;margin-top:10px}.municipality-secondary-statistics .municipality-savings{margin-top:10px}
/* Statistics and savings, inside the secondary disclosure. */
.page-estaciones .municipality-statistics-panel{margin-top:8px;padding:16px;border:1px solid #e0e4e7;border-radius:16px;background:#fff;color:#191d20;text-align:left;box-shadow:none}
.page-estaciones .municipality-statistics-panel .statistics-panel__title{margin:0;padding:0;color:#191d20;font:700 18px/1.3 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:0;text-align:left}
.statistics-panel__intro{margin:5px 0 12px;color:#62676c;font-size:12px;line-height:1.4}
.statistics-panel__minimum{padding:12px;border-radius:12px;background:#eaf6f1}
.statistics-panel__label{margin:0 0 5px;color:#5b6463;font-size:12px;line-height:1.4;font-weight:400}
.statistics-panel__minimum-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.statistics-panel__minimum-price>strong{color:#009e40;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.statistics-panel__badge{padding:3px 7px;border-radius:8px;background:#ccebd8;color:#006d2c;font-size:11px;line-height:1.2}
.statistics-panel__station{margin:6px 0 0;color:#191d20;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.statistics-panel__ties{margin:4px 0 0;color:#52665b;font-size:11px;line-height:1.4}
.statistics-panel__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px 12px}
.statistics-panel__metrics>div{min-width:0}
.statistics-panel__average{margin:0;color:#191d20;font-size:21px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
.statistics-panel__saving-label{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 0 5px;color:#5b6463;font-size:12px;line-height:1.4;min-height:17px}
.statistics-panel__saving-label>label{font:inherit;color:inherit;white-space:nowrap}
.page-estaciones .municipality-statistics-panel .statistics-panel__litres{display:inline-block;box-sizing:border-box;width:52px;min-width:0;min-height:24px;height:24px;margin:-3px 0;padding:0 13px 0 1px;border:0;border-bottom:1px solid #b5c7bc;border-radius:0;background-color:transparent;color:#40584a;font:600 16px/1.2 "Segoe UI",Arial,sans-serif;box-shadow:none;cursor:pointer}
.page-estaciones .municipality-statistics-panel .statistics-panel__saving{display:block;margin:0;color:#009e40;font-size:21px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
.statistics-panel__reference{margin:4px 0 0;color:#62676c;font-size:12px;line-height:1.4}
.page-estaciones .municipality-statistics-panel a.municipality-map-link{display:flex;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;width:100%;min-height:38px;margin:0;padding:8px 12px;border:1px solid #101010;border-radius:22px;background:#101010;color:#fff;font:500 14px/1.3 "Segoe UI",Arial,sans-serif;text-decoration:none;white-space:normal;text-align:center}
.page-estaciones .municipality-statistics-panel a.municipality-map-link:hover{border-color:#292929;background:#292929;color:#fff}
.page-estaciones .municipality-statistics-panel a.municipality-map-link svg{width:17px;height:17px;flex:none}
.statistics-panel__extra{margin-top:12px;padding-top:8px;border-top:1px solid #edf0ee}
.statistics-panel__extra>summary{min-height:26px;cursor:pointer;color:#62676c;font-size:11px;line-height:1.4}
.statistics-panel__extra dl{display:grid;gap:8px;margin:8px 0 0;font-size:12px;line-height:1.4}
.statistics-panel__extra dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.statistics-panel__extra dt{color:#62676c}.statistics-panel__extra dd{margin:0;color:#191d20;font-weight:600}
.municipality-statistics-panel :is(select,summary,a):focus-visible{outline:2px solid #78b5ed;outline-offset:3px}
@media(max-width:700px){.page-estaciones .municipality-statistics-panel{padding:12px;border-radius:14px}.statistics-panel__metrics{gap:12px;padding:16px 4px}.statistics-panel__minimum-price>strong{font-size:25px}.statistics-panel__average,.page-estaciones .municipality-statistics-panel .statistics-panel__saving{font-size:20px}.statistics-panel__reference{font-size:11px}.statistics-panel__station{font-size:13px}}
.statistics-panel__saving-label{gap:2px}.statistics-panel__volume{display:inline-flex;align-items:center;gap:2px;flex:none;white-space:nowrap}.page-estaciones .municipality-statistics-panel .statistics-panel__litres{width:50px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2340584a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right center;background-repeat:no-repeat;background-size:12px}
/* Use the reference heading once, in the primary page header. */
.page-estaciones .municipality-list--polished .municipality-list__heading h1.municipality-list__title{margin:0;padding:0;color:#191d20;font:700 18px/1.3 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:0;text-align:left}
.page-estaciones .municipality-list--polished .municipality-list__meta{margin-top:5px;gap:0 6px;color:#62676c}
.page-estaciones .municipality-list--polished .municipality-list__meta p,
.page-estaciones .municipality-list--polished .municipality-list__meta .municipality-list__order{margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#62676c;font:400 12px/1.4 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;box-shadow:none}
.page-estaciones .municipality-list--polished .municipality-list__meta strong{font-weight:400}
.page-estaciones .municipality-list--polished .municipality-list__meta .municipality-list__order::before{content:'·';display:inline;margin-right:6px;color:inherit}
@media(max-width:700px){.page-estaciones .municipality-list--polished .municipality-list__meta{margin:0;gap:0 5px}}
/* Secondary price data without the savings panel. */
.municipality-price-data dl{display:grid;gap:8px;margin:8px 0 0;font-size:12px;line-height:1.4}
.municipality-price-data dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.municipality-price-data dt{color:#62676c}.municipality-price-data dd{margin:0;color:#191d20;font-weight:600}
@media(min-width:701px){.page-estaciones .municipality-list--polished .municipality-list__heading h1.municipality-list__title{font-size:22px}}
/* Keep the brand label ink and native select inside the available column. */
@media(min-width:701px){
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand{overflow:visible}
.page-estaciones .municipality-list--polished .municipality-controls__selectors .municipality-controls__brand label{padding-left:2px}
.page-estaciones .municipality-list--polished .municipality-controls__selectors #marcaSelect{width:100%;min-width:0;box-sizing:border-box}
}
/* Consistent desktop page headings and intermediate subtitle size. */
@media(min-width:701px){
.page-estaciones .municipality-overview h1,
.page-estaciones .municipality-list--polished .municipality-list__heading h1.municipality-list__title{font:700 36px/1.18 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:-.9px;color:#17324f}
.page-estaciones.municipio-general .municipality-overview .page-intro,
.page-estaciones .municipality-list--polished .municipality-list__meta p,
.page-estaciones .municipality-list--polished .municipality-list__meta .municipality-list__order{font-size:13px !important;line-height:1.6;color:#596d83}
}
/* Match headings on municipality and fuel pages on mobile. */
@media(max-width:700px){
html.precioil-theme .page-estaciones.municipio-general .municipality-overview h1,
html.precioil-theme .page-estaciones .municipality-list--polished .municipality-list__heading h1.municipality-list__title{font:700 24px/1.2 "Segoe UI","Noto Sans",Roboto,Arial,sans-serif;letter-spacing:-.4px;color:#17324f}
html.precioil-theme .page-estaciones.municipio-general .municipality-overview .page-intro,
html.precioil-theme .page-estaciones .municipality-list--polished .municipality-list__meta p,
html.precioil-theme .page-estaciones .municipality-list--polished .municipality-list__meta .municipality-list__order{font-size:13px !important;line-height:1.45;color:#596d83}
}