// ==========================================
// LIBRERÍA AVANZADA DE COLOR Y PSICOLOGÍA
// ==========================================
window.colorLib = {
    rgbToHsl: (r, g, b) => { r/=255; g/=255; b/=255; const max=Math.max(r,g,b), min=Math.min(r,g,b); let h,s,l=(max+min)/2; if(max===min)h=s=0; else{ const d=max-min; s=l>0.5?d/(2-max-min):d/(max+min); switch(max){ case r:h=(g-b)/d+(g<b?6:0);break; case g:h=(b-r)/d+2;break; case b:h=(r-g)/d+4;break; } h/=6; } return [Math.round(h*360),Math.round(s*100),Math.round(l*100)]; },
    hslToRgb: (h, s, l) => { s/=100; l/=100; h/=360; let q=l<0.5?l*(1+s):l+s-l*s, p=2*l-q; const f=(t)=>{ if(t<0)t++; if(t>1)t--; if(t<1/6)return p+(q-p)*6*t; if(t<1/2)return q; if(t<2/3)return p+(q-p)*(2/3-t)*6; return p; }; return [Math.round(f(h+1/3)*255), Math.round(f(h)*255), Math.round(f(h-1/3)*255)]; },
    rgbToHex: (r, g, b) => "#"+[r,g,b].map(x=>x.toString(16).padStart(2,'0')).join('').toUpperCase(),
    hexToRgb: (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0,0,0]; },
    
    getBrandDNA: (h, s, l) => {
        let hueBase = "", emotion = "", industry = "";
        if (h >= 350 || h < 15) { hueBase = "Rojo"; emotion = "Acción, urgencia y pasión visceral."; industry = "Deportes, Comida rápida, Entretenimiento, Motor"; }
        else if (h >= 15 && h < 45) { hueBase = "Naranja"; emotion = "Creatividad, cercanía y entusiasmo."; industry = "Logística, Alimentación, Agencias creativas, E-commerce"; }
        else if (h >= 45 && h < 65) { hueBase = "Amarillo"; emotion = "Optimismo, claridad e intelecto."; industry = "Construcción, Energía, Educación, Movilidad"; }
        else if (h >= 65 && h < 150) { hueBase = "Verde"; emotion = "Crecimiento, balance y naturaleza."; industry = "Sostenibilidad, Finanzas, Salud, Bienestar"; }
        else if (h >= 150 && h < 190) { hueBase = "Turquesa"; emotion = "Frescura, limpieza y comunicación."; industry = "Medicina, Turismo, Higiene, Software"; }
        else if (h >= 190 && h < 250) { hueBase = "Azul"; emotion = "Confianza, seguridad y lógica."; industry = "Banca, Corporativo, Tecnología, Seguros"; }
        else if (h >= 250 && h < 290) { hueBase = "Índigo"; emotion = "Lujo, sabiduría y profundidad."; industry = "Inmobiliaria premium, Consultoría, Arte"; }
        else if (h >= 290 && h < 330) { hueBase = "Magenta"; emotion = "Disrupción, imaginación y rebeldía."; industry = "Agencias de marketing, Moda audaz, Startups"; }
        else { hueBase = "Rosa"; emotion = "Suavidad, empatía y esperanza."; industry = "Cosmética, Cuidado personal, Repostería"; }

        let archetype = "";
        if (s < 15) archetype = l > 85 ? "Minimalista / Neutral" : l < 25 ? "Solemne / Premium" : "Pragmático";
        else if (s < 40) archetype = "Corporativo conservador";
        else if (s > 80 && l > 40 && l < 60) archetype = "Eléctrico / Vibrante";
        else if (l > 80) archetype = "Etéreo / Accesible";
        else archetype = "Sólido / Versátil";

        return { hueBase, emotion, industry, archetype };
    },

    // Motor Combinatorio SEO: Más de 2000 variantes matemáticas
    getAdvancedPsychDetailed: (h, s, l, rule) => {
        let hueDesc = "", satDesc = "", lumDesc = "", ruleDesc = "";

        // 1. Tono (14 cortes)
        if (h >= 345 || h < 15) hueDesc = "En el espectro rojo, este tono apela a los instintos primarios, evocando respuestas fisiológicas inmediatas y un sentido de urgencia innegable. En el diseño de interfaces (UI), actúa como el color definitivo para la alerta, la pasión visceral y la acción imperativa que no puede ser ignorada.";
        else if (h >= 15 && h < 25) hueDesc = "Ubicado en la transición rojo-naranja, captura la intensidad del fuego. Es un tono dinámico que estimula el apetito y la toma de decisiones rápidas, ideal para botones de compra o alertas promocionales de alto impacto.";
        else if (h >= 25 && h < 35) hueDesc = "Posicionado en el núcleo del naranja, representa la calidez controlada y la máxima sociabilidad. Fomenta la creatividad y resulta altamente efectivo para crear llamadas a la acción amigables y accesibles, sin la severidad del rojo puro.";
        else if (h >= 35 && h < 50) hueDesc = "Este matiz ámbar o dorado irradia riqueza visual y prestigio sutil. Sugiere valor, historia y calidad premium, siendo una excelente elección para plataformas financieras, educativas o de servicios exclusivos.";
        else if (h >= 50 && h < 65) hueDesc = "Perteneciente al espectro amarillo puro, es el color que el ojo humano procesa con mayor rapidez. Simboliza el intelecto, la luz solar y un optimismo vibrante, proyectando una personalidad de marca enérgica y juvenil.";
        else if (h >= 65 && h < 80) hueDesc = "En el rango lima o verde amarillento, transmite una energía ácida y profundamente refrescante. Está íntimamente ligado a la novedad, la innovación disruptiva y el dinamismo tecnológico moderno.";
        else if (h >= 80 && h < 150) hueDesc = "Centrado en el espectro verde, está biológicamente asociado al balance, la ecología y el crecimiento. Produce un efecto estabilizador en el sistema nervioso del usuario, siendo el estándar universal para confirmaciones de éxito y plataformas de bienestar.";
        else if (h >= 150 && h < 180) hueDesc = "El tono turquesa o verde azulado proyecta una claridad mental absoluta y una frescura envolvente. Combina la calma del azul con la vitalidad del verde, favoreciendo la comunicación transparente en aplicaciones médicas o de turismo.";
        else if (h >= 180 && h < 200) hueDesc = "Este cyan brillante es la firma visual del futurismo y la tecnología limpia. Sugiere fluidez digital, innovación en la nube y esterilidad estética, siendo el favorito indiscutible de las startups de software (SaaS).";
        else if (h >= 200 && h < 220) hueDesc = "El azul cielo o celeste evoca espacios abiertos y libertad infinita. Promueve la serenidad, la amabilidad corporativa y reduce la fricción cognitiva, siendo un ancla perfecta para redes sociales y foros comunitarios.";
        else if (h >= 220 && h < 250) hueDesc = "Profundamente arraigado en el azul clásico, es el pilar mundial de la confianza y la lógica estructural. Proyecta una seguridad corporativa inquebrantable, profesionalismo y estabilidad, motivo por el cual domina el sector bancario y asegurador.";
        else if (h >= 250 && h < 280) hueDesc = "El espectro índigo es el puente histórico entre lo mundano y lo místico. Refleja un lujo sofisticado, introspección profunda y exclusividad, aportando una capa de alta gama a cualquier diseño que lo utilice.";
        else if (h >= 280 && h < 310) hueDesc = "El púrpura o violeta combina la estabilidad fría del azul con la ferocidad del rojo. Es el color de la imaginación sin límites, el lujo creativo y la nobleza, diseñado para marcas que buscan presentarse como visionarias y únicas en su mercado.";
        else hueDesc = "En el rango magenta y rosa fuerte, el color se vuelve descaradamente audaz y disruptivo. Rompe los esquemas tradicionales corporativos para proyectar empatía, vanguardia y una actitud rebelde pero altamente estética y cautivadora.";

        // 2. Saturación (4 cortes)
        if (s < 10) satDesc = "Su neutralidad casi acromática (saturación ultra baja) elimina las distracciones emocionales. Proyecta un diseño clínico, minimalista y pragmático, actuando como un lienzo técnico perfecto para que destaquen las micro-interacciones.";
        else if (s < 40) satDesc = "Al estar sutilmente desaturado, adquiere un matiz terroso o pastel apagado. Esto transmite una sensación de madurez, estabilidad corporativa y permite un confort visual prolongado, excelente para interfaces densas en lectura o datos.";
        else if (s < 80) satDesc = "Con una saturación calibrada y equilibrada, este color se muestra comercialmente sólido. Retiene la energía exacta para motivar la interacción del usuario mientras mantiene una estética limpia, profesional y digna de confianza.";
        else satDesc = "Llevada al límite, su alta saturación lo convierte en un tinte eléctrico e hipnótico. Grita innovación y confianza, siendo ideal para acentos en modo oscuro (Dark Mode), marcas tecnológicas de vanguardia o elementos gamificados que persiguen el 'efecto wow'.";

        // 3. Luminosidad (5 cortes)
        if (l < 15) lumDesc = "La profunda oscuridad de su luminancia absorbe la luz, otorgando un peso visual dramático a la composición. Simboliza poder absoluto, elegancia nocturna y un misterio institucional magnético.";
        else if (l < 35) lumDesc = "Sus matices sombríos e intensos lo hacen ideal para construir profundidad espacial y jerarquía sin la dureza del negro puro, ofreciendo una experiencia inmersiva y descansada para la vista del usuario.";
        else if (l < 65) lumDesc = "Situado en el punto geométrico óptimo de reflexión lumínica, funciona como un ancla estructural altamente versátil. Mantiene su legibilidad y fuerza sin abrumar los sentidos ni desvanecerse contra fondos blancos.";
        else if (l < 85) lumDesc = "Su alta luminosidad genera un efecto etéreo, limpio y expansivo. En la web moderna, facilita la 'respiración' del contenido, sugiriendo máxima accesibilidad, bienestar visual y pureza técnica.";
        else lumDesc = "Al rozar el espectro del blanco puro, proporciona un espacio negativo inmaculado y expansivo. Evoca esterilidad absoluta, lujo minimalista extremo y la máxima sofisticación geométrica.";

        // 4. Regla aplicada
        const rText = { 
            triada: "Al aplicar la regla de tríada sobre este pivote, se garantiza un equilibrio matemático que mantiene la tensión visual distribuida en tres ejes perfectos.", 
            complementario: "Su uso en un esquema complementario fuerza al ojo humano a buscar equilibrio, generando el contraste ideal para disparadores de acción (CTAs).", 
            analogos: "Integrado en una escala análoga, este tono lidera una transición fluida y pacífica, emulando los gradientes naturales del entorno.", 
            monocromatico: "Bajo la disciplina monocromática, la fuerza de este color reside íntegramente en su danza de luces y sombras, garantizando máxima elegancia.", 
            split: "El esquema complementario dividido permite aprovechar la agresividad de su contraste, pero diluyendo la tensión para un diseño más asimilable.", 
            cuadrado: "En formación cuadrada, este color sirve como pilar de un ecosistema visual extremadamente diverso que requiere maestría en el balance de proporciones.", 
            tetradica: "Formando parte de una armonía tetrádica, este color se entrelaza en una complejidad rica, ideal para interfaces multi-sección con alta densidad de información.", 
            libre: "Al liberarse de las fórmulas matemáticas rígidas, este color toma un papel protagónico en una paleta definida puramente por la sensibilidad del diseñador." 
        };
        ruleDesc = rText[rule] || "";

        return `${hueDesc} ${satDesc} ${lumDesc} ${ruleDesc}`;
    }
};

