/* =============================================
   RESTORE DESKTOP — >1100px
   Restaurar nav y layout correctos en desktop
   y pantallas 2K/4K
============================================= */
@media (min-width: 1101px) {
  /* Restaurar nav y botón del header */
  .header__nav  { display: flex !important; }
  .header__button { display: inline-flex !important; }

  /* Restaurar grid del header original */
  .header {
    grid-template-columns: auto 1fr auto !important;
  }

  /* Restaurar content-layout con sidebar */
  .content-layout {
    grid-template-columns: 350px 1fr !important;
  }

  /* Sidebar visible */
  .content-layout .sidebar {
    display: block !important;
  }

  /* Ocultar botón Filtros mobile */
  .sidebar-mobile-btn { display: none !important; }
}

/* =============================================
   OVERRIDE GLOBAL — catálogo responsive
============================================= */

/* main-box: reducir margen lateral para que
   las tarjetas no se salgan en mobile        */
@media (max-width: 768px) {
  .main-box {
    margin: 6px 10px 10px 10px !important;
    border-radius: 16px !important;
    padding: 14px 10px 32px !important;
    overflow: hidden !important;
  }

  /* El minmax(250px,1fr) del original fuerza ancho mínimo
     y rompe el layout — sobreescribir a columna única */
  .properties-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .property-card-link,
  .property-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .main-box {
    margin: 4px 8px 10px 8px !important;
    border-radius: 14px !important;
    padding: 12px 8px 28px !important;
    overflow: hidden !important;
  }

  .properties-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }
}

/* =============================================
   UDAI — catalogo.responsive.css
   Media queries para catalogo.html
   Agregar DESPUÉS de catalogo.css:
   <link rel="stylesheet" href="css/catalogo.responsive.css">

   NOTA: catalogo.css ya incluye breakpoints en
   1300 / 1200 / 1100 / 768 / 480px.
   Este archivo los complementa y corrige.
============================================= */

/* ── 1440px — grid 3 cols normal ── */
@media (max-width: 1440px) {
  .header {
    padding: 14px 24px;
  }
}

/* ── 1100px — sidebar se vuelve colapsable ── */
@media (max-width: 1100px) {
  .header {
    grid-template-columns: auto 1fr auto;
    padding: 14px 20px;
    column-gap: 20px;
  }

  .header__nav {
    gap: 28px;
  }

  .header__nav a {
    font-size: 1rem;
  }

  /* Sidebar pasa a ancho completo arriba del grid */
  .content-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    max-width: 100%;
  }

  /* Filtros de sidebar en horizontal colapsado por defecto */
  .sidebar__toggle-btn {
    display: flex;
  }

  /* Paginación: quitar el offset artificial */
  .pagination {
    left: 0;
  }
}

/* ── 900px — nav se comprime más ── */
@media (max-width: 900px) {
  .header {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    row-gap: 10px;
  }

  .header__left {
    grid-column: 1;
    grid-row: 1;
  }

  .header__button {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .header__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .header__nav a {
    font-size: 0.92rem;
  }
}

/* ── 768px — mobile ── */
@media (max-width: 768px) {
  .header {
    padding: 12px 16px;
  }

  .header__logo-img {
    height: 64px;
  }

  .header__button {
    padding: 10px 16px;
    font-size: 0.88rem;
    gap: 7px;
  }



  .top-search {
    flex-direction: column;
    gap: 10px;
  }

  .top-search__title {
    font-size: 1.8rem;
    min-width: unset;
  }

  .top-search__group {
    width: 100%;
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
  }

  /* top-search también en columna sin stretch */
  .top-search {
    align-items: stretch !important;
  }

  .search-input {
    width: 100%;
    height: 46px;
  }

  /* Todos los botones de acción — mismo tamaño exacto */
  .filter-btn,
  .filter-btn--udai {
    width: 100%;
    height: 52px !important;
    font-size: 1rem;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  /* Botón Filtros — mismo tamaño que los otros del grupo */
  .sidebar-mobile-btn {
    height: 52px !important;
    margin-bottom: 0 !important;
  }

  .content-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    max-width: 100%;
  }

  /* Filtros de tipo propiedad — 3 cols → 2 cols */
  .filter-options--property {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-options--property .filter-chip--property:nth-child(4),
  .filter-options--property .filter-chip--property:nth-child(5) {
    grid-column: auto;
  }

  /* Paginación */
  .pagination {
    left: 0;
  }

  .properties-grid {
    grid-template-columns: 1fr;
  }

  /* Barra resultados */
  .results-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .sort-select {
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
  }
}

/* ── 600px — header stack completo ── */
@media (max-width: 600px) {
  .header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
  }

  .header__nav {
    width: 100%;
    gap: 12px;
    justify-content: center;
  }

  .header__nav a {
    font-size: 0.85rem;
  }

  .header__button {
    padding: 9px 14px;
    font-size: 0.82rem;
  }
}

/* ── 480px — cards en 2 cols pequeñas ── */
@media (max-width: 480px) {
  .header__logo-img {
    height: 52px;
  }



  .top-search__title {
    font-size: 1.5rem;
  }

  .properties-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .property-card__image-wrapper {
    height: 190px;
  }

  .property-card__features {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Chips de números: 3+2 */
  .filter-options--numbers {
    grid-template-columns: repeat(3, 1fr);
  }

  .filter-options--numbers .segmented-option:nth-child(3) {
    border-right: none;
  }

  /* Range row más compacto */
  .range-row {
    grid-template-columns: 1fr 32px 1fr 32px;
  }
}

/* ── 360px — ultra small ── */
@media (max-width: 360px) {
  .header__logo-img {
    height: 44px;
  }

  .main-box {
    margin: 0;
    border-radius: 0 0 12px 12px;
  }

  .top-search__title {
    font-size: 1.3rem;
  }

  .filter-options--property {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================
   HAMBURGUESA CATÁLOGO — pantalla completa blur
   Mismo estilo que dashboard pero con
   tipografía grande estilo landing.
============================================= */

/* ── Ocultar nav y botón del header ── */
@media (max-width: 1100px) {
  .header__nav,
  .header__button {
    display: none !important;
  }
}

/* ── Botón hamburguesa — oculto en desktop, visible en mobile ── */
.cat-ham-btn { display: none; }

@media (max-width: 1100px) {
  .cat-ham-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.92);
    transition: background 0.18s, border-color 0.18s;
    flex-shrink: 0;
    margin-left: auto;
  }
}

.cat-ham-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}

/* Tres líneas */
.cat-ham-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.cat-ham-icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.cat-ham-icon span:nth-child(1) { width: 20px; }
.cat-ham-icon span:nth-child(2) { width: 14px; }
.cat-ham-icon span:nth-child(3) { width: 20px; }

/* ── Overlay — igual que dashboard, solo bloquea sin oscurecer mucho ── */
.cat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(8, 14, 30, 0.35);
  backdrop-filter: blur(4px) saturate(80%);
  -webkit-backdrop-filter: blur(4px) saturate(80%);
  pointer-events: all;
  animation: catOverlayIn 0.22s ease both;
}

