{"id":237,"date":"2026-07-05T22:33:26","date_gmt":"2026-07-05T22:33:26","guid":{"rendered":"https:\/\/claridia.com\/web\/?page_id=237"},"modified":"2026-07-06T17:20:55","modified_gmt":"2026-07-06T17:20:55","slug":"planificador-de-fabrica","status":"publish","type":"page","link":"https:\/\/claridia.com\/web\/planificador-de-fabrica\/","title":{"rendered":"Planificador de F\u00e1brica"},"content":{"rendered":"<style>\n#calcfab-spa-container {\n    display: grid;\n    grid-template-columns: 250px 1fr;\n    grid-template-rows: 60px 1fr 300px;\n    height: 85vh; \n    min-height: 600px;\n    background: #f4f6f9;\n    font-family: system-ui, -apple-system, sans-serif;\n    overflow: hidden;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n\n    width: 100vw !important;\n    max-width: 100vw !important;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n    box-sizing: border-box;\n}\n\n\/* Lateral Izquierdo: Lista de Flujos *\/\n.calcfab-sidebar {\n    grid-column: 1;\n    grid-row: 1 \/ span 3;\n    background: #2c3e50;\n    color: white;\n    display: flex;\n    flex-direction: column;\n}\n.calcfab-sidebar-header {\n    padding: 15px;\n    background: #1a252f;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.calcfab-flujo-item {\n    padding: 12px 15px;\n    cursor: pointer;\n    border-bottom: 1px solid #34495e;\n    transition: background 0.2s;\n}\n.calcfab-flujo-item:hover, .calcfab-flujo-item.active {\n    background: #3498db;\n}\n\n\/* Cabecera Superior del Lienzo *\/\n.calcfab-canvas-header {\n    grid-column: 2;\n    grid-row: 1;\n    background: white;\n    border-bottom: 1px solid #ddd;\n    padding: 15px 20px;\n    display: flex;\n    align-items: center;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n}\n\n\/* Lienzo Central: Gr\u00e1fico de Procesos *\/\n.calcfab-canvas {\n    grid-column: 2;\n    grid-row: 2;\n    padding: 20px 40px;\n    overflow-x: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    background: #fdfdfd;\n    \/* Patr\u00f3n de cuadr\u00edcula de fondo para dar aspecto de plano *\/\n    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);\n    background-size: 20px 20px;\n}\n\n\/* Nodos del Flujo (Cajas de Proceso) *\/\n.calcfab-proceso-track {\n    display: flex;\n    align-items: center;\n    min-height: fit-content;\n    width: 100%;\n    padding-bottom: 0px; \/* Espacio para el drag & drop *\/\n    overflow-x: auto;\n}\n.calcfab-proceso-nodo {\n    background: white;\n    border: 2px solid #3498db;\n    border-radius: 6px;\n    padding: 10px 2px 10px 2px;\n    min-width: 140px;\n    text-align: center;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n    cursor: grab;\n    position: relative;\n    transition: transform 0.2s, border-color 0.2s;\n}\n.calcfab-proceso-nodo:hover {\n    transform: translateY(-2px);\n    border-color: #2980b9;\n}\n.calcfab-proceso-nodo.selected {\n    border-color: #e74c3c;\n    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);\n}\n\n\/* Flechas y Botones '+' *\/\n.calcfab-arrow-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 60px;\n    position: relative;\n}\n.calcfab-arrow-line {\n    height: 2px;\n    width: 100%;\n    background: #bdc3c7;\n    position: relative;\n}\n.calcfab-arrow-line::after {\n    content: '';\n    position: absolute;\n    right: -5px;\n    top: -4px;\n    border-top: 5px solid transparent;\n    border-bottom: 5px solid transparent;\n    border-left: 5px solid #bdc3c7;\n}\n.calcfab-add-process-btn {\n    position: absolute;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    background: #2ecc71;\n    color: white;\n    border: none;\n    cursor: pointer;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s;\n    z-index: 2;\n}\n.calcfab-arrow-container:hover .calcfab-add-process-btn {\n    opacity: 1;\n}\n\n\/* Panel Inferior: Detalles y Edici\u00f3n Maestra *\/\n.calcfab-bottom-area {\n    grid-column: 2;\n    grid-row: 3;\n    display: flex;\n    border-top: 2px solid #ddd;\n    background: white;\n    position: relative;\n}\n.calcfab-process-details {\n    flex: 1;\n    padding: 0px 20px 10px 20px;\n    border-right: 1px solid #eee;\n    overflow-y: auto;\n}\n.calcfab-master-editor {\n    width: 350px; \/* Panel lateral derecho dentro del inferior *\/\n    background: #f8f9fa;\n    padding: 20px;\n    overflow-y: auto;\n    display: none; \/* Se muestra al hacer clic en el bot\u00f3n del desplegable *\/\n}\n\n.calcfab-resizer-inferior {\n    height: 8px;\n    width: 100%;\n    background: transparent;\n    cursor: ns-resize;\n    position: absolute;\n    top: -4px;\n    left: 0;\n    z-index: 200;\n    transition: background 0.2s;\n}\n.calcfab-resizer-inferior:hover, .calcfab-resizer-inferior.active {\n    background: rgba(52, 152, 219, 0.5);\n}\n\n\n\/* Estilos de Formulario B\u00e1sicos *\/\n.calcfab-form-group { margin-bottom: 15px; }\n.calcfab-form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; font-size: 0.9em; }\n.calcfab-form-group input, .calcfab-form-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }\n.calcfab-btn-icon { background: none; border: none; cursor: pointer; color: #7f8c8d; }\n.calcfab-btn-icon:hover { color: #3498db; }\n\n#panel-edicion-maestra form h2,\n#panel-edicion-maestra form h3,\n#panel-edicion-maestra form .cabecera-botones {\n    position: sticky;\n    top: 0;\n    background-color: #f9f9f9; \/* Ajusta al color de fondo de tu panel lateral *\/\n    z-index: 100;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #ddd;\n    margin-top: 0;\n    padding-top: 15px;\n}\n\n\/* Hacer que la cabecera del panel inferior sea pegajosa *\/\n#titulo-detalles-inferior {\n    position: sticky;\n    top: 0;\n    background-color: #ffffff; \/* Ajusta al color de tu panel inferior *\/\n    z-index: 100;\n    padding: 10px 0;\n    border-bottom: 1px solid #eee;\n    margin-top: 0px;\n    padding-top: 0px;\n    padding-bottom: 10px;\n}\n\n\/* Asegurar que el contenedor inferior permita scroll correctamente *\/\n#panel-detalles-proceso, \n#panel-resultados-inferior {\n    max-height: 400px; \/* Ajusta a la altura que tengas definida *\/\n    overflow-y: auto;\n    position: relative;\n}\n\n\/* :root {\n    --z-factor: 1;\n}\n\n.caja-proceso-zoom {\n    width: calc(160px * var(--z-factor)) !important; \n    min-width: calc(120px * var(--z-factor)) !important;\n    margin-right: calc(15px * var(--z-factor)) !important;\n    padding-left: calc(10px * var(--z-factor)) !important;\n    padding-right: calc(10px * var(--z-factor)) !important;\n    transition: width 0.2s ease, margin 0.2s ease, padding 0.2s ease;\n}\n.caja-proceso-zoom strong,\n.caja-proceso-zoom b {font-size: calc(14px * var(--z-factor)) !important;}\n.caja-proceso-zoom span {font-size: calc(11px * var(--z-factor)) !important;} *\/\n\n\/* --- MODO PANEL LATERAL COLAPSADO --- *\/\n#calcfab-spa-container.collapsed {\n    grid-template-columns: 60px 1fr !important;\n}\n#calcfab-spa-container.collapsed .hide-on-collapse {\n    display: none !important;\n}\n#calcfab-spa-container.collapsed .sidebar-top-section {\n    padding: 10px 5px !important;\n}\n#calcfab-spa-container.collapsed .sidebar-top-buttons {\n    flex-direction: column !important;\n    align-items: center !important;\n}\n#calcfab-spa-container.collapsed .sidebar-top-buttons button {\n    width: 35px !important;\n    margin-left: 0 !important;\n}\n#calcfab-spa-container.collapsed .calcfab-sidebar-header {\n    padding: 10px 5px !important;\n    justify-content: center !important;\n}\n#calcfab-spa-container.collapsed .calcfab-flujo-item {\n    padding: 15px 0 !important;\n    text-align: center !important;\n}\n#calcfab-spa-container.collapsed .sidebar-bottom-bar {\n    flex-direction: column !important;\n    padding: 15px 5px !important;\n    gap: 15px !important;\n}\n.flujo-number { display: none; }\n#calcfab-spa-container.collapsed .flujo-number { \n    display: flex; \n    justify-content: center;\n    align-items: center;\n    font-weight: bold; \n    font-size: 1.1em; \n    background: #34495e; \n    border-radius: 50%; \n    width: 30px; \n    height: 30px; \n    margin: 0 auto; \n}\n#calcfab-spa-container.collapsed .calcfab-flujo-item.active .flujo-number {\n    background: #fff;\n    color: #3498db;\n}\n#calcfab-spa-container.collapsed #btn-toggle-sidebar {\n    margin: auto !important;\n}\n#calcfab-spa-container.collapsed #btn-manual {\n    margin: auto !important;\n}\n\n#calcfab-spa-container:fullscreen,\n#calcfab-spa-container:-webkit-full-screen,\n#calcfab-spa-container:-moz-full-screen {\n    width: 100vw !important;\n    max-width: 100vw !important;\n    height: 100vh !important;\n    margin: 0 !important;\n    left: 0 !important;\n    border: none !important;\n    background: #f4f6f9;\n}\n\n@media (max-width: 992px) {\n    #calcfab-spa-container {\n        \/* Cambiamos el grid a una sola columna apilada *\/\n        grid-template-columns: 1fr;\n        grid-template-rows: auto auto 400px auto; \/* Flujos, Cabecera, Lienzo, Panel Inferior *\/\n        height: auto; \/* Permitimos que la p\u00e1gina haga scroll vertical natural *\/\n    }\n\n    .calcfab-sidebar {\n        grid-column: 1;\n        grid-row: 1; \/* Pasa a la parte superior *\/\n    }\n\n    .calcfab-canvas-header {\n        grid-column: 1;\n        grid-row: 2;\n    }\n\n    \/* .calcfab-canvas {\n        grid-column: 1;\n        grid-row: 3;\n    } *\/\n\n    .calcfab-bottom-area {\n        grid-column: 1;\n        grid-row: 4;\n        flex-direction: column; \/* Apilamos los detalles y el panel maestro uno debajo del otro *\/\n    }\n\n    .calcfab-process-details {\n        border-right: none;\n        border-bottom: 1px solid #eee;\n        padding-top: 5px;\n    }\n\n    .calcfab-master-editor {\n        width: 100%; \/* El panel derecho ahora ocupa todo el ancho inferior *\/\n    }\n\n}\n\n<\/style>\n\n<div id=\"calcfab-auth-container\" style=\"display:none; max-width: 450px; margin: 40px auto; font-family: sans-serif; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);\">\n        \n    <div id=\"calcfab-vista-login\">\n        <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Iniciar Sesi\u00f3n<\/h2>\n        <form id=\"calcfab-form-login\">\n            <div style=\"margin-bottom: 15px;\">\n                <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold;\">Email<\/label>\n                <input type=\"email\" id=\"login-email\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n            <\/div>\n            <div style=\"margin-bottom: 20px;\">\n                <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold;\">Contrase\u00f1a<\/label>\n                <input type=\"password\" id=\"login-password\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n            <\/div>\n            <div style=\"text-align: right; margin-bottom: 20px;\">\n                <a href=\"#\" id=\"toggle-to-recuperar\" style=\"color:#7f8c8d; font-size: 0.9em; text-decoration:none;\">\u00bfHas perdido tu contrase\u00f1a?<\/a>\n            <\/div>\n            <div id=\"login-error\" style=\"color:#e74c3c; margin-bottom:15px; text-align:center; display:none; background:#fadbd8; padding:10px; border-radius:4px;\"><\/div>\n            \n            <button type=\"submit\" style=\"width:100%; padding:12px; background:#3498db; color:white; border:none; border-radius:4px; font-weight:bold; cursor:pointer; font-size:1em;\">Entrar al Simulador<\/button>\n        <\/form>\n        <div style=\"text-align:center; margin-top:20px; border-top:1px solid #ecf0f1; padding-top:15px;\">\n            <p style=\"color:#7f8c8d; margin:0;\">\u00bfNo tienes cuenta? <a href=\"#\" id=\"toggle-to-registro\" style=\"color:#3498db; font-weight:bold; text-decoration:none;\">Reg\u00edstrate aqu\u00ed<\/a><\/p>\n        <\/div>\n    <\/div>\n\n    <div id=\"calcfab-vista-registro\" style=\"display:none;\">\n        <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Crear Cuenta<\/h2>\n        <form id=\"calcfab-form-registro\">\n            <div style=\"display:flex; gap:10px; margin-bottom:15px;\">\n                <div style=\"flex:1;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Nombre<\/label>\n                    <input type=\"text\" id=\"reg-nombre\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                <\/div>\n                <div style=\"flex:1;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Empresa<\/label>\n                    <input type=\"text\" id=\"reg-empresa\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                <\/div>\n            <\/div>\n            <div style=\"margin-bottom: 15px;\">\n                <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Tel\u00e9fono<\/label>\n                <input type=\"tel\" id=\"reg-telefono\" style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n            <\/div>\n            <div style=\"margin-bottom: 15px;\">\n                <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Email<\/label>\n                <input type=\"email\" id=\"reg-email\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n            <\/div>\n            <div style=\"display:flex; gap:10px; margin-bottom:20px;\">\n                <div style=\"flex:1;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Contrase\u00f1a<\/label>\n                    <input type=\"password\" id=\"reg-password\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                <\/div>\n                <div style=\"flex:1;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Repetir<\/label>\n                    <input type=\"password\" id=\"reg-password-repeat\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                <\/div>\n            <\/div>\n\n            <div id=\"grupo-codigo-spa\" style=\"display:none; margin-bottom:20px; background:#e8f8f5; padding:15px; border-radius:4px; border-left:4px solid #1abc9c;\">\n                <label style=\"display:block; margin-bottom:5px; color:#16a085; font-weight:bold;\">C\u00f3digo de Verificaci\u00f3n (Email)<\/label>\n                <input type=\"text\" id=\"reg-codigo\" placeholder=\"Ej: 123456\" style=\"width:100%; padding:10px; border:1px solid #1abc9c; border-radius:4px; box-sizing:border-box; text-align:center; font-size:1.2em; letter-spacing:2px;\">\n                <small style=\"color:#7f8c8d; display:block; margin-top:5px; text-align:center;\">Revisa tu bandeja de entrada o spam.<\/small>\n            <\/div>\n            \n            <div id=\"reg-error\" style=\"color:#e74c3c; margin-bottom:15px; text-align:center; display:none; background:#fadbd8; padding:10px; border-radius:4px;\"><\/div>\n            \n            <button type=\"submit\" id=\"btn-submit-reg\" style=\"width:100%; padding:12px; background:#2ecc71; color:white; border:none; border-radius:4px; font-weight:bold; cursor:pointer; font-size:1em;\">Enviar C\u00f3digo al Email<\/button>\n        <\/form>\n        <div style=\"text-align:center; margin-top:20px; border-top:1px solid #ecf0f1; padding-top:15px;\">\n            <p style=\"color:#7f8c8d; margin:0;\">\u00bfYa tienes cuenta? <a href=\"#\" id=\"toggle-to-login\" style=\"color:#3498db; font-weight:bold; text-decoration:none;\">Inicia sesi\u00f3n<\/a><\/p>\n        <\/div>\n    <\/div>\n\n    <div id=\"calcfab-vista-recuperar\" style=\"display:none;\">\n        <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Recuperar Contrase\u00f1a<\/h2>\n        <form id=\"calcfab-form-recuperar\">\n            <div style=\"margin-bottom: 15px;\">\n                <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold;\">Introduce tu Email<\/label>\n                <input type=\"email\" id=\"rec-email\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n            <\/div>\n            \n            <div id=\"grupo-recuperar-final\" style=\"display:none; background:#f4f6f7; padding:15px; border-radius:4px; margin-bottom:15px; border-top:3px solid #3498db;\">\n                <div style=\"margin-bottom: 10px;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">C\u00f3digo de 6 d\u00edgitos enviado<\/label>\n                    <input type=\"text\" id=\"rec-codigo\" placeholder=\"123456\" style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; text-align:center; font-size:1.1em; letter-spacing:2px;\">\n                <\/div>\n                <div>\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold; font-size:0.9em;\">Nueva Contrase\u00f1a<\/label>\n                    <input type=\"password\" id=\"rec-password\" style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px;\">\n                <\/div>\n            <\/div>\n\n            <div id=\"rec-error\" style=\"color:#e74c3c; margin-bottom:15px; text-align:center; display:none; background:#fadbd8; padding:10px; border-radius:4px;\"><\/div>\n            <div id=\"rec-success\" style=\"color:#27ae60; margin-bottom:15px; text-align:center; display:none; background:#d4efdf; padding:10px; border-radius:4px;\"><\/div>\n\n            <button type=\"submit\" id=\"btn-submit-rec\" style=\"width:100%; padding:12px; background:#e67e22; color:white; border:none; border-radius:4px; font-weight:bold; cursor:pointer; font-size:1em;\">Enviar C\u00f3digo de Recuperaci\u00f3n<\/button>\n        <\/form>\n        <div style=\"text-align:center; margin-top:20px; border-top:1px solid #ecf0f1; padding-top:15px;\">\n            <p style=\"color:#7f8c8d; margin:0;\"><a href=\"#\" id=\"recuperar-back-to-login\" style=\"color:#3498db; font-weight:bold; text-decoration:none;\">Volver a Iniciar Sesi\u00f3n<\/a><\/p>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n<div id=\"calcfab-spa-container\" style=\"display:none;\">\n    \n    <div class=\"calcfab-sidebar\">\n        \n        <div class=\"sidebar-top-section\" style=\"padding: 15px; background: #1a252f; border-bottom: 1px solid #000;\">\n            <div class=\"sidebar-top-buttons\" style=\"display:flex; gap:5px;\">\n                <label class=\"hide-on-collapse\" style=\"color:#95a5a6; font-size:0.8em; text-transform:uppercase; margin-bottom:5px; display:block; margin-right:auto\">Escenario Activo<\/label>\n                <button type=\"button\" id=\"btn-cerrar-sesion\" style=\"background: #34495e; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-left: 10px; margin-bottom: 5px\" title=\"Cerrar Sesi\u00f3n\">\u2716\ufe0f<\/button>\n            <\/div>\n            <select id=\"select-escenario\"class=\"hide-on-collapse\" style=\"width:100%; padding:8px; background:#2c3e50; color:white; border:1px solid #34495e; border-radius:4px; cursor:pointer;\">\n                <option value=\"\">Cargando escenarios...<\/option>\n            <\/select>\n\n            <div class=\"sidebar-top-buttons\" style=\"display:flex; gap:5px; margin-top:5px\">\n                <button id=\"btn-guardar-escenario\" style=\"flex:1; background:#f39c12; color:white; border:none; padding:8px; border-radius:4px; cursor:pointer; font-size:0.9em;\" title=\"Evita que se borre autom\u00e1ticamente\">\ud83d\udcbe<\/button>\n                <button id=\"btn-modo-calculo\" style=\"flex:1; background:#9b59b6; color:white; border:none; padding:8px; border-radius:4px; cursor:pointer; font-size:0.9em; font-weight:bold;\" title=\"Calcular el escenario\">\ud83d\udcca<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"calcfab-sidebar-header\">\n            <h3 class=\"hide-on-collapse\" style=\"margin:0; color:white; font-size:1.1em; margin-right: auto\">Flujos F\u00edsicos<\/h3>\n            <div class=\"sidebar-top-buttons\" style=\"display:flex; align-items:center; gap:5px; margin-left:auto\">\n                <button class=\"calcfab-btn-icon\" id=\"btn-add-flujo\" title=\"A\u00f1adir Flujo\" style=\"color:white; font-size:1.2em;\">+<\/button>\n                <button class=\"calcfab-btn-icon hide-on-collapse\" id=\"btn-del-flujo\" title=\"Borrar Flujo\" style=\"display:none; color:#e74c3c; font-size:1.2em;\">\ud83d\uddd1\ufe0f<\/button>\n            <\/div>\n        <\/div>\n        <div id=\"lista-flujos-container\" style=\"overflow-y: auto; flex:1;\">\n            <!-- <div class=\"calcfab-flujo-item active\">Flujo Producto A<\/div>\n            <div class=\"calcfab-flujo-item\">Flujo Producto B<\/div> -->\n        <\/div>\n        <div class=\"sidebar-bottom-bar\" style=\"padding: 15px; background: #1a252f; border-top: 1px solid #000; display: flex; justify-content: space-between; align-items: center; margin-top: auto;\">\n            <a href=\"https:\/\/www.claridia.com\/web\/optifabric\/manual_usuario.html\" target=\"_blank\" id=\"btn-manual\" style=\"text-decoration:none; font-size:1.3em; margin-right:auto\" title=\"Abrir Manual de Instrucciones\">\ud83d\udcd6<\/a>\n            <button  class=\"calcfab-btn-icon\" type=\"button\" id=\"btn-fullscreen\" style=\"cursor: pointer; background: #34495e; color: white; border: none; padding: 8px 12px; border-radius: 4px; font-weight: bold; height: fit-content;\" title=\"Pantalla Completa\">\ud83d\udd32<\/button>\n            <button id=\"btn-toggle-sidebar\" style=\"background: none; border: none; cursor: pointer; font-size: 1.3em; padding: 0; margin-left:auto\" title=\"Ocultar Panel Lateral\">\u25c0\ufe0f<\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"calcfab-canvas-header\" style=\"justify-content: space-between;\">\n        <div style=\"display: flex; align-items: center; gap: 5px; margin-right: auto\">\n            <button type=\"button\" id=\"btn-toggle-descripcion\" style=\"background: none; border: none; cursor: pointer; color: #3498db; font-size: 1em; \" title=\"Ver\/Editar Descripci\u00f3n\">\ud83d\udcdd<\/button>\n            <button type=\"button\" id=\"btn-editar-escenario\" style=\"background: none; border: none; cursor: pointer; color: #7f8c8d;\" title=\"Editar Nombre\">\u270f\ufe0f<\/button>\n            <h2 id=\"titulo-flujo-activo\" style=\"margin: 0; color: #2c3e50; font-size: 1.8em;\" title=\"\">Escenario...<\/h2>\n            <input type=\"text\" id=\"input-editar-escenario\" style=\"display: none; font-size: 1.8em; font-weight: bold; border: 1px dashed #3498db; padding: 2px 10px; color: #2c3e50; border-radius: 4px; outline: none; width: 300px;\">\n        <\/div>\n        <div style=\"display: flex; gap: 10px; margin-left: auto\">\n            <button type=\"button\" id=\"btn-exportar-excel\" style=\"cursor: pointer; background: #27ae60; color: white; border: none; padding: 8px 12px; border-radius: 4px; font-weight: bold; height: fit-content;\" title=\"Exportar Vista Actual a Excel\">\ud83d\udcd7<\/button>\n            <button type=\"button\" id=\"btn-exportar-pdf\" style=\"cursor: pointer; background: #e74c3c; color: white; border: none; padding: 8px 12px; border-radius: 4px; font-weight: bold; height: fit-content;\" title=\"Generar PDF de la Vista Actual\">\ud83d\udcc4<\/button>\n            <button id=\"btn-toggle-vista\" style=\"display:none; cursor:pointer; background:#2980b9; color:white; border:none; padding:8px 15px; border-radius:4px; font-weight:bold; height:fit-content;\" title=\"Ver Ocupaci\u00f3n por M\u00e1quinas\">\ud83d\ude9c<\/button>\n            <button id=\"btn-ajustes-panel\" style=\"cursor:pointer; margin-left:15px; width: 35px\" title=\"Configuraci\u00f3n\">\u2699\ufe0f<\/button>\n            <div id=\"btns-zoom\">\n                <button id=\"btn-zoom-out\" style=\"cursor:pointer;\" title=\"Reducir\">Z-<\/button>\n                <button id=\"btn-zoom-in\" style=\"cursor:pointer;\" title=\"Ampliar\">Z+<\/button>\n                <span id=\"label-zoom\" style=\"align-self:center; font-size:0.9em;\">100%<\/span>\n            <\/div>\n            <button type=\"button\" id=\"btn-nuevo-escenario\" style=\"background: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 1.1em; width: 35px\" title=\"Crear Nuevo Escenario Vac\u00edo\">\u2795<\/button>\n            <button type=\"button\" id=\"btn-duplicar-escenario\" style=\"background: #f39c12; color: white; border: none; padding: 0; border-radius: 4px; cursor: pointer; font-weight: bold;width: 35px\" title=\"Duplicar Escenario\">\ud83d\udccb<\/button>\n            <button type=\"button\" id=\"btn-borrar-escenario\" style=\"background: #e74c3c; color: white; border: none; padding: 0; border-radius: 4px; cursor: pointer; font-weight: bold; width: 35px\" title=\"Borrar Escenario\">\ud83d\uddd1\ufe0f<\/button>\n        <\/div>\n    <\/div>\n\n\n    <div class=\"calcfab-canvas\" id=\"canvas-container\">\n        \n        <div id=\"panel-descripcion-escenario\" style=\"display: none; width: 100%; background: #fff; border: 1px solid #bdc3c7; border-left: 4px solid #3498db; border-radius: 4px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex-shrink: 0; box-sizing: border-box;\">\n            <label style=\"font-weight: bold; color: #2c3e50; display: block; margin-bottom: 8px;\">Descripci\u00f3n y Notas del Escenario<\/label>\n            <textarea id=\"textarea-desc-escenario\" style=\"width: 100%; height: 60px; border: 1px solid #ecf0f1; border-radius: 4px; padding: 10px; font-family: inherit; resize: vertical; background: #fcfcfc;\" placeholder=\"A\u00f1ade notas o descripciones sobre este escenario...\"><\/textarea>\n        <\/div>\n\n        <div class=\"calcfab-proceso-track\" id=\"track-procesos\">\n            <button class=\"calcfab-proceso-nodo\" style=\"border: 2px dashed #bdc3c7; background: transparent; color: #7f8c8d; font-size: 1.5em;\" id=\"btn-crear-primer-proceso\">+<\/button>\n        <\/div>\n\n        <div id=\"contenedor-yamazumi\" style=\"display:none; width: 100%; flex: 1; flex-direction: column; border-top: 2px dashed #bdc3c7; \">\n            <h3 style=\"color:#2c3e50; margin-top:0; display:none;\">Gr\u00e1fico Yamazumi<\/h3>\n            <div id=\"yamazumi-area\" style=\"flex: 1; width:100%; background:#ecf0f1; border-radius:8px; padding:15px; display:flex; align-items:flex-end; gap:15px; overflow-x:auto;\">\n                <p style=\"color:#7f8c8d; margin:auto;\">El gr\u00e1fico se generar\u00e1 aqu\u00ed...<\/p>\n            <\/div>\n        <\/div>\n\n        <div id=\"contenedor-vista-maquinas\" style=\"display:none; width: 100%; flex-direction: column; gap: 15px; padding: 20px; box-sizing: border-box;\"><\/div>\n\n    <\/div>\n\n\n    <div class=\"calcfab-bottom-area\">\n        \n        <div class=\"calcfab-resizer-inferior\" id=\"calcfab-resizer\"><\/div>\n\n        <div class=\"calcfab-process-details\" id=\"panel-detalles-proceso\" style=\"opacity: 0.5; pointer-events: none;\">\n            <h3 id=\"titulo-detalles-inferior\">Detalles<\/h3>\n            <p style=\"color:#7f8c8d; font-style:italic;\" id=\"texto-ayuda-detalles\">Selecciona un flujo o un proceso para ver sus datos.<\/p>\n            \n            <div id=\"formulario-flujo\" style=\"display: none;\">\n                <div style=\"display: flex; gap: 20px;\">\n                    <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                        <label>Producto<\/label>\n                        <div style=\"display:flex; gap:5px;\">\n                            <button class=\"calcfab-btn-icon\" id=\"btn-editar-producto\" title=\"Editar Producto\">\u270f\ufe0f<\/button>\n                            <select id=\"select-producto\"><\/select>\n                            <button class=\"calcfab-btn-icon\" id=\"btn-nuevo-producto\" title=\"Crear Producto\" style=\"color:#2ecc71;\">\u2795<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                        <label>Unidades por Lote<\/label>\n                        <input type=\"number\" id=\"input-flujo-lote\" min=\"1\" value=\"1\">\n                    <\/div>\n                <\/div>\n\n                <div style=\"display: flex; gap: 20px; margin-top:10px;\">\n                    <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                        <label>Tipo de Contenedor<\/label>\n                        <div style=\"display:flex; gap:5px;\">\n                            <button class=\"calcfab-btn-icon\" id=\"btn-editar-carro\" title=\"Editar Tipo Contenedor\">\u270f\ufe0f<\/button>\n                            <select id=\"select-tipo-carro\"><\/select>\n                            <button class=\"calcfab-btn-icon\" id=\"btn-nuevo-carro\" title=\"Crear Contenedor\" style=\"color:#2ecc71;\">\u2795<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                        <label>Unidades\/Contenedor<\/label>\n                        <input type=\"number\" id=\"input-flujo-carro\" min=\"1\" value=\"1\">\n                    <\/div>\n                <\/div>\n                \n                <div id=\"flujo-botones-creacion\" style=\"display: none; gap: 10px; margin-top: 15px;\">\n                    <button type=\"button\" id=\"btn-guardar-flujo-nuevo\" style=\"background:#2ecc71; color:white; border:none; padding:8px 15px; border-radius:4px; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-flujo-nuevo\" style=\"background:#e74c3c; color:white; border:none; padding:8px 15px; border-radius:4px; cursor:pointer;\">Cancelar<\/button>\n                <\/div>\n            <\/div>\n\n            <div id=\"formulario-proceso\" style=\"display: none;\">\n                <div style=\"display: flex; gap: 20px;\">\n                    <div class=\"calcfab-form-group\" style=\"flex:1; flex-basis:15%;margin-bottom:0px;padding-bottom:0px;\">\n                        <label>M\u00e1quina<\/label>\n                        <div style=\"display:flex; gap:5px;\">\n                            <button class=\"calcfab-btn-icon\" id=\"btn-editar-maquina\" title=\"Editar M\u00e1quina\">\u270f\ufe0f<\/button>    \n                            <select id=\"selectMaquina\"><\/select>\n                            <button class=\"calcfab-btn-icon\" id=\"btn-nueva-maquina\" title=\"Crear M\u00e1quina\" style=\"color:#2ecc71;\">\u2795<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"calcfab-form-group\" style=\"flex:1; flex-basis:15%;margin-bottom:0px;padding-bottom:0px;\">\n                        <label>Tarea<\/label>\n                        <div style=\"display:flex; gap:5px;\">\n                            <button class=\"calcfab-btn-icon\" id=\"btn-editar-tarea\" title=\"Editar Tarea\">\u270f\ufe0f<\/button>\n                            <select id=\"selectTarea\"><\/select>\n                            <button class=\"calcfab-btn-icon\" id=\"btn-nueva-tarea\" title=\"Crear Tarea\" style=\"color:#2ecc71;\">\u2795<\/button>\n                        <\/div>\n                    <\/div>\n                    <div class=\"calcfab-form-group\" style=\"flex:1;margin-bottom:0px;padding-bottom:0px;\">\n                        <label>\n                            Coste\/Hora (\u20ac\/h)\n                            <button type=\"button\" id=\"btn-copiar-coste-maquina\" title=\"Copiar coste por defecto de la m\u00e1quina\" style=\"background:none; border:none; cursor:pointer; color:#3498db; font-size:1.1em; padding:0; margin-left:5px;\">\u2b07\ufe0f<\/button>\n                        <\/label>\n                        <input type=\"number\" id=\"input-proceso-coste\" step=\"0.1\">.\n                    <\/div>\n                <\/div>\n\n                <div style=\"display: flex; gap: 20px;\">\n                    <div class=\"calcfab-form-group\" style=\"flex:1;margin-bottom:0px;padding-bottom:0px;\">\n                        <div>\n                            <label>Tiempo de Proceso (s)<\/label>\n                            <input type=\"text\" id=\"input-tiempo-proceso\" placeholder=\"Ej: 1.5 o 12*60\">\n                        <\/div>\n                        <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                            <select id=\"select-unidad-proceso\"><\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"calcfab-form-group\" style=\"flex:1;margin-bottom:0px;padding-bottom:0px;\">\n                        <div>\n                            <label>Tiempo de Cambio (s)<\/label>\n                            <input type=\"text\" id=\"input-tiempo-cambio\" placeholder=\"Ej: 1.5 o 12*60\">\n                        <\/div>\n                        <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                            <select id=\"select-unidad-proceso-cambio\"><\/select>\n                        <\/div>                    \n                    <\/div>\n                    <div class=\"calcfab-form-group\" id=\"grupo-cambio-out\" style=\"display: none; flex:1;margin-bottom:0px;padding-bottom:0px;\">\n                        <div>\n                            <label>Tiempo Transformaci\u00f3n<\/label>\n                            <input type=\"text\" id=\"input-tiempo-cambio-out\" step=\"any\" placeholder=\"Ej: 1.5 o 12*60\">\n                        <\/div>\n                        <div class=\"calcfab-form-group\" style=\"flex:1;\">\n                            <select id=\"select-unidad-cambio-out\"><\/select>\n                        <\/div>                    \n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"calcfab-process-details\" id=\"panel-resultados-inferior\" style=\"display:none; background:#f8f9f9;\">\n            <div id=\"res-vista-flujo\" style=\"display: flex; gap: 20px; text-align: center;flex-direction:row\">\n                <div style=\"display: flex; flex-direction:column;\">\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div><b>Tiempo Takt:<\/b> <br><span id=\"resultado-takt\" style=\"color:#2980b9; font-size:1.2em;\">-<\/span><\/div>\n                        <div><b>Tiempo Ciclo Total:<\/b> <br><span id=\"resultado-ciclo\" style=\"color:#e74c3c; font-size:1.2em;\">-<\/span><\/div>\n                    <\/div>\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div><b>OEE Total:<\/b> <br><span id=\"resultado-oee\" style=\"color:#27ae60; font-size:1.2em;\">-<\/span><\/div>\n                        <div><b>Cobertura Stock:<\/b> <br><span id=\"resultado-cobertura\" style=\"color:#f39c12; font-size:1.2em;\">-<\/span><\/div>\n                    <\/div>\n                <\/div>\n                <div style=\"display: flex; flex-direction:column;\">\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div style=\"border-left: 1px solid #bdc3c7; padding-left: 20px;\"><b>Lead Time:<\/b> <br><span id=\"resultado-lead\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                        <div><b>WIP Estimado:<\/b> <br><span id=\"resultado-wip\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                    <\/div>\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div><b>PCE (Eficiencia):<\/b> <br><span id=\"resultado-pce\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                        <div><b>Coste\/Pieza:<\/b> <br><span id=\"resultado-coste\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                    <\/div>\n                <\/div>\n                <div style=\"display: flex; flex-direction:column;\">\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div style=\"border-left: 1px solid #bdc3c7; padding-left: 20px;\"><b>Personal:<\/b> <br><span id=\"resultado-opes\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                        <div><b>Producci\u00f3n L\u00ednea:<\/b> <br><span id=\"resultado-prlin\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                    <\/div>\n                    <div style=\"display: flex;gap:20px; flex: 1;\">\n                        <div><b>Productividad Equipo:<\/b> <br><span id=\"resultado-prope\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                        <div><b>Ocupaci\u00f3n Promedio (M.O):<\/b> <br><span id=\"resultado-ocope\" style=\"font-size:1.1em;\">-<\/span><\/div>\n                    <\/div>\n                <\/div>\n                <div style=\"display: flex; flex-direction:column;\">\n                    <!-- <div id=\"res-vista-proceso\" style=\"display:none; flex-wrap: wrap; gap:15px; flex-direction:column;\">\n                        <div id=\"res-proc-titulo\" style=\"font-weight:bold; color:#d35400;\">Proceso seleccionado<\/div>\n                        <div><b>Tiempo de Ciclo:<\/b> <span id=\"res-proc-tcy\">0<\/span><\/div>\n                        <div><b>Tiempo de Proceso:<\/b> <span id=\"res-proc-tcy_p\">0<\/span><\/div>\n                        <div><b>Tiempo de Cambio:<\/b> <span id=\"res-proc-tcy_c\">0<\/span><\/div>\n                        <div><b>Tiempo Transformaci\u00f3n:<\/b> <span id=\"res-proc-tcy_t\">0<\/span><\/div>\n                        <div><b>Recursos Usados:<\/b> <span id=\"res-proc-rec\">0<\/span><\/div>\n                        <div><b>Recursos Necesarios:<\/b> <span id=\"res-proc-rec_nec\">0<\/span><\/div>\n                        <div><b>Coste aportado:<\/b> <span id=\"res-proc-coste\">0<\/span><\/div>\n                        <div id=\"res-proc-cuello\" style=\"display:none; color:white; background:#e74c3c; padding:2px 6px; border-radius:3px;\">\ud83d\udd25 CUELLO DE BOTELLA<\/div>\n                    <\/div> -->\n                    <div id=\"res-vista-proceso\" style=\"display:none; flex-direction:column; background:#fff; border:1px solid #ddd; border-radius:6px; padding:15px; min-width: 250px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);\">\n                        <div id=\"res-proc-titulo\" style=\"font-size:1.1em; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:5px; text-align:left;\"><\/div>\n                        <div id=\"res-proc-datos\" style=\"display:grid; grid-template-columns: 1fr 1fr; gap:x 15px; row-gap: 8px; font-size:0.85em; text-align:left; color:#34495e;\"><\/div>\n                        <div id=\"res-proc-cuello\" style=\"display:none; margin-top:12px; text-align:center; color:white; background:#e74c3c; padding:4px; border-radius:3px; font-size:0.85em; font-weight:bold;\">\ud83d\udd25 CUELLO DE BOTELLA<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"calcfab-master-editor\" id=\"panel-edicion-maestra\">\n            <!-- <h4 style=\"margin-top:0; border-bottom:1px solid #ddd; padding-bottom:10px; display:flex; justify-content:space-between;\">\n                <span id=\"titulo-panel-maestro\">Editar Registro<\/span>\n                <button class=\"calcfab-btn-icon\" id=\"btn-cerrar-maestro\" style=\"color:#e74c3c;\">\u2716<\/button>\n            <\/h4> -->\n            \n            <div id=\"form-maquina-maestro\" class=\"panel-formulario-maestro\" style=\"display:none;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center; position:sticky; top:-20px; background:#f8f9fa; z-index:100; padding:20px 0 10px 0; border-bottom:1px solid #ddd; margin-top:-20px; margin-bottom:15px;\">\n                    <h3 id=\"titulo-form-maquina\" style=\"margin:0; color:#2c3e50; margin-right:auto\">Editar M\u00e1quina<\/h3>\n                    <div style=\"display:flex; gap:12px; margin-left:auto\">\n                        <button type=\"button\" id=\"btn-guardar-maquina\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em;\" title=\"Guardar\">\ud83d\udcbe<\/button>\n                        <button type=\"button\" id=\"btn-borrar-maquina\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em; color:#e74c3c;\" title=\"Borrar M\u00e1quina\">\ud83d\uddd1\ufe0f<\/button>\n                        <button type=\"button\" id=\"btn-cancelar-maquina\" style=\"background:none; border:none; cursor:pointer; font-size:1.2em; color:#7f8c8d;\" title=\"Cerrar Panel\">\u2716\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Nombre de la M\u00e1quina<\/label>\n                    <input type=\"text\" id=\"master-maquina-nombre\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Tipo de Recurso<\/label>\n                    <div style=\"display: flex; gap: 5px; align-items: center;\">\n                        <button id=\"btn-editar-recurso\" title=\"Editar recurso seleccionado\">\u270f\ufe0f<\/button>\n                        <select id=\"master-maquina-recurso\" name=\"tipo_recurso_id\" class=\"form-control\" style=\"flex: 1;\"><\/select>\n                        <button type=\"button\" id=\"btn-nuevo-recurso\" class=\"button\" title=\"Crear nuevo recurso\" style=\"padding: 0 1px; font-weight: bold; color: #2271b1; border-color: #2271b1; min-width:0; width: 35px; margin: 0;\">\u2795<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Capacidad de un recurso<\/label>\n                    <input type=\"number\" id=\"master-maquina-capacidad\" min=\"1\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Medida de la capacidad<\/label>\n                    <select id=\"master-maquina-medida\">\n                        <option value=\"carros\" selected>Carros<\/option>\n                        <option value=\"unidades\">Unidades<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Multiplicador Recurso<\/label>\n                    <input type=\"number\" step=\"0.1\" id=\"master-maquina-multiplicador\" min=\"0.1\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Coste\/Hora est\u00e1ndar<\/label>\n                    <input type=\"number\" id=\"master-maquina-coste-defecto\" step=\"0.1\" min=\"0\" value=\"0\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Rendimiento (%)<\/label>\n                    <input type=\"number\" id=\"master-maquina-rendimiento\" value=\"100\" min=\"1\" max=\"100\" step=\"0.1\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Rechazo\/Scrap (%)<\/label>\n                    <input type=\"number\" id=\"master-maquina-rechazo\" value=\"0\" min=\"0\" max=\"99\" step=\"0.1\">\n                <\/div>\n                <!-- <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\n                    <button type=\"button\" id=\"btn-guardar-maquina\" style=\"background:#2ecc71; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-borrar-maquina\" style=\"background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:8px; border-radius:4px; cursor:pointer;\" title=\"Borrar M\u00e1quina\">\ud83d\uddd1\ufe0f<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-maquina\" style=\"background:#95a5a6; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Cancelar<\/button>\n                <\/div> -->\n            <\/div>\n\n            <div id=\"form-tarea-maestro\" class=\"panel-formulario-maestro\" style=\"display:none;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center; position:sticky; top:-20px; background:#f8f9fa; z-index:100; padding:20px 0 10px 0; border-bottom:1px solid #ddd; margin-top:-20px; margin-bottom:15px;\">\n                    <h3 id=\"titulo-form-tarea\" style=\"margin:0; color:#2c3e50; margin-right:auto\">Editar Tarea<\/h3>\n                    <div style=\"display:flex; gap:12px; margin-left:auto\">\n                        <button type=\"button\" id=\"btn-guardar-tarea\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em;\" title=\"Guardar\">\ud83d\udcbe<\/button>\n                        <button type=\"button\" id=\"btn-borrar-tarea\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em; color:#e74c3c;\" title=\"Borrar Tarea\">\ud83d\uddd1\ufe0f<\/button>\n                        <button type=\"button\" id=\"btn-cancelar-tarea\" style=\"background:none; border:none; cursor:pointer; font-size:1.2em; color:#7f8c8d;\" title=\"Cerrar Panel\">\u2716\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Nombre de la Tarea<\/label>\n                    <input type=\"text\" id=\"master-tarea-nombre\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Tipo de Acci\u00f3n<\/label>\n                    <select id=\"master-tarea-accion\">\n                        <option value=\"transformacion\">Transformaci\u00f3n<\/option>\n                        <option value=\"operacion\">Operaci\u00f3n (SVAN)<\/option>\n                        <option value=\"inspeccion\">Inspecci\u00f3n<\/option>\n                        <option value=\"transporte\">Transporte<\/option>\n                        <option value=\"espera\" style=\"font-weight:bold; color:#e67e22;\">Espera<\/option>\n                        <option value=\"buffer\" style=\"font-weight:bold; color:#e67e22;\">Buffer<\/option>\n                    <\/select>\n                    <small style=\"color:#7f8c8d; display:block; margin-top:5px; font-size:12px\">Seleccionar 'Buffer\/Espera' dividir\u00e1 el c\u00e1lculo en varios tramos.<\/small>\n                <\/div>\n                <div id=\"grupo-tarea-carro-out\" style=\"display: none; margin-top: 15px; padding-top: 15px; border-top: 1px dashed #bdc3c7;\">\n                    <label style=\"display:block; margin-bottom:5px; color:#34495e; font-weight:bold;\">Carro de Salida<\/label>\n                    <select id=\"master-tarea-carro-out\" style=\"width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #bdc3c7;\"><\/select>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Tipo de Uso preferente<\/label>\n                    <select id=\"master-tarea-uso\">\n                        <option value=\"heredar\" selected>Heredar de la M\u00e1quina<\/option>\n                        <option value=\"sin limitacion\">Sin limitaci\u00f3n de capacidad<\/option>\n                        <option value=\"paralelo\">Paralelo (Todos a la vez)<\/option>\n                        <option value=\"serie\">Serie (Saturaci\u00f3n de recursos uno a uno)<\/option>\n                        <option value=\"manual\">Manual (Mano de obra)<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Multiplicador M\u00e1ximo<\/label>\n                    <input type=\"number\" id=\"master-tarea-mult-max\" min=\"1\" placeholder=\"Ej: 3 (Opcional)\">\n                <\/div>\n\n                <!-- <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\n                    <button type=\"button\" id=\"btn-guardar-tarea\" style=\"background:#2ecc71; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-borrar-tarea\" style=\"background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:8px; border-radius:4px; cursor:pointer;\" title=\"Borrar Tarea\">\ud83d\uddd1\ufe0f<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-tarea\" style=\"background:#95a5a6; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Cancelar<\/button>\n                <\/div> -->\n            <\/div>\n\n            <div id=\"form-producto-maestro\" class=\"panel-formulario-maestro\" style=\"display:none;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center; position:sticky; top:-20px; background:#f8f9fa; z-index:100; padding:20px 0 10px 0; border-bottom:1px solid #ddd; margin-top:-20px; margin-bottom:15px;\">\n                    <h3 id=\"titulo-form-producto\" style=\"margin:0; color:#2c3e50; margin-right:auto\">Editar Producto<\/h3>\n                    <div style=\"display:flex; gap:12px; margin-left:auto\">\n                        <button type=\"button\" id=\"btn-guardar-producto\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em;\" title=\"Guardar\">\ud83d\udcbe<\/button>\n                        <button type=\"button\" id=\"btn-borrar-producto\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em; color:#e74c3c;\" title=\"Borrar Producto\">\ud83d\uddd1\ufe0f<\/button>\n                        <button type=\"button\" id=\"btn-cancelar-producto\" style=\"background:none; border:none; cursor:pointer; font-size:1.2em; color:#7f8c8d;\" title=\"Cerrar Panel\">\u2716\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Nombre del Producto<\/label>\n                    <input type=\"text\" id=\"master-producto-nombre\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Necesidad Semanal<\/label>\n                    <input type=\"number\" id=\"master-producto-necesidad\" min=\"0\" value=\"0\">\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Contenedor por Defecto<\/label>\n                    <select id=\"master-producto-carro-defecto\">\n                        <option value=\"\">Selecciona un contenedor<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"calcfab-form-group\" style=\"background:#f1f2f6; padding:10px; border-radius:4px; border-left:3px solid #3498db; margin-top:15px;\">\n                    <label>Unidades\/Contenedor<\/label>\n                    <small style=\"color:#7f8c8d; display:block; margin-bottom:5px;\" id=\"label-producto-carro-actual\">Para el contenedor seleccionado actualmente<\/small>\n                    <input type=\"number\" id=\"master-producto-unidades-carro\" min=\"0\" value=\"0\" disabled>\n                <\/div>\n                <!-- <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\n                    <button type=\"button\" id=\"btn-guardar-producto\" style=\"background:#2ecc71; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-borrar-producto\" style=\"background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:8px; border-radius:4px; cursor:pointer;\" title=\"Borrar Producto\">\ud83d\uddd1\ufe0f<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-producto\" style=\"background:#95a5a6; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Cancelar<\/button>\n                <\/div> -->\n            <\/div>\n\n            <div id=\"form-carro-maestro\" class=\"panel-formulario-maestro\" style=\"display:none;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center; position:sticky; top:-20px; background:#f8f9fa; z-index:100; padding:20px 0 10px 0; border-bottom:1px solid #ddd; margin-top:-20px; margin-bottom:15px;\">\n                    <h3 id=\"titulo-form-carro\" style=\"margin:0; color:#2c3e50; margin-right:auto\">Editar Contenedor<\/h3>\n                    <div style=\"display:flex; gap:12px; margin-left:auto\">\n                        <button type=\"button\" id=\"btn-guardar-carro\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em;\" title=\"Guardar\">\ud83d\udcbe<\/button>\n                        <button type=\"button\" id=\"btn-borrar-carro\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em; color:#e74c3c;\" title=\"Borrar Contenedor\">\ud83d\uddd1\ufe0f<\/button>\n                        <button type=\"button\" id=\"btn-cancelar-carro\" style=\"background:none; border:none; cursor:pointer; font-size:1.2em; color:#7f8c8d;\" title=\"Cerrar Panel\">\u2716\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Nombre del Contenedor<\/label>\n                    <input type=\"text\" id=\"master-carro-nombre\">\n                <\/div>\n                <!-- <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\n                    <button type=\"button\" id=\"btn-guardar-carro\" style=\"background:#2ecc71; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-borrar-carro\" style=\"background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:8px; border-radius:4px; cursor:pointer;\" title=\"Borrar Tipo Contenedor\">\ud83d\uddd1\ufe0f<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-carro\" style=\"background:#95a5a6; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Cancelar<\/button>\n                <\/div> -->\n            <\/div>\n\n            <div id=\"form-recurso-maestro\" class=\"panel-formulario-maestro\" style=\"display: none; border: 1px solid #ccd0d4; padding: 15px; margin-top: 15px; background: #f9f9f9;\">\n                <div style=\"display:flex; justify-content:space-between; align-items:center; position:sticky; top:-20px; background:#f9f9f9; z-index:100; padding:20px 0 10px 0; border-bottom:1px solid #ddd; margin-top:-20px; margin-bottom:15px;\">\n                    <h3 id=\"titulo-form-recurso\" style=\"margin:0; color:#2c3e50; margin-right:auto\">Editar Recurso<\/h3>\n                    <div style=\"display:flex; gap:12px; margin-left:auto\">\n                        <button type=\"button\" id=\"btn-guardar-recurso\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em;\" title=\"Guardar\">\ud83d\udcbe<\/button>\n                        <button type=\"button\" id=\"btn-borrar-recurso\" style=\"background:none; border:none; cursor:pointer; font-size:1.3em; color:#e74c3c;\" title=\"Borrar Recurso\">\ud83d\uddd1\ufe0f<\/button>\n                        <button type=\"button\" id=\"btn-cancelar-recurso\" style=\"background:none; border:none; cursor:pointer; font-size:1.2em; color:#7f8c8d;\" title=\"Cerrar Panel\">\u2716\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"form-group\" style=\"margin-bottom: 10px;\">\n                    <label>Nombre del Recurso<\/label>\n                    <input type=\"text\" id=\"master-recurso-nombre\" class=\"form-control\" placeholder=\"Ej: Amasadora, Horno...\" required>\n                <\/div>\n                <div class=\"form-group\" style=\"margin-bottom: 15px;\">\n                    <label>Tipo de Uso<\/label>\n                    <select id=\"master-recurso-uso\" class=\"form-control\">\n                        <option value=\"sin limitacion\" selected>Sin limitaci\u00f3n de capacidad<\/option>\n                        <option value=\"paralelo\">Paralelo (Todos a la vez)<\/option>\n                        <option value=\"serie\">Serie (Saturaci\u00f3n de recursos uno a uno)<\/option>\n                        <option value=\"manual\">Manual (Mano de obra)<\/option>\n                    <\/select>\n                    <small style=\"color: #666; display: block; margin-top: 5px;\">Define c\u00f3mo se comporta el c\u00e1lculo al a\u00f1adir multiplicadores.<\/small>\n                <\/div>\n                <!-- <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\n                    <button type=\"button\" id=\"btn-guardar-recurso\" style=\"background:#2ecc71; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Guardar<\/button>\n                    <button type=\"button\" id=\"btn-borrar-recurso\" style=\"background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:8px; border-radius:4px; cursor:pointer;\" title=\"Borrar Recurso\">\ud83d\uddd1\ufe0f<\/button>\n                    <button type=\"button\" id=\"btn-cancelar-recurso\" style=\"background:#95a5a6; color:white; border:none; padding:8px; border-radius:4px; flex:1; cursor:pointer;\">Cancelar<\/button>\n                <\/div> -->\n            <\/div>\n\n        <\/div>\n        \n        <div class=\"calcfab-process-details\" id=\"panel-ajustes-globales\" style=\"display: none; padding: 15px; background: rgb(236, 240, 241); border-bottom: 2px solid rgb(189, 195, 199);\">\n            <div style=\"display:flex; gap:30px; align-items: flex-start;\">\n                \n                <div style=\"flex:1; max-height: 180px; overflow-y: auto; padding-right: 10px;\">\n                    <h4 style=\"margin-top:0; color:#2c3e50;\"><img decoding=\"async\" draggable=\"false\" role=\"img\" class=\"emoji\" alt=\"\ud83d\udc64\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f464.svg\"> Generales<\/h4>\n                    <label><input type=\"checkbox\" id=\"ajuste-tema-oscuro\"> Modo Oscuro (Pr\u00f3ximamente)<\/label>\n                <\/div>\n                \n                <div style=\"flex:1; max-height: 180px; overflow-y: auto; padding-right: 10px;\">\n                    <h4 style=\"margin-top:0; color:#2c3e50;\"><img decoding=\"async\" draggable=\"false\" role=\"img\" class=\"emoji\" alt=\"\ud83c\udfed\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f3ed.svg\"> Escenario<\/h4>\n                    <div style=\"display: flex; gap: 20px\">\n                    <div><label>D\u00edas\/Semana: <input type=\"number\" id=\"ajuste-dias\" style=\"width:80px;\" value=\"5\" step=\"0.5\"><\/label><br><\/div>\n                    <div><label>Turnos\/D\u00eda: <input type=\"number\" id=\"ajuste-turnos\" style=\"width:80px;\" value=\"2\"><\/label><br><\/div>\n                    <\/div>\n                    <div style=\"display: flex; gap: 20px\">\n                    <div><label>Horas\/Turno: <input type=\"number\" id=\"ajuste-horas\" style=\"width:80px;\" value=\"8\" step=\"0.5\"><\/label><\/div>\n                    <div><label style=\"display: block;\">Moneda: <input type=\"text\" id=\"ajuste-moneda\" style=\"width:40px; text-align:center;\" value=\"\u20ac\" maxlength=\"3\"><\/label><br><\/div>\n                    <\/div>\n                    <div><label style=\"margin-top:10px; display:block; font-weight:bold; color:#d35400;\"><input type=\"checkbox\" id=\"ajuste-limitar-cuello\"> Acompasar l\u00ednea al cuello de botella<\/label><\/div>\n                    <button id=\"btn-recalcular-escenario\" style=\"margin-top:10px; width:100%; background:#2980b9; color:white; border:none; padding:6px; cursor:pointer; border-radius:3px;\">\ud83d\udd04 Recalcular<\/button>\n                    <label style=\"display:block; margin-bottom: 8px;\">Descripci\u00f3n:<textarea id=\"ajuste-descripcion\" style=\"width:100%; height: 50px; resize: vertical; margin-top:2px;\" placeholder=\"Notas sobre esta simulaci\u00f3n...\"><\/textarea><\/label>\n                <\/div>\n                \n                <div style=\"flex:1; max-height: 180px; overflow-y: auto; padding-right: 10px;\">\n                    <h4 style=\"margin-top:0; color:#2c3e50;\"><img decoding=\"async\" draggable=\"false\" role=\"img\" class=\"emoji\" alt=\"\ud83d\udc41\ufe0f\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/svg\/1f441.svg\"> Visual<\/h4>\n                    <label style=\"margin-top:5px; display:block;\"><input type=\"checkbox\" id=\"ajuste-guardar-zoom\"> Guardar Zoom al guardar<\/label>\n                    <span style=\"display: block;\">Yamazumi<\/span>\n                    <label><input type=\"checkbox\" id=\"ajuste-yama-esperas\"> Incluir esperas<\/label><br>\n                    <label><input type=\"checkbox\" id=\"ajuste-yama-maquina\"> Mostrar m\u00e1quina bajo barra<\/label><br>\n                    <label><input type=\"checkbox\" id=\"ajuste-yama-cadencia\"> Mostrar l\u00ednea de cadencia (Cuello)<\/label><br>\n                    <label><input type=\"checkbox\" id=\"ajuste-yama-vsm\"> Mostrar VSM y WIP bajo cajas<\/label><br>\n                    <label><input type=\"checkbox\" id=\"ajuste-yama-ocio\" checked> Mostrar ocio<\/label><br>\n                    <button id=\"btn-redibujar-yamazumi\" style=\"margin-top:20px; width:100%; background:#27ae60; color:white; border:none; padding:6px; cursor:pointer; border-radius:3px;\">\ud83c\udfa8 Redibujar Yamazumi<\/button>\n                <\/div>\n                \n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- <div id=\"modal-registro\" style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; align-items:center; justify-content:center;\">\n        <div style=\"background:white; padding:30px; border-radius:8px; width:400px; max-width:90%;\">\n            <h2 style=\"margin-top:0;\">Guarda tu progreso<\/h2>\n            <p style=\"color:#7f8c8d; font-size:0.9em;\">Crea una cuenta gratuita para guardar este escenario y acceder a \u00e9l m\u00e1s tarde.<\/p>\n            \n            <form id=\"form-registro-rapido\">\n                <div class=\"calcfab-form-group\"><label>Nombre<\/label><input type=\"text\" id=\"reg-nombre\" required><\/div>\n                <div class=\"calcfab-form-group\"><label>Empresa<\/label><input type=\"text\" id=\"reg-empresa\" required><\/div>\n                <div class=\"calcfab-form-group\"><label>Email<span style=\"color:#e74c3c;\">*<\/span><\/label><input type=\"email\" id=\"reg-email\" required><\/div>\n                <div class=\"calcfab-form-group\"><label>Tel\u00e9fono<\/label><input type=\"text\" id=\"reg-telefono\"><\/div>\n                <div class=\"calcfab-form-group\">\n                    <label>Contrase\u00f1a <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"reg-password\" required style=\"width: 100%; padding-right: 40px; box-sizing: border-box;\">\n                        <button type=\"button\" class=\"btn-toggle-pass\" data-target=\"reg-password\" style=\"position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #7f8c8d; font-size: 1.2em;\">\ud83d\udc41\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"calcfab-form-group\">\n                    <label>Repetir Contrase\u00f1a <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                    <div style=\"position: relative;\">\n                        <input type=\"password\" id=\"reg-password-repeat\" required style=\"width: 100%; padding-right: 40px; box-sizing: border-box;\">\n                        <button type=\"button\" class=\"btn-toggle-pass\" data-target=\"reg-password-repeat\" style=\"position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #7f8c8d; font-size: 1.2em;\">\ud83d\udc41\ufe0f<\/button>\n                    <\/div>\n                <\/div>\n\n                <div id=\"grupo-codigo\" class=\"calcfab-form-group\" style=\"display:none; background:#f1f2f6; padding:15px; border-radius:4px; margin-top:15px; border-left: 4px solid #3498db;\">\n                    <label>C\u00f3digo de Verificaci\u00f3n <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                    <p style=\"font-size:0.85em; color:#7f8c8d; margin-top:0;\">Hemos enviado un c\u00f3digo de 6 d\u00edgitos a tu email.<\/p>\n                    <input type=\"text\" id=\"reg-codigo\" placeholder=\"Ej: 123456\" style=\"text-align:center; font-size:1.5em; letter-spacing:5px; font-weight:bold;\">\n                <\/div>\n                \n                <div style=\"display:flex; gap:10px; margin-top:20px;\">\n                    <button type=\"submit\" style=\"background:#2ecc71; color:white; border:none; padding:10px; border-radius:4px; flex:1; cursor:pointer;\">Registrarse y Guardar<\/button>\n                    <button type=\"button\" id=\"btn-cerrar-registro\" style=\"background:#95a5a6; color:white; border:none; padding:10px; border-radius:4px; cursor:pointer;\">Cancelar<\/button>\n                <\/div>\n            <\/form>\n        <\/div>\n    <\/div> -->\n\n    <div id=\"modal-auth\" style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999; justify-content:center; align-items:center;\">\n        <div style=\"background:#fff; padding:30px; border-radius:8px; width:90%; max-width:450px; position:relative;\">\n        \n            <button type=\"button\" id=\"btn-cerrar-modal-auth\" style=\"position:absolute; top:15px; right:15px; background:none; border:none; font-size:1.5em; cursor:pointer; color:#7f8c8d;\">&times;<\/button>\n\n            <div id=\"vista-login-modal\">\n                <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Iniciar Sesi\u00f3n<\/h2>\n                <form id=\"form-login-modal\">\n                    <div style=\"margin-bottom: 15px;\">\n                        <label style=\"display:block; margin-bottom:5px; font-weight:bold;\">Email<\/label>\n                        <input type=\"email\" id=\"login-email-modal\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                    <\/div>\n                    <div style=\"margin-bottom: 20px;\">\n                        <label style=\"display:block; margin-bottom:5px; font-weight:bold;\">Contrase\u00f1a<\/label>\n                        <input type=\"password\" id=\"login-password-modal\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box;\">\n                    <\/div>\n                    <div style=\"text-align: right; margin-bottom: 15px;\">\n                        <a href=\"#\" id=\"toggle-recuperar-modal\" style=\"color:#7f8c8d; font-size:0.9em;\">\u00bfContrase\u00f1a perdida?<\/a>\n                    <\/div>\n                    <button type=\"submit\" style=\"width:100%; padding:12px; background:#3498db; color:white; border:none; border-radius:4px; font-weight:bold; cursor:pointer;\">Entrar y Guardar<\/button>\n                <\/form>\n                <div style=\"text-align:center; margin-top:20px;\">\n                    <p>\u00bfNo tienes cuenta? <a href=\"#\" id=\"toggle-registro-modal\" style=\"color:#3498db; font-weight:bold;\">Reg\u00edstrate aqu\u00ed<\/a><\/p>\n                <\/div>\n            <\/div>\n\n            <div id=\"vista-recuperar-modal\" style=\"display:none;\">\n                <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Recuperar Contrase\u00f1a<\/h2>\n                <form id=\"form-recuperar-modal\">\n                    <input type=\"email\" id=\"rec-email-modal\" placeholder=\"Tu Email registrado\" required style=\"width:100%; padding:10px; margin-bottom:15px; border:1px solid #bdc3c7; border-radius:4px;\">\n                    \n                    <div id=\"grupo-recuperar-modal-final\" style=\"display:none; background:#f4f6f7; padding:15px; border-radius:4px; margin-bottom:15px;\">\n                        <input type=\"text\" id=\"rec-codigo-modal\" placeholder=\"C\u00f3digo de 6 d\u00edgitos\" style=\"width:100%; padding:10px; margin-bottom:10px; text-align:center; letter-spacing:2px;\">\n                        <input type=\"password\" id=\"rec-password-modal\" placeholder=\"Nueva Contrase\u00f1a\" style=\"width:100%; padding:10px;\">\n                    <\/div>\n                    <button type=\"submit\" id=\"btn-submit-rec-modal\" style=\"width:100%; padding:12px; background:#e67e22; color:white; border:none; border-radius:4px; font-weight:bold;\">Enviar C\u00f3digo<\/button>\n                <\/form>\n                <div style=\"text-align:center; margin-top:20px;\">\n                    <p><a href=\"#\" id=\"recuperar-back-to-login-modal\" style=\"color:#3498db;\">Volver a Iniciar Sesi\u00f3n<\/a><\/p>\n                <\/div>\n            <\/div>\n\n            <div id=\"vista-registro-modal\" style=\"display:none;\">\n                <h2 style=\"text-align: center; color: #2c3e50; margin-bottom: 20px;\">Crea una cuenta gratuita para guardar este escenario y acceder a \u00e9l m\u00e1s tarde.<\/h2>\n                <form id=\"form-registro-rapido\">\n                    <div style=\"display:flex; gap:10px; margin-bottom:15px;\">\n                        <input type=\"text\" id=\"reg-nombre\" placeholder=\"Nombre\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px;\">\n                        <input type=\"text\" id=\"reg-empresa\" placeholder=\"Empresa\" required style=\"width:100%; padding:10px; border:1px solid #bdc3c7; border-radius:4px;\">\n                    <\/div>\n                    <input type=\"email\" id=\"reg-email\" placeholder=\"Email\" required style=\"width:100%; padding:10px; margin-bottom:15px; border:1px solid #bdc3c7; border-radius:4px;\">\n                    <div class=\"calcfab-form-group\"><label>Tel\u00e9fono<\/label><input type=\"text\" id=\"reg-telefono\"><\/div>\n                    <div class=\"calcfab-form-group\">\n                        <label>Contrase\u00f1a <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                        <div style=\"position: relative;\">\n                            <input type=\"password\" id=\"reg-password\" required style=\"width: 100%; padding-right: 40px; box-sizing: border-box;\">\n                            <button type=\"button\" class=\"btn-toggle-pass\" data-target=\"reg-password\" style=\"position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #7f8c8d; font-size: 1.2em;\">\ud83d\udc41\ufe0f<\/button>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"calcfab-form-group\">\n                        <label>Repetir Contrase\u00f1a <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                        <div style=\"position: relative;\">\n                            <input type=\"password\" id=\"reg-password-repeat\" required style=\"width: 100%; padding-right: 40px; box-sizing: border-box;\">\n                            <button type=\"button\" class=\"btn-toggle-pass\" data-target=\"reg-password-repeat\" style=\"position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #7f8c8d; font-size: 1.2em;\">\ud83d\udc41\ufe0f<\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <div id=\"grupo-codigo\" class=\"calcfab-form-group\" style=\"display:none; background:#f1f2f6; padding:15px; border-radius:4px; margin-top:15px; border-left: 4px solid #3498db;\">\n                        <label>C\u00f3digo de Verificaci\u00f3n <span style=\"color:#e74c3c;\">*<\/span><\/label>\n                        <p style=\"font-size:0.85em; color:#7f8c8d; margin-top:0;\">Hemos enviado un c\u00f3digo de 6 d\u00edgitos a tu email.<\/p>\n                        <input type=\"text\" id=\"reg-codigo\" placeholder=\"Ej: 123456\" style=\"text-align:center; font-size:1.5em; letter-spacing:5px; font-weight:bold;\">\n                    <\/div>\n                    \n                    <div style=\"display:flex; gap:10px; margin-top:20px;\">\n                        <button type=\"submit\" style=\"background:#2ecc71; color:white; border:none; padding:10px; border-radius:4px; flex:1; cursor:pointer;\">Registrarse y Guardar<\/button>\n                        <button type=\"button\" id=\"btn-cerrar-registro\" style=\"background:#95a5a6; color:white; border:none; padding:10px; border-radius:4px; cursor:pointer;\">Cancelar<\/button>\n                    <\/div>\n                <\/form>\n                <div style=\"text-align:center; margin-top:20px;\">\n                    <p>\u00bfYa tienes cuenta? <a href=\"#\" id=\"toggle-login-modal\" style=\"color:#3498db; font-weight:bold;\">Inicia sesi\u00f3n<\/a><\/p>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <div id=\"modal-bienvenida-cuenta\" style=\"display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:10000; justify-content:center; align-items:center;\">\n        <div style=\"background:#fff; padding:30px; border-radius:8px; width:90%; max-width:500px; position:relative; box-shadow: 0 10px 25px rgba(0,0,0,0.2);\">\n            <button type=\"button\" id=\"btn-cerrar-bienvenida\" style=\"position:absolute; top:15px; right:15px; background:none; border:none; font-size:1.5em; cursor:pointer; color:#7f8c8d;\">&times;<\/button>\n            \n            <h2 style=\"text-align: center; color: #2c3e50; margin-top:0; border-bottom: 2px solid #3498db; padding-bottom: 10px;\">\ud83d\udcca Estado de tu Licencia<\/h2>\n            \n            <div id=\"bienvenida-contenido-limites\" style=\"margin-top: 20px; font-size: 1.05em; color: #34495e; line-height: 1.6;\">\n                <\/div>\n\n            <div style=\"margin-top: 25px; padding: 15px; background: #f8f9fa; border-left: 4px solid #f39c12; border-radius: 4px; font-size: 0.9em; color: #7f8c8d;\">\n                \ud83d\udca1 <b>\u00bfNecesitas m\u00e1s capacidad?<\/b><br>\n                Si has alcanzado tus l\u00edmites o deseas ampliar las funcionalidades de tu cuenta, contacta con nosotros en <b>info@claridia.com<\/b> o con tu distribuidor para solicitar una ampliaci\u00f3n de licencia.\n            <\/div>\n\n            <button type=\"button\" id=\"btn-entrar-simulador\" style=\"width:100%; padding:12px; margin-top:20px; background:#2ecc71; color:white; border:none; border-radius:4px; font-weight:bold; cursor:pointer; font-size:1.1em;\">Comenzar a trabajar<\/button>\n        <\/div>\n    <\/div>\n\n<\/div>\n","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-237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/pages\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":1,"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/pages\/237\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/pages\/237\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/claridia.com\/web\/wp-json\/wp\/v2\/media?parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}