/* BAIREN · Portal · Ajustes de tacto (25/10/2026), con el criterio de Emil Kowalski: la misma página, pero se siente mejor
   al tocarla. Va al final de los CSS de cada página. En reposo no cambia nada (colores, letras, medidas, sombras, textos):
   solo cómo responde al toque y cómo entran y salen las cosas.
   Reglas: curvas propias (nada de ease-in), interfaz en menos de 300 ms, la salida más corta que la entrada, solo
   transform y opacity, transiciones (que se pueden interrumpir) para lo que se abre y se cierra seguido, y con
   "reducir movimiento" pedido, sin desplazamientos.
   Junto con esto: el hover de todos los CSS quedó adentro de @media(hover:hover) and (pointer:fine), así en el celular
   no queda pegado después de tocar (en la compu es idéntico), y js/bairen-motion.js hunde lo que se aprieta a .97. */

/* ── Las curvas ── */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);        /* entrar, salir y responder: arranca rápido y frena suave */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);    /* algo que ya está en pantalla y se mueve de lugar */
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);     /* hojas que suben desde abajo, como en iOS */
  /* La curva de la casa (.22,1,.36,1) escrita de cuatro maneras: todas apuntan a la misma, que es casi igual */
  --t-curva:var(--ease-out);--p-expo:var(--ease-out);--ease:var(--ease-out);--ease-snap:var(--ease-out);
}

/* ── El toque ──
   Sin el gris del navegador al tocar (el foco con teclado, :focus-visible, sigue igual). */
html{-webkit-tap-highlight-color:transparent}

/* Lo que se aprieta se hunde. En las páginas con js/bairen-motion.js lo hace el script (espera 60 ms con el dedo para no
   hundir nada si empieza un desplazamiento) y marca <html class="bp-toque">. Donde no está (reporte, gestión, reseñas),
   lo hace este :active. Va sobre la propiedad scale, no sobre transform: así no pisa a los que ya usan transform para
   ubicarse (el botón flotante de Ver mapa, las flechas del visor) ni a los que la animan. */
@media(prefers-reduced-motion:no-preference){
  html:not(.bp-toque) :is(.p-btn,.pp-btn,.p-fbtn,.mc-btn,.mc-chip,.p-chip,.p-icon-btn,.tj-fav,.p-pill,.p-tab,.soc,.p-quien-op,.burger):active{scale:.97}
  html:not(.bp-toque) :is(.prop-card,.pp-caja):active{scale:.985}
  html:not(.bp-toque) .pp-btn{transition:scale .16s var(--ease-out)}
}

/* ── El menú del celular: baja en 300 ms con la curva de iOS y se va en 200; el fondo, a la par ── */
.mobile-menu{transition:transform .2s var(--ease-out),visibility 0s linear .2s}
.mobile-menu.open{transition:transform .3s var(--ease-drawer),visibility 0s}
.m-velo{transition:opacity .2s var(--ease-out)}
.m-velo.on{transition:opacity .3s var(--ease-out)}
.burger span{transition:transform .24s var(--ease-out),opacity .16s var(--ease-out)}

/* ── Filtros y hoja de barrios: entran en 300 ms, salen en 200 ── */
.p-drawer,.p-msheet-wrap{transition:display .2s allow-discrete}
.p-drawer.open,.p-msheet-wrap.open{transition:display .3s allow-discrete}
.p-drawer .bg,.p-msheet-wrap .bg{transition:opacity .2s var(--ease-out)}
.p-drawer.open .bg,.p-msheet-wrap.open .bg{transition:opacity .3s var(--ease-out)}
.p-drawer .panel,.p-msheet-wrap .p-msheet{transition:transform .2s var(--ease-out)}
.p-drawer.open .panel,.p-msheet-wrap.open .p-msheet{transition:transform .3s var(--ease-drawer)}

/* ── Barrio, Precio y Ambientes del catálogo ──
   En la compu, el desplegable aparece desde su botón (arriba a la izquierda) en 180 ms y se va en 120.
   En el celular, la hoja sube con la curva de iOS y ahora también baja al cerrarse (antes desaparecía de golpe). */
