/* ATLAS v3 — layout mobile-first */
#atlas-root { --g:#38ff74; --card:#0d1210; --line:#1e2a25; }
#atlas-root .atlas-bar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:.6rem; }
#atlas-root .atlas-searchwrap { position:relative; flex:1 1 240px; min-width:0; }
#atlas-root .atlas-results { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  background:rgba(11,16,14,.98); border:1px solid var(--line); border-radius:.6rem; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.6); max-height:min(58vh,420px); overflow-y:auto; }
#atlas-root .atlas-results .res-head { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:#7d9a8a; padding:.45rem .6rem; border-bottom:1px solid var(--line); position:sticky; top:0;
  background:rgba(11,16,14,.98); }
#atlas-root .atlas-results .res { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  padding:.45rem .6rem; background:none; border:0; border-bottom:1px solid #16201c; cursor:pointer; color:inherit; }
#atlas-root .atlas-results .res:last-child { border-bottom:0; }
#atlas-root .atlas-results .res:hover, #atlas-root .atlas-results .res.on { background:#121b17; }
#atlas-root .atlas-results .res img, #atlas-root .atlas-results .res .ph { width:32px; height:32px;
  border-radius:.35rem; object-fit:cover; background:#1a2420; flex-shrink:0; }
#atlas-root .atlas-results .res .ph.rd { background:#0e1a15; border:1px solid #2c4a3c; }
#atlas-root .atlas-results .res .tx { display:flex; flex-direction:column; min-width:0; gap:.1rem; }
#atlas-root .atlas-results .res .tx .line1 { display:flex; align-items:center; gap:.35rem; min-width:0; }
#atlas-root .atlas-results .res .tx .k { font-style:normal; font-size:.58rem; text-transform:uppercase;
  letter-spacing:.07em; font-weight:800; padding:.1rem .32rem; border-radius:.2rem; flex-shrink:0; }
#atlas-root .atlas-results .res .tx .k.dj { color:#38ff74; border:1px solid #2c4a3c; }
#atlas-root .atlas-results .res .tx .k.rd { color:#00d4ff; border:1px solid #234a56; }
#atlas-root .atlas-results .res .tx .k.ct { color:#ffd166; border:1px solid #4a4028; }
#atlas-root .atlas-results .res .tx .k.cy { color:#7fdfff; border:1px solid #1e4a5a; }
#atlas-root .atlas-results .res .tx .k.sy { color:#c4b5fd; border:1px solid #3a2f56; }
#atlas-root .atlas-results .res .ph.ct { background:#1c1810; border:1px solid #4a4028; }
#atlas-root .atlas-results .res .ph.cy { background:#0e1a1c; border:1px solid #1e4a5a; }
#atlas-root .atlas-results .res .ph.sy { background:#16101f; border:1px solid #3a2f56; }
#atlas-root .atlas-results .res.is-country .tx .line1 b { color:#ffd166; }
#atlas-root .atlas-results .res.is-city .tx .line1 b { color:#7fdfff; }
#atlas-root .atlas-results .res.is-style .tx .line1 b { color:#c4b5fd; }
#atlas-root .atlas-results .res .tx .k.ev { color:#ff4d6d; border:1px solid #4a2028; }
#atlas-root .atlas-results .res .tx b { font-size:.84rem; color:#eafff4; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#atlas-root .atlas-results .res .tx i { font-style:normal; font-size:.7rem; color:#7f9c8d;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#atlas-root .atlas-results .res .tx .pr { font-style:normal; font-size:.56rem; color:#ffd166;
  font-weight:800; letter-spacing:.06em; flex-shrink:0; }
#atlas-root .atlas-preview .pv-top .kind { display:inline-block; font-style:normal; font-size:.55rem;
  text-transform:uppercase; letter-spacing:.08em; font-weight:800; padding:.08rem .3rem;
  border-radius:.2rem; margin-bottom:.15rem; }
