/* ===================================
   Archivo: opiniones.css
   version: 1.1.0
   =================================== */

/* ===================================
   ESTILOS BASE (DESKTOP)
   =================================== */

/* CONTENEDOR PRINCIPAL */
#opiniones-container {display: flex;gap: 30px;max-width: 1200px;margin: 0 auto;padding: 20px;}

/* SIDEBAR */
.sidebar-completo {display: flex;}
.opiniones-lista {flex: 1;min-width: 0;}

/* CAJA OPINIONES AJAX */
.opiniones-ajax-container {display: flex;flex-direction: column;gap: 20px;width: 100%;}
.opiniones-ajax-container .opiniones-lista {width: 100%;margin-top: 0;border: 1px solid #ccc; box-sizing: border-box;border-radius: 8px;}
#caja-opiniones-ajax.activo {display: block;}

/* RESUMEN SIDEBAR */
.resumen-sidebar {height: 100%;border-radius: 8px;text-align: center;border: 1px solid #ccc;box-sizing: border-box;align-content: center;}

/* VALORACIÓN MEDIA */
.valoracion-media-grande {margin-bottom: 10px;}
.valoracion-media-grande .numero {font-size: 48px;font-weight: bold;color: #333;line-height: 1;}
.valoracion-media-grande .de-5 {font-size: 24px;color: #666;font-weight: normal;}

/* ESTRELLAS GRANDES */
.estrellas-grandes {margin-bottom: 10px;}
.estrellas-grandes .estrella {font-size: 28px;margin: 0 2px;display: inline-block;}
.estrellas-grandes .estrella.llena {color: #ffc107;}
.estrellas-grandes .estrella.media {background: linear-gradient(90deg, #ffc107 50%, #ddd 50%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.estrellas-grandes .estrella.vacia {color: #ddd;}

/* TEXTO VALORACIÓN */
.texto-valoracion {font-weight: 600;color: #555;margin-bottom: 5px;}
.total-opiniones {color: #888;}

/* SIN OPINIONES */
.sin-opiniones-resumen {padding: 20px 0;}
.sin-opiniones-resumen .icono {font-size: 48px;margin-bottom: 10px;opacity: 0.5;}
.sin-opiniones-resumen .texto {font-size: 18px;font-weight: 600;color: #666;margin-bottom: 5px;}
.sin-opiniones-resumen .subtexto {font-size: 14px;color: #999;}

/* SEPARADOR Y FILTROS */
.separador-sidebar {height: 1px;background: #e0e0e0;margin: 20px 0;}
.filtros-sidebar {padding: 20px;border-radius: 8px;border: 1px solid #ccc;box-sizing: border-box;}
.filtros-titulo {font-weight: 600;margin-bottom: 20px;color: #333;}

/* ESTRELLAS RESUMEN */
.estrellas-resumen {margin-bottom: 20px;}
.estrella-fila {display: flex;align-items: center;padding:0 5px;border-radius:8px;text-decoration: none;color: #333;transition: background 0.2s;cursor: pointer;}
.estrella-fila:hover {background: #f5f5f5;}
.estrella-numero {width: 20px;text-align: center;font-weight: 600;}
.estrellas-icono {color: #ffc107;margin: 0 8px;font-size: 16px;}

/* BARRA DE PROGRESO */
.barra-contenedor {flex: 1;margin: 0 10px;}
.barra-fondo {height: 8px;background: #e0e0e0;border-radius: 4px;position: relative;overflow: hidden;}
.barra-progreso {height: 100%;background: #ffc107;border-radius: 4px;transition: width 0.3s ease;}
.estrella-cantidad {width: 30px;text-align: right;font-size: 14px;color: #666;}

/* RESET FILTRO */
.reset-filtro {color: #007bff;text-decoration: none;font-size: 14px;display: inline-block;margin-top: 10px;}
.reset-filtro:hover {text-decoration: underline;}

/* SELECTORES */
.orden-selector,
.pais-selector {margin-top: 20px;display: flex;align-items: center;gap: 10px;}
.orden-label,
.pais-label {font-size: 14px;color: #666;font-weight: 500;white-space: nowrap;}
.orden-select,
.pais-select {flex: 1;padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;background: white;cursor: pointer;transition: border-color 0.2s;}
.orden-select:hover,
.pais-select:hover {border-color: #999;}
.orden-select:focus,
.pais-select:focus {outline: none;border-color: #007bff;box-shadow: 0 0 0 2px rgba(0,123,255,0.1);}

/* TARJETA DE OPINIÓN */
.opinion-card {border-bottom: 1px solid #ccc;margin:0 20px;padding:20px 0;}
.opinion-header {margin-bottom: 15px;}
.opinion-usuario {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;}
.usuario-nombre {font-weight: 600;font-size: 1.1rem;}
.opinion-fecha {color: #888;font-size: 0.9rem;}
.opinion-estrellas {display: flex;align-items: baseline;gap: 2px;}
.opinion-estrellas .estrella {font-size: 1.2rem;color: #ddd;}
.opinion-estrellas .estrella.llena {color: #ffc107;}
.opinion-verificada {font-size: 0.8rem;font-weight: 700;margin-left: 10px;}
.opinion-texto {color: #555;line-height: 1.6;}
.opinion-texto.truncado {display: -webkit-box;-webkit-line-clamp: 4;line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.opinion-texto.expandido {display: block;}
.mostrar-mas {color: #000;cursor: pointer;font-size: 0.9rem;margin-top: 8px;display: inline-flex;align-items: center;gap: 4px;}
.mostrar-mas::after {content: '';display: inline-block;width: 18px;height: 18px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-size: contain;background-repeat: no-repeat;}
.mostrar-mas.expandido::after {transform: rotate(180deg);}
.mostrar-mas:hover {text-decoration: underline;}

/* SIN OPINIONES */
.no-opiniones {background: white;border: 1px solid #e0e0e0;border-radius: 8px;padding: 60px 20px;text-align: center;}
.no-opiniones p {color: #666;font-size: 16px;margin: 0;}

/* PAGINACIÓN */
.paginacion {display: flex;justify-content: center;align-items: center;gap: 5px;margin-top: 30px;padding: 20px 0;}
.paginacion a,
.paginacion span {padding: 8px 12px;min-width: 36px;text-align: center;border-radius: 4px;text-decoration: none;color: #333;font-size: 14px;transition: all 0.2s;}
.paginacion a {background: white;border: 1px solid #ddd;}
.paginacion a:hover {background: #f5f5f5;border-color: #999;}
.paginacion span.actual {background: #007bff;color: white;border: 1px solid #007bff;font-weight: 600;}
.paginacion span.disabled {color: #ccc;cursor: not-allowed;border: 1px solid #e0e0e0;background: #f9f9f9;}

/* ESTADOS DE CARGA */
.loading-opiniones {padding: 60px;text-align: center;color: #666;font-size: 16px;}
.error-opiniones {padding: 60px;text-align: center;color: #dc3545;font-size: 16px;}

/* ===================================
   MEDIA QUERIES
   =================================== */

/* -----------------------------------
   M - Tablet vertical (769px - 1024px)
   ----------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    #opiniones-container,
    .opiniones-ajax-container {flex-direction: column;padding: 15px;}

    .sidebar-completo {flex: none;width: 100%;min-width: 0;display: flex;gap: 20px;align-items: stretch;}
    .resumen-sidebar,
    .filtros-sidebar {flex: 1;align-self: stretch;}
    .separador-sidebar {display: none;}
    .opiniones-lista {width: 100%;margin-top: 20px;}

    #caja-opiniones-ajax {width: 90%;max-height: 90vh;top: 5vh;transform: translateX(-50%);}
    #caja-opiniones-ajax .opiniones-ajax-container {flex-direction: column;padding: 15px;}
    #caja-opiniones-ajax .sidebar-completo {flex: none;width: 100%;min-width: 0;display: flex;gap: 15px;align-items: stretch;}
    #caja-opiniones-ajax .resumen-sidebar,
    #caja-opiniones-ajax .filtros-sidebar {flex: 1;align-self: stretch;}
    #caja-opiniones-ajax .separador-sidebar {display: none;}

    .valoracion-media-grande .numero {font-size: 40px;}
    .valoracion-media-grande .de-5 {font-size: 20px;}
    .estrellas-grandes .estrella {font-size: 24px;}
    .texto-valoracion {font-size: 16px;}
    .filtros-titulo {font-size: 16px;}
}

/* -----------------------------------
   MÓVIL GENERAL (≤766px)
   ----------------------------------- */
@media (max-width: 766px) {

    /* SIDEBAR */
    .sidebar-completo {flex-direction: column;gap: 0;}
    .resumen-sidebar,
    .filtros-sidebar {flex: none;}
    .separador-sidebar {display: block;}

    /* OPINIÓN HEADER */
    .opinion-header {flex-direction: column;}
    .opinion-estrellas {margin-top: 10px;}

    /* PAGINACIÓN - Solo mostrar Anterior/Siguiente en móvil */
    .paginacion {flex-wrap: wrap;}
    .paginacion a,
    .paginacion span {padding: 6px 8px;font-size: 13px;min-width: 30px;}
    .paginacion a[data-pagina]:not(.pag-anterior):not(.pag-siguiente),
    .paginacion span.actual,
    .paginacion span:not(.disabled):not(.pag-anterior):not(.pag-siguiente) {display: none;}
    .paginacion .pag-anterior,
    .paginacion .pag-siguiente,
    .paginacion span.disabled {display: inline-block;}

    /* CAJA OPINIONES AJAX */
    #caja-opiniones-ajax {width:90%;max-width:none;}
    #caja-opiniones-ajax .sidebar-completo {flex-direction: column;gap: 0;}
    #caja-opiniones-ajax .resumen-sidebar,
    #caja-opiniones-ajax .filtros-sidebar {flex: none;}
    #caja-opiniones-ajax .separador-sidebar {display: block;}

    /* VALORACIÓN */
    .valoracion-media-grande .numero {font-size: 36px;}
    .valoracion-media-grande .de-5 {font-size: 18px;}
    .estrellas-grandes .estrella {font-size: 20px;}
    .texto-valoracion {font-size: 14px;}

    /* SIN OPINIONES */
    .sin-opiniones-resumen .icono {font-size: 36px;}
    .sin-opiniones-resumen .texto {font-size: 16px;}

    /* FILTROS */
    .filtros-titulo {font-size: 16px;margin-bottom: 15px;}
    .estrella-fila {padding: 6px 0;}
    .estrella-fila:hover {margin: 0;padding: 6px;}
    .estrellas-icono {font-size: 14px;margin: 0 6px;}
    .barra-contenedor {margin: 0 8px;}
    .barra-fondo {height: 6px;}
    .estrella-cantidad {font-size: 12px;}
    .reset-filtro {font-size: 13px;}
    .orden-select,
    .pais-select {padding: 6px 10px;font-size: 13px;}

    /* TARJETA OPINIÓN */
    .opinion-card {padding: 15px;margin:0 0 15px 0;}
    .opinion-header {margin-bottom: 12px;padding-bottom: 12px;}
    .usuario-nombre {font-size: 15px;}
    .opinion-fecha {font-size: 12px;}
    .opinion-estrellas .estrella {font-size: 16px;}
    .opinion-texto {font-size: 14px;line-height: 1.5;}

    /* SIN OPINIONES Y ESTADOS */
    .no-opiniones {padding: 40px 15px;}
    .no-opiniones p {font-size: 14px;}
    .loading-opiniones,
    .error-opiniones {padding: 40px;font-size: 14px;}
}