@media(min-width:821px){
  .mc-pop{opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .12s var(--ease-out),transform .12s var(--ease-out),display .12s allow-discrete}
  .mc-pop.open{opacity:1;transform:none;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),display .18s allow-discrete}
  @starting-style{.mc-pop.open{opacity:0;transform:translateY(-4px) scale(.98)}}
}
@media(max-width:820px){
  .mc-pop{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:1600;width:auto;max-width:none;max-height:min(86dvh,680px);padding-bottom:env(safe-area-inset-bottom,0px);border:0;border-radius:var(--r-box,14px) var(--r-box,14px) 0 0;box-shadow:0 -8px 32px rgba(10,20,40,.14);
    transform:translateY(100%);transition:transform .2s var(--ease-out),display .2s allow-discrete}
  .mc-pop.open{animation:none;transform:none;transition:transform .3s var(--ease-drawer),display .3s allow-discrete}
  @starting-style{.mc-pop.open{transform:translateY(100%)}}
  .mc-velo{opacity:1;transition:opacity .2s var(--ease-out),display .2s allow-discrete}
  .mc-velo:not([hidden]){transition:opacity .3s var(--ease-out),display .3s allow-discrete}
  .mc-velo[hidden]{opacity:0}
  @starting-style{.mc-velo:not([hidden]){opacity:0}}
}

/* ── "Coordinar visita" en la ficha (se abre y se cierra con [hidden]): como los filtros del celular, el panel sube en
   300 ms con la curva de iOS y baja en 200; el fondo oscuro aparece en 300 y se va en 200. Mientras sale, no recibe
   toques. En la compu (700 px o más) es una ventana centrada: aparece en su lugar, sin viajar desde abajo. ── */
.p-vis-hoja{transition:background-color .2s var(--ease-out),display .2s allow-discrete}
.p-vis-hoja:not([hidden]){transition:background-color .3s var(--ease-out),display .3s allow-discrete}
.p-vis-hoja[hidden]{background-color:transparent;pointer-events:none}
@starting-style{.p-vis-hoja:not([hidden]){background-color:transparent}}
.p-vis-hoja .p-vis-hoja-in{transition:transform .2s var(--ease-out),opacity .2s var(--ease-out)}
.p-vis-hoja:not([hidden]) .p-vis-hoja-in{transition:transform .3s var(--ease-drawer),opacity .3s var(--ease-drawer)}
.p-vis-hoja[hidden] .p-vis-hoja-in{transform:translateY(100%)}
@starting-style{.p-vis-hoja:not([hidden]) .p-vis-hoja-in{transform:translateY(100%)}}
@media(min-width:700px){
  .p-vis-hoja[hidden] .p-vis-hoja-in{transform:translateY(8px) scale(.98);opacity:0}
  .p-vis-hoja:not([hidden]) .p-vis-hoja-in{transition:transform .3s var(--ease-out),opacity .3s var(--ease-out)}
  @starting-style{.p-vis-hoja:not([hidden]) .p-vis-hoja-in{transform:translateY(8px) scale(.98);opacity:0}}
}

/* ── Avisos (toasts): suben 8 px mientras aparecen (240 ms) y se van más rápido (160 ms). Va sobre translate,
   así el centrado con transform queda igual. El primero que se crea también entra (antes aparecía de golpe). ── */
.p-toast{translate:0 8px;transition:opacity .16s var(--ease-out),translate .16s var(--ease-out)}
.p-toast.on{translate:none;transition:opacity .24s var(--ease-out),translate .24s var(--ease-out)}
@starting-style{.p-toast.on{opacity:0;translate:0 8px}}

/* ── Lo que se despliega en la ficha ("Ver las características", "Reportar un problema", "Información legal"):
   lo nuevo aparece con un fundido corto en lugar de golpe ── */
