/* ═══════════════════════════════════════════════════════════════
   Mapa de Productos TAO México
   Layout tipo "mapa de competencia" (JoyTree) + identidad de
   ficha técnica TAO (navy / gold / cream · tipografía Stara)
═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Stara';
  src: url('assets/fonts/Stara-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stara';
  src: url('assets/fonts/Stara-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stara';
  src: url('assets/fonts/Stara-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stara';
  src: url('assets/fonts/Stara-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stara';
  src: url('assets/fonts/Stara-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:         #385265;
  --navy-d:       #2c4152;
  --gold:         #b3ab85;
  --gold-d:       #9a916a;
  --cream:        #f3eee3;
  --graphite:     #403d37;
  --slate:        #7395a7;
  --white:        #ffffff;
  --line:         rgba(64, 61, 55, 0.14);
  --line-heavy:   rgba(64, 61, 55, 0.28);

  --font-display: 'Stara', sans-serif;
  --font-body:    'Stara', sans-serif;

  --header-h:     64px;
  --sidebar-w:    380px;
  --radius:       10px;
  --radius-sm:    6px;
  --card-anim:    220ms cubic-bezier(0.22,1,0.36,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  background: var(--cream);
  color: var(--graphite);
  -webkit-font-smoothing: antialiased;
}
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input  { font-family:inherit; }

.app { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.header {
  height: var(--header-h);
  background: var(--white);
  border-bottom: 2px solid var(--line-heavy);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 30;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.header-brand:hover { opacity: 0.75; }
.header-brand:active { opacity: 0.55; }
.brand-logo { height: 34px; width: auto; object-fit: contain; }
.brand-copy { display:flex; flex-direction:column; line-height:1.15; }
.header-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--graphite);
  white-space: nowrap;
}
.header-sub {
  font-size: 10.5px;
  color: var(--slate);
  font-weight: 600;
  white-space: nowrap;
}

/* Filtros */
.header-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-filters::-webkit-scrollbar { display:none; }

.filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: all 150ms;
  flex-shrink: 0;
}
.filter-pill:hover { color:var(--graphite); border-color:var(--line-heavy); background:var(--cream); }
.filter-pill.is-active {
  color: var(--white);
  border-color: var(--navy);
  background: var(--navy);
}
.filter-count { font-size: 10px; font-weight: 700; opacity: 0.65; }
.filter-pill.is-active .filter-count { opacity: 0.85; }

/* Búsqueda */
.header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 12px;
  width: 240px;
  flex-shrink: 0;
  transition: border-color 150ms;
}
.header-search:focus-within { border-color: var(--gold); }
.header-search svg { width:15px; height:15px; color:var(--slate); flex-shrink:0; }
.header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  color: var(--graphite);
  width: 100%;
}
.header-search input::placeholder { color: var(--slate); }
.search-clear { color: var(--slate); flex-shrink:0; }
.search-clear svg { width:13px; height:13px; }
.search-clear:hover { color: var(--graphite); }

.toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  transition: background 150ms, transform 150ms;
}
.toggle-btn:hover { background: var(--navy-d); }
.toggle-btn:active { transform: scale(0.94); }
.toggle-btn svg { width:19px; height:19px; }
.toggle-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   BODY / LAYOUT
═══════════════════════════════════════════════════════════════ */
.app-body { flex:1; display:flex; overflow:hidden; min-height:0; position:relative; }

.map-wrap { flex:1; position:relative; z-index:1; min-width:0; background: var(--graphite); display:flex; flex-direction:column; }
.map-canvas { position:relative; z-index:1; flex:1; min-height:0; }
#map { width:100%; height:100%; position:relative; z-index:0; }

