/*
 * Capa de modernización del catálogo (v2.0.0).
 *
 * Se carga DESPUÉS de style.css y solo corrige. No se tocó el CSS antiguo para
 * no romper las webs que ya estaban en producción con él.
 *
 * Qué arregla:
 *  1. Tipografía: style.css fija "DM Sans", una fuente que el plugin nunca carga.
 *     El navegador caía en una fuente arbitraria y el buscador desentonaba con
 *     el resto de la web. Ahora hereda la del tema.
 *  2. Anchura: los campos estaban clavados a `calc(25% - 1rem) !important`, o sea
 *     4 columnas siempre, sin importar el ancho del contenedor. En un tema con
 *     la caja de contenido estrecha quedaban espachurrados. Ahora es una rejilla
 *     que se adapta.
 *  3. Color: el botón de buscar tenía #332723 a fuego (el marrón de una marca
 *     concreta). Ahora usa la paleta elegida en los ajustes.
 *  4. Responsive: no había un solo breakpoint. En móvil era inusable.
 */

/* ── Base ──────────────────────────────────────────────────────────────────── */

body.resalesfull-catalog {
    /* Valores de reserva: si el admin no elige nada, se usa la paleta del skin. */
    --rf-radius: 12px;
}

/*
 * Tipografía: barrido total.
 *
 * style.css imponía "DM Sans" en 7 reglas y "Sang-Bleu-Sans" en 2. Ninguna de
 * las dos se carga nunca, así que cada bloque caía en una fuente distinta del
 * sistema y la página parecía un collage. Ir selector por selector es una
 * carrera perdida: cualquier regla que se escape vuelve a romperlo.
 *
 * Por eso aquí sí se usa el martillo: todo lo que cuelgue del catálogo hereda
 * la tipografía del tema (o la elegida en ajustes). Está acotado a las páginas
 * del catálogo, así que no toca nada más de la web.
 */
body.resalesfull-catalog .resalesfull_search,
body.resalesfull-catalog .resalesfull_search *,
body.resalesfull-catalog .containerx,
body.resalesfull-catalog .containerx *,
body.resalesfull-catalog .containerx2,
body.resalesfull-catalog .containerx2 *,
body.resalesfull-catalog #advanced-options,
body.resalesfull-catalog #advanced-options *,
body.resalesfull-catalog .paginationFooter,
body.resalesfull-catalog .paginationFooter *,
body.resalesfull-catalog .SumoSelect,
body.resalesfull-catalog .SumoSelect *,
body.resalesfull-catalog .resalesfull-property-page,
body.resalesfull-catalog .resalesfull-property-page *,
body.resalesfull-catalog .property-container,
body.resalesfull-catalog .property-container * {
    font-family: var(--rf-font, inherit) !important;
}

/*
 * Anchura: los temas de bloques encierran el contenido con
 * `.is-layout-constrained > :where(...)` y un max-width global. Eso mantenía el
 * catálogo dentro de la columna estrecha del artículo. Se libera solo lo del
 * plugin, que necesita respirar.
 */
body.resalesfull-catalog .containerx,
body.resalesfull-catalog .containerx2,
body.resalesfull-catalog .paginationFooter,
body.resalesfull-catalog #advanced-options,
body.resalesfull-catalog #resalesfull-map-canvas,
body.resalesfull-catalog form#resalesfull_search {
    max-width: none !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.resalesfull_search {
    max-width: none;      /* que mande el contenedor del tema, no un 1320px fijo */
    width: 100%;
    padding: 0;
    display: block;       /* el flex con space-between causaba huecos raros */
    margin: 0 0 28px;
}

/*
 * El formulario venía con max-width: 645px, que es de donde salía ese buscador
 * estrecho en mitad de una página ancha.
 */
form#resalesfull_search,
form[name='resalesfull_search'] {
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 8px;
}

.resalesfull_search form,
form#resalesfull_search .resalesfull_search {
    box-shadow: none;
}

/* ── El formulario: rejilla adaptable ──────────────────────────────────────── */

.resalesfull_search {
    --rf-field-min: 190px;
}

.resalesfull_search > .SumoSelect,
.resalesfull_search > .resalesfull_form,
.resalesfull_search > select,
.resalesfull_search > input,
.resalesfull_search > .searchButtons {
    width: 100% !important;   /* anula el calc(25%) del CSS antiguo */
    max-width: none !important;
    margin: 0 !important;
    text-transform: none;
    font-family: inherit !important;
}

