{"id":8630,"date":"2026-02-02T13:13:18","date_gmt":"2026-02-02T18:13:18","guid":{"rendered":"https:\/\/innovame.com\/?page_id=8630"},"modified":"2026-02-03T12:56:56","modified_gmt":"2026-02-03T17:56:56","slug":"auditoria-seo-basica","status":"publish","type":"page","link":"https:\/\/innovame.com\/en\/auditoria-seo-basica\/","title":{"rendered":"Auditoria SEO B\u00e1sica"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Herramienta de Auditor\u00eda Flash SEO<\/title>\n    \n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    \n    <!-- React & ReactDOM -->\n    <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n    \n    <!-- Babel para procesar JSX -->\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n    <!-- Estilos para impresi\u00f3n y ajustes finos -->\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700;900&display=swap');\n        \n        body { font-family: 'Inter', sans-serif; }\n        \n        \/* Ocultar barra de scroll en el preview si es necesario *\/\n        .no-scrollbar::-webkit-scrollbar { display: none; }\n        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n\n        @media print {\n            body * { visibility: hidden; }\n            #report-container, #report-container * { visibility: visible; }\n            #report-container { \n                position: absolute; \n                left: 0; \n                top: 0; \n                width: 100%; \n                margin: 0; \n                padding: 20px; \n                box-shadow: none; \n                background: white; \n                overflow: visible;\n            }\n            .no-print { display: none !important; }\n            \/* Asegurar que los colores de fondo se impriman *\/\n            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-100 text-slate-800\">\n\n    <div id=\"root\"><\/div>\n\n    <script type=\"text\/babel\">\n        const { useState, useEffect } = React;\n\n        \/\/ --- ICONOS SVG ---\n        const Icons = {\n            Activity: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>,\n            Globe: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>,\n            Layout: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" x2=\"21\" y1=\"9\" y2=\"9\"\/><line x1=\"9\" x2=\"9\" y1=\"21\" y2=\"9\"\/><\/svg>,\n            Zap: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg>,\n            Search: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>,\n            Award: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"7\"\/><polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\"\/><\/svg>,\n            XCircle: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>,\n            AlertTriangle: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" x2=\"12\" y1=\"9\" y2=\"13\"\/><line x1=\"12\" x2=\"12.01\" y1=\"17\" y2=\"17\"\/><\/svg>,\n            CheckCircle: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>,\n            Printer: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect width=\"12\" height=\"8\" x=\"6\" y=\"14\"\/><\/svg>,\n            Smartphone: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"14\" height=\"20\" x=\"5\" y=\"2\" rx=\"2\" ry=\"2\"\/><path d=\"M12 18h.01\"\/><\/svg>,\n            MousePointer2: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m12 6 2-2 2 2\"\/><path d=\"m16 22-5-5\"\/><path d=\"m22 16-5-5\"\/><path d=\"M22 2 9 15\"\/><path d=\"m7 7-3.2-3.2\"\/><path d=\"m2 2 5.2 5.2\"\/><path d=\"m2 22 5.2-5.2\"\/><path d=\"m7 17-3.2 3.2\"\/><\/svg>,\n            Move: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"5 9 2 12 5 15\"\/><polyline points=\"9 5 12 2 15 5\"\/><polyline points=\"15 19 12 22 9 19\"\/><polyline points=\"19 9 22 12 19 15\"\/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"\/><line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\"\/><\/svg>,\n            ShieldCheck: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>,\n            Link: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/><\/svg>,\n            Hash: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"4\" x2=\"20\" y1=\"9\" y2=\"9\"\/><line x1=\"4\" x2=\"20\" y1=\"15\" y2=\"15\"\/><line x1=\"10\" x2=\"8\" y1=\"3\" y2=\"21\"\/><line x1=\"16\" x2=\"14\" y1=\"3\" y2=\"21\"\/><\/svg>,\n            Users: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>,\n            CreditCard: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"\/><\/svg>,\n            FileText: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"\/><\/svg>,\n            Type: (props) => <svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"\/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"\/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"\/><\/svg>\n        };\n\n        \/\/ --- COMPONENTES UI ---\n\n        const SectionCard = ({ title, icon: Icon, children, className = \"\" }) => (\n            <div className={`bg-white p-6 rounded-xl shadow-sm border border-slate-100 ${className}`}>\n                <div className=\"flex items-center gap-3 mb-4 border-b border-slate-100 pb-3\">\n                <div className=\"p-2 bg-blue-50 text-blue-600 rounded-lg\">\n                    <Icon size={20} \/>\n                <\/div>\n                <h3 className=\"font-bold text-slate-800 text-lg\">{title}<\/h3>\n                <\/div>\n                {children}\n            <\/div>\n        );\n\n        const TrafficLightSelector = ({ value, onChange, label }) => (\n            <div className=\"mb-6\">\n                <label className=\"block text-sm font-medium text-slate-700 mb-2\">{label}<\/label>\n                <div className=\"flex gap-2\">\n                {[\n                    { val: 'critical', color: 'bg-red-500', label: 'Cr\u00edtico', icon: Icons.XCircle },\n                    { val: 'warning', color: 'bg-yellow-400', label: 'Mejorable', icon: Icons.AlertTriangle },\n                    { val: 'good', color: 'bg-green-500', label: 'Saludable', icon: Icons.CheckCircle },\n                ].map((option) => (\n                    <button\n                    key={option.val}\n                    onClick={() => onChange(option.val)}\n                    className={`flex-1 flex items-center justify-center gap-2 py-3 px-2 rounded-lg border-2 transition-all ${\n                        value === option.val\n                        ? `border-${option.color.replace('bg-', '')} ${option.color} text-white shadow-md transform scale-105`\n                        : 'border-slate-200 bg-slate-50 text-slate-400 hover:bg-slate-100'\n                    }`}\n                    >\n                    <option.icon size={16} \/>\n                    <span className=\"text-sm font-bold\">{option.label}<\/span>\n                    <\/button>\n                ))}\n                <\/div>\n            <\/div>\n        );\n\n        const InputField = ({ label, placeholder, value, onChange, type = \"text\", rows = 3 }) => (\n            <div className=\"mb-4\">\n                <label className=\"block text-xs uppercase tracking-wide text-slate-500 font-bold mb-1\">\n                {label}\n                <\/label>\n                {type === 'textarea' ? (\n                <textarea\n                    className=\"w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all text-sm text-slate-700\"\n                    placeholder={placeholder}\n                    rows={rows}\n                    value={value}\n                    onChange={(e) => onChange(e.target.value)}\n                \/>\n                ) : (\n                <input\n                    type={type}\n                    className=\"w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all text-sm text-slate-700\"\n                    placeholder={placeholder}\n                    value={value}\n                    onChange={(e) => onChange(e.target.value)}\n                \/>\n                )}\n            <\/div>\n        );\n\n        const CharacterCountInput = ({ label, value, onChange, maxChars, placeholder }) => {\n            const count = value.length;\n            const isOverLimit = count > maxChars;\n            \n            return (\n                <div className=\"mb-4\">\n                <div className=\"flex justify-between items-center mb-1\">\n                    <label className=\"block text-xs uppercase tracking-wide text-slate-500 font-bold\">\n                    {label}\n                    <\/label>\n                    <span className={`text-xs font-bold transition-colors duration-300 ${isOverLimit ? 'text-red-600 animate-pulse' : 'text-slate-400'}`}>\n                    {count} \/ {maxChars}\n                    <\/span>\n                <\/div>\n                <textarea\n                    className={`w-full p-3 bg-slate-50 border rounded-lg focus:ring-2 focus:outline-none transition-all text-sm text-slate-700 ${isOverLimit ? 'border-red-300 focus:ring-red-200 bg-red-50' : 'border-slate-200 focus:ring-blue-500'}`}\n                    placeholder={placeholder}\n                    rows={2}\n                    value={value}\n                    onChange={(e) => onChange(e.target.value)}\n                \/>\n                {isOverLimit && (\n                    <p className=\"text-[10px] text-red-500 font-bold mt-1 text-right\">\u26a0\ufe0f Excede el l\u00edmite recomendado<\/p>\n                )}\n                <\/div>\n            );\n        };\n\n        const SpeedGauge = ({ score, label, size = \"large\" }) => {\n            const radius = size === \"small\" ? 30 : 40;\n            const stroke = size === \"small\" ? 5 : 6;\n            const dimension = size === \"small\" ? 70 : 96;\n            \n            const circumference = 2 * Math.PI * radius;\n            const offset = circumference - (score \/ 100) * circumference;\n            \n            let colorClass = 'text-red-500';\n            if (score >= 50) { colorClass = 'text-yellow-500'; }\n            if (score >= 90) { colorClass = 'text-green-500'; }\n\n            return (\n                <div className=\"flex flex-col items-center justify-center\">\n                <div className=\"relative flex items-center justify-center mb-2\">\n                    <svg className=\"transform -rotate-90\" width={dimension} height={dimension} viewBox={`0 0 ${dimension} ${dimension}`}>\n                    <circle\n                        cx={dimension \/ 2}\n                        cy={dimension \/ 2}\n                        r={radius}\n                        fill=\"transparent\"\n                        stroke=\"#e2e8f0\"\n                        strokeWidth={stroke}\n                    \/>\n                    <circle\n                        cx={dimension \/ 2}\n                        cy={dimension \/ 2}\n                        r={radius}\n                        fill=\"transparent\"\n                        stroke=\"currentColor\"\n                        strokeWidth={stroke}\n                        strokeDasharray={circumference}\n                        strokeDashoffset={offset}\n                        strokeLinecap=\"round\"\n                        className={`${colorClass} transition-all duration-1000 ease-out`}\n                    \/>\n                    <\/svg>\n                    <div className=\"absolute inset-0 flex items-center justify-center\">\n                    <span className={`font-extrabold text-slate-800 ${size === \"small\" ? \"text-xl\" : \"text-3xl\"}`}>{score}<\/span>\n                    <\/div>\n                <\/div>\n                {label && <span className=\"text-[10px] font-bold text-slate-400 uppercase tracking-widest text-center\">{label}<\/span>}\n                <\/div>\n            );\n        };\n\n        \/\/ --- VitalMetric con Referencia de Google ---\n        const VitalMetric = ({ label, value, description, icon: Icon, statusColor, reference }) => (\n            <div className=\"flex flex-col p-2.5 rounded-lg border border-slate-100 bg-slate-50 relative overflow-hidden h-full\">\n                <div className={`absolute top-0 left-0 w-1 h-full ${statusColor}`}><\/div>\n                <div className=\"flex justify-between items-center mb-1 pl-2\">\n                <span className=\"text-[9px] font-bold text-slate-500 uppercase tracking-widest\">{label}<\/span>\n                {Icon && <Icon size={12} className=\"text-slate-400\" \/>}\n                <\/div>\n                <div className=\"pl-2 mb-2\">\n                    <span className=\"text-base font-bold text-slate-800\">{value}<\/span>\n                    <p className=\"text-[9px] text-slate-500 leading-tight mt-0.5\">{description}<\/p>\n                <\/div>\n                {\/* Referencia Google *\/}\n                <div className=\"pl-2 pt-1.5 mt-auto border-t border-slate-100\">\n                    <p className=\"text-[8px] font-semibold text-slate-400 uppercase tracking-tight flex items-center gap-1\">\n                        Meta: <span className=\"text-slate-600\">{reference}<\/span>\n                    <\/p>\n                <\/div>\n            <\/div>\n        );\n\n        const AuthorityMetric = ({ label, value, icon: Icon }) => (\n            <div className=\"flex flex-col items-center p-2 bg-slate-50 rounded-lg border border-slate-100 text-center\">\n                <div className=\"mb-1 text-slate-400\">\n                <Icon size={14} \/>\n                <\/div>\n                <span className=\"text-lg font-bold text-slate-800 leading-none mb-1\">{value}<\/span>\n                <span className=\"text-[9px] uppercase font-bold text-slate-500\">{label}<\/span>\n            <\/div>\n        );\n\n        \/\/ --- APLICACI\u00d3N PRINCIPAL ---\n\n        function FlashAuditApp() {\n            const [activeTab, setActiveTab] = useState('edit'); \n            \n            \/\/ Estado inicial de la auditor\u00eda\n            const [auditData, setAuditData] = useState({\n                clientName: \"Empresa Ejemplo S.A.\",\n                websiteUrl: \"www.ejemplo.com\",\n                consultantName: \"Tu Nombre \/ Agencia\",\n                date: new Date().toISOString().split('T')[0],\n                \n                \/\/ 1. Rendimiento\n                performance: {\n                mode: 'pagespeed',\n                status: 'critical',\n                pageSpeedScore: 45, \n                performanceScore: 48,\n                structureScore: 72,\n                lcp: \"5.2s\", \n                tti: \"3.5s\", \/\/ Cambiado de INP a TTI\n                cls: \"0.45\", \n                observation: \"Tiempo de carga superior a 5 segundos. Im\u00e1genes muy pesadas sin optimizar.\",\n                businessImpact: \"Por cada segundo extra de carga, la conversi\u00f3n cae un 7%.\"\n                },\n\n                \/\/ 2. Autoridad\n                authority: {\n                status: 'good',\n                domainAuthority: \"25\",\n                organicTraffic: \"1,200\",\n                paidTraffic: \"0\",\n                organicKeywords: \"350\",\n                backlinks: \"145\",\n                businessImpact: \"Buena reputaci\u00f3n base, pero dependes mucho del tr\u00e1fico directo.\"\n                },\n\n                \/\/ 3. SEO\n                seo: {\n                status: 'warning',\n                title: \"Inicio - Empresa Ejemplo | Venta de Servicios Profesionales en Madrid\",\n                description: \"Somos especialistas en servicios profesionales con m\u00e1s de 20 a\u00f1os de experiencia. Contacta con nosotros para un presupuesto sin compromiso.\",\n                keywords: \"servicios madrid, consultoria, profesionales\",\n                businessImpact: \"El t\u00edtulo es correcto pero la descripci\u00f3n excede el l\u00edmite visible en Google, perdiendo CTR.\"\n                },\n\n                \/\/ 4. UX\n                ux: {\n                status: 'warning',\n                observation: \"Navegaci\u00f3n en m\u00f3viles confusa. El men\u00fa principal colapsa incorrectamente en dispositivos iOS, ocultando las categor\u00edas principales.\",\n                businessImpact: \"P\u00e9rdida de clientes m\u00f3viles (70% del tr\u00e1fico).\",\n                stack: \"WordPress + Elementor\"\n                }\n            });\n\n            const handlePrint = () => {\n                window.print();\n            };\n\n            const updateSection = (section, field, value) => {\n                setAuditData(prev => ({\n                ...prev,\n                [section]: {\n                    ...prev[section],\n                    [field]: value\n                }\n                }));\n            };\n\n            const handleScoreChange = (type, newScore) => {\n                const score = parseInt(newScore, 10);\n                setAuditData(prev => {\n                const newState = { ...prev };\n                newState.performance[type] = score;\n                let status = 'good';\n                if (prev.performance.mode === 'pagespeed') {\n                    if (score < 90) status = 'warning';\n                    if (score < 50) status = 'critical';\n                } else {\n                    const pScore = type === 'performanceScore' ? score : prev.performance.performanceScore;\n                    const sScore = type === 'structureScore' ? score : prev.performance.structureScore;\n                    if (pScore < 90 || sScore < 90) status = 'warning';\n                    if (pScore < 50 || sScore < 50) status = 'critical';\n                }\n                newState.performance.status = status;\n                return newState;\n                });\n            };\n\n            const togglePerformanceMode = (mode) => {\n                setAuditData(prev => ({\n                ...prev,\n                performance: {\n                    ...prev.performance,\n                    mode: mode\n                }\n                }));\n            };\n\n            const getMetricColor = (metricType, valueString) => {\n                const val = parseFloat(valueString);\n                if (isNaN(val)) return 'bg-slate-300';\n                \n                if (metricType === 'lcp') {\n                    \/\/ Google: Good < 2.5s\n                    if (val <= 2.5) return 'bg-green-500';\n                    if (val <= 4.0) return 'bg-yellow-500';\n                    return 'bg-red-500';\n                }\n                if (metricType === 'tti') { \n                    \/\/ TTI: Fast < 3.8s, Moderate < 7.3s\n                    if (val <= 3.8) return 'bg-green-500';\n                    if (val <= 7.3) return 'bg-yellow-500';\n                    return 'bg-red-500';\n                }\n                if (metricType === 'cls') {\n                    \/\/ Google: Good < 0.1\n                    if (val <= 0.1) return 'bg-green-500';\n                    if (val <= 0.25) return 'bg-yellow-500';\n                    return 'bg-red-500';\n                }\n                return 'bg-slate-300';\n            };\n\n            const ReportPreview = () => {\n                const { performance } = auditData;\n                \n                const getStatusColor = (status) => {\n                switch(status) {\n                    case 'critical': return 'bg-red-50 text-red-900 border-red-200';\n                    case 'warning': return 'bg-yellow-50 text-yellow-900 border-yellow-200';\n                    case 'good': return 'bg-green-50 text-green-900 border-green-200';\n                    default: return 'bg-slate-50 text-slate-700';\n                }\n                };\n\n                const getStatusIcon = (status) => {\n                switch(status) {\n                    case 'critical': return <Icons.XCircle className=\"text-red-500\" size={24} \/>;\n                    case 'warning': return <Icons.AlertTriangle className=\"text-yellow-500\" size={24} \/>;\n                    case 'good': return <Icons.CheckCircle className=\"text-green-500\" size={24} \/>;\n                    default: return null;\n                }\n                };\n\n                return (\n                <div id=\"report-container\" className=\"bg-white min-h-[1100px] w-full max-w-4xl mx-auto shadow-2xl print:shadow-none p-12 print:p-0\">\n                    \n                    {\/* HEADER *\/}\n                    <div className=\"flex justify-between items-end border-b-2 border-slate-900 pb-6 mb-8\">\n                    <div>\n                        <h6 className=\"text-slate-500 uppercase tracking-widest text-xs font-bold mb-2\">Informe de Auditor\u00eda Flash<\/h6>\n                        <h1 className=\"text-3xl font-extrabold text-slate-900\">{auditData.clientName}<\/h1>\n                        <a href={`https:\/\/${auditData.websiteUrl}`} className=\"text-blue-600 font-medium text-sm mt-1 block\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">{auditData.websiteUrl}<\/a>\n                    <\/div>\n                    <div className=\"text-right\">\n                        <div className=\"bg-slate-900 text-white px-4 py-1 text-xs font-bold uppercase rounded-full inline-block mb-2\">\n                        Radiograf\u00eda Digital\n                        <\/div>\n                        <p className=\"text-slate-500 text-xs\">Fecha: {auditData.date}<\/p>\n                        <p className=\"text-slate-900 font-bold text-xs\">Consultor: {auditData.consultantName}<\/p>\n                    <\/div>\n                    <\/div>\n\n                    {\/* CONTENIDO PRINCIPAL - REORDENADO *\/}\n                    <div className=\"space-y-6\">\n                    \n                    {\/* 1. PERFORMANCE CARD *\/}\n                    <div className=\"p-6 rounded-xl border border-slate-200 shadow-md bg-white\">\n                        <div className=\"flex justify-between items-center mb-6 border-b border-slate-100 pb-4\">\n                        <div className=\"flex items-center gap-2\">\n                            <Icons.Zap size={18} className=\"text-blue-600\" \/>\n                            <h3 className=\"font-bold text-lg text-slate-800 uppercase\">\n                            {performance.mode === 'pagespeed' ? '1. Velocidad (PageSpeed)' : '1. Performance & Structure'}\n                            <\/h3>\n                        <\/div>\n                        <span className=\"text-xs font-bold bg-slate-100 text-slate-500 px-2 py-1 rounded\">\n                            {performance.mode === 'pagespeed' ? 'Simulaci\u00f3n Mobile' : 'Simulaci\u00f3n WPO'}\n                        <\/span>\n                        <\/div>\n\n                        <div className=\"flex flex-col md:flex-row gap-6 items-center\">\n                        <div className=\"flex items-center justify-center min-w-[200px] border-r border-slate-100 pr-6\">\n                            {performance.mode === 'pagespeed' ? (\n                            <div className=\"flex flex-col items-center\">\n                                <SpeedGauge score={performance.pageSpeedScore} size=\"large\" \/>\n                                <span className=\"mt-2 text-xs font-bold text-slate-400 uppercase tracking-widest\">Puntuaci\u00f3n<\/span>\n                            <\/div>\n                            ) : (\n                            <div className=\"flex gap-4\">\n                                <SpeedGauge score={performance.performanceScore} label=\"Performance\" size=\"small\" \/>\n                                <div className=\"h-16 w-px bg-slate-200\"><\/div>\n                                <SpeedGauge score={performance.structureScore} label=\"Structure\" size=\"small\" \/>\n                            <\/div>\n                            )}\n                        <\/div>\n                        <div className=\"flex-1 w-full\">\n                            <div className=\"grid grid-cols-3 gap-3 mb-4\">\n                            <VitalMetric \n                                label=\"LCP\" \n                                value={performance.lcp} \n                                icon={Icons.Smartphone} \n                                description=\"Carga Principal\" \n                                statusColor={getMetricColor('lcp', performance.lcp)} \n                                reference=\"< 2.5s\"\n                            \/>\n                            <VitalMetric \n                                label=\"TTI\" \n                                value={performance.tti} \n                                icon={Icons.MousePointer2} \n                                description=\"Interactividad\" \n                                statusColor={getMetricColor('tti', performance.tti)}\n                                reference=\"< 3.8s\" \n                            \/>\n                            <VitalMetric \n                                label=\"CLS\" \n                                value={performance.cls} \n                                icon={Icons.Move} \n                                description=\"Estabilidad\" \n                                statusColor={getMetricColor('cls', performance.cls)}\n                                reference=\"< 0.1\" \n                            \/>\n                            <\/div>\n                            <div className=\"bg-slate-50 p-3 rounded-lg border-l-4 border-slate-300\">\n                            <p className=\"text-sm text-slate-700 italic mb-2\">\"{performance.observation}\"<\/p>\n                            <p className=\"text-xs font-bold text-slate-900\">\ud83d\udca5 Negocio: {performance.businessImpact}<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                    <\/div>\n\n                    {\/* 2. AUTHORITY CARD *\/}\n                    <div className={`p-6 rounded-xl border-l-4 shadow-sm ${getStatusColor(auditData.authority.status).replace('text-', 'border-')}`}>\n                        <div className=\"flex justify-between items-start mb-4\">\n                        <div className=\"flex items-center gap-2\">\n                            <Icons.Award size={18} \/>\n                            <h3 className=\"font-bold text-lg uppercase\">2. Autoridad & Tr\u00e1fico<\/h3>\n                        <\/div>\n                        {getStatusIcon(auditData.authority.status)}\n                        <\/div>\n                        \n                        <div className=\"grid grid-cols-2 md:grid-cols-5 gap-3 mb-4\">\n                        <AuthorityMetric label=\"Autoridad (DA)\" value={auditData.authority.domainAuthority} icon={Icons.ShieldCheck} \/>\n                        <AuthorityMetric label=\"Backlinks\" value={auditData.authority.backlinks} icon={Icons.Link} \/>\n                        <AuthorityMetric label=\"Keywords Org.\" value={auditData.authority.organicKeywords} icon={Icons.Hash} \/>\n                        <AuthorityMetric label=\"Tr\u00e1fico Org.\" value={auditData.authority.organicTraffic} icon={Icons.Users} \/>\n                        <AuthorityMetric label=\"Tr\u00e1fico Pago\" value={auditData.authority.paidTraffic} icon={Icons.CreditCard} \/>\n                        <\/div>\n\n                        <p className=\"text-xs font-semibold bg-white\/50 p-3 rounded block w-full\">\ud83d\udca5 Impacto Negocio: {auditData.authority.businessImpact}<\/p>\n                    <\/div>\n\n                    {\/* GRID INFERIOR: 3. SEO y 4. UX *\/}\n                    <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                        \n                        {\/* 3. SEO (MEJORADO - GOOGLE SERP SIMULATOR) *\/}\n                        <div className={`p-6 rounded-xl border-l-4 shadow-sm flex flex-col ${getStatusColor(auditData.seo.status).replace('text-', 'border-')}`}>\n                            <div className=\"flex justify-between items-start mb-4\">\n                                <div className=\"flex items-center gap-2\">\n                                <Icons.Search size={18} \/>\n                                <h3 className=\"font-bold text-base uppercase\">3. Visibilidad (SEO)<\/h3>\n                                <\/div>\n                                {getStatusIcon(auditData.seo.status)}\n                            <\/div>\n                            \n                            {\/* SERP PREVIEW BOX *\/}\n                            <div className=\"bg-white border border-slate-200 rounded p-4 mb-4 shadow-sm\">\n                                <p className=\"text-xs text-slate-500 mb-1\">Vista Previa Google (Simulaci\u00f3n)<\/p>\n                                <div className=\"font-sans\">\n                                    <div className=\"flex items-center gap-2 mb-1\">\n                                         <div className=\"w-6 h-6 bg-slate-100 rounded-full flex items-center justify-center text-[10px] text-slate-500\">G<\/div>\n                                         <div className=\"text-xs text-slate-700\">{auditData.clientName}<\/div>\n                                    <\/div>\n                                    <div className=\"text-green-700 text-xs mb-1 truncate\">{`https:\/\/${auditData.websiteUrl}`}<\/div>\n                                    <div className=\"text-blue-800 text-lg leading-tight hover:underline cursor-pointer mb-1 line-clamp-2 font-medium\">\n                                        {auditData.seo.title || \"T\u00edtulo de la P\u00e1gina no definido\"}\n                                    <\/div>\n                                    <div className=\"text-slate-600 text-sm leading-snug line-clamp-2\">\n                                        {auditData.seo.description || \"Descripci\u00f3n de la p\u00e1gina no definida...\"}\n                                    <\/div>\n                                <\/div>\n                                {\/* Length Checks *\/}\n                                <div className=\"flex gap-4 mt-3 pt-3 border-t border-slate-100\">\n                                     <div className={`text-[10px] font-bold flex items-center gap-1 ${auditData.seo.title.length > 65 ? 'text-red-500' : 'text-green-600'}`}>\n                                         <div className={`w-2 h-2 rounded-full ${auditData.seo.title.length > 65 ? 'bg-red-500' : 'bg-green-500'}`}><\/div>\n                                         T\u00edtulo: {auditData.seo.title.length}\/65\n                                     <\/div>\n                                     <div className={`text-[10px] font-bold flex items-center gap-1 ${auditData.seo.description.length > 320 ? 'text-red-500' : 'text-green-600'}`}>\n                                         <div className={`w-2 h-2 rounded-full ${auditData.seo.description.length > 320 ? 'bg-red-500' : 'bg-green-500'}`}><\/div>\n                                         Desc: {auditData.seo.description.length}\/320\n                                     <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div className=\"mt-auto\">\n                                <p className=\"text-[10px] font-bold uppercase text-slate-400 mb-1\">Keywords Principales<\/p>\n                                <div className=\"flex flex-wrap gap-1 mb-3\">\n                                    {auditData.seo.keywords.split(',').map((k, i) => (\n                                        <span key={i} className=\"bg-white\/60 px-2 py-1 rounded text-xs font-semibold border border-black\/5\">{k.trim()}<\/span>\n                                    ))}\n                                <\/div>\n                                <p className=\"text-xs font-semibold bg-white\/50 p-2 rounded\">\ud83d\udca5 {auditData.seo.businessImpact}<\/p>\n                            <\/div>\n                        <\/div>\n\n                        {\/* 4. UX (MEJORADO - VISUALIZACI\u00d3N COMPLETA) *\/}\n                        <div className={`p-6 rounded-xl border-l-4 shadow-sm flex flex-col ${getStatusColor(auditData.ux.status).replace('text-', 'border-')}`}>\n                            <div className=\"flex justify-between items-start mb-4\">\n                                <div className=\"flex items-center gap-2\">\n                                <Icons.Layout size={18} \/>\n                                <h3 className=\"font-bold text-base uppercase\">4. Experiencia (UX)<\/h3>\n                                <\/div>\n                                {getStatusIcon(auditData.ux.status)}\n                            <\/div>\n                            \n                            <div className=\"space-y-4 flex-1\">\n                                {\/* Stack Tecnol\u00f3gico *\/}\n                                <div className=\"bg-white\/50 p-3 rounded-lg border border-black\/5\">\n                                    <div className=\"flex items-center gap-2 mb-1\">\n                                        <Icons.Globe size={14} className=\"text-slate-500\"\/>\n                                        <p className=\"text-[10px] font-bold uppercase text-slate-500\">Tecnolog\u00eda Detectada<\/p>\n                                    <\/div>\n                                    <p className=\"font-bold text-sm text-slate-800\">{auditData.ux.stack}<\/p>\n                                <\/div>\n\n                                {\/* Observaci\u00f3n Completa *\/}\n                                <div>\n                                    <p className=\"text-[10px] font-bold uppercase text-slate-500 mb-1\">An\u00e1lisis de Navegaci\u00f3n<\/p>\n                                    <div className=\"bg-white\/50 p-3 rounded-lg border border-black\/5 italic text-sm text-slate-700 leading-relaxed\">\n                                        \"{auditData.ux.observation}\"\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <div className=\"mt-4 pt-3 border-t border-black\/5\">\n                                <p className=\"text-xs font-semibold\">\ud83d\udca5 Impacto Negocio: {auditData.ux.businessImpact}<\/p>\n                            <\/div>\n                        <\/div>\n\n                    <\/div>\n\n                    <\/div>\n\n                    {\/* FOOTER & DIAGNOSIS *\/}\n                    <div className=\"mt-8 bg-slate-900 text-white rounded-xl p-6 flex items-center justify-between print:break-inside-avoid\">\n                    <div>\n                        <h2 className=\"text-xl font-bold\">Diagn\u00f3stico Final<\/h2>\n                        <p className=\"text-slate-400 text-xs mt-1 max-w-md\">\n                        Se recomienda intervenci\u00f3n t\u00e9cnica inmediata en el \u00e1rea de \n                        <span className=\"text-white font-bold\"> Rendimiento<\/span> y potenciar la <span className=\"text-white font-bold\">Autoridad<\/span> para mejorar la visibilidad.\n                        <\/p>\n                    <\/div>\n                    <div className=\"text-right border-l border-slate-700 pl-6\">\n                        <p className=\"text-[10px] uppercase text-slate-500 mb-1\">Solicitar Reuni\u00f3n<\/p>\n                        <p className=\"font-bold text-lg\">{auditData.consultantName}<\/p>\n                    <\/div>\n                    <\/div>\n\n                <\/div>\n                );\n            };\n\n            return (\n                <div className=\"min-h-screen font-sans text-slate-800\">\n                \n                {\/* NAVBAR *\/}\n                <nav className=\"bg-slate-900 text-white p-4 sticky top-0 z-50 shadow-md no-print\">\n                    <div className=\"max-w-7xl mx-auto flex justify-between items-center\">\n                    <div className=\"flex items-center gap-2\">\n                        <Icons.Activity className=\"text-blue-400\" \/>\n                        <span className=\"font-bold text-lg\">Auditor\u00eda Flash <span className=\"text-slate-500 text-sm font-normal\">| Herramienta Interna<\/span><\/span>\n                    <\/div>\n                    <div className=\"flex gap-4\">\n                        <button onClick={() => setActiveTab('edit')} className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeTab === 'edit' ? 'bg-blue-600 text-white' : 'hover:bg-slate-800 text-slate-300'}`}>Editar<\/button>\n                        <button onClick={() => setActiveTab('preview')} className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${activeTab === 'preview' ? 'bg-blue-600 text-white' : 'hover:bg-slate-800 text-slate-300'}`}>Vista Previa<\/button>\n                        <button onClick={handlePrint} className=\"px-4 py-2 rounded-lg text-sm font-medium bg-green-600 hover:bg-green-700 text-white flex items-center gap-2\"><Icons.Printer size={16} \/> PDF<\/button>\n                    <\/div>\n                    <\/div>\n                <\/nav>\n\n                <main className=\"max-w-7xl mx-auto p-4 md:p-8 flex flex-col md:flex-row gap-8 items-start\">\n                    \n                    {\/* EDITOR COLUMN *\/}\n                    <div className={`w-full lg:w-1\/3 space-y-6 no-print ${activeTab === 'preview' ? 'hidden lg:block' : 'block'}`}>\n                    \n                    <SectionCard title=\"Datos Generales\" icon={Icons.Globe}>\n                        <InputField label=\"Cliente\" value={auditData.clientName} onChange={(v) => setAuditData({...auditData, clientName: v})} \/>\n                        <InputField label=\"URL Sitio\" value={auditData.websiteUrl} onChange={(v) => setAuditData({...auditData, websiteUrl: v})} \/>\n                        <InputField label=\"Consultor\" value={auditData.consultantName} onChange={(v) => setAuditData({...auditData, consultantName: v})} \/>\n                    <\/SectionCard>\n\n                    {\/* 1. VELOCIDAD *\/}\n                    <SectionCard title=\"1. Velocidad &#038; Performance\" icon={Icons.Zap}>\n                        <div className=\"bg-slate-100 p-1 rounded-lg flex mb-6\">\n                        <button onClick={() => togglePerformanceMode('pagespeed')} className={`flex-1 py-2 text-xs font-bold uppercase rounded-md transition-all ${auditData.performance.mode === 'pagespeed' ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>Modo PageSpeed<\/button>\n                        <button onClick={() => togglePerformanceMode('gtmetrix')} className={`flex-1 py-2 text-xs font-bold uppercase rounded-md transition-all ${auditData.performance.mode === 'gtmetrix' ? 'bg-white text-purple-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}>Modo GTmetrix<\/button>\n                        <\/div>\n                        {auditData.performance.mode === 'pagespeed' ? (\n                        <div className=\"mb-6 bg-blue-50 p-3 rounded-lg border border-blue-100\">\n                            <label className=\"flex justify-between text-sm font-bold text-blue-900 mb-2\"><span>PageSpeed Score<\/span><span className={`${auditData.performance.pageSpeedScore < 50 ? 'text-red-600' : auditData.performance.pageSpeedScore < 90 ? 'text-yellow-600' : 'text-green-600'}`}>{auditData.performance.pageSpeedScore}<\/span><\/label>\n                            <input type=\"range\" min=\"0\" max=\"100\" value={auditData.performance.pageSpeedScore} onChange={(e) => handleScoreChange('pageSpeedScore', e.target.value)} className=\"w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer accent-blue-600\" \/>\n                        <\/div>\n                        ) : (\n                        <div className=\"space-y-4 mb-6 bg-purple-50 p-3 rounded-lg border border-purple-100\">\n                            <div><label className=\"flex justify-between text-sm font-bold text-purple-900 mb-1\"><span>Performance %<\/span><span>{auditData.performance.performanceScore}%<\/span><\/label><input type=\"range\" min=\"0\" max=\"100\" value={auditData.performance.performanceScore} onChange={(e) => handleScoreChange('performanceScore', e.target.value)} className=\"w-full h-2 bg-purple-200 rounded-lg accent-purple-600\" \/><\/div>\n                            <div><label className=\"flex justify-between text-sm font-bold text-purple-900 mb-1\"><span>Structure %<\/span><span>{auditData.performance.structureScore}%<\/span><\/label><input type=\"range\" min=\"0\" max=\"100\" value={auditData.performance.structureScore} onChange={(e) => handleScoreChange('structureScore', e.target.value)} className=\"w-full h-2 bg-purple-200 rounded-lg accent-pink-600\" \/><\/div>\n                        <\/div>\n                        )}\n                        <div className=\"grid grid-cols-3 gap-2 mb-4\">\n                        \n                        {\/* LCP Input con Meta Visual *\/}\n                        <div>\n                            <InputField label=\"LCP\" value={auditData.performance.lcp} onChange={(v) => updateSection('performance', 'lcp', v)} \/>\n                            <p className=\"text-[10px] text-slate-400 -mt-3 mb-3 text-right\">Meta: &lt; 2.5s<\/p>\n                        <\/div>\n\n                        {\/* TTI Input con Meta Visual *\/}\n                        <div>\n                            <InputField label=\"TTI (Interact)\" value={auditData.performance.tti} onChange={(v) => updateSection('performance', 'tti', v)} \/>\n                            <p className=\"text-[10px] text-slate-400 -mt-3 mb-3 text-right\">Meta: &lt; 3.8s<\/p>\n                        <\/div>\n\n                        {\/* CLS Input con Meta Visual *\/}\n                        <div>\n                            <InputField label=\"CLS\" value={auditData.performance.cls} onChange={(v) => updateSection('performance', 'cls', v)} \/>\n                            <p className=\"text-[10px] text-slate-400 -mt-3 mb-3 text-right\">Meta: &lt; 0.1<\/p>\n                        <\/div>\n\n                        <\/div>\n                        <InputField type=\"textarea\" label=\"Observaci\u00f3n\" value={auditData.performance.observation} onChange={(v) => updateSection('performance', 'observation', v)} \/>\n                        <InputField type=\"textarea\" label=\"Impacto\" value={auditData.performance.businessImpact} onChange={(v) => updateSection('performance', 'businessImpact', v)} \/>\n                    <\/SectionCard>\n\n                    {\/* 2. AUTORIDAD *\/}\n                    <SectionCard title=\"2. Autoridad &#038; Tr\u00e1fico\" icon={Icons.Award}>\n                        <TrafficLightSelector label=\"Estado\" value={auditData.authority.status} onChange={(val) => updateSection('authority', 'status', val)} \/>\n                        <div className=\"grid grid-cols-2 gap-2\">\n                        <InputField label=\"Autoridad (DA)\" value={auditData.authority.domainAuthority} onChange={(v) => updateSection('authority', 'domainAuthority', v)} \/>\n                        <InputField label=\"Backlinks\" value={auditData.authority.backlinks} onChange={(v) => updateSection('authority', 'backlinks', v)} \/>\n                        <\/div>\n                        <div className=\"grid grid-cols-3 gap-2\">\n                        <InputField label=\"Keywords\" value={auditData.authority.organicKeywords} onChange={(v) => updateSection('authority', 'organicKeywords', v)} \/>\n                        <InputField label=\"Tr\u00e1f. Org.\" value={auditData.authority.organicTraffic} onChange={(v) => updateSection('authority', 'organicTraffic', v)} \/>\n                        <InputField label=\"Tr\u00e1f. Pago\" value={auditData.authority.paidTraffic} onChange={(v) => updateSection('authority', 'paidTraffic', v)} \/>\n                        <\/div>\n                        <InputField type=\"textarea\" label=\"Impacto Negocio\" value={auditData.authority.businessImpact} onChange={(v) => updateSection('authority', 'businessImpact', v)} \/>\n                    <\/SectionCard>\n\n                    {\/* 3. SEO *\/}\n                    <SectionCard title=\"3. SEO On-Page\" icon={Icons.Search}>\n                        <TrafficLightSelector label=\"Estado\" value={auditData.seo.status} onChange={(val) => updateSection('seo', 'status', val)} \/>\n                        <CharacterCountInput label=\"Meta Title (Max 65)\" value={auditData.seo.title} maxChars={65} placeholder=\"T\u00edtulo web...\" onChange={(v) => updateSection('seo', 'title', v)} \/>\n                        <CharacterCountInput label=\"Meta Description (Max 320)\" value={auditData.seo.description} maxChars={320} placeholder=\"Descripci\u00f3n...\" onChange={(v) => updateSection('seo', 'description', v)} \/>\n                        <InputField label=\"Keywords\" value={auditData.seo.keywords} onChange={(v) => updateSection('seo', 'keywords', v)} \/>\n                        <InputField type=\"textarea\" label=\"Impacto Negocio\" value={auditData.seo.businessImpact} onChange={(v) => updateSection('seo', 'businessImpact', v)} \/>\n                    <\/SectionCard>\n\n                    {\/* 4. UX *\/}\n                    <SectionCard title=\"4. UX \/ UI\" icon={Icons.Layout}>\n                        <TrafficLightSelector label=\"Estado\" value={auditData.ux.status} onChange={(val) => updateSection('ux', 'status', val)} \/>\n                        <InputField label=\"Stack\" value={auditData.ux.stack} onChange={(v) => updateSection('ux', 'stack', v)} \/>\n                        <InputField type=\"textarea\" label=\"Observaci\u00f3n\" value={auditData.ux.observation} onChange={(v) => updateSection('ux', 'observation', v)} \/>\n                        <InputField type=\"textarea\" label=\"Impacto Negocio\" value={auditData.ux.businessImpact} onChange={(v) => updateSection('ux', 'businessImpact', v)} \/>\n                    <\/SectionCard>\n\n                    <\/div>\n\n                    {\/* PREVIEW COLUMN *\/}\n                    <div className={`w-full lg:w-2\/3 transition-opacity duration-300 ${activeTab === 'edit' ? 'hidden lg:block' : 'block'}`}>\n                    <div className=\"sticky top-24\">\n                        <div className=\"bg-slate-200 p-4 rounded-xl mb-4 text-center text-slate-500 text-sm no-print\">\n                        Vista Previa (Dise\u00f1o Optimizado para PDF)\n                        <\/div>\n                        <ReportPreview \/>\n                    <\/div>\n                    <\/div>\n\n                <\/main>\n                <\/div>\n            );\n        }\n\n        const root = ReactDOM.createRoot(document.getElementById('root'));\n        root.render(<FlashAuditApp \/>);\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Herramienta de Auditor\u00eda Flash SEO<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-8630","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"David Jose Lazo","author_link":"https:\/\/innovame.com\/en\/author\/davidperez\/"},"uagb_comment_info":0,"uagb_excerpt":"Herramienta de Auditor\u00eda Flash SEO","_links":{"self":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/comments?post=8630"}],"version-history":[{"count":0,"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/pages\/8630\/revisions"}],"wp:attachment":[{"href":"https:\/\/innovame.com\/en\/wp-json\/wp\/v2\/media?parent=8630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}