#atlas-root .atlas-preview .pv-top .kind.dj { color:#38ff74; border:1px solid #2c4a3c; }
#atlas-root .atlas-preview .pv-top .kind.rd { color:#00d4ff; border:1px solid #234a56; }
#atlas-root .atlas-preview .pv-top .kind.ev { color:#ff4d6d; border:1px solid #4a2028; }
#atlas-root .atlas-results .res .pr { font-style:normal; font-size:.58rem; color:#ffd166; font-weight:800; margin-left:.25rem; }
#atlas-root .atlas-results .res .rd { font-style:normal; font-size:.58rem; color:#38ff74; font-weight:800; margin-left:.25rem; }
#atlas-root .atlas-results .res-none { padding:.7rem .6rem; font-size:.8rem; color:#7f9c8d; }
#atlas-root .atlas-q { flex:1 1 220px; min-width:0; padding:.6rem .7rem; border-radius:.55rem;
  border:1px solid var(--line); background:#0a0e0d; color:#e6f3ec; font-size:.9rem; }
#atlas-root .atlas-tbtn { padding:.6rem .8rem; border-radius:.55rem; border:1px solid var(--line);
  background:var(--card); color:#cfe3d8; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; }
#atlas-root .atlas-tog { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:#9fb6aa;
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:.55rem; background:var(--card); white-space:nowrap; }
#atlas-root .atlas-tog input { accent-color:var(--g); }
#atlas-root .atlas-count { margin-left:auto; font-size:.78rem; color:var(--g); font-weight:700; white-space:nowrap; }

#atlas-root .atlas-body { display:grid; grid-template-columns:1fr; gap:.6rem; }
#atlas-root .atlas-side { display:none; }
#atlas-root .atlas-side.open { display:block; }
#atlas-root .atlas-switches, #atlas-root .atlas-styles {
  background:var(--card); border:1px solid var(--line); border-radius:.65rem; padding:.7rem; margin-bottom:.5rem; }
#atlas-root .atlas-switches h4, #atlas-root .atlas-styles h4 { margin:0 0 .45rem; font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--g); }
#atlas-root .sw { display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:#a9c0b3;
  padding:.28rem 0; cursor:pointer; }
#atlas-root .sw input { accent-color:var(--g); width:1.05rem; height:1.05rem; }
#atlas-root .chips { display:flex; flex-wrap:wrap; gap:.35rem; max-height:220px; overflow:auto; }
#atlas-root .chip { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:2rem;
  border:1px solid var(--line); background:#0a0e0d; color:#a9c0b3; font-size:.76rem; cursor:pointer; }
#atlas-root .chip.on { border-color:var(--g); color:#eafff4; }

#atlas-root .atlas-stage { position:relative; background:#080b0a; border:1px solid var(--line);
  border-radius:.8rem; overflow:hidden; aspect-ratio:4/3; touch-action:none; cursor:grab; }
#atlas-root .atlas-stage.drag { cursor:grabbing; }
#atlas-root .atlas-stage.pointing { cursor:pointer; }
#atlas-root #atlas-svg { width:100%; height:100%; display:block; }
#atlas-root .atlas-dj { cursor:pointer; transition:r .12s; }
#atlas-root .atlas-dj.prem { stroke:#ffd166; }
#atlas-root .atlas-dj.sel { stroke:#fff; stroke-width:.34; }
#atlas-root .atlas-rc, #atlas-root .atlas-ev { cursor:pointer; }
#atlas-root .atlas-rc .halo { animation:atlasPulse 2.2s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes atlasPulse { 0% { r:0.7; opacity:.9 } 70% { r:2.2; opacity:0 } 100% { r:2.2; opacity:0 } }

