Formulario de Login<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-color: #046312;\n --primary-hover: #034a0f;\n --danger-color: #ef4444;\n --success-color: #10b981;\n --gray-50: #f9fafb;\n --gray-100: #f3f4f6;\n --gray-200: #e5e7eb;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #6b7280;\n --gray-600: #4b5563;\n --gray-700: #374151;\n --gray-800: #1f2937;\n --gray-900: #111827;\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -2px rgb(0 0 0 \/ 0.05);\n --border-radius: 8px;\n --transition: all 0.2s ease;\n }\n\n .login-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .login-wrapper {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n }\n\n .login-container {\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow-lg);\n width: 100%;\n max-width: 420px;\n overflow: hidden;\n }\n\n .login-header {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n padding: 2rem 2rem 1.5rem;\n text-align: center;\n }\n\n .login-header h2 {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n }\n\n .login-header p {\n opacity: 0.9;\n font-size: 0.875rem;\n }\n\n .login-form {\n padding: 2rem;\n }\n\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--gray-700);\n margin-bottom: 0.5rem;\n }\n\n .form-input {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid var(--gray-200);\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: var(--transition);\n background: var(--gray-50);\n }\n\n .form-input:focus {\n outline: none;\n border-color: var(--primary-color);\n background: white;\n box-shadow: 0 0 0 3px rgba(4, 99, 18, 0.1);\n }\n \n \/* Estilo para el enlace de Restablecer Contrase\u00f1a *\/\n .forgot-password-link {\n text-align: right;\n margin-top: -1rem;\n margin-bottom: 1.5rem;\n }\n\n .forgot-password-link a {\n font-size: 0.875rem;\n color: var(--primary-color);\n text-decoration: none;\n font-weight: 500;\n transition: var(--transition);\n }\n\n .forgot-password-link a:hover {\n color: var(--primary-hover);\n text-decoration: underline;\n }\n\n \/* Select compacto tipo segmented control *\/\n .custom-select-group {\n display: flex;\n background: var(--gray-100);\n border-radius: 10px;\n padding: 4px;\n border: 2px solid var(--gray-200);\n gap: 4px;\n }\n\n .select-option {\n flex: 1;\n position: relative;\n }\n\n .select-radio {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .select-label {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n transition: var(--transition);\n font-size: 14px;\n font-weight: 500;\n color: var(--gray-600);\n text-align: center;\n gap: 8px;\n background: transparent;\n position: relative;\n }\n\n \/* Indicador circular peque\u00f1o *\/\n .select-label::before {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n \/* Colores espec\u00edficos para cada opci\u00f3n *\/\n .select-option:nth-child(1) .select-label::before {\n background-color: #3b82f6;\n }\n\n .select-option:nth-child(2) .select-label::before {\n background-color: #f59e0b;\n }\n\n \/* Estado seleccionado *\/\n .select-radio:checked + .select-label {\n background: white;\n color: var(--primary-color);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n font-weight: 600;\n }\n\n .select-radio:checked + .select-label::before {\n background-color: var(--primary-color);\n }\n\n .select-radio:focus + .select-label {\n box-shadow: 0 0 0 2px rgba(4, 99, 18, 0.2);\n }\n\n .select-label:hover {\n color: var(--primary-color);\n }\n\n \/* Checkbox toggle (deslizante) *\/\n .checkbox-group {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .checkbox-toggle {\n position: relative;\n width: 48px;\n height: 26px;\n background: var(--gray-300);\n border-radius: 13px;\n cursor: pointer;\n transition: var(--transition);\n flex-shrink: 0;\n }\n\n .checkbox-toggle::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n .checkbox-input:checked + .checkbox-toggle {\n background: var(--primary-color);\n }\n\n .checkbox-input:checked + .checkbox-toggle::before {\n transform: translateX(22px);\n }\n\n .checkbox-input:focus + .checkbox-toggle {\n box-shadow: 0 0 0 3px rgba(4, 99, 18, 0.1);\n }\n\n .checkbox-toggle:hover {\n background: var(--gray-400);\n }\n\n .checkbox-input:checked + .checkbox-toggle:hover {\n background: var(--primary-hover);\n }\n\n .checkbox-label {\n font-size: 0.875rem;\n color: var(--gray-600);\n line-height: 1.5;\n cursor: pointer;\n }\n\n .checkbox-label a {\n color: var(--primary-color);\n text-decoration: none;\n }\n\n .checkbox-label a:hover {\n text-decoration: underline;\n }\n\n .submit-button {\n width: 100%;\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n border: none;\n padding: 0.875rem 1rem;\n border-radius: var(--border-radius);\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n\n .submit-button:hover {\n transform: translateY(-1px);\n box-shadow: var(--shadow-lg);\n }\n\n .submit-button:active {\n transform: translateY(0);\n }\n\n .submit-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .error-message {\n background: #fef2f2;\n border: 1px solid #fecaca;\n color: var(--danger-color);\n padding: 1rem;\n border-radius: var(--border-radius);\n margin-bottom: 1.5rem;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n display: none;\n }\n\n .security-info {\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--gray-200);\n font-size: 0.75rem;\n color: var(--gray-500);\n text-align: center;\n line-height: 1.5;\n }\n\n .loading {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border: 2px solid rgba(255,255,255,0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s ease-in-out infinite;\n }\n\n @keyframes spin {\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n .submit-button.loading .button-text {\n opacity: 0;\n }\n\n .submit-button.loading .loading {\n display: block;\n }\n\n\n \/* Estilos para el mensaje de seguridad *\/\n .security-message-wrapper {\n margin-top: 1rem;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .security-message-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: var(--transition);\n background: rgba(255, 255, 255, 0.15);\n border: none;\n width: 100%;\n color: white;\n }\n\n .security-message-toggle:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n\n .security-message-title {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n }\n\n .security-icon {\n width: 16px;\n height: 16px;\n }\n\n .toggle-icon {\n width: 16px;\n height: 16px;\n transition: transform 0.3s ease;\n }\n\n .toggle-icon.rotated {\n transform: rotate(180deg);\n }\n\n .security-message-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .security-message-content.show {\n max-height: 500px;\n }\n\n .security-message-text {\n padding: 1rem;\n font-size: 0.75rem;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.95);\n }\n\n .security-message-text ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .security-message-text li {\n margin-bottom: 0.75rem;\n padding-left: 1.25rem;\n position: relative;\n }\n\n .security-message-text li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #10b981;\n font-weight: bold;\n }\n\n .security-message-text li:last-child {\n margin-bottom: 0;\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .login-container {\n margin: 0.5rem;\n }\n \n .login-header {\n padding: 1.5rem 1.5rem 1rem;\n }\n \n .login-form {\n padding: 1.5rem;\n }\n }\n <\/style>\n <\/head>\n<body>\n <div class=\"login-wrapper\">\n <div class=\"login-container\">\n <div class=\"login-header\">\n <h2><h2>Iniciar Sesi\u00f3n<\/h2>\n <p>Accede a tu cuenta de forma segura<\/p> \n \n <div class=\"security-message-wrapper\">\n <button type=\"button\" class=\"security-message-toggle\" id=\"securityToggle\">\n <div class=\"security-message-title\">\n <svg class=\"security-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z\"\/>\n <\/svg>\n Mensaje de seguridad\n <\/div>\n <svg class=\"toggle-icon\" id=\"toggleIcon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\/>\n <\/svg>\n <\/button>\n <div class=\"security-message-content\" id=\"securityContent\">\n <div class=\"security-message-text\">\n <ul>\n <li>Est\u00e1 a punto de ingresar a la plataforma de CEMPECAFEN para el manejo de Servicios en l\u00ednea, en la cual se solicitar\u00e1 tu c\u00e9dula y tu clave personal para acceder al servicio.<\/li>\n <li>Por pol\u00edticas de seguridad CEMPECAFEN nunca solicitar\u00e1 informaci\u00f3n personal o de tus cuentas a trav\u00e9s de correo electr\u00f3nico.<\/li>\n <li>Recuerda cambiar peri\u00f3dicamente tu clave de acceso.<\/li>\n <li>Siempre que vayas a realizar transacciones por Internet, hazlo desde tu computador personal en casa u oficina.<\/li>\n <li>Siempre que desees ingresar a realizar consultas referentes a tus saldos, digita desde tu navegador la direcci\u00f3n cempecafen.com, nunca ingreses a trav\u00e9s de enlaces en correos electr\u00f3nicos o en otros sitios de Internet.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <form method=\"post\" action=\"procesar_login.php\" class=\"login-form\" id=\"loginForm\">\n <div class=\"error-message\" id=\"errorMessage\">\n <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"\/>\n <\/svg>\n <span id=\"errorText\"><\/span>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"username\" class=\"form-label\">C\u00e9dula<\/label>\n <input \n type=\"text\" \n name=\"username\" \n id=\"username\" \n class=\"form-input\"\n required \n pattern=\"[0-9]{7,12}\" \n title=\"Ingrese solo n\u00fameros (7-12 d\u00edgitos)\"\n autocomplete=\"username\"\n maxlength=\"12\"\n placeholder=\"Ingrese su n\u00famero de c\u00e9dula\"\n >\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"password\" class=\"form-label\">Contrase\u00f1a<\/label>\n <input \n type=\"password\" \n name=\"password\" \n id=\"password\" \n class=\"form-input\"\n required \n minlength=\"6\"\n autocomplete=\"current-password\"\n placeholder=\"Ingrese su contrase\u00f1a\"\n >\n <\/div>\n \n <div class=\"forgot-password-link\">\n <a href=\"https:\/\/solidario.website\/?page_id=180\">\u00bfOlvidaste tu contrase\u00f1a?<\/a>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Tipo de Usuario<\/label>\n <div class=\"custom-select-group\">\n <div class=\"select-option\">\n <input \n type=\"radio\" \n name=\"tipo\" \n id=\"tipo-as\" \n value=\"AS\" \n class=\"select-radio\"\n checked\n required\n >\n <label for=\"tipo-as\" class=\"select-label\">\n Asociado\n <\/label>\n <\/div>\n <div class=\"select-option\">\n <input \n type=\"radio\" \n name=\"tipo\" \n id=\"tipo-ad\" \n value=\"AD\" \n class=\"select-radio\"\n required\n >\n <label for=\"tipo-ad\" class=\"select-label\">\n Administrador\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"checkbox-group\">\n <input \n type=\"checkbox\" \n name=\"polit_datos\" \n id=\"polit_datos\" \n value=\"Si acepto\" \n class=\"checkbox-input\"\n required\n >\n <div class=\"checkbox-toggle\"><\/div>\n <label for=\"polit_datos\" class=\"checkbox-label\">\n Acepto la <a href=\"#\" target=\"_blank\">pol\u00edtica de tratamiento de datos<\/a> y \n <a href=\"#\" target=\"_blank\">t\u00e9rminos de uso<\/a>\n <\/label>\n <\/div>\n\n <button type=\"submit\" class=\"submit-button\" id=\"submitBtn\">\n <span class=\"button-text\">Iniciar Sesi\u00f3n<\/span>\n <div class=\"loading\"><\/div>\n <\/button>\n\n <div class=\"security-info\">\n <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\" style=\"display: inline; margin-right: 4px;\">\n <path d=\"M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z\"\/>\n <\/svg>\n Tu informaci\u00f3n est\u00e1 protegida con encriptaci\u00f3n SSL\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('loginForm').addEventListener('submit', function() {\n \/\/ Activa el estado de carga en el bot\u00f3n\n const submitBtn = document.getElementById('submitBtn');\n submitBtn.classList.add('loading');\n submitBtn.disabled = true;\n });\n\n \/\/ Validaci\u00f3n en tiempo real para la c\u00e9dula (solo n\u00fameros)\n document.getElementById('username').addEventListener('input', function(e) {\n e.target.value = e.target.value.replace(\/[^0-9]\/g, '');\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Mejora UX del checkbox toggle\n const checkbox = document.getElementById('polit_datos');\n const checkboxToggle = document.querySelector('.checkbox-toggle');\n \n checkboxToggle.addEventListener('click', function() {\n checkbox.checked = !checkbox.checked;\n checkbox.dispatchEvent(new Event('change'));\n });\n\n \/\/ Funci\u00f3n para mostrar errores\n window.showError = function(message) {\n const errorDiv = document.getElementById('errorMessage');\n const errorText = document.getElementById('errorText');\n errorText.textContent = message;\n errorDiv.style.display = 'flex';\n \/\/ Opcional: Quitar el estado de carga si se muestra un error de validaci\u00f3n\n const submitBtn = document.getElementById('submitBtn');\n submitBtn.classList.remove('loading');\n submitBtn.disabled = false;\n };\n\n \/\/ Comprobar si hay error en URL (para simular errores del backend PHP)\n const urlParams = new URLSearchParams(window.location.search);\n const error = urlParams.get('error');\n if (error) {\n const errorMessages = {\n 'invalid_credentials': 'Credenciales inv\u00e1lidas (C\u00e9dula o Contrase\u00f1a incorrecta).',\n 'missing_fields': 'Todos los campos son requeridos. Revise y complete la informaci\u00f3n.',\n 'invalid_format': 'Formato de c\u00e9dula inv\u00e1lido. Debe contener solo n\u00fameros.',\n 'access_denied': 'Acceso denegado. Tipo de usuario no autorizado.',\n 'too_many_attempts': 'Demasiados intentos de sesi\u00f3n. Intente m\u00e1s tarde.',\n 'connection_error': 'Error de servidor. No se pudo conectar a la base de datos.'\n };\n const message = errorMessages[error] || 'Error desconocido. Intente nuevamente.';\n showError(message);\n }\n\n \/\/ Funcionalidad para mostrar\/ocultar mensaje de seguridad\n const securityToggle = document.getElementById('securityToggle');\n const securityContent = document.getElementById('securityContent');\n const toggleIcon = document.getElementById('toggleIcon');\n\n if (securityToggle) {\n securityToggle.addEventListener('click', function() {\n securityContent.classList.toggle('show');\n toggleIcon.classList.toggle('rotated');\n });\n }\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Formulario de Login Iniciar Sesi\u00f3n Accede a tu cuenta de forma segura Mensaje de seguridad Est\u00e1 a punto de ingresar a la plataforma de CEMPECAFEN para el manejo de Servicios en l\u00ednea, en la cual se solicitar\u00e1 tu c\u00e9dula y tu clave personal para acceder al servicio. Por pol\u00edticas de seguridad CEMPECAFEN nunca solicitar\u00e1 informaci\u00f3n […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidario.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":38,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions\/214"}],"wp:attachment":[{"href":"https:\/\/solidario.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":48,"date":"2022-08-24T00:34:50","date_gmt":"2022-08-24T05:34:50","guid":{"rendered":"https:\/\/solidario.website\/?page_id=48"},"modified":"2025-10-21T23:31:20","modified_gmt":"2025-10-22T04:31:20","slug":"ingreso-asociado","status":"publish","type":"page","link":"https:\/\/solidario.website\/?page_id=48","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Formulario de Login<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n \n <style>\n :root {\n --primary-color: #046312;\n --primary-hover: #034a0f;\n --danger-color: #ef4444;\n --success-color: #10b981;\n --gray-50: #f9fafb;\n --gray-100: #f3f4f6;\n --gray-200: #e5e7eb;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #6b7280;\n --gray-600: #4b5563;\n --gray-700: #374151;\n --gray-800: #1f2937;\n --gray-900: #111827;\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -2px rgb(0 0 0 \/ 0.05);\n --border-radius: 8px;\n --transition: all 0.2s ease;\n }\n\n .login-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .login-wrapper {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n }\n\n .login-container {\n background: white;\n border-radius: 12px;\n box-shadow: var(--shadow-lg);\n width: 100%;\n max-width: 420px;\n overflow: hidden;\n }\n\n .login-header {\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n padding: 2rem 2rem 1.5rem;\n text-align: center;\n }\n\n .login-header h2 {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n }\n\n .login-header p {\n opacity: 0.9;\n font-size: 0.875rem;\n }\n\n .login-form {\n padding: 2rem;\n }\n\n .form-group {\n margin-bottom: 1.5rem;\n }\n\n .form-label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--gray-700);\n margin-bottom: 0.5rem;\n }\n\n .form-input {\n width: 100%;\n padding: 0.75rem 1rem;\n border: 2px solid var(--gray-200);\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: var(--transition);\n background: var(--gray-50);\n }\n\n .form-input:focus {\n outline: none;\n border-color: var(--primary-color);\n background: white;\n box-shadow: 0 0 0 3px rgba(4, 99, 18, 0.1);\n }\n \n \/* Estilo para el enlace de Restablecer Contrase\u00f1a *\/\n .forgot-password-link {\n text-align: right;\n margin-top: -1rem;\n margin-bottom: 1.5rem;\n }\n\n .forgot-password-link a {\n font-size: 0.875rem;\n color: var(--primary-color);\n text-decoration: none;\n font-weight: 500;\n transition: var(--transition);\n }\n\n .forgot-password-link a:hover {\n color: var(--primary-hover);\n text-decoration: underline;\n }\n\n \/* Select compacto tipo segmented control *\/\n .custom-select-group {\n display: flex;\n background: var(--gray-100);\n border-radius: 10px;\n padding: 4px;\n border: 2px solid var(--gray-200);\n gap: 4px;\n }\n\n .select-option {\n flex: 1;\n position: relative;\n }\n\n .select-radio {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .select-label {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px 16px;\n border-radius: 8px;\n cursor: pointer;\n transition: var(--transition);\n font-size: 14px;\n font-weight: 500;\n color: var(--gray-600);\n text-align: center;\n gap: 8px;\n background: transparent;\n position: relative;\n }\n\n \/* Indicador circular peque\u00f1o *\/\n .select-label::before {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n \/* Colores espec\u00edficos para cada opci\u00f3n *\/\n .select-option:nth-child(1) .select-label::before {\n background-color: #3b82f6;\n }\n\n .select-option:nth-child(2) .select-label::before {\n background-color: #f59e0b;\n }\n\n \/* Estado seleccionado *\/\n .select-radio:checked + .select-label {\n background: white;\n color: var(--primary-color);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n font-weight: 600;\n }\n\n .select-radio:checked + .select-label::before {\n background-color: var(--primary-color);\n }\n\n .select-radio:focus + .select-label {\n box-shadow: 0 0 0 2px rgba(4, 99, 18, 0.2);\n }\n\n .select-label:hover {\n color: var(--primary-color);\n }\n\n \/* Checkbox toggle (deslizante) *\/\n .checkbox-group {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .checkbox-input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .checkbox-toggle {\n position: relative;\n width: 48px;\n height: 26px;\n background: var(--gray-300);\n border-radius: 13px;\n cursor: pointer;\n transition: var(--transition);\n flex-shrink: 0;\n }\n\n .checkbox-toggle::before {\n content: '';\n position: absolute;\n top: 3px;\n left: 3px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n\n .checkbox-input:checked + .checkbox-toggle {\n background: var(--primary-color);\n }\n\n .checkbox-input:checked + .checkbox-toggle::before {\n transform: translateX(22px);\n }\n\n .checkbox-input:focus + .checkbox-toggle {\n box-shadow: 0 0 0 3px rgba(4, 99, 18, 0.1);\n }\n\n .checkbox-toggle:hover {\n background: var(--gray-400);\n }\n\n .checkbox-input:checked + .checkbox-toggle:hover {\n background: var(--primary-hover);\n }\n\n .checkbox-label {\n font-size: 0.875rem;\n color: var(--gray-600);\n line-height: 1.5;\n cursor: pointer;\n }\n\n .checkbox-label a {\n color: var(--primary-color);\n text-decoration: none;\n }\n\n .checkbox-label a:hover {\n text-decoration: underline;\n }\n\n .submit-button {\n width: 100%;\n background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);\n color: white;\n border: none;\n padding: 0.875rem 1rem;\n border-radius: var(--border-radius);\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n\n .submit-button:hover {\n transform: translateY(-1px);\n box-shadow: var(--shadow-lg);\n }\n\n .submit-button:active {\n transform: translateY(0);\n }\n\n .submit-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .error-message {\n background: #fef2f2;\n border: 1px solid #fecaca;\n color: var(--danger-color);\n padding: 1rem;\n border-radius: var(--border-radius);\n margin-bottom: 1.5rem;\n font-size: 0.875rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n display: none;\n }\n\n .security-info {\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n border-top: 1px solid var(--gray-200);\n font-size: 0.75rem;\n color: var(--gray-500);\n text-align: center;\n line-height: 1.5;\n }\n\n .loading {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border: 2px solid rgba(255,255,255,0.3);\n border-radius: 50%;\n border-top-color: white;\n animation: spin 1s ease-in-out infinite;\n }\n\n @keyframes spin {\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n .submit-button.loading .button-text {\n opacity: 0;\n }\n\n .submit-button.loading .loading {\n display: block;\n }\n\n\n \/* Estilos para el mensaje de seguridad *\/\n .security-message-wrapper {\n margin-top: 1rem;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .security-message-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: var(--transition);\n background: rgba(255, 255, 255, 0.15);\n border: none;\n width: 100%;\n color: white;\n }\n\n .security-message-toggle:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n\n .security-message-title {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n font-weight: 500;\n }\n\n .security-icon {\n width: 16px;\n height: 16px;\n }\n\n .toggle-icon {\n width: 16px;\n height: 16px;\n transition: transform 0.3s ease;\n }\n\n .toggle-icon.rotated {\n transform: rotate(180deg);\n }\n\n .security-message-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .security-message-content.show {\n max-height: 500px;\n }\n\n .security-message-text {\n padding: 1rem;\n font-size: 0.75rem;\n line-height: 1.6;\n color: rgba(255, 255, 255, 0.95);\n }\n\n .security-message-text ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .security-message-text li {\n margin-bottom: 0.75rem;\n padding-left: 1.25rem;\n position: relative;\n }\n\n .security-message-text li:before {\n content: \"\u2713\";\n position: absolute;\n left: 0;\n color: #10b981;\n font-weight: bold;\n }\n\n .security-message-text li:last-child {\n margin-bottom: 0;\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .login-container {\n margin: 0.5rem;\n }\n \n .login-header {\n padding: 1.5rem 1.5rem 1rem;\n }\n \n .login-form {\n padding: 1.5rem;\n }\n }\n <\/style>\n <\/head>\n<body>\n <div class=\"login-wrapper\">\n <div class=\"login-container\">\n <div class=\"login-header\">\n <h2><h2>Iniciar Sesi\u00f3n<\/h2>\n <p>Accede a tu cuenta de forma segura<\/p> \n \n <div class=\"security-message-wrapper\">\n <button type=\"button\" class=\"security-message-toggle\" id=\"securityToggle\">\n <div class=\"security-message-title\">\n <svg class=\"security-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z\"\/>\n <\/svg>\n Mensaje de seguridad\n <\/div>\n <svg class=\"toggle-icon\" id=\"toggleIcon\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\/>\n <\/svg>\n <\/button>\n <div class=\"security-message-content\" id=\"securityContent\">\n <div class=\"security-message-text\">\n <ul>\n <li>Est\u00e1 a punto de ingresar a la plataforma de CEMPECAFEN para el manejo de Servicios en l\u00ednea, en la cual se solicitar\u00e1 tu c\u00e9dula y tu clave personal para acceder al servicio.<\/li>\n <li>Por pol\u00edticas de seguridad CEMPECAFEN nunca solicitar\u00e1 informaci\u00f3n personal o de tus cuentas a trav\u00e9s de correo electr\u00f3nico.<\/li>\n <li>Recuerda cambiar peri\u00f3dicamente tu clave de acceso.<\/li>\n <li>Siempre que vayas a realizar transacciones por Internet, hazlo desde tu computador personal en casa u oficina.<\/li>\n <li>Siempre que desees ingresar a realizar consultas referentes a tus saldos, digita desde tu navegador la direcci\u00f3n cempecafen.com, nunca ingreses a trav\u00e9s de enlaces en correos electr\u00f3nicos o en otros sitios de Internet.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <form method=\"post\" action=\"procesar_login.php\" class=\"login-form\" id=\"loginForm\">\n <div class=\"error-message\" id=\"errorMessage\">\n <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\">\n <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\"\/>\n <\/svg>\n <span id=\"errorText\"><\/span>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"username\" class=\"form-label\">C\u00e9dula<\/label>\n <input \n type=\"text\" \n name=\"username\" \n id=\"username\" \n class=\"form-input\"\n required \n pattern=\"[0-9]{7,12}\" \n title=\"Ingrese solo n\u00fameros (7-12 d\u00edgitos)\"\n autocomplete=\"username\"\n maxlength=\"12\"\n placeholder=\"Ingrese su n\u00famero de c\u00e9dula\"\n >\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"password\" class=\"form-label\">Contrase\u00f1a<\/label>\n <input \n type=\"password\" \n name=\"password\" \n id=\"password\" \n class=\"form-input\"\n required \n minlength=\"6\"\n autocomplete=\"current-password\"\n placeholder=\"Ingrese su contrase\u00f1a\"\n >\n <\/div>\n \n <div class=\"forgot-password-link\">\n <a href=\"https:\/\/solidario.website\/?page_id=180\">\u00bfOlvidaste tu contrase\u00f1a?<\/a>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\">Tipo de Usuario<\/label>\n <div class=\"custom-select-group\">\n <div class=\"select-option\">\n <input \n type=\"radio\" \n name=\"tipo\" \n id=\"tipo-as\" \n value=\"AS\" \n class=\"select-radio\"\n checked\n required\n >\n <label for=\"tipo-as\" class=\"select-label\">\n Asociado\n <\/label>\n <\/div>\n <div class=\"select-option\">\n <input \n type=\"radio\" \n name=\"tipo\" \n id=\"tipo-ad\" \n value=\"AD\" \n class=\"select-radio\"\n required\n >\n <label for=\"tipo-ad\" class=\"select-label\">\n Administrador\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"checkbox-group\">\n <input \n type=\"checkbox\" \n name=\"polit_datos\" \n id=\"polit_datos\" \n value=\"Si acepto\" \n class=\"checkbox-input\"\n required\n >\n <div class=\"checkbox-toggle\"><\/div>\n <label for=\"polit_datos\" class=\"checkbox-label\">\n Acepto la <a href=\"#\" target=\"_blank\">pol\u00edtica de tratamiento de datos<\/a> y \n <a href=\"#\" target=\"_blank\">t\u00e9rminos de uso<\/a>\n <\/label>\n <\/div>\n\n <button type=\"submit\" class=\"submit-button\" id=\"submitBtn\">\n <span class=\"button-text\">Iniciar Sesi\u00f3n<\/span>\n <div class=\"loading\"><\/div>\n <\/button>\n\n <div class=\"security-info\">\n <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 16 16\" style=\"display: inline; margin-right: 4px;\">\n <path d=\"M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z\"\/>\n <\/svg>\n Tu informaci\u00f3n est\u00e1 protegida con encriptaci\u00f3n SSL\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('loginForm').addEventListener('submit', function() {\n \/\/ Activa el estado de carga en el bot\u00f3n\n const submitBtn = document.getElementById('submitBtn');\n submitBtn.classList.add('loading');\n submitBtn.disabled = true;\n });\n\n \/\/ Validaci\u00f3n en tiempo real para la c\u00e9dula (solo n\u00fameros)\n document.getElementById('username').addEventListener('input', function(e) {\n e.target.value = e.target.value.replace(\/[^0-9]\/g, '');\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Mejora UX del checkbox toggle\n const checkbox = document.getElementById('polit_datos');\n const checkboxToggle = document.querySelector('.checkbox-toggle');\n \n checkboxToggle.addEventListener('click', function() {\n checkbox.checked = !checkbox.checked;\n checkbox.dispatchEvent(new Event('change'));\n });\n\n \/\/ Funci\u00f3n para mostrar errores\n window.showError = function(message) {\n const errorDiv = document.getElementById('errorMessage');\n const errorText = document.getElementById('errorText');\n errorText.textContent = message;\n errorDiv.style.display = 'flex';\n \/\/ Opcional: Quitar el estado de carga si se muestra un error de validaci\u00f3n\n const submitBtn = document.getElementById('submitBtn');\n submitBtn.classList.remove('loading');\n submitBtn.disabled = false;\n };\n\n \/\/ Comprobar si hay error en URL (para simular errores del backend PHP)\n const urlParams = new URLSearchParams(window.location.search);\n const error = urlParams.get('error');\n if (error) {\n const errorMessages = {\n 'invalid_credentials': 'Credenciales inv\u00e1lidas (C\u00e9dula o Contrase\u00f1a incorrecta).',\n 'missing_fields': 'Todos los campos son requeridos. Revise y complete la informaci\u00f3n.',\n 'invalid_format': 'Formato de c\u00e9dula inv\u00e1lido. Debe contener solo n\u00fameros.',\n 'access_denied': 'Acceso denegado. Tipo de usuario no autorizado.',\n 'too_many_attempts': 'Demasiados intentos de sesi\u00f3n. Intente m\u00e1s tarde.',\n 'connection_error': 'Error de servidor. No se pudo conectar a la base de datos.'\n };\n const message = errorMessages[error] || 'Error desconocido. Intente nuevamente.';\n showError(message);\n }\n\n \/\/ Funcionalidad para mostrar\/ocultar mensaje de seguridad\n const securityToggle = document.getElementById('securityToggle');\n const securityContent = document.getElementById('securityContent');\n const toggleIcon = document.getElementById('toggleIcon');\n\n if (securityToggle) {\n securityToggle.addEventListener('click', function() {\n securityContent.classList.toggle('show');\n toggleIcon.classList.toggle('rotated');\n });\n }\n\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Formulario de Login Iniciar Sesi\u00f3n Accede a tu cuenta de forma segura Mensaje de seguridad Est\u00e1 a punto de ingresar a la plataforma de CEMPECAFEN para el manejo de Servicios en l\u00ednea, en la cual se solicitar\u00e1 tu c\u00e9dula y tu clave personal para acceder al servicio. Por pol\u00edticas de seguridad CEMPECAFEN nunca solicitar\u00e1 informaci\u00f3n […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidario.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":38,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/solidario.website\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions\/214"}],"wp:attachment":[{"href":"https:\/\/solidario.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}