.rst_retrocollector-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.rst_retrocollector-rating-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex: 1;
    user-select: none;
    flex-direction: column;
}
.rst_retrocollector-no-rating {
    text-align: center;
    color: lightgray;
    font-size: .8rem;
    width: 100%;
}
.rst_retrocollector-general-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}
span.rst_retrocollector-rating-value {
    font-size: 1.4rem;
    line-height: 1.2rem;
    font-family: 'Atma', sans-serif;
}
.rst-rating-high {
    color: chartreuse;
}
.rst-rating-mid {
    color: #f39c12;
}
.rst-rating-low {
    color: #e74c3c;
}
span.rst_retrocollector-max-note {
    color: aqua;
    font-size: .9rem;
}
.rst_retrocollector-seller-note span {
    color: gray;
    font-size: .9rem;
    font-style: italic;
}

/* ESTILOS PARA COMPONENTES DE PRODUCTO */
.rst-chevron-css {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg); /* Flecha hacia abajo */
    transition: transform 0.3s ease, margin-top 0.3s ease;
    margin-left: 10px;
    margin-top: -4px;
}

/* Rotación cuando el padre tiene la clase activa */
.is-active-trigger .rst-chevron-css {
    transform: rotate(-135deg); /* Flecha hacia arriba */
    margin-top: 2px;
}
.rst_retrocollector-components-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease;
}

.rst_retrocollector-components-section.is-open {
    max-height: 2000px; /* Suficiente para muchos componentes */
    opacity: 1;
    transition: max-height 0.4s ease-in-out, opacity 0.5s ease;
    margin: 1rem 0;
}
.rst_retrocollector-components-section {
    width: 100%;
}

.rst_retrocollector-components-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.rst_retrocollector-components-item {
    background-color: rgba(0,0,0,.3);
    border-left: 4px solid #dee2e6;
    padding: 10px 12px;
    transition: transform 0.2s ease;
}
.rst_retrocollector-components-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rst_retrocollector-components-name {
    font-size: 14px;
    font-weight: 600;
    color: lightslategray;
}

.rst_retrocollector-components-score {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    min-width: 35px;
    text-align: center;
    font-family: 'Atma', sans-serif;
}



/* Detalles secundarios */
.rst_retrocollector-components-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rst_retrocollector-components-repro-badge {
    background-color: #212529;
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

.rst_retrocollector-components-note {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}
p.rst_retrocollector-note {
    font-size: .8rem;
    color: gray;
}



/* --- CONTENEDOR PRINCIPAL --- */
#rst-stars-dynamic {
    display: flex;
    height: 24px;
    align-items: center;
}

/* --- ESTILO BASE DE LA ESTRELLA --- */
.rst-star {
    position: relative;
    display: flex;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    user-select: none;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.4s ease-out;
    justify-content: center;
    align-items: center;
}

/* Clase activada por JS para la secuencia de entrada */
.rst-star.animate-in {
    opacity: 1;
    transform: scale(1) rotate(360deg);
}

/* --- ESTADO: ESTRELLA VACÍA --- */
.rst-star.empty {
    color: rgba(255, 255, 255, 0.12); /* Gris muy tenue para que no resalte */
    text-shadow: none;
}

/* --- ESTADO: ESTRELLA LLENA (SEGÚN RANGOS) --- */


/* --- ESTILOS PARA LAS NOTAS EN TEXTO --- */
.rst-note, .rst-main-note {
    font-weight: bold;
    transition: color 0.3s ease;
}

