/* /Pages/Client/CommerceDetail.razor.rz.scp.css */
.cd-banner:has(> .cd-banner__image[src$="omnidate-banner-placeholder.svg"]) .cd-banner__image[b-damqpq0avf] {
    opacity: 0;
    pointer-events: none;
}

.cd-banner:has(> .cd-banner__image[src$="omnidate-banner-placeholder.svg"]) .cd-banner__overlay[b-damqpq0avf] {
    background: linear-gradient(135deg, rgba(37, 99, 235, .12) 0%, transparent 65%);
}
/* /Pages/Index.razor.rz.scp.css */
.inicio-layout[b-y1kzmvei1q] {
    /* Comentario: el contenedor principal ahora ocupa todo el ancho disponible respetando la altura libre bajo la barra fija */
    width:100%;
    min-height:calc(100vh - var(--navbar-height, 72px)); /* Comentario: evitamos que el contenido se oculte detrás de la navbar */
    margin:0;
    /*padding:1.5rem; /* Comentario: mantenemos el acolchado interior habitual del landing */
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}
/* ...other rules unchanged... */
.inicio-hero[b-y1kzmvei1q] { display:flex; justify-content:space-between; align-items:center; padding:1rem; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border-radius:12px; }
.lista-card[b-y1kzmvei1q] {
    /* Comentario: toda la columna (filtros + tarjetas) controla el desplazamiento vertical y permite que los filtros desaparezcan del viewport al avanzar */
    display:flex;
    flex-direction:column;
    gap:1rem;
    /* remove direct height/overflow here; use .scroll-card as the scroll container */
    flex:1 1 0;
    min-height:0;
    position:relative; /* para sticks */
    -webkit-overflow-scrolling:touch;
}

