Infografía: Habilitación Socio Laboral de Servicios de Cuidados
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>







<div class="container mx-auto px-4 py-8 md:py-16">

    <header class="text-center mb-12 md:mb-20">
        <h1 class="text-4xl md:text-6xl font-black text-[#00A6A6] uppercase">Habilitación Socio Laboral</h1>
        <p class="text-xl md:text-2xl font-bold text-[#75C9C8] mt-2">Una Guía para Profesionales del Cuidado</p>
    </header>

    <main>
        <section id="rol-cuidador" class="mb-16">
            <div class="bg-white rounded-2xl shadow-2xl p-6 md:p-10">
                <h2 class="text-3xl font-bold text-[#EF8236] mb-2 text-center">1. El Mundo de los Cuidados</h2>
                <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">El envejecimiento de la población ha creado una creciente necesidad de cuidadores profesionales. Entender el rol, los desafíos y las habilidades necesarias es el primer paso para una carrera exitosa y gratificante.</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-4 text-center">Desafíos Globales en Cuidados</h3>
                        <p class="text-sm text-center text-gray-500 mb-4">Casi la mitad de la población mundial carece de acceso a cuidados de larga duración, evidenciando una brecha de cobertura crítica.</p>
                        <div class="chart-container">
                            <canvas id="coberturaChart"></canvas>
                        </div>
                    </div>

                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-4 text-center">Perfil del Cuidador: Tipos</h3>
                        <p class="text-sm text-center text-gray-500 mb-4">El cuidado se divide en formal (profesional) e informal (familiar), donde las mujeres representan la gran mayoría de los cuidadores no remunerados.</p>
                        <div class="chart-container">
                            <canvas id="cuidadoresChart"></canvas>
                        </div>
                    </div>

                    <div class="md:col-span-2 bg-gray-50 p-6 rounded-lg mt-8">
                        <h3 class="text-xl font-bold mb-6 text-center">Habilidades y Funciones Clave del Cuidador</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">🤝</span>
                                <h4 class="font-bold mt-2">Empatía y Respeto</h4>
                                <p class="text-sm text-gray-600">Trato digno y comprensivo.</p>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">🧘</span>
                                <h4 class="font-bold mt-2">Paciencia y Flexibilidad</h4>
                                <p class="text-sm text-gray-600">Adaptarse a imprevistos.</p>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">🧼</span>
                                <h4 class="font-bold mt-2">Asistencia Diaria</h4>
                                <p class="text-sm text-gray-600">Higiene, alimentación y movilidad.</p>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">💊</span>
                                <h4 class="font-bold mt-2">Gestión de Medicamentos</h4>
                                <p class="text-sm text-gray-600">Administración y control.</p>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">❤️</span>
                                <h4 class="font-bold mt-2">Acompañamiento</h4>
                                <p class="text-sm text-gray-600">Apoyo emocional y recreativo.</p>
                            </div>
                            <div class="text-center p-4 bg-white rounded-lg shadow">
                                <span class="text-4xl text-[#EF8236]">🧠</span>
                                <h4 class="font-bold mt-2">Autocuidado</h4>
                                <p class="text-sm text-gray-600">Reconocer y evitar la sobrecarga.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="normativa-laboral" class="mb-16">
            <div class="bg-white rounded-2xl shadow-2xl p-6 md:p-10">
                <h2 class="text-3xl font-bold text-[#00A6A6] mb-2 text-center">2. Tus Derechos Como Profesional</h2>
                <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Formalizar tu trabajo a través de un contrato es fundamental. Conoce los tipos de contrato y las condiciones de la jornada laboral en Chile para asegurar una relación laboral justa y transparente.</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-4 text-center">Tipos de Contrato de Trabajo</h3>
                        <p class="text-sm text-center text-gray-500 mb-4">Cada tipo de contrato ofrece diferentes condiciones de duración y propósito, adaptándose a las necesidades de empleadores y trabajadores.</p>
                        <div class="chart-container h-96">
                            <canvas id="contratosChart"></canvas>
                        </div>
                    </div>

                    <div class="space-y-6">
                        <div class="bg-gray-50 p-8 rounded-lg text-center">
                            <h3 class="text-lg font-bold text-gray-700">Jornada Laboral Ordinaria</h3>
                            <p class="text-6xl font-black text-[#00A6A6]">45</p>
                            <p class="font-bold">Horas Semanales Máximas</p>
                            <p class="text-sm text-gray-500 mt-2">(Distribuidas en 5 o 6 días)</p>
                        </div>
                        <div class="bg-gray-50 p-8 rounded-lg text-center">
                            <h3 class="text-lg font-bold text-gray-700">Pago de Horas Extra</h3>
                            <p class="text-6xl font-black text-[#00A6A6]">50%</p>
                            <p class="font-bold">De Recargo Sobre el Sueldo</p>
                            <p class="text-sm text-gray-500 mt-2">(Con acuerdo escrito, máx. 2h/día)</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="busqueda-empleo">
            <div class="bg-white rounded-2xl shadow-2xl p-6 md:p-10">
                <h2 class="text-3xl font-bold text-[#EF8236] mb-2 text-center">3. Tu Camino Hacia el Empleo</h2>
                <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto">Encontrar el trabajo adecuado requiere una estrategia clara. Desde la creación de un CV efectivo hasta la preparación para la entrevista, cada paso es crucial para destacar como profesional.</p>

                <div class="mb-12">
                    <h3 class="text-xl font-bold mb-6 text-center">Proceso de Búsqueda de Empleo</h3>
                    <div class="grid grid-cols-1 md:grid-cols-5 items-center gap-4">
                        <div class="flowchart-step bg-[#75C9C8] text-white">
                            <p><strong class="block text-lg">Paso 1:</strong> Elige y crea tu CV ideal</p>
                        </div>
                        <div class="flowchart-arrow text-[#75C9C8] text-center">➔</div>
                        <div class="flowchart-step bg-[#F4A767] text-white">
                            <p><strong class="block text-lg">Paso 2:</strong> Busca en plataformas online</p>
                        </div>
                        <div class="flowchart-arrow text-[#F4A767] text-center">➔</div>
                        <div class="flowchart-step bg-[#EF8236] text-white">
                            <p><strong class="block text-lg">Paso 3:</strong> Prepárate y ten éxito en la entrevista</p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="font-bold text-lg mb-2 text-center">CV Cronológico Inverso</h4>
                        <p class="text-sm text-gray-600">Ideal para mostrar una trayectoria laboral sólida y ascendente. Se enfoca en la experiencia, listando los trabajos del más reciente al más antiguo.</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="font-bold text-lg mb-2 text-center">CV Funcional</h4>
                        <p class="text-sm text-gray-600">Perfecto si tienes periodos de inactividad o cambias de sector. Destaca tus habilidades y logros por encima de la cronología laboral.</p>
                    </div>
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h4 class="font-bold text-lg mb-2 text-center">CV Combinado</h4>
                        <p class="text-sm text-gray-600">El más completo. Fusiona lo mejor de ambos: presenta tus habilidades clave al principio, respaldadas por tu experiencia cronológica.</p>
                    </div>
                </div>

                <div class="mt-12 bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-bold mb-4 text-center">Claves para la Entrevista de Cuidador/a</h3>
                    <ul class="list-none space-y-3">
                        <li class="flex items-start"><span class="text-[#EF8236] mr-3 text-2xl">✔</span><span><strong>Demuestra Experiencia:</strong> Habla de casos concretos y cómo los manejaste.</span></li>
                        <li class="flex items-start"><span class="text-[#EF8236] mr-3 text-2xl">✔</span><span><strong>Transmite Honestidad y Paciencia:</strong> Son valores fundamentales en el cuidado de personas.</span></li>
                        <li class="flex items-start"><span class="text-[#EF8236] mr-3 text-2xl">✔</span><span><strong>Muestra Vocación y Afecto:</strong> Explica por qué te dedicas a esta profesión.</span></li>
                        <li class="flex items-start"><span class="text-[#EF8236] mr-3 text-2xl">✔</span><span><strong>Destaca tu Autonomía:</strong> Resalta tu capacidad para trabajar sin supervisión constante.</span></li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <footer class="text-center mt-16">
        <p class="text-sm text-gray-400">Infografía generada a partir del Módulo 1: Habilitación Socio Laboral de Servicios de Cuidados.</p>
        <p class="text-xs text-gray-500 mt-2">Confirmación: No se utilizó Mermaid JS ni SVG en la creación de este documento. Todos los gráficos son renderizados en Canvas y los diagramas están construidos con HTML/CSS.</p>
    </footer>

