/* ======================================================
   TEMA: HADES PURPLE
   Estilo místico y exclusivo (CORREGIDO)
   ====================================================== */

:root {
    /* Colores principales */
    --primary-color: #7C3AED;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    
    /* Fondos */
    --bg-primary: #0A0015;
    --bg-secondary: #1A0A2E;
    --bg-card: rgba(124, 58, 237, 0.1);
    --bg-input: rgba(124, 58, 237, 0.1);
    
    /* Texto */
    --text-primary: #FFFFFF;
    --text-secondary: #C4B5D4;
    --text-muted: rgba(255, 255, 255, 0.55);
    
    /* Bordes */
    --border-color: rgba(124, 58, 237, 0.3);
    --border-focus: #7C3AED;
    
    /* Sombras */
    --shadow-primary: rgba(124, 58, 237, 0.4);
    --shadow-secondary: rgba(236, 72, 153, 0.3);
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #7C3AED, #EC4899);
    --gradient-bg: radial-gradient(ellipse at center, #0A0015, #1A0A2E);
    
    /* Glassmorphism */
    --glass-bg: rgba(124, 58, 237, 0.1);
    --glass-border: rgba(124, 58, 237, 0.2);
    --glass-blur: 20px;
}

/* ======================================================
   ESTILOS GLOBALES DEL TEMA
   ====================================================== */

body {
    background: var(--gradient-bg);
    color: var(--text-primary);
}

/* ======================================================
   TEXTO - CORREGIDO
   ====================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

p, span, label, .text-muted {
    color: var(--text-secondary) !important;
}

.form-control {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-control:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.2) !important;
}

select.form-control option {
    background: #1A0A2E !important;
    color: #FFFFFF !important;
}

/* Cards */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px var(--shadow-primary);
    border-color: rgba(124, 58, 237, 0.5);
}

/* Botones */
.btn-primary {
    background: var(--gradient-primary);
    color: white !important;
    border: none;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--shadow-primary);
}

.btn-secondary {
    background: rgba(124, 58, 237, 0.2);
    color: var(--text-secondary) !important;
}

.btn-secondary:hover {
    background: rgba(124, 58, 237, 0.3);
}

/* ======================================================
   CONFIGURACIÓN - Overrides
   ====================================================== */

.config-container {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

.config-header h1 {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.step-dot.active .step-number {
    background: var(--gradient-primary) !important;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.3) !important;
}

.step-dot.completed .step-number {
    background: #7C3AED !important;
}

.step-line.completed {
    background: var(--gradient-primary) !important;
}

.theme-card.selected {
    border-color: #7C3AED !important;
    background: rgba(124, 58, 237, 0.1) !important;
}

.theme-info {
    background: rgba(0, 0, 0, 0.4) !important;
}

.selected-info {
    color: #EC4899 !important;
}

.resumen-section {
    background: var(--glass-bg) !important;
}

.toggle-slider {
    background: rgba(124, 58, 237, 0.2) !important;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--gradient-primary) !important;
}

/* Scrollbar Purple */
::-webkit-scrollbar-track {
    background: #1A0A2E !important;
}

::-webkit-scrollbar-thumb {
    background: #7C3AED !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #EC4899 !important;
}
/* ======================================================
   TEMA HADES PURPLE - Dashboard
   ====================================================== */

.dashboard-sidebar {
    background: #0A0015;
}

.sidebar-module-header:hover {
    background: rgba(124, 58, 237, 0.05);
}

.sidebar-item:hover {
    background: rgba(124, 58, 237, 0.05);
}

.sidebar-item.active {
    background: rgba(124, 58, 237, 0.1);
    color: #EC4899;
}

.sidebar-item.active .item-dot {
    color: #EC4899;
}

.stat-card-ventas .stat-card-value {
    color: #7C3AED;
}

.stat-card-productos .stat-card-value {
    color: #EC4899;
}

.stat-card-clientes .stat-card-value {
    color: #F59E0B;
}

.stat-card-ordenes .stat-card-value {
    color: #10B981;
}