/**
 * Viviaza © 2026 — Todos los derechos reservados.
 *
 * Tipo de archivo: CSS
 * Nombre del archivo: buscar.css
 * Versión nueva: 1.0.0
 * Tipo de cambio: major (archivo nuevo)
 * Fecha de creación: 21/05/2026
 * Fecha de modificación: 21/05/2026
 *
 * Descripción: Estilos exclusivos de la página de búsqueda (buscar.php).
 *              Incluye:
 *              - Hero compacto con buscador + tabs (Comprar/Rentar).
 *              - Barra sticky de filtros + ordenamiento.
 *              - Chips de filtros activos con × para quitar.
 *              - Header de resultados con contador + toggle de vista.
 *              - Grid de tarjetas (reutiliza .tarjeta-anuncio).
 *              - Paginación SEO-friendly.
 *              - Empty state amigable.
 *              - Bloque SEO regional.
 *
 *              Consume EXCLUSIVAMENTE tokens de _tokens.css.
 *              Reutiliza .chip, .btn de _components.css.
 *              Reutiliza .tarjeta-anuncio de tarjeta-anuncio.css.
 *
 *              Mobile-first:
 *              - Filtros: scroll horizontal en móvil, fila normal en desktop.
 *              - Grid: 1 col móvil → 2 col tablet → 3 col desktop.
 *
 *              CWV:
 *              - Sticky filters con position: sticky (sin JS).
 *              - aspect-ratio en imágenes.
 *
 * Descripción del cambio: Creación inicial.
 *
 * Estado: listo para producción
 */

/* ============================================================
   1) HERO COMPACTO
============================================================ */
.buscar-hero {
    background: var(--c-primary);
    padding-block: var(--space-6);
    color: var(--c-text-on-dark);
}

.buscar-hero__form {
    max-width: 880px;
    margin-inline: auto;
}

.buscar-hero__tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px;
    border-radius: var(--radius-pill);
    gap: 3px;
    margin-bottom: var(--space-3);
}

.buscar-hero__tab {
    background: transparent;
    border: none;
    padding: 7px 18px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition);
}

.buscar-hero__tab:hover {
    color: var(--c-text-on-dark);
}

.buscar-hero__tab.is-activa {
    background: var(--c-bg-alt);
    color: var(--c-primary);
}

.buscar-hero__pildora {
    display: flex;
    background: var(--c-bg-alt);
    border-radius: var(--radius-pill);
    padding: 5px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.30);
}

.buscar-hero__campo {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    min-width: 0;
}

.buscar-hero__campo i {
    color: var(--c-accent);
    flex-shrink: 0;
}

.buscar-hero__campo input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--c-text);
    padding: 12px 0;
    outline: none;
    min-width: 0;
}

.buscar-hero__boton {
    background: var(--c-action);
    color: var(--c-text-on-dark);
    border: none;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--transition);
    flex-shrink: 0;
}

.buscar-hero__boton:hover {
    background: var(--c-action-dark);
}

/* ============================================================
   2) BARRA STICKY DE FILTROS
============================================================ */
.buscar-filtros {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
}

.buscar-filtros__interior {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.buscar-filtros__interior::-webkit-scrollbar {
    display: none;
}

.buscar-filtros__chip {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-primary);
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.buscar-filtros__chip:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-border-strong);
}

.buscar-filtros__chip i:last-child {
    font-size: 0.7em;
    opacity: 0.6;
}

.buscar-filtros__separador {
    width: 1px;
    height: 28px;
    background: var(--c-border);
    flex-shrink: 0;
    margin-inline: var(--space-2);
}

.buscar-filtros__orden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--c-text-dim);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
    margin-left: auto;
}

.buscar-filtros__orden span {
    white-space: nowrap;
}

.buscar-filtros__orden select {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--c-border);
    padding: 6px 4px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: var(--fw-bold);
    cursor: pointer;
    outline: none;
}

.buscar-filtros__orden select:focus {
    border-bottom-color: var(--c-action);
}

/* ============================================================
   3) CHIPS DE FILTROS ACTIVOS
============================================================ */
.buscar-chips {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}

.buscar-chips__interior {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    flex-wrap: wrap;
}

.buscar-chips__titulo {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: var(--space-1);
}

.buscar-chips__limpiar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--c-danger);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast);
}

.buscar-chips__limpiar:hover {
    background: var(--c-danger-soft);
}

