/* ════════════════════════════════════════════════════════════════════
   MULTI-LISTING INDICATOR — "varias inmobiliarias publican esto"
   ════════════════════════════════════════════════════════════════════
   Componente compartido entre ListadoInmuebles.razor y ComprarInmuebles.razor
   (y cualquier card futura). Vive en wwwroot/css en lugar del .razor.css
   scoped porque Blazor inyecta selectores [b-xxx] que no se comparten
   entre componentes — la única forma DRY de tener el mismo badge en N
   pantallas es un stylesheet global.

   Trata el caso "N inmobiliarias venden la misma propiedad" como una
   FEATURE de producto: el comprador puede comparar precios y condiciones,
   eso es valor diferencial frente a infocasas/mercadolibre. La UI tiene
   que comunicarlo, no esconderlo detrás de un pill plano "3 avisos".

   Diseño:
     - Glass morphism (backdrop-filter + bg semi-transparente con gradient)
     - Highlight superior simulando "borde de cristal" (premium feel)
     - Dots apilados con offset negativo tipo "avatares de agencias"
     - Number prominente + label en mayúsculas pequeñas
     - Chevron que aparece on-hover sugiriendo "ver detalle"
     - Pulse sutil 1x al entrar (después estático)
   ════════════════════════════════════════════════════════════════════ */

.li-multi-listing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    position: relative;
    background:
        linear-gradient(135deg,
            rgba(15, 23, 42, 0.78),
            rgba(20, 184, 166, 0.85));
    box-shadow:
        0 4px 14px -4px rgba(15, 118, 110, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.18) inset;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: liMultiPulse 2.4s ease-out 1;
}

@keyframes liMultiPulse {
    0%   { box-shadow: 0 4px 14px -4px rgba(15, 118, 110, 0.55), 0 0 0 0    rgba(94, 234, 212, 0.55), 0 0 0 1px rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.18) inset; }
    35%  { box-shadow: 0 4px 14px -4px rgba(15, 118, 110, 0.55), 0 0 0 10px rgba(94, 234, 212, 0.00), 0 0 0 1px rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.18) inset; }
    100% { box-shadow: 0 4px 14px -4px rgba(15, 118, 110, 0.55), 0 0 0 0    rgba(94, 234, 212, 0.00), 0 0 0 1px rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.18) inset; }
}

.li-multi-listing::before {
    content: "";
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 45%;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: -1;
}

.li-multi-listing:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 22px -6px rgba(15, 118, 110, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset;
}

/* ── Dots apilados ─────────────────────────────────────────────────── */
.li-multi-listing__dots {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.li-multi-listing__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 23, 42, 0.55);
    /* Offset negativo para overlapping tipo "stack de avatares". El primer
       dot queda en 0, el segundo se monta -5px sobre el primero, etc.
       z-index decrece así el primero queda visualmente al frente. */
    margin-left: -5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: calc(10 - var(--dot-idx));
}
.li-multi-listing__dot:first-child { margin-left: 0; }

/* Tres colores distintos para que los dots se lean como "agencias
   diferentes". No es info real (no tenemos las agencias en el group del
   listado), pero refuerza visualmente la idea de pluralidad. */
