:root {
  --primary: #00d2ff;
  --primary-2: #3a7bd5;
  --accent: #f59e0b;
  --bg-0: #06080b;
  --bg-1: #0f172a;
  --bg-2: #1e293b;
  --bg-3: #0b1220;
  --line: #1f2a3d;
  --line-2: #334155;
  --text: #e2e8f0;
  --muted: #64748b;
  --muted-2: #475569;
  --glass: rgba(18, 28, 46, 0.55);
  --glass-strong: rgba(15, 23, 42, 0.78);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ── Scrollbar global con tema oscuro/cyan ──────────────────────────────────
   Aplica a cualquier elemento que tenga overflow. Mantengo colores planos
   (sin gradient ni box-shadow inset): un thumb con gradient+shadow se repinta
   en cada frame del scroll y producía lag visible en otros elementos del DOM.
   Algunos contenedores específicos (chat-body, results-list, filtros, calc,
   pps-list) ya tenían su propia versión — quedan iguales porque sus reglas
   con selector más específico ganan. */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a4365 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #2a4365;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #3a7bd5;
}
*::-webkit-scrollbar-thumb:active {
  background: #00d2ff;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-1);
  color: var(--text);
}

/* =========================================================================
   SIDEBAR — AI AGENT PANEL
   ========================================================================= */
#sidebar {
  position: relative;
  width: 340px;
  min-width: 340px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(0, 210, 255, 0.08) 0%, transparent 60%),
    radial-gradient(120% 60% at 100% 100%, rgba(58, 123, 213, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a101c 55%, #090e19 100%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              min-width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sidebar rail (collapsed nav) — hidden by default */
.sidebar-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0 12px;
  flex: 1;
  min-height: 0;
}

.rail-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.18s;
}

.rail-btn:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(0, 210, 255, 0.1);
  border-color: rgba(0, 210, 255, 0.45);
}

.rail-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(58, 123, 213, 0.25));
  border-color: rgba(0, 210, 255, 0.65);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.3);
}

.rail-btn.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: linear-gradient(180deg, #00d2ff, #3a7bd5);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.8);
}

.rail-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Custom tooltip for rail buttons */
.rail-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 1100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.rail-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.rail-spacer { flex: 1; min-height: 8px; }

.rail-btn-expand {
  color: var(--primary);
  border-color: rgba(0, 210, 255, 0.35);
  background: rgba(0, 210, 255, 0.06);
}

.rail-btn-expand:hover {
  background: rgba(0, 210, 255, 0.18);
  transform: translateX(2px);
}

/* Ambient FX layers */
.sidebar-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.sfx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: orbFloat 18s ease-in-out infinite;
}

.sfx-orb-1 {
  width: 280px;
  height: 280px;
  top: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.55), transparent 70%);
}

.sfx-orb-2 {
  width: 240px;
  height: 240px;
  bottom: -60px;
  right: -60px;
  background: radial-gradient(circle, rgba(58, 123, 213, 0.55), transparent 70%);
  animation-delay: -9s;
  animation-duration: 22s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -15px) scale(1.06); }
  66% { transform: translate(-18px, 12px) scale(0.96); }
}

.sfx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at top, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 20%, transparent 70%);
  opacity: 0.4;
}

/* Header / Agent hero */
#sidebar-header {
  position: relative;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.6), rgba(11, 18, 32, 0.0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.agent-hero {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Pareja de botones de colapso/ampliar — apilados en vertical en desktop
   para liberar ~30px horizontales y dejar entrar el título completo. */
.agent-collapse-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

.agent-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

/* --- BRAND LOGO (replace logo.svg in mapa/assets/images/ to update everywhere) --- */
.avatar-logo {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.7));
  animation: logoBreath 3.2s ease-in-out infinite;
}

@keyframes logoBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.55));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 14px rgba(0, 210, 255, 0.9));
  }
}

/* Estado "loading" del header: el logo gira y el h1 cambia de texto.
   Spin compuesto:
     • logoSpinUp (0.3s ease-in): rampUp rápido para que arranque con
       aceleración perceptible pero corta (smooth start).
     • logoSpin (0.95s linear infinite): crucero a velocidad constante
       — sin ease per-rotación, así no hay pulsaciones de velocidad.
   El smooth STOP se maneja con WAAPI desde _hideStatus (decelera con
   ease-out hasta el próximo múltiplo de 360° → aterriza en 0° sin snap). */
#sidebar-header.loading .avatar-logo {
  animation:
    logoSpinUp 0.3s cubic-bezier(0.4, 0, 0.5, 1) both,
    logoSpin 0.95s linear infinite 0.3s;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.85));
}

@keyframes logoSpinUp {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Swap suave del título cuando cambia entre "HousePin" y el
   texto de carga. JS agrega .title-swap antes de cambiar textContent,
   espera el fade-out, cambia el texto, quita la clase y fade-in. */
#sidebar-header h1 {
  transition: opacity 0.16s ease;
}

#sidebar-header h1.title-swap {
  opacity: 0;
}

/* --- HAUSY avatar mascot --- */
.avatar-hausy {
  position: absolute;
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: contain;
  border-radius: 50%;
}

.hausy-idle  { animation: hausyFloat  3s   ease-in-out infinite; }
.hausy-think { animation: hausyThink  1.4s ease-in-out infinite; }
.hausy-blink { animation: hausyPop    0.35s ease-out; }
.hausy-smile { animation: hausySmile  0.55s ease-out; }
.hausy-still { animation: none; opacity: 0.45; }

/* Freeze any Hausy that has a later sibling article also containing a Hausy */
#msg-stream article:has(~ article .avatar-hausy) .avatar-hausy {
  animation: none !important;
  opacity: 0.45 !important;
  filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.2)) !important;
}

@keyframes hausyFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.05) translateY(-2px); }
}
@keyframes hausyThink {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30%       { transform: translateX(2px) rotate(5deg); }
  70%       { transform: translateX(-1px) rotate(-3deg); }
}
@keyframes hausyPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes hausySmile {
  0%   { transform: scale(1)    rotate(0deg); }
  25%  { transform: scale(1.2)  rotate(-8deg); }
  50%  { transform: scale(1.2)  rotate(8deg); }
  75%  { transform: scale(1.1)  rotate(-4deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Ring color shifts per state */
#avatar-wrap[data-state="think"] .avatar-ring-1 {
  border-color: rgba(168, 85, 247, 0.5);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(168, 85, 247, 0.7) 120deg, transparent 240deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
#avatar-wrap[data-state="smile"] .avatar-ring-1 {
  border-color: rgba(34, 197, 94, 0.5);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(34, 197, 94, 0.7) 120deg, transparent 240deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.avatar-core {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffffff 0%, #6be6ff 25%, #00d2ff 55%, #1a4a8c 100%);
  box-shadow:
    0 0 18px rgba(0, 210, 255, 0.55),
    inset 0 0 8px rgba(255, 255, 255, 0.35);
  animation: avatarBreath 3.2s ease-in-out infinite;
  display: none;
}

.avatar-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-ring-1 {
  inset: 0;
  border: 1px solid rgba(0, 210, 255, 0.45);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 210, 255, 0.65) 120deg, transparent 240deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: ringSpin 4s linear infinite;
}

.avatar-ring-2 {
  inset: -4px;
  border: 1px dashed rgba(0, 210, 255, 0.25);
  animation: ringSpin 16s linear infinite reverse;
}

.avatar-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 50%;
  left: 50%;
  margin: -2.5px 0 0 -2.5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(0, 210, 255, 0.9);
  transform-origin: center;
  animation: sparkTravel 5s linear infinite;
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

@keyframes avatarBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.55), inset 0 0 8px rgba(255,255,255,0.35);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.85), inset 0 0 10px rgba(255,255,255,0.55);
  }
}

@keyframes sparkTravel {
  0%   { transform: rotate(0deg) translateX(22px); opacity: 1; }
  50%  { opacity: 0.3; }
  100% { transform: rotate(360deg) translateX(22px); opacity: 1; }
}

.agent-titles {
  flex: 1;
  min-width: 0;
}

#sidebar-header h1 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 25%, #ffffff 50%, #3a7bd5 75%, #00d2ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderShine 3s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.35));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes loaderShine {
  to { background-position: 200% center; }
}

.agent-status {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.agent-collapse {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.55);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.agent-collapse:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(0, 210, 255, 0.08);
}

/* Mode toggle pills */
#mode-toggle {
  position: relative;
  margin: 12px 14px 0;
  padding: 4px;
  border-radius: 12px;
  background: rgba(10, 16, 28, 0.7);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  flex-shrink: 0;
  overflow: hidden;
}

.mode-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(33.333% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.22), rgba(58, 123, 213, 0.22));
  border: 1px solid rgba(0, 210, 255, 0.55);
  border-radius: 9px;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.25);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

#mode-toggle[data-active="search"] .mode-indicator {
  transform: translateX(calc(100% + 2px));
}

#mode-toggle[data-active="tools"] .mode-indicator {
  transform: translateX(calc(200% + 4px));
}

.mode-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 9px;
  transition: color 0.2s;
}

.mode-btn:hover { color: var(--text); }
.mode-btn.active { color: #ffffff; text-shadow: 0 0 8px rgba(0, 210, 255, 0.4); }

/* Panels container */
.panel {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  animation: panelFade 0.28s ease;
}
.panel.active { display: flex; }

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

/* =========================================================================
   CHAT PANEL
   ========================================================================= */
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}
.chat-body::-webkit-scrollbar { width: 5px; }
.chat-body::-webkit-scrollbar-track { background: transparent; }
.chat-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }
.chat-body::-webkit-scrollbar-thumb:hover { background: #2b3a57; }

.chat-hero {
  padding: 2px 4px 0;
}

.chat-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.12), rgba(58, 123, 213, 0.12));
  border: 1px solid rgba(0, 210, 255, 0.28);
  color: #9fe5ff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.badge-pulse {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--primary);
  animation: statusPulse 1.8s ease-in-out infinite;
}

.chat-hero-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.15;
  background: linear-gradient(180deg, #ffffff 0%, #cfeaf7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chat-hero-sub {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 4px;
  line-height: 1.45;
}

/* Chips */
.chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 4px 6px;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 92%, transparent 100%);
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 7px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #cbd5e1;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.chip:hover {
  border-color: var(--primary);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.12), rgba(58, 123, 213, 0.12));
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.18);
  transform: translateY(-1px);
}

.chip:active { transform: translateY(0); }

/* Messages */
.msg-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 4px;
}

.msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: msgIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.msg-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
}

.msg-avatar .avatar-hausy {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.8)) drop-shadow(0 0 18px rgba(0, 180, 255, 0.5));
}


.msg-bubble {
  position: relative;
  max-width: 82%;
  padding: 9px 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  border-radius: 14px;
  color: var(--text);
  word-wrap: break-word;
}

.msg-bubble b { color: #ffffff; font-weight: 700; }

.disambig-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.disambig-label {
  font-size: 0.72rem;
  color: var(--muted);
}
.disambig-label strong { color: #fff; }
.disambig-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.disambig-pill {
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: rgba(30, 41, 59, 0.6);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.disambig-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.disambig-pill.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: var(--primary);
  color: var(--primary);
}

/* Botón "Ver / cambiar filtros" como footer de la burbuja del agente:
   mismo formato que .am-clear-btn ("Limpiar pines"), con colores celestes.
   Va flush a los bordes de la burbuja (padding 9px 12px → márgenes negativos). */
.chat-filtros-btn {
  display: block;
  box-sizing: border-box;
  width: calc(100% + 24px);     /* 100% del contenido + los 12px de padding a cada lado */
  margin: 10px -12px -9px;
  padding: 9px 13px;
  background: rgba(56, 189, 248, 0.08);
  border: none;
  border-top: 1px solid rgba(51, 65, 85, 0.7);
  border-radius: 0 0 14px 4px;   /* esquinas inferiores como .msg-agent .msg-bubble */
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-filtros-btn:hover { background: rgba(56, 189, 248, 0.18); }

.msg-agent .msg-bubble {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(22, 32, 51, 0.85));
  border: 1px solid rgba(51, 65, 85, 0.9);
  border-bottom-left-radius: 4px;
  backdrop-filter: blur(4px);
}

.msg-user {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.msg-user .msg-bubble {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(58, 123, 213, 0.25));
  border: 1px solid rgba(0, 210, 255, 0.55);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.12);
}

/* Rich message (card) wrapper */
.msg-rich .a2ui-card,
.msg-rich .a2ui-stat-card {
  flex: 1;
  max-width: calc(100% - 34px);
}

/* Typing indicator (hook for future use) */
.msg-typing .msg-bubble {
  padding: 8px 12px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.typing-status {
  font-size: 0.78rem;
  color: #94a3b8;
  animation: statusFade 0.4s ease;
  white-space: nowrap;
}

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

.typing-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  margin-bottom: 3px;
}
.typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typingDot 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* =========================================================================
   STREET LINE — dashes caminando como hormigas (keyframes únicamente;
   las animaciones se aplican inline desde JS para evitar conflictos)
   ========================================================================= */
@keyframes street-flow-forward {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; } /* 12+10 = 22 → dos ciclos por loop */
}
@keyframes street-halo-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.38; }
}

/* =========================================================================
   AMENITY PINS (mapa)
   ========================================================================= */
.amenity-pin {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  border: 2.5px solid rgba(255,255,255,0.9);
  animation: am-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  cursor: pointer;
}
@keyframes am-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* =========================================================================
   AMENITY CARD (chat)
   ========================================================================= */
