/* =========================================================================
   Inteligencia Dubai — estilos
   Estética: oscuro elegante con acento dorado/cian (real estate Dubái)
   ========================================================================= */
:root {
  /* ===== Paleta Enclave · navy profundo + bronce + marfil ===== */
  --bg: #0A192E;                         /* navy profundo */
  --bg-2: #0E223B;
  --panel: rgba(10, 25, 46, 0.94);       /* paneles oscuros translúcidos */
  --panel-solid: #0A192E;
  --ink: #F5F2EC;                        /* marfil cálido (texto principal) */
  --muted: #98A7BC;                      /* slate suave */
  --line: rgba(183, 154, 91, 0.20);      /* hairline dorada */
  --line-soft: rgba(245, 242, 236, 0.10);
  --gold: #B79A5B;                       /* dorado/bronce (acento) */
  --gold-soft: #D8BE7E;                  /* dorado claro */
  --gold-deep: #8B7545;                  /* bronce profundo */
  --gold-tint: rgba(183, 154, 91, 0.14);
  --cyan: #C6A968;                        /* (enlaces) reconvertido a dorado */
  --danger: #C0392B;
  --ok: #2EC27E;
  --paper: #FBFAF7;                       /* marfil claro para tarjetas */
  --paper-2: #EDE9E1;
  --navy-text: #0A192E;
  --radius: 6px;                          /* esquinas sobrias/arquitectónicas */
  --radius-pill: 4px;
  --shadow: 0 24px 60px -18px rgba(4, 10, 20, 0.60);
  --topbar-h: 64px;
  --font-ui: 'Inter', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-disp: 'Jost', 'Inter', system-ui, sans-serif;
  font-family: var(--font-ui);
}

/* Tipografía de titulares / marca (geométrica fina, mayúsculas espaciadas) */
.brand-text, .side-head h3, #detail-name, .modal-card h2,
h1, h2, h3, .disp {
  font-family: var(--font-disp);
  font-weight: 300;
  letter-spacing: .04em;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: var(--cyan); text-decoration: none; }

/* ----------------------------- BARRA SUPERIOR --------------------------- */
#topbar {
  position: relative; flex: 0 0 auto; min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 0 16px; z-index: 40;
  background: linear-gradient(180deg, rgba(11,15,20,0.96), rgba(11,15,20,0.82));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 18px; white-space: nowrap; }
.brand-mark { color: var(--gold); font-size: 16px; }
.brand-text { letter-spacing: .3px; }
.brand-text strong { color: var(--gold); font-weight: 700; }

.search-wrap { display: flex; align-items: center; flex: 1 1 360px; max-width: 460px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 4px 4px 14px; }
#search-input { flex: 1; background: transparent; border: none; color: var(--ink);
  outline: none; font-size: 14px; }
#search-input::placeholder { color: var(--muted); }

.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }

.view-toggle { display: inline-flex; background: rgba(255,255,255,0.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg { background: transparent; border: none; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.seg.active { background: var(--gold); color: #1a1205; font-weight: 600; }

.primary-btn { background: var(--gold); color: #1a1205; border: none;
  padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.primary-btn:hover { background: var(--gold-soft); }
.primary-btn.block { width: 100%; padding: 11px; }
.ghost-btn { background: rgba(255,255,255,0.05); color: var(--ink);
  border: 1px solid var(--line); padding: 7px 12px; border-radius: 10px; font-size: 13px; }
.ghost-btn:hover { background: rgba(255,255,255,0.10); }
.ghost-btn.small, .danger-btn.small { padding: 5px 9px; font-size: 12px; }
.danger-btn { background: rgba(255,93,108,0.12); color: var(--danger);
  border: 1px solid rgba(255,93,108,0.4); padding: 7px 12px; border-radius: 10px; font-size: 13px; }
.danger-btn:hover { background: rgba(255,93,108,0.22); }
.icon-btn { background: var(--gold); color:#1a1205; border:none; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; }
.count { background: rgba(0,0,0,0.25); border-radius: 999px; padding: 0 7px; margin-left: 2px; font-size: 12px; }
.badge { font-size: 12px; color: var(--muted); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; }

/* ----------------------------- ESCENARIO / MAPA ------------------------- */
#stage { position: relative; flex: 1 1 auto; min-height: 0; }
.map-layer { position: absolute; inset: 0; }
.hidden { display: none !important; }

#dld-layer { background: #0b0f14; display: flex; flex-direction: column; }
.dld-bar { height: 38px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--panel-solid); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }
#dld-frame { flex: 1; width: 100%; border: none; }
.dld-fallback { position: absolute; inset: 38px 0 0 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; }

.attribution { position: absolute; left: 10px; bottom: 8px; font-size: 11px;
  color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.35); padding: 3px 8px; border-radius: 6px; }

.overlay-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #16202c, #0b0f14); z-index: 5; }
.overlay-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px; max-width: 460px; box-shadow: var(--shadow); }
.overlay-card h2 { margin: 0 0 10px; color: var(--gold); }
.overlay-card code { background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 5px; }

/* ----------------------------- PANELES LATERALES ------------------------ */
.side-panel { position: absolute; top: 14px; bottom: 14px; width: 380px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(14px); z-index: 30;
  display: flex; flex-direction: column; overflow: hidden; }
.side-panel.left { left: 14px; }
.side-panel.right { right: 14px; }
.side-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line); }
.side-head h3 { margin: 0; font-size: 17px; }
.close-x { background: transparent; border: none; color: var(--muted); font-size: 16px; line-height: 1; }
.close-x:hover { color: var(--ink); }
.side-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; }

.detail-meta { padding: 12px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.detail-address { color: var(--muted); font-size: 13px; }
.detail-updated { color: var(--gold-soft); font-size: 12px; }

/* listado de proyectos */
.projects-list { overflow-y: auto; padding: 8px; flex: 1; }
.proj-item { padding: 12px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; }
.proj-item:hover { background: rgba(255,255,255,0.06); border-color: var(--line); }
.proj-item h4 { margin: 0 0 3px; font-size: 14px; }
.proj-item .addr { font-size: 12px; color: var(--muted); }
.empty-list { color: var(--muted); padding: 24px; text-align: center; font-size: 14px; }

/* tabs detalle */
.tabs { display: flex; gap: 4px; padding: 12px 14px 0; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: none; color: var(--muted); padding: 8px 10px;
  font-size: 13px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.tab-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.operativa-text { white-space: pre-wrap; line-height: 1.55; font-size: 14px; color: #dde6ee; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); }
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.doc-row:hover { background: rgba(255,255,255,0.08); }
.doc-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #1a1205; background: var(--gold); }
.doc-ic.html { background: var(--cyan); }
.doc-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { color: var(--muted); text-align: center; padding: 30px; }

/* ----------------------------- MODALES ---------------------------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,10,0.66); backdrop-filter: blur(4px); padding: 24px; }
.modal.dark { background: rgba(0,0,0,0.9); }
.modal-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; display: flex; flex-direction: column; position: relative; }
.modal-card.small { max-width: 380px; padding: 26px; }
.modal-card.medium { max-width: 560px; max-height: 90vh; }
.modal-card.large { max-width: 1000px; height: 88vh; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 18px; flex: 1; }
.modal-head-actions { display: flex; gap: 8px; align-items: center; }
.modal-close { position: static; }
.modal-body { flex: 1; overflow: auto; padding: 0; }
.modal-body.form-body { padding: 18px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.doc-frame { width: 100%; height: 100%; border: none; background: #fff; }
.doc-body { position: relative; background: #0b0f14; }
.doc-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0f14; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }

.modal-card.small h2 { margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); font-size: 13px; margin: 8px 0 0; }

/* ----------------------------- PANELES FLOTANTES ------------------------ */
.floating-panel { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 360px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(14px);
  z-index: 35; padding: 14px 16px; }
.fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fp-head h3 { margin: 0; font-size: 15px; }
.fp-label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 5px; }
.fp-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; color: var(--ink); font-size: 13px; outline: none; }
.fp-input:focus { border-color: var(--gold); }
.fp-range { width: 100%; accent-color: var(--gold); }
textarea.fp-input { resize: vertical; }
.dist-dest-row { display: flex; gap: 8px; }
.dist-dest-row .fp-input { flex: 1; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.preset-chip { background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.35);
  color: var(--cyan); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.preset-chip:hover { background: rgba(0,229,255,0.2); }
.dist-result { margin-top: 12px; padding: 12px; background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 10px; font-size: 14px; }
.dist-result b { color: var(--gold-soft); }

/* formulario */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.chip button { background: transparent; border: none; color: var(--danger); font-size: 13px; }
.chip.existing { border-style: dashed; }
.file-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; }

/* ----------------------------- CARGA / TOAST ---------------------------- */
.loading { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: rgba(3,6,10,0.6); backdrop-filter: blur(3px); }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,0.18);
  border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--panel-solid); border: 1px solid var(--line); color: var(--ink);
  padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; max-width: 90vw; }
.toast.ok { border-color: rgba(69,212,131,0.5); }
.toast.err { border-color: rgba(255,93,108,0.5); }

