{"id":316,"date":"2026-06-12T11:43:44","date_gmt":"2026-06-12T15:43:44","guid":{"rendered":"https:\/\/www.jose.tumarcaagencia.com\/?page_id=316"},"modified":"2026-06-12T11:44:43","modified_gmt":"2026-06-12T15:44:43","slug":"sala-de-espara-ii","status":"publish","type":"page","link":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/sala-de-espara-ii\/","title":{"rendered":"Sala de Espara II"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"316\" class=\"elementor elementor-316\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-462d948 e-flex e-con-boxed e-con e-parent\" data-id=\"462d948\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c9a9bd elementor-widget elementor-widget-shortcode\" data-id=\"3c9a9bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <!-- ESTILOS CSS -->\n    <style>\n        .sistema-turnos-container {\n            display: flex;\n            gap: 20px;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            color: #333;\n            margin: 20px 0;\n        }\n        .pantalla-principal {\n            flex: 2;\n            background: #1e293b;\n            color: #ffffff;\n            border-radius: 12px;\n            padding: 30px;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.15);\n            min-height: 480px;\n            text-align: center;\n        }\n        .panel-derecho {\n            flex: 1;\n            background: #f8fafc;\n            border: 2px solid #e2e8f0;\n            border-radius: 12px;\n            padding: 20px;\n            max-height: 520px;\n            overflow-y: auto;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n        }\n        .pantalla-principal h2 { font-size: 2rem; color: #38bdf8; margin-bottom: 10px; }\n        .llamado-actual { font-size: 3.5rem; font-weight: bold; margin: 20px 0; color: #ffffff; min-height: 80px; }\n        .consultorio-actual { font-size: 2rem; color: #4ade80; margin-bottom: 30px; min-height: 40px; }\n        \n        .controles { display: flex; gap: 15px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }\n        .btn-turno {\n            padding: 12px 25px;\n            font-size: 1.1rem;\n            font-weight: bold;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }\n        .btn-turno:disabled {\n            background-color: #64748b !important;\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n        .btn-inicio { background-color: #2563eb; color: white; }\n        .btn-inicio:hover { background-color: #1d4ed8; }\n        .btn-siguiente { background-color: #10b981; color: white; }\n        .btn-siguiente:hover { background-color: #059669; }\n        .btn-rellamar { background-color: #f59e0b; color: white; }\n        .btn-rellamar:hover { background-color: #d97706; }\n        .btn-ingreso { background-color: #8b5cf6; color: white; }\n        .btn-ingreso:hover { background-color: #7c3aed; }\n        .hidden { display: none !important; }\n\n        .progreso-container { width: 80%; background-color: #475569; border-radius: 10px; height: 12px; overflow: hidden; margin: 15px 0; }\n        .barra-progreso { width: 100%; height: 100%; background-color: #ef4444; transition: width 0.1s linear; }\n        .contador-texto { font-size: 1.2rem; margin-top: 5px; color: #cbd5e1; }\n\n        .panel-derecho h3 { margin-top: 0; color: #1e293b; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }\n        .lista-pacientes { list-style: none; padding: 0; margin: 0; }\n        .paciente-item {\n            display: flex;\n            flex-direction: column;\n            gap: 5px;\n            padding: 10px 12px;\n            margin-bottom: 8px;\n            background: #ffffff;\n            border: 1px solid #e2e8f0;\n            border-radius: 6px;\n            font-size: 0.95rem;\n        }\n        .paciente-info-row { display: flex; justify-content: space-between; align-items: center; }\n        .paciente-item.atendiendo { background-color: #dcfce7; border-color: #86efac; font-weight: bold; }\n        .paciente-item.ausente { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; }\n        .paciente-badge { background: #64748b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }\n        \n        .btn-reactivar {\n            background-color: #0284c7;\n            color: white;\n            border: none;\n            padding: 4px 10px;\n            border-radius: 4px;\n            font-size: 0.8rem;\n            cursor: pointer;\n            align-self: flex-end;\n            margin-top: 3px;\n        }\n        .btn-reactivar:hover { background-color: #0369a1; }\n    <\/style>\n\n    <!-- ESTRUCTURA HTML -->\n    <div class=\"sistema-turnos-container\">\n        <div class=\"pantalla-principal\">\n            <h2 id=\"titulo-pantalla\">Sistema de Turnos<\/h2>\n            <div id=\"llamado-nombre\" class=\"llamado-actual\">Esperando Operador...<\/div>\n            <div id=\"llamado-consultorio\" class=\"consultorio-actual\"><\/div>\n            \n            <div id=\"area-progreso\" class=\"hidden\">\n                <div class=\"progreso-container\">\n                    <div id=\"barra\" class=\"barra-progreso\"><\/div>\n                <\/div>\n                <div id=\"contador-llamados\" class=\"contador-texto\">Llamado 1 de 3<\/div>\n            <\/div>\n\n            <div class=\"controles\">\n                <button id=\"btn-inicio\" class=\"btn-turno btn-inicio\">Iniciar Sistema<\/button>\n                <button id=\"btn-rellamar\" class=\"btn-turno btn-rellamar hidden\">Rellamar<\/button>\n                <button id=\"btn-ingreso\" class=\"btn-turno btn-ingreso hidden\">Paciente Ingres\u00f3<\/button>\n                <button id=\"btn-siguiente\" class=\"btn-turno btn-siguiente hidden\">Siguiente Paciente<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"panel-derecho\">\n            <h3>Lista de Espera<\/h3>\n            <ul id=\"lista-espera\" class=\"lista-pacientes\"><\/ul>\n        <\/div>\n    <\/div>\n\n    <!-- L\u00d3GICA JAVASCRIPT ACTUALIZADA -->\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        let pacientes = [{\"id\":1,\"nombre\":\"Carlos Mendoza\",\"consultorio\":\"Consultorio 1\",\"estado\":\"En Espera\"},{\"id\":2,\"nombre\":\"Mar\\u00eda Rodr\\u00edguez\",\"consultorio\":\"Consultorio 2\",\"estado\":\"En Espera\"},{\"id\":3,\"nombre\":\"Juan Carlos Gaviria\",\"consultorio\":\"Consultorio 3\",\"estado\":\"En Espera\"},{\"id\":4,\"nombre\":\"Ana Sof\\u00eda L\\u00f3pez\",\"consultorio\":\"Consultorio 4\",\"estado\":\"En Espera\"},{\"id\":5,\"nombre\":\"Luis Fernando Gomez\",\"consultorio\":\"Consultorio 5\",\"estado\":\"En Espera\"},{\"id\":6,\"nombre\":\"Diana Marcela P\\u00e9rez\",\"consultorio\":\"Consultorio 1\",\"estado\":\"En Espera\"},{\"id\":7,\"nombre\":\"Santiago Torres\",\"consultorio\":\"Consultorio 2\",\"estado\":\"En Espera\"},{\"id\":8,\"nombre\":\"Valentina Castro\",\"consultorio\":\"Consultorio 3\",\"estado\":\"En Espera\"},{\"id\":9,\"nombre\":\"Andr\\u00e9s Felipe Silva\",\"consultorio\":\"Consultorio 4\",\"estado\":\"En Espera\"},{\"id\":10,\"nombre\":\"Camila Andrea Ru\\u00edz\",\"consultorio\":\"Consultorio 5\",\"estado\":\"En Espera\"},{\"id\":11,\"nombre\":\"Diego Alejandro Morales\",\"consultorio\":\"Consultorio 1\",\"estado\":\"En Espera\"},{\"id\":12,\"nombre\":\"Laura Camila Ortiz\",\"consultorio\":\"Consultorio 2\",\"estado\":\"En Espera\"},{\"id\":13,\"nombre\":\"Mateo Guti\\u00e9rrez\",\"consultorio\":\"Consultorio 3\",\"estado\":\"En Espera\"},{\"id\":14,\"nombre\":\"Isabella Villamizar\",\"consultorio\":\"Consultorio 4\",\"estado\":\"En Espera\"},{\"id\":15,\"nombre\":\"Samuel David Barbosa\",\"consultorio\":\"Consultorio 5\",\"estado\":\"En Espera\"},{\"id\":16,\"nombre\":\"Daniela Su\\u00e1rez\",\"consultorio\":\"Consultorio 1\",\"estado\":\"En Espera\"},{\"id\":17,\"nombre\":\"Nicol\\u00e1s Restrepo\",\"consultorio\":\"Consultorio 2\",\"estado\":\"En Espera\"},{\"id\":18,\"nombre\":\"Mariana Jaramillo\",\"consultorio\":\"Consultorio 3\",\"estado\":\"En Espera\"},{\"id\":19,\"nombre\":\"Sebasti\\u00e1n Beltr\\u00e1n\",\"consultorio\":\"Consultorio 4\",\"estado\":\"En Espera\"},{\"id\":20,\"nombre\":\"Paula Valentina Mar\\u00edn\",\"consultorio\":\"Consultorio 5\",\"estado\":\"En Espera\"}];\n        let indiceActual = -1;\n        let conteoLlamados = 0;\n        let intervaloProgreso;\n        const TIEMPO_ESPERA = 12000; \n\n        const btnInicio = document.getElementById('btn-inicio');\n        const btnRellamar = document.getElementById('btn-rellamar');\n        const btnIngreso = document.getElementById('btn-ingreso');\n        const btnSiguiente = document.getElementById('btn-siguiente');\n        const llamadoNombre = document.getElementById('llamado-nombre');\n        const llamadoConsultorio = document.getElementById('llamado-consultorio');\n        const areaProgreso = document.getElementById('area-progreso');\n        const barraProgreso = document.getElementById('barra');\n        const contadorTexto = document.getElementById('contador-llamados');\n        const listaEsperaUI = document.getElementById('lista-espera');\n\n        \/\/ Renderiza la lista excluyendo a los que ya ingresaron (\"Atendido con \u00c9xito\")\n        function renderizarLista() {\n            listaEsperaUI.innerHTML = '';\n            pacientes.forEach((p, index) => {\n                if (p.estado === 'Atendido con \u00c9xito') return; \/\/ SE ELIMINA DE LA VISTA DERECHA\n\n                let item = document.createElement('li');\n                item.className = 'paciente-item';\n                if(p.estado === 'Atendiendo') item.classList.add('atendiendo');\n                if(p.estado === 'Ausente (En Mostrador)') item.classList.add('ausente');\n\n                let estadoTxt = p.estado !== 'En Espera' ? ` - <small>(${p.estado})<\/small>` : '';\n\n                let htmlContenido = `\n                    <div class=\"paciente-info-row\">\n                        <span><strong>#${p.id}<\/strong> ${p.nombre}${estadoTxt}<\/span>\n                        <span class=\"paciente-badge\">${p.consultorio}<\/span>\n                    <\/div>\n                `;\n\n                \/\/ Si est\u00e1 ausente, agregamos el bot\u00f3n para reactivarlo manualmente\n                if (p.estado === 'Ausente (En Mostrador)') {\n                    htmlContenido += `<button class=\"btn-reactivar\" onclick=\"reactivarPaciente(${index})\">Reactivar en Espera<\/button>`;\n                }\n\n                item.innerHTML = htmlContenido;\n                listaEsperaUI.appendChild(item);\n            });\n        }\n\n        \/\/ Funci\u00f3n global para reactivar al paciente desde el mostrador\n        window.reactivarPaciente = function(index) {\n            pacientes[index].estado = 'En Espera';\n            alert(`Paciente ${pacientes[index].nombre} reactivado. Se llamar\u00e1 cuando su consultorio est\u00e9 disponible.`);\n            renderizarLista();\n        };\n\n        btnInicio.addEventListener('click', function() {\n            btnInicio.classList.add('hidden');\n            btnRellamar.classList.remove('hidden');\n            btnIngreso.classList.remove('hidden');\n            btnSiguiente.classList.remove('hidden');\n            avanzarPaciente();\n        });\n\n        \/\/ BOT\u00d3N: EL PACIENTE INGRES\u00d3 AL CONSULTORIO\n        btnIngreso.addEventListener('click', function() {\n            if (indiceActual >= 0 && indiceActual < pacientes.length) {\n                clearInterval(intervaloProgreso);\n                areaProgreso.classList.add('hidden');\n                \n                pacientes[indiceActual].estado = 'Atendido con \u00c9xito';\n                llamadoNombre.textContent = \"\u2713 Paciente Ingres\u00f3\";\n                llamadoConsultorio.textContent = \"Esperando al siguiente turno...\";\n                \n                btnRellamar.disabled = true; \/\/ SE DESACTIVA EL BOT\u00d3N DE RELLAMADO\n                btnIngreso.disabled = true;\n                renderizarLista();\n            }\n        });\n\n        btnSiguiente.addEventListener('click', function() {\n            clearInterval(intervaloProgreso);\n            \n            \/\/ Si el paciente actual nunca ingres\u00f3 ni se fue a ausente, se asume ausente al pasar al siguiente\n            if (indiceActual >= 0 && pacientes[indiceActual].estado === 'Atendiendo') {\n                manejarAusente();\n            }\n            avanzarPaciente();\n        });\n\n        btnRellamar.addEventListener('click', function() {\n            if(indiceActual < 0 || indiceActual >= pacientes.length) return;\n            \n            if(conteoLlamados < 3) {\n                conteoLlamados++;\n                ejecutarLlamado();\n            } else {\n                alert(\"El paciente no respondi\u00f3 a los 3 llamados. Pasa al final de la lista como Ausente.\");\n                clearInterval(intervaloProgreso);\n                manejarAusente();\n                avanzarPaciente();\n            }\n        });\n\n        function manejarAusente() {\n            pacientes[indiceActual].estado = 'Ausente (En Mostrador)';\n            \/\/ Lo removemos de la posici\u00f3n actual y lo enviamos al final de la cola\n            let pacienteAusente = pacientes.splice(indiceActual, 1)[0];\n            pacientes.push(pacienteAusente);\n            \n            indiceActual--; \/\/ Corregimos el \u00edndice debido a la eliminaci\u00f3n\n            renderizarLista();\n        }\n\n        function avanzarPaciente() {\n            \/\/ Buscamos el pr\u00f3ximo paciente que est\u00e9 estrictamente \"En Espera\"\n            let siguienteIndice = -1;\n            for (let i = indiceActual + 1; i < pacientes.length; i++) {\n                if (pacientes[i].estado === 'En Espera') {\n                    siguienteIndice = i;\n                    break;\n                }\n            }\n\n            if (siguienteIndice !== -1) {\n                indiceActual = siguienteIndice;\n                conteoLlamados = 1;\n                pacientes[indiceActual].estado = 'Atendiendo';\n                \n                btnRellamar.disabled = false; \/\/ SE VUELVE A ACTIVAR EL RELLAMADO\n                btnIngreso.disabled = false;\n                \n                renderizarLista();\n                ejecutarLlamado();\n            } else {\n                \/\/ Revisar si quedan ausentes en la lista por si acaso\n                let quedanAusentes = pacientes.some(p => p.estado === 'Ausente (En Mostrador)');\n                \n                llamadoNombre.textContent = \"Fin de la lista activa\";\n                llamadoConsultorio.textContent = quedanAusentes ? \"Solo quedan pacientes ausentes en espera de mostrador.\" : \"No hay m\u00e1s pacientes.\";\n                areaProgreso.classList.add('hidden');\n                btnRellamar.disabled = true;\n                btnIngreso.disabled = true;\n            }\n        }\n\n        function ejecutarLlamado() {\n            clearInterval(intervaloProgreso);\n            let paciente = pacientes[indiceActual];\n            \n            llamadoNombre.textContent = `${paciente.id}. ${paciente.nombre}`;\n            llamadoConsultorio.textContent = `Dir\u00edjase a: ${paciente.consultorio}`;\n            \n            if ('speechSynthesis' in window) {\n                window.speechSynthesis.cancel(); \n                let mensajeTexto = `Paciente n\u00famero ${paciente.id}, ${paciente.nombre}. Por favor dir\u00edjase al ${paciente.consultorio}`;\n                let emitirVoz = new SpeechSynthesisUtterance(mensajeTexto);\n                emitirVoz.lang = 'es-ES';\n                emitirVoz.rate = 0.9;\n                window.speechSynthesis.speak(emitirVoz);\n            }\n\n            areaProgreso.classList.remove('hidden');\n            contadorTexto.textContent = `Llamado ${conteoLlamados} de 3`;\n            \n            let tiempoRestante = TIEMPO_ESPERA;\n            barraProgreso.style.width = '100%';\n\n            intervaloProgreso = setInterval(() => {\n                tiempoRestante -= 100;\n                let porcentaje = (tiempoRestante \/ TIEMPO_ESPERA) * 100;\n                barraProgreso.style.width = `${porcentaje}%`;\n\n                if(tiempoRestante <= 0) {\n                    clearInterval(intervaloProgreso);\n                }\n            }, 100);\n        }\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-316","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":4,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/www.jose.tumarcaagencia.com\/index.php\/wp-json\/wp\/v2\/media?parent=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}