#atlas-root .atlas-zoom { position:absolute; right:.5rem; top:.5rem; display:flex; flex-direction:column; gap:.3rem; }
#atlas-root .atlas-zoom button { width:34px; height:34px; border-radius:.5rem; border:1px solid var(--line);
  background:rgba(8,11,10,.85); color:#a9c0b3; font-size:1.1rem; cursor:pointer; }
#atlas-root .atlas-legend { position:absolute; left:.5rem; bottom:.5rem; display:flex; gap:.7rem; flex-wrap:wrap;
  font-size:.68rem; color:#83a396; background:rgba(8,11,10,.78); padding:.3rem .55rem; border-radius:.5rem; }
#atlas-root .atlas-legend .d { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.25rem; vertical-align:middle; }
#atlas-root .atlas-legend .d.dj { background:var(--g); }
#atlas-root .atlas-legend .d.pr { background:var(--g); border:1px solid #ffd166; }
#atlas-root .atlas-legend .d.rd { background:#080b0a; border:1px solid var(--g); }
#atlas-root .atlas-legend .d.ln { background:var(--g); height:2px; width:14px; border-radius:0; }
#atlas-root .atlas-legend .d.ev { background:#ff4d6d; border-radius:0; }
#atlas-root .atlas-sheet .go { display:inline-block; margin-top:.6rem; font-size:.85rem; }

#atlas-root .atlas-sheet { z-index:95; position:absolute; left:0; right:0; bottom:0; max-height:72%;
  overflow:auto; background:rgba(10,15,13,.97); border-top:1px solid var(--line); border-radius:.9rem .9rem 0 0;
  padding:1rem .9rem 1.4rem; color:#dcece4; animation:atlasUp .18s ease-out; }
@keyframes atlasUp { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } }
#atlas-root .atlas-sheet .x { position:absolute; right:.6rem; top:.5rem; background:none; border:none;
  color:#7d9a8a; font-size:1.5rem; line-height:1; cursor:pointer; padding:.2rem .4rem; }
#atlas-root .sh-head { display:flex; gap:.7rem; align-items:center; }
#atlas-root .sh-head img, #atlas-root .sh-head .ph { width:64px; height:64px; border-radius:.55rem;
  object-fit:cover; background:#1a2420; flex-shrink:0; }
#atlas-root .atlas-sheet h3 { margin:0 0 .15rem; font-size:1.05rem; color:#f0fff8; }
#atlas-root .atlas-sheet .meta { font-size:.8rem; color:#8fab9c; }
#atlas-root .atlas-sheet .prem { font-size:.6rem; color:#ffd166; font-weight:800; letter-spacing:.08em; }
#atlas-root .atlas-sheet .tags { display:flex; flex-wrap:wrap; gap:.3rem; margin:.55rem 0; }
#atlas-root .atlas-sheet .tags i { font-style:normal; font-size:.7rem; padding:.2rem .5rem; border-radius:2rem;
  border:1px solid var(--line); color:#a9c0b3; cursor:pointer; }
#atlas-root .atlas-sheet .sh-sup { font-size:.82rem; color:var(--g); margin:.4rem 0; }
#atlas-root .atlas-sheet .sh-tags { font-size:.8rem; color:#8fab9c; margin:.3rem 0; }
#atlas-root .atlas-sheet .sh-live { font-size:.82rem; color:var(--g); font-weight:700; margin:.3rem 0; }
#atlas-root .atlas-sheet .sh-tags a { color:var(--g); text-decoration:none; }
#atlas-root .atlas-sheet:not([hidden]) ~ .atlas-preview,
#atlas-root .atlas-sheet:not([hidden]) ~ .atlas-linetip { display:none; }
#atlas-root .atlas-preview { position:absolute; z-index:70; pointer-events:none; width:230px;
  background:rgba(9,13,12,.97); border:1px solid #24332c; border-radius:.6rem; padding:.6rem;
  color:#dcece4; box-shadow:0 12px 34px rgba(0,0,0,.6); }
