/* Sistema de Temas Dinámicos - Inspirado en 1s.Game */
/* Las variables se definen dinámicamente desde PHP */

:root {
    /* Variaciones automáticas del color principal */
    --theme-primary-light: color-mix(in srgb, var(--theme-primary) 80%, white);
    --theme-primary-dark: color-mix(in srgb, var(--theme-primary) 80%, black);
    --theme-primary-glow: var(--theme-primary)33; /* Con transparencia para glows */
    
    /* Bordes fijos */
    --theme-border: #444444;
    --theme-border-light: #555555;
}

/* === BACKGROUNDS === */
.bg-theme-main { 
    background-color: var(--theme-bg-main) !important; 
}
.bg-theme-card { 
    background-color: var(--theme-bg-card) !important; 
}
.bg-theme-hover { 
    background-color: var(--theme-bg-hover) !important; 
}
.bg-theme-primary { 
    background-color: var(--theme-primary) !important; 
}

/* === TEXT COLORS === */
.text-theme-main { 
    color: var(--theme-text-main) !important; 
}
.text-theme-muted { 
    color: var(--theme-text-muted) !important; 
}
.text-theme-primary { 
    color: var(--theme-primary) !important; 
}

/* === BORDERS === */
.border-theme { 
    border-color: var(--theme-border) !important; 
}
.border-theme-light { 
    border-color: var(--theme-border-light) !important; 
}
.border-theme-primary { 
    border-color: var(--theme-primary) !important; 
}

/* === DIVIDERS === */
.divide-theme > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--theme-border) !important;
}

/* === EFECTOS ESPECIALES === */
.glow-primary {
    box-shadow: 0 0 20px var(--theme-primary-glow);
    transition: box-shadow 0.3s ease;
}

.glow-primary:hover {
    box-shadow: 0 0 30px var(--theme-primary-glow);
}

/* Botón estilo 1s.Game */
.btn-theme-primary {
    background-color: var(--theme-primary);
    color: var(--theme-bg-main);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--theme-primary-glow);
}

.btn-theme-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--theme-primary-glow);
    filter: brightness(1.1);
}

/* Card estilo 1s.Game */
.card-theme {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.card-theme:hover {
    background-color: var(--theme-bg-hover);
    border-color: var(--theme-primary);
    box-shadow: 0 4px 20px var(--theme-primary-glow);
}

/* Sidebar estilo gaming */
.sidebar-theme {
    background: linear-gradient(180deg, var(--theme-bg-card) 0%, var(--theme-bg-hover) 60%, var(--theme-bg-main) 100%);
    border-right: 1px solid var(--theme-border);
}

/* Header estilo gaming */
.header-theme {
    background: var(--theme-bg-card);
    border-bottom: 1px solid var(--theme-border);
    backdrop-filter: blur(10px);
}

/* === ESTADOS INTERACTIVOS === */
.hover\:bg-theme-hover:hover { 
    background-color: var(--theme-bg-hover) !important; 
}

.hover\:bg-theme-primary:hover { 
    background-color: var(--theme-primary) !important; 
}

.hover\:text-theme-primary:hover { 
    color: var(--theme-primary) !important; 
}

.focus\:ring-theme-primary:focus { 
    --tw-ring-color: var(--theme-primary); 
}

/* === UTILIDADES === */
.gradient-theme-primary {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
}

.text-shadow-theme {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* === RESPONSIVE GAMING LAYOUT === */
@media (max-width: 768px) {
    .glow-primary {
        box-shadow: 0 0 10px var(--theme-primary-glow);
    }
    
    .card-theme:hover {
        box-shadow: 0 2px 10px var(--theme-primary-glow);
    }
}