/* Chip activo: hereda de .chip.is-active de _components.css */
.buscar-chips a.chip {
    text-decoration: none;
}

/* ============================================================
   4) HEADER DE RESULTADOS
============================================================ */
.buscar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    padding-block: var(--space-6) var(--space-4);
    flex-wrap: wrap;
}

.buscar-header__titulo {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    margin: 0;
    line-height: 1.2;
}

.buscar-header__titulo strong {
    color: var(--c-accent);
    font-weight: var(--fw-black);
}

.buscar-header__contexto {
    margin: var(--space-1) 0 0;
    color: var(--c-text-dim);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.buscar-header__vista {
    display: inline-flex;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 3px;
    gap: 3px;
}

.buscar-vista {
    background: transparent;
    border: none;
    padding: 7px 14px;
    color: var(--c-text-dim);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.buscar-vista:hover {
    color: var(--c-primary);
}

.buscar-vista.is-activa {
    background: var(--c-primary);
    color: var(--c-text-on-dark);
}

/* ============================================================
   5) GRID DE RESULTADOS
============================================================ */
.buscar-resultados {
    padding-block: 0 var(--space-12);
}

.buscar-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 767px) {
    /* En móvil: forzar 1 columna (sin scroll horizontal como en el home) */
    .buscar-grid {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        padding-bottom: 0;
        margin-inline: 0;
        padding-inline: 0;
    }
    .buscar-grid > .tarjeta-anuncio {
        flex: none;
        max-width: 100%;
        scroll-snap-align: none;
    }
}

/* ============================================================
   6) EMPTY STATE
============================================================ */
.buscar-vacio {
    text-align: center;
    padding-block: var(--space-12);
    max-width: 600px;
    margin: 0 auto;
}

.buscar-vacio__icono {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-5);
    background: var(--c-bg-soft);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-3xl);
    color: var(--c-text-dim);
}

.buscar-vacio h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    color: var(--c-primary);
    margin-bottom: var(--space-3);
}

.buscar-vacio p {
    color: var(--c-text-dim);
    margin-bottom: var(--space-5);
    font-size: var(--fs-md);
}

.buscar-vacio__opciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.buscar-vacio__alerta {
    font-size: var(--fs-sm);
    margin: 0;
    padding: var(--space-4);
    background: var(--c-bg-soft);
    border-radius: var(--radius);
}

.buscar-vacio__alerta a {
    color: var(--c-action);
    font-weight: var(--fw-bold);
    text-decoration: none;
}

/* ============================================================
   7) PAGINACIÓN
============================================================ */
.buscar-paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-8) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.buscar-paginacion__info {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--c-text-dim);
}

.buscar-paginacion__info strong {
    color: var(--c-primary);
}

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

.buscar-paginacion__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.buscar-paginacion__btn:hover {
    background: var(--c-bg-soft);
    border-color: var(--c-border-strong);
    color: var(--c-action);
}

.buscar-paginacion__btn.is-activa {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-text-on-dark);
}

.buscar-paginacion__elipsis {
    padding: 0 var(--space-1);
    color: var(--c-text-muted);
    font-weight: var(--fw-bold);
}

/* ============================================================
   8) BLOQUE SEO REGIONAL
============================================================ */
.buscar-seo {
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    padding-block: var(--space-10);
}

.buscar-seo h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    color: var(--c-primary);
    margin-bottom: var(--space-4);
}

.buscar-seo h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    color: var(--c-primary);
    margin: var(--space-5) 0 var(--space-2);
}

.buscar-seo p {
    color: var(--c-text);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-3);
}

.buscar-seo strong {
    color: var(--c-primary);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 767px) {
    .buscar-hero { padding-block: var(--space-4); }
    .buscar-hero__pildora { flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); }
    .buscar-hero__campo { padding: var(--space-2) var(--space-3); background: var(--c-bg); border-radius: var(--radius); }
    .buscar-hero__campo input { padding: 8px 0; }
    .buscar-hero__boton { width: 100%; padding: 12px; border-radius: var(--radius); }

    .buscar-filtros__orden { margin-left: 0; }
    .buscar-filtros__separador { display: none; }

    .buscar-header { flex-direction: column; align-items: flex-start; }
    .buscar-header__vista { width: 100%; justify-content: center; }
    .buscar-vista { flex: 1; padding: 8px; }

    .buscar-paginacion {
        flex-direction: column-reverse;
        align-items: center;
    }
}