#atlas-root .pv-top { display:flex; gap:.5rem; align-items:center; }
#atlas-root .pv-top img, #atlas-root .pv-top .ph { width:40px; height:40px; border-radius:.4rem;
  object-fit:cover; background:#1a2420; flex-shrink:0; }
#atlas-root .pv-top .ph.rd { background:#0e1a15; border:1px solid #2c4a3c; }
#atlas-root .pv-top .ph.ev { background:#2a1113; border:1px solid #5a2028; }
#atlas-root .pv-top b { display:block; font-size:.86rem; color:#f0fff8; line-height:1.25; }
#atlas-root .pv-top i { font-style:normal; font-size:.72rem; color:#8fab9c; }
#atlas-root .pv-tags { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.4rem; }
#atlas-root .pv-tags i { font-style:normal; font-size:.64rem; padding:.14rem .4rem; border-radius:2rem;
  border:1px solid #23302a; color:#a9c0b3; }
#atlas-root .pv-badges { margin-top:.35rem; font-size:.62rem; color:#ffd166; letter-spacing:.06em; font-weight:700; }
#atlas-root .pv-sup { margin-top:.35rem; font-size:.7rem; color:#38ff74; }
#atlas-root .pv-live { margin-top:.35rem; font-size:.7rem; color:#38ff74; font-weight:700; }
#atlas-root .pv-cta { margin-top:.45rem; font-size:.64rem; color:#7d9a8a; border-top:1px solid #1c2723; padding-top:.35rem; }
@media (max-width: 859px) { #atlas-root .atlas-preview { display:none; } }

/* tablet: sidebar al costado */
@media (min-width: 860px) {
  #atlas-root .atlas-body { grid-template-columns:270px 1fr; gap:.8rem; }
  #atlas-root .atlas-side { display:block; max-height:640px; overflow:auto; }
  #atlas-root .atlas-tbtn { display:none; }
  #atlas-root .atlas-stage { aspect-ratio:16/10; }
  #atlas-root .atlas-sheet { left:auto; right:.6rem; bottom:.6rem; width:300px; max-height:calc(100% - 1.2rem);
    border:1px solid var(--line); border-radius:.8rem; animation:none; }
}
@media (max-width: 859px) {
  #atlas-root .atlas-stage { aspect-ratio:1/1; }
}
@media (max-width: 520px) {
  #atlas-root .atlas-bar { gap:.35rem; }
  #atlas-root .atlas-count { width:100%; text-align:right; margin-left:0; }
  #atlas-root .atlas-legend { font-size:.6rem; gap:.45rem; }
}
#atlas-root .atlas-origin-banner { display:flex; align-items:center; gap:.4rem; margin-bottom:.55rem;
  padding:.5rem .7rem; border:1px solid #2c4a3c; border-radius:.55rem; background:#0f1a15;
  font-size:.8rem; color:#cfe3d8; }
#atlas-root .atlas-origin-banner b { color:#38ff74; }
#atlas-root .atlas-origin-banner button { margin-left:auto; background:none; border:1px solid #2c4a3c;
  color:#9fbbad; font-size:.72rem; padding:.2rem .5rem; border-radius:.4rem; cursor:pointer; }
#atlas-root .sup-box { margin:.55rem 0 .2rem; background:#0c1412; border:1px solid #1c2723;
  border-radius:.55rem; padding:.6rem; }
#atlas-root .sup-head { display:flex; align-items:center; gap:.4rem; }
#atlas-root .sup-head b { font-size:.78rem; color:#38ff74; text-transform:uppercase; letter-spacing:.08em; }
#atlas-root .sup-head i { font-style:normal; display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%; border:1px solid #2c4a3c; color:#8fb0a0;
  font-size:.6rem; font-weight:700; cursor:help; }
