/* Design tokens. The dark theme overrides the same tokens, so every rule below
   references variables and needs no per-theme duplication. */
:root {
  color-scheme: light;
  --ri-bg: #f2f5f2;
  --ri-surface: #ffffff;
  --ri-surface-2: #f4f7f4;
  --ri-ink: #18211c;
  --ri-muted: #5c6a60;
  --ri-border: #dde5dd;
  --ri-border-strong: #c6d2c7;
  --ri-accent: #1f6f43;
  --ri-accent-strong: #185c37;
  --ri-accent-ink: #ffffff;
  --ri-accent-soft: #e3efe8;
  --ri-danger: #b3261e;
  --ri-focus: #1f6f43;
  --ri-shadow-sm: 0 1px 2px rgba(16, 32, 24, 0.06), 0 1px 3px rgba(16, 32, 24, 0.05);
  --ri-shadow: 0 2px 8px rgba(16, 32, 24, 0.10);
  --ri-shadow-lg: 0 8px 28px rgba(16, 32, 24, 0.18);
  --ri-radius: 10px;
  --ri-radius-sm: 8px;
  --ri-radius-pill: 999px;
  --ri-panel-width: 348px;
  /* Mobile bottom sheet: how much of the collapsed panel stays on screen. */
  --ri-sheet-peek: 44px;
  --ri-status-height: 40px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ri-bg: #0e1512;
  --ri-surface: #161f1b;
  --ri-surface-2: #1b2621;
  --ri-ink: #e8eee9;
  --ri-muted: #9db0a4;
  --ri-border: #28352d;
  --ri-border-strong: #3a483e;
  --ri-accent: #4f9d72;
  --ri-accent-strong: #6cb98e;
  --ri-accent-ink: #0d1710;
  --ri-accent-soft: #1d2f26;
  --ri-danger: #e06666;
  --ri-focus: #6cb98e;
  --ri-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ri-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --ri-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  color: var(--ri-ink);
  background: var(--ri-bg);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  display: grid;
  grid-template-columns: var(--ri-panel-width) 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "panel map"
    "status status";
  height: 100vh;
}

#panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--ri-surface);
  border-right: 1px solid var(--ri-border);
}

/* Search and tools stay pinned; only the sections scroll. */
.panel-top {
  flex: 0 0 auto;
  padding: 12px 12px 0;
}

.panel-scroll {
  flex: 1 1 auto;
  /* Without min-height:0 a flex item refuses to shrink below its content, so
     the column overflows #panel and the lower sections get clipped instead of
     scrolling. */
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--ri-border-strong) transparent;
}

.panel-scroll::-webkit-scrollbar {
  width: 10px;
}

.panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.panel-scroll::-webkit-scrollbar-thumb {
  background: var(--ri-border-strong);
  border-radius: 8px;
  border: 2px solid var(--ri-surface);
}

.panel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ri-muted);
}

/* The filtered search's own outputs, nested inside the Filtros section. */
.area-filter {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ri-border);
}

.panel-section .area-filter-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ri-muted);
}

.panel-section .area-filter-title:not(:first-child) {
  margin-top: 12px;
}

.panel-section {
  flex: 0 0 auto;
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius);
  background: var(--ri-surface);
  box-shadow: var(--ri-shadow-sm);
  /* Rounded corners need the clipping, but a flex item with overflow:hidden can
     shrink to zero and clip its own rows; flex:0 0 auto above prevents that. */
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-section:hover {
  border-color: var(--ri-border-strong);
}

.panel-section > summary {
  cursor: pointer;
  padding: 9px 12px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.12s ease;
}

.panel-section > summary:hover {
  background: var(--ri-surface-2);
}

.panel-section > summary::-webkit-details-marker {
  display: none;
}

.panel-section > summary::before {
  content: "▸";
  color: var(--ri-muted);
}

.panel-section[open] > summary::before {
  content: "▾";
}

.panel-section[open] > summary {
  border-bottom: 1px solid var(--ri-border);
}

.panel-section > :not(summary) {
  padding: 10px;
}

/* The bottom-sheet handle and the quick layer chips are mobile-only: the
   desktop layout shows the full panel instead. */
.sheet-handle,
.layer-chips {
  display: none;
}

/* Two columns keep the four hierarchy selects compact. */
.filter-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.filter-field > span {
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--ri-muted);
}

.filter-field select {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 2px 6px;
}

.filter-clear {
  width: 100%;
  margin-top: 8px;
}

#map {
  grid-area: map;
  min-height: 0;
  background: var(--ri-bg);
}

.statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--ri-surface);
  border-top: 1px solid var(--ri-border);
  color: var(--ri-muted);
  min-height: 32px;
}

#status {
  flex: 1 1 auto;
  min-width: 0;
}

.coords {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Map-centre location: provincia · municipio · barrio. */
.place {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ri-muted);
}