/* Clases de color para los textos de las notas */
.rst-rating-high {
    color: chartreuse;
}
.rst-rating-mid  { color: #ffcc00; }
.rst-rating-low  { color: #ff4d4d; }
.rst-rating-high-border { border-left-color: chartreuse !important; }
.rst-rating-mid-border  { border-left-color: #ffcc00 !important; }
.rst-rating-low-border  { border-left-color: #ff4d4d !important; }

/* Ajuste opcional para el acordeón para que no choque con las estrellas */
.rst-condition-container {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* SCORE MINIATURES */
.rst_retrocollector-scoremin {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background: black;
    border-radius: 5px;
    padding: 4px;
    transform: translate(5px, -5px) rotate(5deg);
    font-family: 'Atma';
    line-height: 14px;
    align-items: center;
    justify-content: center;
}
.rst_retrocollector-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}
.rst_retrocollector-star svg {
    height: 14px;
    width: 14px;
    color: gold;
}



/* BADGES */
.rst-badge-wrapper {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex: 1 1 100px;
}
.rst-badge-status {
    display: flex;
    white-space: nowrap;
    line-height: 1.2;
    border-radius: var(--border-radius, 2px);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .7rem;
    padding: 2px 5px;
    filter: drop-shadow(0 3px 2px black);
}
.rst-badge-status-new {
    background: linear-gradient(45deg, orange, yellow);
    color: black;
}
.rst-badge-status-used {
    background: linear-gradient(0, dodgerblue, cyan);
    color: black;
}
.rst-badge-status-exclusive {
    background: linear-gradient(120deg, #b8860b, #e6b800, #fffacd, #ffd700, #c8960c, #b8860b);
    background-size: 300% 300%;
    animation: rst-glitter 2.5s linear infinite;
    color: #4a2e00;
    position: relative;
    overflow: hidden;
}
.rst-badge-status-exclusive::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    animation: rst-glint 2.5s ease-in-out infinite;
    transform: skewX(-15deg);
}
.rst-badge-status-rare {
    background: linear-gradient(120deg, #0d6b4f, #1db87a, #a8ffdc, #0d6b4f);
    background-size: 300% 300%;
    color: #022c1f;
    position: relative;
    overflow: hidden;
    animation: rst-crystal-bg 3s linear infinite, rst-aura 1.5s ease-in-out infinite;
}
.rst-badge-status-original {
    background: chartreuse;
    color: black;
}
.rst-badge-status-repro {
    background-color: firebrick;
    color: gold;
}
@keyframes rst-glitter {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes rst-glint {
    0%   { left: -80%; }
    60%  { left: 150%; }
    100% { left: 150%; }
}
@keyframes rst-crystal-bg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes rst-aura {
    0%, 100% { filter: drop-shadow(0 3px 2px black) drop-shadow(0 0 2px #1db87a); }
    50%       { filter: drop-shadow(0 3px 2px black) drop-shadow(0 0 7px #a8ffdc); }
}


/* --- Calificación Principal y Pulso --- */
.rst-note-group { display: flex; align-items: baseline; gap: 4px; }
.rst-main-note {
    font-family: 'Atma', cursive;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    color: #2ecc71 !important;
    animation: glow-pulse 2s infinite alternate, rst-pulse-attention 3s infinite ease-in-out;
}
.rst-max-note {
    font-size: 0.9rem;
    font-weight: 400;
    color: aqua;
}

@keyframes rst-pulse-attention {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.2); }
}

@keyframes glow-pulse {
    from { text-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }
    to { text-shadow: 0 0 20px var(--main-color), 0 0 5px rgba(255, 255, 255, 0.2); }
}

.rst-rating-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Grid de Tarjetas --- */
.rst-content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease, opacity 0.3s ease; opacity: 0; }
.rst-condition-container.rst-open .rst-content-wrapper { grid-template-rows: 1fr; opacity: 1; }

.rst-grid {
    overflow: hidden;
    min-height: 0;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.rst-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 12px; display: flex; flex-direction: column;
}
.rst-card-info {
    display: flex;
    flex-direction: column;
}

.rst-card-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.rst-status-text { font-size: 0.8rem; line-height: 1.2; margin-top: 2px; }
.rst-card-score { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.rst-note { font-family: 'Atma', cursive; font-weight: 700; font-size: 1.3rem; }

/* --- Colores de Notas --- */
.rst-original-check { color: var(--main-color) font-weight: bold; }
.rst-repro-tag { background: #ff4757; font-size: 0.55rem; padding: 1px 4px; border-radius: 3px; font-weight: bold; }

.rst-arrow { transition: transform 0.3s; font-size: 0.7rem; opacity: 0.4; margin-left: 8px; }
.rst-condition-container.rst-open .rst-arrow { transform: rotate(180deg); }

/* Nueva animación de pulso más lenta para que sea menos distractora */
@keyframes rst-pulse-mini {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.9; }
}

/* --- COLORES DINÁMICOS EN MINIATURA (Opcional) --- */
/* Si quieres que respeten el color según la nota pero manteniendo el estilo sutil */
.rst-stars-dynamic-mini.rating-low .star-filled { color: #e74c3c !important; }
.rst-stars-dynamic-mini.rating-medium .star-filled { color: #f1c40f !important; }
.rst-stars-dynamic-mini.rating-high .star-filled { color: var(--main-color) !important; }







/* --- LIBRERÍA DE ANIMACIONES RST - CORREGIDA Y AMPLIADA --- */

/* 1. Pulso Suave (Corregido) */
@keyframes rst-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.rst-animate-pulse { animation: rst-pulse 2s infinite ease-in-out; }

/* 2. Brillo Deslizante (Glint) */
@keyframes rst-glint {
    0% { background-position: 200%; }
    30% { background-position: -200%; }
    100% { background-position: -200%; }
}
.rst-animate-glint {
    background-size: 200% auto !important;
    background-image: linear-gradient(
        110deg, 
        rgba(255,255,255,0) 20%, 
        rgba(255, 255, 255, 0.637) 50%, 
        rgba(255,255,255,0) 80%
    ) !important;
    animation: rst-glint 4s infinite ease-in-out;
    background-repeat: no-repeat !important;
}

/* 3. Sacudida (Shake - CORREGIDO con deg) */
@keyframes rst-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px) rotate(-1deg); }
    75% { transform: translateX(1px) rotate(1deg); }
}
.rst-animate-shake { animation: rst-shake 0.3s infinite; }

/* 4. Resplandor (Glow) */
@keyframes rst-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.6)); }
    50% { filter: drop-shadow(0 0 10px rgba(255,255,255,1)); }
}
.rst-animate-glow { animation: rst-glow 1.5s infinite alternate; }

/* 5. Parpadeo Crítico (Blink - Estilo texto de inicio de NES) */
@keyframes rst-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.rst-animate-blink { animation: rst-blink 0.8s step-end infinite; }

/* 6. Salto Mario (Bounce - Pequeño brinco juguetón) */
@keyframes rst-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
    60% { transform: translateY(-2px); }
}
.rst-animate-bounce { animation: rst-bounce 2s infinite; }

/* 7. Arcoíris (Rainbow - Para artículos Legendarios o Ultra Raros) */
@keyframes rst-rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
.rst-animate-rainbow { animation: rst-rainbow 4s linear infinite; }

/* 8. Flotación Magnética (Float - Movimiento suave arriba/abajo) */
@keyframes rst-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0px); }
}
.rst-animate-float { animation: rst-float 3s ease-in-out infinite; }

/* 9. Zoom de Enfoque (Heartbeat - Latido fuerte) */
@keyframes rst-heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.15); }
    20% { transform: scale(1); }
    30% { transform: scale(1.15); }
    40% { transform: scale(1); }
}
.rst-animate-heartbeat { animation: rst-heartbeat 2.5s infinite; }

/* 10. Inversión de Color (Flash - Ideal para llamar mucho la atención) */
@keyframes rst-flash {
    0%, 100% { filter: invert(0); }
    50% { filter: invert(1); }
}
.rst-animate-flash { animation: rst-flash 1s infinite; }


/* MEDIA QUERIES */
@media (min-width: 768px) {
    .product-page-availability {
        flex-direction: column;
    }
    .rst_retrocollector-components-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rst_retrocollector-components-item {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 180px;
    }
}