.am-card {
  padding: 0 !important;
  overflow: hidden;
  max-width: 100% !important;
  width: 100%;
}
.am-header {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px 8px;
  font-weight: 700; font-size: 0.78rem;
  color: #00d2ff; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(51,65,85,0.6);
}
.am-cat {
  padding: 7px 13px;
  border-bottom: 1px solid rgba(51,65,85,0.25);
}
.am-cat:last-of-type { border-bottom: none; }
.am-cat-hdr {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.am-emoji { font-size: 0.88rem; }
.am-cat-name { font-weight: 600; font-size: 0.78rem; color: #e2e8f0; flex: 1; }
.am-badge {
  background: rgba(0,210,255,0.15); color: #00d2ff;
  border-radius: 999px; padding: 1px 7px;
  font-size: 0.68rem; font-weight: 700;
}
.am-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.am-list li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.73rem; color: #94a3b8; padding: 1px 0;
}
.am-item-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; margin-right: 8px;
}
.am-dist { color: #00d2ff; font-weight: 600; white-space: nowrap; font-size: 0.69rem; }
.am-item {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px !important;
  margin: 0 -5px;
  transition: background 0.15s;
}
.am-item:hover { background: rgba(0,210,255,0.08); }
.am-item:hover .am-item-name { color: #00d2ff; }
.am-show-more {
  background: none; border: none;
  color: #475569; font-size: 0.69rem;
  cursor: pointer; padding: 4px 0 0;
  transition: color 0.15s; display: block;
}
.am-show-more:hover { color: #00d2ff; }
.am-clear-btn {
  display: block; width: 100%; padding: 8px 13px;
  background: rgba(239,68,68,0.07);
  border: none; border-top: 1px solid rgba(51,65,85,0.5);
  color: #ef4444; font-size: 0.73rem; font-weight: 600;
  cursor: pointer; text-align: center; transition: background 0.2s;
}
.am-clear-btn:hover { background: rgba(239,68,68,0.17); }

/* =========================================================================
   AMENIDAD OBJETIVO — pin en mapa + card en chat
   ========================================================================= */
.ao-map-pin {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ao-color, #00d2ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ao-color, #00d2ff) 30%, transparent),
              0 4px 16px rgba(0,0,0,0.5);
  animation: ao-pulse 2.4s ease-in-out infinite;
  cursor: pointer;
}
@keyframes ao-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ao-color, #00d2ff) 25%, transparent), 0 4px 16px rgba(0,0,0,0.5); }
  50%       { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ao-color, #00d2ff) 10%, transparent), 0 4px 20px rgba(0,0,0,0.5); }
}

/* Handle de arrastre en el borde del círculo */
.ao-drag-handle {
  width: 30px; height: 30px;
  background: var(--ao-color, #00d2ff);
  border: 2.5px solid rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 700;
  cursor: move;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5),
              0 0 0 3px color-mix(in srgb, var(--ao-color, #00d2ff) 35%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
  animation: ao-handle-pop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes ao-handle-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ao-drag-handle:hover {
  transform: scale(1.3);
  box-shadow: 0 3px 14px rgba(0,0,0,0.6),
              0 0 0 5px color-mix(in srgb, var(--ao-color, #00d2ff) 20%, transparent);
}

.ao-card {
  padding: 0 !important;
  overflow: hidden;
  max-width: 100% !important;
  width: 100%;
}
.ao-header {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px 11px;
  background: color-mix(in srgb, var(--ao-color, #00d2ff) 8%, transparent);
  border-bottom: 1px solid rgba(51,65,85,0.5);
}
.ao-map-icon { font-size: 26px; flex-shrink: 0; }
.ao-title-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ao-title {
  font-size: 0.87rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ao-subtitle { font-size: 0.69rem; color: var(--muted); transition: color 0.2s; }
.ao-drag-hint {
  flex-shrink: 0;
  font-size: 0.63rem; font-weight: 600;
  color: var(--ao-color, #00d2ff);
  opacity: 0.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
  cursor: default;
}

.ao-props-zone {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px 12px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
}
.ao-props-emoji { font-size: 26px; flex-shrink: 0; }
.ao-props-info { display: flex; flex-direction: column; gap: 3px; }
.ao-props-num { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.ao-props-note { font-size: 0.67rem; color: var(--muted); font-style: italic; }

/* ── Tabla de oportunidades dentro de la card de amenidad ──────────────── */
.ao-opp-slot {
  padding: 10px 12px 11px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
  display: flex; flex-direction: column; gap: 8px;
}
.ao-opp-slot--loading {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 14px;
  color: var(--muted);
  font-size: 0.73rem;
}
.ao-opp-loading-spinner {
  width: 13px; height: 13px;
  border: 2px solid rgba(0,210,255,0.18);
  border-top-color: #00d2ff;
  border-radius: 50%;
  animation: ao-spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes ao-spin { to { transform: rotate(360deg); } }

.ao-opp-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px;
  font-size: 0.75rem; color: var(--muted);
}
.ao-opp-empty-emoji { font-size: 18px; opacity: 0.7; }

.ao-opp-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}
.ao-opp-head-emoji { font-size: 14px; }
.ao-opp-head-title { flex: 1; }
.ao-opp-head-count {
  background: rgba(0,210,255,0.13);
  color: #00d2ff;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 0.67rem;
  font-weight: 700;
}

.ao-opp-table-wrap {
  border-radius: 6px;
  background: rgba(15,23,42,0.45);
  border: 1px solid rgba(51,65,85,0.55);
  overflow: hidden;
}
.ao-opp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.7rem;
  color: #e2e8f0;
}
.ao-opp-table col.ao-opp-col-prop { width: auto; }
.ao-opp-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 4px;
  background: rgba(51,65,85,0.25);
  border-bottom: 1px solid rgba(51,65,85,0.55);
  white-space: nowrap;
}
.ao-opp-table thead th.ao-opp-th-num { text-align: right; }
.ao-opp-table thead th.ao-opp-th-prop { padding-left: 8px; }
/* Anchos fijos para las columnas numéricas. La columna Propiedad se queda
   con el espacio restante y trunca con ellipsis cuando hace falta. */
.ao-opp-table thead th.ao-opp-th-num { width: 52px; }
.ao-opp-row {
  cursor: pointer;
  transition: background 0.15s;
  border-top: 1px solid rgba(51,65,85,0.32);
}
.ao-opp-row:first-child { border-top: none; }
.ao-opp-row:hover { background: rgba(0,210,255,0.07); }
.ao-opp-row td {
  padding: 7px 4px;
  vertical-align: middle;
}
.ao-opp-td-prop {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px !important;
}
.ao-opp-kind-ico {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  margin-right: 5px;
}
.ao-opp-rank {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.ao-opp-mini-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  margin-left: 3px;
  filter: drop-shadow(0 0 3px rgba(250,204,21,0.5));
}
.ao-opp-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.ao-opp-disc { color: #4ade80; }
.ao-opp-row--arriendo .ao-opp-disc { color: #c084fc; }
.ao-opp-na { color: rgba(148,163,184,0.55); font-style: italic; }

.ao-opp-no-opps {
  padding: 8px 2px;
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

.ao-opp-cheapest {
  --cheap-c: 250, 204, 21;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(var(--cheap-c),0.10), rgba(var(--cheap-c),0.04));
  border: 1px solid rgba(var(--cheap-c),0.25);
  border-radius: 6px;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s;
}
.ao-opp-cheapest--arriendo { --cheap-c: 192, 132, 252; }
.ao-opp-cheapest:hover {
  background: linear-gradient(90deg, rgba(var(--cheap-c),0.16), rgba(var(--cheap-c),0.06));
  border-color: rgba(var(--cheap-c),0.45);
}
.ao-opp-cheapest-emoji { font-size: 18px; }
.ao-opp-cheapest-info {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.ao-opp-cheapest-title {
  font-size: 0.72rem; font-weight: 700;
  color: rgb(var(--cheap-c));
}
.ao-opp-cheapest-sub {
  font-size: 0.67rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ao-opp-cheapest-cta {
  font-size: 0.7rem; font-weight: 700;
  color: rgb(var(--cheap-c));
  flex-shrink: 0;
}

.ao-actions { display: flex; }
.ao-btn-amenidades, .ao-btn-limpiar {
  flex: 1; padding: 9px 6px;
  font-size: 0.72rem; font-weight: 600;
  border: none; cursor: pointer; transition: background 0.18s;
}
.ao-btn-amenidades {
  background: rgba(0,210,255,0.08); color: #00d2ff;
  border-right: 1px solid rgba(51,65,85,0.45);
}
.ao-btn-amenidades:hover { background: rgba(0,210,255,0.18); }
.ao-btn-limpiar { background: rgba(239,68,68,0.07); color: #ef4444; }
.ao-btn-limpiar:hover { background: rgba(239,68,68,0.17); }

/* =========================================================================
   COMPARE CARD (calles / propiedades)
   ========================================================================= */
.cmp-card {
  padding: 0 !important;
  overflow: hidden;
  max-width: 100% !important;
  width: 100%;
}
.cmp-header {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px 8px;
  font-weight: 700; font-size: 0.78rem;
  color: #00d2ff; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(51,65,85,0.6);
}
.cmp-list {
  list-style: none; margin: 0;
  padding: 8px 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.cmp-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.77rem; color: #e2e8f0;
  padding: 4px 6px; margin: 0 -6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.cmp-row:hover { background: rgba(0,210,255,0.08); }
.cmp-row:hover .cmp-name { color: #00d2ff; }
.cmp-row-fail { cursor: default; }
.cmp-row-fail:hover { background: transparent; }
.cmp-row-fail .cmp-name { color: #94a3b8; text-decoration: line-through; }
.cmp-row-fail .cmp-sub { color: #ef4444; font-weight: 600; }
.cmp-dot {
  width: 12px; height: 12px; border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.cmp-num {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0f172a; font-weight: 800; font-size: 0.75rem;
  flex-shrink: 0;
  font-family: inherit;
}
.cmp-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.cmp-sub {
  color: #94a3b8; font-size: 0.68rem;
  white-space: nowrap; flex-shrink: 0;
}
.cmp-future {
  padding: 7px 13px;
  font-size: 0.64rem; color: #475569;
  text-align: center;
  border-top: 1px dashed rgba(51,65,85,0.5);
  font-style: italic;
}

/* Botón para cyclar entre alternativas de una misma fila */
.cmp-alt-btn {
  flex-shrink: 0;
  padding: 2px 7px;
  font-size: 0.65rem; font-weight: 700;
  background: rgba(0,210,255,0.12);
  border: 1px solid rgba(0,210,255,0.35);
  color: #00d2ff;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.cmp-alt-btn:hover {
  background: rgba(0,210,255,0.25);
  transform: scale(1.05);
}

/* Tranquilidad mode rows */
.cmp-row-tranq { align-items: center; }
.cmp-row-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.cmp-row-main .cmp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-row-main .cmp-sub  { white-space: nowrap; }
.cmp-tranq {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  flex-shrink: 0; margin-left: 6px; min-width: 52px; text-align: center;
}
.cmp-tranq-score {
  font-size: 1.05rem; font-weight: 800; line-height: 1;
}
.cmp-tranq-emoji { font-size: 0.9rem; line-height: 1; }
.cmp-tranq-detail {
  font-size: 0.58rem; color: #94a3b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 90px;
}
.cmp-tranq-clean { color: #22c55e; }

/* Pin numerado para comparador de propiedades */
.compare-pin {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #0f172a; font-weight: 900; font-size: 0.95rem;
  font-family: inherit;
  transform: translate(0, 0);
  transition: transform 0.2s;
}
.compare-pin:hover { transform: scale(1.15); }
.compare-pin > span { line-height: 1; }
/* Pin "blando" cuando solo tenemos calle (no pin exacto del número) */
.compare-pin-soft {
  border-style: dashed;
  opacity: 0.85;
}

/* Badge "vista dividida activa" dentro del header de la card */
.cmp-split-badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================================
   SPLIT MAP VIEW
   ========================================================================= */

/* Las celdas del grid heredan el tamaño del contenedor (#split-map-container) */
.split-cell {
  position: relative;
  overflow: hidden;
  background: #0a0f1e;
}

/* Etiqueta de cada panel (glassmorphism) */
.split-label {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 600;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(51,65,85,0.5);
  border-left: 3px solid;         /* color por item, seteado en JS */
  border-radius: 8px;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 7px;
  max-width: calc(100% - 30px);
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.split-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.split-num {
  width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0f172a; font-weight: 800; font-size: 0.72rem;
  flex-shrink: 0; font-family: inherit;
}
.split-name {
  font-size: 0.73rem; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.split-sub {
  font-size: 0.63rem; color: #64748b; white-space: nowrap; flex-shrink: 0;
}

/* Botón "← Mapa único" flotante centrado en el borde inferior del split */
#split-exit-btn {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(0, 210, 255, 0.45);
  color: #00d2ff;
  font-size: 0.82rem; font-weight: 700;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,210,255,0.1);
  white-space: nowrap;
  font-family: inherit;
}
#split-exit-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  transform: translateX(-50%) scale(1.04);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 2px rgba(0,210,255,0.3);
}

/* =========================================================================
   SCORE CARD
   ========================================================================= */
.sc-card {
  padding: 0 !important; overflow: hidden;
  max-width: 100% !important; width: 100%;
}
.sc-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(51,65,85,0.5);
}
.sc-label-top {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #00d2ff;
}
.sc-address {
  font-size: 0.82rem; font-weight: 600; color: #e2e8f0; margin-top: 3px;
}
.sc-gauge-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 10px;
}
.sc-gauge-row--tranq { padding-top: 10px; }
.sc-section-divider {
  padding: 6px 14px 5px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  color: #475569; text-transform: uppercase;
  border-top: 1px solid rgba(51,65,85,0.45);
  background: rgba(0,0,0,0.15);
}
.sc-gauge { width: 90px; height: 90px; flex-shrink: 0; }
.sc-rating-col {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.sc-badge { font-size: 1.4rem; line-height: 1; }
.sc-rating {
  font-size: 0.88rem; font-weight: 700; color: #e2e8f0; line-height: 1.2;
}
.sc-note {
  font-size: 0.65rem; color: #475569; margin-top: 2px;
}
.sc-factors {
  display: flex; flex-direction: column; gap: 7px;
  padding: 2px 14px 10px;
}
.sc-factor { display: flex; flex-direction: column; gap: 2px; }
.sc-factor-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.sc-factor-name { font-size: 0.74rem; color: #cbd5e1; }
.sc-factor-pts  { font-size: 0.68rem; color: #64748b; }
.sc-factor-det  { font-size: 0.64rem; color: #475569; }
.sc-bar-track {
  height: 5px; background: rgba(51,65,85,0.6);
  border-radius: 99px; overflow: hidden;
}
.sc-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.sc-footer {
  padding: 7px 14px 9px;
  font-size: 0.62rem; color: #334155; letter-spacing: 0.02em;
  border-top: 1px solid rgba(51,65,85,0.4);
}

/* =========================================================================
   A2UI RICH CARDS
   ========================================================================= */
.a2ui-card {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(51, 65, 85, 0.9);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.a2ui-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.55);
  box-shadow: 0 10px 28px rgba(0, 210, 255, 0.18);
}

.a2ui-card-media {
  position: relative;
  height: 116px;
  background:
    radial-gradient(120% 140% at 30% 20%, rgba(0, 210, 255, 0.35), transparent 60%),
    linear-gradient(135deg, #0b1220, #152238);
  overflow: hidden;
}

.a2ui-card-media-skel {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px);
  mix-blend-mode: overlay;
  animation: skelShine 3s linear infinite;
}
@keyframes skelShine {
  0% { transform: translateX(-20%); }
  100% { transform: translateX(20%); }
}

.a2ui-card-media-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.a2ui-badge-360 {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #06080b;
  background: linear-gradient(135deg, #ffffff, #6be6ff);
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.6);
  animation: badge360Pulse 2.4s ease-in-out infinite;
}

@keyframes badge360Pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 210, 255, 0.5); }
  50%      { box-shadow: 0 0 18px rgba(0, 210, 255, 0.95); }
}

.a2ui-card-body {
  padding: 11px 13px 13px;
}

.a2ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fe5ff;
  margin-bottom: 4px;
}

.a2ui-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}

.a2ui-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.3;
}

.a2ui-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.73rem;
  color: #94a3b8;
  margin-bottom: 10px;
}

.a2ui-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(51, 65, 85, 0.9);
}

.a2ui-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.a2ui-price-val {
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ffffff, #9fe5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.01em;
}

.a2ui-price-sub {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1px;
}

.a2ui-cta {
  padding: 6px 11px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid rgba(0, 210, 255, 0.6);
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(58, 123, 213, 0.18));
  color: #ffffff;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}

.a2ui-cta:hover {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(58, 123, 213, 0.35));
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.35);
  transform: translateY(-1px);
}

/* Stat card */
.a2ui-stat-card {
  border-radius: 14px;
  padding: 12px 13px 10px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(51, 65, 85, 0.9);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

.a2ui-stat-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  color: #cbd5e1;
  font-weight: 600;
}

.a2ui-stat-icon { font-size: 0.92rem; }

.a2ui-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00d2ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.a2ui-spark {
  margin-top: 2px;
  height: 36px;
}

.a2ui-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.a2ui-stat-foot {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  margin-top: 2px;
}

.delta-up { color: #10b981; font-weight: 700; }
.muted { color: var(--muted); }

/* =========================================================================
   CHAT INPUT
   ========================================================================= */
.chat-input-wrap {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 16, 28, 0), rgba(10, 16, 28, 0.8));
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.chat-input-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 7px 7px 7px 9px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input-inner:focus-within {
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px rgba(0, 210, 255, 0.12),
    0 6px 18px rgba(0, 210, 255, 0.1);
}

#chat-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
  min-height: 22px;
  padding: 4px 2px;
}

#chat-input::placeholder { color: var(--muted-2); }

.chat-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.chat-icon-btn:hover {
  background: rgba(0, 210, 255, 0.08);
  color: var(--primary);
}

.chat-send {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0, 210, 255, 0.55);
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  color: #06080b;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.18s;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.35);
  overflow: visible;
  position: relative;
}

.chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 210, 255, 0.55);
}
.chat-send:active { transform: translateY(0); }

.chat-send.pulse { animation: sendPulse 0.5s ease; }

@keyframes sendPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.9); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Glow when input has text */
.chat-send.has-text {
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.7), 0 0 32px rgba(0, 210, 255, 0.3);
  border-color: rgba(0, 210, 255, 0.9);
  animation: sendGlow 1.8s ease-in-out infinite;
}

@keyframes sendGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(0, 210, 255, 0.6), 0 0 28px rgba(0, 210, 255, 0.25); }
  50%       { box-shadow: 0 0 22px rgba(0, 210, 255, 0.95), 0 0 44px rgba(0, 210, 255, 0.45); }
}

/* Launch animation on send */
.chat-send.launching {
  animation: sendLaunch 0.7s ease forwards;
}
.chat-send.launching svg {
  animation: planeFly 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sendLaunch {
  0%   { transform: scale(1);    box-shadow: 0 0 14px rgba(0,210,255,0.4); }
  20%  { transform: scale(0.82); box-shadow: 0 0 6px  rgba(0,210,255,0.2); }
  50%  { transform: scale(1.15); box-shadow: 0 0 44px rgba(0,210,255,1), 0 0 80px rgba(0,210,255,0.55); }
  75%  { transform: scale(1.05); box-shadow: 0 0 22px rgba(0,210,255,0.6); }
  100% { transform: scale(1);    box-shadow: 0 0 14px rgba(0,210,255,0.35); }
}

@keyframes planeFly {
  0%   { transform: translate(0px,  0px)  rotate(0deg)   scale(1);    opacity: 1; }
  30%  { transform: translate(22px, -22px) rotate(-35deg) scale(0.7);  opacity: 0; }
  31%  { transform: translate(-20px, 16px) rotate(20deg)  scale(0.5);  opacity: 0; }
  65%  { transform: translate(-4px,  4px)  rotate(5deg)   scale(1.2);  opacity: 1; }
  100% { transform: translate(0px,  0px)  rotate(0deg)   scale(1);    opacity: 1; }
}

.chat-hint {
  margin-top: 7px;
  font-size: 0.66rem;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.chat-hint-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
  flex-shrink: 0;
}

.chat-hint-example {
  color: var(--primary);
  font-style: italic;
  opacity: 0.85;
}

.chat-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  line-height: 1;
}

.chat-hint.has-streets {
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.07), rgba(245, 158, 11, 0));
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  animation: chat-streets-fade-in 0.25s ease-out;
}

@keyframes chat-streets-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-streets-icon {
  font-size: 0.78rem;
  line-height: 1;
  flex-shrink: 0;
}

.chat-streets-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  color: #f59e0b;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-streets-clear-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 50%;
  color: rgba(239, 68, 68, 0.7);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-streets-clear-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #ef4444;
}

