/**
 * Sistema de Iconos SVG - Heroicons v2 Outline
 * Estilos para componente reutilizable svg_icon.html
 */

.svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

.svg-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tamaños */
.svg-icon-xs {
    width: 0.75rem;
    height: 0.75rem;
}

.svg-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.svg-icon-md {
    width: 1rem;
    height: 1rem;
}

.svg-icon-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.svg-icon-xl {
    width: 1.5rem;
    height: 1.5rem;
}

.svg-icon-2xl {
    width: 2rem;
    height: 2rem;
}

/* Colores temáticos */
.svg-icon-primary {
    color: var(--tuwasabi-green, #10b981);
}

.svg-icon-secondary {
    color: var(--tuwasabi-blue, #3b82f6);
}

.svg-icon-danger {
    color: #ef4444;
}

.svg-icon-warning {
    color: #f59e0b;
}

.svg-icon-success {
    color: #10b981;
}

.svg-icon-info {
    color: #3b82f6;
}

.svg-icon-muted {
    color: #6b7280;
}

.svg-icon-white {
    color: #ffffff;
}

.svg-icon-dark {
    color: #1f2937;
}

/* Estados hover */
.svg-icon-hover-primary:hover {
    color: var(--tuwasabi-green, #10b981);
}

.svg-icon-hover-danger:hover {
    color: #ef4444;
}

.svg-icon-hover-warning:hover {
    color: #f59e0b;
}

/* Animaciones */
.svg-icon-spin {
    animation: svg-icon-spin 1s linear infinite;
}

@keyframes svg-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.svg-icon-pulse {
    animation: svg-icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes svg-icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Integración con sidebar */
.sidebar-item .svg-icon {
    margin-right: 0.5rem;
}

.user-item .svg-icon,
.group-item .svg-icon {
    margin-right: 0.25rem;
}

/* Badges con iconos */
.badge .svg-icon {
    margin-right: 0.25rem;
}

/* Botones con iconos */
.btn .svg-icon {
    margin-right: 0.375rem;
}

.btn-icon-only .svg-icon {
    margin: 0;
}