{"id":4626,"date":"2026-04-13T09:44:45","date_gmt":"2026-04-13T07:44:45","guid":{"rendered":"https:\/\/www.imtlazarus.com\/interactive-google-guide\/"},"modified":"2026-04-13T13:44:00","modified_gmt":"2026-04-13T11:44:00","slug":"interactive-google-guide","status":"publish","type":"page","link":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/","title":{"rendered":"Interactive Google Guide"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; module_class=&#8221;wpt-divi-forms wpt-divi-forms wpt-divi-forms wpt-divi-forms wpt-divi-forms wpt-divi-forms wpt-divi-forms&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_code _builder_version=&#8221;4.27.5&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><!-- [et_pb_line_break_holder] -->\t<title>IMTLazarus Deployment &#8211; Google Workspace Ecosystem<\/title><!-- [et_pb_line_break_holder] -->\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script><!-- [et_pb_line_break_holder] -->\t<\/p>\n<style type=\"text\/css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        body {<!-- [et_pb_line_break_holder] -->            font-family: 'Open Sans', sans-serif;<!-- [et_pb_line_break_holder] -->            background-color: #f8f9fa;<!-- [et_pb_line_break_holder] -->            color: #202124;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .chart-container {<!-- [et_pb_line_break_holder] -->            position: relative;<!-- [et_pb_line_break_holder] -->            width: 100%;<!-- [et_pb_line_break_holder] -->            max-width: 280px;<!-- [et_pb_line_break_holder] -->            margin-left: auto;<!-- [et_pb_line_break_holder] -->            margin-right: auto;<!-- [et_pb_line_break_holder] -->            height: 250px;<!-- [et_pb_line_break_holder] -->            max-height: 280px;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .google-panel {<!-- [et_pb_line_break_holder] -->            background: #ffffff;<!-- [et_pb_line_break_holder] -->            border-radius: 8px;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .nav-btn.active {<!-- [et_pb_line_break_holder] -->            background-color: #e8f0fe;<!-- [et_pb_line_break_holder] -->            color: #1a73e8;<!-- [et_pb_line_break_holder] -->            font-weight: 600;<!-- [et_pb_line_break_holder] -->            border-left: 4px solid #1a73e8;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .nav-btn {<!-- [et_pb_line_break_holder] -->            transition: all 0.2s ease;<!-- [et_pb_line_break_holder] -->            border-left: 4px solid transparent;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .checkbox-wrapper input:checked + div {<!-- [et_pb_line_break_holder] -->            background-color: #1a73e8;<!-- [et_pb_line_break_holder] -->            border-color: #1a73e8;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        .checkbox-wrapper input:checked + div::after {<!-- [et_pb_line_break_holder] -->            content: '\u2713';<!-- [et_pb_line_break_holder] -->            color: white;<!-- [et_pb_line_break_holder] -->            position: absolute;<!-- [et_pb_line_break_holder] -->            top: 50%;<!-- [et_pb_line_break_holder] -->            left: 50%;<!-- [et_pb_line_break_holder] -->            transform: translate(-50%, -50%);<!-- [et_pb_line_break_holder] -->            font-size: 14px;<!-- [et_pb_line_break_holder] -->            font-weight: bold;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->\t<\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Chosen Palette: Google Workspace inspired. Background (#f8f9fa), Cards (#ffffff), Text (#202124), Google Blue (#1a73e8) for primary accents and checkboxes, highlight background (#e8f0fe). --><!-- Application Structure Plan: The SPA is a dashboard. The source report defines 4 phases for Google Workspace deployment: Import, ChromeOS Policies, Classroom, and Add-ons.<!-- [et_pb_line_break_holder] -->  &#8211; Left sidebar: Navigation between phases and a progress donut chart.<!-- [et_pb_line_break_holder] -->  &#8211; Main area: Checklist for the selected phase to keep track of the complex Google Admin console setup.<!-- [et_pb_line_break_holder] -->  &#8211; Interactive elements: Checkboxes update global progress.<!-- [et_pb_line_break_holder] -->  &#8211; Header: Download button for the generated PDF specific to Google Workspace. &#8211;&gt;<!-- Visualization & Content Choices: <!-- [et_pb_line_break_holder] --> &#8211; Goal: Track MDM setup progress. <!-- [et_pb_line_break_holder] --> &#8211; Presentation: Donut Chart (Chart.js Canvas). <!-- [et_pb_line_break_holder] --> &#8211; Interaction: Auto-updates as checklist items are marked.<!-- [et_pb_line_break_holder] --> &#8211; Justification: Visual feedback for complex Google Admin &amp; Cloud setups.<!-- [et_pb_line_break_holder] -->&#8211;&gt; <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"max-w-6xl mx-auto\"><!-- [et_pb_line_break_holder] --><\/p>\n<header class=\"mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4\"><!-- [et_pb_line_break_holder] --><\/p>\n<div><!-- [et_pb_line_break_holder] --><\/p>\n<h1 class=\"text-3xl font-bold text-[#202124] flex items-center gap-3\"><span class=\"text-4xl\">\ud83c\udf10<\/span> Google Workspace Integration<\/h1>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><pee class=\"text-gray-600 mt-1 text-lg\">IMTLazarus Deployment Guide for Google Ecosystem<\/pee><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"flex flex-wrap items-center gap-3\"><a class=\"google-panel px-4 py-2 text-sm font-medium text-[#1a73e8] border border-[#1a73e8] hover:bg-[#1a73e8] hover:text-white transition-colors flex items-center gap-2\" download=\"Guia_Despliegue_IMTLazarus_GoogleWorkspace.pdf\" href=\"IMTLazarus_GoogleWorkspace_Deployment_Guide.pdf\">\ud83d\udcc4 Download PDF Guide <\/a><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"google-panel px-4 py-2 text-sm font-medium text-gray-600\">IT Coordinators<\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/header>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"grid grid-cols-1 lg:grid-cols-4 gap-6\"><!-- [et_pb_line_break_holder] --><\/p>\n<aside class=\"lg:col-span-1 space-y-6\"><!-- [et_pb_line_break_holder] --><\/p>\n<nav class=\"google-panel overflow-hidden flex flex-col py-2\" id=\"phase-nav\"><!-- Navigation buttons generated by JS --><\/nav>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"google-panel p-5 text-center\"><!-- [et_pb_line_break_holder] --><\/p>\n<h3 class=\"font-semibold text-[#202124] mb-2 text-sm uppercase tracking-wider\">Global Progress<\/h3>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"chart-container\"><canvas id=\"progressChart\"><\/canvas><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><pee class=\"text-xs text-gray-500 mt-4 font-medium\" id=\"chart-status\">&nbsp;<\/pee><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"google-panel p-5 bg-[#fce8e6] border-l-4 border-[#d93025]\"><!-- [et_pb_line_break_holder] --><\/p>\n<h3 class=\"font-bold text-[#d93025] mb-2 flex items-center gap-2\"><span>\ud83d\udee1\ufe0f<\/span> Critical Policy<\/h3>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><pee class=\"text-xs text-gray-700 leading-relaxed\">It is vital to <strong>force the installation<\/strong> of the &#8220;IMTLazarusv3&#8221; extension in the students&#8217; Organizational Unit to prevent blocking and ensure web filtering.<\/pee><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/aside>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><main class=\"lg:col-span-3\"><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"google-panel p-6 md:p-8 min-h-[600px] flex flex-col\"><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"mb-6 border-b border-gray-200 pb-4\" id=\"phase-header\"><!-- Phase header generated by JS --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"space-y-4 flex-grow\" id=\"checklist-container\"><!-- Checklist content generated by JS --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/main><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    const phases = [<!-- [et_pb_line_break_holder] -->        {<!-- [et_pb_line_break_holder] -->            id: 'phase1',<!-- [et_pb_line_break_holder] -->            icon: '\ud83d\udd17',<!-- [et_pb_line_break_holder] -->            title: 'FASE 1: Conexi\u00f3n e Importaci\u00f3n',<!-- [et_pb_line_break_holder] -->            description: 'Vincular IMTLazarus con Google Workspace para importar usuarios autom\u00e1ticamente.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'ID y Autorizaci\u00f3n en Google Workspace',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Copiar el ID de Aplicaci\u00f3n desde el panel de IMTLazarus (Configuraci\u00f3n > Integraci\u00f3n > Google Workspace).\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"En Google Admin: Ir a Seguridad > Control de acceso y datos > Controles de APIs.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Autorizar la app en 'Gestionar acceso' (Pegar ID) y dar permisos de lectura en la UO ra\u00edz.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Token y Sincronizaci\u00f3n',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"En IMTLazarus: Pulsar 'Obtener Key' e iniciar sesi\u00f3n con la cuenta de Administrador de Google.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Copiar el C\u00f3digo de autorizaci\u00f3n, pegarlo en 'Key', marcar 'Enlace Activo' y guardar.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Importar Grupos (UOs), Dispositivos (Chromebook) y Supervisores (Docentes) desde sus pesta\u00f1as correspondientes.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Ejecutar la sincronizaci\u00f3n final para asegurar la vinculaci\u00f3n de docentes y alumnos.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            ]<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        {<!-- [et_pb_line_break_holder] -->            id: 'phase2',<!-- [et_pb_line_break_holder] -->            icon: '\ud83d\udee1\ufe0f',<!-- [et_pb_line_break_holder] -->            title: 'FASE 2: Pol\u00edticas en ChromeOS',<!-- [et_pb_line_break_holder] -->            description: 'Instalar la extensi\u00f3n obligatoria y configurar pol\u00edticas de seguridad restrictivas.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Extensi\u00f3n IMTLazarus',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"En Google Admin: Ir a Dispositivos > Chrome > Aplicaciones y extensiones > Usuarios y navegadores.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Seleccionar la UO de los alumnos, a\u00f1adir la extensi\u00f3n 'IMTLazarusv3'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Cambiar la pol\u00edtica a 'Forzar instalaci\u00f3n'.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Pol\u00edticas de Seguridad Cr\u00edticas',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Impedir inicio\/cierre de sesi\u00f3n en cuentas secundarias y bloquear el modo inc\u00f3gnito.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Evitar que los dispositivos puedan ser registrados por el usuario tras un reseteo (Powerwash).\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Bloquear el uso de herramientas de desarrollador integradas.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir 'javascript:\/\/*' en la lista de bloqueo de URLs (Protecci\u00f3n de inyecciones).\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            ]<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        {<!-- [et_pb_line_break_holder] -->            id: 'phase3',<!-- [et_pb_line_break_holder] -->            icon: '\ud83d\udcda',<!-- [et_pb_line_break_holder] -->            title: 'FASE 3: Google Classroom',<!-- [et_pb_line_break_holder] -->            description: 'Integrar las clases de Google Classroom directamente en el panel docente de IMTLazarus.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Google Cloud y Configuraci\u00f3n OAuth',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Crear un proyecto 'IMTLazarus' en Google Cloud Platform y habilitar la API de Google Classroom.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Configurar la pantalla de consentimiento para p\u00fablico 'Interno'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Crear un ID de Cliente OAuth (Aplicaci\u00f3n Web) a\u00f1adiendo or\u00edgenes autorizados y URIs de redireccionamiento al servidor IMTLazarus.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Carga de Credenciales en IMTLazarus',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Descargar el archivo JSON generado en Google Cloud.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Subirlo en IMTLazarus (Administrador > Configuraci\u00f3n > General > Integraci\u00f3n Google Classroom).\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Ir a Supervisores > Roles y activar el permiso 'Google Classroom' para el rol docente.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            ]<!-- [et_pb_line_break_holder] -->        },<!-- [et_pb_line_break_holder] -->        {<!-- [et_pb_line_break_holder] -->            id: 'phase4',<!-- [et_pb_line_break_holder] -->            icon: '\ud83e\udde9',<!-- [et_pb_line_break_holder] -->            title: 'FASE 4: Ecosistema Adicional',<!-- [et_pb_line_break_holder] -->            description: 'Despliegue de herramientas adicionales para privacidad, familias y apoyo docente.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Extensiones de Apoyo (IMTFusion e IMTSwitch)',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Desplegar (forzar instalaci\u00f3n) de la extensi\u00f3n IMTFusion en las cuentas de los docentes y coordinadores.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Desplegar (forzar instalaci\u00f3n) de la extensi\u00f3n IMTSwitch para aplicar seudonimizaci\u00f3n y privacidad.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Entorno Familiar (IMTHome)',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Proporcionar las credenciales del portal familiar (IMT4Families) a los tutores legales.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Informar a las familias sobre funcionalidades 24h: l\u00edmites, rutinas y filtros de YouTube.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            ]<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    let currentPhaseIndex = 0;<!-- [et_pb_line_break_holder] -->    let progressChartInstance = null;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function init() {<!-- [et_pb_line_break_holder] -->        renderNavigation();<!-- [et_pb_line_break_holder] -->        renderPhaseContent(currentPhaseIndex);<!-- [et_pb_line_break_holder] -->        initChart();<!-- [et_pb_line_break_holder] -->        updateChart();<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function renderNavigation() {<!-- [et_pb_line_break_holder] -->        const navContainer = document.getElementById('phase-nav');<!-- [et_pb_line_break_holder] -->        navContainer.innerHTML = '';<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        phases.forEach((phase, index) => {<!-- [et_pb_line_break_holder] -->            const btn = document.createElement('button');<!-- [et_pb_line_break_holder] -->            btn.className = `nav-btn text-left px-4 py-3 flex items-center gap-3 w-full ${index === currentPhaseIndex ? 'active' : 'text-gray-600 hover:bg-gray-50'}`;<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            btn.innerHTML = `<!-- [et_pb_line_break_holder] -->                <span class=\"text-xl\">${phase.icon}<\/span><!-- [et_pb_line_break_holder] -->                <span>${phase.title.split(':')[0]}<\/span><!-- [et_pb_line_break_holder] -->            `;<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            btn.onclick = () => {<!-- [et_pb_line_break_holder] -->                currentPhaseIndex = index;<!-- [et_pb_line_break_holder] -->                renderNavigation(); <!-- [et_pb_line_break_holder] -->                renderPhaseContent(index);<!-- [et_pb_line_break_holder] -->            };<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            navContainer.appendChild(btn);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function renderPhaseContent(index) {<!-- [et_pb_line_break_holder] -->        const phase = phases[index];<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        const headerContainer = document.getElementById('phase-header');<!-- [et_pb_line_break_holder] -->        headerContainer.innerHTML = `<!-- [et_pb_line_break_holder] -->            <\/p>\n<h2 class=\"text-2xl font-bold text-[#202124] flex items-center gap-2\"><!-- [et_pb_line_break_holder] -->                ${phase.title}<!-- [et_pb_line_break_holder] -->            <\/h2>\n<p><!-- [et_pb_line_break_holder] -->            <pee class=\"text-gray-600 mt-2\">${phase.description}<\/pee><!-- [et_pb_line_break_holder] -->        `;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const container = document.getElementById('checklist-container');<!-- [et_pb_line_break_holder] -->        container.innerHTML = '';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        phase.groups.forEach((group, gIndex) => {<!-- [et_pb_line_break_holder] -->            const groupDiv = document.createElement('div');<!-- [et_pb_line_break_holder] -->            groupDiv.className = 'border border-gray-200 rounded-lg overflow-hidden';<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            let itemsHtml = '';<!-- [et_pb_line_break_holder] -->            group.items.forEach((item, iIndex) => {<!-- [et_pb_line_break_holder] -->                const isChecked = item.completed ? 'checked' : '';<!-- [et_pb_line_break_holder] -->                const bgClass = item.completed ? 'bg-[#e8f0fe]' : 'bg-white';<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                itemsHtml += `<!-- [et_pb_line_break_holder] -->                    <label class=\"flex items-start gap-4 p-4 border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50 transition-colors checkbox-wrapper ${bgClass}\"><!-- [et_pb_line_break_holder] -->                        <\/p>\n<div class=\"relative flex items-start pt-1\"><!-- [et_pb_line_break_holder] -->                            <input type=\"checkbox\" class=\"opacity-0 absolute h-0 w-0\" ${isChecked} onchange=\"toggleStep(${index}, ${gIndex}, ${iIndex})\"><!-- [et_pb_line_break_holder] -->                            <\/p>\n<div class=\"h-6 w-6 border-2 border-gray-400 rounded-sm transition-colors relative bg-white\"><\/div>\n<p><!-- [et_pb_line_break_holder] -->                        <\/div>\n<p><!-- [et_pb_line_break_holder] -->                        <span class=\"text-sm md:text-base pt-1 leading-relaxed ${item.completed ? 'text-gray-500 line-through' : 'text-[#202124]'}\">${item.text}<\/span><!-- [et_pb_line_break_holder] -->                    <\/label><!-- [et_pb_line_break_holder] -->                `;<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            groupDiv.innerHTML = `<!-- [et_pb_line_break_holder] -->                <\/p>\n<div class=\"bg-gray-50 px-4 py-2 border-b border-gray-200\"><!-- [et_pb_line_break_holder] -->                    <\/p>\n<h3 class=\"font-bold text-sm text-[#5f6368] uppercase tracking-wider\">${group.title}<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                <\/p>\n<div>${itemsHtml}<\/div>\n<p><!-- [et_pb_line_break_holder] -->            `;<!-- [et_pb_line_break_holder] -->            container.appendChild(groupDiv);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function toggleStep(pIndex, gIndex, iIndex) {<!-- [et_pb_line_break_holder] -->        phases[pIndex].groups[gIndex].items[iIndex].completed = !phases[pIndex].groups[gIndex].items[iIndex].completed;<!-- [et_pb_line_break_holder] -->        renderPhaseContent(pIndex);<!-- [et_pb_line_break_holder] -->        updateChart();<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function updateChart() {<!-- [et_pb_line_break_holder] -->        let total = 0;<!-- [et_pb_line_break_holder] -->        let completed = 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        phases.forEach(phase => {<!-- [et_pb_line_break_holder] -->            phase.groups.forEach(group => {<!-- [et_pb_line_break_holder] -->                group.items.forEach(item => {<!-- [et_pb_line_break_holder] -->                    total++;<!-- [et_pb_line_break_holder] -->                    if (item.completed) completed++;<!-- [et_pb_line_break_holder] -->                });<!-- [et_pb_line_break_holder] -->            });<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        document.getElementById('chart-status').innerText = `${completed} de ${total} tareas completadas`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        if (progressChartInstance) {<!-- [et_pb_line_break_holder] -->            progressChartInstance.data.datasets[0].data = [completed, total - completed];<!-- [et_pb_line_break_holder] -->            progressChartInstance.update();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    function initChart() {<!-- [et_pb_line_break_holder] -->        const ctx = document.getElementById('progressChart').getContext('2d');<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        const textCenterPlugin = {<!-- [et_pb_line_break_holder] -->            id: 'textCenter',<!-- [et_pb_line_break_holder] -->            beforeDraw: function(chart) {<!-- [et_pb_line_break_holder] -->                var width = chart.width,<!-- [et_pb_line_break_holder] -->                    height = chart.height,<!-- [et_pb_line_break_holder] -->                    ctx = chart.ctx;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                ctx.restore();<!-- [et_pb_line_break_holder] -->                var fontSize = (height \/ 110).toFixed(2);<!-- [et_pb_line_break_holder] -->                ctx.font = \"bold \" + fontSize + \"em 'Open Sans', sans-serif\";<!-- [et_pb_line_break_holder] -->                ctx.textBaseline = \"middle\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = \"#202124\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                var data = chart.data.datasets[0].data;<!-- [et_pb_line_break_holder] -->                var total = data[0] + data[1];<!-- [et_pb_line_break_holder] -->                var percentage = total === 0 ? 0 : Math.round((data[0] \/ total) * 100);<!-- [et_pb_line_break_holder] -->                var text = percentage + \"%\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                var textX = Math.round((width - ctx.measureText(text).width) \/ 2),<!-- [et_pb_line_break_holder] -->                    textY = height \/ 2;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                ctx.fillText(text, textX, textY);<!-- [et_pb_line_break_holder] -->                ctx.save();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        progressChartInstance = new Chart(ctx, {<!-- [et_pb_line_break_holder] -->            type: 'doughnut',<!-- [et_pb_line_break_holder] -->            data: {<!-- [et_pb_line_break_holder] -->                labels: ['Completado', 'Pendiente'],<!-- [et_pb_line_break_holder] -->                datasets: [{<!-- [et_pb_line_break_holder] -->                    data: [0, 10], <!-- [et_pb_line_break_holder] -->                    backgroundColor: ['#1a73e8', '#e8eaed'],<!-- [et_pb_line_break_holder] -->                    borderWidth: 0,<!-- [et_pb_line_break_holder] -->                    cutout: '75%'<!-- [et_pb_line_break_holder] -->                }]<!-- [et_pb_line_break_holder] -->            },<!-- [et_pb_line_break_holder] -->            options: {<!-- [et_pb_line_break_holder] -->                responsive: true,<!-- [et_pb_line_break_holder] -->                maintainAspectRatio: false,<!-- [et_pb_line_break_holder] -->                plugins: {<!-- [et_pb_line_break_holder] -->                    legend: { display: false },<!-- [et_pb_line_break_holder] -->                    tooltip: {<!-- [et_pb_line_break_holder] -->                        callbacks: {<!-- [et_pb_line_break_holder] -->                            label: function(context) {<!-- [et_pb_line_break_holder] -->                                return ` ${context.label}: ${context.parsed} tareas`;<!-- [et_pb_line_break_holder] -->                            }<!-- [et_pb_line_break_holder] -->                        }<!-- [et_pb_line_break_holder] -->                    }<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            },<!-- [et_pb_line_break_holder] -->            plugins: [textCenterPlugin]<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    window.onload = init;<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-4626","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interactive Google Guide - IMTLazarus<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactive Google Guide - IMTLazarus\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"IMTLazarus\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T11:44:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/\",\"url\":\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/\",\"name\":\"Interactive Google Guide - IMTLazarus\",\"isPartOf\":{\"@id\":\"https:\/\/www.imtlazarus.com\/#website\"},\"datePublished\":\"2026-04-13T07:44:45+00:00\",\"dateModified\":\"2026-04-13T11:44:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.imtlazarus.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interactive Google Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.imtlazarus.com\/#website\",\"url\":\"https:\/\/www.imtlazarus.com\/\",\"name\":\"IMTLazarus\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.imtlazarus.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interactive Google Guide - IMTLazarus","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/","og_locale":"en_US","og_type":"article","og_title":"Interactive Google Guide - IMTLazarus","og_url":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/","og_site_name":"IMTLazarus","article_modified_time":"2026-04-13T11:44:00+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/","url":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/","name":"Interactive Google Guide - IMTLazarus","isPartOf":{"@id":"https:\/\/www.imtlazarus.com\/#website"},"datePublished":"2026-04-13T07:44:45+00:00","dateModified":"2026-04-13T11:44:00+00:00","breadcrumb":{"@id":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.imtlazarus.com\/en\/interactive-google-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.imtlazarus.com\/"},{"@type":"ListItem","position":2,"name":"Interactive Google Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.imtlazarus.com\/#website","url":"https:\/\/www.imtlazarus.com\/","name":"IMTLazarus","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.imtlazarus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages\/4626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/comments?post=4626"}],"version-history":[{"count":5,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages\/4626\/revisions"}],"predecessor-version":[{"id":4631,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages\/4626\/revisions\/4631"}],"wp:attachment":[{"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/media?parent=4626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}