.chat-streets-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.chat-street-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.66rem;
  font-weight: 600;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1.4;
}

.chat-street-chip.more {
  background: rgba(245, 158, 11, 0.05);
  color: #f59e0b;
  cursor: help;
}

.chat-streets-multi-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 50%;
  color: #f59e0b;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-streets-multi-btn:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}
.chat-streets-multi-btn.on {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.24));
  border-color: #f59e0b;
  color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

/* =========================================================================
   SEARCH PANEL (existing logic preserved)
   ========================================================================= */
.panel-search #search-wrap {
  padding: 14px 12px 10px;
  border-bottom: none;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
  transition: color 0.2s;
}

.search-field:focus-within .search-field-icon {
  color: var(--primary);
}

/* Wide sidebar (desktop) — ocupa la mitad de la pantalla */
@media (min-width: 681px) {
  #sidebar.sidebar-wide {
    width: 50vw;
    min-width: 50vw;
  }
  /* Wide: solo mostrar el < para volver a normal */
  #sidebar.sidebar-wide #btn-wide-sidebar { display: none; }
  /* Colapsado: ocultar el > (el rail tiene el suyo) */
  #sidebar.sidebar-collapsed #btn-wide-sidebar { display: none; }
}

/* Collapsed sidebar (desktop) — elegant vertical rail */
@media (min-width: 681px) {
  #sidebar.sidebar-collapsed {
    width: 64px;
    min-width: 64px;
  }

  #sidebar.sidebar-collapsed #sidebar-header {
    padding: 14px 0 12px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  }

  #sidebar.sidebar-collapsed .agent-hero {
    justify-content: center;
    gap: 0;
  }

  #sidebar.sidebar-collapsed .agent-titles,
  #sidebar.sidebar-collapsed #mode-toggle,
  #sidebar.sidebar-collapsed .panel,
  #sidebar.sidebar-collapsed .agent-collapse,
  #sidebar.sidebar-collapsed .agent-collapse-stack {
    display: none !important;
  }

  #sidebar.sidebar-collapsed .sidebar-rail {
    display: flex;
  }

  #sidebar.sidebar-collapsed .agent-avatar {
    cursor: pointer;
  }

  /* Intensify breathing when collapsed — logo becomes the focal point */
  #sidebar.sidebar-collapsed .avatar-logo {
    animation-duration: 2.4s;
  }
}

#search-wrap {
  padding: 10px 12px;
  flex-shrink: 0;
}

#search-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: rgba(10, 16, 28, 0.85);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.87rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#search-input::placeholder {
  color: var(--muted-2);
}

#search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.12);
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #334155;
}

#addr-search-wrap {
  padding: 0 12px 6px;
  flex-shrink: 0;
}

#addr-input {
  width: 100%;
  padding: 9px 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.87rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
#addr-input::placeholder { color: #475569; }
#addr-input:focus { border-color: #f59e0b; }

#addr-results {
  padding: 0 8px 4px;
  flex-shrink: 0;
  max-height: 160px;
  overflow-y: auto;
}

.addr-result-item {
  padding: 8px 11px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: all 0.12s;
}
.addr-result-item:hover { background: #0f172a; border-color: #f59e0b44; }
.addr-result-item.active { background: #0f172a; border-color: #f59e0b; }
.addr-result-item .addr-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: #e2e8f0;
}
.addr-result-item .addr-sub {
  font-size: 0.70rem;
  color: #64748b;
  margin-top: 2px;
}
.addr-placeholder {
  padding: 8px 11px;
  font-size: 0.78rem;
  color: #475569;
}

#street-selections-panel {
  padding: 8px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line-2);
  background: rgba(245, 158, 11, 0.03);
}
#street-selections-panel[hidden] { display: none; }

.street-sel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.street-sel-count {
  font-size: 0.7rem;
  color: #f59e0b;
  font-weight: 700;
  margin-right: auto;
}
.street-sel-multi-toggle {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.06);
  color: #f59e0b;
  cursor: pointer;
  transition: all 0.15s;
}
.street-sel-multi-toggle:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: #f59e0b;
}
.street-sel-multi-toggle.on {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.22));
  border-color: #f59e0b;
  color: #fffbeb;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.32);
}
.street-sel-clear-all {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: rgba(10, 16, 28, 0.5);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.street-sel-clear-all:hover { color: #ef4444; border-color: #ef4444; }

.street-sel-props-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #6366f1;
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.street-sel-props-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
  border-color: #818cf8;
}

.street-sel-intersec-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.street-sel-intersec-btn:hover {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
  border-color: #fbbf24;
}

/* Pin de intersección de calles */
.ix-map-pin {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ix-color, #f59e0b);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; font-weight: 900;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ix-color, #f59e0b) 30%, transparent),
              0 4px 16px rgba(0,0,0,0.5);
  animation: ao-pulse 2.4s ease-in-out infinite;
  cursor: pointer;
}

.street-sel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.street-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.72rem;
  color: #fde68a;
  max-width: 100%;
}
.street-sel-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  font-weight: 600;
}
.street-sel-chip-x {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fde68a;
  border-radius: 999px;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.12s;
}
.street-sel-chip-x:hover {
  background: #ef4444;
  color: #fff;
}

#level-tabs {
  display: flex;
  padding: 4px 12px 0;
  gap: 5px;
  flex-shrink: 0;
}

.tab-btn {
  flex: 1;
  padding: 7px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(10, 16, 28, 0.5);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.22), rgba(58, 123, 213, 0.22));
  color: #ffffff;
  border-color: rgba(0, 210, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
}

.tab-btn:hover:not(.active) {
  border-color: var(--primary);
  color: var(--primary);
}

#breadcrumb {
  padding: 7px 12px;
  font-size: 0.72rem;
  color: #64748b;
  flex-shrink: 0;
  min-height: 26px;
}

#breadcrumb .bc-item {
  color: #00d2ff;
  cursor: pointer;
}

#breadcrumb .bc-item:hover {
  color: #00d2ff;
}

#breadcrumb .bc-clear {
  color: #ef4444;
  cursor: pointer;
  margin-left: 8px;
  font-size: 0.68rem;
}

#results-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
  min-height: 0;
}

#results-list::-webkit-scrollbar {
  width: 5px;
}

#results-list::-webkit-scrollbar-track {
  background: transparent;
}

#results-list::-webkit-scrollbar-thumb {
  background: #233149;
  border-radius: 4px;
}
#results-list::-webkit-scrollbar-thumb:hover { background: #2b3a57; }

.result-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: all 0.15s;
  background: rgba(15, 23, 42, 0.35);
}

.result-item:hover {
  background: rgba(0, 210, 255, 0.06);
  border-color: rgba(0, 210, 255, 0.3);
  transform: translateX(2px);
}

.result-item.selected {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(58, 123, 213, 0.15));
  border-color: var(--primary);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.2);
}

.result-item.kb-focus {
  background: rgba(0, 210, 255, 0.08);
  border-color: var(--primary);
}

.result-item .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
}

.result-item .sub {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 2px;
}

.result-count {
  font-size: 0.72rem;
  color: #475569;
  padding: 6px 11px;
}

.result-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  padding: 10px 11px 4px;
  margin-top: 4px;
}

.result-group-label:first-child {
  margin-top: 0;
}

/* ----- Resultados con badge de tipo ----- */
.result-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.result-item-main {
  flex: 1;
  min-width: 0;
}
.result-type-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid;
}
.result-type-region {
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.35);
}
.result-type-provincia {
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}
.result-type-comuna {
  color: #cbd5e1;
  background: rgba(203, 213, 225, 0.06);
  border-color: rgba(203, 213, 225, 0.25);
}

/* ----- Estado vacío del panel Buscar ----- */
.results-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 22px 28px;
  text-align: center;
  color: #475569;
}
.results-empty-hint svg { color: #334155; }
.results-empty-hint-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 240px;
}

/* ----- Disclosure de Filtros de propiedades dentro del panel Buscar ----- */
.filtros-disclosure {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.filtros-disclosure[open] { background: rgba(0, 0, 0, 0.28); }

.filtros-disclosure-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  transition: background 0.15s;
}
.filtros-disclosure-summary::-webkit-details-marker { display: none; }
.filtros-disclosure-summary::marker { content: ''; }
.filtros-disclosure-summary:hover { background: rgba(255, 255, 255, 0.03); }

.filtros-disclosure-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.filtros-disclosure[open] .filtros-disclosure-chevron { transform: rotate(180deg); }

.filtros-disclosure-label { flex: 1; }

.filtros-disclosure-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 210, 255, 0.18);
  border: 1px solid rgba(0, 210, 255, 0.45);
  color: #00d2ff;
  flex-shrink: 0;
}

.filtros-disclosure-body {
  max-height: 50vh;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

/* Modo "filtros abierto": el panel Buscar muestra solo input + form de filtros.
   Se aplica con la clase .search-mode-filtros (toggled por el evento toggle
   del <details>). Los resultados y el breadcrumb se ocultan; el disclosure
   crece a flex:1 y el body suelta su max-height. */
.panel-search.search-mode-filtros #breadcrumb,
.panel-search.search-mode-filtros #results-list,
.panel-search.search-mode-filtros #street-selections-panel {
  display: none;
}
.panel-search.search-mode-filtros .filtros-disclosure {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: none;
  background: transparent;
}
.panel-search.search-mode-filtros .filtros-disclosure-body {
  flex: 1;
  max-height: none;
}

/* Cuando el shell vive dentro del disclosure, padding interno + scrollbar fino.
   El scroll lo hace .filtros-disclosure-body, no .filtros-body — sin nested scroll. */
.filtros-disclosure-body #filtros-form-shell {
  display: flex;
  flex-direction: column;
}
.filtros-disclosure-body .filtros-body {
  flex: none;
  overflow: visible;
}
.filtros-disclosure-body::-webkit-scrollbar { width: 5px; }
.filtros-disclosure-body::-webkit-scrollbar-track { background: transparent; }
.filtros-disclosure-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

/* Reset inline (reemplaza el viejo .filtros-footer con Aplicar + Reset) */
.filtros-reset-inline {
  align-self: flex-end;
  margin: 4px 14px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}
.filtros-reset-inline:hover { color: var(--text); border-color: var(--line-2); }

/* Mount del modal viejo .panel-filtros — al moverse el shell aquí
   debe llenar el espacio vertical y dejar que .filtros-body haga scroll */
.panel-filtros-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-filtros-mount > #filtros-form-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.search-placeholder {
  padding: 24px 16px;
  text-align: center;
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.6;
}

#map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

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

#map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-btn {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid #334155;
  border-radius: 9px;
  padding: 7px 13px;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.map-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
/* Estado expandido: el toggle se diferencia con un tono cálido (acción de cerrar) */
#map-controls.expanded #btn-toggle-controls {
  background: rgba(251, 113, 133, 0.18);
  border-color: rgba(251, 113, 133, 0.55);
  color: #fecdd3;
  flex-direction: row-reverse;
}
#map-controls.expanded #btn-toggle-controls:hover {
  background: rgba(251, 113, 133, 0.28);
  border-color: #fb7185;
  color: #ffffff;
}
.map-btn .btn-chip {
  /* Chip de color: círculo lleno, mismo significado que el viejo .dot */
  width: 12px;
  height: 12px;
  margin: 0 2px;
}
.map-btn .dot { display: none; }

.map-btn:hover {
  border-color: #00d2ff;
  color: #00d2ff;
}

.map-btn.active {
  background: rgba(0, 210, 255, 0.25);
  border-color: #00d2ff;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.35), 0 0 14px rgba(0, 210, 255, 0.3);
}

.btn-back {
  background: rgba(15, 23, 42, 0.95);
  border-color: #00d2ff;
  color: #00d2ff;
  text-decoration: none;
  justify-content: center;
  margin-bottom: 6px;
}

.btn-back:hover {
  background: rgba(0, 210, 255, 0.3);
  color: #ffffff;
  text-shadow: none;
}

#extra-controls {
  display: none;
  flex-direction: column;
  gap: 6px;
}

#extra-controls.mob-show {
  display: flex;
}

#btn-toggle-controls {
  display: flex;
  justify-content: center;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

#info-panel {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(30, 41, 59, 0.97);
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 240px;
  max-width: 400px;
  backdrop-filter: blur(12px);
  display: none;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#info-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: #64748b;
}

#info-panel h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #00d2ff;
  margin-bottom: 3px;
}

#info-panel p {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.5;
}

.info-ctrl-btn {
  position: absolute;
  top: 8px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
  line-height: 1;
}

#info-close {
  right: 10px;
}

.info-ctrl-btn:hover {
  color: #e2e8f0;
}

#info-panel.closing {
  /* Fly up and right towards the button */
  transform: translate(30vw, -40vh) scale(0.1);
  opacity: 0;
  pointer-events: none;
}

/* For glowing the button when it receives the panel */
@keyframes buttonPulseReceive {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(245, 158, 11, 0.8); background: rgba(245, 158, 11, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
}

.btn-receive-anim {
  animation: buttonPulseReceive 0.6s ease-out;
}

/* =========================================================================
   PREMIUM PAGE LOADER
   ========================================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06080b;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  animation: loaderFadeIn 0.6s ease forwards;
}

@keyframes loaderFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loader-ring-wrap {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  margin-bottom: -20px;
}

.loader-logo {
  width: 340px;
  height: 340px;
  object-fit: contain;
  animation: logoPulse 2.4s ease-in-out infinite;
}

@keyframes logoPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 28px rgba(0, 210, 255, 0.85));
  }
}

.loader-text {
  font-family: 'Outfit', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00d2ff 0%, #3a7bd5 25%, #ffffff 50%, #3a7bd5 75%, #00d2ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderShineAni 3s linear infinite;
  filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.5));
  display: inline-block;
}

@keyframes loaderShineAni {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

.loader-dots {
  display: flex;
  gap: 4px;
}

.loader-dots span {
  display: inline-block;
  font-size: 1.4rem;
  color: #00d2ff;
  animation: dotBounce 1.2s ease-in-out infinite;
  line-height: 1;
}

.loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotBounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Response Loader for Mobile */
@media (max-width: 768px) {
  .loader-ring-wrap {
    width: 280px;
    height: 280px;
    margin-bottom: -40px;
  }

  .loader-logo {
    width: 220px;
    height: 220px;
  }

  .loader-text {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }

  .loader-dots span {
    font-size: 1.1rem;
  }
}

@media (max-width: 680px) {
  body {
    position: relative;
    overflow: hidden;
  }

  #map-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  #sidebar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 1001;
    width: auto;
    min-width: unset;
    border-radius: 18px;
    border: 1px solid rgba(51, 65, 85, 0.9);
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(0, 210, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    max-height: 74px;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #sidebar.mob-expanded {
    height: 78vh;
    max-height: 78vh;
  }

  /* Compact header on mobile */
  #sidebar-header {
    padding: 12px 12px 10px;
  }

  #sidebar-header h1 {
    font-size: 0.92rem;
  }

  .agent-status {
    font-size: 0.68rem;
  }

  .agent-avatar {
    width: 38px;
    height: 38px;
  }

  /* Mode toggle hidden when collapsed */
  #mode-toggle {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    border-width: 0;
    transition: all 0.25s ease;
  }

  #sidebar.mob-expanded #mode-toggle {
    max-height: 60px;
    margin-top: 10px;
    padding: 4px;
    opacity: 1;
    border-width: 1px;
  }

  /* Panels hidden when collapsed */
  .panel {
    display: none !important;
  }

  #sidebar.mob-expanded .panel.active {
    display: flex !important;
  }

  #search-wrap {
    padding: 10px 12px;
  }

  #search-input {
    padding: 12px 14px 12px 36px;
    font-size: 0.95rem;
    border-radius: 12px;
  }

  #level-tabs {
    padding: 2px 12px 0;
  }

  .result-item {
    padding: 12px 13px;
  }

  .chat-body {
    padding: 12px 10px 4px;
  }

  .chat-hero-title {
    font-size: 1.1rem;
  }

  .chat-input-wrap {
    padding: 10px 10px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #map-controls {
    top: 94px;
    gap: 8px;
  }

  /* Modo compacto: solo el ícono SVG, botón cuadrado */
  #map-controls:not(.expanded) .map-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 11px;
    gap: 0;
  }
  #map-controls:not(.expanded) .map-btn .btn-label { display: none; }
  #map-controls:not(.expanded) .map-btn .btn-chip {
    /* En compacto, el chip de color se agranda para ocupar el lugar del ícono */
    width: 16px;
    height: 16px;
    margin: 0;
  }
  #map-controls:not(.expanded) .map-btn .filtros-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    margin-left: 0;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
  }

  /* Modo expandido: panel translúcido con padding y blur */
  #map-controls.expanded {
    background: rgba(15, 23, 42, 0.85);
    padding: 8px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
  }

  #info-panel {
    bottom: 85px;
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
    min-width: unset;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #info-panel.closing {
    transform: translate(35vw, -60vh) scale(0.1);
  }

  /* En mobile el sidebar ya ocupa el ancho completo, así que el botón de
     "ampliar" (wide) no aporta — lo escondemos para no apilar dos flechas. */
  #btn-wide-sidebar {
    display: none;
  }

  /* Close arrow — hidden when collapsed, visible when expanded, points down */
  .agent-collapse {
    opacity: 0;
    pointer-events: none;
    transform: rotate(90deg) scale(0.85);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  #sidebar.mob-expanded .agent-collapse {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(90deg) scale(1);
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.4);
    color: var(--primary);
  }

  #sidebar.mob-expanded .agent-collapse:hover,
  #sidebar.mob-expanded .agent-collapse:active {
    background: rgba(0, 210, 255, 0.2);
    color: #ffffff;
  }
}

