<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:media="http://search.yahoo.com/mrss/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>interactivo archivos &#8226; Colegio Santa María del Carmen Murcia</title>
	<atom:link href="https://carmelitasmurcia.com/etiqueta/interactivo/feed/" rel="self" type="application/rss+xml" />
	<link>https://carmelitasmurcia.com/etiqueta/interactivo/</link>
	<description>Educamos para servir</description>
	<lastBuildDate>Thu, 30 Apr 2026 08:09:31 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://carmelitasmurcia.com/wp-content/uploads/2020/09/SMC-logo-cuadrado-75x75.jpg</url>
	<title>interactivo archivos &#8226; Colegio Santa María del Carmen Murcia</title>
	<link>https://carmelitasmurcia.com/etiqueta/interactivo/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Recicla con SMC Murcia</title>
		<link>https://carmelitasmurcia.com/recicla-con-smc-murcia/</link>
		
		<dc:creator><![CDATA[Pablo Gómez]]></dc:creator>
		<pubDate>Wed, 29 Apr 2026 15:28:55 +0000</pubDate>
				<category><![CDATA[Ed. Infantil]]></category>
		<category><![CDATA[Ed. Primaria]]></category>
		<category><![CDATA[Ed. Secundaria]]></category>
		<category><![CDATA[día del reciclaje]]></category>
		<category><![CDATA[interactivo]]></category>
		<category><![CDATA[juego]]></category>
		<category><![CDATA[medio ambiente]]></category>
		<category><![CDATA[recicla]]></category>
		<category><![CDATA[reciclador]]></category>
		<category><![CDATA[reciclaje]]></category>
		<guid isPermaLink="false">https://carmelitasmurcia.com/?p=11123</guid>

					<description><![CDATA[<p>&#x267b;&#xfe0f; “Recicla con SMC Murcia”: aprende jugando y cuida el planeta &#x1f30d; En el SMC Murcia, seguimos apostando por una educación innovadora, creativa y comprometida con el entorno &#x1f331;, en línea con nuestros valores de sostenibilidad y formación integral ....</p>
<p>La entrada <a href="https://carmelitasmurcia.com/recicla-con-smc-murcia/">Recicla con SMC Murcia</a> se publicó primero en <a href="https://carmelitasmurcia.com">Colegio Santa María del Carmen Murcia</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="11123" class="elementor elementor-11123">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-4019c45 elementor-section-stretched elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4019c45" data-element_type="section" data-e-type="section" data-settings="{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-471455d" data-id="471455d" data-element_type="column" data-e-type="column" data-settings="{&quot;pix_scale_in&quot;:&quot;none&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-4a02274 elementor-widget elementor-widget-text-editor" data-id="4a02274" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<h3 data-section-id="10jb37t" data-start="0" data-end="70"><strong>♻️ “Recicla con SMC Murcia”: aprende jugando y cuida el planeta 🌍</strong></h3><p data-start="72" data-end="316">En el <span class="hover:entity-accent entity-underline inline cursor-pointer align-baseline"><span class="whitespace-normal">SMC Murcia</span></span>, seguimos apostando por una educación innovadora, creativa y comprometida con el entorno 🌱, en línea con nuestros valores de sostenibilidad y formación integral . Con motivo del Día Mundial del Reciclaje, lanzamos <strong data-start="369" data-end="397">“Recicla con SMC Murcia”</strong>, un juego interactivo pensado para que nuestros alumnos y toda la comunidad aprendan a reciclar… ¡de una forma divertida! 🎮♻️</p><p data-start="72" data-end="316"> </p><h3 data-section-id="qi3wu5" data-start="946" data-end="978"><strong>🏆 ¡Consigue tu diploma SMC!</strong></h3><p data-start="980" data-end="1139">Si logras una puntuación alta… 🎉<br data-start="1013" data-end="1016" />📜 Aparecerá en pantalla tu <strong data-start="1044" data-end="1080">Diploma de Reciclador SMC Murcia</strong><br data-start="1080" data-end="1083" />⬇️ ¡Y podrás descargarlo en PDF para compartir tu logro!</p><h3 data-section-id="1ux65q4" data-start="1146" data-end="1173"> </h3><h3 data-section-id="1ux65q4" data-start="1146" data-end="1173"><strong>🌿 ¿Te atreves a jugar?</strong></h3><p data-start="1175" data-end="1289">Pon a prueba tus reflejos, aprende a reciclar correctamente y conviértete en un auténtico héroe del planeta 🌎💚</p><p data-start="1369" data-end="1522" data-is-last-node="" data-is-only-node="">💬 ¡Reta a tus compañeros y comparte tu puntuación!</p>								</div>
				</div>
				<div class="elementor-element elementor-element-d24fadb elementor-widget elementor-widget-html" data-id="d24fadb" data-element_type="widget" data-e-type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Recicla con SMC Murcia</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- html2pdf.js para el diploma -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

        /* Fuentes y utilidades */
        body, .font-sans { font-family: 'Fredoka', sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        
        /* Patrón de fondo seguro */
        .bg-pattern {
            background-image: url("data:image/svg+xml,%3Csvg opacity='0.05' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2322c55e' d='M50 0C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm0 90C27.9 90 10 72.1 10 50S27.9 10 50 10s40 17.9 40 40-17.9 40-40 40z'/%3E%3C/svg%3E");
        }

        /* Prevenir scroll al arrastrar en móviles */
        .touch-none { touch-action: none; }
        
        /* Animaciones para puntos */
        @keyframes floatUp {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-50px) scale(1.2); }
        }
        .score-anim {
            animation: floatUp 1s ease-out forwards;
            pointer-events: none;
            z-index: 2000;
        }

        /* Contenedores con efecto cristal/relieve */
        .bin {
            box-shadow: inset 0 -10px 20px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.1s;
        }
        .bin.drag-over {
            transform: scale(1.05);
            filter: brightness(1.2);
        }

        /* Basura arrastrable */
        .trash-item {
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            transition: transform 0.2s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .trash-item:active {
            cursor: grabbing;
        }

        /* --- ESTILOS BLINDADOS PARA LA CABECERA --- */
        #smc-header {
            display: grid !important;
            grid-template-columns: 1fr auto 1fr !important;
            align-items: center !important;
            background-color: white !important;
            border-bottom: 4px solid #22c55e !important;
            padding: 15px 20px !important;
            width: 100% !important;
            box-sizing: border-box !important;
            position: relative !important;
            z-index: 20 !important;
        }
        .header-left { justify-self: start !important; }
        .header-center { justify-self: center !important; text-align: center !important; }
        .header-right { justify-self: end !important; }

        .smc-logo {
            height: 55px !important;
            max-width: 150px !important;
            object-fit: contain !important;
            display: block !important;
            margin: 0 !important;
        }

        .smc-title {
            color: #15803d !important;
            text-shadow: 1px 1px 0px rgba(0,0,0,0.1) !important;
            margin: 0 !important;
            padding: 0 !important;
            font-family: 'Fredoka', sans-serif !important;
            font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
        }

        #btn-quit {
            background-color: #ef4444 !important;
            color: white !important;
            font-weight: bold !important;
            padding: 8px 14px !important;
            font-size: 14px !important;
            border: none !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            font-family: 'Fredoka', sans-serif !important;
        }
        #btn-quit.is-hidden {
            display: none !important;
        }

        /* Adaptación perfecta para móviles */
        @media (max-width: 640px) {
            #smc-header {
                grid-template-columns: 1fr !important;
                gap: 8px !important;
                padding: 15px 10px !important;
            }
            .header-left { justify-self: center !important; }
            .header-right {
                position: absolute !important;
                top: 10px !important;
                right: 10px !important;
            }
            .smc-logo {
                height: 45px !important;
            }
            .btn-text {
                display: none !important;
            }
            #btn-quit {
                padding: 6px 12px !important;
                font-size: 16px !important;
            }
        }
        @media (min-width: 641px) {
            .btn-text { display: inline !important; }
        }
    </style>
