/* ══════════════════════════════════════════════════════════════════
   shared/apt-plano.css — Separador SOBRE PLANO, hoja COMPARTIDA
   Aplica el sistema visual de theviewboquete/separador.css, pero con
   los tokens de marca del proyecto (--pj-main / --pj-gold vienen de
   projects.brand_main / brand_gold, inyectados por index.php).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --pj-main:  #1F3D2B;          /* index.php lo sobreescribe desde la BD */
  --pj-gold:  #C8A96E;

  --sp-secondary:  #F7CA77;
  --sp-lightgreen: #277C6A;
  --sp-offwhite:   #EFEFEF;
  --sp-surface:    #FFFFFF;
  --sp-border:     #D8D8D0;
  --sp-text:       #1A2A24;
  --sp-text-muted: #5E6E68;
  --sp-text-muted-light: #B4C3BD;

  /* Estados de /api/apartments.php. `hidden` y `construction` no se pintan. */
  --st-avail:      #277C6A;   /* disponible */
  --st-immediate:  #3AAB8E;   /* entrega inmediata */
  --st-reserved:   #7D7D7D;   /* separado — gris fuerte */
  --st-sold:       #565656;   /* vendido — un paso más oscuro */
  --st-stroke:     #FFFFFF;

  /* Capas del plano. Mecánica de theviewboquete: el lote se rellena en gris
     claro (calles, aceras y estacionamientos) y el verde se pinta encima. */
  --st-calle:    #EAEAEA;
  --st-calle-ln: #C6C6C0;
  --st-green-area:#2F4A44;
  --pl-papel:    #FFFFFF;
  --pl-huella:   #F4F2EC;
  --pl-muro:     #3A352C;
  --pl-mob:      #B9B3A6;
}

/* Reset base. OJO: sin height:100% en html/body — el alto de la vista lo da
   .sep-section (100vh a pantalla completa). Así esta misma hoja se puede
   embeber contenida dentro del admin sin ocupar todo el viewport. */
html, body { margin:0; padding:0; width:100%; background:#FFF; }
.sep-section *, .sep-section *::before, .sep-section *::after,
.modal-ov *,    .modal-ov *::before,    .modal-ov *::after { box-sizing:border-box; margin:0; padding:0; }

.sep-section {
  position:relative; font-family:'Inter', Arial, sans-serif;
  background:#FFF; color:var(--sp-text); width:100%; height:100vh; overflow:hidden;
}

.overlay-content{
    position:relative;
}

.overlay-home{
    position:absolute;
    top:18px;
    left:18px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    background:rgba(255,255,255,.88);
    border:1px solid rgba(200,169,110,.35);

    color:var(--pj-main);
    text-decoration:none;
    font-weight:700;

    box-shadow:0 8px 24px rgba(0,0,0,.12);
    backdrop-filter:blur(10px);

    transition:.25s;
    z-index:50;
}

.overlay-home:hover{
    transform:translateY(-2px);
    background:#fff;
}

.overlay-home svg{
    width:18px;
    height:18px;
}

/* ── Lienzo ─────────────────────────────────────────────────────── */
.map-wrap { position:absolute; inset:0; z-index:1; background:var(--pl-papel); overflow:hidden; }
.pl-nucleo-hint { fill:#EDEAE1; pointer-events:none; }
.svg-outer { width:100%; height:100%; overflow:hidden; -webkit-overflow-scrolling:touch;
             cursor:grab; touch-action:none; user-select:none; }
.svg-outer.dragging { cursor:grabbing; }
.svg-outer svg { display:block; width:100%; height:100%;
                 transition:transform .25s cubic-bezier(.22,1,.36,1); transform-origin:0 0; }
.svg-outer.no-anim svg { transition:none; will-change:transform; }

/* Capas del conjunto (decorativas, sin eventos) */
.pl-base   { fill:var(--st-calle); stroke:none; pointer-events:none; }
.pl-verde  { fill:var(--st-green-area); fill-rule:evenodd; pointer-events:none; }
.pl-tfill  { fill:var(--st-calle); fill-rule:evenodd; pointer-events:none; }
.pl-tpath  { fill:none; stroke:var(--st-calle-ln); stroke-width:.42; stroke-linejoin:round;
             pointer-events:none; }
/* El núcleo (escalera, ascensor, zona de servicios) y la huella van en el
   mismo gris de las calles: sobre blanco los muros —que son blancos para
   leerse encima del color— desaparecían. */
.pl-huella { fill:#E4E4E0; stroke:#B5AEA1; stroke-width:.9; pointer-events:none; }
.pl-muro   { fill:none; stroke:rgba(255,255,255,.9); stroke-width:1; pointer-events:none; }
.pl-traza  { fill:none; stroke:rgba(255,255,255,.62); stroke-width:.32; pointer-events:none; }
.pl-mob    { fill:none; stroke:rgba(255,255,255,.5); stroke-width:.26; pointer-events:none; }

/* Rótulos del plano — mismo tratamiento que .street-label de theviewboquete */
.map-label {
  font-family:'Barlow Condensed', sans-serif; font-weight:700; letter-spacing:.5px;
  fill:var(--pj-main); paint-order:stroke; stroke:#FFF; stroke-width:2.4px;
  stroke-linejoin:round; text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; text-transform:uppercase;
}
.map-label.via  { letter-spacing:1.6px; }
.map-label.dir  { fill:var(--sp-text-muted); font-weight:600; letter-spacing:1px; }
.map-label.edif { fill:var(--pj-main); letter-spacing:1.4px; stroke-width:3px; }
.map-label.est  { fill:var(--sp-text-muted); font-weight:600; stroke-width:1.8px; }
.map-label.amen { fill:var(--pj-main); font-weight:600; letter-spacing:1px; }
.map-label.verde{ fill:var(--st-green-area); font-weight:600; letter-spacing:1px; }
.map-label.serv { fill:var(--sp-text-muted); font-weight:600; stroke-width:1.8px; }
.map-label.acc  { fill:var(--sp-text-muted); font-weight:700; letter-spacing:1.2px; }

/* ── Apartamentos (equivalente a .lp de theviewboquete) ─────────── */
.ap { cursor:pointer; stroke-width:.6; stroke:var(--st-stroke);
      transition:fill .16s ease, filter .16s ease, opacity .18s ease; }
.ap.avail        { fill:var(--st-avail); }
.ap.avail:hover  { fill:var(--pj-gold); }
.ap.immediate    { fill:var(--st-immediate); }
.ap.immediate:hover { fill:var(--pj-gold); }
.ap.reserved     { fill:var(--st-reserved); cursor:not-allowed; }
.ap.sold         { fill:var(--st-sold);     cursor:not-allowed; }
.ap.nodata       { fill:#D9D6CC; cursor:not-allowed; }
.ap.sel {
  fill:var(--sp-secondary) !important; stroke:#FFF !important; stroke-width:.8 !important;
  filter:drop-shadow(0 0 7px rgba(247,202,119,.65));
}
.ap.dimmed { opacity:.16; cursor:default !important; }
.ap:focus-visible { outline:none; stroke:var(--sp-secondary); stroke-width:1.6; }

.al { font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; fill:#FFF;
      pointer-events:none; text-anchor:middle; dominant-baseline:middle; letter-spacing:.4px;
      paint-order:stroke; stroke:rgba(0,0,0,.3); stroke-width:2px; stroke-linejoin:round;
      transition:opacity .18s ease; }
.al-sub { font-family:'Barlow Condensed',sans-serif; font-size:5.5px; font-weight:600;
          fill:#FFF; letter-spacing:.2px; text-anchor:middle;
          paint-order:stroke; stroke:rgba(0,0,0,.28); stroke-width:1.4px; stroke-linejoin:round; }
.al.dimmed, .al-sub.dimmed { opacity:.16; }
.ap.sel ~ .al { fill:var(--pj-main); }

/* Núcleo (escalera/ascensor): no es unidad vendible */
.pl-nucleo { fill:#F2EFE6; stroke:#B9B0A0; stroke-width:.5; pointer-events:none; }

/* ── Overlay superior ───────────────────────────────────────────── */
.overlay-wrap { position:absolute; top:0; left:0; right:0; z-index:20;
                display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.overlay-content {
  position:relative; width:100%; pointer-events:auto;
  background:linear-gradient(155deg,#254A31 0%,var(--pj-main) 52%,#15301F 100%);
  border-bottom:1px solid rgba(200,169,110,.30);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  padding:15px 36px; max-height:720px; overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease,
             padding .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.overlay-wrap.collapsed .overlay-content {
  max-height:0; opacity:0; padding-top:0; padding-bottom:0;
  transform:translateY(-6px); border-bottom-color:transparent;
}
/* Marca de agua del header: el logo de fondo + líneas fluidas de marca */
.sep-wm { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sep-wm-logo { position:absolute; right:-46px; top:50%; transform:translateY(-50%);
               height:230%; width:auto; opacity:.06; filter:brightness(0) invert(1); }
.sep-wm-lines { position:absolute; inset:0; width:100%; height:100%; opacity:.16; }
.sep-wm-lines path { stroke:var(--pj-gold); }

.sep-header { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
              margin:0 auto 10px; flex-wrap:wrap; max-width:1280px; width:100%; }
.sep-head-row { display:flex; align-items:center; gap:14px; }
.sep-logo { flex:0 0 auto; width:58px; height:58px; display:block; }
.sep-eyebrow { font-family:'Barlow Condensed',sans-serif; font-size:.8rem; font-weight:600;
               letter-spacing:3px; text-transform:uppercase; color:var(--pj-gold);
               margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.sep-eyebrow::before { content:''; display:inline-block; width:24px; height:2px;
                       background:var(--pj-gold); flex-shrink:0; }
.sep-title { font-family:'Barlow Condensed',sans-serif; font-size:2.2rem; font-weight:700;
             text-transform:uppercase; letter-spacing:1px; color:#fff; line-height:1.05; }
.sep-title em { color:var(--pj-gold); font-style:normal; }
.sep-sub { font-size:12px; color:rgba(255,255,255,.72); margin-top:6px; line-height:1.5; }

.legend { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.leg-item { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.26); padding:7px 14px; border-radius:100px;
            font-size:11px; font-weight:600; text-transform:uppercase; color:rgba(255,255,255,.92);
            white-space:nowrap; cursor:pointer; user-select:none;
            transition:background .18s, border-color .18s, color .18s, transform .18s; }
.leg-item:hover { border-color:var(--pj-gold); background:rgba(255,255,255,.14); transform:translateY(-1px); }
.leg-item.active { background:var(--sp-offwhite); border-color:var(--sp-offwhite); color:var(--pj-main); }
.leg-item.active .leg-dot { box-shadow:0 0 0 2px rgba(247,202,119,.55); }
.leg-item:focus-visible { outline:2px solid var(--pj-gold); outline-offset:2px; }
.leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:box-shadow .18s; }
.leg-all .leg-dot { background:var(--pj-gold); }
.leg-count { opacity:.6; font-variant-numeric:tabular-nums; }

.plan-bar { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px;
            margin:12px auto 0; flex-wrap:wrap; max-width:1280px; width:100%; }
.plan-bar-label { font-family:'Barlow Condensed',sans-serif; font-size:.9rem; letter-spacing:2px;
                  text-transform:uppercase; color:rgba(255,255,255,.6); }
.plan-bar-label strong { color:var(--pj-gold); font-weight:700; }

/* Selector de nivel — mismo lenguaje que la leyenda */
.niv-sel { display:inline-flex; align-items:center; gap:6px; }
.niv-tit { font-family:'Barlow Condensed',sans-serif; font-size:.8rem; letter-spacing:2px;
           text-transform:uppercase; color:rgba(255,255,255,.6); margin-right:2px; }
.niv-btn { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
           letter-spacing:1.2px; text-transform:uppercase; background:rgba(255,255,255,.08);
           border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.92); padding:7px 16px;
           border-radius:100px; cursor:pointer;
           transition:background .18s, border-color .18s, color .18s, transform .18s; }
.niv-btn:hover { border-color:var(--pj-gold); background:rgba(255,255,255,.14); transform:translateY(-1px); }
.niv-btn[aria-pressed="true"] { background:var(--sp-offwhite); border-color:var(--sp-offwhite); color:var(--pj-main); }
.niv-btn:focus-visible { outline:2px solid var(--pj-gold); outline-offset:2px; }
.niv-btn .niv-n { display:block; font-size:9.5px; font-weight:500; letter-spacing:.6px;
                  opacity:.65; margin-top:-2px; }

/* ── Zoom + ocultar ─────────────────────────────────────────────── */
.toggle-tab { pointer-events:none; padding:10px 16px 0; display:flex; justify-content:flex-start;
              align-items:center; gap:10px; width:100%; }
.toggle-tab .zoom-ctrl { pointer-events:auto; position:static; flex:none; }
.zoom-ctrl { display:inline-flex; align-items:center; background:var(--sp-surface);
             border:1px solid var(--sp-border); border-radius:100px; padding:4px; gap:4px;
             box-shadow:0 2px 8px rgba(31,61,43,.04); }
.zoom-btn { width:34px; height:34px; border:none; background:transparent; border-radius:50%;
            cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
            color:var(--pj-main); transition:background .15s, color .15s, transform .15s; }
.zoom-btn:hover { background:var(--pj-gold); color:#FFF; }
.zoom-btn:active { transform:scale(.92); }
.zoom-btn:focus-visible { outline:2px solid var(--pj-gold); outline-offset:1px; }
.zoom-btn svg { width:16px; height:16px; }
.zoom-divider { width:1px; height:22px; background:var(--sp-border); }
.zoom-readout { font-weight:700; font-size:13px; color:var(--pj-main); padding:0 10px;
                min-width:50px; text-align:center; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.toggle-btn { pointer-events:auto; flex:none; align-items:center; gap:8px;
              background:var(--pj-main); color:#FFF; border:none; padding:9px 20px;
              border-radius:100px; font-size:12.5px; font-weight:700; letter-spacing:1.8px;
              text-transform:uppercase; cursor:pointer;
              box-shadow:0 4px 16px rgba(31,61,43,.28), 0 0 0 1px rgba(247,202,119,.18);
              transition:background .2s, transform .2s, box-shadow .2s; }
.toggle-btn:hover { background:var(--sp-lightgreen); transform:translateY(-1px); }
.toggle-icon { transform:translateY(2px) rotate(0deg); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.overlay-wrap.collapsed .toggle-icon { transform:translateY(2px) rotate(180deg); }

/* Volver al separador de rejilla (index.php sin ?vista) */
.vista-btn { pointer-events:auto; flex:none; display:inline-flex; align-items:center; gap:7px;
             background:var(--sp-surface); color:var(--pj-main); text-decoration:none;
             border:1px solid var(--sp-border); padding:9px 16px; border-radius:100px;
             font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
             white-space:nowrap; box-shadow:0 2px 8px rgba(31,61,43,.06);
             transition:border-color .2s, color .2s, transform .2s; }
.vista-btn:hover { border-color:var(--pj-gold); color:var(--pj-gold); transform:translateY(-1px); }
.vista-btn:focus-visible { outline:2px solid var(--pj-gold); outline-offset:2px; }
@media (max-width:600px){ .vista-btn { padding:8px 12px; font-size:11px; } }

/* ── Panel inferior de unidad ───────────────────────────────────── */
.lot-panel {
  display:none; position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:15; width:calc(100% - 32px); max-width:760px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(216,216,208,.6); border-left:4px solid var(--pj-gold);
  border-radius:10px; padding:18px 24px; align-items:center; gap:20px; flex-wrap:wrap;
  animation:panelIn .32s cubic-bezier(.22,1,.36,1); box-shadow:0 12px 36px rgba(31,61,43,.18);
}
.lot-panel.open { display:flex; }
@keyframes panelIn { from{opacity:0; transform:translate(-50%,16px);} to{opacity:1; transform:translate(-50%,0);} }
.lp-close { position:absolute; top:8px; right:10px; background:transparent; border:none;
            color:var(--sp-text-muted); cursor:pointer; font-size:16px; width:26px; height:26px;
            border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
            transition:background .15s, color .15s, transform .15s; }
.lp-close:hover { background:var(--sp-offwhite); color:var(--pj-main); transform:rotate(90deg); }
.lp-num { font-family:'Barlow Condensed',sans-serif; font-size:44px; font-weight:700;
          color:var(--pj-main); line-height:1; letter-spacing:-1px; min-width:70px; flex-shrink:0; }
.lp-div { width:1px; height:48px; background:var(--sp-border); flex-shrink:0; }
.lp-info { flex:1; min-width:180px; }
.lp-tag { display:inline-block; font-family:'Barlow Condensed',sans-serif; font-size:11px;
          font-weight:700; letter-spacing:1.8px; text-transform:uppercase; padding:4px 13px;
          border-radius:100px; margin-bottom:6px; }
.lp-tag.avail        { background:rgba(39,124,106,.12);  color:var(--sp-lightgreen); }
.lp-tag.immediate    { background:rgba(58,171,142,.14);  color:#23856B; }
.lp-tag.reserved     { background:rgba(125,125,125,.18); color:#5E6E68; }
.lp-tag.sold         { background:rgba(86,86,86,.18);    color:#4D4D4D; }
.lp-info h4 { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:600;
              text-transform:uppercase; letter-spacing:.5px; color:var(--pj-main); margin-bottom:2px; }
.lp-info p { font-size:15px; color:var(--sp-text-muted); }
.lp-actions { display:flex; gap:8px; flex-wrap:wrap; }
.lp-wa { display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#FFF;
         font-weight:700; font-size:15px; padding:12px 22px; border-radius:100px; border:none;
         cursor:pointer; text-decoration:none; white-space:nowrap;
         transition:background .2s, transform .2s, box-shadow .2s;
         box-shadow:0 4px 14px rgba(37,211,102,.26); }
.lp-wa:hover { background:#1EBF5A; transform:translateY(-2px); }
.lp-wa svg { width:18px; height:18px; }
.lp-more { display:inline-flex; align-items:center; gap:8px; background:var(--pj-main); color:#FFF;
           font-weight:700; font-size:15px; padding:12px 22px; border-radius:100px; border:none;
           cursor:pointer; white-space:nowrap; text-decoration:none;
           transition:background .2s, transform .2s; }
.lp-more:hover { background:var(--sp-lightgreen); transform:translateY(-2px); }

/* ── Modal de detalle ───────────────────────────────────────────────
   Tarjeta angosta con blur alrededor, igual que el modal de lote de
   theviewboquete: cabecera oscura + borde dorado, cuerpo offwhite con
   tarjetas de dato, chips y los dos CTA.
   ──────────────────────────────────────────────────────────────────── */
.modal-ov { display:none; position:fixed; inset:0; background:rgba(31,61,43,.62);
            backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
            z-index:999; align-items:center; justify-content:center; padding:20px; }
.modal-ov.open { display:flex; }
.modal-card { background:var(--sp-surface); border-radius:12px; max-width:400px; width:100%;
              overflow:hidden; position:relative; animation:modalIn .26s cubic-bezier(.22,1,.36,1);
              box-shadow:0 24px 60px rgba(0,0,0,.22); max-height:92vh;
              display:flex; flex-direction:column; }
@keyframes modalIn { from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:none;} }
.modal-head { background:var(--pj-main); padding:26px 28px 22px; border-bottom:3px solid var(--pj-gold);
              position:relative; flex-shrink:0; }
.modal-eyebrow { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:600;
                 letter-spacing:2.5px; text-transform:uppercase; color:rgba(247,202,119,.72);
                 margin-bottom:4px; }
.modal-title { display:flex; align-items:baseline; flex-wrap:wrap;
               column-gap:12px; row-gap:2px; margin-bottom:14px; }
.modal-kicker { font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600;
                line-height:1; letter-spacing:.4px; text-transform:uppercase;
                color:rgba(255,255,255,.82); }
.modal-num { font-family:'Barlow Condensed',sans-serif; font-size:54px; font-weight:700; color:#FFF;
             line-height:.9; letter-spacing:-1px; }
.modal-tag { display:inline-block; font-family:'Barlow Condensed',sans-serif; font-size:11px;
             font-weight:700; letter-spacing:1.8px; text-transform:uppercase; padding:5px 14px;
             border-radius:100px; }
.modal-tag.avail     { background:var(--sp-secondary); color:var(--pj-main); }
.modal-tag.immediate { background:#3AAB8E; color:#FFF; }
.modal-tag.reserved  { background:#7D7D7D; color:#FFF; }
.modal-tag.sold      { background:#565656; color:#FFF; }
.modal-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.1);
               border:1px solid rgba(247,202,119,.3); border-radius:50%; width:32px; height:32px;
               display:flex; align-items:center; justify-content:center; cursor:pointer;
               color:rgba(255,255,255,.8); font-size:14px;
               transition:background .18s, color .18s, transform .18s; }
.modal-close:hover { background:var(--sp-secondary); color:var(--pj-main);
                     border-color:var(--sp-secondary); transform:rotate(90deg); }
.modal-body { padding:22px 28px 26px; background:var(--sp-offwhite); overflow-y:auto; }

/* ── Visor del modal: plano + galería de fotos ─────────────────────────
   El plano (modelo-N.png) se ve completo (contain) sobre fondo claro; las
   fotos llenan el marco (cover). Las miniaturas van debajo; si alguna imagen
   falta, su miniatura se oculta sola sin dejar hueco. */
.modal-gallery { margin-bottom:16px; }
.modal-stage { width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden;
               background:var(--pj-main); border:1px solid var(--sp-border);
               display:flex; align-items:center; justify-content:center; position:relative; }
.modal-stage img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-stage.is-plan { background:var(--sp-surface); }
.modal-stage.is-plan img { object-fit:contain; padding:8px; }
.modal-stage.no-image img { display:none; }
.modal-stage .ph { display:none; font-size:12.5px; color:var(--sp-text-muted-light); }
.modal-stage.no-image .ph { display:block; }

.modal-thumbs { display:flex; gap:8px; margin-top:10px; }
.modal-thumbs .mt { flex:1 1 0; min-width:0; aspect-ratio:4/3; border-radius:8px;
                    overflow:hidden; border:1.5px solid var(--sp-border); background:var(--sp-surface);
                    cursor:pointer; padding:0; position:relative; transition:border-color .15s, transform .15s; }
.modal-thumbs .mt img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-thumbs .mt span { position:absolute; left:0; right:0; bottom:0; font-size:9.5px;
                         font-weight:600; color:#fff; text-align:center; padding:8px 2px 3px;
                         background:linear-gradient(180deg,transparent,rgba(26,42,36,.72)); }
.modal-thumbs .mt:hover { transform:translateY(-1px); border-color:var(--sp-text-muted-light); }
.modal-thumbs .mt.active { border-color:var(--pj-main); }
.modal-thumbs .mt[data-i="0"] span { background:linear-gradient(180deg,transparent,rgba(31,61,43,.82)); }


.modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.modal-stats.dos { grid-template-columns:repeat(2,1fr); margin-bottom:18px; }
.modal-stat { background:var(--sp-surface); border-radius:8px; padding:12px 14px;
              border-bottom:2px solid var(--pj-gold); }
.modal-stat .s-label { font-family:'Barlow Condensed',sans-serif; font-size:10.5px; font-weight:700;
                       letter-spacing:1.3px; text-transform:uppercase; color:var(--sp-text-muted);
                       margin-bottom:5px; line-height:1.2; }
.modal-stat .s-value { font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:700;
                       color:var(--pj-main); line-height:1.1; white-space:nowrap; }
.modal-stat .s-value small { font-size:13px; font-weight:600; }
.modal-stat .s-value.libre { white-space:normal; font-size:15px; line-height:1.25; }

.models-heading { font-family:'Barlow Condensed',sans-serif; font-size:11.5px; letter-spacing:1px;
                  text-transform:uppercase; color:var(--sp-text-muted); margin-bottom:6px; font-weight:600; }
.models-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.model-chip { display:inline-block; font-size:12px; font-weight:600; background:rgba(39,124,106,.10);
              color:var(--sp-lightgreen); padding:4px 10px; border-radius:100px; line-height:1.4; }

.modal-cta-group { display:flex; flex-direction:column; gap:10px; width:100%; }
.modal-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
             font-weight:700; font-size:15px; padding:14px; border-radius:100px; border:none;
             cursor:pointer; text-decoration:none;
             transition:background .2s, transform .2s, box-shadow .2s, color .2s; }
.modal-cta svg { width:20px; height:20px; flex:none; }
.modal-cta.cta-wa { background:#25D366; color:#FFF; box-shadow:0 4px 16px rgba(37,211,102,.28); }
.modal-cta.cta-wa:hover { background:#1EBF5A; transform:translateY(-2px); }
.modal-cta.cta-form { background:var(--pj-main); color:#FFF; box-shadow:0 4px 16px rgba(31,61,43,.22); }
.modal-cta.cta-form:hover { background:var(--sp-lightgreen); transform:translateY(-2px); }
.modal-note { font-size:13px; color:var(--sp-text-muted); text-align:center; line-height:1.55; margin-top:14px; }
.modal-note strong { color:var(--pj-main); font-weight:600; }

/* ── Carga / error ──────────────────────────────────────────────── */
.sep-load { position:absolute; inset:0; z-index:40; background:#FFF; display:flex;
            flex-direction:column; align-items:center; justify-content:center; gap:14px;
            transition:opacity .4s ease; }
.sep-load.done { opacity:0; pointer-events:none; }
.sep-load .t { font-family:'Barlow Condensed',sans-serif; font-size:1.4rem; font-weight:700;
               letter-spacing:3px; text-transform:uppercase; color:var(--pj-main); }
.sep-load .bar { width:180px; height:2px; background:var(--sp-border); overflow:hidden; border-radius:2px; }
.sep-load .bar i { display:block; height:100%; width:40%; background:var(--pj-gold);
                   animation:slide 1.1s ease-in-out infinite; }
@keyframes slide { 0%{transform:translateX(-100%);} 100%{transform:translateX(350%);} }
.sep-err { color:#A33; font-size:14px; text-align:center; padding:24px; }

@media (max-width:768px) {
  .overlay-content { padding:14px 16px; }
  .sep-header { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .sep-title  { font-size:20px; }
  .plan-bar   { flex-direction:column; align-items:flex-start; gap:10px; }
  .lot-panel  { padding:16px 18px; gap:14px; bottom:14px; width:calc(100% - 20px); }
  .lp-num     { font-size:36px; min-width:56px; }
  .lp-div     { display:none; }
  .lp-actions { width:100%; }
  .lp-wa, .lp-more { flex:1; justify-content:center; font-size:14px; padding:11px 16px; }
  .modal-num    { font-size:42px; }
  .modal-kicker { font-size:19px; }
  .modal-title  { column-gap:9px; }
  .modal-thumbs .mt span { font-size:8.5px; }
  .toggle-btn { font-size:11.5px; padding:8px 16px; }
}
@media only screen and (max-width:630px) { .leg-item { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ════════════════════════════════════════════════════════════════════
   Añadidos de SHANGRI-LA. Van AL FINAL y no tocan nada de arriba: la hoja
   sigue siendo la misma que la de PH Volcancito, así que si el sistema
   visual cambia se puede volver a copiar encima y solo se revisa esto.

   El conjunto pide cuatro grises que se distingan de un vistazo: asfalto,
   acera, predio (pavimento y estacionamiento) y huella del edificio. La
   huella tiene que ser la más OSCURA de las cuatro: los muros van en blanco
   translúcido y sobre un gris claro desaparecen. Ese es el motivo de todo
   lo que sigue, no el gusto.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --st-asfalto:  #D9D8D3;   /* rodadura */
  --st-acera:    #E9E8E3;   /* acera y grama, entre bordillo y lindero */
  --pl-predio:   #E6E1D2;   /* el predio: pavimento, estacionamiento, patio */
  --pl-huella:   #DDD8CC;   /* huella del edificio */
  --pl-huella-ln:#B9B1A0;
  --st-agua:     #8CBFCE;   /* piscina */
}

.pl-calzada { fill: var(--st-asfalto); stroke: none; pointer-events: none; }
.pl-base    { fill: var(--st-acera);   stroke: none; pointer-events: none; }
.pl-base + .pl-base { fill: var(--pl-predio); }   /* el 2º .pl-base es el predio */
.pl-agua    { fill: var(--st-agua); stroke: #FFF; stroke-width: .6; pointer-events: none; }
.pl-tpath   { fill: none; stroke: #C9C7BE; stroke-width: .4;
              stroke-linejoin: round; pointer-events: none; }
.pl-huella  { fill: var(--pl-huella); stroke: var(--pl-huella-ln);
              stroke-width: .8; pointer-events: none; }

/* Rótulos propios de este conjunto. */
.map-label.amen  { fill: var(--pj-main); letter-spacing: 1.4px; stroke-width: 2.8px; }
.map-label.acc   { fill: #8A6D2F; letter-spacing: 1.6px; stroke-width: 2.6px; }

/* El número del apartamento es lo que se compra: tiene que leerse de un
   vistazo dentro de una franja de 4.15 m (41 unidades de ancho). */
.al     { font-size: 13px; letter-spacing: .5px; }
.al-sub { font-size: 7px; letter-spacing: .2px; opacity: .95; }

/* ── Dos correcciones sobre la hoja base ───────────────────────────────
   1. `.ap.sel ~ .al { fill: var(--pj-main) }` (línea ~108): el combinador
      `~` alcanza a TODOS los rótulos posteriores, y plano.js los añade al
      final del SVG — así que al seleccionar un apartamento se volvían verde
      oscuro los diez, ilegibles sobre el verde de "disponible". plano.js ya
      pinta el activo con estilo EN LÍNEA (que gana a la hoja), de modo que
      aquí basta con devolverle el blanco al resto.
      → El mismo fallo está en el separador de PH Volcancito.
   2. `.map-wrap` ocupaba todo el alto y la cabecera le tapaba la barra
      norte. El hueco lo calcula plano.js (`ajustarMarco`), porque la
      cabecera mide ~130 px en escritorio y ~330 apilada en móvil. Aquí solo
      va la transición. */
.ap.sel ~ .al,
.ap.sel ~ .al-sub { fill: #FFF; }

.map-wrap { transition: padding .3s ease; }
@media (prefers-reduced-motion: reduce) { .map-wrap { transition: none; } }

/* Halo un punto más fuerte: el número se lee sobre verde, sobre gris de
   "vendido" y sobre el mobiliario blanco de la planta. */
.al     { stroke: rgba(20,32,26,.42); stroke-width: 2.4px; }
.al-sub { stroke: rgba(20,32,26,.38); stroke-width: 1.5px; }

/* La jardinera del patio (46 m², con su árbol) es la única zona verde que el
   plano delimita. Va más clara que el --st-green-area de la referencia: allí
   el verde oscuro son manzanas enteras, aquí es un macizo de 9 x 5 m. */
.pl-verde { fill: #4A6B52; fill-rule: evenodd; stroke: none; pointer-events: none; }

/* La copa del árbol del patio. Va como MANCHA, no como 19.933 ramitas: el
   bloque RPC de Revit dibuja cada rama y a 1:200 no se ve una rama, se ve una
   copa — 29 puntos hacen el mismo dibujo y pesan 100 KB menos. Se pinta un
   punto más viva que el macizo para que se despegue de la jardinera. */
.pl-arbol { fill: #5C8560; stroke: #43614A; stroke-width: .6;
            stroke-linejoin: round; pointer-events: none; }

/* ── Césped y pavimento ───────────────────────────────────────────────
   El render del arquitecto manda: césped, caminitos de losas y una
   plataforma central de hormigón. Lo que más contrasta ahí es pavimento
   contra césped, así que aquí igual.

   El césped lleva `fill-rule: evenodd` PORQUE LO NECESITA: las losas de los
   caminitos son huecos de su path. Sin evenodd, el verde se las come. */
:root { --st-pav: #E6E1D2; }

.pl-verde { fill: #e4ede1; fill-rule: evenodd; stroke: none; pointer-events: none; }
.pl-pav   { fill: var(--st-pav); stroke: #CFC9B6; stroke-width: .35;
            stroke-linejoin: round; pointer-events: none; }

/* ── Estacionamiento y el carro ───────────────────────────────────────
   El parking es media parcela y se veía como una mancha plana. Va en gris de
   calle (es rodadura, no jardín) y su linework va más oscuro que el resto:
   las plazas en batería, los topes de rueda y los bolardos son detalle que
   vende — hacen entender de un vistazo que ahí caben 20 coches.

   Y el carro va en ROJO PURO. Es la única nota de color del plano, y por eso
   funciona: da la escala de un golpe. Al lado, esas rayas se leen como plazas
   sin necesidad de leer el rótulo. */
:root {
  /* El parking es RODADURA, igual que la calle, así que lleva su mismo gris.
     Lo que los separa en el dibujo es la acera, que va más clara — y eso es
     exactamente lo que pasa en la realidad. La escala completa, de claro a
     oscuro:
        predio/patio  #F1EFE8   acera  #E9E8E3   pavimento  #E6E1D2
        huella        #DDD8CC   parking #DAD8D1  calle      #D9D8D3          */
  --st-park:    #DAD8D1;
  --st-park-ln: #78746A;   /* casi negro: las plazas se tienen que contar */
  --st-carro:   #2b1313;
}

.pl-park   { fill: var(--st-park); stroke: none; pointer-events: none; }
.pl-parkln { fill: none; stroke: var(--st-park-ln); stroke-width: .55;
             stroke-linejoin: round; stroke-linecap: round; opacity: .82;
             pointer-events: none; }
.pl-carro  { fill: var(--st-carro); stroke: #8E1418; stroke-width: .5;
             stroke-linejoin: round; pointer-events: none; }
.pl-carro-d{ fill: none; stroke: rgba(255,255,255,.72); stroke-width: .32;
             stroke-linejoin: round; pointer-events: none; }