.leaflet-popup-content-wrapper {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 12px;
}

.leaflet-popup-tip {
  background: #1e293b;
}

.leaflet-popup-content {
  margin: 12px 16px;
}

.leaflet-control-zoom a {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.leaflet-control-zoom a:hover {
  background: #334155 !important;
}

.leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #64748b !important;
  font-size: 10px;
}

.leaflet-control-attribution a {
  color: #00d2ff !important;
}


/* ---- ISÓCRONA PANEL (sidebar) ---- */
.panel-isocrona {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  color: var(--text);
}
.panel-isocrona.active { display: flex; }

.iso-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.iso-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.iso-back-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }

.iso-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c4b5fd;
  flex: 1;
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.panel-title-icon {
  flex: 0 0 auto;
}

.iso-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.iso-step-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.iso-step-header strong { font-size: 0.95rem; font-weight: 600; }
.iso-step-header p { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.iso-step-num {
  min-width: 26px; height: 26px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; color: #fff;
}

.iso-search-wrap { position: relative; }
.iso-search-wrap input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.iso-search-wrap input:focus { border-color: #a78bfa; }

.iso-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}
.iso-search-results.hidden { display: none; }
.iso-result-item {
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.iso-result-item:hover { background: rgba(167,139,250,0.1); }
.iso-result-item.iso-result-pin { border-left: 2px solid #a78bfa; }
.iso-result-name { font-size: 0.85rem; }
.iso-result-comuna { font-size: 0.72rem; color: var(--muted); }

.iso-hint { font-size: 0.75rem; color: var(--muted); text-align: center; }
.iso-addr-label { font-size: 0.78rem; color: #a78bfa; }

.iso-modes {
  display: flex; gap: 8px;
}
.iso-mode-btn {
  flex: 1;
  padding: 8px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.iso-mode-btn.active {
  background: rgba(124,58,237,0.25);
  border-color: #a78bfa;
  color: #c4b5fd;
}
.iso-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.09); }

.iso-slider-wrap { display: flex; flex-direction: column; gap: 6px; }
.iso-slider-wrap input[type=range] {
  width: 100%;
  accent-color: #a78bfa;
  cursor: pointer;
}
.iso-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted);
}
#iso-slider-val { color: #c4b5fd; font-weight: 600; }

.iso-result-info {
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  display: flex; align-items: center; gap: 8px;
}
.iso-result-info.hidden { display: none; }
.iso-info-icon { font-size: 1rem; }

.iso-loading {
  font-size: 0.82rem; color: var(--muted);
  text-align: center;
  animation: pulse 1.4s ease-in-out infinite;
}
.iso-loading.hidden { display: none; }

.iso-close {
  width: 100%;
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.iso-close:hover { background: rgba(255,0,0,0.08); color: #fca5a5; border-color: #fca5a5; }

.iso-work-pin {
  font-size: 24px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.iso-work-pin-b {
  filter: drop-shadow(0 2px 8px rgba(45,212,191,0.7));
}

/* Badge A (violeta) y B (teal) */
.iso-badge-a { background: linear-gradient(135deg, #7c3aed, #a78bfa) !important; }
.iso-badge-b { background: linear-gradient(135deg, #0d9488, #2dd4bf) !important; }

.iso-addr-b { color: #2dd4bf !important; }

/* Acordeón B */
.iso-b-section {
  border-top: 1px solid var(--line-2);
  margin-top: 4px;
  padding-top: 4px;
}

.iso-b-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 10px;
  transition: background 0.15s;
  color: var(--text);
}
.iso-b-toggle:hover { background: rgba(45,212,191,0.07); }

.iso-b-toggle-text {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.iso-b-toggle-text strong { font-size: 0.88rem; font-weight: 600; }
.iso-b-toggle-sub { font-size: 0.72rem; color: var(--muted); }

.iso-b-chevron {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2dd4bf;
  width: 20px;
  text-align: center;
  transition: transform 0.2s;
}

.iso-b-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10px;
}
.iso-b-content.hidden { display: none; }

/* Botón quitar B */
.iso-remove-b {
  width: 100%;
  padding: 6px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  color: #f87171;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 4px;
}
.iso-remove-b:hover { background: rgba(239,68,68,0.15); }

/* Modos de transporte para B (misma forma, color teal activo) */
.iso-mode-btn-b {
  flex: 1;
  padding: 8px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.iso-mode-btn-b.active {
  background: rgba(13,148,136,0.25);
  border-color: #2dd4bf;
  color: #5eead4;
}
.iso-mode-btn-b:hover:not(.active) { background: rgba(255,255,255,0.09); }

/* El div .iso-modes se reutiliza para ambas personas — ya tiene display:flex */

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* =============================================
   ALERTAS — list + editor + chips + form
   ============================================= */

.alertas-subview { position: relative; }

.alertas-screen {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.alertas-subview[data-screen="list"]   .alertas-screen--list,
.alertas-subview[data-screen="editor"] .alertas-screen--editor {
  display: flex;
}

/* ---- Empty state ---- */
.alertas-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 28px 22px;
}
.alertas-empty[hidden] { display: none; }

.alertas-empty-ico {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(248, 113, 113, 0.18), transparent 70%), rgba(255,255,255,0.025);
  border: 1px dashed rgba(248, 113, 113, 0.28);
  margin-bottom: 4px;
}

.alertas-empty-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 0;
}

.alertas-empty-sub {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 300px;
  margin: 0 0 14px;
}

.alertas-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #f87171, #ef4444);
  border: 1px solid rgba(248, 113, 113, 0.55);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(248, 113, 113, 0.35);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.alertas-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(248, 113, 113, 0.45);
  filter: brightness(1.05);
}
.alertas-cta-primary:active { transform: translateY(0); }

.alertas-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 999px;
  color: #fca5a5;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alertas-cta-secondary:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #fee2e2;
}

/* ---- List ---- */
.alertas-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}
.alertas-list-wrap::-webkit-scrollbar { width: 5px; }
.alertas-list-wrap::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.alertas-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.alertas-list-header[hidden] { display: none; }

.alertas-list-count {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
}

.alertas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 11px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid var(--c, #f87171);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.alert-item:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  border-color: rgba(255, 255, 255, 0.22);
  border-left-color: var(--c, #f87171);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), -4px 0 14px -6px var(--c, #f87171);
}

.alert-item.is-paused { opacity: 0.55; }
.alert-item.is-paused { --c: #94a3b8; }

.alert-item-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert-item-status {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c, #f87171);
  margin-top: 5px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c, #f87171) 70%, transparent);
}
.alert-item.is-paused .alert-item-status { box-shadow: none; }

.alert-item-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}

.alert-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.alert-action-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alert-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
}
.alert-action-btn--danger:hover {
  background: rgba(248, 113, 113, 0.15);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.4);
}

.alert-item-summary {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}
.alert-item-summary b { color: var(--text); font-weight: 700; }

.alert-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.66rem;
  color: var(--muted-2);
  padding-top: 7px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.alert-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.alert-item-chip--matches { color: #34d399; background: rgba(52, 211, 153, 0.1); }

/* ---- Pending backend note ---- */
.alertas-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 14px 14px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 10px;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.45;
}
.alertas-pending-note[hidden] { display: none; }
.alertas-pending-ico {
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- Editor ---- */
.alertas-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
}

.alertas-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.alertas-editor-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  transform: translateX(-2px);
}

.alertas-editor-title {
  flex: 1;
  text-align: right;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.alertas-form {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}
.alertas-form::-webkit-scrollbar { width: 5px; }
.alertas-form::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.alertas-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.alertas-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.alertas-section-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.25), rgba(239, 68, 68, 0.15));
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 800;
}

.alertas-section-hint {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
  margin: -4px 0 2px;
}

.alertas-label-opt {
  color: var(--muted-2);
  font-weight: 500;
  font-size: 0.68rem;
  margin-left: 4px;
}

.alertas-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alertas-row--col {
  flex-direction: column;
  align-items: stretch;
}
.alertas-row--col > .alertas-label { margin-bottom: 4px; }

.alertas-row--range { gap: 6px; }
.alertas-row--range .alertas-input--num { flex: 1; min-width: 0; }

.alertas-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 78px;
}

.alertas-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alertas-field > .alertas-label { min-width: 0; }

.alertas-input {
  flex: 1;
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  font-size: 0.82rem;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.alertas-input:focus {
  outline: none;
  border-color: rgba(0, 210, 255, 0.55);
  background: rgba(10, 16, 28, 0.85);
}

.alertas-input--num { text-align: right; }

.alertas-range-sep {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---- Pills (reusable) ---- */
.alertas-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.alertas-pills--wrap { flex-wrap: wrap; }

.alertas-pill {
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

/* El pill "·" (sin valor: equivale a "sin mínimo") es más compacto para que
   no se gaste espacio horizontal del grupo de Dorms/Baños. */
.alertas-pill[data-pill=""] {
  padding: 6px 9px;
  min-width: 22px;
  text-align: center;
}
.alertas-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.alertas-pill.active {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(239, 68, 68, 0.18));
  border-color: rgba(248, 113, 113, 0.55);
  color: #fee2e2;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.22);
}

/* ---- Geo targets (chips + add row) ---- */
.alertas-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 36px;
  padding: 6px;
  background: rgba(10, 16, 28, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.alertas-targets[data-empty="false"] .alertas-targets-empty { display: none; }
.alertas-targets-empty {
  font-size: 0.72rem;
  color: var(--muted-2);
  padding: 4px 6px;
  font-style: italic;
}

.alertas-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--text);
  max-width: 100%;
}
.alertas-target-chip[data-kind="comuna"] {
  background: rgba(167, 139, 250, 0.1);
  border-color: rgba(167, 139, 250, 0.3);
}
.alertas-target-chip[data-kind="zona"] {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

.alertas-target-chip-kind {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--muted-2);
  margin-right: 2px;
}

.alertas-target-chip-label {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.alertas-target-chip-rm {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.alertas-target-chip-rm:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fee2e2;
}

.alertas-target-pickers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.alertas-pick-btn {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.alertas-pick-btn:hover {
  background: rgba(10, 16, 28, 0.85);
  border-color: rgba(0, 210, 255, 0.4);
  transform: translateY(-1px);
}
.alertas-pick-btn.is-active {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(58, 123, 213, 0.12));
  border-color: rgba(0, 210, 255, 0.55);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.18);
}

.alertas-pick-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pick-c, #00d2ff) 14%, transparent);
  color: var(--pick-c, #00d2ff);
  border: 1px solid color-mix(in srgb, var(--pick-c, #00d2ff) 40%, transparent);
}

.alertas-pick-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alertas-pick-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.alertas-pick-sub {
  font-size: 0.7rem;
  color: var(--muted-2);
}

.alertas-pick-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 210, 255, 0.08);
  border: 1px dashed rgba(0, 210, 255, 0.4);
  border-radius: 8px;
  font-size: 0.74rem;
  color: #ccf4ff;
  animation: alertasPickPulse 1.6s ease-in-out infinite;
}
.alertas-pick-hint[hidden] { display: none !important; }

.alertas-pick-hint-txt { font-weight: 600; }

.alertas-pick-hint-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alertas-pick-hint-cancel:hover {
  background: rgba(248, 113, 113, 0.18);
  color: #fee2e2;
}

@keyframes alertasPickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 210, 255, 0.12); }
}

/* Banner flotante mobile: solo aparece cuando el editor de alerta está
   minimizado para que el usuario pueda ver el mapa y picker o ajustar. */
.alertas-mobile-banner { display: none; }
.alertas-mobile-banner[hidden] { display: none !important; }

@media (max-width: 680px) {
  .alertas-mobile-banner:not([hidden]) {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 9px 9px 14px;
    max-width: calc(100vw - 24px);
    background: rgba(10, 16, 28, 0.96);
    border: 1px solid rgba(0, 210, 255, 0.45);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    color: #e5f6ff;
    font-size: 0.78rem;
    font-weight: 600;
    animation: alertasMobileBannerIn 0.22s ease-out;
  }
  .alertas-mobile-banner-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  .alertas-mobile-banner-btn {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.28), rgba(58, 123, 213, 0.2));
    border: 1px solid rgba(0, 210, 255, 0.55);
    border-radius: 999px;
    color: #ccf4ff;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .alertas-mobile-banner-btn:active {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.45), rgba(58, 123, 213, 0.3));
  }
}