form#resalesfull_search .resalesfull_search {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rf-field-min), 1fr));
    gap: 12px;
    align-items: stretch;
    background: var(--rf-bg-soft, #f8f9fa);
    border: 1px solid var(--rf-border, #eaeaeb);
    border-radius: 14px;
    padding: 18px;
}

/* Campos: altura consistente, esquinas suaves, foco visible. */
.resalesfull_search input,
.resalesfull_search select,
.resalesfull_search .SumoSelect > .CaptionCont {
    height: 46px !important;
    min-height: 46px;
    border: 1px solid var(--rf-border, #d9dade) !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--rf-text, #1e1d19) !important;
    padding: 0 14px !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}

.resalesfull_search select.resalesfull_form {
    background-position: right 12px center !important;
}

.resalesfull_search input:focus,
.resalesfull_search select:focus,
.resalesfull_search .SumoSelect.open > .CaptionCont {
    border-color: var(--rf-accent, #1c7fb5) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent, #1c7fb5) 22%, transparent) !important;
    outline: 0 !important;
}

/* SumoSelect (los desplegables múltiples de Localización y Tipo). */
.resalesfull_search .SumoSelect { width: 100% !important; }
.resalesfull_search .SumoSelect > .CaptionCont {
    display: flex !important;
    align-items: center;
}
.resalesfull_search .SumoSelect > .CaptionCont > span {
    font-size: 14px;
    color: var(--rf-text, #1e1d19);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resalesfull_search .SumoSelect > .CaptionCont > span.placeholder {
    color: var(--rf-text-muted, #767781);
    font-style: normal;
}
.resalesfull_search .SumoSelect > .optWrapper {
    border-radius: 10px;
    border-color: var(--rf-border, #d9dade);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .13);
    overflow: hidden;
}

/*
 * Botones: fila propia a lo ancho, alineados a la derecha.
 *
 * Antes ocupaban una celda de la rejilla, así que si los campos llenaban la
 * primera fila justa, los botones caían solos en la segunda dejando tres
 * columnas vacías a su derecha. Con `grid-column: 1 / -1` la fila es suya y el
 * hueco desaparece.
 */
.resalesfull_search > .searchButtons {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.resalesfull_search input[type='submit'] {
    background-color: var(--rf-primary, #332723) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--rf-radius, 10px) !important;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    cursor: pointer;
    padding: 0 34px !important;
    width: auto;
    min-width: 190px;
}

.resalesfull_search input[type='submit']:hover {
    background-color: var(--rf-accent, #8a6f47) !important;
}

.resalesfull_search input[type='reset'] {
    background: #fff !important;
    color: var(--rf-text-muted, #666) !important;
    border-radius: 10px !important;
    cursor: pointer;
    padding: 0 16px !important;
    width: auto;
    text-transform: none;
}

/* Búsqueda avanzada. */
.resalesfull_search .advance-search {
    grid-column: 1 / -1;
    padding: 2px 0 0;
    font-size: 13.5px;
}
.resalesfull_search .advance-search a {
    color: var(--rf-accent, #1c7fb5);
    font-weight: 600;
}
.resalesfull_search #advanced-options {
    grid-column: 1 / -1;
}

/* ── Cabecera de resultados ────────────────────────────────────────────────── */

.containerx2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 22px;
    margin: 0 0 16px;
}
.containerx2 h1 {
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    line-height: 1.25;
    margin: 0;
    flex: 1 1 100%;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--rf-text, #1e1d19);
}

#adv-search-btn {
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: normal;
}
.containerx2 .resultados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
/* Tenía width:25% y float:right, que lo sacaba de la fila y lo estrujaba. */
.containerx2 .searchResult,
#searchResult {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    color: var(--rf-text-muted, #666);
    font-size: 14px;
}
.containerx2 .search-order {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Cambiar entre mapa y lista: era un enlace enorme y subrayado. */
#resalesfull-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--rf-border, #d9dade);
    border-radius: var(--rf-radius, 10px);
    background: #fff;
    color: var(--rf-text, #1e1d19) !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    border-bottom: 1px solid var(--rf-border, #d9dade) !important;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
#resalesfull-map-toggle::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z'/><path d='M9 4v14M15 6v14'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z'/><path d='M9 4v14M15 6v14'/></svg>") center/contain no-repeat;
}
#resalesfull-map-toggle:hover {
    border-color: var(--rf-accent, #8a6f47) !important;
    color: var(--rf-accent, #8a6f47) !important;
}

/* ── Búsqueda avanzada ─────────────────────────────────────────────────────── */

#advanced-options {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    padding: 16px 0 4px !important;
    margin: 0 !important;
}
#advanced-options select {
    width: 100% !important;
    text-transform: none !important;
    height: 46px;
    border: 1px solid var(--rf-border, #d9dade) !important;
    border-radius: var(--rf-radius, 10px) !important;
    background-color: #fff !important;
    font-size: 14px !important;
    padding: 0 14px !important;
}
.rf-adv-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--rf-text-muted, #767781);
    font-size: 13.5px;
}
.containerx2 .search-order select {
    height: 42px;
    border: 1px solid var(--rf-border, #d9dade);
    border-radius: 10px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
}

/* ── Rejilla de resultados ─────────────────────────────────────────────────── */

.containerx {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px 22px;
    padding: 0;
}

/*
 * Las tarjetas van envueltas en un <a>, así que el tema les aplicaba su estilo
 * de enlace: subrayado (o border-bottom) en la descripción y en el precio, que
 * es lo que hacía que pareciesen enlaces rotos.
 */
.containerx a,
.containerx a:hover,
.containerx a:focus,
.cardx a,
.cardx h3,
.cardx .descriptionx,
.cardx .pricex {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;   /* algunos temas subrayan con degradado */
}

.containerx a { color: inherit; }

.cardx {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rf-border, #eaeaeb);
    border-radius: var(--rf-radius, 12px);
    overflow: hidden;
    background: #fff;
    transition: box-shadow .18s, transform .18s;
}
.cardx:hover {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    transform: translateY(-2px);
}

/* La proporción cuadrada recortaba mucho; 4:3 luce mejor en inmobiliaria. */
.cardx .image-containerx {
    padding-bottom: 70%;
    background: var(--rf-bg-soft, #f1f2f4);
}

.cardx .card-contentx {
    font-family: inherit;
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.cardx h3 {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
    padding-top: 0;
    letter-spacing: .01em;
}

.cardx .descriptionx {
    /*
     * Tenía height fijo de 80px (cortaba a mitad de palabra) y font-weight 200,
     * un peso tan fino que sobre blanco casi no se leía. Peso normal y color
     * con contraste suficiente.
     */
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 0;
    letter-spacing: normal;
    font-size: 13.5px;
    font-weight: 400 !important;
    line-height: 1.55;
    color: #55554f !important;   /* ~7:1 sobre blanco */
}

/* El <br> que mete la API partía la descripción en seco. */
.cardx .descriptionx br { display: none; }

.cardx .pricex {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: normal;
    color: var(--rf-primary, #332723);
    margin-top: auto;
    padding-top: 6px;
}

/* ── Paginación ────────────────────────────────────────────────────────────── */

.paginationFooter {
    display: flex;
    justify-content: center;
    margin: 32px 0 8px;
}
.paginationFooter a,
.paginationFooter span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    margin: 0 3px;
    border: 1px solid var(--rf-border, #e2e3e6);
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    color: var(--rf-text, #1e1d19);
}
.paginationFooter a:hover {
    border-color: var(--rf-accent, #1c7fb5);
    color: var(--rf-accent, #1c7fb5);
}

/* ── Ficha de propiedad ────────────────────────────────────────────────────── */

.resalesfull-property-page,
.resalesfull-catalog .property-container,
.resalesfull-catalog .left-section,
.resalesfull-catalog .right-section {
    max-width: none;
}

/* El contenido de la ficha se quedaba encajonado igual que el buscador. */
.resalesfull-catalog .property-container {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 34px;
    align-items: start;
}

.resalesfull-catalog .right-section {
    position: sticky;
    top: 24px;
    background: var(--rf-bg-soft, #f8f9fa);
    border: 1px solid var(--rf-border, #eaeaeb);
    border-radius: var(--rf-radius, 12px);
    padding: 22px;
}

/* Jerarquía de texto coherente: antes convivían tamaños sin relación. */
.resalesfull-catalog .left-section h1 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 0 0 10px; font-weight: 600; }
.resalesfull-catalog .left-section h2 { font-size: 1.25rem; line-height: 1.3; margin: 28px 0 12px; font-weight: 600; }
.resalesfull-catalog .left-section h3 { font-size: 1.05rem; margin: 22px 0 10px; font-weight: 600; }
.resalesfull-catalog .left-section p,
.resalesfull-catalog .left-section li { font-size: 15px; line-height: 1.65; }
.resalesfull-catalog .right-section h2 { font-size: 1.1rem; margin: 0 0 14px; font-weight: 600; }

.resalesfull-catalog .rf-price,
.resalesfull-catalog .pricex {
    color: var(--rf-primary, #332723);
    font-weight: 700;
}

/* ── Botones de la ficha (guardar, compartir, avisar de precio) ─────────────── */

/*
 * Estaban todos pegados entre sí y el de "Save" salía sin borde, porque la hoja
 * de paletas solo le daba fondo y color. Aquí se les da forma de botón de verdad
 * y se separan del contenido de arriba y de abajo.
 */
.resalesfull-catalog .rf-btn,
.resalesfull-catalog .rf-fav-toggle,
.resalesfull-catalog .rf-follow-toggle,
.resalesfull-catalog .rf-share-buttons a,
.resalesfull-catalog .rf-share-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--rf-border, #d9dade) !important;
    border-radius: var(--rf-radius, 12px);
    background: #fff;
    color: var(--rf-text, #1e1d19);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.resalesfull-catalog .rf-btn:hover,
.resalesfull-catalog .rf-share-buttons a:hover,
.resalesfull-catalog .rf-share-buttons button:hover {
    border-color: var(--rf-accent, #8a6f47) !important;
    color: var(--rf-accent, #8a6f47);
    background: var(--rf-bg-soft, #f8f9fa);
}

/* El botón principal sí va relleno, para que destaque sobre el resto. */
.resalesfull-catalog .rf-lead-form button[type='submit'],
.resalesfull-catalog .rf-btn--primary {
    background: var(--rf-primary, #332723);
    border-color: var(--rf-primary, #332723) !important;
    color: #fff;
    width: 100%;
}
.resalesfull-catalog .rf-lead-form button[type='submit']:hover {
    background: var(--rf-accent, #8a6f47);
    border-color: var(--rf-accent, #8a6f47) !important;
    color: #fff;
}

/* Estado activo de favorito / seguimiento. */
.resalesfull-catalog .rf-fav-toggle.rf-fav-active,
.resalesfull-catalog .rf-follow-toggle.rf-follow-active {
    background: var(--rf-accent, #8a6f47) !important;
    border-color: var(--rf-accent, #8a6f47) !important;
    color: #fff !important;
}

/* Separación entre los tres bloques de acciones, que salían pegados. */
.resalesfull-catalog .rf-actions,
.resalesfull-catalog .rf-share-buttons,
.resalesfull-catalog .rf-follow-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

.resalesfull-catalog .rf-follow-toggle { margin-top: 4px; }

/* Los emoji de WordPress dentro de los botones salían enormes. */
.resalesfull-catalog .rf-btn img.emoji {
    width: 1.05em;
    height: 1.05em;
    margin: 0;
    vertical-align: -.15em;
}

/* Botón de favorito flotando sobre la foto de la tarjeta. */
.rf-fav-toggle-card {
    min-height: 0 !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .93) !important;
    border: 1px solid rgba(0, 0, 0, .07) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
}

/* ── Formulario de contacto de la ficha ────────────────────────────────────── */

.rf-lead-form p { margin: 0 0 12px; }

.rf-lead-form input[type='text'],
.rf-lead-form input[type='email'],
.rf-lead-form input[type='tel'],
.rf-lead-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--rf-border, #d9dade);
    border-radius: var(--rf-radius, 12px);
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--rf-text, #1e1d19);
    box-sizing: border-box;
}

.rf-lead-form input:focus,
.rf-lead-form textarea:focus {
    border-color: var(--rf-accent, #8a6f47);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-accent, #8a6f47) 20%, transparent);
}

.rf-lead-form .rf-consent { margin: 14px 0; color: var(--rf-text-muted, #666); }

/* ── Móvil ─────────────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
    form#resalesfull_search .resalesfull_search {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 10px;
    }
    .containerx {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px 14px;
    }
    .containerx2 .resultados {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .resalesfull-catalog .property-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .resalesfull-catalog .right-section { position: static; }
}

@media (max-width: 480px) {
    .containerx { grid-template-columns: 1fr; }
    .resalesfull-catalog .rf-actions .rf-btn,
    .resalesfull-catalog .rf-follow-toggle { width: 100%; }
}