/**
 * Variables CSS para Abaca B2B Bulk Order Plugin
 * Version: 1.0.4
 */

:root {
    /* Colores primarios del plugin */
    --abaca-primary-color: #2271b1;
    --abaca-primary-hover: #135e96;
    --abaca-secondary-color: #50575e;
    
    /* Colores de fondo */
    --abaca-bg: #ffffff;
    --abaca-light-bg: #f8f9fa;
    --abaca-dark-bg: #23282d;
    
    /* Colores de texto */
    --abaca-text-color: #333333;
    --abaca-text-light: #666666;
    --abaca-text-muted: #999999;
    
    /* Colores de borde */
    --abaca-border-color: #e0e0e0;
    --abaca-border-light: #f0f0f0;
    --abaca-border-dark: #cccccc;
    
    /* Estados */
    --abaca-success-color: #00a32a;
    --abaca-warning-color: #dba617;
    --abaca-error-color: #d63638;
    --abaca-info-color: #72aee6;
    
    /* Sombras */
    --abaca-shadow-light: 0 1px 3px rgba(0,0,0,0.1);
    --abaca-shadow-medium: 0 2px 8px rgba(0,0,0,0.1);
    --abaca-shadow-heavy: 0 4px 16px rgba(0,0,0,0.15);
    
    /* Espaciado */
    --abaca-space-xs: 5px;
    --abaca-space-sm: 10px;
    --abaca-space-md: 15px;
    --abaca-space-lg: 20px;
    --abaca-space-xl: 30px;
    
    /* Tipografía */
    --abaca-font-size-sm: 12px;
    --abaca-font-size-base: 14px;
    --abaca-font-size-lg: 16px;
    --abaca-font-size-xl: 18px;
    
    /* Border radius */
    --abaca-border-radius: 6px;
    --abaca-border-radius-lg: 10px;
    --abaca-border-radius-xl: 15px;
    
    /* Transiciones */
    --abaca-transition: all 0.3s ease;
    --abaca-transition-fast: all 0.15s ease;
    
    /* ✅ OPTIMIZACIÓN: Colores de carga y skeleton loading */
    --abaca-loading-bg: #f8f9fa;
    --abaca-loading-shimmer: #e9ecef;
    --abaca-loading-skeleton: #dee2e6;
    --abaca-shimmer-duration: 1.5s;
}

/* ✅ MEJORA UX: Clear Row Button Condicional */
.clear-row-btn.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.2s ease;
    pointer-events: none;
}

.clear-row-btn:not(.hidden) {
    opacity: 1;
    visibility: visible;  
    transform: scale(1);
    transition: all 0.2s ease;
    pointer-events: auto;
}

/* Hover effect solo cuando visible */
.clear-row-btn:not(.hidden):hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}