/*Advanced Reviews — Estilos PúblicosEstética SHEIN / AmazonListados limpios sin marcos, Menú Desplegable Flotante, Lightbox Swipe.*//* ============================================================RESET & CONTENEDOR PRINCIPAL============================================================ */#advanced-reviews-app {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color: #111;max-width: 100%;margin: 20px 0;-webkit-font-smoothing: antialiased;}#advanced-reviews-app * {box-sizing: border-box;}/* ============================================================RESUMEN COMPACTO (Obligatoriamente Horizontal)============================================================ */.ar-summary-compact {display: flex;align-items: center;justify-content: center;gap: 30px;background: #fbfbfb;padding: 24px;border-radius: 12px;margin-bottom: 20px;border: 1px solid #f0f0f0;}.ar-summary-left {text-align: center;flex-shrink: 0;}.ar-score {font-size: 56px;font-weight: 800;line-height: 1;color: #111;letter-spacing: -1px;}.ar-stars-black {color: #111;font-size: 18px;margin: 6px 0;letter-spacing: 2px;}.ar-count {font-size: 13px;color: #666;margin-bottom: 4px;}.ar-verified {font-size: 12px;color: #16a34a;font-weight: 700;}.ar-summary-right {flex: 1;max-width: 280px;}.ar-bar-row {display: flex;align-items: center;gap: 8px;font-size: 13px;color: #666;margin-bottom: 6px;}.ar-bar-star {width: 28px;display: flex;align-items: center;justify-content: flex-end;gap: 2px;font-size: 13px;color: #444;white-space: nowrap;}.ar-bar-track {flex: 1;height: 6px;background: #e5e5ea;border-radius: 4px;overflow: hidden;}.ar-bar-fill {height: 100%;background: #111;border-radius: 4px;}.ar-bar-pct {width: 32px;text-align: right;font-size: 12px;}/* ============================================================BOTÓN ESCRIBIR RESEÑA (A la derecha, debajo del resumen)============================================================ */.ar-actions-right {display: flex;justify-content: flex-end;margin-bottom: 20px;}.ar-btn-write-review-small {background: #111;color: #fff;padding: 10px 24px;border-radius: 50px;font-size: 13px;font-weight: 600;text-decoration: none;transition: all 0.2s;display: inline-block;}.ar-btn-write-review-small:hover {background: #333;}/* ============================================================FILTROS (Menú Desplegable Horizontal)============================================================ /
.ar-list-controls {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
position: relative; / <-- CLAVE PARA EL Z-INDEX /
z-index: 100; / <-- ASEGURA QUE ESTÉ POR ENCIMA DE LAS RESEÑAS */}.ar-filters-wrapper {width: 100%;overflow: visible; /* <-- CLAVE: EVITA QUE EL MENÚ SE CORTE */}.ar-filters-scroll {display: flex;gap: 10px;flex-wrap: wrap; /* <-- CLAVE: PERMITE SALTO DE LÍNEA Y EVITA CORTES EN MÓVIL */padding-bottom: 10px;}.ar-filter-pill {background: #f5f5f5;color: #333;border: 1px solid transparent;font-size: 13px;font-weight: 500;cursor: pointer;transition: all 0.2s ease;padding: 8px 16px;border-radius: 50px;flex-shrink: 0;display: flex;align-items: center;}/* Icono Chevron para el menú */.ar-icon-chevron {width: 14px;height: 14px;display: inline-block;vertical-align: middle;margin-left: 4px;transition: transform 0.2s;}/* Píldora Activa (Blanco con texto y borde negro) */.ar-filter-pill.active {background: #ffffff !important;color: #111111 !important;border: 1px solid #111111 !important;font-weight: 600;}/* Dropdown Personalizado Minimalista */.ar-star-dropdown {position: relative;display: inline-block;}.ar-star-menu {display: none;position: absolute;top: 100%;left: 0;background: #ffffff;border: 1px solid #eeeeee;border-radius: 12px;box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* Sombra más pronunciada /
z-index: 9999; / Z-Index altísimo garantizado */min-width: 140px;padding: 8px 0;margin-top: 8px;flex-direction: column;}.ar-star-menu.open {display: flex;}.ar-star-item {padding: 10px 16px;cursor: pointer;font-size: 13px;color: #111;transition: background 0.2s;letter-spacing: 2px;}.ar-star-item:hover {background: #f5f5f5;}/* ============================================================LISTADO DE RESEÑAS (Limpio y con Separadores)============================================================ /
.ar-reviews-list-container {
display: flex;
flex-direction: column;
position: relative;
z-index: 1; / Nivel base para las reseñas */}.ar-list-item {padding: 20px 0;border-bottom: 1px solid #eeeeee; /* Línea separadora limpia */}.ar-list-item:last-child {border-bottom: none;}.ar-list-header {display: flex;align-items: center;justify-content: space-between;margin-bottom: 6px;}.ar-author-group {display: flex;align-items: center;gap: 8px;}/* Avatar del Usuario */.ar-list-avatar {width: 22px;height: 22px;border-radius: 50%;background-color: #f0f0f0;display: flex;align-items: center;justify-content: center;overflow: hidden;flex-shrink: 0;}.ar-list-avatar svg {width: 14px;height: 14px;margin-bottom: -2px; /* Alinea la silueta un poco más abajo */}.ar-list-author {font-weight: 700;font-size: 14px;color: #111;}.ar-list-stars {font-size: 13px;letter-spacing: 1px;}.ar-star-filled { color: #f5a623; }.ar-star-empty { color: #dddddd; }.ar-list-date {font-size: 12px;color: #999;}.ar-list-meta {font-size: 12px;color: #666;margin-bottom: 10px;}.ar-meta-sep {color: #ddd;margin: 0 6px;}.ar-list-body {font-size: 14px;color: #222;line-height: 1.5;margin-bottom: 12px;}/* Miniaturas Cuadradas Uniformes (70x70) */.ar-list-gallery {display: flex;gap: 10px;flex-wrap: wrap;}.ar-review-thumb {width: 70px;height: 70px;object-fit: cover;border-radius: 6px;cursor: pointer;background: #fafafa;border: 1px solid #eee;transition: transform 0.2s ease;}.ar-review-thumb:hover {transform: scale(1.05);}.ar-list-footer {display: flex;justify-content: flex-end; /* Alineado a la derecha */margin-top: 15px;}.ar-btn-helpful {background: transparent;border: none;color: #666;font-size: 12px;font-weight: 500;display: flex;align-items: center;gap: 6px;cursor: pointer;padding: 0;transition: color 0.2s;}.ar-btn-helpful:hover {color: #111;}.ar-btn-helpful svg {width: 14px;height: 14px;}/* ============================================================ESTADO VACÍO ORIGINAL & SKELETON============================================================ */.ar-empty-msg {text-align: center;padding: 40px;color: #888;font-size: 14px;}.ar-empty-state-compact {background: #fbfbfb;border-radius: 12px;padding: 40px 20px;text-align: center;margin-bottom: 20px;border: 1px solid #eee;}.ar-empty-icon {font-size: 40px;color: #f5a623;margin-bottom: 10px;}.ar-empty-state-compact h3 {margin: 0 0 8px 0;font-size: 18px;color: #111;}.ar-empty-state-compact p {font-size: 14px;color: #666;margin-bottom: 20px;}.ar-btn-write-review {display: inline-block;background: #111;color: #fff;padding: 12px 28px;border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 14px;}/* Skeleton */.ar-list-item-skel { padding: 20px 0; border-bottom: 1px solid #eee; }.ar-skel-line { height: 12px; background: #f0f0f0; border-radius: 4px; margin-bottom: 10px; animation: pulse 1.5s infinite; }.ar-skel-box { width: 70px; height: 70px; background: #f0f0f0; border-radius: 4px; animation: pulse 1.5s infinite; }.w-20 { width: 20%; } .w-40 { width: 40%; } .w-60 { width: 60%; }@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }/* ============================================================LIGHTBOX INMERSIVO Y SWIPE ANIMATIONS============================================================ */.ar-lightbox-overlay {display: none;position: fixed !important;top: 0 !important;left: 0 !important;width: 100vw !important;height: 100vh !important;background: #000000 !important;z-index: 2147483647 !important;flex-direction: column;justify-content: space-between;}.ar-lightbox-top {padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;color: #fff;z-index: 10;}.ar-lb-counter {font-size: 15px;font-weight: 700;letter-spacing: 1px;}.ar-lightbox-close {background: transparent;border: none;color: #fff;cursor: pointer;padding: 5px;display: flex;align-items: center;outline: none !important; /* Elimina el recuadro/punto azul en movil */-webkit-tap-highlight-color: transparent;}.ar-lightbox-close svg {width: 24px;height: 24px;}/* Área central sensible al Touch (Swipe) */.ar-lightbox-center {flex-grow: 1;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;touch-action: pan-y;}#ar-lightbox-img {max-width: 100%;max-height: 100%;object-fit: contain;user-select: none;-webkit-user-drag: none;}/* Animaciones de Deslizamiento (Swipe) */.slide-in-right { animation: slideInRight 0.3s ease-out forwards; }.slide-in-left { animation: slideInLeft 0.3s ease-out forwards; }@keyframes slideInRight {0% { transform: translateX(100%); opacity: 0; }100% { transform: translateX(0); opacity: 1; }}@keyframes slideInLeft {0% { transform: translateX(-100%); opacity: 0; }100% { transform: translateX(0); opacity: 1; }}/* Capa Inferior Oscura (Fondo Degradado y Textos) */.ar-lightbox-bottom {padding: 20px;background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 60%, transparent 100%);color: #fff;z-index: 10;padding-bottom: max(20px, env(safe-area-inset-bottom));}.ar-lb-bottom-header {display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 12px;}.ar-lb-author-col {display: flex;flex-direction: column;}.ar-lb-author {font-weight: 700;font-size: 15px;margin-bottom: 4px;}.ar-lb-meta {font-size: 12px;color: #bbbbbb;}.ar-lb-text-scroll {max-height: 120px;overflow-y: auto;scrollbar-width: none;}.ar-lb-text-scroll::-webkit-scrollbar { display: none; }.ar-lb-text {font-size: 14px;line-height: 1.4;color: #eeeeee;}.ar-btn-helpful-lb {background: transparent;border: none;color: #ffffff;font-size: 13px;display: flex;align-items: center;gap: 6px;cursor: pointer;font-weight: 600;outline: none !important;-webkit-tap-highlight-color: transparent;}/* ============================================================RESPONSIVE (Ajustes finos para mantenerlo Side-by-Side en móviles)============================================================ */@media (max-width: 768px) {.ar-summary-compact {padding: 18px 15px;gap: 15px;}.ar-score { font-size: 44px; }
.ar-stars-black { font-size: 15px; margin: 4px 0; }
.ar-count, .ar-verified, .ar-bar-row { font-size: 11px; }

.ar-summary-right { max-width: none; }
.ar-bar-star { width: 20px; }
.ar-bar-pct { width: 26px; }

.ar-actions-right { justify-content: stretch; }
.ar-btn-write-review-small { width: 100%; text-align: center; padding: 12px; }
}