/* ===== Catálogo – layout general ===== */

.page--catalog{
  background:#fff;
  padding-bottom:32px;
}

.section-head--catalog{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding-block:16px 4px;
}

/* ===== Mapa ===== */

.catalog-map-wrap{
  margin-block:8px 12px;
}

.catalog-map{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  min-height:220px;
  background:#e5e7eb;
}

.catalog-map-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:var(--muted, #6b7280);
}

@media (min-width:768px){
  .catalog-map{ min-height:320px; }
}

/* ===== Toolbar (total, orden, vista, filtros) ===== */

.catalog-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:6px 8px;
}

.catalog-toolbar-left{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
}

.catalog-count{
  font-weight:600;
}

.catalog-count span{
  color:var(--ink-blue,#0D1B2A);
}

.catalog-order{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}

.catalog-order select{
  font:inherit;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--outline,#e5e7eb);
  background:#fff;
}

/* derecha */
.catalog-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

/* icon-btn genérico */
.icon-btn{
  border-radius:999px;
  border:1px solid var(--outline,#e5e7eb);
  background:#fff;
  padding:6px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.icon-btn .mi{
  font-size:18px;
}

/* Divider */
.divider{
  border:none;
  border-top:1px solid var(--outline,#e5e7eb);
  margin-block:8px 12px;
}

/* ===== Resultados ===== */

.catalog-results{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  position:relative;
  grid-auto-rows:1fr; /* filas uniformes */
}

.catalog-results--grid{
  grid-template-columns:1fr;
}

@media (min-width:700px){
  .catalog-results--grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .catalog-results--grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Estado vacío */
.catalog-empty{
  margin-top:16px;
  text-align:center;
  font-size:14px;
  color:var(--muted,#6b7280);
}

/* Overlay de carga */
.catalog-loading{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.catalog-loading-backdrop{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.7);
}

.catalog-loading-spinner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  pointer-events:none;
}

.catalog-loading-spinner p{
  font-size:14px;
}

.spinner{
  width:32px;
  height:32px;
  border-radius:999px;
  border:3px solid #d1d5db;
  border-top-color:var(--ink-blue,#0D1B2A);
  animation:spin 0.7s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* ===== Card de propiedad ===== */

.prop-card{
  border-radius:14px;
  border:1px solid var(--outline,#e5e7eb);
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  height:100%; /* igual altura dentro del grid */
}

.prop-card-media{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;       /* un poco más cuadrado que 16:9 */
  max-height: 260px;         /* tope por si la card se hace muy grande */
  overflow: hidden;
  background:#e5e7eb;
}

.prop-card-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* SIEMPRE llena el cuadro, recortando si hace falta */
}

.prop-card-badge{
  position:absolute;
  left:10px;
  top:10px;
  border-radius:999px;
  padding:3px 9px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:var(--gold,#F4D35E);
}

.prop-card-body{
  padding:10px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1; /* empuja botones hacia abajo */
}

.prop-card-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.prop-card-price{
  font-weight:800;
  color:var(--ink-blue,#0D1B2A);
}

.prop-card-credit{
  border-radius:999px;
  background:#ecfdf5;
  color:#059669;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
}

.prop-card-title{
  font-size:15px;
  font-weight:700;
  margin:2px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.prop-card-location{
  font-size:13px;
}

.prop-card-specs{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:13px;
}

.spec{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.spec .mi{
  font-size:16px;
}

/* acciones al fondo */
.prop-card-actions{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ===== Botón WhatsApp (look oficial) ===== */

.prop-card-wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #25D366;
  background:#25D366;
  color:#fff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:background .18s ease, transform .08s ease, box-shadow .18s ease;
}

.wa-icon{
  width:18px;
  height:18px;
  display:inline-flex;
}

.wa-icon svg{
  width:100%;
  height:100%;
  fill:#fff;
}

.prop-card-wa .mi{
  font-size:18px;
  background:transparent;
  color:#fff;
  margin:0;
}

.prop-card-wa:hover{
  background:#1fb557;
  box-shadow:0 4px 10px rgba(37,211,102,.35);
}

.prop-card-wa:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(37,211,102,.3);
}

.prop-card-wa:disabled{
  opacity:.6;
  cursor:default;
  box-shadow:none;
}

.prop-card-wa-label{
  letter-spacing:.04em;
}

/* ===== Dialog de filtros (estético) ===== */

.filters-dialog{
  border:none;
  padding:0;
  max-width:640px;
  width:100%;
}

.filters-panel{
  padding:16px 18px 14px;
  background:#fff;
  border-radius:16px;
  max-height:min(90vh,640px);
  overflow:auto;
  box-shadow:0 20px 60px rgba(15,23,42,.18);
}

.filters-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}

.filters-header h2{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--ink-blue,#0D1B2A);
}

.filters-close{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--outline,#e5e7eb);
  background:#f9fafb;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* grupos */

.filters-group{
  margin-bottom:14px;
}

.filters-label{
  margin:0 0 6px;
  font-weight:600;
  font-size:14px;
}

.filters-group--layout{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* campos */

.filters-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.filters-field select,
.filters-field input[type="number"]{
  font:inherit;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--outline,#e5e7eb);
  background:#fff;
}

/* precio */

.filters-price-row{
  display:flex;
  gap:8px;
}

.filters-price-input{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}

.filters-price-hint{
  margin-top:4px;
  font-size:12px;
}

/* segmentados */

.filters-segmented{
  display:inline-flex;
  padding:2px;
  border-radius:999px;
  background:#f3f4f6;
  gap:2px;
}

.seg-btn{
  border:none;
  background:transparent;
  border-radius:999px;
  padding:4px 10px;
  font-size:13px;
  cursor:pointer;
}

.seg-btn--active{
  background:var(--ink-blue,#0D1B2A);
  color:#fff;
}

/* counters */

.filters-counters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.counter-chip{
  border-radius:12px;
  border:1px solid var(--outline,#e5e7eb);
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:140px;
  background:#f9fafb;
}

.counter-label{
  font-size:13px;
}

.counter-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.counter-btn{
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--outline,#e5e7eb);
  background:#fff;
  cursor:pointer;
}

.counter-value{
  min-width:20px;
  text-align:center;
  font-weight:700;
}

/* switch crédito */

.switch-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

/* footer filtros */

.filters-footer{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:flex-start;
}

/* Dialog en móvil: pantalla completa */
@media (max-width:640px){
  .filters-dialog{
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    border-radius:0;
  }
  .filters-panel{
    border-radius:0;
    max-height:none;
    height:100%;
  }
}

/* Utilidad */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}