/* La vista conserva el mismo horizonte y sitúa cada radio sobre su azotea. */
#cityExplorer[hidden] { display: none; }
#cityExplorer {
  --node-ink: #89ffcf;
  display: flex; flex-direction: column; isolation: isolate;
  overflow: hidden; border: 1px solid #40596e; border-radius: 12px;
  color: #e9f2f6; background: #0a1724;
  box-shadow: 0 18px 65px #020711aa, inset 0 1px #abcbe122;
  container-type: inline-size;
}
.city-head, .city-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.city-head { padding: 15px 20px; background: linear-gradient(100deg, #132434, #0c1927); border-bottom: 1px solid #32495c; }
.city-caption { min-width: 0; }
.city-kicker {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  color: #9bd3c4; text-transform: uppercase; font: 600 10px/1.1 var(--mono); letter-spacing: .14em;
}
.city-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #80e0c1; }
.city-place { margin: 0; color: #f0f7fb; font: 500 clamp(15px, 2.3cqw, 22px)/1.16 var(--sans); }
.city-ranges {
  flex: none; display: flex; align-items: center; gap: 3px; padding: 3px;
  background: #050f19; border: 1px solid #324555; border-radius: 8px;
}
.city-ranges button {
  min-height: 36px; padding: 4px 12px; border: 1px solid transparent; border-radius: 5px;
  color: #b2c4d0; background: none; font: 500 12px/1.2 var(--mono); cursor: pointer;
}
.city-ranges button[aria-pressed="true"] { background: #203a40; border-color: #477467; color: #c5ffdf; }
.city-map {
  position: relative; flex: 1 1 auto; min-height: 76px; overflow: hidden; isolation: isolate;
  background: linear-gradient(#040b15, #031223 70%, #071928);
}
.city-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-route { stroke: #86ffd0; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .85; }
.city-packet { visibility: hidden; filter: drop-shadow(0 0 2px #81ffcb); }
.city-node {
  position: absolute; width: 46px; height: 46px; transform: translate(-50%, -50%); padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.city-node span {
  display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid #8dbccc; color: #e3f0fb; background: #0c1f32ed;
  box-shadow: 0 0 0 4px #0c1f3277; font: 600 13px/1 var(--mono);
}
.city-node[aria-pressed="true"] span { color: #042118; background: #9effcf; border-color: #ceffe9; box-shadow: 0 0 0 4px #54ffc22b, 0 0 16px #4effaa66; }
.city-controls { flex: none; padding: 14px 20px; background: #0e1b27; border-top: 1px solid #3a4f60; }
.city-copy { min-width: 0; }
.city-direction { font: 600 12px/1.5 var(--mono); color: #a4f7da; }
.city-report { margin: 4px 0 0; font: 400 14px/1.35 var(--sans); color: #c3d0dc; }
.city-send {
  flex: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px;
  padding: 3px 16px; border-radius: 7px; border: 1px solid #a1f2cf; background: #94edc9;
  color: #08261c; font: 600 14px/1.2 var(--sans); cursor: pointer;
}
.city-send:hover { background: #b3fbdc; }
.city-send[aria-disabled="true"] { cursor: progress; background: #80ad9c; border-color: #80ad9c; }
#cityExplorer button:focus-visible { outline: 2px solid #bcffe5; outline-offset: 2px; }
@container (max-width: 520px) {
  .city-head, .city-controls { gap: 9px; padding: 10px 12px; }
  .city-ranges button { min-height: 35px; padding: 3px 7px; font-size: 11px; }
  .city-kicker { font-size: 9px; }
  .city-report { font-size: 12px; line-height: 1.25; }
  .city-send { padding: 3px 10px; font-size: 13px; gap: 5px; }
  .city-direction { font-size: 11px; }
  .city-place { font-size: 15px; }
}

/* TFM con el formato del TFG: texto a la izquierda y la demostración a la derecha. */
#cityView .city-layout { max-width: 1440px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); }
.city-layout #cityExplorer { grid-area: auto; }
@media (max-width: 919px) {
  #cityView .city-layout { grid-template-columns: 1fr; max-width: 640px; }
}