@keyframes alertasMobileBannerIn {
  from { transform: translate(-50%, -8px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* Variante "bottom": para el flujo del círculo. El usuario ajusta el 📍 con el
   pulgar y necesita el botón "Listo" abajo, no arriba — natural mobile + zona
   de pulgar. Reemplaza posición y estilo del banner top-pill. */
@media (max-width: 680px) {
  .alertas-mobile-banner.alertas-mobile-banner--bottom:not([hidden]) {
    top: auto;
    bottom: 88px; /* libera la barrita colapsada del sidebar */
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    padding: 12px 12px 12px 16px;
    border-radius: 16px;
    background: rgba(10, 16, 28, 0.97);
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55);
    animation: alertasMobileBannerInBottom 0.26s ease-out;
    justify-content: space-between;
  }
  .alertas-mobile-banner--bottom .alertas-mobile-banner-txt {
    font-size: 0.82rem;
    max-width: none;
    white-space: normal;
    line-height: 1.3;
  }
  .alertas-mobile-banner--bottom .alertas-mobile-banner-btn {
    background: linear-gradient(135deg, #34d399, #10b981);
    border-color: rgba(52, 211, 153, 0.95);
    color: #053b27;
    padding: 11px 18px;
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
  }
  .alertas-mobile-banner--bottom .alertas-mobile-banner-btn:active {
    transform: translateY(1px);
    background: linear-gradient(135deg, #10b981, #059669);
  }
}

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

/* Si el sidebar se re-expande (porque el usuario tocó la barrita), escondemos
   el banner — el editor ya está visible y no hace falta el mensaje flotante. */
@media (max-width: 680px) {
  #sidebar.mob-expanded ~ #map-wrap .alertas-mobile-banner:not([hidden]) {
    display: none;
  }
}

/* Handle draggable del círculo de alerta (sobre el mapa, no en el panel) */
.alertas-zona-label {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #34d399;
  color: #053b27;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: grab;
  user-select: none;
}
.alertas-zona-label:active { cursor: grabbing; }

/* ---- Phone row ---- */
.alertas-phone-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.alertas-phone-prefix {
  display: grid;
  place-items: center;
  padding: 0 11px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #86efac;
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.alertas-input--phone {
  border-radius: 0 8px 8px 0;
  flex: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- Errors ---- */
.alertas-error {
  font-size: 0.74rem;
  color: #fca5a5;
  padding: 6px 10px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
}
.alertas-error[hidden] { display: none; }

.alertas-error--global { margin-top: -4px; }

/* ---- Actions ---- */
/* No sticky: aparecen al final del form después de scrollear todas las
   secciones. Así no tapan "¿Cómo te avisamos?" mientras el usuario completa. */
.alertas-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.alertas-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.alertas-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  flex: 0 0 auto;
}
.alertas-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.alertas-btn--danger {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.32);
  color: #fca5a5;
  flex: 0 0 auto;
}
.alertas-btn--danger:hover { background: rgba(248, 113, 113, 0.2); color: #fee2e2; }
.alertas-btn--danger[hidden] { display: none; }

.alertas-btn--save {
  background: linear-gradient(135deg, #f87171, #ef4444);
  border-color: rgba(248, 113, 113, 0.55);
  color: #fff;
  box-shadow: 0 6px 18px rgba(248, 113, 113, 0.3);
}
.alertas-btn--save:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(248, 113, 113, 0.4); filter: brightness(1.05); }

/* =============================================
   CALCULADORA PANEL
   ============================================= */

.panel-calc {
  flex-direction: column;
  overflow: hidden;
}

/* =============================================
   PANEL TOOLS — hub + subviews (sector, calc).
   ============================================= */
.panel-tools {
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.tools-subview {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  animation: panelFade 0.24s ease;
}

.panel-tools[data-active-tool="hub"]     .tools-subview[data-subview="hub"],
.panel-tools[data-active-tool="sector"]  .tools-subview[data-subview="sector"],
.panel-tools[data-active-tool="calc"]    .tools-subview[data-subview="calc"],
.panel-tools[data-active-tool="alertas"] .tools-subview[data-subview="alertas"] {
  display: flex;
}

/* ---- Hub: header + grid de tool cards ---- */
.tools-hub-header {
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.tools-hub-titlerow {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tools-hub-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(58, 123, 213, 0.1));
  border: 1px solid rgba(0, 210, 255, 0.32);
  color: #00d2ff;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  flex-shrink: 0;
}

.tools-hub-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.005em;
  line-height: 1.15;
}

.tools-hub-sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.tools-hub-grid {
  flex: 1;
  overflow-y: auto;
  padding: 4px 14px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}
.tools-hub-grid::-webkit-scrollbar { width: 5px; }
.tools-hub-grid::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 13px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    color-mix(in srgb, var(--c, #00d2ff) 18%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.tool-card:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c, #00d2ff) 55%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 22px color-mix(in srgb, var(--c, #00d2ff) 22%, transparent);
}

.tool-card:hover:not(:disabled)::before { opacity: 1; }
.tool-card:active:not(:disabled) { transform: translateY(0); }

.tool-card-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c, #00d2ff) 14%, transparent);
  color: var(--c, #00d2ff);
  margin-bottom: 6px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c, #00d2ff) 22%, transparent);
  transition: transform 0.2s;
}

.tool-card:hover:not(:disabled) .tool-card-ico {
  transform: scale(1.06);
}

.tool-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.15;
}

.tool-card-sub {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.tool-card-meta {
  margin-top: 6px;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--c, #00d2ff) 75%, var(--muted));
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.tool-card-meta--soon {
  color: var(--muted-2);
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.tool-card--soon { opacity: 0.55; cursor: not-allowed; }
.tool-card--soon:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.07); }
.tool-card--soon::before { display: none; }

/* En pantallas estrechas el grid de tools queda en 1 columna. */
@media (max-width: 380px) {
  .tools-hub-grid { grid-template-columns: 1fr; }
}

/* ---- Subview (no-hub): back header + body ---- */
.tools-subview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(0, 210, 255, 0.04), transparent);
}

.tools-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.tools-back:hover {
  background: rgba(0, 210, 255, 0.1);
  border-color: rgba(0, 210, 255, 0.4);
  color: var(--text);
  transform: translateX(-2px);
}

.tools-back svg { flex-shrink: 0; }

.tools-subview-title {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.tools-subview-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* El body de Calc mantiene su scroll interno via .calc-body; aquí solo
   nos aseguramos de que el wrapper no agregue una segunda capa de scroll. */
.tools-subview[data-subview="calc"] .tools-subview-body { overflow: hidden; display: flex; flex-direction: column; }
.tools-subview[data-subview="calc"] .calc-body { flex: 1; }

/* Sector body usa el padding del subview-body para no duplicar */
.tools-subview[data-subview="sector"] .tools-subview-body {
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}
.tools-subview[data-subview="sector"] .tools-subview-body::-webkit-scrollbar { width: 5px; }
.tools-subview[data-subview="sector"] .tools-subview-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.calc-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.calc-body::-webkit-scrollbar { width: 5px; }
.calc-body::-webkit-scrollbar-track { background: transparent; }
.calc-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.calc-header {
  text-align: center;
  padding: 4px 0 20px;
}

.calc-header-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(58, 123, 213, 0.18));
  border: 1px solid rgba(0, 210, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 210, 255, 0.9);
}

.calc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}

.calc-subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Sections */
.calc-section {
  background: rgba(10, 16, 28, 0.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calc-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 210, 255, 0.7);
  margin-bottom: 2px;
}

/* Individual / Pareja toggle */
.calc-pair-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 3px;
}

.calc-pair-btn {
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.calc-pair-btn.active {
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.4);
  color: #fff;
}

/* Fields */
.calc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calc-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.calc-label-hint {
  font-weight: 400;
  opacity: 0.7;
}

.calc-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.18s;
}

.calc-input-wrap:focus-within {
  border-color: rgba(0, 210, 255, 0.5);
}

.calc-pre {
  padding: 0 8px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border-right: 1px solid var(--line);
  line-height: 34px;
  flex-shrink: 0;
}

.calc-suf {
  padding: 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border-left: 1px solid var(--line);
  line-height: 34px;
  flex-shrink: 0;
}

.calc-input {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  height: 34px;
  font-size: 0.82rem;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
}

.calc-input::placeholder { color: var(--muted-2, #3a4a66); }

.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.calc-select {
  width: 100%;
  padding: 0 10px;
  height: 34px;
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7a99'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.calc-select:focus { border-color: rgba(0, 210, 255, 0.5); }

.calc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Submit button */
.calc-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.3), rgba(58, 123, 213, 0.3));
  border: 1px solid rgba(0, 210, 255, 0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.calc-submit-btn:hover {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.42), rgba(58, 123, 213, 0.42));
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.2);
}

.calc-submit-btn:active { transform: translateY(1px); }

/* Warning */
.calc-warning {
  font-size: 0.73rem;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Results */
.calc-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: panelFade 0.25s ease;
}

.calc-results-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 210, 255, 0.7);
  margin-bottom: 2px;
}

.calc-result-card {
  background: rgba(10, 16, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.calc-result-card--main {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.1), rgba(58, 123, 213, 0.1));
  border-color: rgba(0, 210, 255, 0.35);
}

.calc-result-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calc-rc-label {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.calc-rc-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.calc-result-card--main .calc-rc-value {
  font-size: 1.2rem;
  color: rgba(0, 210, 255, 0.95);
}

.calc-result-row .calc-rc-value {
  font-size: 0.88rem;
}

.calc-rc-sub {
  font-size: 0.67rem;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

.calc-pie-note {
  font-size: 0.72rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  line-height: 1.5;
}

.calc-pie-note.warn { color: #fbbf24; background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); }

/* Properties placeholder */
.calc-props-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}

.calc-props-placeholder p {
  font-size: 0.73rem;
  line-height: 1.5;
  margin: 0;
}

/* Recalculate button */
.calc-recalc-btn {
  padding: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
  width: 100%;
}

.calc-recalc-btn:hover { color: var(--text); border-color: rgba(0, 210, 255, 0.3); }

/* Comprar / Arrendar toggle */
.calc-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 10px;
}

.calc-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.01em;
}

.calc-mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(58, 123, 213, 0.2));
  border: 1px solid rgba(0, 210, 255, 0.45);
  color: #fff;
}

/* Costos adicionales collapsible */
.calc-extra-toggle {
  background: rgba(10, 16, 28, 0.4);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.calc-extra-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.18s;
}

.calc-extra-header:hover { color: var(--text); }
.calc-extra-header[aria-expanded="true"] { color: rgba(0, 210, 255, 0.8); }

.calc-extra-chevron {
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.calc-extra-header[aria-expanded="true"] .calc-extra-chevron {
  transform: rotate(180deg);
}

.calc-extra-body {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Checkbox DFL2 */
.calc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  margin-top: 4px;
}

.calc-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: rgba(0, 210, 255, 0.8);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.calc-checkbox-row span {
  font-size: 0.71rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Desglose breakdown */
.calc-desglose {
  background: rgba(10, 16, 28, 0.5);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.calc-desglose-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.73rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.calc-desglose-row:last-child { border-bottom: none; }

.calc-desglose-row.total {
  font-weight: 700;
  color: var(--text);
  background: rgba(0, 210, 255, 0.07);
  border-top: 1px solid rgba(0, 210, 255, 0.15);
}

.calc-desglose-label { color: var(--muted); }
.calc-desglose-value { color: var(--text); font-weight: 600; }
.calc-desglose-row.total .calc-desglose-value { color: rgba(0, 210, 255, 0.9); }

/* =========================================================================
   COMPARADOR DE ZONAS
   ========================================================================= */

.zonas-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zonas-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 16px 20px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.zonas-hint-icon {
  font-size: 2rem;
  line-height: 1;
}

.zonas-hint-note {
  font-size: 0.75rem;
  color: var(--muted-2);
  margin-top: 2px;
}

.zona-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.18s;
}

.zona-card:hover {
  border-color: var(--line-2);
}

.zona-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zona-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.zona-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.zona-delete-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px 5px;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.zona-delete-btn:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.zona-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zona-radio-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.zona-coords {
  font-size: 0.72rem;
  color: var(--muted-2);
  font-family: monospace;
}

.zona-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zona-fly-btn {
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.25);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}

.zona-fly-btn:hover {
  background: rgba(0, 210, 255, 0.2);
}

.zona-drag-hint {
  font-size: 0.7rem;
  color: var(--muted-2);
}

.zonas-clear-all {
  margin-top: 4px;
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #f87171;
  font-size: 0.78rem;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  align-self: stretch;
}

.zonas-clear-all:hover {
  background: rgba(248, 113, 113, 0.08);
}

/* =========================================================================
   PANEL DE FILTROS DE PROPIEDADES
   ========================================================================= */

.filtros-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  background: #fbbf24;
  color: #1f2937;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  line-height: 1;
}

/* Panel ahora vive dentro del sidebar — usa estilos .panel + .iso-panel-header existentes */
.panel-filtros {
  flex-direction: column;
  overflow: hidden;
}

.panel-filtros.active {
  display: flex;
}

.filtros-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.ftab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.ftab:hover { color: var(--text); }

.ftab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.filtros-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
}

.fpane { display: none; flex-direction: column; gap: 12px; }
.fpane.active { display: flex; }

.frow-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid var(--line);
}

.frow-toggle input {
  accent-color: var(--primary);
  cursor: pointer;
}

.frow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.frow-col { flex-direction: column; align-items: stretch; }

.frow-range { gap: 6px; }

.flabel {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  min-width: 76px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fpills {
  display: flex;
  gap: 4px;
  flex: 1;
}

.fpills-wrap { flex-wrap: wrap; }

.fpill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}

.fpill:hover {
  border-color: var(--line-2);
  color: var(--text);
}

.fpill.active {
  background: rgba(0, 210, 255, 0.18);
  border-color: rgba(0, 210, 255, 0.55);
  color: #00d2ff;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.25);
}

.finput {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.78rem;
  padding: 5px 8px;
  border-radius: 6px;
  width: 70px;
  font-family: inherit;
}

.finput:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0, 210, 255, 0.05);
}

.frange-sep {
  color: var(--muted-2);
  font-size: 0.7rem;
}

.fhint {
  font-size: 0.65rem;
  color: var(--muted-2);
  font-style: italic;
  line-height: 1.4;
  padding: 0 2px;
}

.filtros-footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}

.filtros-reset-btn {
  flex: 1;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s;
}

.filtros-reset-btn:hover { color: var(--text); border-color: var(--line-2); }

.filtros-apply-btn {
  flex: 1.4;
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  border: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s;
}

.filtros-apply-btn:hover { filter: brightness(1.1); }

.filtros-apply-btn.flash {
  animation: filtros-apply-flash 0.4s ease;
}

@keyframes filtros-apply-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); transform: scale(1); }
  40%  { box-shadow: 0 0 0 6px rgba(0, 210, 255, 0.35); transform: scale(0.97); }
  100% { box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); transform: scale(1); }
}

.filtros-default-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 7px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #94a3b8;
}

.filtros-default-note span:first-child { font-size: 0.95rem; line-height: 1; }

/* =========================================================================
   PROPIEDADES — popups, leyenda, status, contadores en zonas
   ========================================================================= */

/* El antiguo .props-status flotante se reemplazó por el estado loading
   del header del agente: el logo gira y el h1 muestra "Cargando…". */
@keyframes props-spin { to { transform: rotate(360deg); } }

.props-legend {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.74rem;
  color: var(--text);
  z-index: 900;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.props-legend.hidden { display: none; }

.props-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.props-legend-cat.hidden { display: none; }

.lg-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  min-width: 0;
}

.lg-oferta {
  background: linear-gradient(135deg, #fde047, #fbbf24, #f59e0b);
}
.lg-oferta--venta {
  border: 2px solid #92400e;
}
.lg-oferta--arriendo {
  border: 2px solid #1d4ed8;
}

.lg-venta {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(14, 165, 233, 0.95));
  border: 1.5px solid #0c4a6e;
}

.lg-catastro {
  background: #dc2626;
  border: 1.5px solid #7f1d1d;
}

.lg-count {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.props-legend-zoom {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.props-legend-zoom.hidden { display: none; }

/* ========================================================================
   STATS CHIP — pill mini sobre el mapa (reemplaza la card flotante grande).
   Click → abre panel Sector (PC) o bottom sheet (móvil).
   ======================================================================== */
.stats-chip {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 900;
  max-width: calc(100vw - 32px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(20, 31, 56, 0.94));
  border: 1px solid rgba(0, 210, 255, 0.32);
  border-radius: 999px;
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 18px rgba(0, 210, 255, 0.12);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s,
    border-color 0.18s;
  text-align: left;
}

.stats-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 210, 255, 0.55);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(0, 210, 255, 0.25);
}

.stats-chip:active { transform: translateY(0); }

.stats-chip.hidden { display: none; }

.stats-chip-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.25), rgba(58, 123, 213, 0.18));
  color: #00d2ff;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.25);
}

.stats-chip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 280px;
}

.stats-chip-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.stats-chip-kpis {
  font-size: 0.66rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.stats-chip-kpis b {
  color: var(--text);
  font-weight: 700;
}

.stats-chip-arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
  margin-left: 2px;
}

.stats-chip:hover .stats-chip-arrow {
  color: #00d2ff;
  transform: translateX(2px);
}

/* Pulse al cambiar de contexto — el chip parpadea sutil para llamar la atención. */
.stats-chip.pulse {
  animation: chipPulse 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes chipPulse {
  0%   { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(0, 210, 255, 0.55); }
  60%  { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 14px rgba(0, 210, 255, 0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 0 rgba(0, 210, 255, 0); }
}

/* En móvil el chip se centra abajo, más fácil de tocar con el pulgar. */
@media (max-width: 680px) {
  .stats-chip {
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
  .stats-chip:hover,
  .stats-chip:active { transform: translateX(-50%) translateY(0); }
  .stats-chip-text { max-width: 220px; }
}

/* ========================================================================
   PANEL SECTOR — vive en el sidebar (PC). Mismo contenido que el bottom sheet.
   ======================================================================== */
.sector-panel-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.sector-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.sector-panel-sub {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sector-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}

.sector-panel-body::-webkit-scrollbar { width: 5px; }
.sector-panel-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.sector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 18px;
  color: var(--muted);
}

.sector-empty-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}

.sector-empty-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.sector-empty-sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
}

