/* Estilos para los indicadores de cambio de atributos */
.attribute-change {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    top: -1px;
}

/* Estilo para la flecha de disminución */
.decrease {
    color: #e53935; /* Rojo más oscuro para mejor contraste */
    text-shadow: 0 0 2px rgba(0,0,0,0.1);
}

/* Estilo para la flecha de aumento (por si se necesita en el futuro) */
.increase {
    color: #2e7d32; /* Verde más oscuro para mejor contraste */
    text-shadow: 0 0 2px rgba(0,0,0,0.1);
}

/* Contenedor del valor del atributo */
.attribute-value {
    position: relative;
    display: inline-block;
    min-width: 20px;
    text-align: left;
    padding-right: 2px;
}

/* Contenedor para agrupar atributo y flecha */
.attribute-container {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Efecto de parpadeo suave para llamar la atención */
@keyframes subtlePulse {
    0% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.8; transform: scale(1); }
}

/* Aplicar el parpadeo solo a las flechas de disminución */
.attribute-change.decrease {
    animation: subtlePulse 2s infinite ease-in-out;
}