/* BAIREN · Portal · Rama tomas/referencias (26/10/2026).
   Mejoras de uso del portal. Paleta, letra y formas son las del portal
   (portal/IDENTIDAD.md y la escala de diseno-claro.css). Todo lo de esta rama vive acá para compararla con la publicada. */

/* ── Ficha: debajo del precio, qué incluye (sobre la tarjeta navy del precio) ── */
.ref-incluye{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;margin:-4px 0 16px;font:400 .8125rem/1.5 var(--font-body);color:rgba(251,250,246,.86)}
.ref-incluye-t{margin-right:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.6875rem;color:#DECDA0}
.ref-incluye span:not(.ref-incluye-t)+span:not(.ref-incluye-t)::before{content:"·";margin:0 7px;color:rgba(251,250,246,.45)}

/* ── Catálogo: en la compu, lista y mapa juntos. El mapa de barrios de la banda (el de bairengroup.com, PR #95)
   pasa a una columna fija a la derecha de la lista; la lista queda en dos columnas. En el celular no cambia nada: ya
   tiene "Barrios" que flota y abre el mapa en una hoja. ── */
.ref-lado[hidden]{display:none}
@media(min-width:1100px){
  body.ref-con-lado .p-catband.mc-banda--mapa .p-catband-in{display:block}
  body.ref-con-lado .p-results{grid-template-columns:minmax(0,1fr) minmax(360px,38%)!important;gap:28px!important;align-items:start!important}
  body.ref-con-lado .p-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
  .ref-lado{position:sticky;top:var(--ref-top,20px);max-height:calc(100vh - var(--ref-top,20px) - 20px);padding:22px 18px;border-radius:14px;background:#131D2D;border:1px solid rgba(194,169,104,.28);overflow:hidden}
  .ref-lado .mc-banda-mapa{display:block}
  .ref-lado #mapaHero{max-width:none;margin:0}
  body.ref-con-lado #mapaAcc{display:none!important}   /* "Ver N departamentos" bajaba a la lista: ahora está al lado */
}
@media(max-width:1099px){.ref-lado{display:none}}

/* ── Guardados: cada alerta con cuántos departamentos tiene hoy y cuántos entraron desde que se creó ── */
.ref-al-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ref-al-n{display:flex;align-items:center;gap:8px;font:400 .8125rem/1.3 var(--font-body);color:var(--p-mid-ink,#59647A)}
.ref-al-n b{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:#1F7A47}
.ref-al-n b::before{content:"";width:7px;height:7px;border-radius:50%;background:#2DA65E}

/* ── Ficha: la barra de abajo dice desde cuándo está disponible, arriba del botón ── */
.p-mcta:has(.ref-mcta-disp){flex-wrap:wrap}
.ref-mcta-disp{flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;font:400 .8125rem/1.2 var(--font-body);color:rgba(251,250,246,.88)}
.ref-mcta-disp i{width:7px;height:7px;border-radius:50%;background:#2DA65E}

/* ── Ficha: lo que tiene, con íconos de línea; 6 a la vista ── */
.ref-tiene{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.ref-tiene li{display:flex;align-items:center;gap:12px;min-width:0;font:300 1rem/1.3 var(--font-body);color:#2A3A52}
.ref-tiene li[hidden]{display:none}
.ref-tiene svg{flex:none;color:#8A7547}
.ref-tiene-mas{margin-top:18px;height:44px;padding:0 18px;border:1px solid #131D2D;border-radius:999px;background:transparent;color:#131D2D;font:500 .875rem/1 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.ref-tiene-mas:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.ref-tiene-mas:hover{background:#131D2D;color:#FBFAF6}}
@media(max-width:380px){.ref-tiene{grid-template-columns:1fr}}

/* ── Catálogo: el gráfico de precios arriba de las franjas ── */
.ref-histo{margin:2px 0 16px}
.ref-histo-b{display:flex;align-items:flex-end;gap:3px;height:64px;border-bottom:1px solid rgba(194,169,104,.55)}
.ref-histo-b i{flex:1;min-width:0;background:rgba(19,29,45,.14);transition:background-color 200ms cubic-bezier(.23,1,.32,1)}
.ref-histo-b i.on{background:#C2A968}
.ref-histo-e{display:flex;justify-content:space-between;margin:7px 0 0;font:400 .75rem/1 var(--font-body);color:#59647A;font-variant-numeric:tabular-nums lining-nums}
@media(prefers-reduced-motion:reduce){.ref-histo-b i{transition:none}}

/* ── Propietarios: barrio, ambientes y cuánto se pide por mes ── */
.ref-calc[hidden]{display:none}
.ref-calc{margin:26px 0 4px;padding:18px 18px 16px;border:1px solid rgba(194,169,104,.34);border-radius:14px;background:rgba(255,255,255,.04);max-width:440px}
.ref-calc-t{margin:0 0 12px;font:500 .6875rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#DECDA0}
.ref-calc-ctl{display:flex;flex-wrap:wrap;gap:8px}
.ref-calc-sel{flex:1 1 150px;min-width:0;height:44px;padding:0 34px 0 14px;border:1px solid rgba(251,250,246,.22);border-radius:10px;background:rgba(255,255,255,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23DECDA0'/></svg>") no-repeat right 14px center;color:#FBFAF6;font:400 .9375rem/1 var(--font-body);-webkit-appearance:none;appearance:none}
.ref-calc-sel option{color:#131D2D;background:#FBFAF6}
.ref-calc-amb{display:flex;flex:1 1 180px;border:1px solid rgba(251,250,246,.22);border-radius:10px;overflow:hidden}
.ref-calc-amb button{flex:1;height:42px;border:0;border-left:1px solid rgba(251,250,246,.14);background:transparent;color:rgba(251,250,246,.8);font:500 .875rem/1 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1)}
.ref-calc-amb button:first-child{border-left:0}
.ref-calc-amb button.on{background:#C2A968;color:#131D2D}
.ref-calc-amb button:active{transform:scale(.97)}
.ref-calc-n{display:flex;align-items:baseline;gap:8px;margin:16px 0 2px}
.ref-calc-n b{font:400 var(--t-cifra,1.875rem)/1.1 var(--font-display);color:#C2A968;font-variant-numeric:lining-nums}
.ref-calc-n span{font:300 .9375rem/1 var(--font-body);color:rgba(251,250,246,.78)}
.ref-calc-s{margin:0;font:400 .8125rem/1.4 var(--font-body);color:rgba(251,250,246,.62)}
.ref-calc-sel:focus-visible,.ref-calc-amb button:focus-visible{outline:2px solid #DECDA0;outline-offset:2px}

/* ── Ficha: con la duración elegida, de qué fecha a qué fecha ── */
.ref-vis-fechas{display:flex;align-items:center;gap:10px;margin:10px 0 14px;font:400 .875rem/1.2 var(--font-body);color:rgba(251,250,246,.9);font-variant-numeric:tabular-nums lining-nums}
.ref-vis-fechas[hidden]{display:none}
.ref-vis-fechas i{font-style:normal;color:#C2A968}

/* ── Catálogo: "Crear alerta" con campana arriba, junto al buscador ── */
.ref-alerta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border:1px solid rgba(194,169,104,.55);border-radius:10px;background:transparent;color:#FBFAF6;font:500 .875rem/1 var(--font-body);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1)}
.ref-alerta svg{width:17px;height:17px;color:#DECDA0;flex:none}
.ref-alerta.on{background:#C2A968;border-color:#C2A968;color:#131D2D}
.ref-alerta.on svg{color:#131D2D}
.ref-alerta:active{transform:scale(.97)}
.ref-alerta[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.ref-alerta:not(.on):hover{background:rgba(194,169,104,.14)}}
/* El mapa: la campana arriba de Dibujar */
.mb .mb-dibujo{flex-direction:column;align-items:flex-end;gap:10px}
@media(max-width:1023px){.mc-barra > .mc-buscar:has(+ .ref-alerta){grid-column:span 4}.mc-barra > .ref-alerta{grid-column:span 2;padding:0 10px}}

/* ── Ficha: anclas fijas arriba al bajar, con los títulos de cada sección ── */
.ref-anclas{position:fixed;left:0;right:0;top:64px;z-index:880;background:#1E2A3F;border-bottom:1px solid rgba(194,169,104,.32);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform 220ms cubic-bezier(.23,1,.32,1),opacity 180ms cubic-bezier(.23,1,.32,1)}
.ref-anclas.on{transform:none;opacity:1;pointer-events:auto}
.ref-anclas-in{display:flex;gap:22px;max-width:1180px;margin:0 auto;padding:0 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ref-anclas-in::-webkit-scrollbar{display:none}
.ref-anclas a{flex:none;display:block;padding:14px 0 12px;border-bottom:2px solid transparent;color:rgba(251,250,246,.72);font:500 .875rem/1 var(--font-body);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.ref-anclas a.on{color:#FBFAF6;border-bottom-color:#C2A968}
.ref-anclas a:focus-visible{outline:2px solid #DECDA0;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.ref-anclas a:hover{color:#FBFAF6}}
@media(prefers-reduced-motion:reduce){.ref-anclas{transition:opacity 150ms linear;transform:none}}

/* ── Reporte del dueño: próximas visitas primero, y el informe en PDF ── */
.rep-sub-l{margin:14px 0 6px;font:500 .6875rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#75623C}
.rep-sub-l:first-child{margin-top:4px}
.ref-pdf-l{margin:18px 0 0;text-align:center}
.ref-pdf{height:44px;padding:0 20px;border:1px solid #131D2D;border-radius:999px;background:transparent;color:#131D2D;font:500 .875rem/1 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.ref-pdf:active{transform:scale(.97)}
.ref-pdf[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.ref-pdf:hover{background:#131D2D;color:#FBFAF6}}
@media print{
  #pHeader,#pFooter,.p-velo,.ref-pdf-l,.rep-mas-link,.rep-mas-btn,.p-tabbar,#pTabbar{display:none!important}
  html,body{background:#fff!important}
  .rep-band{background:#131D2D!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rep{box-shadow:none!important;break-inside:avoid}
}
.ref-calc-meses{margin-top:14px}
.ref-calc-meses input{width:100%;accent-color:#C2A968}
.ref-calc-meses p{margin:4px 0 0;font:400 .875rem/1.3 var(--font-body);color:rgba(251,250,246,.78)}
.ref-calc-meses b{font-weight:500;color:#FBFAF6;font-variant-numeric:tabular-nums lining-nums}
.ref-calc-pars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.ref-calc-pars:empty{display:none}
.ref-calc-par{display:block;color:#FBFAF6;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.ref-calc-par:active{transform:scale(.97)}
.ref-calc-par img,.ref-calc-par i{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:rgba(255,255,255,.08)}
.ref-calc-par span{display:block;margin-top:6px;font:500 .8125rem/1 var(--font-body);font-variant-numeric:tabular-nums lining-nums}
/* "Publicar gratis" fijo abajo en el celular */
.ref-pp-barra{display:none}
@media(max-width:1023px){
  .ref-pp-barra{display:block;position:fixed;left:0;right:0;bottom:0;z-index:850;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:#131D2D;border-top:1px solid rgba(251,250,246,.1);transition:transform 220ms cubic-bezier(.23,1,.32,1)}
  .ref-pp-barra .pp-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px}
  .ref-pp-barra.fuera{transform:translateY(110%)}
}

/* ── Catálogo: lo raro plegado en "Más filtros" (sin amenities como filtro, Tomás 26/10) ── */
.ref-mas{border-top:1px solid rgba(19,29,45,.1);margin-top:6px}
.ref-mas > summary{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font:500 1rem/1.2 var(--font-body);cursor:pointer;list-style:none}
.ref-mas > summary::-webkit-details-marker{display:none}
.ref-mas > summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.ref-mas[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
#clearAll:disabled{opacity:.4;cursor:default}

/* ── Catálogo · las fotos de cada tarjeta se deslizan (como la tarjeta del mapa), con puntos y, en la compu, flechas ── */
.tj-foto .ref-tj-fotos{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tj-foto .ref-tj-fotos::-webkit-scrollbar{display:none}
.tj-foto .ref-tj-fotos img{position:static;flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always;transform:none!important}
.ref-tj-puntos{position:absolute;z-index:1;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.ref-tj-puntos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.35);transition:background-color 160ms cubic-bezier(.23,1,.32,1)}
.ref-tj-puntos i.on{background:#fff}
.ref-tj-fl{position:absolute;top:50%;z-index:2;display:none;align-items:center;justify-content:center;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:rgba(251,250,246,.94);color:#131D2D;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;opacity:0;transition:opacity 160ms cubic-bezier(.23,1,.32,1),transform 160ms cubic-bezier(.23,1,.32,1)}
.ref-tj-fl-a{left:10px}.ref-tj-fl-s{right:10px}
.ref-tj-fl[hidden]{display:none!important}
.ref-tj-fl:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.ref-tj-fl{display:flex}.prop-card:hover .ref-tj-fl{opacity:1}}

/* ── Tarjetas · la foto de perfil de quien publica (Mi cuenta) delante de "Publica …"; en la compu también para Realty ── */
.p-tj .tj-pub:has(.tj-pub-logo){display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.p-tj .tj-pub .tj-pub-logo{flex:none;width:24px;height:24px;margin-right:6px;border-radius:50%;object-fit:cover;background:#131D2D;border:1px solid rgba(19,29,45,.1)}
.p-tj.p-tj-realty .tj-pub:has(.tj-pub-logo){display:flex}

/* ── Mapas · Tomás (26/10): "los circulitos con la cantidad muy grandes y toscos, y los nombres muy en negrita". Círculo
   más chico con filete oro fino separado, número liviano, nombres en Jost 400 más chicos y espaciados. El área de toque
   no se achica. En el portal solamente (html .bm le gana al estilo que inyecta mapa-barrios.js). ── */
html .bm{--bm-pin:22px}
@media(max-width:600px){html .bm{--bm-pin:20px}}
html .bm .bm-pin::before{content:"";position:absolute;inset:-11px;border-radius:50%}
html .bm .bm-num{font:500 .65625rem/1 var(--font-body,'Jost'),sans-serif;letter-spacing:.01em;box-shadow:0 0 0 2.5px rgba(19,29,45,.85),0 0 0 3.5px rgba(194,169,104,.5)}
html .bm .bm-pin.hov .bm-num{box-shadow:0 0 0 2.5px rgba(19,29,45,.85),0 0 0 3.5px rgba(222,205,160,.9)}
html .bm .bm-pin.act .bm-num{background:#FBFAF6;box-shadow:0 0 0 2.5px rgba(19,29,45,.85),0 0 0 3.5px #C2A968}
html body .bm .bm-lbl b{font-weight:400!important;font-size:.625rem!important;letter-spacing:.17em!important;color:rgba(251,250,246,.84)}
/* el tamaño de cada círculo lo pone el mapa en línea (--bm-pin y width/height): acá se fija el chico */
html .bm .bm-pin{width:22px!important;height:22px!important;margin:-11px 0 0 -11px!important}
@media(max-width:600px){html .bm .bm-pin{width:20px!important;height:20px!important;margin:-10px 0 0 -10px!important}}
html .bm .bm-pin--r .bm-lbl{left:calc(100% + 9px)}
html .bm .bm-pin--l .bm-lbl{right:calc(100% + 9px)}
html .bm .bm-pin--b .bm-lbl{top:calc(100% + 7px)}
html .bm .bm-pin--t .bm-lbl{bottom:calc(100% + 7px)}
/* El mapa con precios: la cantidad de cada barrio, igual de fina */
.mb .mb-in .mb-cant{min-width:20px;height:20px;padding:0 6px;font:500 10.5px/1 var(--mb-texto);letter-spacing:.01em;box-shadow:0 0 0 2.5px rgba(19,29,45,.85),0 0 0 3.5px rgba(194,169,104,.5)}
.mb-c b{font:400 10px/1 var(--mb-texto);letter-spacing:.17em;color:rgba(251,250,246,.86);text-shadow:0 0 6px var(--mb-navy),0 0 2px var(--mb-navy)}
.mb-c .mb-in{gap:7px}

/* Tarjetas · el logo y, centrado a su derecha, "Publica Nombre ✓" en un solo bloque (sin :has, para Safari viejo) */
.p-tj .tj-pub.con-logo{display:flex!important;align-items:center;gap:8px}
.p-tj .tj-pub.con-logo .tj-pub-logo{margin-right:0}
.p-tj .tj-pub .tj-pub-t{min-width:0;line-height:1.35}
.p-tj .tj-pub .tj-pub-t .p-verif{display:inline-flex;vertical-align:-1px;margin-left:5px}
.p-tj .tj-pub .tj-pub-t .p-verif svg{width:12px;height:12px}