{"id":4638,"date":"2026-04-07T14:54:18","date_gmt":"2026-04-07T12:54:18","guid":{"rendered":"https:\/\/www.imtlazarus.com\/azure-interactive-guide\/"},"modified":"2026-04-13T13:46:17","modified_gmt":"2026-04-13T11:46:17","slug":"azure-interactive-guide","status":"publish","type":"page","link":"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/","title":{"rendered":"Azure Interactive 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&#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] --><!-- [et_pb_line_break_holder] -->    <meta charset=\"UTF-8\"><!-- [et_pb_line_break_holder] -->    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><!-- [et_pb_line_break_holder] -->    <title>IMTLazarus Deployment &#8211; Microsoft Azure Ecosystem<\/title><!-- [et_pb_line_break_holder] -->    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><!-- [et_pb_line_break_holder] -->    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script><!-- [et_pb_line_break_holder] -->    <\/p>\n<style><!-- [et_pb_line_break_holder] -->        @import url('https:\/\/fonts.googleapis.com\/css2?family=Segoe+UI:wght@300;400;600;700&display=swap');<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        body {<!-- [et_pb_line_break_holder] -->            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;<!-- [et_pb_line_break_holder] -->            background-color: #faf9f8;<!-- [et_pb_line_break_holder] -->            color: #323130;<!-- [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] -->        .ms-panel {<!-- [et_pb_line_break_holder] -->            background: #ffffff;<!-- [et_pb_line_break_holder] -->            border-radius: 4px;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);<!-- [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: #eff6fc;<!-- [et_pb_line_break_holder] -->            color: #0078d4;<!-- [et_pb_line_break_holder] -->            font-weight: 600;<!-- [et_pb_line_break_holder] -->            border-left: 4px solid #0078d4;<!-- [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: #0078d4;<!-- [et_pb_line_break_holder] -->            border-color: #0078d4;<!-- [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] -->    <\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Chosen Palette: Microsoft Fluent Design inspired. Background (#faf9f8), Cards (#ffffff), Text (#323130), Microsoft Blue (#0078d4) for primary accents and checkboxes, highlight background (#eff6fc). --><!-- [et_pb_line_break_holder] --><!-- Application Structure Plan: The SPA is an interactive dashboard. The source report outlines the steps to register an Azure App, configure secrets, assign API permissions, and link to IMTLazarus. <!-- [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 guide the admin through the Azure Portal.<!-- [et_pb_line_break_holder] -->  &#8211; Interactive elements: Checkboxes update global progress.<!-- [et_pb_line_break_holder] -->  &#8211; Header: Download button for the Microsoft Azure specific PDF. &#8211;&gt; <!-- [et_pb_line_break_holder] --><!-- Visualization & Content Choices: <!-- [et_pb_line_break_holder] -->  &#8211; Goal: Track Azure configuration 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 to manage the complex, multi-step Azure Portal interface.<!-- [et_pb_line_break_holder] -->&#8211;&gt;<!-- [et_pb_line_break_holder] --><!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"max-w-6xl mx-auto\"><!-- [et_pb_line_break_holder] -->    <!-- [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-[#323130] flex items-center gap-3\"><!-- [et_pb_line_break_holder] -->                <span class=\"text-4xl\">\u2601\ufe0f<\/span> Microsoft Azure Integration<!-- [et_pb_line_break_holder] -->            <\/h1>\n<p><!-- [et_pb_line_break_holder] -->            <pee class=\"text-gray-600 mt-1 text-lg\">IMTLazarus Integration Guide with Entra ID<\/pee><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->        <\/p>\n<div class=\"flex flex-wrap items-center gap-3\"><!-- [et_pb_line_break_holder] -->            <a href=\"IMTLazarus_Microsoft_Integration_Guide.pdf\" download=\"Guia_Integracion_IMTLazarus_Microsoft.pdf\" class=\"ms-panel px-4 py-2 text-sm font-medium text-[#0078d4] border border-[#0078d4] hover:bg-[#0078d4] hover:text-white transition-colors flex items-center gap-2\"><!-- [et_pb_line_break_holder] -->                \ud83d\udcc4 Download PDF Guide<!-- [et_pb_line_break_holder] -->            <\/a><!-- [et_pb_line_break_holder] -->            <\/p>\n<div class=\"ms-panel px-4 py-2 text-sm font-medium text-gray-600 border border-gray-200\"><!-- [et_pb_line_break_holder] -->  IT Administrators<!-- [et_pb_line_break_holder] -->            <\/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] -->        <!-- [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=\"ms-panel overflow-hidden flex flex-col py-2\" id=\"phase-nav\"><!-- [et_pb_line_break_holder] -->                <!-- Navigation buttons generated by JS --><!-- [et_pb_line_break_holder] -->            <\/nav>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <\/p>\n<div class=\"ms-panel p-5 text-center\"><!-- [et_pb_line_break_holder] -->                <\/p>\n<h3 class=\"font-semibold text-[#323130] mb-2 text-sm uppercase tracking-wider\">Global Progress<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                <\/p>\n<div class=\"chart-container\"><!-- [et_pb_line_break_holder] -->                    <canvas id=\"progressChart\"><\/canvas><!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                <pee id=\"chart-status\" class=\"text-xs text-gray-500 mt-4 font-medium\"><\/pee><!-- [et_pb_line_break_holder] -->            <\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <\/p>\n<div class=\"ms-panel p-5 bg-[#fdf3f4] border-l-4 border-[#d13438]\"><!-- [et_pb_line_break_holder] -->                <\/p>\n<h3 class=\"font-bold text-[#d13438] mb-2 flex items-center gap-2\"><span>\u26a0\ufe0f<\/span> Critical Notice<\/h3>\n<p><!-- [et_pb_line_break_holder] -->                <pee class=\"text-xs text-gray-700 leading-relaxed\"><!-- [et_pb_line_break_holder] --> When generating the <strong>Client Secret<\/strong> in Azure, you must copy its <em>Value<\/em> immediately. It will not be displayed again once you leave the page. <!-- [et_pb_line_break_holder] -->                <\/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=\"ms-panel p-6 md:p-8 min-h-[600px] flex flex-col border border-gray-100\"><!-- [et_pb_line_break_holder] -->                <\/p>\n<div id=\"phase-header\" class=\"mb-6 border-b border-gray-200 pb-4\"><!-- [et_pb_line_break_holder] -->                    <!-- Phase header generated by JS --><!-- [et_pb_line_break_holder] -->                <\/div>\n<p><!-- [et_pb_line_break_holder] -->                <\/p>\n<div id=\"checklist-container\" class=\"space-y-4 flex-grow\"><!-- [et_pb_line_break_holder] -->                    <!-- Checklist content generated by JS --><!-- [et_pb_line_break_holder] -->                <\/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] --><!-- [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\udccb',<!-- [et_pb_line_break_holder] -->            title: 'FASE 1: Registro en Azure',<!-- [et_pb_line_break_holder] -->            description: 'Creaci\u00f3n del registro de la aplicaci\u00f3n en Microsoft Entra ID para sincronizaci\u00f3n.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Nuevo Registro',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Acceder al portal de Azure (portal.azure.com) con tu cuenta de administrador.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Dirigirse a Servicios de Azure > Microsoft Entra ID > Administrar > Registros de aplicaciones > Nuevo registro.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"En Nombre, introducir: 'IMTLazarus'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"En Tipos de cuenta, seleccionar obligatoriamente: 'Solo inquilino \u00fanico: [ORGANIZACI\u00d3N]'.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Configuraci\u00f3n de URIs y Datos',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir URI de redirecci\u00f3n 1 (Web): https:\/\/[tu_tenant].imtlazarus.com\/lazarus\/mlogin.php\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir URI de redirecci\u00f3n 2 (Web): https:\/\/internal.imtlazarus.com\/lazarus\/api\/ios-multiuserlogin\/mlogin.php (para dispositivos compartidos).\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Pulsar el bot\u00f3n 'Registrar'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"En la pantalla resumen, copiar a un documento temporal el ID de Aplicaci\u00f3n (cliente) y el ID de Directorio (inquilino).\", 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\udd11',<!-- [et_pb_line_break_holder] -->            title: 'FASE 2: Autenticaci\u00f3n y Secretos',<!-- [et_pb_line_break_holder] -->            description: 'Configuraci\u00f3n de tokens y generaci\u00f3n de la credencial de seguridad.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Configuraci\u00f3n de Tokens',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"En el men\u00fa izquierdo de la app creada, ir a 'Autenticaci\u00f3n'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"En la secci\u00f3n Configuraci\u00f3n, marcar las casillas 'Tokens de acceso' y 'Tokens de id.' y pulsar Guardar.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Generaci\u00f3n del Secreto de Cliente',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Ir a 'Certificados y secretos' > 'Nuevo secreto de cliente'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Descripci\u00f3n: IMTLazarus. Tiempo de expiraci\u00f3n: el m\u00e1ximo tiempo posible. Pulsar Agregar.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"\u00a1Importante! Copiar el 'Valor' del secreto en este mismo momento y guardarlo en el documento temporal.\", 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\udee1\ufe0f',<!-- [et_pb_line_break_holder] -->            title: 'FASE 3: Permisos de API',<!-- [et_pb_line_break_holder] -->            description: 'Asignaci\u00f3n de permisos de Microsoft Graph y consentimiento global.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Permisos Delegados',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Dirigirse a 'Permisos de API' > 'Agregar un permiso' > 'Microsoft Graph'.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir Permisos Delegados: Device.Read, Family.Read, User.Read, User.ReadBasic.All.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Permisos de Aplicaci\u00f3n',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir Permisos de Aplicaci\u00f3n: AppCatalog.Read.All, AppCatalog.ReadWrite.All, Channel.Create, Device.Read.All.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir Permisos de Aplicaci\u00f3n (cont.): Directory.Read.All, Domain.Read.All, Group.Read.All, Member.Read.Hidden.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"A\u00f1adir Permisos de Aplicaci\u00f3n (cont.): TeamsTab.Create, TeamsTab.Read.All, TeamsTab.ReadWrite.All, TeamsTab.ReadWriteForTeam.All, User.Read.All.\", completed: false }<!-- [et_pb_line_break_holder] -->                    ]<!-- [et_pb_line_break_holder] -->                },<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Consentimiento',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Pulsar el bot\u00f3n 'Conceder consentimiento de administrador para [Organizaci\u00f3n]' para aplicar los permisos de forma global.\", 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: '\ud83d\udd0c',<!-- [et_pb_line_break_holder] -->            title: 'FASE 4: Vinculaci\u00f3n IMTLazarus',<!-- [et_pb_line_break_holder] -->            description: 'Conexi\u00f3n final introduciendo los datos recogidos en la plataforma educativa.',<!-- [et_pb_line_break_holder] -->            groups: [<!-- [et_pb_line_break_holder] -->                {<!-- [et_pb_line_break_holder] -->                    title: 'Integraci\u00f3n en Panel',<!-- [et_pb_line_break_holder] -->                    items: [<!-- [et_pb_line_break_holder] -->                        { text: \"Ir al servidor de IMTLazarus: Administrador > Configuraci\u00f3n > Integraci\u00f3n > Microsoft.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Pegar el ID de directorio (Tenant) en su campo correspondiente.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Pegar el ID de aplicaci\u00f3n (Client) en su campo.\", completed: false },<!-- [et_pb_line_break_holder] -->                        { text: \"Pegar el Valor del secreto de cliente generado en la Fase 2 y guardar los cambios.\", 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-[#323130] 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 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-[#eff6fc]' : '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-5 w-5 border 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-0.5 leading-relaxed ${item.completed ? 'text-gray-500 line-through' : 'text-[#323130]'}\">${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-xs text-[#605e5c] 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 'Segoe UI', sans-serif\";<!-- [et_pb_line_break_holder] -->                ctx.textBaseline = \"middle\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = \"#323130\";<!-- [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: ['#0078d4', '#edebe9'],<!-- [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_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-4638","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>Azure Interactive 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\/azure-interactive-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Azure Interactive Guide - IMTLazarus\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"IMTLazarus\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T11:46:17+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\/azure-interactive-guide\/\",\"url\":\"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/\",\"name\":\"Azure Interactive Guide - IMTLazarus\",\"isPartOf\":{\"@id\":\"https:\/\/www.imtlazarus.com\/#website\"},\"datePublished\":\"2026-04-07T12:54:18+00:00\",\"dateModified\":\"2026-04-13T11:46:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.imtlazarus.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Azure Interactive 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":"Azure Interactive 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\/azure-interactive-guide\/","og_locale":"en_US","og_type":"article","og_title":"Azure Interactive Guide - IMTLazarus","og_url":"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/","og_site_name":"IMTLazarus","article_modified_time":"2026-04-13T11:46:17+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\/azure-interactive-guide\/","url":"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/","name":"Azure Interactive Guide - IMTLazarus","isPartOf":{"@id":"https:\/\/www.imtlazarus.com\/#website"},"datePublished":"2026-04-07T12:54:18+00:00","dateModified":"2026-04-13T11:46:17+00:00","breadcrumb":{"@id":"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.imtlazarus.com\/en\/azure-interactive-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.imtlazarus.com\/"},{"@type":"ListItem","position":2,"name":"Azure Interactive 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\/4638","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=4638"}],"version-history":[{"count":5,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages\/4638\/revisions"}],"predecessor-version":[{"id":4643,"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/pages\/4638\/revisions\/4643"}],"wp:attachment":[{"href":"https:\/\/www.imtlazarus.com\/en\/wp-json\/wp\/v2\/media?parent=4638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}