{"id":1538,"date":"2022-10-12T07:42:52","date_gmt":"2022-10-12T07:42:52","guid":{"rendered":"https:\/\/www.cemep.com.ar\/clinica\/personal-no-medico\/"},"modified":"2024-10-31T13:31:28","modified_gmt":"2024-10-31T13:31:28","slug":"personal-no-medico","status":"publish","type":"page","link":"https:\/\/www.cemep.com.ar\/clinica\/personal-no-medico\/","title":{"rendered":"Personal No M\u00e9dico"},"content":{"rendered":"<div data-colibri-id=\"1538-c1\" class=\"style-1605 style-local-1538-c1 position-relative\">\n  <!---->\n  <div data-colibri-component=\"section\" data-colibri-id=\"1538-c2\" id=\"reusable-sections\" class=\"h-section h-section-global-spacing d-flex align-items-lg-center align-items-md-center align-items-center style-2191 style-local-1538-c2 position-relative\">\n    <div class=\"background-wrapper\">\n      <div class=\"background-layer background-layer-media-container-lg\">\n        <!---->\n      <\/div>\n      <div class=\"background-layer background-layer-media-container-md\">\n        <!---->\n        <div class=\"overlay-layer\">\n          <div class=\"overlay-image-layer\" style=\"background-color: rgb(39, 71, 125); opacity: 0.5;\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"background-layer background-layer-media-container\">\n        <!---->\n        <div class=\"overlay-layer\">\n          <div class=\"overlay-image-layer\" style=\"background-color: rgb(39, 71, 125); opacity: 0.5;\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <!---->\n    <div class=\"h-section-grid-container h-section-boxed-container\">\n      <!---->\n      <div data-colibri-id=\"1538-c3\" class=\"h-row-container gutters-row-lg-2 gutters-row-md-2 gutters-row-0 gutters-row-v-lg-2 gutters-row-v-md-2 gutters-row-v-2 style-2192 style-local-1538-c3 position-relative\">\n        <!---->\n        <div class=\"h-row justify-content-lg-center justify-content-md-center justify-content-center align-items-lg-stretch align-items-md-stretch align-items-stretch gutters-col-lg-2 gutters-col-md-2 gutters-col-0 gutters-col-v-lg-2 gutters-col-v-md-2 gutters-col-v-2\">\n          <!---->\n          <div class=\"h-column h-column-container d-flex h-col-lg-auto h-col-md-auto h-col-auto style-2193-outer style-local-1538-c4-outer\">\n            <div data-colibri-id=\"1538-c4\" class=\"d-flex h-flex-basis h-column__inner h-px-lg-2 h-px-md-2 h-px-2 v-inner-lg-2 v-inner-md-2 v-inner-2 style-2193 style-local-1538-c4 position-relative\">\n              <!---->\n              <!---->\n              <div class=\"w-100 h-y-container h-column__content h-column__v-align flex-basis-100 align-self-lg-start align-self-md-start align-self-start\">\n                <!---->\n                <div data-colibri-id=\"1538-c5\" class=\"h-global-transition-all h-heading style-2195 style-local-1538-c5 position-relative h-element\">\n                  <!---->\n                  <div class=\"h-heading__outer style-2195 style-local-1538-c5\">\n                    <!---->\n                    <!---->\n                    <h1 class=\"\">Personal\n                      <br>Cemep<\/h1>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div data-colibri-component=\"section\" data-colibri-id=\"1538-c6\" id=\"custom\" class=\"h-section h-section-global-spacing d-flex align-items-lg-center align-items-md-center align-items-center style-1638 style-local-1538-c6 position-relative\">\n    <!---->\n    <!---->\n    <div class=\"h-section-grid-container h-section-fluid-container\">\n      <!---->\n      <div data-colibri-id=\"1538-c7\" class=\"h-row-container gutters-row-lg-1 gutters-row-md-1 gutters-row-0 gutters-row-v-lg-1 gutters-row-v-md-1 gutters-row-v-1 style-1639 style-local-1538-c7 position-relative\">\n        <!---->\n        <div class=\"h-row justify-content-lg-center justify-content-md-center justify-content-center align-items-lg-stretch align-items-md-stretch align-items-stretch gutters-col-lg-1 gutters-col-md-1 gutters-col-0 gutters-col-v-lg-1 gutters-col-v-md-1 gutters-col-v-1\">\n          <!---->\n          <div class=\"h-column h-column-container d-flex h-col-lg-auto h-col-md-auto h-col-auto style-1640-outer style-local-1538-c8-outer\">\n            <div data-colibri-id=\"1538-c8\" class=\"d-flex h-flex-basis h-column__inner h-px-lg-1 h-px-md-1 h-px-1 v-inner-lg-1 v-inner-md-1 v-inner-1 style-1640 style-local-1538-c8 position-relative\">\n              <!---->\n              <!---->\n              <div class=\"w-100 h-y-container h-column__content h-column__v-align flex-basis-100 align-self-lg-center align-self-md-center align-self-center\">\n                <!---->\n                <div data-colibri-id=\"1538-c9\" class=\"style-1641 style-local-1538-c9 position-relative h-element\">\n                  <!---->\n                  <div class=\"\"><style>\r\n            .container {\r\n                position: relative;\r\n                display: flex;\r\n                flex-direction: column;\r\n                max-width: 1200px;\r\n                margin: 0 auto;\r\n            }\r\n\r\n            .card-container {\r\n                position: relative;\r\n                width: 100%;\r\n                display: grid;\r\n                grid-template-columns: 1fr 1fr 1fr;\r\n                gap: 10px;\r\n            }\r\n\r\n            .card-container .card {\r\n                display: flex;\r\n                flex-direction: row;\r\n                align-items: center;\r\n                border: 1px solid #ddd;\r\n                border-radius: 8px;\r\n                padding: 20px;\r\n                margin: 0;\r\n                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n                min-height: 96px;\r\n            }\r\n\r\n            .card-container .card div:first-child {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                margin-right: 20px;\r\n                \r\n                min-width: 96px;\r\n                min-height: 96px;\r\n                max-width: 96px;\r\n                max-height: 96px;\r\n\r\n                overflow: hidden;\r\n            }\r\n\r\n            .card-container .card div:nth-of-type(2) {\r\n                display: flex;\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n            }\r\n\r\n            .card-container .card h3 {\r\n                font-family: Montserrat;\r\n                font-weight: 600;\r\n                text-transform: uppercase;\r\n                font-size: 16px;\r\n                line-height: normal;\r\n                color: rgb(27, 46, 77);\r\n                margin: 0 0 10px 0;\r\n                text-align: left;\r\n            }\r\n            \r\n            .card-container .card p {\r\n                font-family: Montserrat;\r\n                font-weight: 500;\r\n                text-transform: uppercase;\r\n                font-size: 12px;\r\n                line-height: normal;\r\n                color:rgb(114, 114, 114);\r\n                margin: 0;\r\n                text-align: left;\r\n            }\r\n\r\n            .card-container .card img {\r\n                width: 100%;\r\n                font-size: 12px;\r\n            }\r\n\r\n            \/**\/\r\n\r\n            .pagination {\r\n                text-align: center;\r\n                margin: 20px 0;\r\n            }\r\n\r\n            .pagination button {\r\n                padding: 7px 10px;\r\n                margin: 5px;\r\n                border: none;\r\n                background-color: #27477d;\r\n                color: white;\r\n                border-radius: 5px;\r\n                cursor: pointer;\r\n                font-size: 11px;\r\n                text-transform: uppercase;\r\n            }\r\n\r\n            .pagination button:disabled {\r\n                background-color: #ddd;\r\n                cursor: not-allowed;\r\n            }\r\n\r\n            .pagination .page-number {\r\n                font-family: Montserrat;\r\n                padding: 7px 5px;\r\n                margin: 1px;\r\n                border: none;\r\n                background-color: #eeeeee;\r\n                color: #27477d;\r\n                border-radius: 5px;\r\n                cursor: pointer;\r\n                font-size: 11px;\r\n                text-transform: uppercase;\r\n                text-decoration: none;\r\n            }\r\n\r\n            .pagination .page-number:hover {\r\n                background-color: #c6e2ff;\r\n            }\r\n\r\n            .pagination .page-number.active {\r\n                font-weight: bold;\r\n                background-color: #27477d;\r\n                color: white;\r\n            }\r\n\r\n            #searchInput {\r\n                position: relative;\r\n                display: block;\r\n                box-sizing: border-box;\r\n                width: 100%;\r\n                max-width: 200px;\r\n                padding: 10px 24px 10px 10px;\r\n                margin: 0 0 20px 0;\r\n                border: solid 1px #b3b3b3;\r\n                border-radius: 5px;\r\n                background-image: url(https:\/\/www.cemep.com.ar\/clinica\/wp-content\/uploads\/2023\/04\/icon-loupe.png);\r\n                background-position: 98% center;\r\n                background-size: 16px 16px;\r\n                background-repeat: no-repeat;\r\n            }\r\n\r\n            @media only screen and (max-width: 1023px) {\r\n\r\n                .card-container .card h3 {\r\n                    font-size: 12px;\r\n                    margin-bottom: 5px;\r\n                }\r\n\r\n            }\r\n\r\n            @media only screen and (max-width: 767px) {\r\n\r\n                .card-container {\r\n                    grid-template-columns: 1fr 1fr;\r\n                }\r\n\r\n            }\r\n\r\n            @media only screen and (max-width: 570px) {\r\n\r\n                .card-container {\r\n                    grid-template-columns: 1fr;\r\n                }\r\n                \r\n                #searchInput {\r\n                    max-width: unset;\r\n                    margin-bottom: 10px;\r\n                }\r\n\r\n            }\r\n\r\n        <\/style>\r\n\r\n        <div class=\"container\">\r\n            <input type=\"text\" id=\"searchInput\" placeholder=\"Buscar...\" \/>\r\n            <div id=\"sheetData\" class=\"card-container\"><\/div>\r\n        <\/div>\r\n        \r\n        <script>\r\n            const apiKey = 'AIzaSyCkGNZOYU3mWgeN5_MseJGPFgpkW1v6iBY';\r\n            const spreadsheetId = '1zoUvV4Vx1mM7ZG4uw9ChM85Sek1-hQO5RDxCkv7NsTo';\r\n            const range = 'Hoja 1!A1:D';\r\n            const sheetUrl = `https:\/\/sheets.googleapis.com\/v4\/spreadsheets\/${spreadsheetId}\/values\/${range}?key=${apiKey}`;\r\n        \r\n            let totalData = [];\r\n            let filteredData = [];\r\n        \r\n            function loadSheetData(url) {\r\n                fetch(url)\r\n                    .then(response => response.json())\r\n                    .then(data => { \r\n                        if (!data.values) throw new Error('No se encontraron valores en la hoja de c\u00e1lculo');\r\n                        totalData = data.values.slice(1);\r\n                        filteredData = totalData;\r\n                        displayAllData();\r\n                    })\r\n                    .catch(error => console.error('Error al cargar los datos:', error));\r\n            }\r\n        \r\n            function displayAllData() {\r\n                const sheetDataDiv = document.getElementById(\"sheetData\");\r\n                sheetDataDiv.innerHTML = '';\r\n        \r\n                filteredData.forEach(row => {\r\n                    const cardDiv = document.createElement('div');\r\n                    cardDiv.classList.add('card');\r\n                    cardDiv.innerHTML = `\r\n                        <div>\r\n                            <img decoding=\"async\" src=\"${row[3]}\" alt=\"${row[0]} ${row[1]}\" \/>\r\n                        <\/div>\r\n                        <div>\r\n                            <h3>${row[0]} ${row[1]}<\/h3>\r\n                            <p>${row[2]}<\/p>\r\n                        <\/div>\r\n                    `;\r\n                    sheetDataDiv.appendChild(cardDiv);\r\n                });\r\n            }\r\n        \r\n            document.getElementById(\"searchInput\").addEventListener('input', (event) => {\r\n                const searchTerm = event.target.value.toLowerCase();\r\n                if (searchTerm.length >= 3) {\r\n                    filteredData = totalData.filter(row => \r\n                        row[1].toLowerCase().includes(searchTerm) || row[2].toLowerCase().includes(searchTerm) || row[3].toLowerCase().includes(searchTerm)\r\n                    );\r\n                } else {\r\n                    filteredData = totalData;\r\n                }\r\n                displayAllData();\r\n            });\r\n        \r\n            loadSheetData(sheetUrl);\r\n        <\/script><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Personal Cemep<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-1538","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/pages\/1538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/comments?post=1538"}],"version-history":[{"count":11,"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/pages\/1538\/revisions"}],"predecessor-version":[{"id":3544,"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/pages\/1538\/revisions\/3544"}],"wp:attachment":[{"href":"https:\/\/www.cemep.com.ar\/clinica\/wp-json\/wp\/v2\/media?parent=1538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}