.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

.icon-lg {
    width: 48px;
    height: 48px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

/* Animaciones para iconos */
.icon-pulse {
    animation: icon-pulse 2s infinite;
}

.icon-bounce {
    animation: icon-bounce 1s infinite;
}

.icon-spin {
    animation: icon-spin 2s infinite linear;
}

/* Keyframes para animaciones */
@keyframes icon-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Colores para iconos */
.icon-primary {
    color: var(--primary-color);
}

.icon-secondary {
    color: var(--secondary-color);
}

.icon-success {
    color: #28a745;
}

.icon-warning {
    color: #ffc107;
}

.icon-danger {
    color: #dc3545;
}

/* Efectos hover */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
}

/* Estilos específicos para iconos de redes sociales */
.icon-social {
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.icon-social:hover {
    opacity: 1;
}