/* ── Catamarca brand palette ─────────────────────────────────────────────── */
/*
  Naranja  #E8561E   primary brand / navbar
  Verde    #387C38   secondary / accents
  Cielo    #B7CEDD   light-blue tint
  Oliva    #A0B44D   warm highlight
  Tiza     #F2F2E7   off-white background
  Oro      #F4A740   hover / warm accent
  Adobe    #D14233   danger / alert
  Sepia    #3A2D23   primary dark text
*/

/* ── Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #F2F2E7;
  color: #3A2D23;
  /* Safety net: an element wider than the viewport (e.g. the navbar title
     before it was allowed to wrap) forces mobile browsers to zoom the whole
     page out to fit it, shrinking everything. Never let that happen. */
  overflow-x: hidden;
}

/* Navbar, #layout and the site footer stack vertically and share the
   viewport: navbar + footer take their natural height (both flex-shrink: 0),
   #layout fills the rest. Without this the footer had no reserved space and
   dropped below the fold on the map page. */
body {
  display: flex;
  flex-direction: column;
}

/* ── Bootstrap-independent utility classes ──────────────────────────────── */
.d-none   { display: none !important; }
.d-flex   { display: flex; }
.w-100    { width: 100%; }
.mt-3     { margin-top: 1rem; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Pure-CSS loading spinner ────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block;
  width: 2.5rem; height: 2.5rem;
  border: 0.3em solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar-app {
  background: #FFFFFF !important;
  height: 64px;
  flex-shrink: 0;
  z-index: 1100;
  position: relative;
  border-bottom: 3px solid #A0B44D;
  margin-bottom: 10px;
  align-content: center;
}

.navbar-app .navbar-brand {
  color: #E8561E !important;
  font-size: 1.5rem;
  line-height: 1.2;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, .45);
}

.navbar-brand-province {
  font-weight: 700;
  letter-spacing: .03em;
  color: #E8561E;
}

.navbar-app .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  overflow: hidden;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.navbar-logo {
  height: 46px;
  width: auto;
}

:root {
  --control-pill-radius: 999px;
  --side-panel-width: 340px;
}

.tenure-search-wrap {
  display: flex;
  align-items: center;
}

.tenure-search-input {
  width: 260px;
  max-width: 36vw;
  height: 36px;
  border: 1px solid #A0B44D;
  border-radius: var(--control-pill-radius);
  padding: .4rem .95rem;
  font-size: .8rem;
  font-family: "Poppins", sans-serif;
  color: #3A2D23;
  background: #FFFFFF;
}

.tenure-search-input::placeholder {
  color: #8C7E73;
  opacity: 1;
}

.tenure-search-input:focus {
  outline: none;
  border-color: #387C38;
  box-shadow: 0 0 0 2px rgba(56,124,56,.18);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
#layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* allow it to shrink below content size so the footer stays visible */
  overflow: hidden;
}

/* Map wrapper */
#map-wrap {
  flex: 1 1 auto;
  min-width: 320px;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.side-panel {
  width: var(--side-panel-width);
  flex-shrink: 0;
  background: #fff;
  border-left: 3px solid #E8561E;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#side-panel-resize-handle {
  width: 10px;
  flex: 0 0 10px;
  cursor: col-resize;
  touch-action: none;
  background: #F2F2E7;
  position: relative;
}

#side-panel-resize-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #A0B44D;
  opacity: .65;
  transition: opacity .15s ease;
}

#side-panel-resize-handle:hover::before,
body.is-resizing #side-panel-resize-handle::before {
  opacity: 1;
}

body.is-resizing {
  user-select: none;
  cursor: col-resize;
}

.panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: .2rem;
}

/* Placeholder state */
.panel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #A0B44D;
}
.placeholder-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.placeholder-text  {
  font-size: .9rem;
  line-height: 1.5;
  color: #3A2D23;
  opacity: .7;
}

/* Content state */
.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #E8561E;
  margin-bottom: .25rem;
  font-family: "Poppins", sans-serif;
}
.panel-divider { border-color: #F4A740; margin: .5rem 0 .75rem; }

.panel-body dt {
  font-size: .75rem;
  font-weight: 600;
  color: #387C38;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .75rem;
  font-family: "Poppins", sans-serif;
}
.panel-body dd {
  font-size: .85rem;
  color: #3A2D23;
  margin-left: 0;
  line-height: 1.5;
}

/* Download button */
.pdf-btn {
  background: #387C38;
  border-color: #387C38;
  color: #FFFFFF;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  letter-spacing: .02em;
  border-radius: var(--control-pill-radius);
  padding: .5rem 1rem;
  transition: background .2s, border-color .2s, color .2s;
}
.pdf-btn:hover {
  background: #A0B44D;
  border-color: #A0B44D;
  color: #FFFFFF;
}

/* ── Tenure list & collapsible cards ────────────────────────────────── */
.tenure-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 0;
}

