/* Demo de ruteo: controles, mapa SVG del parque y resultado.
   Los trazos usan --u (unidades del viewBox por píxel, lo pone js/demo/mapa.js)
   para medirse en píxeles de pantalla. Colores del mapa: MapInk y
   SegmentPalette de docs/DesingSystem.md. */

.demo { --critico: #B3261E; --critico-tinte: #FCE8E6; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head mapa" "ctrl mapa" "res mapa";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 5vw, 72px); row-gap: 28px;
}
.demo__head { grid-area: head; display: grid; gap: 16px; }
.demo__ctrl { grid-area: ctrl; display: grid; gap: 10px; }
.demo__res { grid-area: res; display: grid; gap: 16px; align-content: start; }
.demo__mapa {
  grid-area: mapa; align-self: start; position: sticky; top: calc(84px + env(safe-area-inset-top, 0px));
  /* 0.653 = ancho / alto del grafo (assets/grafo-parque.json) */
  width: min(46vw, 520px, calc((100vh - 150px) * .653)); min-width: 300px;
}
.demo__rotulo { font: 700 var(--t-over)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--piedra); margin-top: 8px; }

/* chips de destino (PngChip) y modos con su tiempo (como la vista previa de la app) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .demo__modos button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--filete); background: var(--superficie); color: var(--tinta);
  font: 600 .92rem/1.1 var(--f-ui);
  transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease);
}
.chips button { min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; }
.chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(26 37 32 / .2); }
.chips button:hover, .demo__modos button:hover { border-color: var(--tinta-2); }
.chips button:active, .demo__modos button:active { transform: scale(.97); }
.chips button[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.demo__modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.demo__modos button { min-height: 64px; padding: 10px 12px; border-radius: var(--r-ctl); text-align: left; }
.demo__modos svg { width: 22px; height: 22px; flex: none; color: var(--canopia); }
.demo__modos span { display: grid; gap: 3px; }
.demo__modos small { font: 500 .82rem/1 var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.demo__modos button[aria-checked="true"] { background: var(--canopia); border-color: var(--canopia); color: #fff; }
.demo__modos button[aria-checked="true"] svg, .demo__modos button[aria-checked="true"] small { color: var(--brote); }
.demo__modos button.sin-ruta:not([aria-checked="true"]) small { color: var(--critico); }

/* resultado */
.res { min-height: 230px; padding: 22px 22px 18px; border-radius: var(--r-card); background: var(--superficie); border: 1px solid var(--filete); box-shadow: var(--sombra-card); }
.res__fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.res__big { font: 400 clamp(2.4rem, 1.8rem + 2vw, 3.2rem)/1 var(--f-display); letter-spacing: -.01em; }
.res__dist { font: 600 1.1rem/1 var(--f-ui); color: var(--tinta-2); }
.res__sub { margin-top: 8px; color: var(--tinta-2); }
.res__tramos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; counter-reset: t; }
.res__tramos li {
  position: relative; display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0 7px 26px; font-size: var(--t-small); border-top: 1px dashed var(--filete);
}
.res__tramos li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--tinta); }
.res__tramos li.es-tren::before { border-radius: 2px; background: repeating-linear-gradient(90deg, #8A8A8A 0 3px, #fff 3px 5px); outline: 1.5px solid #8A8A8A; }
.res__tramos li.mas { color: var(--tinta-2); justify-content: flex-start; }
.res__tramos li.mas::before { background: var(--filete); }
.res__tramos b { font-weight: 600; }
.res__tramos span { color: var(--tinta-2); white-space: nowrap; }
.res__meta { margin-top: 14px; font-size: .8rem; color: var(--piedra); }
.res__alt {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--r-ctl); background: var(--brote); color: var(--canopia-prof); font: 600 .95rem/1 var(--f-ui); cursor: pointer;
}
.res__alt svg { width: 18px; height: 18px; }

/* aviso de alerta (PngNoticeBanner, tono alerta) */
.demo__aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--alerta-tinte); color: var(--alerta); }
.demo__aviso svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.demo__aviso p { font-size: var(--t-small); line-height: 1.5; color: #5C3F12; }
.demo__aviso button { border: 0; padding: 0; background: none; color: var(--alerta); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.demo__aviso.is-nuevo { animation: aviso-in .45s var(--ease); }
@keyframes aviso-in { from { transform: translateY(-6px); opacity: 0; } }
.demo__acciones { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.btn--alerta { --bg: var(--alerta-tinte); --fg: var(--alerta); border-color: #EBD3A4; }
.btn--texto { --bg: transparent; --fg: var(--canopia); min-height: 44px; padding: 0 6px; text-decoration: underline; text-underline-offset: 4px; }
.btn--texto:hover { box-shadow: none; }
.demo__nota { font-size: .82rem; color: var(--piedra); max-width: 34em; }

/* ── El mapa ─────────────────────────────────────────────────────────── */
.mapa {
  position: relative; aspect-ratio: var(--ratio, .653); overflow: hidden;
  border-radius: var(--r-sheet); border: 1px solid var(--filete);
  background: radial-gradient(circle, rgb(26 37 32 / .09) 1px, transparent 1.4px) 0 0 / 20px 20px, var(--superficie);
  box-shadow: 0 30px 60px -36px rgb(13 42 27 / .35), var(--sombra-card);
  touch-action: manipulation;
}
.mapa__cargando { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--tinta-2); }
.mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arista { stroke: #CDBFAB; stroke-width: calc(var(--u) * 2.6px); transition: stroke .2s, stroke-width .2s; }
.arista.circ { stroke-width: calc(var(--u) * 4px); }
.arista.c1 { stroke: var(--c-superior); } .arista.c2 { stroke: var(--c-inferior); }
.arista.c3 { stroke: var(--c-garganta); } .arista.c4 { stroke: var(--c-macuco); }
.arista.escalera { stroke: #B8700A; stroke-width: calc(var(--u) * 3.4px); }
.arista.tren { stroke: #8A8A8A; stroke-width: calc(var(--u) * 2.6px); stroke-dasharray: calc(var(--u) * 7px) calc(var(--u) * 5px); stroke-linecap: butt; }
.arista.is-hover { stroke: var(--tinta); stroke-width: calc(var(--u) * 5px); }
.hit { stroke: transparent; stroke-width: calc(var(--u) * 18px); pointer-events: stroke; cursor: pointer; }
.mapa__explorados path { stroke: var(--canopia); stroke-opacity: .5; stroke-width: calc(var(--u) * 7px); animation: punto .5s var(--ease) both; }
.mapa__explorados.is-tenue path { stroke-opacity: .14; transition: stroke-opacity .8s; }
@keyframes punto { from { stroke-width: 0; } 45% { stroke-width: calc(var(--u) * 14px); stroke-opacity: .8; } }
.ruta__casco { stroke: #fff; stroke-width: calc(var(--u) * 10.5px); }
.ruta__linea { stroke: var(--tinta); stroke-width: calc(var(--u) * 5.5px); }
.ruta__tren { stroke: #fff; stroke-width: calc(var(--u) * 2px); stroke-dasharray: calc(var(--u) * 5px) calc(var(--u) * 6px); stroke-linecap: butt; animation: aparecer .4s both; }
@keyframes aparecer { from { opacity: 0; } }
.cerrada { stroke: var(--critico); stroke-width: calc(var(--u) * 4.5px); stroke-dasharray: calc(var(--u) * 5px) calc(var(--u) * 4px); stroke-linecap: butt; }
.yo { transition: opacity .3s; }
.yo__halo { stroke: rgb(30 106 143 / .22); stroke-width: calc(var(--u) * 26px); animation: latir 1.8s ease-out infinite; }
.yo__borde { stroke: #fff; stroke-width: calc(var(--u) * 16px); }
.yo__punto { stroke: var(--info); stroke-width: calc(var(--u) * 11px); }
@keyframes latir { 0% { stroke-width: calc(var(--u) * 14px); stroke-opacity: 1; } 100% { stroke-width: calc(var(--u) * 34px); stroke-opacity: 0; } }

/* lugares: el punto es el ancla (0×0) y la etiqueta cuelga de un costado */
.mapa__lugar { position: absolute; z-index: 2; width: 0; height: 0; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 .78rem/1 var(--f-ui); }
button.mapa__lugar { cursor: pointer; }
.mapa__lugar i {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--c, var(--canopia)); border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(26 37 32 / .35), 0 2px 6px rgb(26 37 32 / .25);
  transition: transform .25s var(--ease);
}
.mapa__lugar span {
  position: absolute; top: -11px; left: 14px; white-space: nowrap; padding: 4px 7px; border-radius: 6px;
  background: rgb(255 255 255 / .94); box-shadow: 0 1px 4px rgb(26 37 32 / .18); transition: background-color .2s, color .2s;
}
.lbl-izq span { left: auto; right: 14px; }
.lbl-arriba span { top: -36px; left: 0; transform: translateX(-50%); }
.lbl-abajo span { top: 13px; left: 0; transform: translateX(-50%); }
button.mapa__lugar:hover i { transform: scale(1.25); }
.mapa__lugar.is-activo i { transform: scale(1.35); box-shadow: 0 0 0 1px rgb(26 37 32 / .35), 0 0 0 7px rgb(26 37 32 / .12); }
.mapa__lugar.is-activo span { background: var(--tinta); color: #fff; }
.mapa__lugar--origen i { --c: var(--info); }
.mapa__lugar--estacion i { left: -5px; top: -5px; width: 10px; height: 10px; border-width: 2px; border-radius: 3px; background: #6F7478; }
.mapa__lugar--estacion span { top: -10px; left: 10px; font: 500 .7rem/1 var(--f-ui); color: var(--tinta-2); background: rgb(255 255 255 / .85); box-shadow: none; padding: 3px 5px; }
.mapa__lugar--estacion.lbl-izq span { left: auto; right: 10px; }
.mapa__cruz {
  position: absolute; z-index: 1; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  background: var(--critico); box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgb(26 37 32 / .3); animation: aviso-in .3s var(--ease);
}
.mapa__cruz::before, .mapa__cruz::after { content: ""; position: absolute; left: 5px; top: 9px; width: 10px; height: 2px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.mapa__cruz::after { transform: rotate(-45deg); }
.mapa__tip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; margin: -58px 0 0 0; translate: -50% 0;
  padding: 7px 10px; border-radius: 8px; background: var(--tinta); color: #fff; font-size: .78rem; line-height: 1.3; white-space: nowrap;
}
.mapa__tip b { display: block; font-weight: 600; }
.mapa__tip span { color: rgb(255 255 255 / .7); }
.mapa__norte { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie); box-shadow: var(--sombra-flot); font: 700 .72rem/1 var(--f-ui); }
.mapa__norte::before { content: ""; position: absolute; top: 4px; border: 5px solid transparent; border-bottom: 7px solid var(--critico); border-top: 0; }
.mapa__norte span { margin-top: 6px; }
.mapa__escala { position: absolute; left: 16px; bottom: 14px; display: grid; gap: 4px; font: 600 .7rem/1 var(--f-ui); color: var(--tinta-2); }
.mapa__escala i { display: block; width: var(--ancho); min-width: 40px; height: 6px; border: 1.5px solid var(--tinta-2); border-top: 0; }
.mapa__ley { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--tinta-2); }
.mapa__ley li { display: inline-flex; align-items: center; gap: 6px; }
.mapa__ley li::before { content: ""; width: 16px; height: 4px; border-radius: 2px; background: var(--c, #CDBFAB); }
.mapa__ley .ley-tren::before { background: repeating-linear-gradient(90deg, #8A8A8A 0 5px, transparent 5px 8px); }
.mapa__ley .ley-esc::before { background: #B8700A; }
.mapa__ley .ley-cerr::before { background: repeating-linear-gradient(90deg, var(--critico) 0 4px, transparent 4px 7px); }
.mapa__osm { margin-top: 6px; font-size: .72rem; color: var(--piedra); }

@media (max-width: 900px) {
  .demo__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ctrl" "mapa" "res"; grid-template-rows: none; }
  .demo__mapa { position: static; width: min(100%, 460px); min-width: 0; margin-inline: auto; }
}
@media (max-width: 560px) {
  .demo__modos button { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; }
  .mapa__lugar--estacion span { display: none; }
  .mapa__lugar span { font-size: .72rem; padding: 3px 6px; }
  .mapa__lugar.lbl-movil-izq span { top: -11px; left: auto; right: 14px; transform: none; }
  .res { padding: 18px 16px 14px; }
}
.mapa__lugar--estacion.lbl-abajo span { top: 9px; left: 0; transform: translateX(-50%); }