.map-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  padding: 9px 24px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-d) 100%);
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
  flex-shrink: 0;
  overflow: hidden;
  min-width: 0;
}
.map-banner__headline {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.map-banner__desc {
  grid-column: 1;
  grid-row: 2;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(243,238,227,0.76);
  width: 100%;
}
.map-banner__stats {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.map-banner__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.map-banner__num {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.map-banner__lbl {
  font-size: 7.5px;
  font-weight: 600;
  color: rgba(243,238,227,0.78);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-top: 2px;
}
.map-banner__lbl strong { color: var(--cream); font-weight: 800; }
.map-banner__sep { width:1.5px; height:42px; background: rgba(255,255,255,0.22); flex-shrink:0; }

.map-fabs {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}
.map-fab {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.28);
  transition: background 150ms, color 150ms;
}
.map-fab svg { width:16px; height:16px; }
.map-fab:hover { background: var(--navy); color: var(--white); }

.map-brand-stack {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.map-chip {
  display: none;
  background: rgba(56,82,101,0.92);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}
.map-chip #visibleCount { color: var(--gold); font-weight:800; }
.map-brand-logo {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--white);
  border-left: 2px solid var(--line-heavy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.view-list { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }

/* ═══════════════════════════════════════════════════════════════
   PANEL DE DOCUMENTO — brochure animado embebido
═══════════════════════════════════════════════════════════════ */
.doc-panel {
  width: 0;
  flex-shrink: 0;
  background: var(--graphite);
  border-left: 2px solid var(--line-heavy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: width 360ms cubic-bezier(0.22,1,0.36,1), opacity 220ms ease;
}
.doc-panel.is-open {
  width: min(460px, 42vw);
  opacity: 1;
}
.doc-panel[hidden] { display: flex; } /* lo controla is-open, no [hidden] */

.doc-panel__top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}
.doc-panel__top .detail-back-btn { background: rgba(255,255,255,0.1); }
.doc-panel__title {
  flex: 1;
  min-width: 0;
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-panel__ext {
  display: flex; align-items:center; justify-content:center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--cream);
  flex-shrink: 0;
  transition: background 150ms;
}
.doc-panel__ext:hover { background: rgba(255,255,255,0.15); }
.doc-panel__ext svg { width:15px; height:15px; }

.doc-panel__stage {
  flex: 1;
  min-height: 0;
  position: relative;
}
.doc-panel__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.doc-panel__stage .doc-panel__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Botones de idioma del brochure, en el panel de detalle */
.brochure-lang-row { display:flex; gap:8px; }
.brochure-lang-row .detail-btn { flex:1; }

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sh-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.sh-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 2px 9px;
  border-radius: 12px;
}

.prop-list { flex:1; overflow-y:auto; padding: 10px; display:flex; flex-direction:column; gap:9px; }

.prop-card {
  --accent: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms;
  animation: cardEnter 420ms cubic-bezier(0.22,1,0.36,1) backwards;
}
.prop-card:hover,
.prop-card.is-hover {
  border-color: var(--accent);
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -8px var(--accent), 0 2px 8px rgba(0,0,0,0.06);
}
.prop-card.is-active {
  border-color: var(--accent);
  background: var(--cream);
  box-shadow: 0 0 0 1.5px var(--accent) inset, 0 8px 22px -8px var(--accent);
}
.prop-card.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.prop-card__row { display:flex; align-items:flex-start; gap:12px; }

.prop-card__thumb {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--cream);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: box-shadow 180ms, transform 180ms;
}
.prop-card:hover .prop-card__thumb,
.prop-card.is-hover .prop-card__thumb {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent);
  transform: scale(1.04);
}
.prop-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.prop-card__thumb--empty svg { width:20px; height:20px; opacity:0.7; }

.prop-card__body { flex:1; min-width:0; padding-top: 2px; }
.prop-card__name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--graphite);
  line-height: 1.25;
  display: block;
}
.prop-card__city {
  font-size: 11px;
  color: var(--slate);
  font-weight: 600;
  margin-top: 2px;
  display: block;
}
.prop-card__dates {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}
.prop-card__dates-row {
  font-size: 8.5px;
  color: var(--slate);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.prop-card__dates-lbl { text-transform: uppercase; }
.prop-card__dates-row strong { color: var(--graphite); font-weight: 800; }
.prop-card__stats {
  display: block;
  font-size: 10.5px;
  color: var(--graphite);
  font-weight: 700;
  margin-top: 10px;
}
.prop-card__meta {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.prop-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--slate);
  border: 1px solid var(--line);
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Barra de % vendido ──────────────────────────────────────── */
.prop-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.prop-bar__track {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.prop-bar__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, var(--navy));
  transition: width 500ms cubic-bezier(0.22,1,0.36,1);
}
.prop-bar__label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--slate);
  white-space: nowrap;
  flex-shrink: 0;
}
.prop-bar--lg .prop-bar__track { height: 8px; }
.prop-bar--lg .prop-bar__label { font-size: 11px; color: var(--graphite); }
.prop-bar--lg { margin: 4px 0 18px; }

/* ── Etiquetas de estatus (unidades / construcción) ─────────── */
.status-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-tag--disponible   { background: #e7f5ec; color: #1e7d43; border-color: #bfe6cd; }
.status-tag--soldout      { background: #f1eee8; color: #6b6558; border-color: var(--line-heavy); }
.status-tag--construccion { background: #fdf3dd; color: #92620a; border-color: #f0d693; }
.status-tag--terminado    { background: #eef2f5; color: var(--navy); border-color: var(--line); }

.status-tag--lg { font-size: 10px; padding: 5px 12px; border-radius: 12px; }
.detail-status-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 16px; }

.ftp-tags { display:flex; gap:6px; flex-wrap:wrap; margin: 2px 0 7px; }

.list-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--slate);
  padding: 30px;
}
.list-empty svg { width:34px; height:34px; opacity:0.5; }
.list-empty p { font-size: 12.5px; font-weight:600; }
.list-empty[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DETALLE
═══════════════════════════════════════════════════════════════ */
.view-detail {
  position: absolute;
  inset: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn var(--card-anim);
}
.view-detail[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(24px); opacity:0; } to { transform:none; opacity:1; } }

.detail-back-btn {
  display: flex; align-items:center; justify-content:center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--white);
  flex-shrink: 0;
  transition: background 150ms;
}
.detail-back-btn:hover { background: rgba(255,255,255,0.15); }
.detail-back-btn svg { width:16px; height:16px; }

