/* ======================================== CONFIGURACIÓN DE TEMAS DE COLORES Cambia fácilmente entre diferentes combinaciones ======================================== */ /* TEMA POR DEFECTO - ClusterIT Professional */ :root { --brand-primary: #1a365d; /* Azul oscuro principal */ --brand-secondary: #2d3748; /* Gris azulado */ --brand-accent: #4299e1; /* Azul brillante para acentos */ --brand-light: #e2e8f0; /* Gris claro */ } /* TEMA ALTERNATIVO 1 - Tech Modern */ :root[data-theme="tech-modern"] { --brand-primary: #1a202c; /* Negro azulado */ --brand-secondary: #2d3748; /* Gris oscuro */ --brand-accent: #00d4aa; /* Verde tech */ --brand-light: #f7fafc; /* Gris muy claro */ } /* TEMA ALTERNATIVO 2 - Corporate Blue */ :root[data-theme="corporate"] { --brand-primary: #1e3a8a; /* Azul corporativo */ --brand-secondary: #374151; /* Gris profesional */ --brand-accent: #3b82f6; /* Azul estándar */ --brand-light: #f1f5f9; /* Azul muy claro */ } /* TEMA ALTERNATIVO 3 - Dark Professional */ :root[data-theme="dark-pro"] { --brand-primary: #0f172a; /* Azul muy oscuro */ --brand-secondary: #1e293b; /* Gris oscuro */ --brand-accent: #06b6d4; /* Cyan brillante */ --brand-light: #e2e8f0; /* Gris claro */ } /* TEMA ALTERNATIVO 4 - Warm Professional */ :root[data-theme="warm"] { --brand-primary: #7c2d12; /* Marrón oscuro */ --brand-secondary: #44403c; /* Gris cálido */ --brand-accent: #ea580c; /* Naranja profesional */ --brand-light: #fef7ed; /* Crema claro */ } /* ======================================== INSTRUCCIONES DE USO: 1. Para cambiar tema, agrega data-theme al : 2. Para crear tu propio tema, copia un bloque y cambia: - brand-primary: Color principal (botones, títulos) - brand-secondary: Color secundario (textos, fondos) - brand-accent: Color de acento (hover, destacados) - brand-light: Color claro (fondos suaves) 3. Los colores se aplicarán automáticamente en toda la web ======================================== */