</head>
<body class="bg-green-50 p-0 sm:p-2 md:p-4 flex justify-center w-full m-0">

    <!-- Contenedor Principal del Juego -->
    <div id="game-app" class="!bg-white sm:rounded-3xl sm:shadow-2xl overflow-hidden relative border-y-2 sm:border-2 border-green-200" style="min-height: 650px; width: 100% !important; max-width: none !important; display: flex; flex-direction: column;">
        
        <!-- Cabecera Institucional (Sistema GRID Inmune a WordPress) -->
        <header id="smc-header" class="shadow-sm">
            <div class="header-left">
                <img decoding="async" src="https://carmelitasmurcia.com/wp-content/uploads/2021/05/SMC-logo-black-768x364.png" alt="SMC Logo" class="smc-logo" onerror="this.onerror=null; this.src='https://placehold.co/200x80/ffffff/15803d?text=SMC+Murcia';">
            </div>
            <div class="header-center">
                <h1 class="smc-title">RECICLA <span style="color: #22c55e !important;">CON SMC</span> ♻️</h1>
            </div>
            <div class="header-right">
                <button id="btn-quit" onclick="location.reload()" class="is-hidden">
                    <span class="btn-text">Abandonar</span> ✖
                </button>
            </div>
        </header>

        <!-- PANTALLA 1: Inicio -->
        <div id="screen-start" class="relative flex flex-col items-center justify-center p-6 !bg-white z-10 transition-opacity duration-300 bg-pattern flex-grow" style="width: 100% !important; min-height: 570px;">
            <div class="w-full text-center space-y-6" style="max-width: 600px !important;">
                
                <!-- Nuevas instrucciones formateadas -->
                <div class="text-sm sm:text-base !text-gray-700 mb-6 font-medium px-4 md:px-8 space-y-2 text-left bg-white bg-opacity-80 p-4 rounded-xl border border-green-100 shadow-sm mx-auto w-full max-w-lg">
                    <p>👤 Introduce tu nombre de jugador y comienza la aventura</p>
                    <p>🗑️ Arrastra cada residuo al contenedor correcto</p>
                    <p>⏱️ Tienes 1 minuto para conseguir la máxima puntuación</p>
                    <p>✅ Aciertos: <span style="color: #16a34a !important; font-weight: bold;">+5 puntos</span></p>
                    <p>❌ Errores: <span style="color: #dc2626 !important; font-weight: bold;">-10 puntos</span></p>
                    <p class="mt-4 pt-3 border-t border-green-200" style="color: #4b5563 !important; line-height: 1.4;">A lo largo del juego superarás 3 niveles de dificultad progresiva, donde tendrás que demostrar tu agilidad y conocimiento sobre reciclaje 💪🌍</p>
                </div>

                <div class="space-y-4 px-4 w-full max-w-lg mx-auto">
                    <input type="text" id="player-name" placeholder="Tu nombre..." class="w-full px-4 py-3 border-2 !border-green-300 rounded-xl text-xl focus:outline-none focus:!border-green-500 text-center" maxlength="25" style="box-sizing: border-box !important;">
                    <button onclick="Game.init()" class="w-full !bg-green-600 hover:!bg-green-700 !text-white font-bold py-3 px-6 rounded-xl text-xl transition-colors shadow-lg transform hover:scale-105" style="background-color: #16a34a !important; color: white !important; box-sizing: border-box !important;">
                        ¡Comenzar a Jugar!
                    </button>
                </div>
            </div>
        </div>

        <!-- PANTALLA 2: Juego (UI) -->
        <div id="screen-game" class="hidden flex-col flex-grow relative w-full" style="width: 100% !important;">
            
            <!-- Barra de estado -->
            <div class="flex justify-between items-center !bg-green-100 px-4 md:px-8 py-3 shadow-sm font-semibold !text-green-800 w-full" style="background-color: #dcfce7 !important; box-sizing: border-box !important;">
                <div class="flex items-center space-x-4">
                    <div id="ui-player" class="!text-green-900 text-lg hidden md:block font-bold">Jugador</div>
                    <div class="!bg-white px-3 py-1 rounded-lg shadow-sm border !border-green-300" style="background-color: white !important;">
                        Nivel <span id="ui-level" class="!text-green-600 font-bold" style="color: #16a34a !important;">1</span>
                    </div>
                </div>
                <div class="flex space-x-4 md:space-x-8 text-lg md:text-xl">
                    <div class="flex items-center">
                        <span class="mr-2">⏱️</span>
                        <span id="ui-time" class="!text-red-600 font-bold w-8 text-right" style="color: #dc2626 !important;">60</span>s
                    </div>
                    <div class="flex items-center">
                        <span class="mr-2">⭐</span>
                        <span id="ui-score" class="!text-green-700 font-bold w-12 text-right" style="color: #15803d !important;">0</span> pts
                    </div>
                </div>
            </div>
            
            <div class="text-center text-sm md:text-base !text-green-700 mt-2 font-medium" id="ui-target" style="color: #15803d !important;">Objetivo nivel 1: 50 pts</div>

            <!-- Zona de Contenedores -->
            <div id="bins-container" class="flex-grow flex justify-center items-end gap-2 sm:gap-4 md:gap-8 p-4 flex-wrap w-full" style="box-sizing: border-box !important;">
                <!-- Se inyectan por JS según el nivel -->
            </div>

            <!-- Caja de Basura (Zona inferior) -->
            <div class="h-40 md:h-56 bg-[#d2b48c] border-t-8 border-[#8b4513] relative overflow-hidden flex flex-col w-full" style="box-sizing: border-box !important;">
                <div class="absolute inset-0 opacity-20" style="background-image: repeating-linear-gradient(45deg, #000 0, #000 2px, transparent 2px, transparent 8px);"></div>
                <div class="text-center text-[#5c2e0b] font-bold mt-2 z-10 bg-[#d2b48c] bg-opacity-80 rounded mx-auto px-6 py-1">Cinta de Residuos</div>
                
                <!-- Aquí aparece la basura -->
                <div id="trash-box" class="relative flex-grow w-full p-2 flex flex-wrap justify-center items-center gap-4 z-10" style="box-sizing: border-box !important;">
                </div>
            </div>
        </div>

        <!-- PANTALLA 3: Intermedio / Fin -->
        <div id="screen-message" class="hidden relative flex-col items-center justify-center p-6 !bg-white !bg-opacity-95 z-40 backdrop-blur-sm flex-grow" style="width: 100% !important; min-height: 570px;">
            <div class="text-center space-y-6 w-full" style="max-width: 600px !important;">
                <h2 id="msg-title" class="text-3xl md:text-5xl font-bold !text-gray-800">¡Tiempo agotado!</h2>
                <p id="msg-desc" class="text-xl md:text-2xl !text-gray-600 px-4"></p>
                <button id="msg-btn" class="w-full sm:w-auto !bg-green-600 hover:!bg-green-700 !text-white font-bold py-4 px-10 rounded-xl text-xl shadow-lg transition transform hover:scale-105" style="background-color: #16a34a !important; color: white !important;">
                    Siguiente Nivel
                </button>
            </div>
        </div>

        <!-- PANTALLA 4: Diploma -->
        <div id="screen-diploma" class="hidden relative flex-col items-center justify-start p-4 !bg-green-50 z-50 overflow-y-auto flex-grow" style="width: 100% !important; padding-bottom: 2rem;">
            <div class="mb-4 text-center w-full px-2">
                <h2 class="text-2xl md:text-3xl font-bold !text-green-700 mb-4" style="color: #15803d !important;">¡Enhorabuena, has superado el reto!</h2>
                <div class="flex flex-col sm:flex-row justify-center items-center gap-3">
                    <button onclick="Game.downloadPDF()" class="!bg-green-600 hover:!bg-green-700 !text-white font-bold py-3 px-6 rounded-lg shadow inline-flex items-center justify-center space-x-2 w-full sm:w-auto" style="background-color: #16a34a !important; color: white !important;">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                        <span>Descargar Diploma</span>
                    </button>
                    <button onclick="location.reload()" class="!bg-gray-500 hover:!bg-gray-600 !text-white font-bold py-3 px-6 rounded-lg shadow w-full sm:w-auto" style="background-color: #6b7280 !important; color: white !important;">Volver a jugar</button>
                </div>
            </div>

            <!-- Contenedor adaptativo para que no se deforme en móviles -->
            <div id="diploma-container" class="w-full flex justify-center items-start overflow-hidden mt-4" style="min-height: 300px;">
                <div id="diploma-scale-wrapper" style="transform-origin: top center;">
                    <!-- Vista previa del diploma (Fijada a tamaño A4 - 1123x794 px) -->
                    <div id="diploma-template" class="relative flex flex-col items-center text-center shadow-2xl" style="width: 1123px; height: 794px; background-color: #f0fdf4; border: 20px solid #bbf7d0; padding: 60px; box-sizing: border-box;">
                        <!-- Marco interior -->
                        <div class="absolute inset-4 border-4 border-green-500 pointer-events-none"></div>
                        
                        <!-- Logo forzado a no deformarse en el diploma -->
                        <img decoding="async" src="https://carmelitasmurcia.com/wp-content/uploads/2021/05/SMC-logo-black-768x364.png" alt="SMC" style="height: 112px !important; width: auto !important; max-width: 300px !important; object-fit: contain !important; margin: 1rem auto 2rem auto !important; display: block;" onerror="this.onerror=null; this.src='https://placehold.co/300x100/f0fdf4/166534?text=SMC+Murcia';">
                        
                        <h1 class="font-serif text-6xl font-bold mb-10 border-b-4 border-gray-300 pb-4 inline-block px-12" style="color: #1f2937;">
                            DIPLOMA DE RECICLADOR
                        </h1>
                        
                        <p class="text-2xl mb-6" style="color: #4b5563;">Se otorga el presente reconocimiento a:</p>
                        
                        <h2 id="diploma-name" class="font-serif text-6xl font-bold mb-10 italic" style="color: #166534;">
                            Nombre del Jugador
                        </h2>
                        
                        <p class="text-2xl max-w-4xl px-12 leading-relaxed z-10" style="color: #374151;">
                            Por haber superado con éxito los tres niveles del reto interactivo, demostrando un excelente conocimiento en la correcta separación de residuos y un gran compromiso con la protección del medio ambiente en el <strong>Colegio SMC Murcia</strong>.
                        </p>

                        <p class="text-3xl mt-8 font-bold z-10" style="color: #15803d;">
                            Puntuación obtenida: <span id="diploma-score-text">0</span> puntos
                        </p>
                        
                        <div class="absolute bottom-16 left-0 right-0 flex justify-between px-24 items-end">
                            <div class="text-center">
                                <div class="border-b-2 border-gray-800 w-48 mb-2"></div>
                                <p class="text-lg font-bold" style="color: #4b5563;">Colegio SMC Murcia</p>
                            </div>
                            <div class="text-center">
                                <div class="border-b-2 border-gray-800 w-48 mb-2 text-lg pb-1 font-bold" style="color: #4b5563;">Fecha</div>
                                <p id="diploma-date" class="text-lg" style="color: #1f2937;"></p>
                            </div>
                        </div>
                        
                        <!-- Sello decorativo (Movido a la esquina superior derecha en pequeño) -->
                        <div class="absolute top-12 right-12 z-0">
                            <div class="w-24 h-24 rounded-full border-4 flex items-center justify-center text-5xl opacity-80 rotate-12" style="background-color: #dcfce7; border-color: #22c55e;">
                                🌍
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Lógica del Juego -->
    <script>
        // Datos Maestros (Rediseño de contenedores)
        const BINS = [
            { id: 'amarillo', name: 'Envases', color: '!bg-yellow-400', border: '!border-yellow-600', text: 'text-yellow-900' },
            { id: 'azul', name: 'Papel', color: '!bg-blue-500', border: '!border-blue-700', text: 'text-blue-100' },
            { id: 'verde', name: 'Vidrio', color: '!bg-green-600', border: '!border-green-800', text: 'text-green-100' },
            { id: 'marron', name: 'Orgánico', color: '!bg-[#8B4513]', border: '!border-[#5C2E0B]', text: 'text-orange-100' },
            { id: 'gris', name: 'Resto', color: '!bg-gray-500', border: '!border-gray-700', text: 'text-gray-100' }
        ];

        const TRASH_ITEMS = [
            // Nivel 1 (Básico - Muy claro)
            { type: 'amarillo', name: 'Lata de refresco', emoji: '🥫', level: 1 },
            { type: 'amarillo', name: 'Botella plástico', emoji: '🥤', level: 1 },
            { type: 'azul', name: 'Caja cartón', emoji: '📦', level: 1 },
            { type: 'verde', name: 'Botella vino', emoji: '🍾', level: 1 },
            { type: 'marron', name: 'Manzana', emoji: '🍎', level: 1 },
            { type: 'gris', name: 'Pañal', emoji: '🧷', level: 1 },
            
            // Nivel 2 (Intermedio)
            { type: 'amarillo', name: 'Brik de zumo', emoji: '🧃', level: 2 },
            { type: 'azul', name: 'Periódico', emoji: '📰', level: 2 },
            { type: 'azul', name: 'Sobre de papel', emoji: '✉️', level: 2 },
            { type: 'marron', name: 'Piel plátano', emoji: '🍌', level: 2 },
            { type: 'gris', name: 'Cepillo de dientes', emoji: '🪥', level: 2 }, // Trampa común (plástico -> gris)
            { type: 'gris', name: 'Mascarilla', emoji: '😷', level: 2 },

            // Nivel 3 (Difícil - Trampas de reciclaje)
            { type: 'amarillo', name: 'Bote champú', emoji: '🧴', level: 3 },
            { type: 'azul', name: 'Libro viejo', emoji: '📖', level: 3 },
            { type: 'gris', name: 'Jarrón de cerámica', emoji: '🏺', level: 3 }, // Trampa (cerámica -> gris)
            { type: 'gris', name: 'Copa de cristal', emoji: '🍷', level: 3 },    // Trampa (cristal -> gris)
            { type: 'marron', name: 'Cáscara de huevo', emoji: '🥚', level: 3 },
            { type: 'gris', name: 'Juguete roto', emoji: '🧸', level: 3 }        // Trampa (plástico no envase -> gris)
        ];

        const LEVELS = [
            { level: 1, time: 60, targetScore: 50 },
            { level: 2, time: 60, targetScore: 120 },
            { level: 3, time: 60, targetScore: 200 }
        ];

        // Estado del Juego
        const Game = {
            playerName: '',
            currentLevel: 0, // Índice (0, 1, 2)
            score: 0,
            timeLeft: 0,
            timerInterval: null,
            activeTrash: [],
            maxTrashOnScreen: 5,
            
            // Elementos DOM
            els: {
                start: document.getElementById('screen-start'),
                game: document.getElementById('screen-game'),
                msg: document.getElementById('screen-message'),
                diploma: document.getElementById('screen-diploma'),
                binsContainer: document.getElementById('bins-container'),
                trashBox: document.getElementById('trash-box'),
                uiName: document.getElementById('ui-player'),
                uiLevel: document.getElementById('ui-level'),
                uiScore: document.getElementById('ui-score'),
                uiTime: document.getElementById('ui-time'),
                uiTarget: document.getElementById('ui-target')
            },

            init: function() {
                const nameInput = document.getElementById('player-name').value.trim();
                if (!nameInput) {
                    alert('Por favor, introduce tu nombre para empezar.');
                    return;
                }
                this.playerName = nameInput;
                this.els.uiName.textContent = this.playerName;
                this.currentLevel = 0;
                this.score = 0;
                
                // Mostrar botón de abandonar quitando la clase que lo oculta
                document.getElementById('btn-quit').classList.remove('is-hidden');

                this.els.start.classList.add('hidden');
                this.els.start.classList.remove('flex');
                this.els.game.classList.remove('hidden');
                this.els.game.classList.add('flex');
                
                this.startLevel();
            },

            startLevel: function() {
                const levelData = LEVELS[this.currentLevel];
                this.timeLeft = levelData.time;
                this.els.uiLevel.textContent = levelData.level;
                this.els.uiScore.textContent = this.score;
                this.els.uiTarget.textContent = `Objetivo nivel ${levelData.level}: ${levelData.targetScore} pts (Puntos acumulados)`;
                this.updateTimeUI();
                
                // Configurar Contenedores (Ahora siempre se muestran los 5, adaptados para ser responsive)
                this.els.binsContainer.innerHTML = '';
                
                // Tamaños en porcentajes para que los 5 quepan bien en móviles (ahora un poco más grandes al estar al 100% width)
                const widthClass = 'w-[18%] max-w-[130px]';
                const heightClass = 'h-28 sm:h-36 md:h-44 lg:h-52';

                BINS.forEach(bin => {
                    const binEl = document.createElement('div');
                    
                    // Forzamos el estilo en línea por si WordPress sobrescribe el color de fondo
                    const inlineBg = bin.color.replace('!bg-', '').replace('[', '').replace(']', '');
                    let explicitStyle = '';
                    if (inlineBg.startsWith('#')) { explicitStyle = `background-color: ${inlineBg} !important;`; }
                    else if (inlineBg === 'yellow-400') { explicitStyle = 'background-color: #facc15 !important;'; }
                    else if (inlineBg === 'blue-500') { explicitStyle = 'background-color: #3b82f6 !important;'; }
                    else if (inlineBg === 'green-600') { explicitStyle = 'background-color: #16a34a !important;'; }
                    else if (inlineBg === 'gray-500') { explicitStyle = 'background-color: #6b7280 !important;'; }

                    binEl.className = `bin ${widthClass} ${heightClass} ${bin.color} border-x-2 md:border-x-4 border-b-2 md:border-b-4 border-t-8 ${bin.border} rounded-t-[1.5rem] md:rounded-t-[2.5rem] rounded-b-md flex flex-col items-center justify-start pt-3 md:pt-5 relative shadow-lg`;
                    binEl.dataset.binType = bin.id;
                    binEl.style = explicitStyle;
                    
                    binEl.innerHTML = `
                        <div class="w-1/2 h-3 md:h-5 !bg-black !bg-opacity-40 rounded-full mb-1 md:mb-2 shadow-inner"></div>
                        <div class="absolute bottom-2 md:bottom-3 !text-white font-extrabold text-[0.6rem] sm:text-sm md:text-base !bg-black !bg-opacity-80 px-1 py-0.5 rounded w-11/12 text-center truncate shadow-md border border-white border-opacity-30 uppercase tracking-wider">${bin.name}</div>
                    `;
                    this.els.binsContainer.appendChild(binEl);
                });

                // Limpiar basura anterior
                this.els.trashBox.innerHTML = '';
                this.activeTrash = [];
                for(let i=0; i<this.maxTrashOnScreen; i++) {
                    this.spawnTrash();
                }

                // Iniciar Temporizador
                clearInterval(this.timerInterval);
                this.timerInterval = setInterval(() => {
                    this.timeLeft--;
                    this.updateTimeUI();
                    if(this.timeLeft <= 0) {
                        this.endLevel();
                    }
                }, 1000);
            },

            updateTimeUI: function() {
                this.els.uiTime.textContent = this.timeLeft;
                if(this.timeLeft <= 10) {
                    this.els.uiTime.classList.add('animate-pulse');
                } else {
                    this.els.uiTime.classList.remove('animate-pulse');
                }
            },

            spawnTrash: function() {
                const levelData = LEVELS[this.currentLevel];
                // Filtrar basura disponible según la dificultad del nivel actual
                const availableTrash = TRASH_ITEMS.filter(t => t.level <= levelData.level);
                
                // Extra precaución por si no se encuentra basura
                if (availableTrash.length === 0) return;
                
                const randomTrash = availableTrash[Math.floor(Math.random() * availableTrash.length)];
                
                const trashEl = document.createElement('div');
                // Estilos responsivos para la basura
                trashEl.className = 'trash-item touch-none bg-white p-2 md:p-3 rounded-xl border-2 border-gray-300 flex flex-col items-center justify-center w-14 h-14 sm:w-16 sm:h-16 md:w-24 md:h-24 shadow-md';
                trashEl.dataset.type = randomTrash.type;
                trashEl.innerHTML = `
                    <div class="text-3xl sm:text-4xl md:text-5xl pointer-events-none" title="${randomTrash.name}">${randomTrash.emoji}</div>
                `;
                
                this.els.trashBox.appendChild(trashEl);
                this.makeDraggable(trashEl);
            },

            makeDraggable: function(el) {
                let startX, startY, initialLeft, initialTop;
                let rectGame = document.getElementById('game-app').getBoundingClientRect();

                const dragStart = (e) => {
                    if (e.type === 'touchstart') e.preventDefault(); // Evita scroll
                    const pointer = e.type === 'touchstart' ? e.touches[0] : e;
                    
                    const rectEl = el.getBoundingClientRect();
                    
                    // Convertir a posición fija para arrastrar libremente fuera de la caja
                    el.style.position = 'fixed';
                    el.style.left = rectEl.left + 'px';
                    el.style.top = rectEl.top + 'px';
                    el.style.zIndex = 1000;
                    el.style.margin = '0';
                    
                    startX = pointer.clientX;
                    startY = pointer.clientY;
                    initialLeft = rectEl.left;
                    initialTop = rectEl.top;

                    document.addEventListener('mousemove', dragMove);
                    document.addEventListener('touchmove', dragMove, {passive: false});
                    document.addEventListener('mouseup', dragEnd);
                    document.addEventListener('touchend', dragEnd);
                };

                const dragMove = (e) => {
                    e.preventDefault();
                    const pointer = e.type === 'touchmove' ? e.touches[0] : e;
                    const dx = pointer.clientX - startX;
                    const dy = pointer.clientY - startY;
                    
                    el.style.left = (initialLeft + dx) + 'px';
                    el.style.top = (initialTop + dy) + 'px';

                    // Efecto hover visual en contenedores
                    el.style.visibility = 'hidden';
                    const elemBelow = document.elementFromPoint(pointer.clientX, pointer.clientY);
                    el.style.visibility = 'visible';
                    
                    document.querySelectorAll('.bin').forEach(b => b.classList.remove('drag-over'));
                    if (elemBelow) {
                        const bin = elemBelow.closest('.bin');
                        if (bin) bin.classList.add('drag-over');
                    }
                };

                const dragEnd = (e) => {
                    document.removeEventListener('mousemove', dragMove);
                    document.removeEventListener('touchmove', dragMove);
                    document.removeEventListener('mouseup', dragEnd);
                    document.removeEventListener('touchend', dragEnd);

                    document.querySelectorAll('.bin').forEach(b => b.classList.remove('drag-over'));

                    const pointer = e.type === 'touchend' ? e.changedTouches[0] : e;
                    
                    el.style.visibility = 'hidden';
                    const elemBelow = document.elementFromPoint(pointer.clientX, pointer.clientY);
                    el.style.visibility = 'visible';

                    const bin = elemBelow ? elemBelow.closest('.bin') : null;

                    if (bin) {
                        const binType = bin.dataset.binType;
                        const trashType = el.dataset.type;
                        this.handleDrop(el, trashType, binType, pointer.clientX, pointer.clientY);
                    } else {
                        // Devolver a la caja
                        el.style.position = 'relative';
                        el.style.left = '0';
                        el.style.top = '0';
                        el.style.zIndex = '1';
                    }
                };

                el.addEventListener('mousedown', dragStart);
                el.addEventListener('touchstart', dragStart, {passive: false});
            },

            handleDrop: function(element, itemType, binType, x, y) {
                element.remove();
                
                let isCorrect = (itemType === binType);
                let points = isCorrect ? 5 : -10;
                
                this.score += points;
                // Prevenir puntos negativos extremos, aunque se permiten
                this.els.uiScore.textContent = this.score;

                // Animación de puntos flotantes
                this.showFloatingScore(points, x, y);

                // Reponer basura
                this.spawnTrash();
            },

            showFloatingScore: function(points, x, y) {
                const animEl = document.createElement('div');
                animEl.textContent = points > 0 ? `+${points}` : `${points}`;
                animEl.className = `fixed font-bold text-3xl md:text-5xl score-anim ${points > 0 ? 'text-green-500' : 'text-red-500'}`;
                animEl.style.left = `${x}px`;
                animEl.style.top = `${y}px`;
                document.body.appendChild(animEl);
                
                setTimeout(() => animEl.remove(), 1000);
            },

            endLevel: function() {
                clearInterval(this.timerInterval);
                const levelData = LEVELS[this.currentLevel];
                
                // Ocultar pantalla de juego para evitar problemas de scroll
                this.els.game.classList.remove('flex');
                this.els.game.classList.add('hidden');

                // Mostrar pantalla de mensaje
                this.els.msg.classList.remove('hidden');
                this.els.msg.classList.add('flex');
                
                const title = document.getElementById('msg-title');
                const btn = document.getElementById('msg-btn');
                const desc = document.getElementById('msg-desc');

                // Rehabilitamos el botón por si estuviera deshabilitado de un clic anterior
                btn.disabled = false;

                if (this.score >= levelData.targetScore) {
                    // Pasó el nivel
                    if (this.currentLevel === LEVELS.length - 1) {
                        // Completó el juego
                        title.textContent = "¡Reto Superado!";
                        title.className = "text-4xl md:text-6xl font-bold text-green-600";
                        desc.innerHTML = `Puntuación final: <strong>${this.score} pts</strong>. ¡Eres un experto reciclador!`;
                        btn.textContent = "Obtener Diploma";
                        btn.onclick = () => {
                            btn.disabled = true;
                            this.showDiploma();
                        };
                    } else {
                        // Siguiente nivel
                        title.textContent = "¡Nivel Completado!";
                        title.className = "text-4xl md:text-6xl font-bold text-blue-600";
                        desc.innerHTML = `Has conseguido <strong>${this.score} pts</strong>.<br>¡Prepárate para reciclar nuevos residuos y esquivar trampas!`;
                        btn.textContent = "Siguiente Nivel";
                        btn.onclick = () => {
                            btn.disabled = true; // Previene doble clic que suba de nivel erróneamente
                            this.currentLevel++;
                            this.els.msg.classList.add('hidden');
                            this.els.msg.classList.remove('flex');
                            
                            // Volver a mostrar pantalla de juego
                            this.els.game.classList.remove('hidden');
                            this.els.game.classList.add('flex');

                            this.startLevel();
                        };
                    }
                } else {
                    // Falló
                    title.textContent = "¡Game Over!";
                    title.className = "text-4xl md:text-6xl font-bold text-red-600";
                    desc.innerHTML = `Puntuación: <strong>${this.score} pts</strong>.<br>Necesitabas ${levelData.targetScore} pts para avanzar.`;
                    btn.textContent = "Volver a Intentarlo";
                    btn.onclick = () => {
                        btn.disabled = true;
                        location.reload();
                    };
                }
            },

            showDiploma: function() {
                this.els.msg.classList.add('hidden');
                this.els.msg.classList.remove('flex');
                this.els.game.classList.remove('flex');
                this.els.game.classList.add('hidden');
                this.els.diploma.classList.remove('hidden');
                this.els.diploma.classList.add('flex');
                
                document.getElementById('diploma-name').textContent = this.playerName.toUpperCase();
                document.getElementById('diploma-score-text').textContent = this.score;
                
                const today = new Date();
                const dateStr = `${today.getDate()}/${today.getMonth()+1}/${today.getFullYear()}`;
                document.getElementById('diploma-date').textContent = dateStr;

                // Ajustar el tamaño visual del diploma para móviles sin romper el código del PDF
                setTimeout(() => {
                    const container = document.getElementById('diploma-container');
                    const wrapper = document.getElementById('diploma-scale-wrapper');
                    const containerWidth = container.clientWidth - 16; // 16px margen de seguridad
                    
                    if (containerWidth < 1123) {
                        const scale = containerWidth / 1123;
                        wrapper.style.transform = `scale(${scale})`;
                        container.style.height = `${794 * scale}px`;
                    } else {
                        wrapper.style.transform = `scale(1)`;
                        container.style.height = `794px`;
                    }
                }, 50);
            },

            downloadPDF: function() {
                const element = document.getElementById('diploma-template');
                const opt = {
                    margin:       0,
                    filename:     `Diploma_Reciclaje_${this.playerName.replace(/\s+/g, '_')}.pdf`,
                    image:        { type: 'jpeg', quality: 1.0 },
                    // scrollY y scrollX en 0 evitan que se corte el documento si el usuario ha hecho scroll
                    html2canvas:  { scale: 2, useCORS: true, scrollY: 0, scrollX: 0 },
                    // Unit px y un array de resolución aseguran que tome el ancho y alto estricto del div
                    jsPDF:        { unit: 'px', format: [1123, 794], orientation: 'landscape' }
                };

                // html2pdf está cargado desde el CDN
                html2pdf().set(opt).from(element).save();
            }
        };

    </script>
</body>
</html>				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>La entrada <a href="https://carmelitasmurcia.com/recicla-con-smc-murcia/">Recicla con SMC Murcia</a> se publicó primero en <a href="https://carmelitasmurcia.com">Colegio Santa María del Carmen Murcia</a>.</p>
]]></content:encoded>
					
		
		
		<media:content url="https://carmelitasmurcia.com/wp-content/uploads/2026/04/RECICLA-CON-SMC.jpg" medium="image"></media:content>
            	</item>
	</channel>
</rss>