.sector-content { display: flex; flex-direction: column; gap: 14px; }
.sector-content[hidden] { display: none !important; }

/* ========================================================================
   STATS SHEET — bottom sheet móvil (3 alturas con drag).
   ======================================================================== */
.stats-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background: linear-gradient(180deg, rgba(20, 31, 56, 0.98), rgba(10, 16, 28, 0.98));
  border-top: 1px solid rgba(0, 210, 255, 0.22);
  border-radius: 18px 18px 0 0;
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  max-height: 90vh;
  height: 92px;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(100%);
  touch-action: none;
  overscroll-behavior: contain;
}

.stats-sheet.open {
  display: flex;
  transform: translateY(0);
}

.stats-sheet[data-state="peek"] { height: 92px; }
.stats-sheet[data-state="mid"]  { height: 52vh; }
.stats-sheet[data-state="full"] { height: 88vh; }

.stats-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  cursor: grab;
  flex-shrink: 0;
}

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

.stats-sheet-handle > span {
  display: block;
  width: 42px;
  height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  transition: background 0.18s;
}

.stats-sheet-handle:hover > span,
.stats-sheet.dragging .stats-sheet-handle > span {
  background: rgba(0, 210, 255, 0.5);
}

.stats-sheet.dragging {
  transition: none;
}

.stats-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 10px;
  flex-shrink: 0;
}

.stats-sheet-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 210, 255, 0.12);
  flex-shrink: 0;
}

.stats-sheet-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-sheet-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.stats-sheet-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  transform: rotate(90deg);
}

.stats-sheet-peek {
  padding: 0 16px 6px;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.stats-sheet-peek b { color: var(--text); font-weight: 700; }

.stats-sheet[data-state="mid"] .stats-sheet-peek,
.stats-sheet[data-state="full"] .stats-sheet-peek { display: none; }

.stats-sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: #233149 transparent;
}

.stats-sheet-body::-webkit-scrollbar { width: 5px; }
.stats-sheet-body::-webkit-scrollbar-thumb { background: #233149; border-radius: 4px; }

.stats-sheet[data-state="peek"] .stats-sheet-body { display: none; }

.stats-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}

.stats-sheet[data-state="full"] ~ .stats-sheet-backdrop,
.stats-sheet-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* Sheet solo en móvil — escondida en desktop, donde se usa el panel del sidebar. */
@media (min-width: 681px) {
  .stats-sheet,
  .stats-sheet-backdrop { display: none !important; }
}

