/* Comentarios (reseñas/respuestas basadas en MongoDB, ver wwwroot/js/Comentarios/comentarios.js).
   No existía una hoja dedicada para esta sección: el markup tomaba clases prestadas de
   perfil-global.css/PerfilNegocio.css, que no se cargan en la vista de Atracciones. Esta hoja
   se basta a sí misma para el bloque de comentarios sin importar en qué página se use, y se
   enlaza desde las cuatro vistas de Perfil (Negocios, PerfilTranvia, Eventos, Atracciones).

   Breakpoints "desktop-first" (max-width), igual que PerfilNegocio.css: 992 / 767.98 / 575.98 / 400px. */

/* ------------------------------------------------------------------------ */
/* Contenedor y resumen                                                      */
/* ------------------------------------------------------------------------ */

.section-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.75rem;
}

.review-summary-column {
    border-right: 1px solid #eee;
    padding-right: 1.5rem;
}

.section-subtitle {
    font-weight: 700;
}

.rating-stars i {
    margin-right: 2px;
}

.review-summary-bars {
    margin-top: .5rem;
}

/* Filas de estrellas del resumen: filtran la lista al hacer clic (ver comentarios.js). */
.js-comentarios-filtro-estrella {
    cursor: pointer;
    padding: .15rem .3rem;
    margin: 0 -.3rem;
    border-radius: 4px;
    transition: background-color .15s ease-in-out;
}

    .js-comentarios-filtro-estrella:hover {
        background-color: #f8f9fa;
    }

    .js-comentarios-filtro-estrella.filtro-estrella-activo {
        background-color: #fff3cd;
    }

/* ------------------------------------------------------------------------ */
/* Tarjetas de comentario/respuesta                                          */
/* ------------------------------------------------------------------------ */

.review-item-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.review-header .review-user-name {
    color: #212529;
}

/* Modal "Reportar comentario": la X va fuera del flujo del modal-header (position:absolute
   sobre .modal-content, que ya es position:relative por .modalPopUp) para quedar pegada al
   borde superior derecho sin depender del padding/flex que trae Bootstrap 4 por defecto. */
.comentarios-modal-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 1.5rem;
    opacity: .6;
}

    .comentarios-modal-cerrar:hover {
        opacity: 1;
    }

.comentarios-modal-header {
    padding-right: 2.5rem;
}

/* Badge "Oficial" (respuesta del administrador del negocio): antes usaba bg-primary sin
   badge-primary, así que el texto heredaba el color oscuro del párrafo y quedaba casi
   ilegible sobre el azul. */
.comentario-badge-oficial {
    padding: .35em .6em;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
}

.review-content {
    color: #333;
    word-break: break-word;
}

.review-footer {
    row-gap: .5rem;
}

/* Indentación de respuestas: menos sangría en pantallas angostas para no comerse
   el ancho disponible del texto. */
.js-comentario-respuestas {
    border-left-color: #dee2e6 !important;
}

    .js-comentario-respuestas .review-item-card {
        background: #fbfbfc;
    }

/* ------------------------------------------------------------------------ */
/* Grid de miniaturas de imágenes adjuntas a un comentario                   */
/* ------------------------------------------------------------------------ */

.comentario-imagenes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.comentario-imagen-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
}

    .comentario-imagen-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* ------------------------------------------------------------------------ */
/* Formularios (nueva reseña / respuesta / edición)                          */
/* ------------------------------------------------------------------------ */

.js-comentario-estrellas-input i {
    margin-right: 4px;
}

.js-comentario-preview img {
    border: 1px solid #eee;
}

/* Fila de botones Cancelar/Enviar: en desktop se mantiene alineada a la derecha
   (orden natural Cancelar, Enviar); en móvil se apila a ancho completo con el
   botón primario primero. */
.comentario-form-acciones .btn + .btn {
    margin-left: .5rem;
}

/* ------------------------------------------------------------------------ */
/* Botones "cargar más" (reseñas y respuestas)                               */
/* ------------------------------------------------------------------------ */

.js-comentarios-btn-mas,
.js-comentario-btn-mas-respuestas {
    min-width: 200px;
}

/* ------------------------------------------------------------------------ */
/* Breakpoints                                                               */
/* ------------------------------------------------------------------------ */

@media (max-width: 992px) {
    .review-summary-column {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .section-card {
        padding: 1.25rem;
    }

    .js-comentario-respuestas {
        padding-left: 1rem !important;
    }

    .comentario-imagenes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575.98px) {
    .section-card {
        padding: 1rem;
        border-radius: 8px;
    }

    .review-item-card {
        padding: .85rem .9rem;
    }

    .js-comentario-respuestas {
        padding-left: .65rem !important;
    }

    .review-footer {
        flex-direction: column;
        align-items: flex-start !important;
    }

        .review-footer > div {
            width: 100%;
        }

    .js-comentarios-btn-mas,
    .js-comentario-btn-mas-respuestas {
        width: 100%;
    }

    .comentario-form-acciones {
        display: flex;
        flex-direction: column-reverse; /* el botón primario va después en el DOM: al invertir queda primero visualmente */
        gap: .5rem;
    }

        .comentario-form-acciones .btn {
            width: 100%;
            margin: 0 !important;
        }
}

@media (max-width: 400px) {
    .comentario-imagenes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}