</div>

<script>
    const tooltipTitleCallback = (tooltipItems) => {
        const item = tooltipItems[0];
        let label = item.chart.data.labels[item.dataIndex];
        if (Array.isArray(label)) {
            return label.join(' ');
        }
        return label;
    };

    const wrapLabel = (label, maxWidth = 16) => {
        if (label.length <= maxWidth) {
            return label;
        }
        const words = label.split(' ');
        const lines = [];
        let currentLine = '';
        for (const word of words) {
            if ((currentLine + word).length > maxWidth && currentLine.length > 0) {
                lines.push(currentLine.trim());
                currentLine = '';
            }
            currentLine += word + ' ';
        }
        lines.push(currentLine.trim());
        return lines;
    };

    const colors = {
        primary: '#00A6A6',
        secondary: '#75C9C8',
        accent: '#EF8236',
        accentLight: '#F4A767',
        dark: '#282F3E',
        lightGray: '#f3f4f6'
    };

    const commonChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    color: colors.dark,
                    font: {
                        size: 12
                    }
                }
            },
            tooltip: {
                callbacks: {
                    title: tooltipTitleCallback
                }
            }
        }
    };

    const coberturaCtx = document.getElementById('coberturaChart').getContext('2d');
    new Chart(coberturaCtx, {
        type: 'doughnut',
        data: {
            labels: ['Sin Acceso a Servicios', 'Con Barreras Económicas', 'Con Cobertura Universal'],
            datasets: [{
                label: 'Cobertura Global de Cuidados',
                data: [48, 46.3, 6.5],
                backgroundColor: [colors.accent, colors.accentLight, colors.secondary],
                borderColor: '#ffffff',
                borderWidth: 4
            }]
        },
        options: {
            ...commonChartOptions
        }
    });

    const cuidadoresCtx = document.getElementById('cuidadoresChart').getContext('2d');
    new Chart(cuidadoresCtx, {
        type: 'pie',
        data: {
            labels: ['Cuidadores Informales (Familiares)', 'Cuidadores Formales (Profesionales)'],
            datasets: [{
                label: 'Tipos de Cuidadores',
                data: [70, 30],
                backgroundColor: [colors.primary, colors.secondary],
                borderColor: '#ffffff',
                borderWidth: 4
            }]
        },
        options: {
            ...commonChartOptions,
            plugins: {
                ...commonChartOptions.plugins,
                legend: {
                    display: true,
                    position: 'bottom'
                }
            }
        }
    });

    const contratosLabels = ['Plazo Fijo', 'Indefinido', 'Por Obra o Faena', 'Part-Time'];
    const contratosChartCtx = document.getElementById('contratosChart').getContext('2d');
    new Chart(contratosChartCtx, {
        type: 'bar',
        data: {
            labels: contratosLabels.map(label => wrapLabel(label)),
            datasets: [{
                label: 'Características Principales',
                data: [10, 12, 8, 6],
                backgroundColor: [colors.primary, colors.secondary, colors.accent, colors.accentLight],
                borderColor: [colors.primary, colors.secondary, colors.accent, colors.accentLight],
                borderWidth: 1,
                borderRadius: 5
            }]
        },
        options: {
            ...commonChartOptions,
            indexAxis: 'y',
            scales: {
                x: {
                    beginAtZero: true,
                    ticks: {
                        color: colors.dark
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    ticks: {
                        color: colors.dark
                    },
                    grid: {
                        display: true
                    }
                }
            },
            plugins: {
                ...commonChartOptions.plugins,
                legend: {
                    display: false
                }
            }
        }
    });
</script>