#atlas-root .sup-note { font-size:.68rem; color:#7d9a8a; margin:.3rem 0 .45rem; line-height:1.45; }
#atlas-root .sup-bars { display:flex; flex-direction:column; gap:.28rem; }
#atlas-root .sup-row { display:grid; grid-template-columns:64px 1fr auto; gap:.4rem; align-items:center;
  background:none; border:0; padding:.16rem 0; cursor:pointer; text-align:left; }
#atlas-root .sup-row:hover .nm { color:#eafff4; }
#atlas-root .sup-row .nm { font-size:.72rem; color:#a9c0b3; font-family:Verdana,Geneva,sans-serif; }
#atlas-root .sup-row .nm em { font-style:normal; font-size:.6rem; color:#6d8a7b; }
#atlas-root .sup-row .bar { height:.42rem; background:#16201c; border-radius:2rem; overflow:hidden; }
#atlas-root .sup-row .bar i { display:block; height:100%; border-radius:2rem; }
#atlas-root .sup-row .vv { font-size:.68rem; color:#8fb0a0; min-width:3.4rem; text-align:right; }
#atlas-root .sup-cities { margin-top:.4rem; font-size:.68rem; color:#6d8a7b; }
#atlas-root .atlas-linetip { position:absolute; z-index:70; pointer-events:none; background:rgba(9,13,12,.97);
  border:1px solid #2c4a3c; border-radius:.45rem; padding:.35rem .5rem; display:flex; flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.55); }
#atlas-root .atlas-linetip b { font-size:.76rem; color:#eafff4; font-family:Verdana,Geneva,sans-serif; }
#atlas-root .atlas-linetip i { font-style:normal; font-size:.68rem; color:#8fb0a0; }
#atlas-root .atlas-linetip u { text-decoration:none; font-size:.62rem; color:#6d8a7b; }
#atlas-root #g-lines .ln-lab { font-family:Verdana,Geneva,sans-serif; pointer-events:none; }
@media (max-width: 859px) { #atlas-root .atlas-linetip { display:none; } }

#atlas-root .atlas-legend .d.rdx { background:#080b0a; border:1px solid #00d4ff; border-radius:2px; }
#atlas-root .atlas-sheet .kind2 { display:inline-block; font-size:.55rem; text-transform:uppercase;
  letter-spacing:.08em; font-weight:800; padding:.14rem .38rem; border-radius:.22rem; margin-bottom:.35rem;
  border:1px solid #2c4a3c; color:#38ff74; }
#atlas-root .atlas-sheet .kind2.rd { border-color:#234a56; color:#00d4ff; }
#atlas-root .atlas-sheet .cta2 { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
#atlas-root .atlas-sheet .cta2 .go2 { background:transparent; border:1px solid #38ff74; color:#38ff74; }

#atlas-root .atlas-sheet .sh-hero { width:100%; aspect-ratio:3/1; border-radius:.5rem; overflow:hidden;
  background:#0a0f0d; margin-bottom:.45rem; }
#atlas-root .atlas-sheet .sh-hero img { width:100%; height:100%; object-fit:cover; display:block; }
#atlas-root .atlas-sheet .sh-hero .ph { display:block; width:100%; height:100%; }

/* el mapa no lleva texto: las lineas de soporte se leen por color y forma */
#atlas-root #g-lines text { display: none; }

#atlas-root .sup-row.city .nm { color:#bff0ff; }
#atlas-root .sup-row.city .nm i { font-style:normal; font-size:.62rem; color:#5d8a94; margin-left:.2rem; }
#atlas-root .sup-legend { display:flex; align-items:center; gap:.3rem; margin-top:.45rem;
  font-size:.62rem; color:#6d8a7b; }
#atlas-root .sup-legend .sq, #atlas-root .sup-legend .ci { display:inline-block; width:.5rem; height:.5rem; }
#atlas-root .sup-legend .sq { background:#00d4ff; border-radius:1px; margin-left:.2rem; }
#atlas-root .sup-legend .ci { background:#38ff74; border-radius:50%; margin-left:.5rem; }