/* ========================================================================
   PS-GRID / KPI / MEZCLA — estilos compartidos por el panel y el sheet.
   ======================================================================== */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ps-kpi {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ps-kpi--empty { opacity: 0.55; }

.ps-kpi-label {
  font-size: 0.62rem;
  color: var(--muted-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-kpi-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.ps-kpi-unit {
  font-size: 0.6rem;
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
}

.ps-kpi-range {
  font-size: 0.6rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ps-section-title {
  font-size: 0.66rem;
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ps-volumen {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ps-vol-row {
  font-size: 0.7rem;
  color: var(--muted);
}

.ps-vol-row b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* En bottom sheet móvil, una sola columna lee mejor con el pulgar. */
.stats-sheet .ps-grid { grid-template-columns: 1fr 1fr; }
.stats-sheet[data-state="full"] .ps-grid { grid-template-columns: 1fr 1fr; }

@media (max-width: 380px) {
  .stats-sheet .ps-grid { grid-template-columns: 1fr; }
  .ps-kpi-val { font-size: 0.84rem; }
}

/* Card de comparación de calles en el chat — reutiliza estilos zc-* */
.streets-compare-msg .msg-bubble.streets-compare-bubble {
  background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(58, 123, 213, 0.04) 100%);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 14px;
  padding: 11px 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Override del 82% por defecto: necesitamos todo el ancho útil para que el
     boxplot quepa al lado del nombre incluso con el agente en tamaño normal. */
  max-width: 100% !important;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.streets-compare-msg {
  /* El .msg padre es flex; deja que la card crezca a todo el ancho */
  align-items: stretch;
}

/* Pines de propiedades en el mapa */
.prop-pin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 9px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.15;
  letter-spacing: 0.01em;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  will-change: transform;
}

.prop-pin .pp-val {
  font-variant-numeric: tabular-nums;
}

.prop-pin .pp-year {
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 1px;
}

.prop-pin:hover {
  transform: translateY(-2px) scale(1.08);
  filter: brightness(1.1);
  z-index: 1000;
}

/* OFERTA — destacado, ámbar metálico */
.prop-pin-oferta {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 50%, #f59e0b 100%);
  color: #1f2937;
  border: 1.5px solid #92400e;
  box-shadow:
    0 2px 5px rgba(146, 64, 14, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 -1px 2px rgba(146, 64, 14, 0.3) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.prop-pin-oferta::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #f59e0b;
  border-right: 1.5px solid #92400e;
  border-bottom: 1.5px solid #92400e;
  transform-origin: center;
  transform: translateX(-50%) rotate(45deg);
}

/* Venta (compra): borde sólido más grueso */
.prop-pin-oferta--venta {
  border: 2px solid #92400e;
}

/* Arriendo: borde sólido azul — distinguible desde lejos */
.prop-pin-oferta--arriendo {
  border: 2px solid #1d4ed8;
}

/* OPORTUNIDAD — base compartida (forma + animación) */
.prop-pin-oferta--opp {
  transform: scale(1.12);
  animation: opp-pulse-venta 1.6s ease-in-out infinite;
  position: relative;
  z-index: 5;
}

.prop-pin-oferta--opp:hover {
  transform: translateY(-2px) scale(1.22);
}

.prop-pin-oferta--opp .pp-fire {
  position: absolute;
  top: -10px;
  right: -7px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  animation: opp-fire 1.4s ease-in-out infinite;
}

.prop-pin-oferta--opp .pp-disc {
  font-size: 0.55rem;
  font-weight: 800;
  color: #f0fdf4;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 3px;
  letter-spacing: 0.02em;
}

/* OPORTUNIDAD VENTA — verde esmeralda */
.prop-pin-oferta--opp-venta {
  border: 2px solid #10b981 !important;
  box-shadow:
    0 0 0 2px #10b981,
    0 0 14px rgba(16, 185, 129, 0.7),
    0 2px 5px rgba(6, 95, 70, 0.5);
  animation-name: opp-pulse-venta;
}

.prop-pin-oferta--opp-venta::after {
  background: #10b981;
  border-right-color: #047857;
  border-bottom-color: #047857;
}

.prop-pin-oferta--opp-venta .pp-disc {
  background: #10b981;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.55);
}

/* OPORTUNIDAD ARRIENDO — cyan turquesa, distinto a venta para diferenciar de un vistazo */
.prop-pin-oferta--opp-arriendo {
  border: 2px solid #06b6d4 !important;
  box-shadow:
    0 0 0 2px #06b6d4,
    0 0 14px rgba(6, 182, 212, 0.75),
    0 2px 5px rgba(8, 145, 178, 0.5);
  animation-name: opp-pulse-arriendo;
}

.prop-pin-oferta--opp-arriendo::after {
  background: #06b6d4;
  border-right-color: #0891b2;
  border-bottom-color: #0891b2;
}

.prop-pin-oferta--opp-arriendo .pp-disc {
  background: #06b6d4;
  box-shadow: 0 0 4px rgba(6, 182, 212, 0.6);
}

@keyframes opp-pulse-venta {
  0%, 100% {
    box-shadow:
      0 0 0 2px #10b981,
      0 0 10px rgba(16, 185, 129, 0.55),
      0 2px 5px rgba(6, 95, 70, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 2px #10b981,
      0 0 22px rgba(16, 185, 129, 0.95),
      0 2px 5px rgba(6, 95, 70, 0.5);
  }
}

@keyframes opp-pulse-arriendo {
  0%, 100% {
    box-shadow:
      0 0 0 2px #06b6d4,
      0 0 10px rgba(6, 182, 212, 0.55),
      0 2px 5px rgba(8, 145, 178, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 2px #06b6d4,
      0 0 22px rgba(6, 182, 212, 0.95),
      0 2px 5px rgba(8, 145, 178, 0.5);
  }
}

@keyframes opp-fire {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.2) rotate(4deg); }
}

/* Leyenda de oportunidad */
.lg-opp {
  border: 2px solid #047857;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
.lg-opp--venta {
  background: radial-gradient(circle at 35% 35%, #34d399, #10b981 55%, #047857);
  border-color: #047857;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
.lg-opp--arriendo {
  background: radial-gradient(circle at 35% 35%, #67e8f9, #06b6d4 55%, #0e7490);
  border-color: #0e7490;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.7);
}

.props-legend-opp.hidden { display: none; }

/* (Estilos de popup ahora viven más abajo, en el bloque .prop-pop) */

/* JITTERED — oferta cuyo pin fue desplazado un poco por anti-collision.
   Sin animación intrusiva: solo una transición CSS suave en el position del
   icono Leaflet, para que el reacomodo al zoomend se vea como un slide
   amable y no como un teletransporte. La transition es corta para no
   pelear con la animación nativa de zoom de Leaflet. */
.leaflet-marker-icon.prop-pin-jittered {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* VENTA HISTÓRICA — sutil, cyan translúcido */
.prop-pin-venta {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.95) 0%, rgba(14, 165, 233, 0.95) 100%);
  color: #f0f9ff;
  border: 1.5px solid #0c4a6e;
  box-shadow:
    0 2px 4px rgba(12, 74, 110, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  opacity: 0.92;
}

.prop-pin-venta:hover {
  opacity: 1;
}

/* STACK — edificio/copropiedad con varias ventas históricas en la misma coord.
   Tono cyan más saturado + emoji edificio + cuenta + UF mediana. */
.prop-pin-stack {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 60%, #075985 100%);
  color: #f0f9ff;
  border: 1.5px solid #0c4a6e;
  box-shadow:
    0 2px 6px rgba(8, 47, 73, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
  padding: 2px 8px 2px 6px;
  gap: 4px;
}

.prop-pin-stack .pp-stack-ico {
  font-size: 0.78rem;
  line-height: 1;
}

.prop-pin-stack .pp-stack-n {
  font-weight: 800;
  font-size: 0.78rem;
  color: #fef9c3;
  font-variant-numeric: tabular-nums;
}

.prop-pin-stack .pp-stack-sep {
  opacity: 0.55;
  font-weight: 400;
}

/* Tilde "~" como prefijo de mediana — sutil, en color secundario, justo
   pegado al valor para que se lea "≈8.4k" (valor aproximado/típico). */
.prop-pin-stack .pp-stack-tilde,
.prop-pin-oferta-cluster .pp-stack-tilde {
  font-weight: 700;
  font-size: 0.78rem;
  margin-right: 1px;
  line-height: 1;
}

.prop-pin-stack .pp-stack-tilde {
  color: #7dd3fc;       /* cyan claro sobre fondo azul */
  opacity: 0.75;
}

.prop-pin-oferta-cluster .pp-stack-tilde {
  color: #78350f;       /* marrón oscuro sobre fondo ámbar */
  opacity: 0.7;
}

.prop-pin-stack:hover {
  filter: brightness(1.15);
}

/* CATASTRO SINGLE — una propiedad SII por coord. Pin rojo compacto con el
   avalúo fiscal visible (sin abrir popup). Más chico que los pines de venta
   porque suelen aparecer en gran cantidad (decenas a cientos por viewport). */
.prop-pin-catastro {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #991b1b 100%);
  color: #fef2f2;
  border: 1.25px solid #7f1d1d;
  box-shadow: 0 1px 3px rgba(127, 29, 29, 0.45);
  padding: 1px 5px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 7px;
}

.prop-pin-catastro:hover {
  filter: brightness(1.15);
}

/* Sufijo M / k / B — un tercio más chico que el número para que la magnitud
   se lea como acento, no como parte del valor. em (relativo) para que escale
   tanto en single como en stack. */
.prop-pin-catastro .pp-suf,
.prop-pin-catastro-stack .pp-suf {
  font-size: 0.78em;
  font-weight: 700;
  margin-left: 0.5px;
  opacity: 0.92;
}

/* ── HEATMAP por avalúo fiscal ────────────────────────────────────────────
   5 niveles de rojo (quintiles del set visible). lv1 = más barato (rojo
   claro, casi rosado), lv5 = más caro (rojo negruzco). Texto claro en niveles
   oscuros y oscuro en niveles claros, para mantener contraste. "na" = sin
   avalúo válido — gris neutro, no compite con el resto del heatmap. */
.prop-pin-catastro--lv1,
.prop-pin-catastro-stack.prop-pin-catastro--lv1 {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #7f1d1d;
  border-color: #f87171;
}
.prop-pin-catastro--lv1 .pp-stack-n,
.prop-pin-catastro--lv1 .pp-stack-tilde { color: #7f1d1d; }

.prop-pin-catastro--lv2,
.prop-pin-catastro-stack.prop-pin-catastro--lv2 {
  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  color: #5a0a0a;
  border-color: #ef4444;
}
.prop-pin-catastro--lv2 .pp-stack-n { color: #5a0a0a; }
.prop-pin-catastro--lv2 .pp-stack-tilde { color: #7f1d1d; }

.prop-pin-catastro--lv3,
.prop-pin-catastro-stack.prop-pin-catastro--lv3 {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
  color: #fef2f2;
  border-color: #7f1d1d;
}

.prop-pin-catastro--lv4,
.prop-pin-catastro-stack.prop-pin-catastro--lv4 {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  color: #fff5f5;
  border-color: #450a0a;
}

.prop-pin-catastro--lv5,
.prop-pin-catastro-stack.prop-pin-catastro--lv5 {
  background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 60%, #1c0303 100%);
  color: #fef9c3;
  border-color: #1c0303;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.prop-pin-catastro--lv5 .pp-stack-n { color: #fde68a; }

.prop-pin-catastro--na,
.prop-pin-catastro-stack.prop-pin-catastro--na {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  color: #f1f5f9;
  border-color: #334155;
}

/* CATASTRO STACK — edificio/condominio/copropiedad con varias propiedades SII
   en la misma coord. Rojo saturado + N + 🏢 + mediana de avalúos. */
.prop-pin-catastro-stack {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #991b1b 100%);
  color: #fef2f2;
  border: 1.5px solid #7f1d1d;
  box-shadow: 0 2px 5px rgba(127, 29, 29, 0.5);
  padding: 2px 7px;
  gap: 4px;
}

.prop-pin-catastro-stack .pp-stack-n {
  font-weight: 800;
  font-size: 0.78rem;
  color: #fef9c3;
  font-variant-numeric: tabular-nums;
}

.prop-pin-catastro-stack .pp-stack-ico {
  font-size: 0.78rem;
  line-height: 1;
}

.prop-pin-catastro-stack .pp-val {
  font-weight: 700;
  font-size: 0.72rem;
  color: #fef2f2;
  font-variant-numeric: tabular-nums;
}

.prop-pin-catastro-stack .pp-stack-tilde {
  color: #fecaca;
  opacity: 0.85;
  font-weight: 600;
  margin-right: 1px;
}

.prop-pin-catastro-stack:hover {
  filter: brightness(1.15);
}

/* Tabla compacta dentro del popup del stack catastro */
.pps-table-catastro .pps-row-catastro {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 0.7fr;
  gap: 6px;
  padding: 3px 6px;
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.pps-table-catastro .pps-row-head {
  font-weight: 700;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.pps-table-catastro .pps-rol {
  font-variant-numeric: tabular-nums;
  color: #fca5a5;
  font-weight: 600;
}

.pps-table-catastro .pps-dest {
  color: #e2e8f0;
}

.pps-table-catastro .pps-m2,
.pps-table-catastro .pps-av {
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
  text-align: right;
}

/* Popup-lista del stack */
.leaflet-popup.prop-popup-stack .leaflet-popup-content {
  max-height: 70vh;
  overflow: hidden;
}

.prop-pop-hero--stack {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 70%, #075985 100%);
  color: #f0f9ff;
}

.pp-hero-badge--med {
  background: rgba(254, 249, 195, 0.18);
  color: #fef9c3;
  border: 1px solid rgba(254, 249, 195, 0.35);
}

.pps-list {
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.pps-row {
  display: grid;
  grid-template-columns: 48px 1fr 60px 70px;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
  align-items: center;
}

/* Stack histórico: 5 columnas (año / precio / Terr/Const m² / rol / contrib).
   Columna m² más ancha para mostrar "Terr/Const m²" en header y "300/131" en
   filas. Rol con minmax para que se vea completo. */
.pps-row-stack {
  grid-template-columns: 40px 56px 78px minmax(82px, 1fr) 58px;
  gap: 6px;
  text-align: center;
  padding: 5px 3px;
}

/* Variante CASA (mismo rol vendida N veces) — solo 3 columnas: Año/Precio/Terr-Const.
   Rol y Contrib no se repiten (son iguales en todas las filas), van arriba. */
.pps-row-stack.pps-row-stack--casa {
  grid-template-columns: 50px 1fr 1.2fr;
}

/* Meta de propiedad única (rol + contrib + destino) — aparece arriba de la
   tabla solo en variante casa. */
.prop-pop-prop-meta {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin: 2px 0 6px 0;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-left: 3px solid #0ea5e9;
  border-radius: 6px;
  line-height: 1.45;
}

.prop-pop-prop-meta strong {
  color: #fde68a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pps-row-stack .pps-ano,
.pps-row-stack .pps-uf,
.pps-row-stack .pps-m2,
.pps-row-stack .pps-rol,
.pps-row-stack .pps-contrib {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pps-row-stack .pps-rol {
  color: #cbd5e1;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.pps-row-stack .pps-contrib {
  color: #86efac;        /* verde claro (es plata/CLP) */
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pps-row-stack.pps-head .pps-rol,
.pps-row-stack.pps-head .pps-contrib,
.pps-row-stack.pps-head .pps-ano,
.pps-row-stack.pps-head .pps-uf,
.pps-row-stack.pps-head .pps-m2 {
  color: #94a3b8;
  text-align: center;
  font-weight: 700;
}

.pps-row:last-child {
  border-bottom: none;
}

.pps-row.pps-head {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-weight: 700;
  position: sticky;
  top: 0;
  /* Background SÓLIDO (sin alpha) para que las filas no se vean por debajo
     al scrollear. Mismo gradiente que el body del popup para que sea coherente. */
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  /* z-index muy alto + isolation para tapar TODO lo que scrollea por debajo,
     incluyendo halos pulsantes de los ojos opp (que crean stacking contexts). */
  z-index: 100;
  isolation: isolate;
  border-bottom: 1px solid rgba(51, 65, 85, 0.7);
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5);
  /* Forzar capa de composición → ningún sibling pintado encima */
  transform: translateZ(0);
}

/* Las filas (excepto el header) viven en un stacking context con z-index
   bajo, así sus animaciones / box-shadow no escapan por encima del header
   sticky cuando se hace scroll. */
.pps-row.pps-row-oferta:not(.pps-head) {
  position: relative;
  z-index: 0;
}

.pps-ano {
  color: #cbd5e1;
}

.pps-uf {
  font-weight: 700;
  color: #fde68a;
}

.pps-m2 {
  color: #94a3b8;
  font-size: 0.72rem;
}

.pps-rol {
  color: #94a3b8;
  font-size: 0.72rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   OFERTA-CLUSTER — pin de edificio saturado con muchas ofertas activas.
   Tono ámbar (familia oferta), pulse sutil para diferenciarse de pines
   individuales sin gritar. Más ancho que un pin normal porque carga más texto.
   ────────────────────────────────────────────────────────────────────────── */

.prop-pin-oferta-cluster {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
  color: #1f2937;
  border: 2px solid #78350f;
  padding: 3px 9px 3px 7px;
  gap: 5px;
  font-size: 0.78rem;
  box-shadow:
    0 3px 12px rgba(120, 53, 15, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  animation: oferta-cluster-pulse 2.4s ease-in-out infinite;
}

.prop-pin-oferta-cluster .pp-cluster-ico {
  font-size: 0.88rem;
  line-height: 1;
}

.prop-pin-oferta-cluster .pp-cluster-n {
  font-weight: 800;
  font-size: 0.86rem;
  color: #78350f;
  font-variant-numeric: tabular-nums;
}

.prop-pin-oferta-cluster .pp-stack-sep {
  opacity: 0.5;
}

.prop-pin-oferta-cluster .pp-val {
  font-weight: 800;
  color: #1f2937;
}

.prop-pin-oferta-cluster .pp-cluster-fire {
  position: absolute;
  top: -10px;
  right: -8px;
  background: linear-gradient(135deg, #f43f5e, #b91c1c);
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  z-index: 3;
  font-variant-numeric: tabular-nums;
}

.prop-pin-oferta-cluster::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #b45309;
  border-right: 2px solid #78350f;
  border-bottom: 2px solid #78350f;
  transform: translateX(-50%) rotate(45deg);
}

.prop-pin-oferta-cluster:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.1);
}

@keyframes oferta-cluster-pulse {
  0%, 100% {
    box-shadow:
      0 3px 12px rgba(120, 53, 15, 0.55),
      0 0 0 0 rgba(251, 191, 36, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  }
  50% {
    box-shadow:
      0 3px 12px rgba(120, 53, 15, 0.55),
      0 0 0 7px rgba(251, 191, 36, 0),
      0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  }
}

/* ── Popup-lista de cluster de ofertas ────────────────────────────────── */

.prop-pop-hero--oferta-cluster {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
  color: #1f2937;
}

.prop-pop-hero--oferta-cluster .pp-hero-pill {
  background: rgba(255, 255, 255, 0.32);
  color: #1f2937;
  border: 1px solid rgba(120, 53, 15, 0.4);
  font-weight: 700;
}

/* Grid de la fila de oferta: ícono, precio, m², dorm, año, ojo.
   La info de oportunidad NO es una columna — la fila completa se pinta y un
   badge absoluto se posiciona en la esquina superior izquierda. */
.pps-row-oferta {
  grid-template-columns: 20px minmax(64px, 1fr) 60px 40px 50px 28px;
  gap: 6px;
  padding: 5px 4px;
  position: relative;
}

.pps-row-oferta .pps-kind {
  font-size: 0.84rem;
  text-align: center;
}

/* Todas las columnas de datos: centradas en su celda. Headers (que también
   usan pps-uf / pps-m2 / pps-dorm / pps-ano) heredan el centrado vía la regla
   .pps-sortable de abajo (justify-content: center). */
.pps-row-oferta .pps-uf {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fde68a;
  white-space: nowrap;
  text-align: center;
}

.pps-row-oferta .pps-m2 {
  font-size: 0.74rem;
  color: #94a3b8;
  white-space: nowrap;
  text-align: center;
}

.pps-row-oferta .pps-dorm {
  color: #cbd5e1;
  font-size: 0.74rem;
  text-align: center;
}

.pps-row-oferta .pps-ano,
.pps-row-oferta .pps-banos {
  font-size: 0.74rem;
  text-align: center;
  color: #cbd5e1;
}

/* Fila completa pintada cuando es oportunidad — distingue de inmediato. */
.pps-row-opp {
  padding-top: 14px;   /* deja espacio para el badge superior */
  border-radius: 8px;
  margin: 2px 0;
}

.pps-row-opp--venta {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20) 0%, rgba(217, 119, 6, 0.10) 100%);
  border-left: 3px solid #f59e0b;
}

.pps-row-opp--arriendo {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.20) 0%, rgba(8, 145, 178, 0.10) 100%);
  border-left: 3px solid #06b6d4;
}

.pps-row-opp .pps-uf {
  color: #fde047;
  font-size: 0.86rem;
}

/* Badge de oportunidad en esquina superior izquierda */
.pps-opp-badge {
  position: absolute;
  top: 2px;
  left: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  line-height: 1.25;
}

.pps-opp-badge--venta {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1f2937;
  border: 1px solid #b45309;
}

.pps-opp-badge--arriendo {
  background: linear-gradient(135deg, #67e8f9, #0891b2);
  color: #083344;
  border: 1px solid #0e7490;
}

/* Botón ojo — abre la publicación en pestaña nueva */
.pps-link-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Ojo "default" — blanco crema, icono dark. Limpio sobre el fondo oscuro. */
.pps-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  color: #0f172a;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.15) inset;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.pps-eye:hover {
  transform: scale(1.18);
  filter: brightness(1.08);
  color: #0f172a;
  box-shadow:
    0 3px 10px rgba(255, 255, 255, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.7);
}

.pps-eye svg {
  display: block;
}

/* Ojo en una fila de OPORTUNIDAD — mucho más llamativo. Variante por tipo
   (venta = ámbar dorado pulsante / arriendo = cyan eléctrico) + halo. */
.pps-row-opp--venta .pps-eye {
  background: linear-gradient(135deg, #fef08a 0%, #fbbf24 50%, #d97706 100%);
  color: #1f2937;
  border: 1.5px solid #fde047;
  box-shadow:
    0 2px 8px rgba(217, 119, 6, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  animation: opp-eye-pulse-venta 1.8s ease-in-out infinite;
}

.pps-row-opp--venta .pps-eye:hover {
  transform: scale(1.22);
  filter: brightness(1.15);
  box-shadow:
    0 3px 14px rgba(251, 191, 36, 0.85),
    0 0 0 2px rgba(254, 240, 138, 0.85);
}

.pps-row-opp--arriendo .pps-eye {
  background: linear-gradient(135deg, #67e8f9 0%, #06b6d4 50%, #0e7490 100%);
  color: #ffffff;
  border: 1.5px solid #a5f3fc;
  box-shadow:
    0 2px 8px rgba(8, 145, 178, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  animation: opp-eye-pulse-arriendo 1.8s ease-in-out infinite;
}

.pps-row-opp--arriendo .pps-eye:hover {
  transform: scale(1.22);
  filter: brightness(1.15);
  box-shadow:
    0 3px 14px rgba(34, 211, 238, 0.85),
    0 0 0 2px rgba(165, 243, 252, 0.85);
}

@keyframes opp-eye-pulse-venta {
  0%, 100% { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.6), 0 0 0 0 rgba(251, 191, 36, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.35) inset; }
  50%      { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.6), 0 0 0 5px rgba(251, 191, 36, 0),   0 0 0 1px rgba(255, 255, 255, 0.35) inset; }
}

@keyframes opp-eye-pulse-arriendo {
  0%, 100% { box-shadow: 0 2px 8px rgba(8, 145, 178, 0.6), 0 0 0 0 rgba(34, 211, 238, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
  50%      { box-shadow: 0 2px 8px rgba(8, 145, 178, 0.6), 0 0 0 5px rgba(34, 211, 238, 0),   0 0 0 1px rgba(255, 255, 255, 0.3) inset; }
}

/* Wrapper de la lista (contiene head sticky + body scrollable) */
.pps-list-wrap {
  margin-top: 10px;
  border-top: 1px solid rgba(51, 65, 85, 0.6);
}

.pps-list-wrap .pps-list {
  margin-top: 0;
  border-top: none;
}

/* Headers ordenables con flechas dobles SIEMPRE visibles para que el usuario
   vea que la columna es clickeable. Activa: la flecha correspondiente se
   ilumina amarillo brillante. */
.pps-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
  /* display: flex (no inline-flex) para ocupar la celda completa del grid
     y poder centrar texto + flechas con justify-content. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pps-sortable:hover {
  color: #fde68a !important;
}

.pps-sort-active {
  color: #fde047 !important;
}

.pps-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-size: 0.5rem;
  gap: 0px;
  margin-left: 1px;
}

.pps-sort-arrows .pps-arr-up,
.pps-sort-arrows .pps-arr-dn {
  display: block;
  color: #475569;
  height: 7px;
  transition: color 0.12s ease;
}

.pps-sortable:hover .pps-arr-up,
.pps-sortable:hover .pps-arr-dn {
  color: #94a3b8;
}

.pps-arr-on {
  color: #fde047 !important;
  text-shadow: 0 0 4px rgba(253, 224, 71, 0.55);
}

/* Hint del orden actual — aparece arriba de la tabla y explica el orden
   activo en lenguaje claro. Se actualiza al cambiar de columna. */
.pps-sort-hint {
  margin: 4px 0 8px 0;
  padding: 6px 10px;
  font-size: 0.72rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.55);
  border-left: 3px solid #fbbf24;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.pps-sort-hint strong {
  color: #fde68a;
  font-weight: 700;
}
.pps-sort-hint .pps-hint-ico {
  font-size: 0.85rem;
}
.pps-sort-hint .pps-hint-arr {
  color: #fde047;
  font-weight: 800;
  margin-left: 2px;
}

/* Ojo decorativo en el header de columnas — azul celeste brillante, mini,
   sin background. Solo para consistency visual con las filas (es decorativo). */
.pps-head-eye {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.5));
  opacity: 1;
}
.pps-head-eye svg {
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   SCROLLBAR CUSTOM — Webkit (Chrome, Safari, Edge) + Firefox
   Track oscuro slim + thumb gradiente ámbar con glow sutil. Va con el
   tema del cluster popup (familia ámbar/oro).
   ────────────────────────────────────────────────────────────────────── */

.pps-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.pps-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  margin: 4px 2px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.35);
}

.pps-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #b45309 100%);
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.6);
  box-shadow:
    0 0 6px rgba(251, 191, 36, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: filter 0.12s ease;
}

.pps-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fde047 0%, #fbbf24 50%, #d97706 100%);
  box-shadow:
    0 0 10px rgba(251, 191, 36, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.pps-list::-webkit-scrollbar-thumb:active {
  filter: brightness(1.15);
}

/* Quitar las flechitas/botones arriba y abajo del scrollbar (webkit) */
.pps-list::-webkit-scrollbar-button {
  display: none;
}

.pps-list::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
.pps-list {
  scrollbar-width: thin;
  scrollbar-color: #f59e0b rgba(15, 23, 42, 0.6);
}

.pps-opp {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.pps-opp--venta {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1f2937;
  border: 1px solid #b45309;
}

.pps-opp--arriendo {
  background: linear-gradient(135deg, #67e8f9, #0891b2);
  color: #083344;
  border: 1px solid #0e7490;
}

.pps-row-opp {
  background: rgba(251, 191, 36, 0.08);
}

.pps-row-opp .pps-uf {
  color: #fde047;
}

.pps-link-cell {
  text-align: right;
}

.pps-link {
  color: #60a5fa;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  padding: 0 4px;
}

.pps-link:hover {
  color: #93c5fd;
}

/* =========================================================================
   POPUPS DE PROPIEDAD — estilo "tour card" (a2ui-card)
   ========================================================================= */

/* Wrapper de Leaflet: dejamos la card flush a los bordes (sin fondo, sin
   padding del wrapper) para que el hero gradiente llegue al borde redondeado. */
.leaflet-popup.prop-popup .leaflet-popup-content-wrapper {
  background: transparent;
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 0;
  overflow: hidden;
}
.leaflet-popup.prop-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  line-height: 1.35;
}
.leaflet-popup.prop-popup .leaflet-popup-tip {
  background: #0f172a;
  border: 1px solid rgba(51, 65, 85, 0.85);
}
.leaflet-popup.prop-popup .leaflet-popup-close-button {
  color: #cbd5e1 !important;
  font-size: 22px !important;
  padding: 6px 9px 0 0 !important;
  z-index: 5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.leaflet-popup.prop-popup .leaflet-popup-close-button:hover {
  color: #ffffff !important;
}

/* Card */
.prop-pop {
  font-family: 'Outfit', sans-serif;
  min-width: 240px;
  max-width: 340px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.97), rgba(15, 23, 42, 0.97));
  border: 1px solid rgba(51, 65, 85, 0.9);
  border-radius: 16px;
  overflow: hidden;
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* ── Hero / cinta superior ─────────────────────────────────────────────── */
.prop-pop-hero {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Reservamos espacio a la derecha para que la "×" de Leaflet (~24px) no
     pise el badge cuando éste está presente. */
  padding: 6px 30px 6px 10px;
  overflow: hidden;
}

.prop-pop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 12px, transparent 12px 24px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.prop-pop-hero--venta {
  background:
    radial-gradient(120% 140% at 25% 20%, rgba(251, 191, 36, 0.45), transparent 60%),
    linear-gradient(135deg, #1c1410, #2a1d12);
}
.prop-pop-hero--arriendo {
  background:
    radial-gradient(120% 140% at 25% 20%, rgba(0, 210, 255, 0.4), transparent 60%),
    linear-gradient(135deg, #0b1220, #152238);
}
.prop-pop-hero--venta-historica,
.prop-pop-venta .prop-pop-hero {
  background:
    radial-gradient(120% 140% at 25% 20%, rgba(34, 211, 238, 0.35), transparent 60%),
    linear-gradient(135deg, #0a1622, #0f2235);
}
.prop-pop-hero--catastro {
  background:
    radial-gradient(120% 140% at 25% 20%, rgba(148, 163, 184, 0.28), transparent 60%),
    linear-gradient(135deg, #11161f, #1a2230);
}

.pp-hero-pill {
  position: relative;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 3px 10px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.prop-pop--venta .pp-hero-pill { color: #fde68a; border-color: rgba(251, 191, 36, 0.5); }
.prop-pop--arriendo .pp-hero-pill { color: #a5f3fc; border-color: rgba(34, 211, 238, 0.5); }
.prop-pop-venta .pp-hero-pill { color: #a5f3fc; border-color: rgba(34, 211, 238, 0.45); }
.prop-pop-catastro .pp-hero-pill { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.45); }

.pp-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  flex-shrink: 0;
}
.pp-hero-badge--year {
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}
.pp-hero-badge--opp {
  color: #06080b;
  border: none;
  animation: ppHeroBadgePulse 2.2s ease-in-out infinite;
}
.pp-hero-badge--opp-venta {
  background: linear-gradient(135deg, #6ee7b7, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}
.pp-hero-badge--opp-arriendo {
  background: linear-gradient(135deg, #67e8f9, #06b6d4);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}
@keyframes ppHeroBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.prop-pop-body {
  padding: 11px 13px 12px;
  display: flex;
  flex-direction: column;
}

/* Banner de oportunidad bajo el hero */
.prop-pop-opp {
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.prop-pop-opp strong { color: #ffffff; font-weight: 800; }
.prop-pop-opp-base {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 2px;
}
.prop-pop-opp--venta {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}
.prop-pop-opp--arriendo {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.06) 100%);
  border: 1px solid rgba(6, 182, 212, 0.5);
  color: #67e8f9;
}

/* Tag pequeño con dot (estilo tour card) */
.prop-pop-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fe5ff;
  margin-bottom: 5px;
}
.prop-pop-oferta.prop-pop--venta    .prop-pop-tag { color: #fcd34d; }
.prop-pop-oferta.prop-pop--arriendo .prop-pop-tag { color: #9fe5ff; }
.prop-pop-venta                      .prop-pop-tag { color: #a5f3fc; }
.prop-pop-catastro                   .prop-pop-tag { color: #cbd5e1; }

.pp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

/* Título — gradiente blanco → acento */
.prop-pop-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #ffffff, #9fe5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.005em;
}
.prop-pop-oferta.prop-pop--venta .prop-pop-title {
  background: linear-gradient(90deg, #ffffff, #fcd34d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stats con chip por icono */
.prop-pop-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.pp-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pp-stat-ico {
  font-size: 0.78rem;
  line-height: 1;
  filter: saturate(1.1);
}

/* ── Data tape de fecha ─────────────────────────────────────────────────
   Cinta horizontal: dot pulsante (color = freshness) + edad en bold caps,
   barra divisoria con notch, fecha exacta en monospace muted. Sin emoji,
   sin pill — se ve como "instrumentación", no como un calendar widget AI. */
.prop-pop-date {
  --freshness: #22d3ee;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 9px;
  padding: 6px 2px 7px;
  border-top:    1px dashed rgba(51, 65, 85, 0.6);
  border-bottom: 1px dashed rgba(51, 65, 85, 0.6);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.ppd-age {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f1f5f9;
}

.ppd-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--freshness);
  box-shadow:
    0 0 0 0 var(--freshness),
    0 0 8px var(--freshness);
  animation: ppdPulse 1.8s ease-out infinite;
  flex-shrink: 0;
}

@keyframes ppdPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--freshness) 65%, transparent), 0 0 6px var(--freshness); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--freshness) 0%, transparent),  0 0 8px var(--freshness); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--freshness) 0%, transparent),    0 0 6px var(--freshness); }
}

/* Notch divisor — pequeña barra vertical con muescas tipo "regla" */
.ppd-bar {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35) 25%, rgba(148, 163, 184, 0.35) 75%, transparent);
  position: relative;
}
.ppd-bar::before,
.ppd-bar::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 1px;
  height: 5px;
  background: rgba(148, 163, 184, 0.55);
}
.ppd-bar::before { left: 30%;  }
.ppd-bar::after  { right: 30%; }

.ppd-date-text {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #94a3b8;
  white-space: nowrap;
}

/* Meta (texto chico secundario) */
.prop-pop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.prop-pop-meta span { white-space: nowrap; }

/* Línea de pie (ej. dirección) */
.prop-pop-foot {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-bottom: 8px;
  line-height: 1.35;
  word-break: break-word;
}

/* Footer con separador punteado: precio + CTA (igual que tour card) */
.prop-pop-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 9px;
  margin-top: auto;
  border-top: 1px dashed rgba(51, 65, 85, 0.85);
}

.prop-pop-price-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.prop-pop-price-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.prop-pop-price {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #ffffff, #9fe5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.prop-pop-oferta.prop-pop--venta .prop-pop-price {
  background: linear-gradient(90deg, #ffffff, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CTA estilo tour-card */
.prop-pop-cta {
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid rgba(0, 210, 255, 0.6);
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(58, 123, 213, 0.18));
  color: #ffffff !important;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s;
  flex-shrink: 0;
}
.prop-pop-cta:hover {
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(58, 123, 213, 0.35));
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.35);
  transform: translateY(-1px);
}
.prop-pop-oferta.prop-pop--venta .prop-pop-cta {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.22));
}
.prop-pop-oferta.prop-pop--venta .prop-pop-cta:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(245, 158, 11, 0.4));
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);
}

/* =========================================================================
   COMPARACIÓN DE ZONAS — métricas, box plots, síntesis
   ========================================================================= */

.zona-compare {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0, 210, 255, 0.04) 0%, rgba(58, 123, 213, 0.03) 100%);
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 12px;
  padding: 12px 12px 14px;
}

.zona-compare.hidden { display: none; }

.zc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: nowrap;
  min-width: 0;
}

.zc-header-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variante catastro: el SVG reemplaza al emoji 📊 como prefijo del título.
   inline-flex permite que el SVG quede pegado al texto y el truncamiento con
   ellipsis siga funcionando sobre el span interno. */
.zc-header-title-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zc-header-title-cat .zc-title-icon {
  flex: 0 0 auto;
  color: #ef4444;
}
.zc-header-title-cat .zc-header-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zc-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;            /* empuja el botón al borde derecho */
}

.zc-header-n {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 999px;
}

.zc-split-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.zc-split-btn-icon {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  color: #a78bfa;
}

.zc-split-btn-label {
  font-weight: 700;
}

.zc-split-btn:hover {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.65);
  color: #ddd6fe;
  transform: translateY(-1px);
}

.zc-split-btn.on {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}

.zc-split-btn.on .zc-split-btn-icon { color: #fbbf24; }

.zc-split-btn.on:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.75);
}

.zc-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* En la card de comparación de calles cada sección va en una "cajita"
   delimitada para separar visualmente Venta / Arriendo / Histórico /
   Contribuciones / Ventas recientes / Mezcla. */
.streets-compare-bubble .zc-section {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
  padding: 8px 10px 9px;
  gap: 6px;
}

.streets-compare-bubble .zc-section .zc-section-head {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Quita la línea separadora interna de cada fila stacked porque ya hay
   cajita externa: una línea más fina sigue dividiendo filas dentro. */
.streets-compare-bubble .zc-row.zc-row-stacked {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.streets-compare-bubble .zc-row.zc-row-stacked:last-child {
  border-bottom: none;
}

.zc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.zc-section-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
}

.zc-section-unit {
  font-size: 0.62rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.zc-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.zc-row {
  display: grid;
  grid-template-columns: 30px 50px 1fr 26px;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  padding: 3px 0;
}

.zc-zona-tag {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--zc-color);
  background: color-mix(in srgb, var(--zc-color) 14%, transparent);
  border: 1px solid var(--zc-color);
  border-radius: 5px;
  padding: 2px 5px;
  text-align: center;
  letter-spacing: 0.02em;
}

.zc-val {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.zc-box-wrap { width: 100%; min-width: 0; }
.zc-box      { display: block; width: 100%; height: 18px; }

.zc-n {
  font-size: 0.62rem;
  color: var(--muted-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zc-delta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  padding: 4px 8px;
  border-radius: 5px;
}

.zc-delta strong { color: var(--text); }

.zc-up   { color: #fbbf24; }
.zc-down { color: #22d3ee; }

.zc-zona-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 4px currentColor;
  margin-right: 1px;
}

/* Bar comparativa (ventas recientes) */
.zc-row-bar { grid-template-columns: 30px 36px 1fr; }

.zc-bar-wrap {
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.zc-bar {
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.9;
  /* Sin transition: con un glow box-shadow grande, animar width fuerza un
     repaint costoso del glow en cada frame, y durante el scroll se manifiesta
     como elementos "atrasados". La barra aparece directamente en su valor. */
}

/* Mezcla venta/arriendo */
.zc-row-mix { grid-template-columns: 30px 1fr 26px; }

.zc-mix-bar {
  display: flex;
  height: 16px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.6rem;
  font-weight: 700;
}

.zc-mix-venta {
  background: #f59e0b;
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

.zc-mix-arriendo {
  background: #0ea5e9;
  color: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Mini-leyenda debajo de la barra mix — siempre visible, garantiza que los
   porcentajes pequeños (ej. 3%) se puedan leer aunque no quepan en el segmento. */
.zc-mix-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.zc-mix-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.zc-mix-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: inline-block;
}

.zc-mix-leg-venta { color: #fbbf24; }
.zc-mix-leg-venta .zc-mix-leg-dot {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
}

.zc-mix-leg-arriendo { color: #22d3ee; }
.zc-mix-leg-arriendo .zc-mix-leg-dot {
  background: linear-gradient(135deg, #22d3ee, #0ea5e9);
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.5);
}

/* ── CATASTRO: mezcla por destino (H/C/O/W/Z/L) — 6 colores distinguibles ──
   Colores planos en vez de linear-gradient: 6 segmentos adyacentes con
   gradients individuales se repintan en cada frame del scroll y producen el
   desfase visible en otros elementos del panel. */
.zc-dest-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.zc-dest-H { background: #ef4444; color: #fef2f2; }    /* Habitacional — rojo */
.zc-dest-C { background: #f59e0b; }                     /* Comercio — ámbar */
.zc-dest-O { background: #8b5cf6; color: #fff; }        /* Oficina — violeta */
.zc-dest-W { background: #78716c; color: #fff; }        /* Sitio eriazo — piedra */
.zc-dest-Z { background: #06b6d4; color: #fff; }        /* Estacionamiento — cyan */
.zc-dest-L { background: #10b981; color: #fff; }        /* Bodegas — verde */

.zc-mix-leg-dot.zc-dest-H { background: #ef4444; }
.zc-mix-leg-dot.zc-dest-C { background: #f59e0b; }
.zc-mix-leg-dot.zc-dest-O { background: #8b5cf6; }
.zc-mix-leg-dot.zc-dest-W { background: #78716c; }
.zc-mix-leg-dot.zc-dest-Z { background: #06b6d4; }
.zc-mix-leg-dot.zc-dest-L { background: #10b981; }

/* ── CATASTRO: bloque de totales por zona (agregados absolutos) ── */
.zc-totales-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zc-tot-row {
  display: grid;
  grid-template-columns: minmax(80px, 130px) repeat(3, 1fr);
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.18);
}
.zc-tot-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.64rem;
}
.zc-tot-lbl {
  color: var(--muted-2);
  letter-spacing: 0.02em;
}
.zc-tot-val {
  font-weight: 800;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Pill en el header del panel para indicar visualmente que estás en modo catastro */
.zc-header-pill-cat {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fef2f2;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.zc-header-pill-cat svg {
  flex: 0 0 auto;
}

/* ── Modo "etiquetas largas" — usado por la card de comparación de calles.
      Layout apilado: nombre + meta arriba; mediana + boxplot debajo en una
      fila propia full-width. Así todos los boxplots empiezan en el mismo X
      y se pueden comparar de un vistazo, sin que el largo del nombre los
      desplace horizontalmente. ─────────────────────────────────────────── */
.zc-row.zc-row-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* override del align-items: center heredado de .zc-row */
  gap: 4px;
  padding: 5px 0 6px 0;          /* sin padding lateral: el nombre queda pegado al borde izquierdo */
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
}

.zc-row.zc-row-stacked:last-child { border-bottom: none; }

/* Cabecera: nombre + n= juntos, pegados al borde izquierdo */
.zc-row-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
}

.zc-row-meta {
  font-size: 0.62rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cuerpo: la mediana es un ancho fijo + boxplot ocupando el resto.
   Como todas las filas tienen la misma estructura, los boxplots empiezan
   y terminan en la misma posición X → directamente comparables. */
.zc-row-body {
  min-width: 0;
}

.zc-row-body-boxplot {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.zc-row-body-boxplot .zc-val {
  font-size: 0.85rem;
  text-align: right;
}

.zc-row-body-boxplot .zc-box-wrap {
  min-width: 0;
}

.zc-row-body-bar {
  display: block;
}

.zc-row-body-bar .zc-bar-wrap {
  height: 12px;
}

.zc-row-body-mix {
  display: block;
}

/* Tag con nombre completo — pill horizontal con dot del color */
.zc-zona-tag-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--zc-color) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--zc-color) 55%, transparent);
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  /* anula los anchos forzados del tag corto */
  width: auto;
}

.zc-zona-tag-full .zc-zona-tag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zc-color);
  box-shadow: 0 0 6px var(--zc-color);
  flex-shrink: 0;
}

/* Mini-leyenda explicativa de los gráficos (collapsable) */
.zc-legend {
  background: rgba(167, 139, 250, 0.06);
  border: 1px dashed rgba(167, 139, 250, 0.32);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 0.66rem;
  color: var(--muted);
}

.zc-legend > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}

.zc-legend > summary::-webkit-details-marker { display: none; }

.zc-legend-summary-title {
  color: #c4b5fd;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.zc-legend-summary-hint {
  color: var(--muted-2);
  font-size: 0.6rem;
  font-style: italic;
}

.zc-legend[open] .zc-legend-summary-hint { display: none; }

.zc-legend-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(167, 139, 250, 0.18);
}

.zc-legend-svg {
  width: 100%;
  max-width: 260px;
  height: 22px;
  display: block;
}

.zc-legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.66rem;
  line-height: 1.45;
  color: var(--muted);
}

.zc-legend-list strong { color: var(--text); font-weight: 700; }
.zc-legend-list em { color: #c4b5fd; font-style: normal; font-weight: 600; }

/* Síntesis */
.zc-synthesis {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 8px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zc-syn-header {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zc-syn-item {
  font-size: 0.74rem;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.zc-syn-item strong { color: var(--text); font-weight: 700; }

.zc-syn-detail {
  font-size: 0.66rem;
  color: var(--muted);
  margin-left: 2px;
}

.zc-foot {
  font-size: 0.62rem;
  color: var(--muted-2);
  font-style: italic;
  line-height: 1.4;
  padding: 4px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 2px;
}

/* Contadores en cards de zona */
.zona-counts {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.zona-counts .zc-oferta { color: #fbbf24; font-weight: 700; }
.zona-counts .zc-venta  { color: #22d3ee; font-weight: 700; opacity: 0.85; }
.zona-counts .zc-cat    { color: #f87171; font-weight: 700; }
.zona-counts .zc-cat-av { color: #fca5a5; font-weight: 700; opacity: 0.85; }

.zona-map-label {
  background: rgba(0, 0, 0, 0.72);
  color: var(--zcolor, #00d2ff);
  border: 1px solid var(--zcolor, #00d2ff);
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  cursor: grab;
  user-select: none;
}

.zona-map-label:active {
  cursor: grabbing;
}

/* Second accent card */
.calc-result-card--accent {
  background: rgba(58, 123, 213, 0.08);
  border-color: rgba(58, 123, 213, 0.3);
}

.calc-result-card--accent .calc-rc-value {
  font-size: 1.1rem;
  color: #a5c8ff;
}

/* Durante la animación de zoom, Leaflet escala el SVG con transform: scale() y los
   strokes se ven gruesos hasta que termina la animación y se redibujan al nuevo
   nivel. En vez de pelear contra eso, ocultamos las líneas administrativas mientras
   dura el vuelo: fade-out rápido al empezar el zoom y fade-in suave al aterrizar.
   La clase .zooming se agrega/quita desde app.js en los eventos zoomstart/zoomend. */
.leaflet-pane.leaflet-boundaries-pane {
  transition: opacity 0.18s ease-out;
}
.leaflet-pane.leaflet-boundaries-pane.zooming {
  opacity: 0;
  transition: opacity 0.08s ease-in;
}