.detail-head {
  background: var(--navy);
  color: var(--cream);
  padding: 16px 18px 20px;
  border-bottom: 3px solid var(--gold);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.detail-head__watermark {
  position: absolute;
  right: -20px;
  top: -22px;
  width: 250px;
  height: 250px;
  object-fit: contain;
  object-position: 100% 0%;
  opacity: 0.92;
  transform: rotate(4deg);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 6%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.85) 56%, #000 78%);
          mask-image: linear-gradient(115deg, transparent 0%, transparent 6%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.85) 56%, #000 78%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}
.detail-head__top,
.detail-head__id {
  position: relative;
  z-index: 1;
}
.detail-head__top { display:flex; align-items:center; gap:10px; margin-bottom: 16px; }
.detail-head__topbar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.detail-head__id { display:flex; align-items:center; gap:12px; }

.detail-head__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.detail-head__avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.14);
}
.detail-head__avatar--empty svg { width:20px; height:20px; opacity:0.85; }

.detail-head__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight:800; flex-shrink:0;
}
.detail-head__id-text { min-width: 0; }
.detail-head__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.detail-head__city {
  font-size: 11.5px;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  margin-top: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.detail-body { flex:1; overflow-y:auto; padding: 18px; }

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.detail-stat {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.detail-stat__lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 3px;
  display: block;
}
.detail-stat__val {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--graphite);
}

.detail-summary {
  font-size: 12.5px;
  color: var(--graphite);
  line-height: 1.55;
  margin-bottom: 18px;
}

.detail-approx {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: #92620a;
  background: #fdf3dd;
  border: 1px solid #f0d693;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 18px;
}
.detail-approx svg { width:13px; height:13px; flex-shrink:0; }

/* ── Galería de medios ───────────────────────────────────────── */
.detail-media { margin-top: 4px; }
.detail-media__title {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.detail-media__empty {
  font-size: 12px;
  color: var(--slate);
  font-weight: 600;
  background: var(--cream);
  border: 1px dashed var(--line-heavy);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}
.media-group { margin-bottom: 16px; }
.media-group:last-child { margin-bottom: 0; }
.media-group__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.media-group__head svg { width: 13px; height: 13px; color: var(--slate); flex-shrink: 0; }
.media-group__label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--graphite);
}
.media-group__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--slate);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: auto;
}

/* Colapsar/expandir grupos grandes (>15 elementos) */
.media-thumb--extra { display: none; }
.media-group.is-expanded .media-thumb--extra { display: block; }
.media-group__toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-heavy);
  background: var(--cream);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  transition: background 150ms, border-color 150ms;
}
.media-group__toggle:hover { background: var(--white); border-color: var(--gold); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.media-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 150ms, box-shadow 150ms;
}
.media-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.media-thumb__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: var(--graphite);
}
.media-thumb__play {
  position: absolute;
  inset: 0;
  display: flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.28);
  color: #fff;
}
.media-thumb__play svg { width:22px; height:22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,12,14,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open { display: flex; animation: lightboxFade 200ms ease; }
@keyframes lightboxFade { from { opacity:0; } to { opacity:1; } }
.lightbox__stage { max-width: 100%; max-height: 100%; display:flex; align-items:center; justify-content:center; }
.lightbox__stage img,
.lightbox__stage video {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  transition: background 150ms;
}
.lightbox__close:hover { background: rgba(255,255,255,0.24); }
.lightbox__close svg { width:18px; height:18px; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  transition: background 150ms;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.24); }
.lightbox__nav svg { width:20px; height:20px; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

.detail-lotes-title {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}

.lote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.lote-row:hover { border-color: var(--gold); background: var(--cream); }
.lote-row__num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.lote-row[data-cat="predios"] .lote-row__num { background:#f59e0b; }
.lote-row__body { flex:1; min-width:0; }
.lote-row__name { font-size: 12px; font-weight:700; color:var(--graphite); }
.lote-row__meta { font-size: 10.5px; color:var(--slate); font-weight:600; margin-top:1px; }
.lote-row__precio { font-size: 11.5px; font-weight:800; color:var(--navy); flex-shrink:0; white-space:nowrap; }

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--navy);
  border: 1.5px solid var(--gold);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms, border-color 150ms, transform 150ms;
}
.detail-btn svg { width:13px; height:13px; color:var(--gold); flex-shrink:0; }
.detail-btn:hover { background: var(--navy-d); border-color:#fff; transform: translateY(-1px); }
.detail-btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-heavy);
}
.detail-btn--ghost svg { color: var(--navy); }
.detail-btn--ghost:hover { background: var(--cream); border-color: var(--gold); }
.detail-btn--disabled { opacity: 0.35; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   LEAFLET — pines y popups estilo ficha técnica
═══════════════════════════════════════════════════════════════ */
.leaflet-container { font-family: var(--font-body); background: var(--graphite); }

/* ── Pin estilo "burbuja" (Find My / Apple Maps) ─────────────
   Círculo con el ícono del proyecto + punta inferior, hecho con
   un cuadrado redondeado rotado -45°; el contenido interno se
   contra-rota 45° para quedar en posición normal. */
.ft-pin {
  --accent: var(--navy);
  width: 40px; height: 40px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.45));
  animation: pinDrop 420ms cubic-bezier(0.22,1,0.36,1) backwards;
}
.ft-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% - 3px);
  width: 16px; height: 6px;
  margin-left: -8px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 75%);
  border-radius: 50%;
  pointer-events: none;
}
.ft-pin__body {
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  background-image: linear-gradient(155deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 45%);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items:center; justify-content:center;
  box-shadow: inset 0 -7px 11px rgba(0,0,0,0.24), inset 0 2px 3px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.ft-pin:hover .ft-pin__body { transform: rotate(-45deg) scale(1.12) translateY(-1px); }

.ft-pin__img {
  width: 64%; height: 64%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.28);
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transform: rotate(45deg);
}
.ft-pin__img--empty {
  display: flex; align-items:center; justify-content:center;
  color: #fff;
}
.ft-pin__img--empty svg { width: 15px; height: 15px; }

