:root{
  --bg:#ffffff;
  --fg:#0f172a;      /* slate-900 */
  --muted:#64748b;   /* slate-500 */
  --ring:#2563eb;    /* blue-600 */
  --border:#e5e7eb;  /* gray-200 */
  --brand:#F6A60E;   /* acento */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --fg:#e5e7eb;
    --muted:#94a3b8;
    --ring:#60a5fa;
    --border:#1f2937;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* A11y helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ====== Header común ====== */
.site-header{
  position:fixed; 
  top:0; 
  left:0; 
  right:0;
  z-index:1000;
  background:color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:grid; grid-template-columns:1fr minmax(280px,680px) 1fr; align-items:center; gap:12px;
}
.brand{justify-self:start;font-weight:800; letter-spacing:-0.02em; line-height:1; color:var(--brand); font-size: clamp(28px, 4vw, 36px);}
.brand.header{font-size: clamp(22px, 3vw, 28px);}
.brand .light{font-weight:800; color: color-mix(in oklab, var(--fg) 70%, #999 30%);}
a.brand{text-decoration: none;}

@media (max-width: 720px){
  .header-inner{
    grid-template-columns: 1fr;   /* solo una columna */
    justify-items: center;        /* centra todo el contenido */
    text-align: center;
  }
  .brand.header{
    justify-self: center;         /* centra el logo */
  }
  .search{
    width:100%;                   /* buscador ocupa todo el ancho debajo del logo */
    margin-top:2px;
  }
  .header-right{ display:none; }  /* ocultar la parte derecha si está vacía */
}


/* Buscador */
.search{ width:100%; }
.input{
  width:100%; height:48px; padding:0 20px;
  border:1px solid var(--border); border-radius:999px;
  background:#fff; color:#111827; outline:none; font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .input{
    background:#0f172a; color:#e5e7eb; border-color:#1f2937;
    box-shadow:0 2px 20px rgba(0,0,0,.35);
  }
}
.input::placeholder{color:var(--muted)}
.input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 20%, transparent);
}
.input:active{transform:scale(.998)}
.search-btn{ display:none } /* “Google-like” */

/* Autocomplete */
.search-autocomplete{ position:relative; max-width:720px; margin:0 auto; }
.ac-list{
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  margin-top:8px; padding:6px 0; list-style:none; max-height:320px; overflow:auto;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  display:none;
}
.ac-list.visible{ display:block; }
.ac-item{ padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.ac-item strong{ font-weight:700; }
.ac-item small{ opacity:.7; }
.ac-item[aria-selected="true"], .ac-item:hover{ background:#f6f7f9; }

/* ====== Intro (home) ====== */
.wrap{ min-height:calc(100dvh - 64px); display:grid; place-items:center; padding:24px; }
.box{ width:100%; max-width:720px; text-align:center; }
.hint{ margin-top:14px; font-size:14px; color:var(--muted); }

/* Footer minimal */
.footer {
  padding: 14px 18px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg) 85%, transparent), transparent);
}

.footer a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 6px;
  font-size: 12px;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-provincias {
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--muted);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 12px;
  text-align: center;
  max-width: 1300px;  /* el mismo ancho que comentabas */
  padding: 0 20px;    /* un poco de respiración lateral */
}

.footer-provincias a {
  color: var(--muted);
  text-decoration: none;
}

.footer-provincias a:hover {
  color: var(--fg);
  text-decoration: underline;
}

/* ====== Contenedor de páginas ====== */
.page {
  max-width: 1300px;   /* más ancho en escritorio */
  margin: 0 auto;
  padding: 75px 20px 20px;
}

/* En pantallas pequeñas (móviles) ocupamos todo el ancho */
@media (max-width: 720px) {
  .page {
    padding: 100px 20px 20px; /* menos padding lateral en móvil */
  }
}

/* ====== Cabecera “tipo Google” para resultados ====== */
.results-hero{
  display:grid; gap:8px; margin:18px 0 6px; text-align:center;
}
.results-hero h1{
  margin:0; font-size:28px; font-weight:800; letter-spacing:-0.01em;
}
.subtle{ color:var(--muted); font-size:14px; margin:0; }
.subtle2{ color:var(--muted); font-size:14px; margin:0; text-align: justify;}

/* ====== Botonera de carburantes (barra pegajosa) ====== */
.fuel-bar{
  position:sticky;
  top:72px;   /* altura real del header */
  z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--border);
z-index: 999;
}

/* Estilo base (móvil): scroll horizontal */
.fuel-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 20px 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fuel-buttons::-webkit-scrollbar { display: none; }

