:root {
  --green-900: #15291c;
  --green-700: #24503a;
  --green-500: #3c7a55;
  --green-100: #e8f2ec;
  --accent: #ffd166;
  --ink: #15291c;
  --muted: #6b7f73;
  --line: #dfe8e2;
  --bg: #f4f7f5;
  --water: #78b8ca;
  --grass: #96b985;
  --forest: #5f855f;
  --road: #d9cdb9;
  --road-main: #efe2c6;
  --selected: #e63946;
  --highlight: #ff8c42;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: flex; flex-direction: column; color: var(--ink); background: var(--bg); font-family: Manrope, system-ui, -apple-system, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.topbar { position: relative; z-index: 20; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; color: white; background: var(--green-900); }
.logo { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: white; background: var(--green-500); border-radius: 8px; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.identity { min-width: 0; }
.identity h1 { margin: 0; overflow: hidden; font-size: 15px; line-height: 1.15; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.identity p { margin: 2px 0 0; color: #9db8a8; font-size: 10.5px; font-weight: 600; }
.spacer { flex: 1; }
.view-link { flex: 0 0 auto; padding: 8px 12px; color: var(--green-900); background: var(--accent); border-radius: 9px; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.embedded .view-link { visibility: hidden; }
.searchbox input { width: 168px; height: 36px; padding: 0 11px; color: white; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; outline: none; font-size: 12px; font-weight: 600; }
.searchbox input::placeholder { color: #8aa596; }
.searchbox input:focus { width: 200px; background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }

#main { min-height: 0; flex: 1; display: flex; }
#map-wrap { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: hidden; touch-action: pan-y; background: #edf2ed; cursor: grab; }
#map-wrap.dragging { cursor: grabbing; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background-color: #e9efe9; background-image: linear-gradient(rgba(36,80,58,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(36,80,58,.045) 1px, transparent 1px); background-size: 28px 28px; }

.perimeter { fill: #dde7dc; stroke: var(--green-700); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.water { fill: var(--water); stroke: #4d8ca0; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.green { vector-effect: non-scaling-stroke; pointer-events: none; fill: var(--grass); stroke: #6d9464; stroke-width: .8; }
.green.forest { fill: var(--forest); stroke: #456b49; }
.green.marina { fill: #a9cdd6; stroke: #6f9faa; }
.building { fill: rgba(153,118,83,.8); stroke: #6f5137; stroke-width: .9; vector-effect: non-scaling-stroke; pointer-events: none; }

.street { fill: none; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.street.minor { stroke: var(--road); stroke-width: 2.6; }

/* Cada calle con nombre lleva dos trazos: uno grueso e invisible que recibe el dedo
   (una linea de 3 px es imposible de tocar en un telefono) y el visible encima. */
.named-street { cursor: pointer; }
.named-street .hit { fill: none; stroke: transparent; stroke-width: 18; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.named-street .ink { fill: none; stroke: var(--road); stroke-width: 4.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke .08s, stroke-width .08s; }
.named-street.main .ink { stroke: var(--road-main); stroke-width: 6.4; }
.named-street:hover .ink, .named-street:focus .ink { stroke: var(--highlight); stroke-width: 7; outline: none; }
.named-street:focus { outline: none; }
.named-street.selected .ink { stroke: var(--selected); stroke-width: 8; }

.street-label { fill: #14331f; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; opacity: 0; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3; stroke-linejoin: round; transition: opacity .12s linear; }
.street-label.visible { opacity: .95; }
.street-label.selected { fill: var(--selected); opacity: 1; }

.zoom-buttons { position: absolute; top: 14px; left: 14px; z-index: 10; display: grid; gap: 8px; }
.zoom-buttons button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: var(--ink); background: white; border: 0; border-radius: 9px; box-shadow: 0 2px 10px rgba(0,0,0,.23); font-size: 20px; font-weight: 800; }
.zoom-buttons button:hover { background: var(--green-100); }
.zoom-buttons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.legend { position: absolute; left: 14px; bottom: 14px; z-index: 9; display: flex; flex-wrap: wrap; gap: 8px 12px; max-width: calc(100% - 28px); padding: 8px 10px; color: var(--ink); background: rgba(255,255,255,.94); border-radius: 9px; box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 10px; font-weight: 700; pointer-events: none; }
.legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend i { width: 13px; height: 13px; border: 1px solid #4e735b; border-radius: 3px; }
.green-swatch { background: var(--grass); }
.water-swatch { background: var(--water); }
.street-swatch { background: var(--road-main); }
.building-swatch { background: rgba(153,118,83,.8); }

.toast { position: absolute; top: 14px; left: 50%; z-index: 30; display: none; margin: 0; padding: 8px 14px; color: white; background: var(--green-900); border-radius: 9px; box-shadow: 0 3px 12px rgba(0,0,0,.25); font-size: 12px; font-weight: 700; transform: translateX(-50%); }
.toast.visible { display: block; }

.lot-card { position: absolute; right: 14px; bottom: 14px; z-index: 11; width: min(340px, calc(100% - 28px)); color: var(--ink); background: white; border-radius: 11px; box-shadow: 0 8px 28px rgba(21,41,28,.24); }
.empty-card { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.selection-mark { width: 23px; height: 23px; flex: 0 0 23px; border: 4px double var(--highlight); transform: rotate(45deg); }
.empty-card strong { font-size: 13px; }
.empty-card p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.selected-card { padding: 14px; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 3px; color: var(--green-500); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card-heading h2 { margin: 0; font-size: 23px; line-height: 1.05; overflow-wrap: anywhere; }
#close-card { width: 31px; height: 31px; flex: 0 0 31px; padding: 0; color: var(--ink); background: var(--green-100); border: 0; border-radius: 8px; font-size: 21px; }
.selected-card dl { display: grid; gap: 1px; margin: 12px 0 0; overflow: hidden; background: var(--line); border-radius: 9px; }
.selected-card dl > div { min-width: 0; display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 10px; padding: 8px 10px; background: var(--green-100); }
.selected-card dt { color: var(--green-700); font-size: 10px; font-weight: 700; }
.selected-card dd { min-width: 0; margin: 0; font-size: 10px; font-weight: 800; overflow-wrap: anywhere; text-align: right; }
.selected-card dd strong { font-size: 16px; }

#facts-panel { width: 320px; flex: 0 0 320px; display: flex; flex-direction: column; justify-content: space-between; background: white; border-left: 1px solid var(--line); }
#facts-panel section { position: relative; padding: 18px; }
#facts-panel h2 { margin: 0; font-size: 15px; line-height: 1.3; }
#facts-panel h2 strong { font-size: 28px; }
.last-updated { margin: 5px 0 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.facts { display: grid; gap: 1px; margin: 16px 0 0; overflow: hidden; background: var(--line); border-radius: 11px; }
.facts > div { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 9px 11px; background: var(--green-100); }
.facts dt { color: var(--green-700); font-size: 10.5px; font-weight: 700; }
.facts dd { margin: 0; font-size: 10.5px; font-weight: 800; text-align: right; }
#facts-panel footer { padding: 13px 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9.5px; font-weight: 600; line-height: 1.5; }
#facts-panel footer p { margin: 0 0 5px; }

@media (max-width: 760px) {
  .topbar { gap: 8px; padding-inline: 12px; }
  .logo { width: 33px; height: 33px; flex-basis: 33px; }
  .identity h1 { max-width: 138px; font-size: 13px; }
  .identity p { font-size: 9px; }
  .view-link { padding: 8px 10px; font-size: 11px; }
  .searchbox { position: absolute; top: 100%; left: 0; right: 0; z-index: 21; padding: 0 12px 9px; background: var(--green-900); }
  .searchbox input, .searchbox input:focus { width: 100%; }
  #main { padding-top: 45px; }
  #facts-panel { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 12; width: auto; max-height: 38px; overflow: hidden; border: 0; border-radius: 11px; box-shadow: 0 4px 18px rgba(0,0,0,.22); transition: max-height .18s; }
  #facts-panel.open { max-height: min(62vh, 520px); overflow-y: auto; }
  #facts-panel section { padding: 11px 13px 13px; }
  #facts-panel section::before { content: "Datos y fuentes"; display: block; cursor: pointer; font-size: 11px; font-weight: 800; line-height: 17px; text-transform: uppercase; letter-spacing: .08em; }
  #facts-panel section::after { content: "+"; position: absolute; top: 9px; right: 14px; font-weight: 800; }
  #facts-panel.open section::after { content: "−"; }
  #facts-panel .last-updated { position: absolute; top: 11px; right: 38px; margin: 0; font-size: 8px; }
  #facts-panel .eyebrow { margin-top: 13px; }
  .legend { left: 61px; top: 14px; bottom: auto; max-width: calc(100% - 75px); }
  .lot-card { left: 8px; right: 8px; bottom: 53px; width: auto; }
  .empty-card { min-height: 58px; padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}