:root {
  --mapa:#0f2a2b; --panel:#1b1e21; --campo:#2a2e32; --campo-hover:#32373c; --borde:#343a3f;
  --texto:#f1f3f4; --sec:#9aa4a9; --origen:#3ddc84; --destino:#4db8ff; --vivo:#3ddc84;
  --radio-panel:14px; --radio-campo:10px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--mapa); color:var(--texto);
  font:15px/1.4 Manrope, Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing:antialiased; }
button, input { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--destino); outline-offset:2px; }

/* ---------- mapa ---------- */
#map { position:absolute; inset:0; background:var(--mapa); }
#map.elegir { cursor:crosshair; }
.leaflet-container { background:var(--mapa); font-family:inherit; }
/* fondo de reserva si el navegador no tiene WebGL: OpenStreetMap oscurecido */
.fondo-osm .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.95) contrast(1.35) sepia(.6) hue-rotate(135deg) saturate(1.9) brightness(.85); }
.leaflet-control-attribution { background:rgba(15,20,22,.7) !important; color:var(--sec) !important; font-size:11px; }
.leaflet-control-attribution a { color:var(--sec) !important; }
.leaflet-tooltip { background:var(--panel); color:var(--texto); border:1px solid var(--borde);
  border-radius:8px; box-shadow:none; font-size:13px; padding:4px 8px; }
.leaflet-tooltip-top:before { border-top-color:var(--panel); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--panel); color:var(--texto); }
.leaflet-popup-content-wrapper { border-radius:10px; }
.leaflet-container a.leaflet-popup-close-button { color:var(--sec); }

.controles { position:absolute; z-index:1000; top:16px; right:16px; display:flex; flex-direction:column; gap:8px; }
.grupo { background:var(--panel); border:1px solid var(--borde); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.grupo button { width:38px; height:38px; border:0; background:transparent; display:grid; place-items:center; }
.grupo button + button { border-top:1px solid var(--borde); }
.grupo button:hover { background:var(--campo); }
.grupo svg { width:18px; height:18px; }

.bus { position:absolute; transform:translate(-50%,-50%); border-radius:7px; color:#fff; font-weight:700;
  font-size:12px; padding:2px 6px; border:2px solid var(--panel); white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.bus.parado { background:#5c666c !important; font-weight:500; }
.bus { display:inline-flex; align-items:center; gap:3px; }
.bus svg { width:13px; height:13px; flex:none; }
.bus:not(.parado) { padding:2px 6px 2px 4px; }
.bus.tren { border-radius:10px; }
/* estaciones de BiciFerrolterra: pastilla con el número de bicis disponibles */
.bici { position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:3px;
  padding:2px 6px 2px 4px; border-radius:7px; border:2px solid var(--bici-c); background:var(--panel);
  color:var(--bici-c); font-weight:700; font-size:12px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.bici svg { width:14px; height:14px; flex:none; }
.bici.hay { --bici-c:var(--origen); }
.bici.pocas { --bici-c:#f2b84b; }
.bici.ninguna { --bici-c:#e5676b; }
.bici.cerrada, .bici.viejo { --bici-c:#7d878d; }
.bici.cerrada { opacity:.75; }
.marca-ab { position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%;
  background:var(--panel); border:5px solid; box-shadow:0 2px 8px rgba(0,0,0,.5); }

/* ---------- panel ---------- */
.panel { position:absolute; z-index:1000; top:20px; left:20px; bottom:20px; width:390px; max-height:720px;
  background:var(--panel); border-radius:var(--radio-panel); display:flex; flex-direction:column;
  box-shadow:0 10px 40px rgba(0,0,0,.45); overflow:hidden; }
.cab { display:flex; align-items:center; gap:10px; position:relative; padding:14px 16px 8px; min-height:56px; }
.cab h1 { margin:0; }
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--texto); }
.logo svg { width:30px; height:30px; flex:none; }
.logo .marca { font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.logo .marca span { color:var(--origen); }
.cab .volver-res { display:none; }
.con-resultados.en-ruta .cab .volver-res { display:grid; }
/* con las opciones de ruta cargadas el logo se va, como en jakdojade */
.cab h1 { max-width:200px; max-height:40px; overflow:hidden; transition:max-width .3s cubic-bezier(.2,.7,.3,1), max-height .3s cubic-bezier(.2,.7,.3,1), opacity .2s ease, transform .3s cubic-bezier(.2,.7,.3,1); }
.panel.en-horarios .cab h1 { max-width:0; max-height:0; opacity:0; transform:translateY(-8px); pointer-events:none; }
.panel.en-horarios .cab { min-height:0; padding:0; }
.panel.en-horarios #horCab { padding-top:10px; }
.con-resultados.en-ruta .cab h1 { max-width:0; max-height:0; opacity:0; transform:translateY(-8px); pointer-events:none; }
.con-resultados.en-ruta .cab .volver-res { animation:fundido .3s ease-out backwards; position:absolute; left:10px; top:19px; z-index:5; }
/* la cabecera se recoge y la flecha queda a la altura del resumen */
.cab { transition:min-height .3s cubic-bezier(.2,.7,.3,1), padding .3s cubic-bezier(.2,.7,.3,1); }
.con-resultados.en-ruta .cab { min-height:0; padding:0; }
.con-resultados .vista#vRuta .zona-fija { padding-top:10px; }
.con-resultados .resumen { padding-left:44px; }
/* en la ficha del itinerario la flecha vuelve a tener su propia fila */
.con-resultados.en-ruta.en-detalle .cab { min-height:52px; padding:10px 16px 4px; }
.con-resultados.en-ruta.en-detalle .cab .volver-res { position:static; }
@media (prefers-reduced-motion: reduce) { .cab h1 { transition:none; } }

/* resumen de origen y destino cuando hay resultados */
.resumen { display:none; align-items:center; gap:12px; padding:2px 0 4px; }
.con-resultados .resumen { display:flex; }
.con-resultados .editar { display:none; }
.resumen .puntos { flex:1; min-width:0; border:0; background:transparent; text-align:left; padding:4px 0;
  display:grid; grid-template-columns:14px 1fr; column-gap:10px; row-gap:8px; align-items:center; position:relative; }
.resumen .puntos::before { content:""; position:absolute; left:6px; top:14px; bottom:14px; width:2px; background:#5c666c; }
.resumen .puntos i { width:12px; height:12px; border-radius:50%; border:3px solid; background:var(--panel); z-index:1; }
.resumen .puntos span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15px; }
.redondo { width:38px; height:38px; border-radius:50%; border:0; background:var(--campo); color:var(--texto);
  display:grid; place-items:center; flex:none; }
.redondo:hover { background:var(--campo-hover); }
.redondo svg { width:18px; height:18px; }
.pulso { width:8px; height:8px; border-radius:50%; background:var(--vivo); flex:none; }
.pulso.animado { animation: latido 1.8s ease-out infinite; }
@keyframes latido { 0% { box-shadow:0 0 0 0 rgba(61,220,132,.55); } 70%,100% { box-shadow:0 0 0 7px rgba(61,220,132,0); } }
@media (prefers-reduced-motion: reduce) { .pulso.animado { animation:none; } }

.vista { display:none; flex:1; min-height:0; flex-direction:column; }
.vista.activa { display:flex; }
.zona-fija { padding:4px 16px 12px; border-bottom:1px solid var(--borde); }
.desplazable { flex:1; overflow:auto; padding:14px 16px 18px; }
.desplazable::-webkit-scrollbar { width:8px; }
.desplazable::-webkit-scrollbar-thumb { background:var(--borde); border-radius:4px; }

.campo { display:flex; align-items:center; gap:10px; background:var(--campo); border-radius:var(--radio-campo);
  padding:0 6px 0 14px; height:44px; margin-top:8px; }
.campo:hover { background:var(--campo-hover); }
.anillo { width:12px; height:12px; border-radius:50%; border:3px solid; flex:none; }
.campo input { flex:1; min-width:0; border:0; background:transparent; outline:none; font-size:15px; }
.campo input::placeholder { color:var(--sec); }
.campo input::-webkit-calendar-picker-indicator { display:none !important; }
.icono-btn { width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--sec);
  display:grid; place-items:center; flex:none; }
.icono-btn:hover, .icono-btn.activo { background:var(--panel); color:var(--texto); }
.icono-btn.activo { color:var(--destino); }
.icono-btn svg { width:18px; height:18px; }

.fila { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
.pastilla { height:32px; border-radius:999px; border:0; background:var(--campo); padding:0 12px;
  display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.pastilla:hover { background:var(--campo-hover); }
.pastilla svg { width:16px; height:16px; }
.opciones { display:none; margin-top:10px; background:var(--campo); border-radius:var(--radio-campo); padding:6px 12px; }
.opciones.abiertas { display:block; }
.opciones label { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; font-size:14px; cursor:pointer; }
.opciones label + label { border-top:1px solid var(--borde); }
.opciones input { accent-color:var(--origen); width:16px; height:16px; }

h2 { font-size:16px; font-weight:600; margin:0 0 8px; }
.vacio { color:var(--sec); font-size:14px; }
.error { color:#ff8a80; font-size:14px; }

/* ---------- resultados ---------- */
#resultado.lista { background:#0e1012; }
.ruta { cursor:pointer; border-radius:12px; padding:12px 14px 12px 16px; background:var(--panel); border:1px solid transparent;
  width:100%; text-align:left; display:block; margin-bottom:10px; }
.ruta:hover { background:#202428; }
.ruta.sel { background:var(--campo); border-color:#3d444a; }
.r-fila { display:grid; grid-template-columns:86px 1fr; column-gap:10px; align-items:center; }
.r-et { display:block; font-size:12px; color:var(--texto); opacity:.85; margin-bottom:1px; }
.r-min { display:flex; align-items:flex-end; gap:3px; position:relative; line-height:.9; }
.r-min b { font-size:40px; font-weight:700; letter-spacing:-.04em; }
.r-min b.hora { font-size:27px; letter-spacing:-.02em; }
.r-min > span { font-size:15px; font-weight:600; padding-bottom:3px; }
.ondas { position:absolute; right:0; top:-6px; width:17px; height:17px; }
.ondas.arriba { position:static; display:inline-block; vertical-align:-4px; margin-left:4px; width:16px; height:16px; }
.ondas.real { color:var(--vivo); }
.ondas.est { color:#7d878c; }
.r-l1 { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.r-lineas { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.r-linea { display:inline-flex; align-items:center; gap:4px; }
.r-linea svg { width:20px; height:20px; }
.ico-modo { display:inline-flex; color:#fff; }
.r-linea .chip-o { border:1.5px solid #8d979c; border-radius:6px; padding:1px 6px; font-weight:600; font-size:14px; min-width:28px; text-align:center; }
.r-pie { display:inline-flex; align-items:center; color:#c9d1d5; }
.r-pie svg { width:16px; height:16px; }
.dur { color:var(--sec); font-size:13.5px; white-space:nowrap; }
.r-l2 { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12px; color:var(--sec); flex-wrap:wrap; }
.r-l2 svg { width:13px; height:13px; margin-right:-3px; }
.hp { border-radius:5px; padding:1px 5px; font-weight:700; font-size:12.5px; color:#0e1012; }
.hp.v { background:var(--vivo); }
.hp.v.est { background:#aeb6ba; }
.hp.a { background:var(--destino); }
.manana { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:#d4741f; color:#fff; border-radius:5px; padding:1px 5px; margin-bottom:3px; }
.r-detalle { border-top:1px solid var(--borde); margin-top:12px; }
.r-xunta { font-size:12px; color:var(--sec); margin-top:6px; }
.chip { display:inline-block; min-width:26px; text-align:center; border-radius:6px; color:#fff; font-weight:700; font-size:12.5px; padding:1px 6px; }

/* buscador con sugerencias */
.editar { position:relative; }
.sugerencias { position:absolute; left:0; right:0; z-index:20; background:#24282c; border:1px solid var(--borde);
  border-radius:12px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.5); max-height:340px; overflow:auto; }
.sug { display:flex; align-items:center; gap:11px; padding:8px 8px; border-radius:8px; cursor:pointer; }
.sug:hover, .sug.activa { background:var(--campo-hover); }
.sug-ico { width:30px; height:30px; border-radius:50%; background:var(--campo); display:grid; place-items:center; flex:none; color:#c9d1d5; }
.sug-ico svg { width:16px; height:16px; }
.sug-ico.parada { color:#fff; }
.sug-ico.direccion, .sug-ico.calle { color:var(--destino); }
.sug-ico.ubicacion { color:var(--origen); }
.sug-t { min-width:0; font-size:14.5px; }
.sug-t small { display:block; color:var(--sec); font-size:12px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-buscando { color:var(--sec); font-size:12.5px; padding:6px 10px; }

/* ficha del itinerario */
.en-detalle #vRuta .zona-fija { display:none; }
.det { margin:-14px -16px -18px; }
.det .det-res { border-radius:0; margin:0 0 4px; cursor:default; background:var(--panel); border:0; padding:14px 16px; }
.seccion { background:var(--panel); padding:10px 16px 6px 12px; margin-bottom:4px; transition:background .2s; }
.seccion[data-paso] { cursor:pointer; }
.seccion[data-paso]:hover { background:#202427; }
.seccion.enfocada { background:#23292d; box-shadow:inset 3px 0 0 var(--destino); }
.pl.inter, .pl[data-punto] { cursor:pointer; border-radius:8px; }
.pl.enfocada .tx b, .pl.inter.enfocada .tx { color:var(--destino); }
.pl { display:grid; grid-template-columns:62px 30px 1fr; column-gap:10px; min-height:34px; }
.pl .hc { display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:2px; }
.pl .ic { position:relative; display:flex; justify-content:center; }
.pl .ic::before { content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); }
.seccion.tramo .pl .ic::before { width:4px; background:var(--c); border-radius:2px; }
.seccion.tramo .pl.ini .ic::before { top:12px; }
.seccion.tramo .pl.fin .ic::before { bottom:auto; height:12px; }
.seccion:not(.tramo) .pl .ic::before { border-left:3px dotted #5c666c; }
.seccion:not(.tramo) .pl.ini .ic::before { top:14px; }
.seccion:not(.tramo) .pl.fin .ic::before { bottom:auto; height:10px; }
.seccion:not(.tramo) .pl:only-child .ic::before { display:none; }
.pl .tx { padding:2px 0 12px; min-width:0; font-size:14.5px; }
.pl .tx b { font-weight:600; }
.pl .tx small { display:block; font-size:12.5px; margin-top:3px; color:#c9d1d5; }
.fila { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.tx .fila { margin-top:0; }
.mn { color:var(--sec); font-size:13px; white-space:nowrap; }
.gris { color:var(--sec) !important; }
.tarde { color:#ff6b6b !important; }
.pronto { color:var(--vivo) !important; }
.nodo { position:relative; z-index:1; width:14px; height:14px; border-radius:50%; background:var(--panel); border:3px solid var(--c); margin-top:3px; }
.nodo.dest { border-color:var(--destino); }
.circ { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:var(--campo); display:grid; place-items:center; color:#c9d1d5; }
.circ svg { width:15px; height:15px; }
.veh { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; border:3px solid var(--panel); }
.veh svg { width:15px; height:15px; }
.veh .onda { position:absolute; inset:-9px; color:var(--vivo); animation:latidoOnda 1.8s ease-in-out infinite; }
.veh .onda svg { width:100%; height:100%; }
@keyframes latidoOnda { 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) { .veh .onda { animation:none; } }
.hpill { border-radius:6px; padding:1px 6px; font-weight:700; font-size:13px; color:#0e1012; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.hpill.v { background:var(--vivo); }
.hpill.est { background:#aeb6ba; }
.hpill.a { background:var(--destino); }
.hpill.neutra { background:transparent; color:var(--texto); border:1.5px solid #5c666c; }
.hpill.tachada { background:#2a4a38; color:#9fd9b5; text-decoration:line-through; font-weight:600; }
.hpill .pto { width:7px; height:7px; border-radius:50%; background:var(--origen); }
.hreal { font-weight:700; font-size:14px; }
.linea-dir { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; letter-spacing:.01em; min-width:0; }
.linea-dir .chip-o { border:1.5px solid #8d979c; border-radius:6px; padding:0 6px; font-size:14.5px; }
.plegable { margin-top:8px; width:100%; border:0; border-top:1px solid var(--borde); background:transparent; color:var(--texto);
  display:flex; justify-content:space-between; align-items:center; padding:9px 0 0; font-size:13px; }
.plegable svg { width:16px; height:16px; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.plegable.abierto svg { transform:rotate(180deg); }
/* paradas intermedias: se despliegan animando la altura */
.plegado { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .34s cubic-bezier(.2,.7,.3,1), opacity .25s ease; }
.plegado > div { overflow:hidden; min-height:0; }
.plegado.abierto { grid-template-rows:1fr; opacity:1; }
.pl.inter { min-height:26px; }
.pl.inter .tx { padding:3px 0 5px; font-size:13px; color:#c9d1d5; }
.pl.inter .hi { font-size:12.5px; color:#c9d1d5; font-weight:600; }
.pto-int { position:relative; z-index:1; width:9px; height:9px; border-radius:50%; background:var(--panel); border:2px solid var(--c); margin-top:6px; }
/* resumen fijo arriba al desplazar la ficha */
.det .det-res { position:sticky; top:-14px; z-index:6; box-shadow:0 8px 14px -10px rgba(0,0,0,.7); }
/* ondas de tiempo real que laten */
.ondas.real .w1, .ondas.real .w2 { animation:latir 1.6s ease-in-out infinite; }
.ondas.real .w2 { animation-delay:.25s; }
@keyframes latir { 0%, 100% { opacity:.25; } 45% { opacity:1; } }
/* menú del botón derecho en el mapa */
.menu-mapa .leaflet-popup-content { margin:8px; }
.menu-mapa .pastilla { width:100%; justify-content:flex-start; margin:2px 0; height:34px; }

.girando { display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border-radius:50%;
  border:2px solid #5c666c; border-top-color:var(--origen); animation:gira .8s linear infinite; }
@keyframes gira { to { transform:rotate(360deg); } }
.aviso-linea { display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding:8px 10px; border-radius:8px;
  background:#3a3220; color:#f3dfae; font-size:12.5px; line-height:1.35; }
.aviso-linea.imp { background:#4a2323; color:#ffd0d0; }
.aviso-linea svg { width:15px; height:15px; flex:none; margin-top:1px; }
.precio-total { display:flex; gap:10px; align-items:center; background:var(--panel); margin:0 0 4px; padding:10px 16px; font-size:14px; }
.precio-total svg { width:20px; height:20px; color:#f2c94c; flex:none; }
.precio-total b { font-weight:700; }
.precio-total small { display:block; color:var(--sec); font-size:12px; }

/* animaciones (como jakdojade): rutas en el mapa, tarjetas y ficha */
.plan-linea { transition: opacity .3s ease; animation: fundido .45s ease-out backwards; }
.plan-linea.quieta { animation: none; }
.plan-linea.tenue { opacity: .28; }
.plan-extra { transition: opacity .25s ease; }
.plan-linea.fuera, .plan-extra.fuera { opacity: 0 !important; pointer-events: none; }
.ruta.entra { animation: subir .42s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--n, 0) * 70ms); }
.det.entra > .seccion, .det.entra > .precio-total { animation: subir .42s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(120ms + var(--n, 0) * 55ms); }
@keyframes fundido { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .plan-linea, .plan-extra, .ruta.entra, .det.entra > *, .plegado, .ondas .w1, .ondas .w2 { animation: none !important; transition: none !important; }
}

/* aviso flotante sobre el mapa: tiempo real (verde) u horario estimado (gris) */
.aviso { position:absolute; z-index:1001; top:18px; left:430px; right:80px; display:flex; justify-content:center; pointer-events:none; }
.aviso > div { pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:560px;
  padding:9px 8px 9px 14px; border-radius:12px; font-size:14px; box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation: entra .25s ease-out; }
.aviso .real { background:#123d29; color:#d9fbe7; border:1px solid #2a8a57; }
.aviso .est { background:#2a2e32; color:#dfe4e6; border:1px solid #4a5157; }
.aviso svg.o { width:18px; height:18px; flex:none; }
.aviso .real svg.o { color:var(--vivo); }
.aviso .est svg.o { color:#9aa4a9; }
.aviso b { font-weight:700; }
.aviso button { border:0; background:transparent; color:inherit; opacity:.7; width:26px; height:26px; border-radius:6px; display:grid; place-items:center; }
.aviso button:hover { opacity:1; background:rgba(255,255,255,.08); }
.aviso button svg { width:14px; height:14px; }
@keyframes entra { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .aviso > div { animation:none; } }

/* etiquetas sobre el mapa */
.et { position:absolute; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; }
.et-linea { display:inline-flex; align-items:center; gap:4px; color:#fff; font-weight:700; font-size:14px;
  border-radius:7px; padding:3px 7px; border:2px solid #0e1012; box-shadow:0 2px 6px rgba(0,0,0,.45); }
.et-linea svg { width:15px; height:15px; }
.et-punto { transform:translate(-50%, calc(-100% - 16px)); background:#f4f6f7; color:#1b1e21; font-weight:600;
  font-size:13.5px; border-radius:7px; padding:4px 9px; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.et-punto::after { content:""; position:absolute; left:50%; bottom:-11px; width:2px; height:11px; background:#f4f6f7; transform:translateX(-50%); }
.et-cambio { transform:translate(-50%, calc(-100% - 12px)); background:#f4f6f7; color:#1b1e21; border-radius:7px;
  width:28px; height:26px; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.et-cambio svg { width:15px; height:15px; }

.linea-tiempo { list-style:none; margin:14px 0 2px; padding:0; }
.lt { display:grid; grid-template-columns:44px 18px 1fr; column-gap:8px; }
.lt .h { font-size:13px; font-weight:600; text-align:right; padding-top:1px; }
.lt .via { position:relative; }
.lt .via::before { content:""; position:absolute; left:7px; top:4px; bottom:-4px; width:4px; border-radius:2px; background:var(--c, #5c666c); }
.lt.pie .via::before { background:none; border-left:3px dotted #6b757b; left:7.5px; width:0; }
.lt.fin .via::before { display:none; }
.lt .via i { position:absolute; left:2px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--panel); border:3px solid var(--c, #9aa4a9); z-index:1; }
.lt .t { padding-bottom:14px; font-size:14px; }
.lt .t small { display:block; color:var(--sec); font-size:13px; margin-top:2px; }

/* ---------- paradas y líneas ---------- */
.buscar { display:flex; align-items:center; gap:10px; background:var(--campo); border-radius:var(--radio-campo); height:44px; padding:0 14px; margin-top:8px; }
.buscar svg { width:18px; height:18px; color:var(--sec); flex:none; }
.buscar input { flex:1; border:0; background:transparent; outline:none; }
.buscar input::placeholder { color:var(--sec); }
.item { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; text-align:left;
  padding:10px 6px; border-radius:8px; }
.item:hover { background:var(--campo); }
.item + .item { border-top:1px solid var(--borde); }
.item .nom { flex:1; min-width:0; }
.item .nom small { display:block; color:var(--sec); font-size:12.5px; margin-top:2px; }
.chips { display:flex; gap:3px; flex-wrap:wrap; }
.chips .chip { font-size:11px; min-width:22px; padding:0 4px; }
.volver { border:0; background:transparent; color:var(--sec); display:inline-flex; align-items:center; gap:4px; padding:4px 0; font-size:14px; }
.volver svg { width:16px; height:16px; }
.tablero { margin-top:12px; }
.salida { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--borde); }
.salida .dest { font-size:14px; }
.salida .cuando { text-align:right; font-size:14px; white-space:nowrap; }
.salida .cuando.real { color:var(--vivo); font-weight:700; }
.salida .cuando small { display:block; color:var(--sec); font-weight:400; font-size:12px; }
.acciones { display:flex; gap:8px; margin-top:14px; }
.acciones .pastilla { flex:1; justify-content:center; height:38px; }
.ojo { width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:var(--sec); display:grid; place-items:center; }
.ojo:hover { background:var(--panel); }
.ojo svg { width:18px; height:18px; }
.apagada { opacity:.4; }


/* ---------- como jakdojade: inicio, atajos, «Mostrar rutas» ---------- */
.listo { min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:12px; }
.en-vivo { align-self:flex-end; display:inline-flex; align-items:center; gap:6px; background:#26292d; border-radius:999px;
  padding:5px 11px 5px 8px; font-size:12.5px; color:#dfe4e6; min-height:1px; animation:subir .35s ease-out backwards; }
.en-vivo:empty { display:none; }
.en-vivo .ondas { position:static; width:15px; height:15px; }
.btn-rutas { height:50px; border:0; border-radius:12px; background:var(--origen); color:#0e1012; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 6px 18px rgba(61,220,132,.25);
  animation:subir .35s cubic-bezier(.2,.7,.3,1) backwards; transition:transform .12s ease, filter .15s; }
.btn-rutas:hover { filter:brightness(1.07); }
.btn-rutas:active { transform:scale(.985); }
.btn-rutas svg { width:19px; height:19px; transition:transform .2s; }
.btn-rutas:hover svg { transform:translateX(3px); }
.item.reciente { gap:12px; }
.ico-rec { width:30px; height:30px; border-radius:50%; background:var(--campo); display:grid; place-items:center; color:#c9d1d5; flex:none; }
.ico-rec svg { width:16px; height:16px; }
.sugerencias.con-atajos { padding-top:0; max-height:420px; }
.atajos { display:flex; gap:4px; padding:12px 4px 10px; margin:0 -6px 6px; border-bottom:6px solid #1b1e21; justify-content:space-around; }
.atajo { flex:1; max-width:92px; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:13px; color:#c9d1d5; padding:4px 2px; border-radius:10px; min-width:0; }
.atajo > span:last-child { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atajo:hover { background:var(--campo); }
.atajo-ico { width:38px; height:38px; border-radius:50%; background:var(--campo); display:grid; place-items:center; color:#dfe4e6; }
.atajo:hover .atajo-ico { background:var(--campo-hover); }
.atajo.puesto .atajo-ico { background:#173f2b; color:var(--origen); }
.atajo-ico svg { width:18px; height:18px; }
.sug-pista { background:#0f3b52; color:#d8f0ff; font-size:13px; border-radius:8px; padding:9px 11px; margin:0 0 6px; }
.sug .sug-ico.direccion, .sug .sug-ico.calle, .sug .sug-ico.parada { background:transparent; border:1.5px solid #5c666c; }

/* ---------- hora del viaje, último bus y tipo de día ---------- */
.pastilla .flechita { width:13px; height:13px; margin-left:-3px; opacity:.7; transition:transform .2s; }
#btnHora[aria-expanded="true"] .flechita { transform:rotate(180deg); }
#btnHora.elegida { background:#173f2b; color:#bff5d4; }
.panel-hora { display:none; margin-top:10px; background:var(--campo); border-radius:var(--radio-campo); padding:10px; }
.panel-hora.abierto { display:block; animation:subir .25s cubic-bezier(.2,.7,.3,1); }
.seg { display:flex; background:#1f2226; border-radius:9px; padding:3px; gap:2px; }
.seg button { flex:1; border:0; background:transparent; color:var(--sec); border-radius:7px; padding:7px 4px; font-size:13px; font-weight:600; }
.seg button.activa { background:var(--campo-hover); color:var(--texto); }
.fila-hora { display:flex; gap:8px; margin-top:8px; align-items:stretch; }
.fila-hora .seg { flex:1; }
.fila-hora input { width:110px; border:0; border-radius:9px; background:#1f2226; color:var(--texto); padding:0 10px; font-size:16px; font-weight:700; color-scheme:dark; }
.panel-hora.ahora .fila-hora { display:none; }
.tipo-dia { margin:9px 2px 0; font-size:12.5px; color:var(--sec); min-height:1em; }
.tipo-dia b { color:#f2c94c; font-weight:600; }
.btn-listo { width:100%; margin-top:10px; height:38px; border:0; border-radius:9px; background:var(--origen); color:#0e1012; font-weight:700; }
.res-hora { grid-column:2; font-style:normal; font-size:12.5px; color:#bff5d4; margin-top:-2px; }
.res-hora:empty { display:none; }
.ultimo { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  background:#5a2a12; color:#ffc8a3; border-radius:5px; padding:1px 6px; white-space:nowrap; }
.r-l2 .ultimo { margin-left:2px; }
.banda-dia { display:flex; gap:8px; align-items:center; background:#3a3220; color:#f3dfae; border-radius:10px; padding:8px 11px;
  font-size:13px; margin-bottom:10px; }
.banda-dia svg { width:16px; height:16px; flex:none; }

/* ---------- avisos, atajos, alternativas, avísame, opinión ---------- */
.avisos-portada { margin-bottom:14px; display:grid; gap:6px; }
.avisos-portada details.aviso-linea { display:block; margin:0; }
.avisos-portada summary { display:flex; gap:8px; align-items:flex-start; cursor:pointer; list-style:none; }
.avisos-portada summary::-webkit-details-marker { display:none; }
.avisos-portada details p { margin:6px 0 0 23px; }
.fila-ir { display:flex; gap:8px; margin-bottom:16px; }
.ir-a { flex:1; display:flex; align-items:center; gap:8px; justify-content:center; height:44px; border:0; border-radius:12px;
  background:#173f2b; color:#bff5d4; font-weight:700; font-size:14.5px; }
.ir-a:hover { filter:brightness(1.12); }
.ir-a svg { width:18px; height:18px; }
.alternativa { display:flex; gap:10px; align-items:flex-start; background:var(--panel); border-radius:12px; padding:11px 14px;
  font-size:13px; color:#dfe4e6; margin:4px 0 10px; }
.alternativa svg { width:20px; height:20px; flex:none; color:var(--origen); }
.acciones-tramo { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.mini { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:999px; border:1px solid #4d565c;
  background:transparent; font-size:12.5px; font-weight:600; }
.mini svg { width:14px; height:14px; }
.mini.activo { background:#173f2b; border-color:#2a8a57; color:#bff5d4; }
.opina { font-size:12px; color:var(--sec); display:inline-flex; gap:4px; align-items:center; }
.opina button { border:0; background:var(--campo); border-radius:999px; padding:3px 9px; font-size:12px; }
.opina button:hover { background:var(--campo-hover); }
.nota-dem { color:#f3dfae !important; }
.nota-dem a, .bonos a { color:#9fd3ff; }
.bonos { margin-top:6px; font-size:12.5px; }
.bonos summary { cursor:pointer; color:#9fd3ff; font-weight:600; }
.bonos ul { margin:6px 0 4px; padding-left:18px; color:#dfe4e6; }
.bonos li { margin:3px 0; line-height:1.4; }
.toast { position:fixed; z-index:3000; left:50%; bottom:24px; transform:translate(-50%, 30px); opacity:0; pointer-events:none;
  background:#123d29; color:#d9fbe7; border:1px solid #2a8a57; border-radius:12px; padding:11px 16px; max-width:min(92vw, 460px);
  font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:opacity .25s, transform .25s; }
.toast.visible { opacity:1; transform:translate(-50%, 0); }
.sin-conexion { display:none; position:absolute; z-index:1002; top:12px; left:50%; transform:translateX(-50%);
  background:#4a2323; color:#ffd0d0; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; }
body.sin-red .sin-conexion { display:block; }
.opciones select { background:var(--panel); color:var(--texto); border:1px solid var(--borde); border-radius:7px; padding:3px 6px; }
/* accesibilidad */
body.letra-grande .panel { zoom:1.15; }
body.letra-grande .panel { max-height:none; }
body.contraste { --sec:#d2d9dd; --borde:#6b757b; --campo:#30353a; }
body.contraste .panel { background:#000; }
body.contraste .ruta, body.contraste .seccion, body.contraste .det .det-res { background:#0c0d0e; border:1px solid #6b757b; }
body.contraste .gris, body.contraste .vacio, body.contraste .mn, body.contraste .dur { color:#e6eaec !important; }
body.contraste .chip-o, body.contraste .cuadro { border-color:#e6eaec !important; }

/* ---------- horarios ---------- */
.pestanas { display:flex; gap:4px; margin:12px -16px -12px; padding:0 12px; }
.pestanas button { border:0; background:transparent; color:var(--sec); padding:10px 10px 11px; font-size:14.5px; display:inline-flex;
  align-items:center; gap:7px; position:relative; }
.pestanas button svg { width:16px; height:16px; }
.pestanas button::after { content:""; position:absolute; left:6px; right:6px; bottom:0; height:2.5px; border-radius:2px;
  background:var(--origen); transform:scaleX(0); transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.pestanas button.activa { color:var(--origen); }
.pestanas button.activa::after { transform:scaleX(1); }
.pestanas button small { font-size:11.5px; background:var(--campo); color:var(--sec); border-radius:999px; padding:0 6px; }
.sub { font-size:13px; font-weight:600; color:var(--sec); margin:2px 0 10px; }
.sub + .item, h2 + .item { border-top:0; }
* + .sub { margin-top:18px; }
.rejilla { display:flex; flex-wrap:wrap; gap:8px; }
.cuadro { height:38px; min-width:50px; padding:0 10px; border-radius:8px; border:1.5px solid #4d565c; background:transparent; font-weight:600; font-size:15px;
  position:relative; overflow:hidden; transition:background .15s, border-color .15s, transform .1s; animation:fundido .3s ease-out backwards; }
.cuadro::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c); }
.cuadro:hover { background:var(--campo); border-color:#6b757b; }
.cuadro:active { transform:scale(.96); }
.salidas { margin:22px -16px 0; padding:16px 16px 4px; border-top:6px solid #121416; }
.pista { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; }
.pista svg { width:15px; height:15px; color:#f2c94c; }
.fav { padding:8px 0 10px; }
.fav + .fav { border-top:1px solid var(--borde); }
.fav-nom { border:0; background:transparent; padding:0; font-weight:600; font-size:15px; text-align:left; margin-bottom:6px; }
.fav-nom:hover { text-decoration:underline; }
.fav-paso { display:grid; grid-template-columns:18px auto 1fr auto; gap:8px; align-items:center; padding:4px 0; font-size:13.5px; }
.fav-paso > svg { width:17px; height:17px; color:#fff; }
.fav-paso .dest { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }
.fav-paso .cuando { white-space:nowrap; font-weight:600; }
.fav-paso .cuando.real { color:var(--vivo); display:inline-flex; align-items:center; gap:4px; }
.fav-paso .ondas { position:static; width:15px; height:15px; }
.vacio.peq { font-size:13px; margin:2px 0; }
.redondo.plano { background:transparent; }
.redondo.plano:hover { background:var(--campo); }
.par-cab { display:flex; justify-content:space-between; margin:-6px -8px 0; }
.estrella.on { color:#f2c94c; }
.estrella svg { width:20px; height:20px; }
.chip-btn { border:0; background:transparent; padding:0; }
.chip-btn:hover .chip { filter:brightness(1.15); }
.lin-cab { margin:-14px -16px 6px; padding:8px 16px 0; position:sticky; top:-14px; background:var(--panel); z-index:3; border-bottom:1px solid var(--borde); }
.lin-cab .redondo { margin-left:-8px; }
.lin-chip { display:flex; align-items:center; gap:7px; margin-top:8px; }
.lin-chip svg { width:20px; height:20px; color:#fff; }
.lin-chip .chip-o { border:1.5px solid; border-radius:6px; padding:0 7px; font-weight:700; font-size:16px; }
.lin-dest { font-size:19px; font-weight:700; letter-spacing:.01em; margin:14px 0 2px; }
.lin-cab .pestanas { margin:8px -16px 0; }
.tl { list-style:none; margin:6px 0 0; padding:0; }
.tl li { position:relative; animation:subir .35s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--n) * 22ms); }
.tl li::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:3px; background:#e8ecee; }
.tl li.ini::before { top:50%; }
.tl li.fin::before { bottom:50%; }
.tl button { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:16px; padding:12px 6px 12px 8px;
  text-align:left; font-size:14.5px; border-radius:8px; position:relative; }
.tl button:hover { background:var(--campo); }
.tl i { width:16px; height:16px; border-radius:50%; background:var(--panel); border:3px solid #e8ecee; flex:none; position:relative; z-index:1; }
.tl li.ini i, .tl li.fin i { border-color:var(--c); background:var(--c); box-shadow:0 0 0 3px var(--panel), 0 0 0 5px #e8ecee; }
.tl span { flex:1; min-width:0; }
.bus-aqui { width:24px; height:24px; border-radius:7px; background:var(--c); color:#fff; display:grid; place-items:center; font-style:normal; }
.bus-aqui svg { width:15px; height:15px; }
.variantes .item.sel { background:var(--campo); }
@media (prefers-reduced-motion: reduce) { .tl li, .cuadro, .btn-rutas, .en-vivo { animation:none !important; } }

/* ---------- navegación inferior ---------- */
.nav { display:flex; border-top:1px solid var(--borde); }
.nav button { flex:1; border:0; background:transparent; color:var(--sec); padding:10px 0 12px;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12.5px; }
.nav button svg { width:20px; height:20px; }
.nav button.activa { color:var(--texto); }

/* ---------- móvil: webapp a pantalla completa ---------- */
html, body { overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
button, .asa, label { touch-action:manipulation; }
.asa { display:none; }
@media (max-width:640px) {
  html, body { height:100dvh; overflow:hidden; }
  .panel { top:auto; left:0; right:0; bottom:0; width:auto; height:var(--alto-panel, 58dvh); max-height:none;
    border-radius:18px 18px 0 0; padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 30px rgba(0,0,0,.45); transition:height .28s cubic-bezier(.2,.7,.3,1); }
  .panel.arrastrando { transition:none; }
  .panel.alto { border-radius:0; }
  .asa { display:flex; justify-content:center; align-items:center; height:22px; flex:none; cursor:grab; touch-action:none; }
  .asa span { width:40px; height:5px; border-radius:3px; background:#4a5257; }
  .panel .cab { padding-top:0; touch-action:none; }
  .panel.alto .asa { height:calc(14px + env(safe-area-inset-top)); align-items:flex-end; }
  .controles { top:calc(12px + env(safe-area-inset-top)); right:12px; }
  .controles .grupo:first-child { display:none; }   /* en el móvil se acerca con dos dedos */
  .aviso { top:calc(12px + env(safe-area-inset-top)); left:12px; right:62px; }
  .campo input, select, .hoja input { font-size:16px; }   /* evita que iOS acerque la página al escribir */
  .nav button { padding-bottom:8px; }
  .hoja { border-radius:inherit; }
}

/* hoja de opciones de ruta (como «Połączenie» de jakdojade) */
.hoja { position:absolute; inset:0; z-index:20; background:var(--panel); display:flex; flex-direction:column;
  transform:translateY(24px); opacity:0; transition:transform .22s ease, opacity .22s ease; }
.hoja.abierta { transform:none; opacity:1; }
.hoja[hidden] { display:none; }
.hoja-cab { display:flex; justify-content:flex-end; padding:12px 12px 0; }
.hoja-cuerpo { flex:1; overflow-y:auto; padding:0 18px 18px; }
.hoja-cuerpo h2 { font-size:18px; font-weight:700; margin:22px 0 12px; }
.hoja-cuerpo h2:first-child { margin-top:4px; }
.hoja-pie { padding:12px 18px 16px; border-top:1px solid var(--borde); }
.hoja-pie .btn-rutas { width:100%; justify-content:center; }
.tipo-ruta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tipo-ruta button { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:12px;
  border:1.5px solid var(--borde); background:transparent; color:var(--sec); font-weight:600; font-size:14px; }
.tipo-ruta button svg { width:26px; height:26px; }
.tipo-ruta button.activa { border-color:var(--origen); color:var(--texto); background:rgba(61,220,132,.08); }
.tipo-ruta button.activa svg { color:var(--origen); }
.tipo-ruta-txt { color:var(--sec); font-size:13px; margin:10px 2px 6px; min-height:18px; }
.interruptor, .fila-hoja { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  min-height:48px; padding:6px 2px; border:0; border-bottom:1px solid var(--borde); background:transparent;
  color:var(--texto); font-size:15px; text-align:left; cursor:pointer; }
.interruptor input { position:absolute; opacity:0; pointer-events:none; }
.interruptor i { flex:none; width:44px; height:26px; border-radius:999px; background:var(--campo-hover); position:relative; transition:background .15s; }
.interruptor i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#c9d0d4; transition:transform .15s, background .15s; }
.interruptor input:checked + i { background:var(--origen); }
.interruptor input:checked + i::after { transform:translateX(18px); background:#fff; }
.interruptor input:focus-visible + i { outline:2px solid var(--destino); outline-offset:2px; }
.fila-hoja em { font-style:normal; color:var(--sec); font-size:14px; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fila-hoja select { background:var(--campo); color:var(--texto); border:0; border-radius:8px; height:34px; padding:0 8px; font-size:14px; }
.medios { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.medios label { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 4px 10px;
  border-radius:12px; border:1.5px solid var(--borde); color:var(--sec); font-size:13px; font-weight:600; cursor:pointer; text-align:center; }
.medios label svg { width:28px; height:28px; }
.medios input { position:absolute; top:7px; right:7px; width:16px; height:16px; accent-color:var(--origen); }
.medios label:has(input:checked) { border-color:var(--origen); color:var(--texto); }
.evitar { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 6px; }
.evitar .cuadro.evitada { background:#5a2a2a; border-color:#c75a5a; text-decoration:line-through; }
.mas-tarde { display:block; width:100%; margin:6px 0 12px; height:42px; border:0; border-radius:10px; background:transparent;
  color:var(--destino); font-weight:600; font-size:15px; }
.mas-tarde:hover { background:var(--campo); }
.mas-tarde:disabled { color:var(--sec); }

/* ---------- webapp: banda de instalar o de versión nueva ---------- */
.banda-app { position:fixed; z-index:3100; left:50%; top:calc(12px + env(safe-area-inset-top)); transform:translateX(-50%);
  width:min(calc(100vw - 24px), 440px); display:flex; align-items:center; gap:10px; padding:10px 8px 10px 12px;
  background:#22272b; border:1px solid var(--borde); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:subir .3s cubic-bezier(.2,.7,.3,1); }
.banda-app[hidden] { display:none; }
.banda-app img { border-radius:9px; flex:none; }
.banda-app div { flex:1; min-width:0; display:flex; flex-direction:column; }
.banda-app b { font-size:14px; }
.banda-app small { color:var(--sec); font-size:12.5px; line-height:1.3; }
.banda-si { flex:none; height:34px; padding:0 14px; border:0; border-radius:999px; background:var(--origen); color:#0e1012; font-weight:700; }
.banda-si:empty { display:none; }
.banda-no { flex:none; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:var(--sec); display:grid; place-items:center; }
.banda-no svg { width:16px; height:16px; }
#btnCompartir { display:none; }
.con-resultados #btnCompartir { display:grid; place-items:center; }
@media (display-mode: standalone) { body { user-select:none; -webkit-user-select:none; } input, textarea { user-select:text; -webkit-user-select:text; } }