{"id":133,"date":"2026-06-22T16:05:48","date_gmt":"2026-06-22T16:05:48","guid":{"rendered":"https:\/\/deamlow.com\/?page_id=133"},"modified":"2026-06-22T17:09:09","modified_gmt":"2026-06-22T17:09:09","slug":"portal","status":"publish","type":"page","link":"https:\/\/deamlow.com\/?page_id=133","title":{"rendered":"Portal"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Deamlow &#8211; Acceso de Clientes<\/title>\n  <!-- Tailwind CSS CDN para estilos r\u00e1pidos y modernos en WordPress -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <style>\n    \/* Animaci\u00f3n de entrada suave para la tarjeta de acceso *\/\n    .animate-fadeIn {\n      animation: fadeIn 0.5s ease-out forwards;\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  <\/style>\n<\/head>\n<body class=\"font-sans text-slate-800 bg-slate-50 min-h-screen overflow-x-hidden\">\n\n  <!-- CONTENEDOR PRINCIPAL QUE FUERZA EL CENTRADO HORIZONTAL Y VERTICAL EN WORDPRESS -->\n  <div class=\"w-full min-h-screen flex flex-col justify-center items-center py-12 px-4 sm:px-6 lg:px-8 relative z-10\">\n    \n    <!-- CAPAS DECORATIVAS DE FONDO INTERNAS PARA ESTABILIDAD -->\n    <div class=\"absolute top-0 left-1\/4 w-96 h-96 bg-blue-100 rounded-full blur-3xl opacity-60 -translate-x-1\/2 -translate-y-1\/2 -z-10 pointer-events-none\"><\/div>\n    <div class=\"absolute bottom-0 right-1\/4 w-96 h-96 bg-indigo-100 rounded-full blur-3xl opacity-60 translate-x-1\/3 translate-y-1\/3 -z-10 pointer-events-none\"><\/div>\n\n    <!-- NOTIFICACI\u00d3N \/ TOAST PERSONALIZADO (Reemplazo est\u00e9tico de alert) -->\n    <div id=\"toastNotification\" class=\"fixed top-5 right-5 z-50 transform translate-y-[-100px] opacity-0 transition-all duration-500 max-w-md bg-white border-l-4 border-blue-600 rounded-xl shadow-2xl p-4 flex items-start gap-3 pointer-events-none\">\n      <div id=\"toastIcon\" class=\"p-1 rounded-full bg-blue-100 text-blue-600 mt-0.5\">\n        <!-- Icono por defecto (informaci\u00f3n) -->\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n      <\/div>\n      <div>\n        <h4 id=\"toastTitle\" class=\"font-bold text-slate-900 text-sm\">Mensaje<\/h4>\n        <p id=\"toastMessage\" class=\"text-xs text-slate-600 mt-1\">Detalles.<\/p>\n      <\/div>\n      <button onclick=\"hideToast()\" class=\"ml-auto text-slate-400 hover:text-slate-600\">\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\n      <\/button>\n    <\/div>\n\n    <!-- CONTENEDOR DE LA TARJETA (Alineado con mx-auto para asegurar el centro) -->\n    <div class=\"max-w-md w-full mx-auto space-y-8 bg-white p-10 rounded-3xl shadow-2xl border border-slate-100 animate-fadeIn relative z-10\">\n      \n      <!-- ENCABEZADO \/ LOGOTIPO -->\n      <div class=\"text-center\">\n        <!-- Icono tipo de logo con degradado e interactivo -->\n        <div class=\"w-16 h-16 bg-gradient-to-br from-blue-900 to-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-blue-500\/20 transform hover:scale-105 transition-transform duration-300\">\n          <!-- Play Icon SVG -->\n          <svg class=\"text-white w-8 h-8 ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M8 5v14l11-7z\"><\/path>\n          <\/svg>\n        <\/div>\n        <h2 class=\"text-3xl font-extrabold text-slate-900 tracking-tight\">\n          Bienvenido a Deamlow\n        <\/h2>\n        <p class=\"mt-2 text-sm text-slate-500 font-medium\">\n          Ingresa a tu portal de cliente corporativo\n        <\/p>\n      <\/div>\n\n      <!-- FORMULARIO -->\n      <form id=\"accesoForm\" class=\"mt-8 space-y-6\">\n        <div class=\"space-y-4\">\n          \n          <!-- Campo: Correo Electr\u00f3nico -->\n          <div>\n            <label class=\"block text-sm font-semibold text-slate-700 mb-2\">Correo electr\u00f3nico<\/label>\n            <div class=\"relative group\">\n              <div class=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition-colors\">\n                <!-- User Icon SVG -->\n                <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\/path>\n                <\/svg>\n              <\/div>\n              <input \n                type=\"email\" \n                id=\"accesoEmail\"\n                required \n                class=\"appearance-none rounded-xl relative block w-full px-4 py-3.5 pl-12 border border-slate-200 placeholder-slate-400 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500\/20 focus:border-blue-500 sm:text-sm bg-slate-50\/50 transition-all outline-none\" \n                placeholder=\"correo@empresa.com\" \n              \/>\n            <\/div>\n          <\/div>\n\n          <!-- Campo: Contrase\u00f1a -->\n          <div>\n            <label class=\"block text-sm font-semibold text-slate-700 mb-2\">Contrase\u00f1a<\/label>\n            <div class=\"relative group\">\n              <div class=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition-colors\">\n                <!-- Lock Icon SVG -->\n                <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"><\/path>\n                <\/svg>\n              <\/div>\n              <input \n                type=\"password\" \n                id=\"accesoPassword\"\n                required \n                class=\"appearance-none rounded-xl relative block w-full px-4 py-3.5 pl-12 border border-slate-200 placeholder-slate-400 text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500\/20 focus:border-blue-500 sm:text-sm bg-slate-50\/50 transition-all outline-none\" \n                placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" \n              \/>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- OPCIONES DE SESI\u00d3N -->\n        <div class=\"flex items-center justify-between text-sm\">\n          <div class=\"flex items-center\">\n            <input \n              id=\"remember-me\" \n              name=\"remember-me\" \n              type=\"checkbox\" \n              class=\"h-4.5 w-4.5 text-blue-600 focus:ring-blue-500\/20 border-slate-300 rounded-lg cursor-pointer transition-all\" \n            \/>\n            <label for=\"remember-me\" class=\"ml-2 block text-slate-600 font-medium cursor-pointer select-none\">\n              Recordarme\n            <\/label>\n          <\/div>\n          <div>\n            <button \n              type=\"button\" \n              onclick=\"handleForgotPassword()\"\n              class=\"font-semibold text-blue-600 hover:text-blue-500 transition-colors\"\n            >\n              \u00bfOlvidaste tu contrase\u00f1a?\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- BOT\u00d3N DE INGRESO -->\n        <div>\n          <button \n            type=\"submit\" \n            class=\"group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\/20 transition-all shadow-lg hover:shadow-blue-500\/20\"\n          >\n            Iniciar Sesi\u00f3n\n          <\/button>\n        <\/div>\n\n      <\/form>\n    <\/div>\n  <\/div>\n\n  <!-- L\u00d3GICA DE CONTROL DEL LOGIN -->\n  <script>\n    \/\/ --- Sistema Est\u00e9tico de Alertas Flotantes \/ Toasts ---\n    const toast = document.getElementById('toastNotification');\n    const toastTitle = document.getElementById('toastTitle');\n    const toastMessage = document.getElementById('toastMessage');\n    const toastIcon = document.getElementById('toastIcon');\n\n    function showToast(title, message, isError = false) {\n      toastTitle.textContent = title;\n      toastMessage.textContent = message;\n      \n      if (isError) {\n        toast.className = \"fixed top-5 right-5 z-50 transform translate-y-0 opacity-100 transition-all duration-500 max-w-md bg-white border-l-4 border-red-500 rounded-xl shadow-2xl p-4 flex items-start gap-3 pointer-events-auto\";\n        toastIcon.className = \"p-1 rounded-full bg-red-100 text-red-500 mt-0.5\";\n        toastIcon.innerHTML = `\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"><\/path>\n          <\/svg>`;\n      } else {\n        toast.className = \"fixed top-5 right-5 z-50 transform translate-y-0 opacity-100 transition-all duration-500 max-w-md bg-white border-l-4 border-blue-600 rounded-xl shadow-2xl p-4 flex items-start gap-3 pointer-events-auto\";\n        toastIcon.className = \"p-1 rounded-full bg-blue-100 text-blue-500 mt-0.5\";\n        toastIcon.innerHTML = `\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path>\n          <\/svg>`;\n      }\n      \n      setTimeout(hideToast, 6000); \/\/ Se esconde tras 6 segundos\n    }\n\n    function hideToast() {\n      toast.classList.add('translate-y-[-100px]', 'opacity-0');\n      toast.classList.remove('translate-y-0', 'opacity-100');\n    }\n\n    \/\/ --- Control de Submit de Formulario ---\n    document.getElementById('accesoForm').addEventListener('submit', function(e) {\n      e.preventDefault();\n      \n      const email = document.getElementById('accesoEmail').value.trim();\n      const password = document.getElementById('accesoPassword').value;\n\n      if (!email || !password) {\n        showToast(\"Error de acceso\", \"Por favor completa todos los campos del formulario.\", true);\n        return;\n      }\n\n      \/\/ Simulaci\u00f3n de acceso exitoso\n      showToast(\n        \"Acceso exitoso\", \n        \"Autenticando credenciales corporativas en Deamlow... \u00a1Bienvenido!\", \n        false\n      );\n    });\n\n    \/\/ --- Olvido de Contrase\u00f1a ---\n    function handleForgotPassword() {\n      const emailInput = document.getElementById('accesoEmail').value.trim();\n      if (!emailInput) {\n        showToast(\n          \"Indica tu correo\", \n          \"Por favor escribe primero tu correo electr\u00f3nico en el campo superior para enviarte instrucciones.\", \n          true\n        );\n      } else {\n        showToast(\n          \"Correo enviado\", \n          `Se han enviado las instrucciones de restablecimiento al correo: ${emailInput}`, \n          false\n        );\n      }\n    }\n  <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Deamlow &#8211; Acceso de Clientes Mensaje Detalles. Bienvenido a Deamlow Ingresa a tu portal de cliente corporativo Correo electr\u00f3nico Contrase\u00f1a Recordarme \u00bfOlvidaste tu contrase\u00f1a? Iniciar Sesi\u00f3n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-133","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=133"}],"version-history":[{"count":3,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/133\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/133\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}