/* =========================================
   PÁGINA DE RESEÑAS (estructura)
   Reutiliza resenas.css + dashboard.css
========================================== */

.page-resenas {
    margin-top: 2rem;
}

.resenas-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.area-feed-resenas,
.area-mejor-calificadas {
    background-color: var(--color-tarjeta);
    border-radius: 12px;
    padding: 1.5rem;
}

/* Separación entre tarjetas de reseña */
.lista-vertical-resenas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.icono-seccion {
    width: 18px;
    height: 18px;
    fill: var(--color-texto-secundario, #aaa);
}

.icono-seccion-acento {
    fill: var(--color-acento-purpura);
}

@media (max-width: 1024px) {
    .resenas-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* ── Barrera de desbordamiento ── */
    .page-resenas {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Grid: flex columna, no puede crecer más que su contenedor */
    .resenas-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 0;
        overflow: hidden;
        max-width: 100%;
    }

    /* Ambas secciones: contenidas estrictamente
       overflow:hidden impide que el min-content de los hijos expanda el flex-item */
    .area-feed-resenas,
    .area-mejor-calificadas {
        padding: 0.875rem 0.75rem;
        border-radius: 10px;
        overflow: hidden;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mejor calificadas sube al top */
    .area-mejor-calificadas {
        order: -1;
    }

    /* Lista del feed: tampoco puede desbordarse */
    .area-feed-resenas .lista-vertical-resenas {
        overflow: hidden;
        min-width: 0;
    }

    /* Carrusel horizontal: overflow-x:auto crea su propio scroll container
       independiente del overflow:hidden de la sección padre */
    .area-mejor-calificadas .lista-vertical-resenas {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-width: 0;
    }

    .area-mejor-calificadas .lista-vertical-resenas::-webkit-scrollbar {
        display: none;
    }

    /* Cards del carrusel */
    .area-mejor-calificadas .lista-vertical-resenas .tarjeta-resena-universal {
        min-width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
        flex-shrink: 0;
        scroll-snap-align: start;
        overflow: hidden;
    }

    /* Estado vacío en carrusel */
    .area-mejor-calificadas .lista-vertical-resenas .estado-vacio {
        min-width: calc(100% - 1rem);
    }

    /* Cabecera de sección más compacta */
    .header-seccion {
        margin-bottom: 0.75rem;
    }
}