.side-panel-bottom-actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: .75rem;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
}

.side-panel-bottom-actions .pdf-btn {
  width: min(100%, 320px);
}

.tenure-card {
  width: 100%;
  border: 1px solid #F4A740;
  border-radius: 4px;
  overflow: hidden;
}

.tenure-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .85rem;
  background: #FFF8F0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #F4A740;
}

.tenure-card-header:hover {
  background: #FDEBD0;
}

.tenure-card.collapsed .tenure-card-header {
  border-bottom: none;
}

.tenure-card-title {
  font-size: .9rem;
  font-weight: 700;
  color: #E8561E;
  font-family: "Poppins", sans-serif;
}

/* Arrow indicator: ▲ by default (expanded), rotates to ▼ when collapsed */
.tenure-card-toggle::before {
  content: "\25B2";
  font-size: .65rem;
  color: #E8561E;
  display: inline-block;
  transition: transform .2s ease;
}

.tenure-card.collapsed .tenure-card-toggle::before {
  transform: rotate(180deg);
}

.tenure-card-body {
  padding: .75rem .85rem;
}

.tenure-card.collapsed .tenure-card-body {
  display: none;
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58,45,35,.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Language selector ──────────────────────────────────────────────────── */
.lang-selector {
  display: flex;
  align-items: center;
  gap: .2rem;
  border: 1px solid #A0B44D;
  border-radius: var(--control-pill-radius);
  background: #FFFFFF;
  padding: .15rem;
}

.lang-btn {
  background: #FFFFFF;
  border: 1px solid transparent;
  color: #000000;
  font-size: .72rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  min-width: 2.3rem;
  padding: .25rem .6rem;
  border-radius: var(--control-pill-radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  letter-spacing: .05em;
}

.lang-btn:not(.lang-btn--active):hover {
  background: #F2F2E7;
  color: #000000;
  border-color: #A0B44D;
}

.lang-btn--active {
  background: #387C38;
  color: #FFFFFF;
  border-color: #387C38;
}

.lang-btn--active:hover {
  background: #A0B44D;
  border-color: #A0B44D;
  color: #FFFFFF;
}

/* ── North pointer control ──────────────────────────────────────────────── */
.map-north-pointer {
  background: transparent;
  cursor: default;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.28));
  line-height: 0;
}

@media (max-width: 768px) {
  .map-north-pointer svg {
    width: 36px;
    height: 36px;
  }

  .navbar-app {
    height: auto;
    min-height: 52px;
    padding: .45rem .35rem;
  }

  .navbar-app .container-fluid {
    display: flex;
    flex-wrap: wrap;
    row-gap: .4rem;
  }

  .navbar-left,
  .navbar-right {
    display: contents;
  }

  .navbar-logo {
    position: static;
    transform: none;
    order: -1;
    flex: 1 0 100%;
    width: 100%;
    height: 34px;
    object-fit: contain;
    display: block;
  }

  /* Bootstrap's base .navbar-brand forces white-space:nowrap, which pushed
     the title past the viewport edge on phones instead of wrapping — the
     whole page then rendered zoomed out to fit that overflow. Let it wrap
     onto its own full-width row (a couple of lines) instead of shrinking
     the font down to fit one line. */
  .navbar-app .navbar-brand {
    white-space: normal;
    flex: 1 1 100%;
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .tenure-search-wrap {
    order: 3;
    width: 100%;
    margin: 0;
  }

  .tenure-search-input {
    width: 100%;
    max-width: none;
  }

  #layout { flex-direction: column; }
  #side-panel-resize-handle { display: none; }
  .side-panel {
    width: 100%;
    height: 240px;
    border-left: none;
    border-top: 3px solid #E8561E;
    flex-shrink: 0;
  }
}

/* ── QGIS label tooltips (permanent, feature labeling from layer_styles) ─── */
.layer-label-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.layer-label-tooltip::before {
  display: none;
}

/* ── QGIS compound/SVG point markers (stacked-shape divIcon, map.js) ────── */
.qgis-marker-icon {
  background: transparent;
  border: none;
}

/* ── Grouped layer control: indent each nesting level of subgroups ──────── */
.leaflet-control-layers-group-content {
  margin-left: 1em;
}

/* A layer that sits directly under a group which ALSO has subgroups (e.g.
   "Áreas de Reserva" straight under "Potencial Geológico", next to the
   "Fajas"/"Litología" subgroups) otherwise lines up one level too far left —
   level with the subgroup headings instead of with the layers inside them,
   so it reads as detached. Nudge those loose layers in by one level so every
   layer checkbox in a group shares a column. */
.leaflet-control-layers-group-content:has(> .leaflet-control-layers-group) > label {
  margin-left: 1em;
}

/* Discovered layers load their geometry only when first switched on
   (map.js hydrateExtraLayer). Show a spinner on the row while its GeoJSON
   is downloading so a big lithology sheet doesn't look like a dead toggle. */
.layer-control-loading > span::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.45em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  opacity: 0.7;
}

