/*
 * legacy-ui.css — FASE 3 del refactor (2026-08-14): estilos que vivían
 * INLINE en core/helpers.php (hc_aviso_assets, lc_fav_button_html,
 * lc_ads_containment_css), ahora en un archivo cacheable.
 *
 * ⚠️ UCSS de LiteSpeed: las clases que pone el JS en tiempo de ejecución
 * (.is-abierto, .is-active, .is-anim) están en el litespeed_ucss_whitelist
 * del tema (HC_UCSS_WHITELIST_V1). Si un estado nuevo nace por JS, va ahí
 * TAMBIÉN — si no, funciona en local y muere en producción.
 */

/* ── HC_AVISOS_V1 — semáforos: el aviso ANTES del clic ─────────────── */

.hc-aviso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid;
    box-sizing: border-box;
    font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: 6px;
    -webkit-user-select: none;
    user-select: none;
    flex: 0 0 auto;
}
.hc-aviso--info    { color: #1d4ed8; border-color: #1d4ed8; background: #eff6ff; }
.hc-aviso--aviso   { color: #8a5a00; border-color: #c9962c; background: #fff8e5; }
.hc-aviso--peligro { color: #b32d2e; border-color: #b32d2e; background: #fdeceb; }

.hc-aviso__globo {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    width: 270px;
    max-width: 72vw;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1a1f24;
    color: #eee6d6;
    text-align: left;
    font: 400 12px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    z-index: 100000;
    pointer-events: none;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
}
.hc-aviso__globo::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #1a1f24;
}
.hc-aviso:hover .hc-aviso__globo,
.hc-aviso:focus .hc-aviso__globo,
.hc-aviso.is-abierto .hc-aviso__globo {
    opacity: 1;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
    .hc-aviso__globo { transition: none; }
}

/* ── LC_FAVORITOS_V1 — corazón «Guardar en favoritos» ──────────────── */

/* Contenedores de foto donde el corazón va SOBRE la imagen (esquina). Se listan
   TODOS los wrappers del feed para que una reorganización de tarjetas no vuelva a
   «perder» el corazón (regresión recurrente): quede absoluto en cualquiera de ellos. */
.lc-card-image-wrap,
.lc-bkrow-media,
.lc-card-media,
.lc-property-card .lc-bkrow-media { position: relative; }

.lc-fav-btn {
    width: 34px;
    height: 34px;
    /* min-* y padding EXPLÍCITOS: el bloque móvil de frontend.css lleva un
       `button { min-height:44px; padding:10px 18px }` global — sin esto el
       círculo de 34 px sale OVALADO en el teléfono (el «huevo»). */
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(11, 16, 20, .62);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, background .15s, color .15s;
    z-index: 5;
}
.lc-card-image-wrap .lc-fav-btn,
.lc-bkrow-media .lc-fav-btn,
.lc-card-media .lc-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}
/* HC_ICONOS_SVG_V2 (2026-08-14): el corazón dejó de ser un `<i>` de Font Awesome
   (que sin esa fuente pintaba un círculo VACÍO) y pasa a ser el SVG propio. */
.lc-fav-btn .lc-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.lc-fav-btn:hover { transform: scale(1.15); background: rgba(11, 16, 20, .85); }
.lc-fav-btn.is-active { color: #e0245e; background: rgba(255, 255, 255, .92); }
.lc-fav-btn.is-anim i,
.lc-fav-btn.is-anim .lc-ic { animation: lcFavPop .35s ease; }
@keyframes lcFavPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .lc-fav-btn,
    .lc-fav-btn.is-anim i,
    .lc-fav-btn.is-anim .lc-ic { transition: none; animation: none; }
}

/* ── HC_ADS_CONTENCION_GLOBAL_V1 — que un banner NUNCA se salga de su caja ──
   Raíz común: un creativo de partner con position:absolute se ancla al primer
   ancestro POSICIONADO — la caja del banner con position:relative +
   overflow:hidden lo ENCIERRA, y max-width:100% impide que un creativo ancho
   empuje la columna. Una sola regla, en todas las páginas. */

.lcg-banner-zone,
.lcg-bz,
.lcg-bz-wrap,
.hcad-embed,
.hcad-wrap,
.lc-side-ad,
[class*="banner-zone"],
[class*="ad-zone"] {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}
/* Ancho contenido en TODO lo que va dentro (imagen, iframe, ins, enlace). */
.lcg-banner-zone iframe, .lcg-banner-zone img, .lcg-banner-zone ins, .lcg-banner-zone a,
.hcad-embed iframe, .hcad-embed img,
.hcad-wrap iframe, .hcad-wrap img,
.lc-side-ad iframe, .lc-side-ad img, .lc-side-ad ins { max-width: 100% !important; }
/* Altura automática SOLO en imágenes; a un iframe NO (le pondría 0 de alto). */
.lcg-banner-zone img, .hcad-embed img, .hcad-wrap img, .lc-side-ad img { height: auto; }