/* Specific scroll container requested by user */
.scroll-card[b-y1kzmvei1q] {
    /* Comentario: este elemento se vuelve la columna desplazable */
    flex: 1 1 0; /* permite que crezca y comparta el espacio con el mapa */
    min-height: 0; /* permite que el ítem flex se contraiga y habilite el scroll interno */
    height: 100%; /* Comentario: garantiza que la tarjeta lista respete la misma altura del mapa */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* .lista-header should not be sticky; the entire column scrolls together */
.lista-header[b-y1kzmvei1q] {
    /* Comentario: la cabecera ahora forma parte del flujo y se desplaza con la columna */
    flex-shrink:0;
    position:static;
    top:auto;
    z-index:1;
    background:transparent;
    padding-top:0;
    padding-bottom:0;
}

/* Ensure the list itself does not create its own scrollbar */
.lista-comercios[b-y1kzmvei1q] {
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1 1 auto; /* allow the list area to grow and scroll inside the .lista-card */
    min-height:0; /* important for proper flexbox scrolling */
    padding-right:0;
    overflow:auto; /* internal scrolling for list items */
}
.comercio-card[b-y1kzmvei1q] {
    /* Comentario: altura consistente de cada tarjeta para evitar saltos visuales dentro del contenedor */
    flex:0 0 auto;
    height:auto;
    min-height:160px; /* reducido para evitar tarjetas excesivamente altas que causen problemas de scroll */
    transition:border-color .25s ease, box-shadow .25s ease;
}

.comercio-card.destacado[b-y1kzmvei1q] {
    /* Comentario: borde y sombra temporal para resaltar la tarjeta asociada al marcador seleccionado */
    border:2px solid #667eea;
    box-shadow:0 0 0 4px rgba(102, 126, 234, 0.18);
}
.lista-filtros[b-y1kzmvei1q] {
    border-bottom:1px solid #e2e8f0;
    padding-bottom:1rem;
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    /* transición para mostrar/ocultar suavemente cuando el contenedor se desplaza */
    transition: max-height .22s ease, opacity .18s ease, padding .18s ease, border-bottom .18s ease;
    max-height:1000px;
    overflow:hidden;
    background:transparent;
}
.lista-filtros.oculta[b-y1kzmvei1q] { display:none; }
.lista-filtros.visible[b-y1kzmvei1q] { display:flex; }
.filtros-principales[b-y1kzmvei1q] { display:flex; flex-direction:column; gap:0.75rem; }
.campo-busqueda .form-control[b-y1kzmvei1q] { border-radius:9999px; padding-left:1rem; }
.acciones-ubicacion[b-y1kzmvei1q] { display:flex; flex-direction:column; gap:0.5rem; }
.filtro-label[b-y1kzmvei1q] { font-weight:600; color:#4a5568; }
.acciones-ubicacion .btn[b-y1kzmvei1q] { align-self:flex-start; }
.categoria-chip.activo[b-y1kzmvei1q] { background:#667eea; color:#fff; border-color:#667eea; }

/* Cuando el usuario desplaza la columna .lista-card, aplicamos la clase .scrolled
   y contraemos visualmente la sección de filtros. */
.lista-card.scrolled .lista-filtros[b-y1kzmvei1q] {
    max-height:0;
    padding-bottom:0;
    border-bottom:0;
    opacity:0;
    pointer-events:none;
}

/* Ajuste para que el contenido principal no fuerce el alto y permita el scroll en la columna */
.inicio-contenido[b-y1kzmvei1q] {
    /* Comentario: la sección de columnas ahora se expande y aprovecha todo el alto restante de la vista */
    flex:1 1 auto;
    display:grid;
    gap:1.5rem;
    grid-template-columns:1fr;
    width:100%;
    min-height:0;
    align-items:stretch; /* ensure children stretch to equal height */
    grid-auto-rows: 1fr; /* ensure grid rows split available height so children match heights */
}
.inicio-contenido > *[b-y1kzmvei1q] {
    /* Comentario: evitamos que los hijos del grid fuercen el alto y permitimos que se contraigan con el scroll */
    min-height:0;
    height:100%;
}
.mapa-card[b-y1kzmvei1q], .lista-card[b-y1kzmvei1q] {
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(15,23,42,0.08);
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    /* Comentario: ocupamos el mismo alto dentro del grid para alinear mapa y lista */
    flex:1 1 0;
    height:100%;
    min-height:0;
    align-self:stretch;
}
.mapa-interactivo[b-y1kzmvei1q] { width:100%; height:100%; min-height:0; border-radius:8px; overflow:hidden; display:flex; flex:1 1 auto; box-sizing:border-box; }
@media (max-width: 991.98px) {
    /* Comentario: en resoluciones menores acotamos la altura para mantener visible el mapa y permitir desplazamiento interno */
    .inicio-contenido > .mapa-card[b-y1kzmvei1q],
    .inicio-contenido > .lista-card[b-y1kzmvei1q] {
        height:auto;
        max-height:none;
    }
    .lista-card[b-y1kzmvei1q] {
        max-height:70vh;
        height:auto;
    }
    .scroll-card[b-y1kzmvei1q] {
        height:auto;
    }
}
@media (min-width: 992px) {
    .inicio-contenido[b-y1kzmvei1q] { grid-template-columns:1fr 1fr; grid-auto-rows: 1fr; }
    /* Comentario: eliminamos la altura mínima fija para que ambas columnas se igualen automáticamente */
    /* .mapa-interactivo { min-height:480px; } */
    .inicio-contenido > .mapa-card[b-y1kzmvei1q],
    .inicio-contenido > .lista-card[b-y1kzmvei1q] {
        /* Comentario: altura consistente para ambas columnas en escritorio */
        height:clamp(420px, 72vh, 680px);
        max-height:clamp(420px, 72vh, 680px);
    }
}

@media (min-width: 768px) {
    .filtros-principales[b-y1kzmvei1q] { flex-direction:row; align-items:flex-end; }
    .campo-busqueda[b-y1kzmvei1q] { flex:1; }
    .acciones-ubicacion[b-y1kzmvei1q] { flex:0 0 auto; align-items:flex-end; }
    .acciones-ubicacion .btn[b-y1kzmvei1q] { align-self:auto; }
}

@media (max-width: 575.98px) {
    /* Ajuste móvil: las imágenes se reducen para no dominar el ancho del card */
    .comercio-media[b-y1kzmvei1q] { width:96px; height:96px; }
}

/* ...other rules unchanged... */