/* En pantallas anchas: que salten de línea y se centren */
@media (min-width: 961px) {
  .fuel-buttons {
    flex-wrap: wrap;         /* que salten a varias filas */
    justify-content: center; /* centrados en horizontal */
    overflow-x: visible;     /* sin scroll en desktop */
  }
}

.fuel-btn{
  flex:0 0 auto;                 /* que los botones mantengan su ancho */
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  border:none;
  border-radius:999px;
  cursor:pointer;
  color:#fff;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  outline-offset:2px;
}
.fuel-btn:hover{ 
  transform:translateY(-2px); 
  box-shadow:0 6px 14px rgba(0,0,0,.15); 
}
.fuel-btn[aria-selected="true"]{
  box-shadow:
    0 0 0 3px color-mix(in oklab, #fff 80%, transparent),
    0 0 0 6px color-mix(in oklab, currentColor 40%, transparent);
}

/* ==== Colores fijos por producto ==== */
.btn-95-e5{            background:#1e3a8a; }
.btn-95-e10{           background:#2563eb; }
.btn-95-e5-premium{    background:#0369a1; }
.btn-98-e5{            background:#16a34a; }
.btn-98-e10{           background:#065f46; }
.btn-diesel-a{         background:#b45309; }
.btn-diesel-b{         background:#92400e; }
.btn-diesel-premium{   background:#78350f; }
.btn-biodiesel{        background:#047857; }
.btn-bioetanol{        background:#0f766e; }
.btn-glp{              background:#dc2626; }
.btn-gnc{              background:#7c3aed; }
.btn-gnl{              background:#6d28d9; }
.btn-h2{               background:#0891b2; }

.fuel-btn{ color:#fff; }
.fuel-btn:hover{ filter:brightness(1.05); }
.fuel-btn:active{ transform:translateY(0); }
.fuel-btn[aria-selected="true"]{
  box-shadow:
    0 0 0 3px color-mix(in oklab, #ffffff 85%, transparent),
    0 0 0 7px color-mix(in oklab, currentColor 35%, transparent);
}

/* Estado desactivado de fuel buttons */
.fuel-btn[aria-selected="false"] {
  background: var(--muted);
  color: #fff;
  opacity: 0.5;
}
.fuel-btn[aria-selected="true"] {
  opacity: 1;
}

/* Badges de marca */
.badge{ display:inline-block; padding:.25rem .5rem; border-radius:6px; font-weight:700; font-size:12px; margin-right:6px; color:#fff;background:#2c3e50; }
.brand-repsol{ background:#f97316; }
.brand-cepsa{ background:#dc2626; }
.brand-bp{ background:#16a34a; }
.brand-generic{ background:#334155; }

/* ====== Tabla genérica ====== */
.table{ width:100%; border-collapse:collapse; font-size:15px; }
.table th,.table td{ padding:14px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
.table th{
  font-weight:600; color:var(--muted); text-transform:uppercase;
  font-size:12px; letter-spacing:.03em; background:color-mix(in oklab, var(--ring) 5%, transparent);
}
.table tr:hover td{ background:color-mix(in oklab, var(--ring) 8%, transparent); }
.table.no-hover tr:hover td{ background:transparent; }
.text-right{ text-align:right; }

.precio{ font-weight:800; letter-spacing:.01em; }
.barato{ color:#16a34a; }
.caro{ color:#dc2626; }

.th-hide-mobile{ display:table-cell; }
@media (max-width: 720px){
  .header-inner{ grid-template-columns:1fr; gap:8px; }
  .th-hide-mobile{ display:none; }
  .table th,.table td{ padding:12px 10px; }
}

/* ====== Ficha de estación ====== */
.station .station-header{ display:grid; gap:6px; }
.station .station-title{ font-size:28px; font-weight:800; margin:6px 0 0; }
.subtitle{ font-size:15px; color:var(--muted); margin:0 0 12px; }
.map {
  width: 100%;
  overflow: hidden;
  margin: 18px 0 6px;
}

.map iframe {
  width: 100%;
  height: 425px;
  display: block;
  border-radius: 14px;
}
.card{ border:1px solid var(--border); border-radius:14px; padding:16px; background:color-mix(in oklab, var(--bg) 96%, transparent); box-sizing: border-box; margin-bottom: 20px;}
.card-title{ margin:0 0 10px; font-size:20px; }
.list{ margin:0; padding-left:18px; }
.list li{ margin:6px 0; }
.list a{ color: #333;}
.update{ font-size:13px; color:var(--muted); margin-top:14px; }

.mt-16{ margin-top:16px; }

.station-text {text-align: }

.row-link{ cursor:pointer; }
.row-link:focus-within td,
.row-link:focus td{ outline:2px solid var(--ring); outline-offset:-2px; }

/* ====== Layout resultados ====== */
.results-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:16px;
  align-items:start;
  margin:16px 0 8px;
}
.list-col{ min-width:0; }
/*.map-col{ position:sticky; top:200px; }*/
#map{
  width:100%;
  height:auto;
  min-height:360px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:color-mix(in oklab, var(--bg) 96%, transparent);
}

.row-active td{ background:color-mix(in oklab, var(--ring) 14%, transparent) !important; }
.leaflet-container a{ color:inherit; }

/* ====== Botón flotante & overlay (mobile) ====== */
.map-fab{
  position:fixed; right:16px; bottom:18px; z-index:60;
  display:none;
  padding:12px 16px; border:none; border-radius:999px; font-weight:800;
  background:var(--ring); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25); cursor:pointer;
}
.map-sheet{
  position:fixed; inset:0; z-index:70; display:none; background:rgba(0,0,0,.35); backdrop-filter:saturate(140%) blur(2px);
}
.map-sheet.open{ display:block; }
.map-sheet[aria-hidden="true"]{ display:none; }
.map-sheet .sheet-header{
  position:absolute; left:0; right:0; top:0; height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; background:var(--bg); border-bottom:1px solid var(--border);
}
.sheet-close{ border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--fg); }
#map-mobile{ position:absolute; left:0; right:0; top:52px; bottom:0; }

@media (max-width: 960px){
  .results-grid{ grid-template-columns: 1fr; }
  .map-col{ display:none; }
  .map-fab{ display:inline-flex; }
}

/* ====== Layout ficha gasolinera ====== */
.station-grid {
  display: grid;
  grid-template-columns: 50fr 50fr; /* mantiene la proporción 45/55 */
  gap: 20px;  /* solo el hueco entre columnas */
  align-items: start;
  margin-top: 20px;
}
.station-grid .precios {
  min-width: 300px;
}
.station-grid .map {
  min-height: 360px;
  width: 100%;
  margin: 0;
}
@media (max-width: 960px){
  .station-grid {
    grid-template-columns: 1fr; /* en móvil se apila */
  }
}

/* ===== Breadcrumb minimal ===== */
.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 20px;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li+li:before {
  content: "›";
  margin: 0 .5rem;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--ring);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
}


/* ====== Formulario de contacto ====== */
.contact-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 20%, transparent);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

/* Botón del formulario */
.contact-form button {
  align-self: start;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  background: var(--ring);
  color: #fff;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.contact-form button:hover {
  background: color-mix(in oklab, var(--ring) 90%, #000 10%);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transform: translateY(-2px);
}

.contact-form button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Mensajes de estado */
.alert {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
}

.alert.success {
  background: color-mix(in oklab, #16a34a 15%, var(--bg) 85%);
  border: 1px solid #16a34a;
  color: #166534;
}

.alert.error {
  background: color-mix(in oklab, #dc2626 15%, var(--bg) 85%);
  border: 1px solid #dc2626;
  color: #7f1d1d;
}

/* Indicar que la fila es clicable */
.row-link {
  cursor: pointer;
  position: relative;
}

/* Al pasar por encima resaltamos */
.row-link:hover::after {
  opacity: 0.9;
  color: var(--ring);
}

.station-link2 {color:#333;}
.station-link2:hover {background-color:#2c3e50; color: white; border-radius: 3px;}

/* ====== Bloque informativo de la home ====== */
/* ====== Home-info VER MÁS ====== */
.home-info {
  position: relative;
  max-width: 820px;
  margin: 40px auto 0;
  padding: 0 20px 40px;
}

.home-info-inner {
  max-height: 220px; /* altura visible inicial */
  overflow: hidden;
  position: relative;
  transition: max-height .4s ease;
}

/* Degradado suave inferior */
.home-info-inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bg)
  );
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Cuando está expandido */
.home-info.expanded .home-info-inner {
  max-height: 3000px; /* suficiente para cualquier texto */
}

.home-info.expanded .home-info-inner::after {
  opacity: 0;
}

/* Botón */
.home-info-toggle {
  display: block;
  margin: 18px auto 0;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease;
}

.home-info-toggle:hover {
  background: color-mix(in oklab, var(--ring) 12%, var(--bg));
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  .home-info-toggle:hover {
    background: color-mix(in oklab, var(--ring) 25%, var(--bg));
  }
}