/* linea.css · v8 · integrador · nav#linea: la barra sticky y el mapa de la línea.
   Escritorio: mapa vertical fijo al borde izquierdo (9 paradas + subparadas del viaje).
   Teléfono: la misma línea, horizontal, dentro de la barra, sin nombres. */

#linea{position:sticky;top:0;z-index:var(--z-nav);height:var(--nav);
  display:flex;align-items:center;gap:16px;padding:0 var(--canal);
  background:rgba(11,30,43,.74);
  border-bottom:1px solid rgba(143,163,173,.18);color:#F7F1E6}
/* el desenfoque va en un pseudoelemento, NO en la barra: backdrop-filter convierte al elemento en bloque
   contenedor de sus hijos position:fixed, y el mapa vertical quedaba centrado en los 62 px de la barra
   (media lista escondida arriba). Trampa v8.0, corregida el 22-sep. */
#linea::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#linea .marca{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:600;font-size:20px;
  text-decoration:none;letter-spacing:-.01em;flex:none}
#linea .marca img{width:30px;height:30px}
#linea .wa{margin-left:auto;flex:none;font-size:14px;text-decoration:none;color:#F7F1E6;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(143,163,173,.35);transition:background .16s var(--cromo)}
#linea .wa:hover{background:rgba(143,163,173,.14)}
#linea .wa b{color:var(--accion);font-weight:600}
@media(max-width:480px){#linea .wa span{display:none}}

/* ── la línea horizontal del teléfono (dentro de la barra) ── */
#linea .mapa-h{flex:1 1 auto;min-width:0;height:22px;display:block}
#linea .mapa-h svg{width:100%;height:100%;overflow:visible}
@media(min-width:1000px){#linea .mapa-h{display:none}}

/* ── el mapa vertical de escritorio, pegado al borde izquierdo ── */
#linea .mapa-v{display:none;position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:var(--z-nav);
  width:180px;height:min(70svh,560px);pointer-events:none}
@media(min-width:1000px){#linea .mapa-v{display:block}}
#linea .mapa-v svg{width:100%;height:100%;overflow:visible}

/* ── geometría común (SVG inline) ── */
#linea .riel{stroke:rgba(143,163,173,.35);stroke-width:2;fill:none;stroke-linecap:round}
#linea .parada{fill:var(--superficie);stroke:rgba(143,163,173,.6);stroke-width:1.5;cursor:pointer;pointer-events:auto;
  transition:fill .24s var(--cromo),stroke .24s var(--cromo)}
#linea .parada.activa{fill:#F7F1E6;stroke:#F7F1E6}
#linea .parada:hover{stroke:var(--accion)}
#linea .sub{fill:transparent;stroke:rgba(143,163,173,.45);stroke-width:1;r:2.5;opacity:0;transition:opacity .24s var(--cromo);pointer-events:auto;cursor:pointer}
#linea .sub.activa{fill:var(--accion);stroke:var(--accion)}
#linea.en-viaje .sub{opacity:1}
#linea .capsula{fill:url(#cromo-capsula);stroke:rgba(247,241,230,.8);stroke-width:.8;pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(245,210,140,.55))}
#linea .nombre{font:500 11px var(--f-titulo);fill:rgba(247,241,230,.62);letter-spacing:.04em;pointer-events:auto;cursor:pointer;
  transition:fill .24s var(--cromo)}
#linea .nombre.activa,#linea .nombre:hover{fill:#F7F1E6}
#linea .subnombre{font:400 10px var(--f-cuerpo);fill:rgba(143,163,173,.75);opacity:0;transition:opacity .24s var(--cromo);pointer-events:auto;cursor:pointer}
#linea.en-viaje .subnombre{opacity:1}
#linea .subnombre.activa{fill:var(--accion)}

/* el mapa vertical se esconde si la ventana es baja: no se pisa con la barra */
@media(max-height:560px){#linea .mapa-v{display:none}}
/* v8.1: mientras el metro llega (#hero en estado «llegada», antes de tocar «Entrá») el mapa no estorba el video;
   entra con un fundido al entrar al vagón. Sin :has (navegadores viejos) el mapa se ve siempre. */
#linea .mapa-v{transition:opacity .6s var(--cromo)}
body:has(#hero[data-estado="llegada"]) #linea .mapa-v{opacity:0;pointer-events:none}
/* 23-sep: los nombres ya no se montan sobre el vagón. Halo oscuro para que se lean sobre cualquier fondo; si no caben
   (linea.js pone .apretado), quedan el riel y los puntos, y los nombres salen al pasar el mouse por el mapa. */
#linea .nombre,#linea .subnombre{paint-order:stroke fill;stroke:rgba(9,22,27,.92);stroke-width:3.2px;stroke-linejoin:round}
#linea .nombre{transition:fill .24s var(--cromo),opacity .24s var(--cromo)}
#linea.apretado .nombre,#linea.apretado .subnombre{opacity:0}
#linea.apretado .mapa-v:hover .nombre,#linea.apretado.en-viaje .mapa-v:hover .subnombre{opacity:1}
@media(prefers-reduced-motion:reduce){#linea .capsula{transition:none}}