/* Map scale in the bottom bar: a small bar whose width matches the distance. */
.scale {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scale-bar {
  height: 6px;
  width: 0;
  border: 1px solid var(--ri-muted);
  border-top: none;
}

.scale-label {
  color: var(--ri-muted);
}

.tool-pin[aria-pressed="true"] {
  background: var(--ri-accent);
  color: var(--ri-accent-ink);
  border-color: var(--ri-accent);
}

/* The draggable pin uses a divIcon, so it needs no marker image. */
.ri-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ri-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: grab;
}

.ri-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--ri-accent);
}

.app-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ri-accent);
}

/* Panel header row: title + theme toggle. */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.panel-head .app-title {
  margin: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--ri-radius-pill);
}

.theme-toggle svg {
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.toolbar .tool-radius {
  flex: 1 1 100%;
}

/* Floating base-map chooser, bottom-right over the map (above the Leaflet
   attribution line). */
.basemap-fab {
  position: absolute;
  right: 10px;
  bottom: 34px;
  z-index: 1100;
}

.basemap-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--ri-surface);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-pill);
  box-shadow: var(--ri-shadow-sm);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.basemap-button:hover {
  border-color: var(--ri-accent);
  box-shadow: var(--ri-shadow);
}

.basemap-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 210px;
  padding: 8px;
  background: var(--ri-surface);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius);
  box-shadow: var(--ri-shadow);
}

.basemap-card-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ri-muted);
}

.basemap-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ri-radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.basemap-option:hover {
  background: var(--ri-surface-2);
}

.basemap-option[aria-checked="true"] {
  background: var(--ri-accent);
  color: var(--ri-accent-ink);
  border-color: var(--ri-accent);
}

.search {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.search input {
  flex: 1;
}

.search-hint {
  margin: 0 0 8px;
  color: var(--ri-muted);
}

.search-hint.error,
.panel-error {
  color: var(--ri-danger);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th {
  text-align: left;
  padding-right: 8px;
  vertical-align: top;
  white-space: nowrap;
}

.panel-section select,
.panel-section input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  min-width: 0;
  background: var(--ri-surface);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.panel-section select:hover,
.panel-section input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: var(--ri-border-strong);
}

.panel-section select:focus-visible,
.panel-section input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: var(--ri-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ri-focus) 28%, transparent);
}

.panel-section label {
  display: block;
  margin-bottom: 6px;
}

/* Checkboxes keep their intrinsic size instead of stretching with the inputs. */
.panel-section input[type="checkbox"],
.panel-section input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--ri-accent);
}

.panel-section table {
  width: 100%;
  border-collapse: collapse;
}

.panel-section th,
.panel-section td {
  padding: 2px 4px;
  text-align: left;
  vertical-align: top;
}

.panel-section h3 {
  margin: 8px 0 4px;
  font-size: 13px;
}

.gather-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ri-muted);
}

.gather-result p {
  margin: 4px 0;
}

.legend-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.legend-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.legend-controls button,
.legend-row button {
  min-height: 28px;
  min-width: 28px;
  padding: 2px 8px;
  font-size: 12px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shape-tooltip {
  font-size: 12px;
  line-height: 1.35;
}

.shape-tooltip strong {
  color: var(--ri-ink);
}

.shape-tooltip div {
  color: var(--ri-muted);
}

.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--ri-border-strong);
}

.legend-count {
  flex: 0 0 auto;
  margin-left: 0;
  color: var(--ri-muted);
  font-variant-numeric: tabular-nums;
}

.noscript {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid var(--ri-danger);
  border-radius: var(--ri-radius);
  color: var(--ri-danger);
}

button,
select,
input[type="search"],
input[type="text"],
a.button {
  min-height: 40px;
  min-width: 44px;
  padding: 6px 12px;
  font: inherit;
  color: var(--ri-ink);
  background: var(--ri-surface);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

button:hover,
a.button:hover {
  border-color: var(--ri-border-strong);
  background: var(--ri-surface-2);
}

button:active {
  background: var(--ri-accent-soft);
}

button[aria-pressed="true"] {
  background: var(--ri-accent);
  color: var(--ri-accent-ink);
  border-color: var(--ri-accent);
}

button[aria-pressed="true"]:hover {
  background: var(--ri-accent-strong);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ri-focus) 55%, transparent);
  outline-offset: 1px;
}

@media print {
  #app {
    display: block;
    height: auto;
  }
  #map {
    height: 18cm;
  }
  #panel,
  #status {
    display: none;
  }
}

/* ---------------------------------------------------------------- mobile --
   Below 768 px the app is a full-screen map with the control panel as a
   bottom sheet. The map stays mounted at the viewport size (so Leaflet never
   needs an invalidateSize) and the status bar moves to the top, out of the
   sheet's way. Everything is gated here, so the desktop layout is untouched. */
