/* ==========================================================
   HC Inmobiliaria - LISTADO (/propiedades)
   Barra de resultados, selector de vista (listado / listado y
   mapa / mapa), filtros activos, layout con mapa, paginación y
   estado vacío.
   ========================================================== */

/* ===================== CONTENEDOR DE LA PÁGINA ===================== */
.listing-page {
    padding-top: var(--space-6);
    padding-bottom: var(--space-8);
}

/* ===================== BARRA DE RESULTADOS ===================== */
.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    margin: var(--space-7) 0 var(--space-5);
}
.results-toolbar__summary { min-width: 0; }
.results-toolbar__count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: var(--lh-snug);
    color: var(--color-text);
}
.results-toolbar__number {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.results-toolbar__meta {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* ---- Selector de vista: control segmentado ---- */
.view-toggle {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}
.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.view-toggle button i {
    font-size: 0.85rem;
    color: var(--color-text-light);
    transition: color var(--dur-fast) var(--ease-out);
}
.view-toggle button:hover {
    background: var(--color-bg);
    color: var(--color-ink);
}
.view-toggle button.active {
    background: var(--color-primary-600);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}
.view-toggle button.active i { color: var(--color-white); }
.view-toggle button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ===================== FILTROS ACTIVOS ===================== */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: calc(-1 * var(--space-2)) 0 var(--space-5);
}
.active-filters__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-ink);
}
.active-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    min-height: 36px;
    padding: 6px 7px 6px 14px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.filter-chip span:first-child { overflow-wrap: anywhere; }
.filter-chip i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.14);
    color: var(--color-primary-dark);
    font-size: 0.7rem;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--color-primary); }
.filter-chip:hover i {
    background: var(--color-primary-600);
    color: var(--color-white);
}
.filter-chip:focus-visible,
.active-filters__clear:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.active-filters__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-primary-dark);   /* rojo oscuro: contraste AA sobre el fondo gris */
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-primary-rgb), 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.active-filters__clear i { font-size: 0.75rem; }
.active-filters__clear:hover { text-decoration-color: currentColor; }

/* ===================== LAYOUT LISTADO + MAPA ===================== */
/* Las 3 vistas las cambia main.js ("Cambio de vista") con las clases
   .with-map (listado y mapa) y .map-only (solo mapa).
   El mapa NUNCA es sticky/fixed y siempre tiene altura explícita. */
.listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}
.listing-results {
    min-width: 0;
    container-type: inline-size;        /* la paginación se adapta al ancho de la columna */
    container-name: results;
}
.listing-layout.with-map {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
}
.listing-layout.with-map .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.listing-layout.map-only { display: block; }
.listing-layout.map-only .listing-results { display: none; }

#propertyMap {
    display: none;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: clamp(420px, 72vh, 680px);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.listing-layout.with-map #propertyMap {
    display: block;
    align-self: start;
}
.listing-layout.map-only #propertyMap {
    display: block;
    height: clamp(480px, 75vh, 760px);
}

/* ===================== PAGINACIÓN ===================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
}
.pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pagination__page,
.pagination__step,
.pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}
.pagination__page,
.pagination__step {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.pagination__page { padding: 0 6px; }
.pagination__step {
    gap: var(--space-2);
    padding: 0 18px;
}
.pagination__step i { font-size: 0.75rem; }
.pagination__step--prev { margin-right: var(--space-2); }
.pagination__step--next { margin-left: var(--space-2); }
a.pagination__page:hover,
a.pagination__step:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}
a.pagination__page:focus-visible,
a.pagination__step:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.pagination__page.current {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.pagination__step.is-disabled {
    color: var(--color-text-light);
    background: transparent;
    opacity: 0.55;
}
.pagination__ellipsis {
    min-width: 28px;
    color: var(--color-text-light);
}
.pagination__status {
    display: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
}

/* Columna angosta (listado y mapa, tablet): flechas sin texto */
@container results (max-width: 640px) {
    .pagination__step { width: 44px; padding: 0; }
    .pagination__step-label { display: none; }
}
/* Mobile: "‹  Página X de Y  ›" en lugar de todos los números */
@container results (max-width: 440px) {
    .pagination { justify-content: space-between; }
    .pagination__pages { display: none; }
    .pagination__status { display: inline; }
    .pagination__step--prev,
    .pagination__step--next { margin: 0; }
}

/* ===================== ESTADO VACÍO ===================== */
.listing-empty {
    max-width: 580px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.listing-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.listing-empty .listing-empty__icon i {
    display: inline;
    margin: 0;
    font-size: 1.5rem;
    color: inherit;
}
.listing-empty h3 {
    margin-bottom: var(--space-2);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
}
.listing-empty p {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--color-text-light);
}
.listing-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
    .listing-layout.with-map .listing-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Columna de tarjetas angosta al lado del mapa: foto más apaisada */
@media (min-width: 993px) and (max-width: 1100px) {
    .listing-layout.with-map .property-card__media { aspect-ratio: 16 / 9; }
}

/* Tablet / mobile: en "Listado y mapa" el mapa va arriba (debajo de los filtros)
   y las tarjetas vuelven a usar todo el ancho */
@media (max-width: 992px) {
    .listing-layout.with-map { grid-template-columns: minmax(0, 1fr); }
    .listing-layout.with-map .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .listing-layout.with-map #propertyMap {
        order: -1;
        height: 420px;
    }
}

@media (max-width: 768px) {
    .listing-page { padding-top: var(--space-5); padding-bottom: var(--space-7); }
    .results-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--space-6);
    }
    .view-toggle { display: flex; }
    .view-toggle button {
        flex: 1 1 auto;
        height: 44px;
        padding: 0 12px;
    }
    .listing-layout.with-map .listing-grid { grid-template-columns: minmax(0, 1fr); }
    .listing-layout.map-only #propertyMap { height: clamp(420px, 70vh, 640px); }
}

@media (max-width: 480px) {
    .view-toggle button i { display: none; }
    .listing-layout.with-map #propertyMap { height: 320px; }
    .listing-empty { padding: var(--space-6) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .view-toggle button,
    .filter-chip,
    .pagination__page,
    .pagination__step { transition: none; }
}