// ==========================================
// HERRAMIENTA PRINCIPAL: COLOR TOOL
// ==========================================
window.ColorTool = ({ theme, navigate }) => {
    const { useState, useEffect, useRef, useMemo } = React;
    const canvasRef = useRef(null);

    const [freeColors, setFreeColors] = useState([]);
    const [pivot, setPivot] = useState({ h: 260, s: 80, l: 60 }); 
    const [rule, setRule] = useState('triada');
    const [mainIdx, setMainIdx] = useState(0);
    const [hexInput, setHexInput] = useState("8B5CF6");
    const [toast, setToast] = useState({ visible: false, msg: "" });

    const showToast = (msg) => {
        setToast({ visible: true, msg });
        setTimeout(() => setToast({ visible: false, msg: "" }), 3000);
    };

    const schemes = useMemo(() => ({ 
        triada:[0,120,240], complementario:[0,180], analogos:[0,30,-30], 
        split:[0,150,210], cuadrado:[0,90,180,270], tetradica:[0,60,180,240], 
        monocromatico:[0,0,0] 
    }), []);
    
    const calculatedColors = useMemo(() => { 
        const offsets = schemes[rule] || [0]; 
        return offsets.map((off, i) => ({ 
            h: (pivot.h + off + 360) % 360, 
            s: pivot.s, 
            l: rule === 'monocromatico' ? Math.min(95, Math.max(5, pivot.l + ([0,-20,20,-40,40][i]||0))) : pivot.l 
        })); 
    }, [pivot, rule, schemes]);
    
    const colors = useMemo(() => rule === 'libre' ? freeColors : calculatedColors, [rule, freeColors, calculatedColors]);
    const hexColors = useMemo(() => colors.map(c => window.colorLib.rgbToHex(...window.colorLib.hslToRgb(c.h, c.s, c.l))), [colors]);

    const handleRuleChange = (newRule) => { 
        if (newRule === 'libre') { 
            let current = calculatedColors.map(c => ({...c})); 
            while(current.length < 5) current.push({ ...current[0], h: (current[0].h + 30 * current.length) % 360 }); 
            setFreeColors(current); 
        } 
        setRule(newRule); 
    };

    // Motor de Círculo Cromático con soporte TÁCTIL
    const updateFromPivot = (h, s, l) => { 
        if (rule === 'libre') { 
            const newFree = [...freeColors]; 
            if(newFree[mainIdx]) { newFree[mainIdx] = { h, s, l: 50 }; setFreeColors(newFree); } 
        } else { setPivot({h, s, l}); } 
    };

    const handleWheel = (e) => { 
        if (e.type === 'touchmove') e.preventDefault(); // Prevenir scroll al arrastrar
        const r = canvasRef.current.getBoundingClientRect(); 
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        const x = clientX - r.left - 150; 
        const y = clientY - r.top - 150; 
        const newH = (Math.atan2(y,x)*180/Math.PI+360)%360; 
        const newS = Math.min(100, Math.sqrt(x*x+y*y)/1.5); 
        updateFromPivot(newH, newS, pivot.l); 
    };

    useEffect(() => { 
        const canvas = canvasRef.current; 
        if(!canvas) return; 
        const ctx = canvas.getContext('2d'); 
        const r = canvas.width / 2; 
        ctx.clearRect(0,0,canvas.width, canvas.height); 
        for(let i=0; i<360; i++) { 
            ctx.beginPath(); ctx.moveTo(r,r); ctx.arc(r,r,r, (i-1)*Math.PI/180, (i+1)*Math.PI/180); 
            ctx.fillStyle = `hsl(${i}, 100%, 50%)`; ctx.fill(); 
        } 
        const g = ctx.createRadialGradient(r,r,0,r,r,r); 
        g.addColorStop(0,'white'); g.addColorStop(1,'rgba(255,255,255,0)'); 
        ctx.beginPath(); ctx.fillStyle=g; ctx.arc(r,r,r,0,Math.PI*2); ctx.fill(); 
    }, []);

    const handleHexInput = () => { 
        let hex = hexInput.trim(); if(!hex.startsWith('#')) hex = '#' + hex; 
        const rgb = window.colorLib.hexToRgb(hex); 
        const hsl = window.colorLib.rgbToHsl(...rgb); 
        updateFromPivot(hsl[0], hsl[1], hsl[2]); 
    };

    // --- ACCIONES DE CONEXIÓN ECOSISTEMA ---
    const copyToClipboard = (text, type = 'Color') => {
        navigator.clipboard.writeText(text);
        showToast(`${type} copiado con éxito`);
    };

    const copyAllCSS = () => {
        const css = `:root {\n` + hexColors.map((c, i) => `  --orbity-color-${i+1}: ${c};`).join('\n') + `\n}`;
        copyToClipboard(css, 'Variables CSS');
    };

    const sendToWcag = (hex) => {
        localStorage.setItem('orbity_wcag_color', hex);
        navigate('tool-wcag', '/wcag');
    };

    const sendToMesh = () => {
        localStorage.setItem('orbity_mesh_colors', JSON.stringify(hexColors));
        navigate('tool-mesh', '/mesh');
    };

    const sendToFontEditor = () => {
        localStorage.setItem('orbity_active_palette', JSON.stringify(hexColors));
        navigate('tool-font-editor', '/fonteditor');
    };

    return (
        <div className="max-w-7xl mx-auto px-6 text-inherit animate-fade-in text-left">
            {toast.visible && (
                <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-[300] bg-blue-600 text-white px-6 py-3 rounded-full shadow-2xl animate-toast-in flex items-center gap-3">
                    <window.Icon name="check-circle" className="w-4 h-4" />
                    <span className="text-xs font-bold uppercase tracking-widest">{toast.msg}</span>
                </div>
            )}

            {/* BOTÓN VOLVER DASHBOARD ACTIVO */}
            <button onClick={() => navigate('home', '/')} className="mb-10 flex items-center gap-2 text-[10px] font-black opacity-50 hover:opacity-100 uppercase tracking-widest transition-all">
                <window.Icon name="arrow-left" className="w-4 h-4" /> Dashboard
            </button>

            {/* ENCABEZADO OPTIMIZADO SEO Y LECTURA */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-6">
                <div>
                    <h1 className="text-4xl md:text-5xl font-extrabold mb-4 leading-tight tracking-normal">Generador de paletas de color</h1>
                    <p className="opacity-60 max-w-2xl font-light text-xl leading-relaxed">Estudio cromático basado en teoría matemática. Construye identidades corporativas sólidas y envíalas al ecosistema creativo.</p>
                </div>
                <div className="flex flex-wrap gap-3">
                    <button onClick={copyAllCSS} className={`px-4 py-3 border rounded-xl text-xs font-bold flex items-center gap-2 transition-all ${theme==='dark'?'bg-white/10 hover:bg-white/20 border-white/20':'bg-slate-100 hover:bg-slate-200 border-slate-200'}`}>
                        <window.Icon name="code" className="w-4 h-4" /> Exportar CSS
                    </button>
                    <button onClick={sendToMesh} className="px-4 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-xs flex items-center gap-2 transition-all shadow-lg shadow-indigo-500/20">
                        <window.Icon name="layers" className="w-4 h-4" /> Mesh
                    </button>
                    <button onClick={sendToFontEditor} className="px-4 py-3 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold rounded-xl text-xs flex items-center gap-2 transition-all shadow-lg shadow-purple-500/20">
                        <window.Icon name="type" className="w-4 h-4" /> Font Editor Pro
                    </button>
                </div>
            </div>

            <div className="space-y-12">
                {/* Panel de Configuración */}
                <div className={`p-8 rounded-3xl border flex flex-col md:flex-row gap-8 justify-between items-center ${theme==='dark'?'bg-white/5 border-white/10':'bg-white border-slate-200 shadow-sm'}`}>
                    <div className="flex items-center gap-4 w-full md:w-auto">
                        <div className="flex-1">
                            <label className="text-[10px] font-bold uppercase opacity-60 block mb-2 tracking-widest">Color base (HEX)</label>
                            <div className="flex items-center border rounded-xl px-4 py-3 bg-transparent border-white/20">
                                <span className="opacity-50 mr-2 font-mono">#</span>
                                <input type="text" value={hexInput} onChange={e=>setHexInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleHexInput()} className="bg-transparent outline-none font-mono font-bold w-24 uppercase"/>
                            </div>
                        </div>
                        <button onClick={handleHexInput} className="mt-7 p-4 bg-blue-500/10 hover:bg-blue-500/20 rounded-xl text-blue-500 transition-colors" title="Actualizar rueda">
                            <window.Icon name="refresh-cw" className="w-5 h-5" />
                        </button>
                    </div>
                    
                    <div className="w-full md:w-80">
                        <label className="text-[10px] font-bold uppercase opacity-60 block mb-2 tracking-widest">Regla cromática</label>
                        <select value={rule} onChange={e=>handleRuleChange(e.target.value)} className={`w-full border rounded-xl px-4 py-4 outline-none font-bold text-sm cursor-pointer ${theme==='dark'?'bg-[#16181d] border-white/20':'bg-slate-50 border-slate-200'}`}>
                            <option value="monocromatico">Monocromático</option>
                            <option value="analogos">Análogos</option>
                            <option value="triada">Tríada clásica</option>
                            <option value="complementario">Complementarios</option>
                            <option value="split">Complementario Dividido</option>
                            <option value="cuadrado">Cuadrado</option>
                            <option value="tetradica">Tetrádica</option>
                            <option value="libre">Formato Libre</option>
                        </select>
                    </div>
                </div>

                {/* Editor Interactivo (Rueda y Tarjetas Técnicas) */}
                <div className="flex flex-col xl:flex-row gap-12 items-center xl:items-start">
                    
                    {/* Círculo Cromático (Ahora con soporte táctil) */}
                    <div className="flex-shrink-0 relative">
                        <div className="p-2 bg-white/5 rounded-full shadow-2xl relative cursor-crosshair border border-white/10" 
                             style={{ touchAction: 'none' }}
                             onMouseDown={(e)=>{window.d=true; handleWheel(e)}} 
                             onMouseMove={(e)=>{if(window.d)handleWheel(e)}} 
                             onMouseUp={()=>window.d=false} 
                             onMouseLeave={()=>window.d=false}
                             onTouchStart={(e)=>{window.d=true; handleWheel(e)}}
                             onTouchMove={(e)=>{if(window.d)handleWheel(e)}}
                             onTouchEnd={()=>window.d=false}>
                            <canvas ref={canvasRef} width="300" height="300" className="rounded-full shadow-inner" />
                            {colors.map((c, i) => { 
                                const rad=c.h*Math.PI/180, dist=(c.s/100)*150; 
                                return <div key={i} className={`absolute w-5 h-5 border-[3px] border-white rounded-full shadow-md transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-all ${i===mainIdx?'scale-125 border-black z-20':'z-10'}`} style={{left: 158+dist*Math.cos(rad), top: 158+dist*Math.sin(rad), backgroundColor: window.colorLib.rgbToHex(...window.colorLib.hslToRgb(c.h, c.s, c.l))}} /> 
                            })}
                        </div>
                        {rule === 'libre' && <p className="text-center mt-6 text-sm font-bold opacity-50">Modo Libre activo.</p>}
                    </div>

                    {/* Tarjetas de Especificaciones Técnicas */}
                    <div className="flex-1 w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        {colors.slice(0, 6).map((c, i) => { 
                            const rgb = window.colorLib.hslToRgb(c.h, c.s, c.l); 
                            const hex = window.colorLib.rgbToHex(...rgb); 
                            const hsl = [c.h, c.s, c.l];
                            return (
                                <div key={i} onClick={()=>setMainIdx(i)} className={`p-5 rounded-3xl border transition-all cursor-pointer flex flex-col ${i===mainIdx?'bg-blue-500/5 border-blue-500 shadow-lg scale-105':'bg-white/5 border-white/10 hover:border-white/30'}`}>
                                    <div className="h-24 rounded-2xl mb-4 shadow-inner relative group overflow-hidden" style={{backgroundColor: hex}}>
                                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-sm">
                                            <button onClick={(e)=>{e.stopPropagation(); copyToClipboard(hex, 'HEX');}} className="p-3 bg-white text-black rounded-xl hover:scale-110 transition-transform shadow-xl"><window.Icon name="copy" className="w-5 h-5" /></button>
                                        </div>
                                    </div>
                                    
                                    {/* Códigos Técnicos */}
                                    <div className="flex-grow space-y-2 mb-6">
                                        <div className="flex justify-between items-center border-b border-white/10 pb-2">
                                            <span className="text-[10px] font-bold opacity-50 tracking-widest">HEX</span>
                                            <span className="text-sm font-mono font-bold tracking-widest">{hex}</span>
                                        </div>
                                        <div className="flex justify-between items-center border-b border-white/10 pb-2">
                                            <span className="text-[10px] font-bold opacity-50 tracking-widest">RGB</span>
                                            <span className="text-xs font-mono">{rgb.join(', ')}</span>
                                        </div>
                                        <div className="flex justify-between items-center pb-2">
                                            <span className="text-[10px] font-bold opacity-50 tracking-widest">HSL</span>
                                            <span className="text-xs font-mono">{hsl[0].toFixed(0)}°, {hsl[1].toFixed(0)}%, {hsl[2].toFixed(0)}%</span>
                                        </div>
                                    </div>

                                    {/* Conexión directa con WCAG Tool */}
                                    <button onClick={(e) => { e.stopPropagation(); sendToWcag(hex); }} className="w-full py-3 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-500 rounded-xl text-[10px] font-black uppercase tracking-widest transition-colors flex items-center justify-center gap-2 border border-emerald-500/20">
                                        <window.Icon name="eye" className="w-3 h-3" /> Auditar WCAG
                                    </button>
                                </div>
                            )
                        })}
                    </div>
                </div>

                {/* ADN DE MARCA */}
                <div className={`p-8 rounded-3xl border mt-12 ${theme==='dark'?'bg-[#16181d] border-white/10':'bg-white border-slate-200 shadow-sm'}`}>
                    <div className="mb-8">
                        <h2 className="text-2xl font-bold mb-2">ADN de marca y sectores recomendados</h2>
                        <p className="text-sm opacity-60">Análisis sectorial de los colores generados.</p>
                    </div>
                    
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {colors.slice(0,3).map((c, i) => { 
                            const brand = window.colorLib.getBrandDNA(c.h, c.s, c.l); 
                            const hex = window.colorLib.rgbToHex(...window.colorLib.hslToRgb(c.h, c.s, c.l)); 
                            return (
                                <div key={i} className={`flex flex-col gap-4 p-6 rounded-2xl border-t-4 shadow-sm ${theme==='dark'?'bg-black/20':'bg-slate-50'}`} style={{borderTopColor: hex}}>
                                    <div>
                                        <h3 className="font-bold text-lg mb-1">{brand.archetype}</h3>
                                        <p className="text-sm opacity-70 font-light">{brand.emotion}</p>
                                    </div>
                                    <div className="pt-4 border-t border-white/10">
                                        <span className="text-[10px] font-black uppercase tracking-widest opacity-50 block mb-2">Industrias Ideales</span>
                                        <p className="text-sm font-medium">{brand.industry}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>

                {/* TEXTO SEO: FORMATO TIPO "WCAG" (Dark UI, Elegante) */}
                <div className={`p-8 md:p-10 rounded-3xl border mt-12 ${theme==='dark'?'bg-[#0a0c10] border-white/10 shadow-2xl':'bg-slate-50 border-slate-200 shadow-inner'}`}>
                    <h2 className="text-xl md:text-2xl font-bold mb-8 flex items-center gap-3 tracking-tight">
                        <window.Icon name="book-open" className="w-6 h-6 text-purple-500" /> 
                        Interpretación técnica y psicología del color
                    </h2>
                    
                    <div className="grid md:grid-cols-2 gap-12 text-sm leading-relaxed opacity-90">
                        {/* Columna Izquierda: Dinámica Matemática (Las 2000+ variantes) */}
                        <div>
                            <h3 className="font-black uppercase tracking-widest mb-4 text-purple-500 text-[10px]">Análisis dinámico del color activo</h3>
                            <p className="font-light text-justify">
                                {window.colorLib.getAdvancedPsychDetailed(pivot.h, pivot.s, pivot.l, rule)}
                            </p>
                        </div>
                        
                        {/* Columna Derecha: Texto Estático SEO sobre Teoría y Contraste */}
                        <div>
                            <h3 className="font-black uppercase tracking-widest mb-4 text-purple-500 text-[10px]">Arquitectura de la teoría cromática</h3>
                            <p className="mb-4 font-light text-justify">
                                Diseñar la paleta perfecta trasciende la estética puramente visual; es el cimiento de una <strong>identidad visual corporativa</strong> robusta y la guía silenciosa de la experiencia de usuario (UX). Emplear un generador paramétrico asegura que las proporciones matemáticas de Tono (Hue), Saturación y Luminosidad mantengan la máxima legibilidad digital.
                            </p>
                            <p className="font-light text-justify">
                                La elección de esquemas complementarios maximiza el contraste en botones de conversión (CTAs), mientras que las paletas análogas y monocromáticas reducen la fricción cognitiva. Todos los colores aquí generados deben someterse a nuestra auditoría para garantizar el cumplimiento de accesibilidad bajo normativas de contraste WCAG internacionales.
                            </p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    );
};