.p-fpliego,#amenMas{transition:opacity .2s var(--ease-out)}
@starting-style{.p-fpliego,#amenMas{opacity:0}}

/* ── El corazón: el relleno cambia con el mismo tiempo que el color ── */
.tj-fav svg,.p-icon-btn svg,.tj-fav svg *,.p-icon-btn svg *{transition:fill .2s var(--ease-out),stroke .2s var(--ease-out)}

/* ── Números que cambian solos: las vistas y consultas del reporte del dueño (se actualiza cada minuto) no bailan.
   En Playfair las cifras ya miden lo mismo, así que en reposo se ven idénticas. ── */
.rep-nums b{font-variant-numeric:tabular-nums lining-nums}

/* ── Con "reducir movimiento" pedido en el sistema: nada se desplaza ni se agranda. portal.css ya deja casi en cero todas
   las transiciones con !important; acá se sacan los desplazamientos por si algo queda, y la hoja de Coordinar visita
   conserva un fundido de 150 ms. ── */
@media(prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu.open,.burger span{transition:none}
  .m-velo,.m-velo.on{transition:opacity .15s linear}
  .p-toast,.p-toast.on{translate:none;transition:opacity .15s linear}
  @starting-style{.p-toast.on{translate:none}}
  .mc-pop,.mc-pop.open{transform:none;animation:none;transition:opacity .15s linear,display .15s allow-discrete}
  .mc-pop{opacity:0} .mc-pop.open{opacity:1}
  @starting-style{.mc-pop.open{transform:none;opacity:0}}
  .tj-fav svg,.p-icon-btn svg,.tj-fav svg *,.p-icon-btn svg *{transition:none}
  /* Coordinar visita: solo un fundido */
  .p-vis-hoja,.p-vis-hoja:not([hidden]){transition:background-color .15s linear,display .15s allow-discrete}
  .p-vis-hoja .p-vis-hoja-in,.p-vis-hoja:not([hidden]) .p-vis-hoja-in{transition:opacity .15s linear}
  .p-vis-hoja,.p-vis-hoja .p-vis-hoja-in{transition-duration:.15s!important}
  .p-vis-hoja[hidden] .p-vis-hoja-in{transform:none;opacity:0}
  @starting-style{.p-vis-hoja:not([hidden]) .p-vis-hoja-in{transform:none;opacity:0}}
}

/* ── 27/10/2026 · Tomás: "se marca un cuadrado negro en Filtros cuando toco la X; sacá ese y todos los cuadrados negros
   que se hagan al seleccionar, en toda la web". Era el anillo de foco: al cerrar una hoja, el foco vuelve al botón que la
   abrió y el navegador lo dibujaba aunque se hubiera tocado con el dedo. Queda solo para quien navega con el teclado
   (html.teclado: lo pone Tab y lo saca el primer toque o clic, js/ui.js). Los campos de texto siguen marcando el borde. ── */
/* El :not(#bp-x) solo sube la prioridad (como un id): portal.css tiene una regla de foco con !important más fuerte
   (":root :is(a,button,…):not([tabindex=-1]):focus-visible") que seguía dibujando el marco navy, por ejemplo al llegar a
   Propiedades desde Actividad con Filtros abierto y cerrarlo con la X (27/10/2026). */
html:not(.teclado) :not(#bp-x):focus,html:not(.teclado) :not(#bp-x):focus-visible{outline:none!important}

/* ── 27/10/2026 · Tomás: "los números en el catálogo quedan igual o más chicos que el texto y algunos desfasados; tienen
   que quedar centrados al texto". Playfair usa por defecto números antiguos (el 2 del alto de una minúscula, el 3 colgando
   debajo de la línea). Números alineados en toda la web: font-feature-settings se hereda y el atajo font: no lo borra
   El atajo font: también la reinicia en Chrome, así que va en cada elemento y con prioridad (en el portal nada más usa
   font-feature-settings: solo se suman los números alineados). ── */
/* :not(#bp-a#bp-b#bp-c#bp-d) no excluye nada: solo le da el peso de cuatro id, para ganarle a reglas como
   "#ctaLugar #ctaCard .p-cta-price{font:…!important}", que reiniciaban los números del precio de la ficha */
:root,:root :not(#bp-a#bp-b#bp-c#bp-d),:root :not(#bp-a#bp-b#bp-c#bp-d)::before,:root :not(#bp-a#bp-b#bp-c#bp-d)::after{font-feature-settings:"lnum" 1!important}