/* ===== SISTEMA DE ÍCONES SVG ===== */

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: all 0.3s ease;
}

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

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

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

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

/* Ícones específicos com cores */
.icon-primary {
    color: var(--brand-primary);
}

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

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

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

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

/* Hover effects para ícones interativos */
.icon-interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon-interactive:hover {
    transform: scale(1.1);
    opacity: 0.8;
}