@media (max-width: 768px) {
  /* The bar wraps to two rows on narrow screens (status + scale, then the
     coordinates), so reserve enough height for Leaflet's top controls. */
  :root {
    --ri-status-height: 56px;
  }

  #app {
    display: block;
    position: relative;
    height: 100vh;
    height: 100dvh;
  }

  #map {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  /* A fixed two-row grid keeps the bar compact and predictable instead of
     wrapping to three lines: status + scale, then place + coordinates. Long
     values truncate rather than push the row taller. */
  .statusbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status scale"
      "place coords";
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    min-height: var(--ri-status-height);
    padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px
      max(12px, env(safe-area-inset-left));
    border-top: none;
    border-bottom: 1px solid var(--ri-border);
    background: color-mix(in srgb, var(--ri-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  #status {
    grid-area: status;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scale {
    grid-area: scale;
  }

  .place {
    grid-area: place;
    min-width: 0;
  }

  .coords {
    grid-area: coords;
  }

  #map:focus-visible {
    outline: none;
  }

  #panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    height: 82vh;
    height: 82dvh;
    max-height: calc(100dvh - var(--ri-status-height) - env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
    border: 1px solid var(--ri-border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--ri-shadow-lg);
    transform: translateY(calc(100% - var(--ri-sheet-peek)));
    transition: transform 0.25s ease;
    will-change: transform;
  }

  #panel.sheet-open {
    transform: translateY(0);
  }

  .sheet-handle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: var(--ri-sheet-peek);
    padding: 6px 12px;
    border: none;
    border-radius: 20px 20px 0 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  .sheet-handle:active {
    cursor: grabbing;
  }

  .sheet-grip {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--ri-border);
  }

  .sheet-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2px;
    font-size: 11px;
    color: var(--ri-muted);
  }

  .panel-top {
    padding: 2px 12px 0;
  }

  .app-title {
    margin: 0 0 6px;
  }

  /* The draw/radius/pin tools are replaced on mobile by the zoom-based
     viewport area (<= 200 m). */
  #tools {
    display: none;
  }

  .layer-chips {
    position: fixed;
    left: 0;
    right: 0;
    /* Above Leaflet's attribution line, which sits on the sheet's edge. */
    bottom: calc(var(--ri-sheet-peek) + env(safe-area-inset-bottom) + 22px);
    z-index: 1250;
    display: flex;
    gap: 6px;
    padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .layer-chips::-webkit-scrollbar {
    display: none;
  }

  .layer-chips:empty {
    display: none;
  }

  .chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid var(--ri-border);
    border-radius: var(--ri-radius-pill);
    background: var(--ri-surface);
    box-shadow: var(--ri-shadow-sm);
    white-space: nowrap;
    font-size: 13px;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }

  .chip:hover {
    border-color: var(--ri-border-strong);
    box-shadow: var(--ri-shadow);
  }

  .chip-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid var(--ri-border-strong);
  }

  .chip[aria-pressed="true"] {
    background: var(--ri-accent);
    color: var(--ri-accent-ink);
    border-color: var(--ri-accent);
  }

  .basemap-fab {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(var(--ri-sheet-peek) + env(safe-area-inset-bottom) + 64px);
  }

  /* Keep Leaflet's own controls clear of the top status bar and the sheet. */
  .leaflet-top {
    top: calc(env(safe-area-inset-top) + var(--ri-status-height));
  }

  .leaflet-bottom {
    bottom: calc(var(--ri-sheet-peek) + env(safe-area-inset-bottom) + 2px);
  }

  .legend-row {
    flex-wrap: wrap;
  }

  .filter-form {
    grid-template-columns: 1fr 1fr;
  }

  /* The notice drops below the (fixed) top information bar. */
  .toast {
    top: calc(env(safe-area-inset-top) + var(--ri-status-height) + 8px);
  }
}

/* -------------------------------------------------------------- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  top: 16px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 12px;
  /* Translucent body so the map stays visible behind the notice. */
  background: color-mix(in srgb, var(--ri-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ri-ink);
  border: 1px solid var(--ri-border-strong);
  border-radius: var(--ri-radius);
  box-shadow: var(--ri-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -160%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.toast-text {
  flex: 1 1 auto;
  min-width: 0;
}

.toast-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--ri-radius-pill);
}

.toast-action svg {
  display: block;
}

/* ------------------------------------------------------------ dark mode ---
   The light raster basemaps clash with the dark chrome, so dim the tiles and
   restyle Leaflet's own controls/tooltips; the parcel layers stay untouched. */
[data-theme="dark"] .leaflet-tile-pane img.leaflet-tile {
  filter: brightness(0.72) saturate(0.85);
}

[data-theme="dark"] .leaflet-bar a {
  background: var(--ri-surface);
  color: var(--ri-ink);
  border-color: var(--ri-border);
}

[data-theme="dark"] .leaflet-bar a:hover {
  background: var(--ri-surface-2);
}

[data-theme="dark"] .leaflet-control-attribution {
  background: color-mix(in srgb, var(--ri-surface) 72%, transparent);
  color: var(--ri-muted);
}

[data-theme="dark"] .leaflet-tooltip {
  background: var(--ri-surface);
  color: var(--ri-ink);
  border: 1px solid var(--ri-border);
  box-shadow: var(--ri-shadow);
}

[data-theme="dark"] .leaflet-tooltip:before {
  border-right-color: var(--ri-border);
}

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