/* CSV30 — selector de estaciones realmente flotante y cabecera esencial */

/* Cabecera: solo marca Repsol + descriptor mínimo. */
header .repsol-motion-brand{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:center!important;
  align-content:center!important;
  gap:1px!important;
  width:clamp(132px,16vw,184px)!important;
  min-width:132px!important;
  padding:2px 0 1px!important;
  overflow:visible!important;
}
header .repsol-motion-frame{
  width:100%!important;
  overflow:hidden!important;
}
header .header-operator{
  display:block;
  max-width:100%;
  margin-top:-2px;
  color:rgba(6,23,43,.58);
  font-size:clamp(.48rem,.44rem + .08vw,.56rem);
  font-weight:650;
  line-height:1.05;
  letter-spacing:.055em;
  text-align:center;
  white-space:nowrap;
  text-transform:none;
  pointer-events:none;
}
header .nav{min-height:56px!important}

/* El carril queda al fondo; las fichas pueden salir físicamente del marco. */
.territory-shell,
.territory-route,
.station-tab{
  overflow:visible!important;
}
.territory-route{
  isolation:isolate;
  padding-top:15px!important;
  margin-top:-4px!important;
  margin-bottom:30px!important;
}
.territory-route::before{
  z-index:0!important;
  top:37px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.70);
}
.station-tab{
  z-index:2!important;
  min-width:0;
  border-radius:18px!important;
  transform-style:preserve-3d;
}
.station-tab::before,
.station-tab::after{
  /* El brillo genérico no debe convertirse en una máscara que corte la ficha. */
  overflow:visible!important;
}
.station-tab-dot{
  position:relative;
  z-index:3;
  transform-origin:50% 72%;
  overflow:visible!important;
  will-change:transform,box-shadow,filter;
  transition:transform .34s cubic-bezier(.18,.9,.2,1.22),box-shadow .28s ease,filter .28s ease!important;
}
.station-tab-dot::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:10%;right:10%;bottom:-13px;
  height:14px;
  border-radius:50%;
  background:rgba(3,34,66,.30);
  filter:blur(7px);
  opacity:.42;
  transform:scale(.78);
  transition:opacity .28s ease,transform .34s cubic-bezier(.18,.9,.2,1.22);
  pointer-events:none;
}
.station-tab-dot::after{
  position:relative;
  z-index:2;
}
.station-tab[aria-selected="true"]{
  z-index:8!important;
  transform:none!important;
}
.station-tab[aria-selected="true"] .station-tab-dot{
  transform:translateY(-13px) scale(1.17)!important;
  background:linear-gradient(145deg,#2684dd 0%,#0d5ca9 48%,#063866 100%)!important;
  border-color:rgba(255,255,255,.68)!important;
  box-shadow:
    inset 0 5px 5px rgba(255,255,255,.62),
    inset 0 -9px 13px rgba(1,28,57,.38),
    0 21px 26px rgba(5,58,108,.34),
    0 8px 12px rgba(4,20,38,.22)!important;
  filter:saturate(1.08) brightness(1.035);
}
.station-tab[aria-selected="true"] .station-tab-dot::before{
  opacity:.75;
  transform:scale(1.25);
}
.station-tab[aria-selected="true"] strong{
  transform:translateY(-5px);
  color:#082d52;
  font-weight:800;
}
.station-tab strong{
  position:relative;
  z-index:3;
  transition:transform .30s cubic-bezier(.18,.9,.2,1.12),color .22s ease;
}
.station-tab:active[aria-selected="true"] .station-tab-dot{
  transform:translateY(-8px) scale(1.10)!important;
  box-shadow:
    inset 0 5px 10px rgba(1,28,57,.30),
    0 10px 16px rgba(5,58,108,.26)!important;
}

@media(max-width:650px){
  header .repsol-motion-brand{width:142px!important;min-width:126px!important}
  header .header-operator{font-size:.47rem;letter-spacing:.035em}
  header .nav{min-height:54px!important}
  .territory-route{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    padding:18px 2px 4px!important;
    margin-bottom:26px!important;
  }
  .territory-route::before{left:10%!important;right:10%!important;top:39px!important}
  .station-tab-dot{width:42px!important;height:42px!important}
  .station-tab[aria-selected="true"] .station-tab-dot{transform:translateY(-12px) scale(1.16)!important}
  .station-tab[aria-selected="true"] strong{transform:translateY(-4px)}
}

@media(max-width:380px){
  header .repsol-motion-brand{width:132px!important;min-width:118px!important}
  header .header-operator{font-size:.43rem}
  .territory-route{gap:4px!important}
  .station-tab strong{font-size:.64rem!important}
}

@media(prefers-reduced-motion:reduce){
  .station-tab-dot,.station-tab strong,.station-tab-dot::before{transition:none!important}
}