/* =============================================================================================
   BlockEstate · responsive model
   Loaded last: it carries the design tokens and the phone rules that the older sheets did not have.
   The scale lives here so every screen measures the same: 4 px grid, one type ramp, 44 px targets.
   ============================================================================================= */

:root{
  /* Spacing, 4 px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px; --s9:64px;

  /* Type ramp: phone / desktop */
  --fs-display:32px; --fs-h1:26px; --fs-h2:20px; --fs-h3:16px;
  --fs-body:14px; --fs-small:12.5px; --fs-label:10.5px; --fs-price:20px;

  /* Radii */
  --r-chip:999px; --r-input:12px; --r-card:16px; --r-sheet:20px;

  /* Touch */
  --touch:44px; --touch-primary:48px;

  /* Layout */
  --container:1200px; --gutter:16px;
}

@media (min-width:768px){
  :root{ --fs-display:44px; --fs-h1:34px; --fs-h2:24px; --fs-h3:17px;
         --fs-body:15px; --fs-small:13px; --fs-label:11px; --fs-price:22px; --gutter:20px; }
}
@media (min-width:1280px){
  :root{ --fs-display:56px; --fs-h1:40px; --fs-h2:26px; --fs-h3:18px;
         --fs-body:15px; --fs-small:13px; --fs-price:24px; --gutter:32px; }
}

/* ------------------------------------------------------------------ foundations */
body{ line-height:1.5; }
/* Nada que se toque baja de 44 px de alto, pero solo los botones de acción: aplicar el suelo a TODO
   button convertía los puntos del carrusel y las flechas de la foto en barras de 44 px. */
.btn, button.btn, select, input[type="submit"], .puerta, .control > button, .control > .ctrl{
  min-height: var(--touch);
}
:where(button, a, input, select):focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* ------------------------------------------------------------------ phone */
@media (max-width: 767px){
  /* ---------- cabecera: una fila, 56 px ---------- */
  header.top{ height:56px; }

  /* ---------- filtros: una tira que se desliza, no cuatro bloques apilados ----------
     Antes medían 237 px apilados y empujaban el catálogo media pantalla hacia abajo. */
  .controls{
    display:flex; flex-wrap:nowrap; gap:var(--s2);
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    padding:0 0 var(--s2); margin:0;
  }
  .controls::-webkit-scrollbar{ display:none; }
  /* Campo compacto: etiqueta de 9,5 y valor de 12,5 dentro de 56 px. Antes la etiqueta y el botón
     sumaban 66 px en una caja de 52 y el texto se salía por abajo. */
  .controls .control{
    flex:0 0 auto; min-width:142px; height:56px; padding:7px var(--s3);
    display:flex; flex-direction:column; justify-content:center; gap:2px;
    border:1px solid var(--line-2); border-radius:var(--r-input); background:var(--white);
  }
  .controls .control > label,
  .controls .control > .lab,
  .controls .control label{ font-size:9.5px; line-height:1; letter-spacing:.12em; color:var(--ink-50); }
  .controls .control.ancho{ min-width:128px; max-width:128px; }
  .controls .control.ancho small{ display:none; }
  .controls .control > .ctrl,
  .controls .control > button.ctrl{
    height:auto; min-height:0; padding:0; line-height:1.2; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; justify-content:space-between; gap:6px;
  }

  /* ---------- barra de resultados: una sola fila ---------- */
  .result-bar{ display:flex; flex-wrap:nowrap; align-items:center; gap:var(--s2);
               height:56px; padding:0 0 var(--s2); overflow:hidden; }
  .result-bar .count{ font-size:var(--fs-small); font-weight:700; white-space:nowrap; }
  .result-bar .tools{ display:flex; flex-wrap:nowrap; gap:var(--s2); margin-left:auto;
                      overflow-x:auto; scrollbar-width:none; }
  .result-bar .tools::-webkit-scrollbar{ display:none; }
  /* El orden y el guardado son secundarios en el teléfono: viven en el menú de la lista. */
  .result-bar .tools .control.compacto,
  .result-bar .tools .link-btn,
  .result-bar .tools .seg{ display:none; }
  .result-bar .tools .switch{ font-size:11.5px; }
  .result-bar .tools .vista{ flex:0 0 auto; }

  /* ---------- tarjeta: foto 16:10 y solo lo que se decide ---------- */
  .list .card{
    grid-template-columns:1fr; border-radius:var(--r-card);
  }
  .list .card .photo{ aspect-ratio:16/9; width:100%; height:auto; }
  .list .card .body{ padding:var(--s3) var(--s3) var(--s3); }
  /* El sello grande (44 px) y la palabra del tipo (24 px) sobran aquí: la línea de verificación ya
     dice lo mismo con la fecha, y el título ya dice que es un apartamento.
     Los selectores llevan #resultados delante porque las hojas antiguas fijan tamaños con más
     especificidad y, sin eso, estas reglas se quedaban escritas pero no aplicadas. */
  #resultados .list .card .sello-cuerpo,
  #resultados .list .card .tipo,
  #resultados .list .card .frases,
  #resultados .list .card .foto-cuenta { display:none; }

  #resultados .list .card .body{ padding:10px 12px 10px; gap:0; }
  #resultados .list .card .price{ font-size:20px; line-height:1.15; font-weight:900; }
  #resultados .list .card .price-cripto{ font-size:11px; line-height:1.25; margin:0; }
  #resultados .list .card h3{ font-size:15px; line-height:1.3; margin-top:4px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #resultados .list .card .specs{ font-size:12.5px; gap:10px; margin-top:4px; flex-wrap:nowrap; overflow:hidden; }
  #resultados .list .card .zona{ font-size:12.5px; margin-top:2px; }
  #resultados .list .card .verif-linea{ font-size:10.5px; line-height:1.3; margin-top:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #resultados .list .card .foot{ margin-top:4px; padding-top:4px; }
  #resultados .list .card .marca-dev{ height:22px; }
  #resultados .list .card .puertas .puerta{ width:28px; height:28px; }

  /* ---------- hoja de filtros: lo avanzado sigue a un toque ---------- */
  #panel-filtros, .filtros-panel{ max-height:88dvh; border-radius:var(--r-sheet) var(--r-sheet) 0 0; }
}

/* ------------------------------------------------------------------ map controls */
.leaflet-control-zoom a,
.leaflet-touch .leaflet-control-zoom a{
  width:var(--touch) !important; height:var(--touch) !important; line-height:var(--touch) !important;
  font-size:20px !important; border-radius:10px !important;
}
.leaflet-control-zoom{ border:0 !important; box-shadow:0 6px 18px rgba(16,34,43,.16) !important; border-radius:12px !important; overflow:hidden; }
/* La chincheta del precio, 32 px de alto y 12 px de letra: antes 26 px y 11 px. */
.marca span{ font-size:12px !important; padding:.42rem .62rem !important; }

@media (max-width: 767px){
  /* ---------- áreas: el panel deja de flotar sobre el mapa y se pega al pie ---------- */
  .areas{ height:auto; display:flex; flex-direction:column; }
  .areas-mapa{ position:relative; height:46dvh; min-height:300px; }
  .areas-panel{
    position:sticky; bottom:0; top:auto; left:auto; width:auto; max-height:none;
    border-radius:var(--r-sheet) var(--r-sheet) 0 0; margin-top:-18px;
    box-shadow:0 -10px 30px rgba(16,34,43,.14);
  }

  /* ---------- ficha: precio y botón siempre a mano ---------- */
  .unit-cta-movil{
    position:fixed; left:0; right:0; bottom:0; z-index:900;
    display:flex; align-items:center; gap:var(--s3);
    padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--line-2);
  }
  .unit-cta-movil .p{ font-weight:900; font-size:16px; font-variant-numeric:tabular-nums; }
  .unit-cta-movil .s{ font-size:10.5px; color:var(--ink-50); font-weight:700; }
  .unit-cta-movil .b{ margin-left:auto; }
  body:has(.unit-cta-movil) main{ padding-bottom:84px; }

  /* ---------- pie: acordeón, no un mapa del sitio ---------- */
  footer .pie-grupo{ border-top:1px solid var(--line-2); }
  footer .pie-grupo > summary{
    list-style:none; cursor:pointer; min-height:48px; display:flex; align-items:center;
    justify-content:space-between; font-weight:800; font-size:13px; letter-spacing:.02em;
  }
  footer .pie-grupo > summary::-webkit-details-marker{ display:none; }
  footer .pie-grupo > summary::after{ content:"+"; color:var(--ink-30); font-weight:900; }
  footer .pie-grupo[open] > summary::after{ content:"–"; }
  footer .pie-grupo .pie-lista{ padding:0 0 var(--s3); }
  footer .pie-grupo .pie-lista a{ display:block; min-height:40px; line-height:40px; }
}

/* ------------------------------------------------------------------ desktop: dos columnas de tarjetas
   En escritorio la lista era una sola columna de 796 px: una tarjeta ocupaba el ancho entero y el
   catálogo se leía como un periódico. Con el rail a la derecha caben dos, y la foto recupera el 16:10
   en vez de estirarse a lo ancho. */
@media (min-width: 1024px){
  .lay .list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s4); align-items:start; }
  .lay .list .card{ grid-template-columns:1fr; border-radius:var(--r-card); }
  .lay .list .card .photo{ aspect-ratio:16/10; width:100%; height:auto; }
  .lay .list .card .body{ padding:14px 16px 14px; }
  /* En la rejilla, el sello grande y la línea de frases repiten lo que ya dicen el badge y el tipo. */
  .lay .list .card .sello-cuerpo,
  .lay .list .card .frases{ display:none; }

  /* El pie de la tarjeta: logo del promotor más pequeño y puertas más estrechas, para que las tres
     quepan. Antes el logo medía 104 px y Telegram se quedaba fuera por 15 px. */
  .lay .list .card .foot{ gap:8px; }
  .lay .list .card .marca-dev{ height:28px; max-width:64px; min-width:0; }
  .lay .list .card .logo-plano img,
  .lay .list .card .logo-plano svg{ height:22px; max-width:58px; }
  .lay .list .card .puertas{ gap:6px; flex-wrap:nowrap; overflow:visible; }
  .lay .list .card .puerta{ padding:0 8px; font-size:11.5px; gap:5px; }
  .lay .list .card .puerta svg,
  .lay .list .card .puerta img{ width:13px; height:13px; }
  .lay .list .card h3{ font-size:16px; line-height:1.3; }
  .lay .list .card .price{ font-size:22px; }
}

/* ------------------------------------------------------------------ tablet: puertas solo con icono
   A 768 las tres puertas de contacto (Email, WhatsApp, Telegram) no cabían en su fila y Telegram se
   salía de la tarjeta. Con el icono solo caben las tres y siguen siendo reconocibles. */
@media (max-width: 1023px){
  .list .card .puertas{ gap:6px; flex-wrap:nowrap; overflow:visible; }
  .list .card .puerta{ width:34px; min-width:34px; height:34px; padding:0; justify-content:center; }
  .list .card .puerta .lbl{ display:none; }
}

/* ------------------------------------------------------------------ selector de fotos de la tarjeta
   La regla global `button{min-height:44px}` convertía cada punto en una barra de 44 px de alto, y como
   el activo medía 16 de ancho y los demás 6, la fila salía deforme. Aquí vuelven a ser cuatro barras
   iguales: mismo ancho, mismo alto, mismo hueco. */
.list .card .puntos{ gap:4px; bottom:12px; }
.list .card .punto,
.list .card .punto.on{
  width:16px; min-width:0; height:3px; min-height:0; border-radius:2px;
  background:rgba(255,255,255,.55); box-shadow:none;
}
.list .card .punto.on{ background:#fff; }

/* ------------------------------------------------------------------ la marca del verificador, en la foto
   El sello del cuerpo se ocultaba en la rejilla y en el teléfono, así que las unidades verificadas que
   no estaban promocionadas se quedaban sin la marca. Ahora va en la esquina de la foto, igual en todas. */
.list .card .sello-foto{
  position:absolute; left:10px; bottom:10px; z-index:3; line-height:1;
}
.list .card .sello-foto .sello-vss{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.94); color:#0F7A3D;
  border-radius:999px; padding:4px 8px 4px 6px;
  font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:none;
  box-shadow:0 2px 8px rgba(11,18,32,.18);
}
.list .card .sello-foto .vss-marca{
  width:14px; height:14px; border-radius:50%; background:#0F7A3D; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.list .card .sello-foto .vss-marca svg{ width:9px; height:9px; }
/* El sello grande del cuerpo ya no hace falta: repite la misma marca en otra parte de la tarjeta. */
.list .card .sello-cuerpo{ display:none; }

/* La misma marca, dos estados: verde con la unidad verificada, gris cuando aún no lo está. El logo dice
   quién verifica; la fecha y el color dicen si ya se hizo. */
.list .card .sello-foto.sin .sello-vss{
  background:rgba(255,255,255,.92); color:#64748B; box-shadow:0 2px 8px rgba(11,18,32,.14);
}
.list .card .sello-foto.sin .vss-marca{ background:#94A3B8; color:#fff; }