.ft-pin--lote {
  width: 26px; height: 26px;
}
.ft-pin--lote .ft-pin__body {
  border-width: 2px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.ft-pin-glow .ft-pin__body { transform: rotate(-45deg) scale(1.16); }
.ft-pin-glow {
  z-index: 900 !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.ft-pin-glow::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: pinRingPulse 1.1s ease-in-out infinite;
  z-index: -1;
}

@keyframes pinDrop {
  from { opacity: 0; transform: translateY(-16px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pinRingPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.4; }
  50%      { transform: scale(1.25); opacity: 0.12; }
}

.ftp-wrap .leaflet-popup-content-wrapper { padding:0 !important; border-radius:8px !important; overflow:hidden !important; box-shadow:0 6px 20px rgba(0,0,0,0.28) !important; }
.ftp-wrap .leaflet-popup-content { margin:0 !important; width:auto !important; }
.ftp-wrap .leaflet-popup-tip { background:#fff !important; }

.ftp { font-family: var(--font-body); min-width: 210px; }
.ftp-head { background: var(--navy); border-bottom: 2px solid var(--gold); padding: 10px 14px 8px; display:flex; align-items:center; gap:9px; }
.ftp-head--terrenos { background:#dc2626; border-bottom-color:#7f1d1d; }
.ftp-head--predios { background:#f59e0b; border-bottom-color:#78350f; }
.ftp-head__num { width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,0.22); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; }
.ftp-head__name { font-size:13px; font-weight:700; color:#fff; letter-spacing:0.02em; }
.ftp-body { padding:10px 14px 8px; border-bottom:1px solid #e5e7eb; }
.ftp-stat { margin-bottom:7px; }
.ftp-lbl { display:block; font-size:9px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate); margin-bottom:1px; }
.ftp-val { font-size:15px; font-weight:800; color:var(--graphite); }
.ftp-addr { font-size:10px; color:#6b7280; line-height:1.45; margin-top:5px; }
.ftp-btns { display:flex; gap:6px; padding:10px 14px 13px; background:#fff; border-top:1px solid #e8e2d8; }
.ftp-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 6px; border-radius:999px; background:var(--navy); border:1.5px solid var(--gold); color:#fff !important; font-family:var(--font-display); font-size:7.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; text-decoration:none !important; transition:background 0.15s, border-color 0.15s; white-space:nowrap; }
.ftp-btn:hover { background: var(--navy-d); border-color:#fff; }
.ftp-btn--na { opacity:0.30; pointer-events:none; cursor:default; }

.ft-reset-btn { width:26px; height:26px; display:flex !important; align-items:center; justify-content:center; color:var(--navy) !important; background:#fff !important; text-decoration:none !important; transition:background 0.15s, color 0.15s; }
.ft-reset-btn:hover { background:var(--navy) !important; color:var(--cream) !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 340px; }
}

/* Tablet portrait y móviles: el header pasa a 2 filas (marca+buscador+
   menú arriba, filtros de ubicación abajo en su propia fila con
   scroll horizontal) y el panel lateral se vuelve un overlay a pantalla
   completa (con tope de ancho en tablets) sobre el mapa. */
@media (max-width: 880px) {
  .header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    padding: 10px 16px;
    gap: 8px 12px;
  }
  .header-brand  { order: 1; }
  .header-search { order: 2; flex: 1 1 100px; width: auto; min-width: 90px; }
  .toggle-btn    { order: 3; display: flex; }
  .header-filters {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
  }

  .sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    z-index: 20;
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
    transform: translateX(100%);
    transition: transform var(--card-anim);
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Al abrir la lista/ficha en móvil y tablet, el banner queda a
     medias detrás del panel — mejor ocultarlo mientras tanto y dejar
     que el mapa ocupe ese espacio. */
  .app-body.sidebar-open .map-banner { display: none; }

  .doc-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: none;
    z-index: 30;
    transform: translateX(100%);
    transition: transform var(--card-anim);
    opacity: 1;
  }
  .doc-panel.is-open { transform: translateX(0); width: 100%; }

  .map-fabs { top: 10px; right: 10px; }
  .map-brand-stack { bottom: 10px; left: 10px; }
  .map-brand-logo { height: 26px; }

  /* Sin sidebar visible al lado (es overlay), el banner tiene todo el
     ancho para sí: se apila todo en una sola columna. */
  .map-banner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 10px 16px; row-gap: 8px; }
  .map-banner__headline { grid-column: 1; grid-row: 1; white-space: normal; }
  .map-banner__desc { grid-column: 1; grid-row: 2; }
  .map-banner__stats { grid-column: 1; grid-row: 3; width: 100%; }
}

@media (max-width: 560px) {
  .header-sub  { display: none; }
  .brand-logo  { height: 28px; }
  .header-title { font-size: 12.5px; }
  .header-search { flex-basis: 70px; }

  .detail-stats { grid-template-columns: 1fr 1fr; }
  .media-grid   { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  .lightbox { padding: 54px 14px; }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 10px; right: 10px; }

  .map-banner__headline { font-size: 15px; }
  .map-banner__desc { font-size: 11.5px; }
  .map-banner__stats { gap: 14px; }
  .map-banner__num { font-size: 16px; }
  .map-banner__lbl { font-size: 8px; }
  .map-banner__sep { height: 22px; }
}

@media (max-width: 360px) {
  .header-search { flex-basis: 56px; }
  .prop-card__thumb { width: 44px; height: 44px; }
  .detail-head__watermark { display: none; }

  .map-banner { padding: 8px 12px; gap: 4px; }
  .map-banner__headline { font-size: 13px; }
  .map-banner__desc { font-size: 10.5px; }
  .map-banner__stats { gap: 8px; }
  .map-banner__num { font-size: 14px; }
  .map-banner__lbl strong { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   MAPA DE TERRENOS — añadidos sobre la base del mapa de productos.
   Aquí la unidad es un predio con polígono real, así que hay estilos
   nuevos para el polígono, el pin con superficie y la ficha técnica
   del terreno. Todo lo anterior se reutiliza tal cual.
═══════════════════════════════════════════════════════════════ */

/* ── Polígono del terreno ─────────────────────────────────────
   El trazo va sobre imagen satelital, así que lleva una sombra
   suave para despegarse del terreno y no perderse sobre suelo
   claro. La transición es la del hover cruzado con el glosario. */
.terreno-poly {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  transition: fill-opacity 160ms ease, stroke-width 160ms ease;
  cursor: pointer;
}

/* ── Pin del terreno: glifo + superficie ─────────────────────── */
.ft-pin--terreno .ft-pin__img {
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.ft-pin__glyph { display: flex; }
.ft-pin--terreno .ft-pin__glyph svg { width: 13px; height: 13px; }
.ft-pin__area {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Encabezado del glosario: título + hectáreas + conteo ─────
   El sidebar-head base es de dos columnas; aquí se mete una línea
   con el total de superficie del filtro activo. */
.sidebar-head { flex-wrap: wrap; row-gap: 2px; }
.sh-sub {
  order: 3;
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--slate);
  letter-spacing: 0.02em;
}

/* ── Tarjeta de terreno ───────────────────────────────────────
   Sin foto: el thumb pasa a ser el glifo de parcela sobre el color
   de la zona, y la superficie ocupa la columna derecha. */
.prop-card__thumb--plot {
  width: 46px; height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--accent);
  border: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: box-shadow 180ms, transform 180ms;
}
.prop-card__thumb--plot svg { width: 22px; height: 22px; }
.prop-card:hover .prop-card__thumb--plot,
.prop-card.is-hover .prop-card__thumb--plot {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent);
  transform: scale(1.04);
}
.prop-card__area {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* ── Etiquetas propias de terrenos ───────────────────────────── */
.status-tag--zona {
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: color-mix(in srgb, var(--accent) 78%, #000);
  border-color: color-mix(in srgb, var(--accent) 34%, #fff);
}
.status-tag--pendiente { background:#fdf3dd; color:#92620a; border-color:#f0d693; }

/* ── Ficha: archivos KML de origen ───────────────────────────── */
.src-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  margin-bottom: 6px;
}
.src-row svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.src-row__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--graphite);
  word-break: break-word;
  line-height: 1.35;
}
.src-note {
  font-size: 10.5px;
  color: var(--slate);
  line-height: 1.5;
  margin: 2px 0 4px;
}

/* Aviso del popup para predios sin nombre en el KML */
.ftp-note {
  font-size: 10px;
  font-weight: 700;
  color: #92620a;
  background: #fdf3dd;
  border: 1px solid #f0d693;
  border-radius: 8px;
  padding: 5px 8px;
  margin: 6px 0 2px;
  line-height: 1.35;
}

.detail-btn.is-copied { background: #1e7d43; border-color: #1e7d43; color: #fff; }
.detail-btn.is-copied svg { color: #fff; }

/* Los botones de acción del popup y de la ficha ahora también existen
   como <button> (exportar KML se arma en el navegador, no es un link
   a un archivo), así que necesitan el reset que el <a> no pedía. */
button.ftp-btn { cursor: pointer; font: inherit; font-family: var(--font-display); appearance: none; }
button.detail-btn { cursor: pointer; appearance: none; }

/* ═══════════════════════════════════════════════════════════════
   IDENTIFICADOR DE INVENTARIO
   El número de la lista del equipo es el identificador visible del
   terreno: manda en el pin, en la tarjeta y en la ficha. Los que
   todavía no están enlazados a una partida muestran "S/N" en gris,
   para que se distingan de un vistazo los que faltan por cruzar.
═══════════════════════════════════════════════════════════════ */

/* ── Pin: número grande, superficie de apoyo ──────────────────── */
.ft-pin__num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ft-pin--terreno .ft-pin__area { font-size: 6.5px; opacity: 0.9; }
.ft-pin--sn .ft-pin__num { font-size: 8.5px; opacity: 0.85; }

/* ── Tarjeta: el thumb pasa a ser el número ───────────────────── */
.prop-card__thumb--plot {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.prop-card__thumb--plot.is-sn {
  font-size: 11px;
  background: var(--slate);
  border-color: var(--line-heavy);
  box-shadow: none;
}
.prop-card__alt {
  display: block;
  font-size: 10px;
  color: var(--slate);
  font-weight: 600;
  margin-top: 1px;
}
.status-tag--sn { background:#f1eee8; color:#6b6558; border-color: var(--line-heavy); }

/* ── Popup y ficha ────────────────────────────────────────────── */
.ftp-head__num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.22);
  border-radius: 8px;
  padding: 2px 7px;
  margin-right: 7px;
  flex-shrink: 0;
}
.detail-head__avatar--num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.20);
  border: 1.5px solid rgba(255,255,255,0.45);
}

/* Diferencia entre la superficie medida y la del inventario */
.detail-delta {
  display: inline-block;
  margin-left: 7px;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
}
.detail-delta.is-ok  { background:#e7f5ec; color:#1e7d43; }
.detail-delta.is-off { background:#fdf3dd; color:#92620a; }

/* Nota de cruce confirmado: mismo bloque del aviso, en verde */
.detail-approx--ok {
  background: #e7f5ec;
  border-color: #bfe6cd;
  color: #1e7d43;
}

/* ── Partidas del inventario sin polígono ─────────────────────────
   Existen en la lista del equipo pero no están dibujadas en ningún
   KML. Se ven en el glosario, no en el mapa: la tarjeta va atenuada
   y con el borde punteado para que se distingan de un vistazo de los
   terrenos que sí están levantados. */
.prop-card--nogeo { border-style: dashed; }
.prop-card--nogeo .prop-card__thumb--plot {
  background: transparent;
  color: var(--accent);
  border-style: dashed;
  box-shadow: none;
}
.prop-card--nogeo .prop-card__area {
  background: transparent;
  border-style: dashed;
  color: var(--slate);
}
.status-tag--nogeo {
  background: #fff;
  color: var(--slate);
  border-color: var(--line-heavy);
  border-style: dashed;
}

/* Identificador dado por el mapa (no viene del inventario del equipo):
   mismo número, pero en contorno en vez de relleno, para que se note
   cuáles todavía hay que cruzar contra la lista. */
.prop-card__thumb--plot.is-asignado {
  background: transparent;
  color: var(--accent);
  border-style: dashed;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   PALETA NUEVA — tinta legible sobre colores claros
   ───────────────────────────────────────────────────────────────
   Los colores de zona pasaron a ser de alta saturación y, tres de
   ellos, de alta luminosidad: blanco brillante, amarillo intenso y
   verde fosforescente. Todo lo que antes iba en blanco fijo encima del
   color de la zona (el número del pin, el encabezado del popup, el
   encabezado de la ficha, el thumb de la tarjeta) quedaba ilegible.

   La tinta se resuelve con la variable --ink, que script.js calcula por
   la luminancia real del color: blanca sobre los oscuros, grafito sobre
   los claros. Aquí sólo se consume, con #fff como respaldo por si la
   variable no llegara. Y sobre los muy claros se cambia también la
   sombra del texto: negra en vez de blanca, o el relieve desaparece.
═══════════════════════════════════════════════════════════════ */
.ft-pin__num,
.ft-pin__area,
.ft-pin__img--empty { color: var(--ink, #fff); }
.ft-pin__body { border-color: var(--ink, #fff); }
.ft-pin__img { border-color: color-mix(in srgb, var(--ink, #fff) 45%, transparent); }

.ftp-head__num,
.ftp-head__name { color: var(--ink, #fff); }
.ftp-head__num  { background: color-mix(in srgb, var(--ink, #000) 18%, transparent); }

.detail-head,
.detail-head__topbar-label,
.detail-head__name,
.detail-head__city,
.detail-head__avatar--num { color: var(--ink, #fff); }
.detail-head__avatar--num {
  background: color-mix(in srgb, var(--ink, #000) 16%, transparent);
  border-color: color-mix(in srgb, var(--ink, #fff) 45%, transparent);
}
.prop-card__thumb--plot { color: var(--ink, #fff); }

/* Punto de color en la píldora de zona: con nueve regiones y cinco
   colores, el nombre solo ya no dice de qué color es en el mapa. */
.filter-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--navy);
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
/* Una zona puede quedar en cero al cruzarse con el filtro de
   escrituración: se atenúa en vez de desaparecer, así el equipo ve que
   esa región existe y que ahí no hay nada de lo que está buscando. */
.filter-pill.is-empty { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════
   ESTADO DEL PREDIO — esmeralda, ámbar y violeta
   ───────────────────────────────────────────────────────────────
   Son estados, no zonas, así que tienen su propio grupo de filtros en
   el header (separado de las píldoras de región) y sus propios colores,
   que pisan el de la zona en el mapa, el pin y la tarjeta.

   Tres estados y un orden entre ellos, de más a menos urgente:

     ÁMBAR      vendido — ya no es inventario disponible.
     VIOLETA    por confirmar — el dato está en duda.
     ESMERALDA  escriturado a nombre de TAO.

   El orden importa porque un predio puede tener dos a la vez: uno
   vendido y escriturado se pinta ÁMBAR, porque verlo esmeralda haría
   creer que sigue siendo de TAO. La prioridad se resuelve en
   tools/build_data.py (PRIORIDAD_ESTADO) y llega ya decidida en el
   campo `color` de data.js; aquí sólo se viste.

   El color nunca va solo: cada estado lleva además su etiqueta escrita
   en la tarjeta y su sello en la ficha, y el lindero de un predio por
   confirmar se dibuja punteado. Nadie tiene que distinguir el violeta
   del morado de Punta Coyote para leer el mapa.
═══════════════════════════════════════════════════════════════ */
:root {
  --esmeralda: #00a86b;
  --esmeralda-dark: #05704a;
  --esmeralda-soft: #e4f7ee;
  --esmeralda-line: #a9e3c9;

  /* Ámbar — vendido. El tono oscuro es el que se usa sobre fondo
     claro: el #ff9500 puro no llega al contraste mínimo con texto. */
  --ambar: #ff9500;
  --ambar-dark: #8a4d00;
  --ambar-soft: #fff2e0;
  --ambar-line: #ffd39e;

  /* Violeta — por confirmar. */
  --violeta: #a855f7;
  --violeta-dark: #6b21a8;
  --violeta-soft: #f6ecfe;
  --violeta-line: #ddbcf8;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate);
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: all 150ms;
}
.status-pill svg { width: 12px; height: 12px; }
.status-pill:hover { color: var(--graphite); border-color: var(--line-heavy); background: var(--cream); }
.status-pill__count { font-size: 10px; font-weight: 700; opacity: 0.65; }
.status-pill.is-active {
  color: var(--white);
  border-color: var(--navy);
  background: var(--navy);
}
.status-pill.is-active .status-pill__count { opacity: 0.85; }

/* El botón de escriturados lleva el esmeralda siempre: apagado como
   acento, encendido como fondo. Es el que el equipo va a buscar. */
.status-pill--escr {
  color: var(--esmeralda-dark);
  border-color: var(--esmeralda-line);
  background: var(--esmeralda-soft);
}
.status-pill--escr:hover {
  color: var(--esmeralda-dark);
  border-color: var(--esmeralda);
  background: #d5f2e5;
}
.status-pill--escr.is-active {
  color: #fff;
  background: var(--esmeralda);
  border-color: var(--esmeralda-dark);
}

/* Etiqueta de la tarjeta */
.status-tag--escriturado {
  background: var(--esmeralda-soft);
  color: var(--esmeralda-dark);
  border-color: var(--esmeralda-line);
}
/* Filo esmeralda en la tarjeta del predio escriturado: se ve en la
   lista sin tener que leer la etiqueta. */
.prop-card--escriturado { box-shadow: inset 3px 0 0 var(--esmeralda); }

/* Pin: anillo esmeralda extra, para que se distinga del relleno de
   zona incluso cuando el mapa está muy alejado. */
.ft-pin--escriturado .ft-pin__body {
  box-shadow: inset 0 -7px 11px rgba(0,0,0,0.24),
              inset 0 2px 3px rgba(255,255,255,0.4),
              0 0 0 2px rgba(0,168,107,0.55);
}

/* Popup y ficha */
.ftp-val--escr { color: var(--esmeralda-dark); }
.detail-escr {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 8px;
}
.detail-escr.is-si {
  background: var(--esmeralda-soft);
  color: var(--esmeralda-dark);
  border: 1px solid var(--esmeralda-line);
}
.detail-escr.is-no {
  background: var(--cream);
  color: var(--slate);
  border: 1px solid var(--line-heavy);
}
.detail-approx--escr {
  background: var(--esmeralda-soft);
  border-color: var(--esmeralda-line);
  color: var(--esmeralda-dark);
}
/* Sello en el encabezado de la ficha: va en esmeralda sólido para que
   se lea igual encima de cualquier color de zona. */
.detail-head__seal {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--esmeralda);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 10px;
  padding: 3px 9px;
  white-space: nowrap;
}
/* Contador del banner */
.map-banner__stat--escr .map-banner__num { color: var(--esmeralda); }

/* ── Vendido — ámbar ──────────────────────────────────────────── */
.status-pill--vend {
  color: var(--ambar-dark);
  border-color: var(--ambar-line);
  background: var(--ambar-soft);
}
.status-pill--vend:hover {
  color: var(--ambar-dark);
  border-color: var(--ambar);
  background: #ffe7c8;
}
.status-pill--vend.is-active {
  color: #fff;
  background: var(--ambar-dark);
  border-color: var(--ambar-dark);
}
.status-tag--vendido {
  background: var(--ambar-soft);
  color: var(--ambar-dark);
  border-color: var(--ambar-line);
}
.prop-card--vendido { box-shadow: inset 3px 0 0 var(--ambar); }
.ft-pin--vendido .ft-pin__body {
  box-shadow: inset 0 -7px 11px rgba(0,0,0,0.24),
              inset 0 2px 3px rgba(255,255,255,0.4),
              0 0 0 2px rgba(255,149,0,0.6);
}
.ftp-val--vend { color: var(--ambar-dark); font-weight: 800; }
.detail-approx--vendido {
  background: var(--ambar-soft);
  border-color: var(--ambar-line);
  color: var(--ambar-dark);
}
/* El sello del encabezado de la ficha. El fondo de ese encabezado ya es
   el color del estado, así que un sello del MISMO color se perdería:
   estos dos van en el tono oscuro de su propia familia, que contrasta
   contra el claro de atrás. */
.detail-head__seal--vendido      { background: var(--ambar-dark); }
.detail-head__seal--porconfirmar { background: var(--violeta-dark); }

/* ── Por confirmar — violeta ──────────────────────────────────── */
.status-pill--conf {
  color: var(--violeta-dark);
  border-color: var(--violeta-line);
  background: var(--violeta-soft);
}
.status-pill--conf:hover {
  color: var(--violeta-dark);
  border-color: var(--violeta);
  background: #eeddfd;
}
.status-pill--conf.is-active {
  color: #fff;
  background: var(--violeta-dark);
  border-color: var(--violeta-dark);
}
.status-tag--porconfirmar {
  background: var(--violeta-soft);
  color: var(--violeta-dark);
  border-color: var(--violeta-line);
  border-style: dashed;
}
.prop-card--porconfirmar { box-shadow: inset 3px 0 0 var(--violeta); }
/* Igual que el lindero punteado del mapa: el pin de un predio por
   confirmar lleva el borde discontinuo, no sólo el color. */
.ft-pin--porconfirmar .ft-pin__body {
  border-style: dashed;
  box-shadow: inset 0 -7px 11px rgba(0,0,0,0.24),
              inset 0 2px 3px rgba(255,255,255,0.4),
              0 0 0 2px rgba(168,85,247,0.6);
}
.ftp-val--conf { color: var(--violeta-dark); font-weight: 800; }
.detail-approx--porconfirmar {
  background: var(--violeta-soft);
  border-color: var(--violeta-line);
  color: var(--violeta-dark);
}

/* Predio con nota del equipo pero sin estado: la etiqueta sólo avisa
   que hay algo escrito adentro, sin sugerir que pase nada con él. */
.status-tag--nota {
  background: var(--cream);
  color: var(--slate);
  border-color: var(--line-heavy);
}

@media (max-width: 880px) {
  /* En pantalla angosta el header ya se apila: el grupo de
     escrituración va en su propia línea, completo, arriba de las
     zonas — es el filtro que más se usa. */
  .header-status {
    order: 4;
    flex: 0 0 100%;
    width: 100%;
    padding-right: 0;
    border-right: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-status::-webkit-scrollbar { display: none; }
  .header-filters { order: 5; }
}

/* Predio marcado sólo con chincheta: existe y está ubicado, pero no
   tiene lindero levantado. Se dice en la ficha, no se dibuja un
   polígono inventado. */
.ftp-val--sl { font-size: 12px; font-weight: 700; color: var(--slate); }

/* Predio sin coordenada: el pin está en el centro de su región sólo para
   que se vea que existe. Va translúcido y con el borde punteado — tiene
   que notarse a simple vista que ese punto NO es la posición real. */
.ft-pin--aprox { opacity: 0.85; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35)); }
.ft-pin--aprox .ft-pin__body {
  border-style: dashed;
  background-image: none;
  box-shadow: inset 0 -5px 9px rgba(0,0,0,0.18);
}
.ft-pin--aprox .ft-pin__area { font-style: italic; letter-spacing: 0.02em; }
.status-tag--aprox {
  background: #fdf3dd;
  color: #92620a;
  border-color: #f0d693;
  border-style: dashed;
}