@font-face { font-family: "Sora"; src: url("/vendor/fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/vendor/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --negro: #07090D; --grafito: #10151D; --azul: #1F6BFF; --senal: #63B3FF; --acero: #8A94A6; --niebla: #EEF2F8;
  --linea: rgba(150,180,230,.16); --glass: rgba(9,12,18,.72); --ease: cubic-bezier(.2,.7,.1,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--negro); color: var(--niebla); font: 400 15px/1.5 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
#gl.is-drag { cursor: grabbing; }
#gl.is-lot { cursor: pointer; }

/* Etiquetas */
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lb { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; will-change: transform; transition: opacity .3s; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); }
.lb b { display: block; font: 700 13px/1 "Sora", sans-serif; color: #fff; }
.lb small { display: block; font: 500 9px/1.3 "JetBrains Mono", monospace; color: #CFE3FF; letter-spacing: .04em; }
.lb.sel b { color: var(--senal); }
.mzl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; padding: 5px 10px; border-radius: 99px; background: rgba(31,107,255,.92); color: #fff; font: 600 11px/1 "Sora", sans-serif; letter-spacing: .04em; box-shadow: 0 6px 20px -6px rgba(31,107,255,.9), 0 0 0 1px rgba(255,255,255,.35); white-space: nowrap; transition: opacity .3s, background .3s; }
.mzl:hover { background: #fff; color: var(--negro); }

/* Amenidades */
.amenl { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); color: var(--negro); font: 600 12px/1 "Sora", sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6); transition: opacity .3s; }
.amenl b { color: var(--azul); }
.amenl::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(255,255,255,.62); border-bottom: 0; }
.amenl:hover { background: rgba(255,255,255,.92); }
.amenbtns .amenbtn { width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(99,179,255,.4); background: rgba(31,107,255,.18); cursor: pointer; font: 600 .85rem/1 "Sora", sans-serif; margin-bottom: 4px; }
.amenbtns .amenbtn:hover { background: var(--azul); }
.amenlist { margin: 4px 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.amenlist li { padding-left: 22px; position: relative; font-size: .92rem; }
.amenlist li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--senal); }
.amennota { font-size: .72rem; color: var(--acero); margin: 0 0 14px; }
.card--amen .card__btns--3 { grid-template-columns: 1fr 1fr; }
.card--amen .card__btns--3 #a3d { grid-column: 1 / -1; }
.orbitbar { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 9; display: none; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--linea); }
.orbitbar p { margin: 0; color: var(--acero); font-size: .55rem; } .orbitbar b { font: 600 1rem "Sora", sans-serif; }
body.orbita .orbitbar { display: flex; }
body.orbita .panel, body.orbita .stats, body.orbita #labels, body.orbita .hud, body.orbita .compass, body.orbita .zoom, body.orbita .home, body.orbita .izq, body.orbita .hint, body.orbita .card, body.orbita .title { display: none !important; }
body.orbita #gl { cursor: grab; }

/* Carga */
.loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--negro); transition: opacity .9s var(--ease), visibility .9s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark { width: 84px; overflow: visible; }
.loader__trace { fill: none; stroke: #fff; stroke-width: 8.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards; }
.loader__mark circle { fill: var(--azul); transform-box: fill-box; transform-origin: center; animation: pop .5s 1.2s var(--ease) both; }
.loader p { color: var(--acero); margin: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(0); } }

/* HUD */
.hud { position: fixed; inset: 14px; pointer-events: none; z-index: 2; }
.hud .c { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(99,179,255,.7); }
.hud .tl { left: 0; top: 0; border-width: 1px 0 0 1px; } .hud .tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.hud .bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .hud .br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.hud .cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }

/* Barra superior */
.top { position: fixed; top: 22px; left: 22px; right: 22px; z-index: 5; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand svg { width: 42px; height: 42px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.title h1 { margin: 0; font: 600 1.45rem/1.1 "Sora", sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.eyebrow { margin: 0 0 2px; color: var(--senal); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.stats { margin-left: auto; display: flex; gap: 6px; }
.stats div { padding: 8px 12px; border-radius: 12px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--linea); text-align: right; }
.stats b { display: block; font: 600 1.05rem/1 "Sora", sans-serif; color: #fff; letter-spacing: 0; text-transform: none; }
.stats span { font-size: .55rem; color: var(--acero); }

/* Panel */
.izq { position: fixed; left: 22px; top: 92px; bottom: 22px; width: 272px; z-index: 6; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.izq > * { pointer-events: auto; }
.panel, .mapa { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.panel { flex: 0 1 auto; }
.mapa { margin-top: auto; flex: none; }
.panel__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--linea); background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); cursor: pointer; text-align: left; transition: border-color .3s, background .3s; }
.panel__head:hover { border-color: var(--senal); }
.panel__head .ico { width: 18px; height: 18px; fill: none; stroke: var(--senal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.panel__head .mono { font-size: .68rem; color: #fff; }
.panel__head .chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--acero); border-bottom: 2px solid var(--acero); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.is-open > .panel__head .chev { transform: rotate(-135deg) translateY(-2px); }
.panel__body, .mapa__body { background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--linea); border-radius: 18px; padding: 16px; overflow: auto; scrollbar-width: thin; animation: abre .35s var(--ease); }
.panel__body { min-height: 0; flex: 0 1 auto; }
.minimap svg { max-height: 34vh; }
.panel:not(.is-open) .panel__body, .mapa:not(.is-open) .mapa__body { display: none; }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }
.mapa__body { padding: 12px 14px; }
.mapa__tip { margin: 6px 0 0; color: var(--acero); font-size: .55rem; text-align: center; }
.leyenda { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .56rem; color: #C9D3E3; }
.leyenda b { color: #fff; font-weight: 500; margin-left: 2px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw--d { background: #2F7BFF; box-shadow: 0 0 8px rgba(47,123,255,.8); } .sw--n { background: #07090D; border: 1px solid #5A6475; }
.search label { color: var(--acero); display: block; margin-bottom: 8px; }
.search__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.search select, .search input { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--linea); background: rgba(0,0,0,.35); font-size: .9rem; min-width: 0; }
.search select:focus, .search input:focus { outline: none; border-color: var(--azul); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--linea); background: rgba(255,255,255,.06); cursor: pointer; font-weight: 500; font-size: .88rem; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.btn:hover { border-color: var(--senal); transform: translateY(-1px); }
.btn--primary, .search .btn { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn--ghost { background: transparent; }
.sub { color: var(--acero); margin: 16px 0 8px; }
.mzgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mzgrid button { padding: 7px 0; border-radius: 8px; border: 1px solid var(--linea); background: rgba(255,255,255,.04); font: 600 .78rem/1 "Sora", sans-serif; cursor: pointer; transition: background .25s, border-color .25s; }
.mzgrid button:hover, .mzgrid button.is-on { background: var(--azul); border-color: var(--azul); }
.toggles { display: grid; gap: 8px; margin: 16px 0 4px; color: #C9D3E3; }
.toggles label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggles input { position: absolute; opacity: 0; pointer-events: none; }
.toggles span { position: relative; width: 30px; height: 16px; border-radius: 99px; background: #2A3240; transition: background .3s; flex: none; }
.toggles span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.toggles input:checked + span { background: var(--azul); }
.toggles input:checked + span::after { transform: translateX(14px); }
.minimap { margin: 0; }
.minimap svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.minimap p { margin: 6px 0 0; color: var(--acero); font-size: .55rem; text-align: center; }
.minimap .lot { fill: rgba(31,107,255,.35); stroke: rgba(207,227,255,.5); stroke-width: .6; }
.minimap .lot.nd { fill: rgba(7,9,13,.92); stroke: rgba(150,160,175,.45); }
.minimap .lot.sel { fill: #fff; }
.minimap .cone { fill: rgba(99,179,255,.18); stroke: rgba(99,179,255,.7); stroke-width: 1; }
.minimap .me { fill: #FF4B6E; stroke: #fff; stroke-width: 1.5; }

/* Ficha */
.card { position: fixed; right: 22px; top: 92px; z-index: 7; width: 300px; padding: 22px; border-radius: 20px; background: rgba(9,12,18,.86); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(99,179,255,.4); box-shadow: 0 30px 70px -20px #000; animation: cardIn .5s var(--ease); }
@keyframes cardIn { from { opacity: 0; transform: translateX(20px) scale(.98); } }
.card__x { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 1.5rem; color: var(--acero); cursor: pointer; }
.card__id { color: var(--senal); margin: 0; }
.estado { display: inline-block; margin: -2px 0 12px; padding: 4px 10px; border-radius: 99px; font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; background: rgba(47,123,255,.22); color: #9cc6ff; border: 1px solid rgba(99,179,255,.45); }
.estado--no { background: rgba(7,9,13,.8); color: #aab3c2; border-color: #4a5260; }
.card h2 { margin: 2px 0 10px; font: 600 1.9rem/1.1 "Sora", sans-serif; letter-spacing: -.03em; }
.card__area { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(31,107,255,.35), rgba(31,107,255,.08)); border: 1px solid rgba(99,179,255,.35); margin-bottom: 16px; }
.card__area b { font: 600 2.2rem/1 "Sora", sans-serif; letter-spacing: -.03em; color: #fff; }
.card__area span { color: #CFE3FF; font-weight: 500; }
.card dl { margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.card dt { font: 500 .58rem/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--acero); }
.card dd { margin: 3px 0 0; font-size: .92rem; }
.card dd.small { font-size: .7rem; text-transform: none; letter-spacing: 0; }
.card__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Brújula y zoom */
.compass { position: fixed; right: 22px; bottom: 60px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--acero); }
.compass__ring { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--linea); }
.compass__ring b, .compass__ring i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: .6rem; transform-origin: 0 0; }
.compass__ring b { color: #FF4B6E; }
.zoom { position: fixed; right: 92px; bottom: 60px; z-index: 5; display: flex; gap: 6px; }
.zoom button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linea); background: var(--glass); backdrop-filter: blur(10px); cursor: pointer; font-size: 1.1rem; transition: border-color .3s, background .3s; }
.zoom button:hover { border-color: var(--senal); background: rgba(31,107,255,.25); }
.home { position: fixed; right: 92px; bottom: 112px; z-index: 5; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 16px; border: 1px solid rgba(99,179,255,.5); background: rgba(31,107,255,.88); color: #fff; cursor: pointer; font: 600 .9rem "Sora", sans-serif; box-shadow: 0 12px 30px -10px rgba(31,107,255,.8); transition: transform .3s var(--ease), background .3s; }
.home__s { display: none; }
.home:hover { transform: translateY(-2px); background: #1F6BFF; }
.home svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hint { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 99px; background: var(--glass); border: 1px solid var(--linea); backdrop-filter: blur(10px); white-space: nowrap; transition: opacity .8s; }
.foot { position: fixed; left: 0; right: 0; bottom: 18px; z-index: 3; text-align: center; color: rgba(207,227,255,.55); font-size: .55rem; pointer-events: none; text-shadow: 0 1px 4px #000; }
.foot a { pointer-events: auto; color: var(--senal); }

@media (max-width: 760px) {
  .top { top: 14px; left: 14px; right: 14px; }
  .title h1 { font-size: 1.1rem; }
  .stats { display: none; }
  .izq { left: 14px; right: 14px; top: 74px; bottom: 14px; width: auto; }
  .mapa { width: 190px; }
  .minimap svg { max-height: 26vh; }
  .home { top: 16px; right: 14px; bottom: auto; height: 44px; padding: 0 14px 0 10px; font-size: .82rem; }
  .home__l { display: none; } .home__s { display: inline; }
  .leyenda { flex-direction: column; gap: 4px; }
  .hint { display: none; }
  .title h1 { max-width: 50vw; }
  .card { left: 14px; right: 14px; top: auto; bottom: 14px; width: auto; z-index: 8; }
  .compass { right: 14px; bottom: 74px; } .zoom { right: 14px; bottom: 150px; flex-direction: column; } .hint { bottom: 40px; font-size: .55rem; }
  .foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }