/* ==========================================================================
   Ficha de propiedad en celular (hasta 650 px):
     1) Orden: foto → datos (recámaras, baños, pisos…) → descripción → mapa
     2) El contacto con el asesor es una barra flotante fija; su formulario se abre en una hoja desde abajo
   En computadora no cambia nada. Se carga DESPUÉS de ficha.css y ficha-ajustes.css.
   ========================================================================== */

/* Fuera del celular, lo nuevo no existe */
.fp-barra, .fp-sheet-fondo, .fp-sheet-cerrar, .fp-sheet-sub{ display:none; }

@media (max-width:650px){

  /* ---------- 1) El orden de las secciones ---------- */
  .fp .shell{ display:flex !important; flex-direction:column; gap:14px; }
  .fp .shell > .left, .fp .shell > .main, .fp .main > .content{ display:contents !important; }   /* sus hijos se acomodan directo en la columna */
  .fp .main > .gallery{ order:1; margin:0 !important; }
  .fp .left > .box:not(.map-box){ order:2; margin:0 !important; }       /* datos: precio, recámaras, baños, pisos, metros, año */
  .fp .content > div{ order:3; min-width:0; margin:0 !important; }      /* pestañas + descripción / amenidades / cercanías */
  .fp .left > .map-box{ order:4; margin:0 !important; }                 /* mapa, hasta el final */

  /* ---------- 2) La barra de contacto flotante ---------- */
  .fp-barra{
    display:flex; align-items:center; gap:10px;
    position:fixed; z-index:40; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    padding:9px 10px 9px 11px; border-radius:32px;
    background:#590059; color:#fff; font-family:Montserrat,Arial,sans-serif; border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 40px -14px rgba(40,0,50,.7), 0 2px 0 rgba(255,255,255,.06) inset;
    transition:transform .3s ease, opacity .25s ease;
  }
  .fp-barra.fp-oculta{ transform:translateY(150%); opacity:0; pointer-events:none; }
  .fp-barra-persona{ display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 auto; }
  .fp-barra-avatar{ flex:none; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; overflow:hidden; }
  .fp-barra-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .fp-barra-avatar svg{ width:24px; height:24px; }
  .fp-barra-texto{ min-width:0; display:block; }
  .fp-barra-texto strong{ display:block; font-size:14.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fp-barra-texto small{ display:block; margin-top:1px; font-size:11.5px; line-height:1.25; color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fp-barra-botones{ display:flex; gap:8px; flex:none; }
  .fp-barra-btn{ width:44px; height:44px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; text-decoration:none; transition:background .2s ease, transform .15s ease; -webkit-tap-highlight-color:transparent; }
  .fp-barra-btn:active{ transform:scale(.94); }
  .fp-barra-btn.wa{ background:#25d366; }
  .fp-barra-btn svg{ width:22px; height:22px; }
  .fp-barra-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
  /* Los colores de la barra no dependen de las reglas generales de la ficha (que pintan los enlaces y botones de morado) */
  .fp-barra, .fp-barra a, .fp-barra button, .fp .fp-barra-btn, .fp-barra-texto strong{ color:#fff !important; }
  .fp-barra-texto small{ color:rgba(255,255,255,.78) !important; }
  .fp-barra a{ text-decoration:none !important; }

  /* que la barra no tape el final de la página: el espacio se le suma al pie de página (con su mismo color) */
  .pub-footer{ padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important; }

  /* ---------- 3) El formulario del asesor: hoja que sube desde abajo ---------- */
  .fp .advisor{
    position:fixed !important; z-index:1010; left:0; right:0; bottom:0; top:auto; margin:0 !important;
    max-height:90vh; max-height:90dvh; overflow-y:auto; overscroll-behavior:contain;
    border-radius:26px 26px 0 0 !important; background:#fff !important; border:0 !important;
    padding:24px 18px calc(22px + env(safe-area-inset-bottom)) !important;
    box-shadow:0 -24px 60px -20px rgba(20,0,30,.55) !important;
    transform:translateY(105%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s;
  }
  .fp .advisor.fp-abierto{ transform:none; visibility:visible; transition:transform .3s ease; }
  .fp .advisor h2{ margin:0 40px 4px 0 !important; font-size:18px !important; }
  .fp-sheet-sub{ display:block; margin:0 0 14px !important; font-size:12px !important; color:#827e99; line-height:1.5 !important; }
  .fp-sheet-sub strong{ color:#20182d; }
  /* el perfil y los botones de llamar / WhatsApp ya están en la barra */
  .fp .advisor .fp-asesor-perfil, .fp .advisor .contact-actions{ display:none !important; }
  .fp .advisor .advisor-form{ margin-top:0 !important; }
  .fp .advisor .advisor-form input, .fp .advisor .advisor-form textarea{ font-size:16px !important; }     /* 16 px evita que el iPhone haga zoom al escribir */

  .fp-sheet-cerrar{ display:grid; place-items:center; position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid #eadfea; background:#fff; color:#20182d; font-size:22px; line-height:1; cursor:pointer; padding:0; }
  .fp-sheet-cerrar:focus-visible{ outline:3px solid #ca3bc5; outline-offset:2px; }

  .fp-sheet-fondo{ display:block; position:fixed; inset:0; z-index:1000; background:rgba(20,8,30,.55); opacity:0; pointer-events:none; transition:opacity .25s ease; }
  .fp-sheet-fondo.fp-abierto{ opacity:1; pointer-events:auto; }
}

@media (max-width:650px) and (prefers-reduced-motion:reduce){
  .fp-barra, .fp .advisor, .fp-sheet-fondo, .fp-barra-btn{ transition:none !important; }
}