/* ----------------------------- RESPONSIVE ------------------------------- */
/* ----------------------------- SELECTOR DE IDIOMA ----------------------- */
.lang-toggle { display: inline-flex; background: rgba(255,255,255,0.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-toggle .seg { padding: 6px 11px; font-weight: 600; }

/* ------------------ CONTRASTE: panel de distancias / selects ------------ */
.floating-panel { background: rgba(15, 21, 29, 0.98); border-color: rgba(255,255,255,0.16); }
.fp-label { color: #cdd9e5; }                 /* etiquetas más legibles */
.fp-input { color: #f3f7fb; }
.fp-input::placeholder { color: #8fa1b3; }
select.fp-input { color: #f3f7fb; }
select.fp-input option { background: #141b24; color: #f3f7fb; }  /* opciones legibles en oscuro */
.dist-result { color: #f1f5f9; }
.dist-result b { color: var(--gold-soft); }

/* ------------------ PROYECTOS: nombre, descripción, visibilidad -------- */
.proj-item { border-left: 3px solid rgba(212,175,55,0.5); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-item:hover { border-left-color: var(--gold); }
.proj-main { flex: 1; min-width: 0; cursor: pointer; }
.proj-item h4 { font-size: 15px; color: #ffffff; letter-spacing: .2px; }
.proj-item .addr { font-size: 12px; color: #93a4b5; }
.proj-item .desc { font-size: 12.5px; color: #c7d4e0; margin-top: 5px; line-height: 1.45; }
.detail-desc { color: #dbe6f0; font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.proj-item.is-hidden { opacity: 0.55; border-left-color: rgba(255,255,255,0.18); }
.proj-toggle { flex: 0 0 auto; align-self: center; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 600; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.proj-toggle.on { background: rgba(69,212,131,0.16); color: #6ee7a8; border-color: rgba(69,212,131,0.5); }
.proj-toggle.off { background: rgba(255,255,255,0.06); color: #9fb0c0; }

/* ------------------ MERCADO DE LA ZONA (PropertyFinder) ---------------- */
.market-box { margin: 12px 18px 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.22); }
.market-title { font-size: 13px; font-weight: 700; color: #ffffff; margin-bottom: 8px; letter-spacing: .2px; }
.market-beds { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; color: #f3f7fb; font-size: 13px; outline: none; }
.market-beds:focus { border-color: var(--cyan); }
.market-beds option { background: #141b24; color: #f3f7fb; }
.market-btns { display: flex; gap: 8px; margin-top: 8px; }
.market-btn { flex: 1; border: none; border-radius: 9px; padding: 10px 8px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; }
.market-btn.rent { background: rgba(0,229,255,0.16); color: var(--cyan); border: 1px solid rgba(0,229,255,0.5); }
.market-btn.rent:hover { background: rgba(0,229,255,0.26); }
.market-btn.sale { background: var(--gold); color: #1a1205; }
.market-btn.sale:hover { background: var(--gold-soft); }
.market-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* ----------------------------- RESPONSIVE (MÓVIL) ----------------------- */
@media (max-width: 820px) {
  :root { --topbar-h: auto; }
  #topbar { padding: 8px 10px; gap: 8px 10px; }
  .brand { font-size: 16px; }
  .brand-mark { font-size: 14px; }

  /* fila 1: marca + buscador ; fila 2: acciones */
  .search-wrap { flex: 1 1 150px; max-width: none; }
  .top-actions { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .top-actions .ghost-btn, #btn-projects { display: inline-flex; align-items: center; }
  .ghost-btn, .danger-btn, .primary-btn { font-size: 12px; padding: 7px 10px; }
  .seg { font-size: 12px; padding: 6px 10px; }
  .lang-toggle .seg { padding: 6px 9px; }
  .badge { display: none; }   /* "actualizado hace X" se omite en móvil para ahorrar espacio */

  /* Paneles a pantalla completa */
  .side-panel { top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: none;
    border-radius: 0; border: none; }
  .floating-panel { top: 0; left: 0; right: 0; transform: none; width: 100%;
    max-width: none; border-radius: 0; }

  /* Modales a pantalla completa */
  .modal { padding: 0; }
  .modal-card.small, .modal-card.medium, .modal-card.large {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .modal-card.small { padding: 22px; }

  .gallery { grid-template-columns: 1fr 1fr; }
  .attribution { font-size: 10px; left: 6px; bottom: 6px; }
  #lightbox img { max-width: 96vw; max-height: 80vh; }
}

/* Pantallas muy estrechas: el buscador ocupa toda su fila */
@media (max-width: 480px) {
  .search-wrap { flex: 1 1 100%; order: 3; }
  .brand-text { font-size: 15px; }
}


/* =======================================================================
   MÓVIL ESTILO iOS  (barra inferior, bottom sheets, safe-areas, SF)
   ======================================================================= */
.mobile-only{ display:none; }
:root{ --tabbar-h:64px; }
body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

@media (max-width: 820px){
  body{ -webkit-tap-highlight-color: transparent; }
  button{ -webkit-tap-highlight-color: transparent; }

  /* --- Mapa a pantalla completa, barras flotantes encima --- */
  #stage{ position:fixed; inset:0; }
  .attribution{ left:8px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); font-size:10px; }

  /* --- Barra superior flotante (Apple Maps) --- */
  #topbar{ position:fixed; top:0; left:0; right:0; z-index:40; min-height:0;
    flex-wrap:nowrap; gap:10px; align-items:center;
    padding: calc(env(safe-area-inset-top) + 8px) 12px 10px;
    background: linear-gradient(180deg, rgba(8,11,15,.92), rgba(8,11,15,.55) 72%, rgba(8,11,15,0));
    border-bottom:none; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: opacity .28s ease, transform .28s ease; }
  body.sheet-open #topbar{ opacity:0; transform: translateY(-8px); pointer-events:none; }
  .brand{ flex:0 0 auto; gap:0; }
  .brand .brand-mark svg{ width:30px; height:30px; }
  .brand-text{ display:none; }
  .search-wrap{ flex:1 1 auto; max-width:none; height:42px; border-radius:14px;
    background: rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16); padding:0 5px 0 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  #search-input{ font-size:16px; }
  #search-btn{ height:34px; border-radius:11px; }
  .top-actions{ flex:0 0 auto; margin-left:0; gap:0; width:auto; }
  .top-actions > *{ display:none !important; }
  .top-actions > .lang-toggle{ display:inline-flex !important; background: rgba(255,255,255,.13); }
  .lang-toggle .seg{ padding:7px 10px; }
  .badge{ display:none !important; }

  /* --- Barra inferior tipo iOS --- */
  #mobile-tabbar.mobile-only{ display:flex; }
  #mobile-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:55; align-items:stretch;
    padding: 7px 4px calc(env(safe-area-inset-bottom));
    background: rgba(12,16,22,.82); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-top:1px solid rgba(255,255,255,.10); }
  .mtab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; color:#8b97a5; padding:6px 2px 4px; font-size:10.5px; font-weight:600; letter-spacing:.2px;
    transition: color .15s ease, transform .12s ease; }
  .mtab svg{ width:25px; height:25px; display:block; }
  .mtab.active{ color: var(--gold); }
  .mtab:active{ transform: scale(.9); }

  /* --- Sheets (paneles laterales + flotante + más) --- */
  .side-panel, .floating-panel{
    position:fixed; left:0; right:0; width:auto; max-width:none; height:auto;
    top: calc(env(safe-area-inset-top) + 8px);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    border:1px solid rgba(255,255,255,.10); border-bottom:none; border-radius:22px 22px 0 0;
    background: rgba(18,24,32,.93); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    box-shadow: 0 -18px 55px rgba(0,0,0,.55); z-index:50; overflow:hidden; padding-top:16px; }
  .floating-panel{ padding:16px 16px 14px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .side-panel:not(.hidden), .floating-panel:not(.hidden){ animation: sheetUp .44s cubic-bezier(.2,.84,.25,1); }
  @keyframes sheetUp{ from{ transform: translateY(103%);} to{ transform: translateY(0);} }
  .side-panel::before, .floating-panel::before{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:3px; background: rgba(255,255,255,.30); z-index:6; }
  .side-head{ padding:14px 18px 14px; }
  .side-head h3{ font-size:19px; font-weight:700; letter-spacing:.2px; }
  .fp-head{ margin-bottom:6px; }
  .fp-head h3{ font-size:18px; font-weight:700; }
  .close-x{ width:38px; height:38px; display:grid; place-items:center; font-size:19px; margin:-6px -8px -6px 0; border-radius:50%; }
  .projects-list, .tab-body{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .tab-body{ padding-bottom: 22px; }

  /* tap targets / inputs sin zoom */
  .fp-input, .market-beds, #search-input, input, select, textarea{ font-size:16px; }
  .market-btn{ min-height:48px; font-size:14px; }
  .ghost-btn, .primary-btn, .danger-btn{ min-height:42px; }
  .seg{ font-size:13px; }
  .proj-item{ padding:14px 14px; }
  .proj-item h4{ font-size:16px; }
  .tab{ padding:10px 12px; font-size:14px; }

  /* --- Modales como sheets que suben --- */
  .modal{ padding:0; align-items:flex-end; }
  .modal.dark{ align-items:center; }
  .modal-card.small, .modal-card.medium, .modal-card.large{ width:100%; max-width:100%; max-height:none;
    height: calc(100% - env(safe-area-inset-top) - 6px); border-radius:22px 22px 0 0;
    animation: sheetUp .44s cubic-bezier(.2,.84,.25,1); }
  .modal-card::before{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:42px; height:5px; border-radius:3px; background: rgba(255,255,255,.30); z-index:6; }
  .modal-head{ padding:16px 18px 14px; }
  .modal-head h2{ font-size:19px; }
  .modal-foot{ padding:14px 18px calc(16px + env(safe-area-inset-bottom)); }
  .modal-body.form-body{ padding:18px 18px calc(22px + env(safe-area-inset-bottom)); }
  #lightbox .modal-close{ top: calc(env(safe-area-inset-top) + 10px); right:14px; background:rgba(0,0,0,.5); }

  /* --- Panel "Más" (Ajustes) --- */
  #more-sheet.mobile-only{ display:flex; }
  .more-body{ padding:6px 18px 22px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .more-label{ font-size:11.5px; color:var(--muted); margin-bottom:9px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; }
  .more-seg{ display:flex; gap:8px; }
  .more-seg .seg{ flex:1; padding:13px 10px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.05); color:var(--ink); font-size:14px; font-weight:600; }
  .more-seg .seg.active{ background:var(--gold); color:#1a1205; border-color:var(--gold); }
  #more-admin{ min-height:50px; font-size:15px; border-radius:13px; }
  .more-updated{ color:var(--muted); font-size:12px; text-align:center; }

  .toast{ bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
}

/* Pantallas muy estrechas */
@media (max-width: 380px){
  .mtab span{ font-size:9.5px; }
  .search-wrap{ height:40px; }
}


/* ===== Ajuste orden barra superior móvil + PULIDO APPLE ===== */
@media (max-width: 820px){
  #topbar{ flex-wrap:nowrap; }
  #topbar .brand{ order:0; }
  #topbar .search-wrap{ order:1; flex:1 1 auto; max-width:none; }
  #topbar .top-actions{ order:2; margin-left:6px; }
}
button,.seg,.ghost-btn,.primary-btn,.danger-btn,.icon-btn,.market-btn,.proj-toggle,.tab,.mtab,.close-x,.preset-chip,.doc-row,.proj-item{ transition: background .18s ease,color .18s ease,transform .12s ease,border-color .18s ease,box-shadow .18s ease; }
button:active{ transform: scale(.985); }
.primary-btn,.icon-btn{ box-shadow:0 4px 14px rgba(212,175,55,.26); }
.primary-btn:hover,.icon-btn:hover{ box-shadow:0 7px 20px rgba(212,175,55,.38); }
.view-toggle,.lang-toggle{ box-shadow: inset 0 1px 2px rgba(0,0,0,.28); }
.seg.active{ box-shadow:0 2px 8px rgba(212,175,55,.32); }
.fp-input:focus,#search-input:focus,.market-beds:focus,select.fp-input:focus,textarea.fp-input:focus{ box-shadow:0 0 0 3px rgba(212,175,55,.16); }
.search-wrap{ transition: box-shadow .2s, border-color .2s; }
.search-wrap:focus-within{ border-color: rgba(212,175,55,.55); box-shadow:0 0 0 3px rgba(212,175,55,.13); }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.30); background-clip:padding-box; }
::-webkit-scrollbar-track{ background: transparent; }
@media (min-width: 821px){
  #topbar{ gap:18px; padding:0 22px; }
  .side-panel{ border-radius:20px; }
  .modal-card.large,.modal-card.medium,.modal-card.small{ border-radius:20px; }
  .side-panel,.floating-panel,.modal-card{ box-shadow:0 24px 60px rgba(0,0,0,.5); }
  .proj-item:hover{ transform: translateX(2px); }
  .ghost-btn:hover,.seg:hover{ background: rgba(255,255,255,.12); }
}


/* ===== MÓVIL FIX2: que el idioma no se corte ===== */
@media (max-width: 820px){
  html{ -webkit-text-size-adjust:100%; }
  #topbar{ gap:8px; padding-left:10px; padding-right:10px; }
  #topbar .search-wrap{ min-width:0; }
  #topbar #search-input{ min-width:0; }
  #topbar .top-actions{ margin-left:4px; flex:0 0 auto; }
  .lang-toggle{ padding:2px; }
  .lang-toggle .seg{ padding:7px 8px; font-size:12px; }
}


/* ===== Reordenar proyectos (admin) ===== */
.proj-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; align-self:center; }
.proj-move{ width:26px; height:26px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.05); color:var(--muted); font-size:11px; line-height:1; display:grid; place-items:center; padding:0; }
.proj-move:hover{ background:rgba(255,255,255,.12); color:var(--ink); }
.proj-move:disabled{ opacity:.3; cursor:default; }
@media (max-width:820px){ .proj-move{ width:34px; height:34px; font-size:13px; } }


/* ===== Autocompletar destino (Distancias) ===== */
.ac-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60; background: var(--panel-solid); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow); max-height:240px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ac-item{ padding:11px 13px; font-size:14px; color:var(--ink); cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); }
.ac-item:last-child{ border-bottom:none; }
.ac-item:hover{ background: rgba(255,255,255,.08); }
.dist-dest-row{ position:relative; }


/* ===== Plan de pagos ===== */
.plan-btn{ display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; background:linear-gradient(135deg,#d4af37,#e7c969); color:#1a1205; border:none; border-radius:11px; padding:11px 16px; font-weight:700; font-size:13.5px; box-shadow:0 5px 16px rgba(212,175,55,.3); }
.plan-btn::before{ content:"\01F4C5"; }
.plan-btn:hover{ filter:brightness(1.05); }
.plan-body{ padding:18px; background:#0b0f14; overflow:auto; }
.plan-svg-holder{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; }
.plan-svg{ display:block; width:100%; height:auto; max-width:100%; }
.plan-operativa{ margin-top:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.plan-op-h{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--gold-soft); font-weight:700; margin-bottom:8px; }
.plan-op-tx{ white-space:pre-wrap; line-height:1.55; font-size:14px; color:#dde6ee; }
.plan-ed{ border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(255,255,255,.03); }
.plan-ed-row3{ display:grid; grid-template-columns:1fr 0.7fr 1fr; gap:10px; }
.pe-rows{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.pe-row{ display:grid; grid-template-columns:1fr 72px 1fr 34px; gap:8px; align-items:center; }
.pe-del{ background:rgba(255,93,108,.12); color:var(--danger); border:1px solid rgba(255,93,108,.4); border-radius:8px; height:38px; }
.pe-actions{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.pe-pct{ font-size:12px; color:var(--muted); margin-left:auto; font-weight:700; }
@media (max-width:820px){ .plan-ed-row3{ grid-template-columns:1fr; } .pe-row{ grid-template-columns:1fr 56px 1fr 32px; } .plan-body{ padding:12px; } }
.plan-fx{ margin-top:12px; text-align:right; color:#9fb0c0; font-size:12px; font-weight:600; }
.plan-fx::before{ content:"\1F504  "; }


/* ===== Datos de mercado (zona) ===== */
.market-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 8px; }
.mstat{ background:rgba(0,229,255,0.07); border:1px solid rgba(0,229,255,0.22); border-radius:10px; padding:9px 6px; text-align:center; }
.mstat-v{ display:block; font-size:16px; font-weight:800; color:#ffffff; letter-spacing:.2px; }
.mstat-l{ display:block; font-size:10px; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.market-src{ font-size:11px; color:var(--muted); margin:0 0 8px; }
@media (max-width:820px){ .mstat-v{ font-size:18px; } }
.mstat-sub{ display:block; font-size:11px; color:#7fd3ff; font-weight:700; margin-top:1px; }
.market-stats .mstat-v{ font-size:15px; }


/* mercado: una sola tarjeta a lo ancho */
.market-stats{ display:block; }
.mstat-full{ display:flex; flex-direction:column; align-items:center; padding:14px 12px; }
.mstat-line{ display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; }
.market-stats .mstat-v{ font-size:22px; }
.mstat-full .mstat-sub{ font-size:14px; }
.mstat-full .mstat-l{ margin-top:6px; }


/* guard anti-scroll-horizontal (móvil) */
html, body{ overflow-x:hidden; max-width:100%; }


/* panel de estado (admin) */
.status-body{ padding:4px 2px 2px; }
.st-row{ display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid rgba(255,255,255,0.07); }
.st-row:last-of-type{ border-bottom:none; }
.st-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--muted,#8aa); }
.st-dot.st-ok{ background:var(--ok,#2ecc71); box-shadow:0 0 8px rgba(46,204,113,.55); }
.st-dot.st-warn{ background:#f5a623; box-shadow:0 0 8px rgba(245,166,35,.55); }
.st-dot.st-fail{ background:var(--danger,#e74c3c); box-shadow:0 0 8px rgba(231,76,60,.55); }
.st-dot.st-run{ background:#7fd3ff; animation:stpulse 1s infinite; }
@keyframes stpulse{ 0%,100%{opacity:.3} 50%{opacity:1} }
.st-label{ flex:1; font-weight:600; color:#fff; }
.st-detail{ color:var(--muted,#9ab); font-size:13px; text-align:right; }
.st-foot{ margin-top:12px; }


/* brand-splash (pantalla de carga) */
#brand-splash{ position:fixed; inset:0; z-index:100000; background:#0b0f14; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .8s ease; }
#brand-splash.bs-hide{ opacity:0; pointer-events:none; }
#brand-splash .bs-bg{ position:absolute; inset:0; background:#0b0f14 url('https://d8j0ntlcm91z4.cloudfront.net/user_3FR5rEXTVMjp2yhsLWPksyQX1iy/hf_20260622_072708_e744c0ec-5522-4ef1-bd4f-9f48db912d36_min.webp') center/cover no-repeat; }
#brand-splash .bs-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,20,.50) 0%, rgba(11,15,20,.55) 38%, rgba(11,15,20,.93) 100%); }
#brand-splash .bs-content{ position:relative; text-align:center; color:#fff; padding:24px; animation:bsFade 1s ease; }
@keyframes bsFade{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
#brand-splash .bs-emblem{ display:flex; justify-content:center; margin-bottom:14px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.55)); }
#brand-splash .bs-title{ font-size:32px; font-weight:300; letter-spacing:.5px; text-shadow:0 2px 14px rgba(0,0,0,.5); }
#brand-splash .bs-title span{ color:#d4af37; font-weight:700; }
#brand-splash .bs-tagline{ margin-top:8px; color:#e7c66b; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.5); }
#brand-splash .bs-bar{ width:170px; height:3px; margin:24px auto 0; background:rgba(255,255,255,.16); border-radius:3px; overflow:hidden; }
#brand-splash .bs-bar span{ display:block; height:100%; width:40%; background:linear-gradient(90deg,#d4af37,#f1d27a); border-radius:3px; animation:bsBar 1.3s ease-in-out infinite; }
@keyframes bsBar{ 0%{transform:translateX(-110%)} 100%{transform:translateX(320%)} }
@media (max-width:480px){ #brand-splash .bs-title{ font-size:25px } #brand-splash .bs-tagline{ font-size:11px; letter-spacing:2px } }


/* ===== intro de bienvenida ===== */
#intro-overlay{ position:fixed; inset:0; z-index:100001; background:#07090c; color:#fff; font-family:'Manrope',system-ui,-apple-system,sans-serif; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:transform .9s cubic-bezier(.7,0,.2,1), opacity .9s ease; }
#intro-overlay.intro-hide{ transform:translateY(-100%); opacity:0; pointer-events:none; }
#intro-overlay .intro-bg{ position:absolute; inset:0; background:#07090c url('https://d8j0ntlcm91z4.cloudfront.net/user_3FR5rEXTVMjp2yhsLWPksyQX1iy/hf_20260622_080601_c7900977-b38d-4d8e-afa0-6f9793516164_min.webp') center/cover no-repeat; }
#intro-overlay .intro-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,12,.55) 0%, rgba(7,9,12,.20) 32%, rgba(7,9,12,.82) 78%, rgba(7,9,12,.96) 100%); }
#intro-overlay .intro-top{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:22px 32px; }
#intro-overlay .intro-brand{ display:flex; align-items:center; gap:11px; }
#intro-overlay .intro-word{ font-weight:800; letter-spacing:3px; font-size:14px; }
#intro-overlay .intro-lang{ display:flex; align-items:center; gap:6px; font-size:13px; color:rgba(255,255,255,.55); }
#intro-overlay .intro-lang-btn{ background:none; border:none; color:rgba(255,255,255,.55); font:inherit; font-weight:700; letter-spacing:1px; cursor:pointer; padding:4px 2px; transition:color .2s; }
#intro-overlay .intro-lang-btn.active{ color:#d4af37; }
#intro-overlay .intro-content{ position:relative; padding:0 32px 6px; max-width:780px; animation:introUp 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes introUp{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
#intro-overlay .intro-kicker{ text-transform:uppercase; letter-spacing:4px; font-size:12px; color:#d4af37; font-weight:600; margin-bottom:14px; }
#intro-overlay .intro-name{ font-size:clamp(40px,8vw,82px); line-height:.98; font-weight:800; letter-spacing:-1.5px; margin:0 0 18px; }
#intro-overlay .intro-bio{ font-size:clamp(15px,1.55vw,19px); line-height:1.6; font-weight:300; color:rgba(255,255,255,.86); max-width:600px; margin:0; }
#intro-overlay .intro-cta{ position:relative; align-self:center; margin:22px 0 32px; background:none; border:none; color:#fff; font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.85; transition:opacity .2s; }
#intro-overlay .intro-cta:hover{ opacity:1; }
#intro-overlay .intro-cta-txt{ text-transform:uppercase; letter-spacing:3px; font-size:11px; font-weight:600; }
#intro-overlay .intro-chevron{ font-size:22px; line-height:1; animation:introBounce 1.6s infinite; }
@keyframes introBounce{ 0%,100%{transform:translateY(0); opacity:.6} 50%{transform:translateY(5px); opacity:1} }
@media (max-width:600px){ #intro-overlay{ justify-content:flex-end } #intro-overlay .intro-top{ padding:16px 18px } #intro-overlay .intro-content{ padding:0 18px 4px } #intro-overlay .intro-word{ font-size:12px; letter-spacing:2px } #intro-overlay .intro-bio{ font-size:15px } }

/* ===== cabecera moderna ===== */
#topbar{ background:rgba(7,9,12,.6)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); }
#topbar, #topbar .brand, #topbar .ghost-btn, #topbar .seg{ font-family:'Manrope',system-ui,-apple-system,sans-serif; }
#topbar .brand{ letter-spacing:1.4px; }
#topbar .ghost-btn{ text-transform:uppercase; letter-spacing:1.1px; font-size:11px; font-weight:600; }


/* ============ REBRAND nude-project ============ */
:root{ --np-glass:rgba(11,14,19,.74); --np-line:rgba(255,255,255,.09); --np-line2:rgba(255,255,255,.16); }
body{ font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@media (min-width:821px){
 #topbar{ flex-wrap:nowrap !important; gap:13px !important; }
 #topbar .search-wrap{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:340px !important; }
 #topbar .top-actions{ flex:0 0 auto !important; width:auto !important; margin-left:auto !important; flex-wrap:nowrap !important; gap:6px !important; }
 #topbar .top-actions .ghost-btn, #topbar .top-actions .seg{ white-space:nowrap; font-size:11px; letter-spacing:.8px; padding:7px 11px; }
}
.side-panel, .floating-panel, .modal-card, .overlay-card{ background:var(--np-glass) !important; -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%); border:1px solid var(--np-line) !important; box-shadow:0 24px 70px rgba(0,0,0,.55) !important; border-radius:18px !important; }
.side-head, .fp-head, .modal-head{ border-bottom:1px solid var(--np-line) !important; }
.side-head h2,.side-head h3,.fp-head h2,.fp-head h3,.modal-head h2{ font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:.2px; }
.ghost-btn,.seg{ font-family:'Manrope',sans-serif; letter-spacing:.5px; transition:all .18s ease; }
.ghost-btn{ border:1px solid var(--np-line2); background:rgba(255,255,255,.035); border-radius:11px; }
.ghost-btn:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); }
.primary-btn,.plan-btn{ letter-spacing:.4px; border-radius:12px !important; }
select.market-beds, select.fp-input{ -webkit-appearance:none; appearance:none; background-color:rgba(255,255,255,.05) !important; border:1px solid var(--np-line2) !important; border-radius:11px !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23cbd5e1' stroke-width='1.6'><path d='M1 1.5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px !important; }
.tabs{ border-bottom:1px solid var(--np-line) !important; gap:20px !important; }
.tab{ background:none !important; border:none !important; border-radius:0 !important; padding:11px 0 !important; text-transform:uppercase; letter-spacing:1.6px; font-size:11px; font-weight:600; opacity:.55; position:relative; }
.tab:hover{ opacity:.85; }
.tab.active{ opacity:1; color:#fff; }
.tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#d4af37; }
#detail-panel{ overflow-y:auto !important; overscroll-behavior:contain; }
#detail-panel .side-head{ position:sticky; top:0; z-index:4; background:var(--np-glass); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
#detail-panel .tab-body{ overflow:visible !important; flex:0 0 auto !important; max-height:none !important; min-height:0 !important; }
.market-box{ border:1px solid var(--np-line) !important; background:rgba(255,255,255,.03) !important; border-radius:14px !important; }
.market-title{ text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:600; color:var(--muted); }
.proj-item{ border-bottom:1px solid var(--np-line) !important; border-radius:12px; padding:13px 12px !important; transition:background .18s ease; }
.proj-item:hover{ background:rgba(255,255,255,.05); }
.proj-item h4{ font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:.2px; }
.proj-item .addr{ text-transform:uppercase; letter-spacing:1.4px; font-size:10.5px; color:var(--muted); }
#detail-panel::-webkit-scrollbar, .projects-list::-webkit-scrollbar{ width:7px; }
#detail-panel::-webkit-scrollbar-thumb, .projects-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }


/* badges y estado de venta */
.detail-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 2px; }
.badge{ display:inline-flex; align-items:center; font:600 11px/1 'Manrope',system-ui,sans-serif; letter-spacing:.6px; text-transform:uppercase; padding:6px 11px; border-radius:999px; border:1px solid transparent; }
.badge-ready{ color:#86e6ad; background:rgba(46,204,113,.12); border-color:rgba(46,204,113,.32); }
.badge-offplan{ color:#e7c66b; background:rgba(212,175,55,.12); border-color:rgba(212,175,55,.32); }
.sale-pill{ display:inline-flex; align-items:center; gap:7px; font:600 11px/1 'Manrope',system-ui,sans-serif; letter-spacing:.4px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:#e6edf3; }
.pdot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.pdot-eois{ background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.16); animation:pdotPulse 1.7s ease-in-out infinite; }
.pdot-selling{ background:#f5a623; box-shadow:0 0 0 3px rgba(245,166,35,.16); }
.pdot-soldout{ background:#e74c3c; box-shadow:0 0 0 3px rgba(231,76,60,.16); }
@keyframes pdotPulse{ 0%,100%{ box-shadow:0 0 0 2px rgba(46,204,113,.10); } 50%{ box-shadow:0 0 0 5px rgba(46,204,113,.28); } }
.proj-item h4 .pdot{ vertical-align:middle; margin-right:7px; }


/* filtro de mapa (público) */
.map-filters{ position:fixed; top:64px; left:14px; z-index:35; font-family:'Manrope',system-ui,sans-serif; }
@media (max-width:600px){ .map-filters{ top:96px; left:10px; } }
.filters-toggle{ display:inline-flex; align-items:center; gap:7px; background:rgba(11,14,19,.72); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14); color:#e6edf3; border-radius:999px; padding:8px 14px; font:600 12px/1 'Manrope',sans-serif; letter-spacing:.5px; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:all .18s; }
.filters-toggle:hover{ border-color:rgba(255,255,255,.28); }
.filters-toggle.has-filter{ border-color:#d4af37; color:#fff; }
.filters-count{ background:#d4af37; color:#0b0f14; border-radius:999px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font:700 11px/1 sans-serif; padding:0 4px; }
.filters-pop{ margin-top:8px; background:rgba(11,14,19,.88); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); width:236px; animation:fpop .18s ease; }
@keyframes fpop{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.filters-group{ margin-bottom:12px; }
.filters-label{ text-transform:uppercase; letter-spacing:2px; font-size:10px; color:var(--muted,#9ab); font-weight:600; margin-bottom:8px; }
.filters-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.fchip{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); color:#cdd6df; border-radius:999px; padding:7px 12px; font:600 11.5px/1 'Manrope',sans-serif; letter-spacing:.3px; cursor:pointer; transition:all .15s; }
.fchip:hover{ background:rgba(255,255,255,.1); }
.fchip.active{ background:#d4af37; border-color:#d4af37; color:#0b0f14; }
.filters-clear{ width:100%; margin-top:2px; background:none; border:none; color:var(--muted,#9ab); font:600 11px/1 'Manrope',sans-serif; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; padding:6px; }
.filters-clear:hover{ color:#fff; }


/* =======================================================================
   OPTIMIZACIÓN FINAL · filtros, stacking de paneles, informe móvil, pulido
   (añadido al final: las reglas posteriores prevalecen)
   ======================================================================= */

/* ---------- A · El filtro del mapa nunca se solapa con paneles/modales --- */
.map-filters{ transition: opacity .25s ease, transform .25s ease, visibility .25s; }
body.chrome-hidden .map-filters{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); }

/* ---------- B · Filtros: posición, tacto y estética --------------------- */
.filters-toggle{ box-shadow:0 10px 30px rgba(0,0,0,.42); }
.filters-toggle svg{ width:14px; height:14px; opacity:.92; }
.filters-pop{ width:248px; }
.filters-clear{ border-top:1px solid rgba(255,255,255,.08); padding-top:11px; margin-top:4px; }

@media (min-width:821px){
  .map-filters{ top: calc(var(--topbar-h, 60px) + 14px); left:16px; }
}
@media (max-width:820px){
  .map-filters{ top: calc(env(safe-area-inset-top) + 66px); left:12px; z-index:38; }
  .filters-toggle{ padding:10px 16px; font-size:13px; }
  .filters-toggle svg{ width:15px; height:15px; }
  .filters-pop{ width:min(86vw, 300px); padding:16px; }
  .filters-label{ font-size:11px; }
  .filters-chips{ gap:8px; }
  .fchip{ padding:10px 14px; font-size:13px; }
  .filters-clear{ padding:11px; font-size:12px; }
  body.sheet-open .map-filters{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ---------- C · Informe Inteligencia + visor de documentos a pantalla
   completa y legibles en móvil --------------------------------------- */
#report-body{ display:flex; flex-direction:column; padding:0; }
#report-frame{ flex:1 1 auto; width:100%; min-height:0; border:none; background:#fff; }

@media (max-width:820px){
  #report-modal, #doc-modal{ align-items:stretch; }
  #report-modal .modal-card.large, #doc-modal .modal-card.large{
    height:100% !important; max-height:100% !important;
    border-radius:0 !important; animation:none !important; }
  #report-modal .modal-card.large::before, #doc-modal .modal-card.large::before{ display:none !important; }
  #report-modal .modal-head, #doc-modal .modal-head{
    position:sticky; top:0; z-index:3;
    padding: calc(env(safe-area-inset-top) + 12px) 14px 12px;
    background:rgba(8,11,15,.96);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  #report-modal .modal-head h2, #doc-modal .modal-head h2{ font-size:16px; }
  #doc-modal .modal-body{ min-height:0; }
  #report-frame, #doc-modal .doc-frame{ height:100%; min-height:0; -webkit-overflow-scrolling:touch; }
}

/* ---------- D · Pulido visual general (escritorio + móvil) --------------- */
:focus-visible{ outline:2px solid rgba(212,175,55,.6); outline-offset:2px; }
button:focus:not(:focus-visible){ outline:none; }
.filters-toggle,.fchip,.close-x,.ghost-btn,.primary-btn,.danger-btn,.market-btn{ -webkit-tap-highlight-color:transparent; }

/* cabecera de paneles laterales fija para un scroll más limpio */
.side-panel .side-head{ position:sticky; top:0; z-index:4;
  background:var(--np-glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
#detail-badges{ padding:2px 18px 6px; }

@media (min-width:821px){
  .side-panel.left{ left:16px; } .side-panel.right{ right:16px; }
  .floating-panel{ top:16px; }
}



/* ===== DLD · tarjeta de mercado real + estado ===== */
.dld-box{ margin:12px 18px 0; padding:13px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.04));
  border:1px solid rgba(212,175,55,.30); }
.dld-head{ display:flex; align-items:center; gap:8px; font:700 12px/1.2 'Manrope',system-ui,sans-serif;
  color:#fff; letter-spacing:.2px; margin-bottom:10px; }
.dld-badge{ font:800 10px/1 'Manrope',sans-serif; letter-spacing:1px; color:#1a1205;
  background:linear-gradient(135deg,#d4af37,#e7c969); padding:4px 7px; border-radius:6px; }
.dld-rows{ display:flex; flex-direction:column; gap:7px; }
.dld-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dld-k{ font-size:12px; color:#bfcad6; }
.dld-v{ font:700 14px/1.1 'Manrope',sans-serif; color:#fff; text-align:right; }
.dld-sub{ font-size:11.5px; font-weight:600; color:#e7c66b; }
.dld-src{ font-size:10.5px; color:#8fa1b3; margin-top:10px; text-transform:uppercase; letter-spacing:.4px; }
.dld-status{ margin-top:10px; line-height:1.5; min-height:18px; }
#dld-modal .modal-card.medium .fp-input{ margin-bottom:4px; }
@media (max-width:820px){ .dld-box{ margin:12px 14px 0; } }



/* ===== DLD · buscador de zona (datalist) + botón ===== */
#f-dld-wrap{ margin-top:2px; }
.dld-hint{ font-size:11.5px; color:#9fb0c0; margin-top:5px; min-height:14px; line-height:1.4; }
.dld-hint.ok{ color:#86e6ad; }
#btn-dld{ flex:0 0 auto; }
@media (min-width:821px){ #topbar .search-wrap{ max-width:300px !important; } }
@media (max-width:820px){ #btn-dld{ display:none !important; } }



/* =====================================================================
   PULIDO VISUAL PROFESIONAL v3  ·  Inteligencia Dubai
   (overrides finales: topbar sin solapes, botón cerrar circular,
    cabeceras, tarjetas de mercado, tabs, modales)
   ===================================================================== */

/* ---------- Topbar: que nada se solape ni se trunque ---------------- */
/* El buscador es el ÚNICO elemento que cede espacio; los botones nunca
   se encogen, así no se trunca "Buscar" ni los textos de acción. */
#topbar .search-wrap{ flex:1 1 220px !important; max-width:460px !important; min-width:0 !important; }
#topbar .search-wrap input{ min-width:0; }
#topbar .top-actions{ gap:7px; }
#topbar .top-actions > *{ flex:0 0 auto; }
#topbar .view-toggle{ flex:0 0 auto; }
#topbar .seg,
#topbar .ghost-btn,
#topbar .primary-btn,
#topbar .lang-toggle{ white-space:nowrap; }
#topbar .ghost-btn{ padding:7px 11px; }

/* "Actualizado hace…" más discreto y se retira antes de apretar el resto */
#last-updated{ font-size:11px; padding:5px 10px; opacity:.92; }
@media (max-width:1380px){ #last-updated{ display:none !important; } }
@media (max-width:1180px){ #topbar .search-wrap{ flex-basis:130px !important; } }

/* ---------- Botón de cerrar: círculo elegante (panel + modales) ------ */
.close-x,
.modal .close-x,
.modal-close{
  width:34px; height:34px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border-radius:50%; font-size:14px; line-height:1;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line) !important;
  color:var(--muted); cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.close-x:hover,
.modal .close-x:hover,
.modal-close:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.22) !important;
  color:var(--ink);
}

/* ---------- Cabecera de panel / modal -------------------------------- */
.side-head{ padding:15px 18px; }
.side-head h3{ font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.modal-head{ align-items:center; }
.modal-head h2{ font-weight:700; letter-spacing:-.01em; }

/* ---------- Meta del proyecto: jerarquía clara ----------------------- */
.detail-meta{ gap:6px; padding-top:14px; }
.detail-address{ text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; color:var(--muted); }
.detail-desc{ color:var(--ink); font-size:14px; line-height:1.35; }
.detail-updated{ font-size:11.5px; }

/* ---------- Badges --------------------------------------------------- */
.badge{ font-weight:600; letter-spacing:.02em; }
.badge-offplan{ color:var(--gold-soft); border-color:rgba(212,175,55,.45); background:rgba(212,175,55,.08); }

/* ---------- Tarjeta "Área market" / mercado -------------------------- */
.market-box{ margin:14px 18px 0; padding:14px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.market-title{ text-transform:uppercase; letter-spacing:.09em; font-size:11px; color:var(--muted); margin-bottom:10px; }
.mstat-full{ border-radius:14px; }
.market-src{ font-style:normal; font-size:10.5px; color:#8fa1b3; text-transform:uppercase; letter-spacing:.04em; }
.market-beds{ border-radius:10px; }

/* ---------- Tabs (Operativa / Fotos / PDFs / Documentos) ------------- */
.tabs{ gap:2px; }
.tab{ padding:9px 12px; font-size:12.5px; color:var(--muted); letter-spacing:.03em; transition:color .15s ease; }
.tab:hover{ color:var(--ink); }
.tab.active, .tab.is-active, .tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--gold) !important; }

/* ---------- Modales: marco y respiración consistentes --------------- */
.modal-card{ border:1px solid var(--line); border-radius:18px; }
.modal-foot{ gap:8px; }

/* ---------- Detalle: separación entre bloques de contenido ---------- */
#detail-panel .market-box + .tabs,
#detail-panel .tabs{ margin-top:14px; }


/* =======================================================================
   CRM DE CLIENTES (solo administrador) — estilos
   Se añade AL FINAL de css/styles.css.
   ======================================================================= */

.crm-card .modal-head { gap: 10px; }
.crm-body { display: flex; flex-direction: column; gap: 14px; }
.crm-save { font-size: 12px; color: var(--muted); min-width: 78px; }
.crm-save.saved { color: var(--ok); }
.crm-save.saving { color: var(--muted); }
.crm-small-btn { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.crm-small-btn.block, .crm-card .block { width: 100%; }

/* ------ lista de clientes ------ */
.crm-list { display: flex; flex-direction: column; gap: 10px; }
.crm-client {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.crm-client:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(212, 175, 55, 0.45); }
.crm-client-name { font-weight: 600; font-size: 15px; }
.crm-client-obj { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.crm-client-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.crm-count {
  font-size: 11.5px; color: var(--muted); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.crm-box-head .crm-count { margin-left: 8px; }
.crm-dots { display: flex; gap: 4px; }
.crm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* estados (puntos, selects) */
.st-proposed  { background: rgba(159, 176, 192, 0.9); }
.st-interested { background: var(--cyan); }
.st-reserved  { background: var(--gold); }
.st-discarded { background: var(--danger); }
select.crm-offer-status { background: rgba(255, 255, 255, 0.05); }
select.crm-offer-status.st-proposed  { color: var(--muted); }
select.crm-offer-status.st-interested { color: var(--cyan); }
select.crm-offer-status.st-reserved  { color: var(--gold-soft); }
select.crm-offer-status.st-discarded { color: var(--danger); }

/* ------ ficha de cliente ------ */
.crm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.crm-field input,
.crm-offer-note,
#crm-manual-name {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); padding: 9px 11px; font-size: 13.5px; width: 100%;
}
.crm-field input:focus, .crm-offer-note:focus, #crm-manual-name:focus,
.crm-box textarea:focus { outline: none; border-color: rgba(212, 175, 55, 0.55); }

.crm-box {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 10px;
}
.crm-box-gold { border-color: rgba(212, 175, 55, 0.4); background: rgba(212, 175, 55, 0.06); }
.crm-box-head { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; }
.crm-box textarea {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); padding: 10px 11px; font-size: 13.5px; resize: vertical;
  width: 100%; font-family: inherit; line-height: 1.5;
}

/* proyectos ofrecidos */
.crm-offered { display: flex; flex-direction: column; gap: 9px; }
.crm-offer {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
  background: rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 8px;
}
.crm-offer-top { display: flex; align-items: center; gap: 9px; }
.crm-offer-name { flex: 1; font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.crm-offer-name.link { color: var(--gold-soft); cursor: pointer; }
.crm-offer-name.link:hover { text-decoration: underline; }
.crm-offer-status {
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: 12px; flex: 0 0 auto;
}
.crm-offer-note { font-size: 12.5px; padding: 7px 10px; }
.crm-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 7px; flex: 0 0 auto;
}
.crm-x:hover { color: var(--danger); background: rgba(255, 93, 108, 0.12); }

/* añadir proyectos */
.crm-add-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.crm-manual { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.crm-manual input { flex: 1; }
.crm-picker {
  display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: rgba(0, 0, 0, 0.2);
}
.crm-pick-item {
  text-align: left; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
  color: var(--ink); border-radius: 8px; padding: 9px 11px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.crm-pick-item:hover:not(:disabled) { background: rgba(212, 175, 55, 0.12); border-color: rgba(212, 175, 55, 0.4); }
.crm-pick-item.done { opacity: 0.65; cursor: default; }
.crm-pick-check { font-size: 11.5px; color: var(--ok); white-space: nowrap; }

.crm-detail-foot { display: flex; justify-content: flex-end; padding-top: 2px; }
.crm-empty { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14px; }
.crm-empty.small { padding: 12px 8px; font-size: 12.5px; }

/* asignar desde el detalle de proyecto */
.crm-assign-body { display: flex; flex-direction: column; gap: 10px; }
.crm-assign-proj {
  font-weight: 700; color: var(--gold-soft); font-size: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 9px;
}
.crm-assign-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.crm-assign-list .crm-pick-item.done { opacity: 1; cursor: pointer; border-color: rgba(69, 212, 131, 0.35); }

/* móvil */
@media (max-width: 820px) {
  .crm-fields { grid-template-columns: 1fr; }
  #clients-modal .modal-card, #assign-modal .modal-card { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .crm-add-row { flex-direction: column; align-items: stretch; }
  .crm-manual { min-width: 0; }
}


/* =======================================================================
   OPTIMIZACIÓN MÓVIL · CRM de clientes + Informe Inteligencia
   Se añade AL FINAL de css/styles.css.
   ======================================================================= */
@media (max-width: 820px){

  /* --- CRM: modales como hoja a pantalla completa (estilo iOS) --- */
  #clients-modal, #assign-modal { align-items: stretch; }
  #clients-modal .modal-card, #assign-modal .modal-card {
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; animation: none !important;
    display: flex; flex-direction: column; padding: 0; }
  #clients-modal .modal-card::before, #assign-modal .modal-card::before { display: none !important; }
  #clients-modal .modal-head, #assign-modal .modal-head {
    position: sticky; top: 0; z-index: 3;
    padding: calc(env(safe-area-inset-top) + 12px) 14px 12px;
    background: rgba(8, 11, 15, .96);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  #clients-modal .modal-head h2, #assign-modal .modal-head h2 { font-size: 17px; }
  #clients-modal .modal-body, #assign-modal .modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(env(safe-area-inset-bottom) + 26px); }

  /* Tacto: campos y botones grandes (16px evita el auto-zoom de iOS) */
  #clients-modal input, #clients-modal textarea, #clients-modal select,
  #assign-modal input { font-size: 16px !important; }
  .crm-field input, .crm-box textarea, .crm-offer-note, #crm-manual-name { padding: 12px 13px; }
  .crm-small-btn { padding: 12px 14px; font-size: 14px; min-height: 44px; }
  #crm-add { min-height: 40px; padding: 9px 14px; }
  #crm-close, #assign-close { width: 40px; height: 40px; }
  .crm-client { padding: 15px 14px; min-height: 64px; }
  .crm-client-name { font-size: 16px; }
  .crm-client-obj { font-size: 13px; }
  .crm-offer { padding: 12px; gap: 10px; }
  .crm-offer-name { font-size: 15px; }
  .crm-offer-status { padding: 10px 8px; font-size: 14px; min-height: 40px; }
  .crm-x { padding: 10px 12px; font-size: 15px; }
  .crm-pick-item { padding: 13px 12px; font-size: 15px; min-height: 46px; }
  .crm-picker { max-height: 44vh; }
  .crm-assign-list { max-height: none; }
  .crm-detail-foot button { width: 100%; }
  .crm-box textarea { min-height: 96px; }
  .crm-manual { flex-wrap: nowrap; }

  /* Botón "Ofrecer a cliente" cómodo en la hoja de detalle del proyecto */
  #detail-panel .side-foot { flex-wrap: wrap; padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
  #btn-offer-client { flex: 1 1 100%; min-height: 46px; font-size: 14px; }
  #btn-edit-project, #btn-delete-project { flex: 1 1 auto; min-height: 44px; }

  /* --- Informe Inteligencia: remate móvil --- */
  #report-modal .modal-head { flex-wrap: wrap; row-gap: 8px; }
  #report-modal .modal-head h2 { flex: 1 1 auto; }
  #report-modal .modal-head-actions { order: 3; flex: 1 1 100%; display: flex; gap: 8px; }
  #report-modal .modal-head-actions.hidden { display: none; }
  #report-modal .modal-head-actions .file-btn,
  #report-modal .modal-head-actions .danger-btn {
    flex: 1 1 auto; min-height: 44px; font-size: 14px;
    display: flex; align-items: center; justify-content: center; text-align: center; }
  #report-open { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; font-size: 13px; }
  #report-open.hidden { display: none; }
  #report-modal .modal-body { padding-bottom: env(safe-area-inset-bottom); }
  #report-empty { display: flex; flex: 1 1 auto; align-items: center; justify-content: center;
    color: var(--muted); font-size: 15px; padding: 24px; text-align: center; }
  #report-empty.hidden { display: none; }
  #report-frame { min-height: 60vh; }
}


/* ===== Estado de venta: Próximo lanzamiento (azul) ===== */
.pdot-launch{ background:#3b9bff; box-shadow:0 0 0 3px rgba(59,155,255,.16); animation:pdotPulseBlue 1.7s ease-in-out infinite; }
@keyframes pdotPulseBlue{ 0%,100%{ box-shadow:0 0 0 2px rgba(59,155,255,.10); } 50%{ box-shadow:0 0 0 5px rgba(59,155,255,.28); } }
.sale-launch{ border-color:rgba(59,155,255,.40); }

/* aviso de muestra pequeña en tarjeta DLD */
.dld-warn{ margin-top:8px; font-size:11.5px; color:#f5a623; }

/* zona PropertyFinder en formulario y panel */
.pf-row{ display:flex; gap:8px; align-items:center; }
.pf-row .fp-input{ flex:1; min-width:0; }
.pf-zone-info{ font-size:11px; color:var(--muted); padding:4px 0 0; }

/* ===== Estimaciones del asesor ===== */
.est-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.est-sub{ font-size:11px; color:var(--muted); display:block; margin-bottom:4px; }
.est-pair{ display:flex; gap:6px; }
.proj-est{ display:flex; gap:7px; margin-top:7px; flex-wrap:wrap; }
.proj-est .est-item{ font:600 11px/1 'Manrope',system-ui,sans-serif; padding:4px 9px; border-radius:999px; background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.30); color:var(--gold-soft); }
.proj-est .est-yield{ background:rgba(0,229,255,.07); border-color:rgba(0,229,255,.25); color:#7fe3f2; }
.advisor-est{ margin:12px 18px 0; padding:13px 14px; border:1px solid rgba(212,175,55,.35); border-radius:14px; background:linear-gradient(135deg, rgba(212,175,55,.10), rgba(212,175,55,.03)); }
.ae-head{ font:700 11px/1 'Manrope',system-ui,sans-serif; letter-spacing:.9px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:9px; }
.ae-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; }
.ae-k{ color:var(--muted); }
.ae-v{ font-weight:700; color:var(--ink); }
.ae-note{ margin-top:8px; font-size:10.5px; color:var(--muted); }
@media (max-width:820px){ .est-grid{ grid-template-columns:1fr; } .advisor-est{ margin:12px 14px 0; } }

/* sufijo anual en chips de estimaciones */
.proj-est .est-yr{ font-size:9px; opacity:.72; letter-spacing:.6px; text-transform:uppercase; margin-left:4px; font-weight:700; }

/* =========================================================================
   TEMA ENCLAVE — overrides (navy + bronce + marfil, tipografía geométrica)
   Añadido al final para tener prioridad sobre reglas previas.
   ========================================================================= */
#topbar{
  background: linear-gradient(180deg, rgba(10,25,46,.97), rgba(10,25,46,.88));
  border-bottom: 1px solid var(--line);
}
.brand-text{ text-transform: uppercase; letter-spacing: .14em; font-size: 19px; font-weight: 300; }
.brand-text strong{ color: var(--gold-soft); font-weight: 500; }
.brand-mark{ color: var(--gold); }

/* Segmentados y botones: esquinas sobrias */
.view-toggle{ border-radius: var(--radius-pill); padding: 3px; background: rgba(255,255,255,.05); border-color: var(--line); }
.seg{ border-radius: 3px; letter-spacing: .04em; color: var(--muted); font-size: 12.5px; }
.seg.active{ background: var(--gold); color: var(--navy-text); font-weight: 600; }
.primary-btn{ background: var(--gold); color: var(--navy-text); border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.primary-btn:hover{ background: var(--gold-soft); }
.icon-btn{ background: var(--gold); color: var(--navy-text); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.ghost-btn{ background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-pill); letter-spacing: .05em; }
.ghost-btn:hover{ background: var(--gold-tint); border-color: var(--line); color: var(--gold-soft); }
.search-wrap{ border-radius: var(--radius-pill); border-color: var(--line); background: rgba(255,255,255,.05); }
.badge{ border-radius: var(--radius-pill); border-color: var(--line); color: var(--muted); letter-spacing: .04em; }
.count{ background: var(--gold-tint); color: var(--gold-soft); border-radius: 3px; }

/* Paneles laterales y modales */
.side-panel{ border-radius: var(--radius); border-color: var(--line); }
.side-head h3{ letter-spacing: .12em; text-transform: uppercase; font-size: 15px; }
.modal-card{ border-radius: var(--radius); }
.modal-card h2{ letter-spacing: .1em; }

/* Enlaces en dorado */
a{ color: var(--gold-soft); }
a:hover{ color: var(--gold); }

/* Marcador/atribución más sobrios */
.attribution{ border-radius: 4px; letter-spacing: .04em; }

/* Kicker dorado reutilizable */
.kicker{ font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; color: var(--gold-soft); font-weight: 400; }

/* =========================================================================
   TARJETA FLYER — panel de detalle rediseñado (marfil + navy + bronce)
   ========================================================================= */
#detail-panel.side-panel.right{
  width: 420px; max-width: 94vw;
  background: var(--paper);
  color: var(--navy-text);
  border: 1px solid var(--line);
  padding: 0; overflow: hidden;
}
#detail-panel > .side-head{ display: none; }           /* el hero lleva su propio cierre */
#detail-panel .flyer{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#detail-panel .flyer::-webkit-scrollbar{ width: 8px; }
#detail-panel .flyer::-webkit-scrollbar-thumb{ background: rgba(10,25,46,.18); border-radius: 8px; }

/* HERO */
.fl-hero{ position: relative; min-height: 190px; display: flex; flex-direction: column;
  justify-content: flex-end; background-size: cover; background-position: center;
  background-color: #14294a; }
.fl-hero.no-photo{ background:
  radial-gradient(600px 300px at 70% 8%, #39598a, transparent 60%),
  linear-gradient(160deg, #24466f 0%, #12294a 72%); }
.fl-close{ position: absolute; top: 12px; right: 12px; z-index: 4; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(9,16,28,.5); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 14px; }
.fl-hero-chips{ position: absolute; top: 14px; left: 16px; z-index: 4; display: flex; gap: 8px; }
.fl-chip{ font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px;
  border-radius: 3px; font-weight: 600; }
.fl-chip.phase{ background: rgba(245,242,236,.94); color: var(--navy-text); }
.fl-chip.sale{ background: rgba(10,25,46,.72); color: var(--ink); border: 1px solid var(--line); }
.fl-chip.sale.soldout{ background: var(--danger); color: #fff; }
.fl-chip.sale.selling{ background: var(--ok); color: #06231a; }
.fl-hero-body{ position: relative; z-index: 3; padding: 16px 18px; }
.fl-kicker{ font-family: var(--font-disp); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.fl-title{ font-family: var(--font-disp); font-weight: 300; font-size: 25px; line-height: 1.12; color: #fff; margin: 4px 0 3px; }
.fl-loc{ font-size: 12px; color: rgba(245,242,236,.8); }
.fl-updated{ font-size: 11px; color: rgba(245,242,236,.55); margin-top: 4px; }

/* KEY FACTS */
.fl-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border-bottom: 1px solid var(--line); }
.fl-fact{ background: var(--paper); padding: 13px 16px; }
.fl-fact .l{ font-family: var(--font-disp); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.fl-fact .v{ font-family: var(--font-disp); font-weight: 300; font-size: 21px; color: var(--navy-text); margin-top: 3px; line-height: 1.05; }
.fl-fact .s{ font-size: 11px; color: var(--slate); margin-top: 3px; }

/* SECCIÓN */
.fl-sec{ display: flex; align-items: center; gap: 10px; padding: 18px 18px 12px; }
.fl-sec .fl-line{ width: 22px; height: 1px; background: var(--gold); }
.fl-sec .fl-t{ font-family: var(--font-disp); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy-text); }
.fl-pad{ padding: 0 18px; }

/* ESTRATEGIA */
.fl-strat{ background: var(--navy); color: var(--ink); border-radius: 5px; padding: 16px 18px; }
.fl-strat-h{ font-family: var(--font-disp); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.fl-strat p{ margin: 0; font-size: 13px; line-height: 1.6; color: rgba(245,242,236,.9); white-space: pre-line; }
.fl-est-row{ display: flex; gap: 10px; margin-top: 14px; }
.fl-est{ flex: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 10px 12px; }
.fl-est .ek{ font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,242,236,.6); }
.fl-est .ev{ font-family: var(--font-disp); font-size: 18px; color: var(--gold-soft); margin-top: 4px; }

/* PLAN DE PAGOS */
.fl-plan{ display: flex; gap: 6px; }
.fl-pstep{ flex: 1; text-align: center; }
.fl-pbar{ height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.fl-pbar i{ display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.fl-ppct{ font-family: var(--font-disp); font-size: 16px; color: var(--navy-text); margin-top: 8px; }
.fl-plab{ font-size: 10px; letter-spacing: .04em; color: var(--slate); text-transform: uppercase; margin-top: 2px; }
.fl-plan-more{ margin-top: 14px; background: transparent; border: 1px solid var(--line); color: var(--gold-deep);
  border-radius: 4px; padding: 9px 12px; font-size: 12px; letter-spacing: .05em; width: 100%; }
.fl-plan-more:hover{ background: var(--gold-tint); }

/* UNIDADES / TAGS */
.fl-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.fl-tag{ border: 1px solid var(--line-gold, rgba(139,117,69,.35)); background: var(--gold-tint);
  color: var(--gold-deep); padding: 7px 12px; border-radius: 3px; font-size: 12px; }
.fl-tag.dark{ background: var(--navy); color: var(--ink); border-color: var(--navy); }

/* BROCHURE */
.fl-broc-btn{ width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: var(--ink); border: 0; padding: 14px 16px; border-radius: 4px; }
.fl-broc-btn .lft{ display: flex; align-items: center; gap: 12px; }
.fl-broc-btn .ico{ width: 34px; height: 34px; border: 1px solid var(--line-gold, rgba(183,154,91,.35));
  border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.fl-broc-btn .txt{ display: flex; flex-direction: column; text-align: left; }
.fl-broc-btn .tt{ font-family: var(--font-disp); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.fl-broc-btn .sub{ font-size: 11px; color: rgba(245,242,236,.6); margin-top: 2px; }
.fl-broc-btn .chev{ color: var(--gold-soft); transition: transform .3s; }
.fl-broc-view{ max-height: 0; overflow: hidden; transition: max-height .4s ease;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; }
.fl-broc.open .fl-broc-view{ max-height: 420px; }
.fl-broc.open .fl-broc-btn{ border-radius: 4px 4px 0 0; }
.fl-broc.open .chev{ transform: rotate(180deg); }
.fl-broc-view iframe{ width: 100%; height: 400px; border: 0; background: #fff; }

/* FOTOS */
.fl-gallery{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fl-ph{ aspect-ratio: 1; border-radius: 3px; background-size: cover; background-position: center;
  border: 1px solid var(--line); cursor: pointer; background-color: #14294a; }

/* DOCUMENTOS */
.fl-docs{ display: flex; flex-direction: column; gap: 6px; }
.fl-doc{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; background: #fff; }
.fl-doc:hover{ border-color: var(--gold); }
.fl-doc .di{ font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--gold-deep);
  padding: 4px 7px; border-radius: 3px; }
.fl-doc .di.html{ background: var(--slate); }
.fl-doc .dn{ font-size: 13px; color: var(--navy-text); }

/* MERCADO PROPERTYFINDER */
.fl-market{ background: var(--ivory-2, #EDE9E1); border: 1px solid var(--line); border-radius: 5px; padding: 16px; }
.fl-mkt-title{ font-family: var(--font-disp); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-text); }
.fl-mkt-stat{ margin: 12px 0; display: flex; flex-direction: column; }
.fl-mkt-stat .v{ font-family: var(--font-disp); font-size: 22px; color: var(--navy-text); }
.fl-mkt-stat .e{ font-size: 12px; color: var(--gold-deep); }
.fl-mkt-stat .l{ font-size: 11px; color: var(--slate); margin-top: 2px; }
.fl-mkt-subt{ font-size: 11px; color: var(--slate); margin: 6px 0 12px; }
.fl-mkt-selrow{ display: flex; gap: 8px; margin-bottom: 10px; }
.fl-sel{ flex: 1; border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 9px 10px;
  font-size: 12px; color: var(--navy-text); }
.fl-mkt-btns{ display: flex; gap: 8px; }
.fl-mbtn{ flex: 1; border: 0; padding: 12px; border-radius: 3px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; }
.fl-mbtn.rent{ background: #fff; border: 1px solid var(--navy); color: var(--navy-text); }
.fl-mbtn.sale{ background: var(--gold); color: var(--navy-text); font-weight: 600; }
.fl-mkt-note{ font-size: 10.5px; color: var(--slate); margin-top: 10px; line-height: 1.5; }

.fl-foot-space{ height: 18px; }

/* Pie admin sobre fondo claro */
#detail-panel .side-foot{ background: var(--paper); border-top: 1px solid var(--line); }
#detail-panel .side-foot .ghost-btn{ color: var(--navy-text); border-color: var(--line); }
#detail-panel .side-foot .ghost-btn:hover{ background: var(--gold-tint); color: var(--gold-deep); }

/* =========================================================================
   CORRECCIÓN — capa "glass" (--np-*) a la paleta Enclave + fondo del flyer
   Debe ir al final para ganar a las reglas !important previas.
   ========================================================================= */
:root{
  --np-glass: rgba(10,25,46,.92);        /* paneles/modales: navy translúcido */
  --np-line:  rgba(183,154,91,.22);      /* hairline dorada */
  --np-line2: rgba(183,154,91,.32);
}
/* El flyer (panel de detalle) es tarjeta clara de marfil */
#detail-panel.side-panel.right{
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--navy-text);
}

/* Variables que faltaban usadas por el flyer */
:root{
  --navy: #0A192E;
  --navy-2: #0E223B;
  --ivory: #F5F2EC;
  --ivory-2: #EDE9E1;
  --line-gold: rgba(183,154,91,.35);
}

/* =========================================================================
   INTRO / PORTADA — restyling Enclave (navy + bronce + marfil, Jost/Inter)
   ========================================================================= */
#intro-overlay{ font-family: var(--font-ui); }
#intro-overlay .intro-grad{
  background: linear-gradient(180deg, rgba(10,25,46,.45) 0%, rgba(10,25,46,.18) 30%, rgba(10,25,46,.86) 76%, rgba(10,25,46,.97) 100%);
}
#intro-overlay .intro-word{
  font-family: var(--font-disp); font-weight: 400; letter-spacing: .28em; font-size: 13px; color: var(--ivory);
}
#intro-overlay .intro-lang-btn{ color: rgba(245,242,236,.55); }
#intro-overlay .intro-lang-btn.active{ color: var(--gold-soft); }
#intro-overlay .intro-kicker{
  font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .3em; font-size: 12px;
  color: var(--gold-soft); font-weight: 400; margin-bottom: 18px;
}
#intro-overlay .intro-name{
  font-family: var(--font-disp); font-weight: 200; letter-spacing: .01em; line-height: 1; color: var(--ivory);
}
#intro-overlay .intro-bio{ font-family: var(--font-ui); font-weight: 300; color: rgba(245,242,236,.85); }
#intro-overlay .intro-cta-txt{ font-family: var(--font-disp); letter-spacing: .28em; color: var(--gold-soft); }
#intro-overlay .intro-chevron{ color: var(--gold-soft); }