.li-multi-listing__dot:nth-child(1) { background: linear-gradient(135deg, #fbbf24, #f97316); }
.li-multi-listing__dot:nth-child(2) { background: linear-gradient(135deg, #34d399, #0ea5e9); }
.li-multi-listing__dot:nth-child(3) { background: linear-gradient(135deg, #a78bfa, #ec4899); }

/* ── Texto ─────────────────────────────────────────────────────────── */
.li-multi-listing__text {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}

.li-multi-listing__count {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.li-multi-listing__label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* ── Chevron — aparece on-hover sugiriendo "ver detalle" ─────────── */
.li-multi-listing__arrow {
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.li-multi-listing:hover .li-multi-listing__arrow {
    opacity: 1;
    transform: translateX(0);
}

/* En pantallas chicas reducimos un poco para no robar espacio del card.
   El label "inmobiliarias" se esconde — el dato cuantitativo + dots
   alcanzan para comunicar el concepto en mobile. */
@media (max-width: 480px) {
    .li-multi-listing { padding: 3px 8px 3px 6px; gap: 6px; }
    .li-multi-listing__dot { width: 12px; height: 12px; }
    .li-multi-listing__count { font-size: 0.78rem; }
    .li-multi-listing__label { display: none; }
}

/* Respeto preferencia "reducir movimiento" del usuario. */
@media (prefers-reduced-motion: reduce) {
    .li-multi-listing { animation: none; }
    .li-multi-listing__arrow { transition: opacity 0s; }
}

/* ════════════════════════════════════════════════════════════════════
   MULTI-LISTING v2 — pill neutra con LOGOS REALES de las inmobiliarias
   ════════════════════════════════════════════════════════════════════
   Reemplaza los dots de colores placeholder (que no representaban nada)
   por avatares reales de las agencias que publican la propiedad. Estética
   sobria (glass blanco), pensada para verse profesional sobre la foto.
   Al lado, un pill dorado con estrella + cantidad de avisos destacados.
   ════════════════════════════════════════════════════════════════════ */
.li-multi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.22),
                0 0 0 1px rgba(15, 23, 42, 0.06) inset;
    color: #0f172a;
}
.li-multi__logos { display: inline-flex; align-items: center; flex-shrink: 0; }
.li-multi__logo {
    width: 24px; height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2f6;
    border: 2px solid #fff;
    margin-left: -9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.li-multi__logo:first-child { margin-left: 0; }
.li-multi__logo img { width: 100%; height: 100%; object-fit: cover; }
.li-multi__ini {
    font-size: 10px; font-weight: 800; color: #64748b;
    text-transform: uppercase;
}
.li-multi__text { display: inline-flex; align-items: baseline; gap: 4px; line-height: 1; }
.li-multi__count { font-size: 0.85rem; font-weight: 800; letter-spacing: -0.01em; }
.li-multi__label {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #64748b;
}

/* Pill dorado: estrella + nº de avisos destacados de la propiedad. */
.li-star {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 0.78rem; font-weight: 800;
    box-shadow: 0 2px 10px -2px rgba(217, 119, 6, 0.35),
                0 0 0 1px rgba(217, 119, 6, 0.18) inset;
}
.li-star svg { width: 12px; height: 12px; color: #f59e0b; flex-shrink: 0; }

/* "¡Vamo' arriba!" (potenciado): sólo una flecha naranja chica que convive con
   el badge de inmobiliarias + destacados sin taparlo. */
.li-vamo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: #fff;
    box-shadow: 0 2px 8px rgba(249, 115, 22, .45), 0 0 0 1px rgba(255, 255, 255, .28) inset;
    flex: 0 0 auto;
}
.li-vamo svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
    .li-multi__label { display: none; }
    .li-multi__logo { width: 20px; height: 20px; }
}

/* ════════════════════════════════════════════════════════════════════
   DEDUPE COUNTER — "X avisos repetidos ocultados"
   ════════════════════════════════════════════════════════════════════
   Pill que vive al lado del contador del breadcrumb en ListadoInmuebles.
   Comunica PASIVA y SIEMPRE-VISIBLE el primer diferenciador del producto:
   estamos ocultando los duplicados que otros portales exponen.

   Por qué este lugar y no un banner:
     • Un banner se cierra y nunca más se ve. Esta pill educa cada vez.
     • Está justo al lado del "1.200 propiedades" — el contraste con
       "4.300 avisos repetidos ocultados" cuenta la historia en
       milisegundos sin que el usuario tenga que leer ni una palabra extra.

   Estética:
     • Ícono de "tachar" (X dentro de círculo) = ocultado.
     • Color teal-pale (no agresivo, alineado con el resto del branding).
     • Tooltip al hover para los curiosos que quieren entender por qué.
   ════════════════════════════════════════════════════════════════════ */

.li-dedupe-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(13, 148, 136, 0.12));
    border: 1px solid rgba(13, 148, 136, 0.25);
    /* Color negro (antes teal #0f766e que no se leía bien sobre el fondo
       pale del pill). El ícono y el strong se mantienen teal para conservar
       el énfasis cromático. */
    color: #0f172a;
    font-size: 0.78rem;
    line-height: 1.2;
    cursor: help;
    /* Entrada suave la primera vez que aparece (cuando llegan los results).
       Sólo se dispara 1x porque depende del mount del elemento. */
    animation: liDedupeIn 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes liDedupeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.li-dedupe-counter__ic {
    color: #0d9488;
    flex-shrink: 0;
    opacity: 0.85;
}

.li-dedupe-counter__text {
    white-space: nowrap;
}
.li-dedupe-counter__text strong {
    /* El número queda en negro también para máximo contraste — el énfasis
       lo da el bold + tamaño, no el color. */
    color: #0f172a;
    font-weight: 800;
    margin-right: 3px;
}

/* Mobile: compactar, conservando la info cuantitativa. */
@media (max-width: 600px) {
    .li-dedupe-counter {
        margin-left: 6px;
        padding: 2px 8px 2px 6px;
        font-size: 0.72rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .li-dedupe-counter { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   INMOB FILTER CHIP — "Filtrando por <inmobiliaria> ✕"
   ════════════════════════════════════════════════════════════════════
   Aparece debajo del breadcrumb cuando el listado está filtrado por una
   inmobiliaria específica (ej: el user vino desde /inmobiliarias/X y
   tocó "Ver las N propiedades"). El click en el chip quita el filtro y
   vuelve al listado general preservando otros filtros activos.
   ════════════════════════════════════════════════════════════════════ */

.li-inmob-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 4px;
    padding: 6px 12px 6px 10px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 1.5px solid rgba(15, 23, 42, .18);
    border-radius: 999px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.2);
}
.li-inmob-filter-chip:hover {
    background: rgba(15, 23, 42, .05);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.3);
    text-decoration: none;
}
.li-inmob-filter-chip strong {
    color: var(--color-text, #0f172a);
    font-weight: 700;
}
.li-inmob-filter-chip__close {
    color: var(--color-text-subtle, #64748b);
    opacity: 0.7;
    transition: opacity 160ms ease;
}
.li-inmob-filter-chip:hover .li-inmob-filter-chip__close {
    opacity: 1;
    color: var(--color-error, #e74c3c);
}