/* ── Distinct collapsed-state icons for the split base-map / overlay
   layer controls (map.js tags each control's container via L.DomUtil.addClass
   so the two no longer share Leaflet's default "layers" icon) ───────────── */
.layer-control-basemaps .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2D23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
  background-size: 22px 22px;
}

.layer-control-overlays .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2D23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
  background-size: 22px 22px;
}

/* Leaflet's four corner containers (top-left/right, bottom-left/right) all
   share the same z-index, so when the top-right "Activos Mineros" panel
   expands tall enough to visually reach the bottom corners, the bottom-left
   zoom/scale and bottom-right base-map button — later in the DOM — paint on
   top of it instead of the other way around. Keep the overlays corner above
   the others so its open panel is never sliced by controls sitting in front
   of it. */
#map .leaflet-top.leaflet-right {
  z-index: 1001;
}

/* The full Esri attribution list wraps onto several lines whenever the map
   isn't wide enough for it on one line — not just on phones, also on
   narrower/split PC windows — growing tall enough to cover the zoom/scale
   controls. Always truncate it to a single line with an ellipsis instead of
   trying to guess how many lines it'll wrap to at any given width. */
#map .leaflet-control-attribution {
  max-width: 60vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9px;
}

@media (max-width: 768px) {
  /* Expanded layer-control panels (e.g. "Activos Mineros", with lots of
     geologist-uploaded sub-groups) can otherwise grow tall enough to cover
     the whole map, leaving no visible map area to tap to dismiss it
     (dismissal on touch works by tapping the map, not a close button). Cap
     the height so a strip of map always stays visible, and scroll the list
     internally instead. */
  #map .leaflet-control-layers-expanded {
    max-width: 82vw;
  }

  #map .leaflet-control-layers-expanded .leaflet-control-layers-list {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Site-wide footer ───────────────────────────────────────────────────── */
.site-footer {
  background: #3A2D23;
  color: #F2F2E7;
  flex-shrink: 0;
  border-top: 3px solid #A0B44D;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1rem;
}

.site-footer-col {
  flex: 1 1 220px;
  min-width: 200px;
}

.site-footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: .5rem;
  filter: brightness(0) invert(1);
}

.site-footer-tagline {
  font-size: .85rem;
  color: #B7CEDD;
  margin: 0;
}

.site-footer-heading {
  font-family: "Poppins", sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #F4A740;
  margin: 0 0 .6rem;
}

.site-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .85rem;
  line-height: 1.6;
}

.site-footer-list a {
  color: #F2F2E7;
  text-decoration: underline;
  text-decoration-color: rgba(242, 242, 231, .35);
}

.site-footer-list a:hover {
  color: #F4A740;
}

.site-footer-bottom {
  border-top: 1px solid rgba(242, 242, 231, .15);
  text-align: center;
  font-size: .75rem;
  color: #B7CEDD;
  padding: .75rem 1rem;
}

/* Compact variant used on the map page, where vertical space is scarce. */
.site-footer--compact .site-footer-inner {
  padding: .6rem 1.5rem;
  gap: 1.25rem;
  align-items: center;
}

.site-footer--compact .site-footer-logo {
  height: 26px;
  margin-bottom: 0;
}

.site-footer--compact .site-footer-list {
  font-size: .75rem;
  line-height: 1.4;
}

.site-footer--compact .site-footer-bottom {
  padding: .4rem 1rem;
}

@media (max-width: 768px) {
  .site-footer-inner {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ── References page ───────────────────────────────────────────────────── */
.references-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.references-page h1 {
  color: #E8561E;
  font-family: "Poppins", sans-serif;
  margin-bottom: .25rem;
}

.references-page .references-intro {
  color: #3A2D23;
  margin-bottom: 1.5rem;
}

.references-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reference-item {
  background: #fff;
  border: 1px solid #F4A740;
  border-left: 4px solid #387C38;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.reference-item .reference-title {
  font-weight: 700;
  color: #3A2D23;
  margin: 0 0 .25rem;
}

.reference-item .reference-meta {
  font-size: .85rem;
  color: #387C38;
  margin: 0 0 .4rem;
}

.reference-item .reference-description {
  font-size: .9rem;
  color: #3A2D23;
  margin: 0 0 .4rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.reference-item .reference-link {
  font-size: .85rem;
  overflow-wrap: break-word;
  word-break: break-word;
}