.cat-overlay.is-open { display: block; }

@keyframes catOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Drawer — mismo tono translúcido que dashboard ── */
.cat-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  /* mismo fondo del ham-drawer de dashboard */
  background: rgba(14, 22, 42, 0.82);
  backdrop-filter: blur(36px) saturate(170%);
  -webkit-backdrop-filter: blur(36px) saturate(170%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(0.97) translateY(-10px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.22, 1, .36, 1),
              opacity   0.22s ease;
  pointer-events: none;
}

.cat-drawer.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Botón cerrar ✕ ── */
.cat-close-btn {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.15s;
}

.cat-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transform: scale(1.08) rotate(90deg);
}

.cat-close-btn svg {
  width: 22px;
  height: 22px;
}

/* ── Contenedor — centrado horizontal y verticalmente ── */
.cat-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;        /* centrado horizontal */
  text-align: center;
  width: 100%;
  max-width: 520px;
  padding: 0 32px;
  gap: 0;
}

/* ── Navegación — letras grandes centradas ── */
.cat-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-bottom: 52px;
  align-items: center;
}

.cat-nav-item {
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  line-height: 1.15;
  padding: 10px 0;
  letter-spacing: -0.01em;
  transition: color 0.15s, transform 0.15s;
  display: block;
  width: 100%;
  text-align: center;
}

.cat-nav-item:hover {
  color: #ffffff;
  transform: scale(1.02);
}

/* ── CTA — Contacta un asesor con imagen WhatsApp ── */
.cat-drawer-cta {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cat-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.1);
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.cat-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Imagen WhatsApp — mismo tamaño que en el header original */
.cat-cta-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Ajuste del header para mostrar solo logo + hamburguesa ── */
.header {
  grid-template-columns: auto 1fr auto !important;
}


/* =============================================
   SIDEBAR FILTROS MOBILE — modal overlay
   En ≤1100px el sidebar se oculta y aparece
   un botón "Filtros" que lo abre en modal.
============================================= */

/* Botón "Filtros" — oculto en desktop */
.sidebar-mobile-btn {
  display: none;
}

/* ── Overlay — igual que af-overlay ── */
.sidebar-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(10, 18, 38, 0.45);
  animation: sidebarOverlayIn 0.2s ease both;
}

.sidebar-mobile-overlay.is-open { display: block; }

@keyframes sidebarOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Popup centrado — mismo estilo af-popup ── */
.sidebar-mobile-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}

.sidebar-mobile-panel.is-open {
  display: flex;
}

/* Caja interior del popup */
.sidebar-mobile-panel::after { content: none; }

/* Wrapper real del contenido */
.sidebar-mobile-panel > .sidebar-mobile-close,
.sidebar-mobile-panel > .sidebar-mobile-header,
.sidebar-mobile-panel > .sidebar-mobile-content { display: none; }

/* El panel actúa como el af-overlay, el sidebar clonado
   se envuelve en un div.sidebar-popup-box generado por JS */
.sidebar-popup-box {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  padding: 32px 28px 40px;
  position: relative;
  margin: auto;
  animation: afPopIn 0.3s cubic-bezier(.22,1,.36,1) both;
}

@keyframes afPopIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Cabecera dentro del popup box */
.sidebar-mobile-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sidebar-mobile-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #18223C;
}

.sidebar-mobile-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  transition: color 0.18s;
}

.sidebar-mobile-close:hover { color: #18223C; }

.sidebar-mobile-close svg {
  width: 20px;
  height: 20px;
}

/* Contenido: sidebar clonado sin título ni box-shadow */
.sidebar-mobile-content {
  display: block !important;
}

.sidebar-mobile-content .sidebar {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.sidebar-mobile-content .sidebar__title {
  display: none;
}

.sidebar-mobile-content .filter-card {
  margin-bottom: 10px;
}

.sidebar-mobile-content .clear-btn {
  margin-top: 8px;
}

@media (max-width: 1100px) {

  /* Ocultar sidebar lateral */
  .content-layout .sidebar {
    display: none;
  }

  /* content-layout pasa a 1 col */
  .content-layout {
    grid-template-columns: 1fr !important;
  }

  /* Botón "Filtros" — oculto, solo se usa Filtros Adicionales */
  .sidebar-mobile-btn {
    display: none !important;
  }
}