/* ARÜX - Paleta de colores personalizada */
:root {
    /* Colores principales - AZUL CLARITO para módulos internos */
    --arux-primary: #60a5fa;      /* Azul clarito principal */
    --arux-secondary: #93c5fd;     /* Azul muy claro */
    --arux-accent: #3b82f6;       /* Azul medio */
    --arux-gray: #4a5568;         /* Gris del tenedor */
    --arux-light-gray: #e2e8f0;    /* Gris claro */
    --arux-purple: #60a5fa;       /* Azul clarito */
    --arux-purple-light: #93c5fd; /* Azul muy claro */
    --arux-pink: #ec4899;         /* Rosa del tagline */
    
    /* Colores del sistema actualizados */
    --primary: var(--arux-primary);
    --secondary: var(--arux-secondary);
    --success: #38a169;
    --info: var(--arux-secondary);
    --warning: #d69e2e;
    --danger: #e53e3e;
    --light: #f7fafc;
    --dark: var(--arux-gray);
}

/* Actualizar colores de Bootstrap */
.btn-primary {
    background-color: var(--arux-primary) !important;
    border-color: var(--arux-primary) !important;
}

.btn-primary:hover {
    background-color: var(--arux-accent) !important;
    border-color: var(--arux-accent) !important;
}

.btn-outline-primary {
    color: var(--arux-primary) !important;
    border-color: var(--arux-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--arux-primary) !important;
    border-color: var(--arux-primary) !important;
}

/* Header personalizado */
.navbar-brand {
    font-weight: bold;
    color: var(--arux-accent) !important;
}

.navbar {
    background: linear-gradient(135deg, var(--arux-primary) 0%, var(--arux-secondary) 100%) !important;
}

.navbar .navbar-nav .nav-link {
    color: white !important;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--arux-light-gray) !important;
}

/* Sidebar personalizado */
.sidebar {
    background: linear-gradient(180deg, var(--arux-primary) 0%, var(--arux-accent) 100%) !important;
}

.sidebar .nav-link {
    color: white !important;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--arux-light-gray) !important;
}

.sidebar .nav-link.active {
    background-color: var(--arux-secondary) !important;
    color: white !important;
}

/* Cards personalizadas */
.card-header {
    background: linear-gradient(135deg, var(--arux-primary) 0%, var(--arux-secondary) 100%) !important;
    color: white !important;
}

/* Badges personalizados */
.badge.bg-primary {
    background-color: var(--arux-primary) !important;
}

.badge.bg-info {
    background-color: var(--arux-secondary) !important;
}

/* Alertas personalizadas */
.alert-primary {
    background-color: rgba(49, 130, 206, 0.1) !important;
    border-color: var(--arux-primary) !important;
    color: var(--arux-accent) !important;
}

/* Dashboard cards */
.border-left-primary {
    border-left: 0.25rem solid var(--arux-primary) !important;
}

.border-left-info {
    border-left: 0.25rem solid var(--arux-secondary) !important;
}

/* Gráficos */
.text-primary {
    color: var(--arux-primary) !important;
}

.text-info {
    color: var(--arux-secondary) !important;
}

/* Formularios */
.form-control:focus {
    border-color: var(--arux-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25) !important;
}

/* Botones de acción */
.btn-success {
    background-color: #38a169 !important;
    border-color: #38a169 !important;
}

.btn-warning {
    background-color: #d69e2e !important;
    border-color: #d69e2e !important;
}

.btn-danger {
    background-color: #e53e3e !important;
    border-color: #e53e3e !important;
}

/* Logo personalizado */
.logo-arux {
    height: 35px;
    width: auto;
}

.logo-arux-large {
    height: 80px;
    width: auto;
}

/* Gradientes personalizados */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--arux-primary) 0%, var(--arux-secondary) 100%) !important;
}

.bg-gradient-arux {
    background: linear-gradient(135deg, var(--arux-primary) 0%, var(--arux-accent) 100%) !important;
}

/* Sombras personalizadas */
.shadow-arux {
    box-shadow: 0 0.5rem 1rem rgba(96, 165, 250, 0.15) !important;
}

/* Hover effects */
.hover-arux:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
    box-shadow: 0 0.5rem 1rem rgba(49, 130, 206, 0.25) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo-arux {
        height: 30px;
    }
    
    .logo-arux-large {
        height: 60px;
    }
}